:root{
  --size: 420px;             /* legacy variable; kept for compatibility */
  --bg: #eeeeee;
  --input-gap-x: 10px;

  /* Donut sizing and appearance */
  --donut-size: 420px;       /* change this single value to resize the whole donut */
  --donut-bg: var(--bg);
  --donut-padding: 100;
  --donut-radius: 0;

  /* Tile / sector colors */
  --tile-default: #d7e1ff;
  --tile-active: #ffc04d;
  --label: #334155;

  /* Separators */
  --separator-color: #eeeeee;
  --separator-width: 5px;

  /* Input line spacing */
  --input-gap: 0px;
}

/* Page layout (centers the container) */
html, body {
  height: 100%;
  margin: 0;
  background: var(--donut-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container that stacks input line above donut and controls overall width */
.donut-container {
  position: relative;
  width: var(--donut-size);
  display: inline-block;
  box-sizing: border-box;
}

/* Wrapper that controls the SVG size (maintains viewBox aspect) */
.donut-wrap {
  width: 100%;
  max-width: 300px;
  height: var(--donut-size);
  padding: var(--donut-padding);
  box-sizing: border-box;
  border-radius: var(--donut-radius);

  display: block;       /* ensure block-level element */
  margin-left: auto;    /* center horizontally */
  margin-right: auto;   /* center horizontally */
}

/* Ensure SVG fills wrapper */
.donut-wrap svg,
#donut {
  width: 100%;
  height: 100%;
  display: block;
}


/* container already .donut-wrap.small#donut-wrap */
.donut-wrap {
  position: relative; /* ensure positioned ancestor for absolute children */
}

/* make outer svg fill the container */
.donut-wrap svg#donut {
  display: block;
  width: 100%;
  height: 100%;
}

/* center the orb SVG exactly over the donut */
.donut-wrap svg#orbSVG {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + 3px), calc(-50% + 1px));
  width: 40%;
  height: 40%;
  pointer-events: none;
}


/* Input line (cursor) positioned above the donut, horizontally centered */
#InputLine {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + var(--input-gap)); /* places it just above donut top edge */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* decorative by default; remove if interactive */
  z-index: 10;
}

/* Scale the cursor relative to donut size; adjust multiplier to taste */
.donut-container #InputLine svg {
  width: calc(var(--donut-size) * 0.04); /* 4% of donut width */
  height: auto;
  display: block;
  shape-rendering: crispEdges;
}

/* Sector appearance */
.sector {
  fill: var(--tile-default);
  stroke: none;               /* stroke off for clean separators */
  stroke-width: 6;
  cursor: pointer;
  transition: fill .18s, stroke .18s;
  -webkit-tap-highlight-color: transparent;
}
.sector.active {
  fill: var(--tile-active);
  stroke: none;
}

/* Remove default focus ring; keep ability to add custom focus styles if needed */
.sector:focus,
.sector:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Label text */
.label {
  fill: var(--label);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  font-size: 60px; /* default; JS can override per-instance */
}

/* Prevent mobile tap highlight on text too */
svg text.label {
  -webkit-tap-highlight-color: transparent;
}

/* Separator styling (lines drawn by JS get this class) */
.sector-separator {
  stroke: var(--separator-color);
  stroke-width: var(--separator-width);
  stroke-linecap: butt;
  pointer-events: none;
}

/* make separators invisible by matching the donut background */
.sector-separator {
  stroke: var(--donut-bg);
  stroke-width: var(--separator-width, 2px);
  stroke-linecap: butt;
  pointer-events: none;
}

/* Helpful preset sizes (add class to donut-wrap) */
.donut-wrap.small  { --donut-size: 240px; }
.donut-wrap.medium { --donut-size: 360px; }
.donut-wrap.large  { --donut-size: 560px; }

/* Legacy compatibility: keep svg rules using --size if some code still expects it */
svg { width: var(--size); height: var(--size); display:block; }

/* Utility: hide InputLine when container is too small (optional) */
@media (max-width: 220px) {
  #InputLine { display: none; }
}


/* make InputLine text visually match the donut labels */
#InputLine,
#InputLine * {
  color: var(--label);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* scaled font-size relative to donut size (adjust multiplier to taste) */
#InputLine {
  --input-font-scale: 0.08; /* 6% of donut size; tweak between 0.04-0.09 */
  font-size: calc(var(--donut-size) * var(--input-font-scale));
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* if you place plain HTML text inside the div */
#InputLine span {
  color: var(--label);
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  pointer-events: none;
  user-select: none;
}

/* if using an inline SVG <text> inside #InputLine (applies to your cursor SVG or SVG text) */
#InputLine svg text,
#InputLine svg .label {
  fill: var(--label);
  font-family: inherit;
  font-weight: inherit;
  font-size: calc(var(--donut-size) * var(--input-font-scale));
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

/* Force separators to be visible and not overridden */
.sector-separator {
  stroke: var(--separator-color) !important;
  stroke-width: var(--separator-width) !important;
  stroke-linecap: butt !important;
  pointer-events: none !important;
  shape-rendering: crispEdges;
}


#InputLine {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--input-gap-x);
  pointer-events: none;
}

#InputLine #InputLine_text,
#InputLine span {
  margin: 0;
  padding: 0;
  display: inline-block;
}

#InputLine svg {
  vertical-align: middle;
  margin: 0;
  padding: 0;
  display: inline-block;
}


/* no vertical gap with surrounding elements; centers children horizontally and vertically within the element */
#controls {
  display: flex;
  justify-content: center; /* center buttons horizontally */
  align-items: center;     /* center buttons vertically inside this container */
  gap: 12px;
  margin: 0;               /* removes vertical spacing to other elements */
  padding: 0;              /* optional: remove internal vertical padding */
  width: 100%;
  box-sizing: border-box;
}

/* circular buttons: fixed size, center content, no external margins */
#controls button {
  margin: 0;
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: none;
  background: var(--button-bg, #ddd);
  color: var(--button-fg, #111);
  cursor: pointer;
  /* keep visuals stable; no transition for immediate press feel */
  transition: none;
  transform: translateY(0);
}

/* depress 5px on mouse/touch press */
#controls button:active {
  transform: translateY(3px);
  /* subtle visual reinforcement (optional) */
  filter: brightness(0.95);
  box-shadow: none;
}


/* ------------------------------------------------------ */
/* ORB */
/* ------------------------------------------------------ */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* top-level control for swirl speed (shorter = faster) */
:root {
  --swirl-duration: 20s; /* change this value to control speed */
  --c1: oklch(44.4% 0.177 26.899);
  --c2: oklch(85.2% 0.199 91.936);
  --c3: oklch(58.8% 0.158 241.966);
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  background-color: var(--bg);
}

.orb {
  display: grid;
  grid-template-areas: "stack";
  inline-size: min(80vmin, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
}

.orb::before,
.orb::after {
  content: "";
  display: block;
  grid-area: stack;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translateZ(0);
}

.orb::before {
  background: conic-gradient(
      from calc(var(--angle) * 2) at 25% 70%,
      var(--c3),
      transparent 20% 80%,
      var(--c3)
    ),
    conic-gradient(
      from calc(var(--angle) * 2) at 45% 75%,
      var(--c2),
      transparent 30% 60%,
      var(--c2)
    ),
    conic-gradient(
      from calc(var(--angle) * -3) at 80% 20%,
      var(--c1),
      transparent 40% 60%,
      var(--c1)
    ),
    conic-gradient(
      from calc(var(--angle) * 2) at 15% 5%,
      var(--c2),
      transparent 10% 90%,
      var(--c2)
    ),
    conic-gradient(
      from calc(var(--angle) * 1) at 20% 80%,
      var(--c1),
      transparent 10% 90%,
      var(--c1)
    ),
    conic-gradient(
      from calc(var(--angle) * -2) at 85% 10%,
      var(--c3),
      transparent 20% 80%,
      var(--c3)
    );
  box-shadow: inset var(--bg) 0 0 5vmin 1vmin;
  filter: blur(3vmin) contrast(5);
  animation: rotate var(--swirl-duration) linear infinite;
}

.orb::after {
  --dot: 1.5px;
  background-image: radial-gradient(
    circle at center,
    var(--bg) var(--dot),
    transparent var(--dot)
  );
  background-size: calc(var(--dot) * 2) calc(var(--dot) * 2);
  mask-image: radial-gradient(black 25%, transparent 75%);
  backdrop-filter: blur(8vmin) contrast(10);
  mix-blend-mode: overlay;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}


/* ------------------------------------------------------ */
/* VS box
/* ------------------------------------------------------ */

/* ---------- GLOBAL CONSTRAINTS ---------- */
/* container base: change these to taste (max-width / max-height) */

#solo_box {
  position: block;
  left: 0;
  right: 0;
  top: 30;
  min-width: 200px;
  min-height: 195px;               /* set to the actual height you want */
  margin-bottom: 50px;
  padding: 5px;              /* optional internal spacing */
  box-sizing: border-box;
  z-index: 1000;              /* high enough to sit on top of page content */
  background: rgba(255,255,255,0.95);
  /* respect iPhone safe area */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}


/* ensure flex containers behave identically across browsers */
#vs_box, .svg-row, .svg-wrap, #vs_box .svg-wrap > svg foreignObject > body {
  display: -webkit-box;      /* legacy Safari */
  display: -ms-flexbox;      /* IE */
  display: -webkit-flex;     /* modern Safari */
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* if you rely on align-items: stretch ensure an explicit height on parent */
.svg-wrap { height: 100px; min-height: 0; }


/* ---------- MODE: fit-by-height (recommended for fixed-height UI bars) ----------
   - The container defines a fixed visual height (or max-height); SVG fills that height
   - Use class "fit-by-height" on .svg-wrap to enable */
.svg-wrap.fit-by-height { 
  height: 100px;       /* visible height you want the SVG to fit into */
  max-height: 100px;   /* guard */
}

/* ---------- MODE: fit-by-width (recommended if width constraint is primary) ----------
   - Container height is flexible; SVG fills the container width and scales down.
   - Use class "fit-by-width" on .svg-wrap to enable */
.svg-wrap.fit-by-width {
  height: auto;        /* allow height to be determined by aspect ratio */
  max-height: 100px;   /* optional hard cap */
}

/* ---------- SVG SCALING RULES (no inline width/height needed) ----------
   - For fit-by-height: let the SVG fill the container height (height-first).
   - For fit-by-width: let the SVG fill the container width (width-first).
   - preserveAspectRatio on the SVG controls "meet" vs "slice" behavior; we recommend "xMidYMid meet". */
.svg-wrap.fit-by-height > svg {
  height: 100%;        /* fill container height */
  width: auto;         /* width determined by aspect ratio */
  max-width: 100%;     /* but never overflow container horizontally */
  display: block;
}

.svg-wrap.fit-by-width > svg {
  width: 100%;         /* fill container width */
  height: auto;        /* height determined by aspect ratio */
  max-height: 100%;    /* but never exceed max-height */
  display: block;
}

/* ---------- OPTIONAL: center + ensure no baseline gaps ---------- */
.svg-wrap > svg {
  vertical-align: middle;
  line-height: 0;
  display: block;
}

/* ---------- USAGE NOTES ----------
1. Keep the SVG with viewBox="0 0 200 250" and preserveAspectRatio="xMidYMid meet".
2. Toggle which sizing strategy you want by setting the container class:
     <div id="vs_box" class="svg-wrap fit-by-height">  OR
     <div id="vs_box" class="svg-wrap fit-by-width">
3. Do NOT set width/height attributes on the inline SVG (CSS controls sizing).
4. If the SVG contains foreignObject/HTML, those inner elements should be responsive as well.
*/

/*---------------------------------------------------*/
/* COMPACT OVERRIDES - drop this after your main CSS */
/*---------------------------------------------------*/

/* ensure parent stacks them with no gap (safe fallback if you can't edit parent markup) */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* stack from the top, keep horizontal centering if desired */
body {
  display: flex !important;
  flex-direction: column;
  align-items: center;       /* keeps children horizontally centered */
  justify-content: flex-start; /* start at the top instead of centering vertically */
  min-height: 100vh;
}

/* ensure the very first child doesn't get pushed down by default spacing */
body > *:first-child {
  margin-top: 0;
}

/* keep your spacing controls (avoid unintended centering) */
#vs_box,
.donut-container {
  margin-bottom: 50px !important;
}

/*---------------------------------------------------*/
/* Header */
/*---------------------------------------------------*/


:root{ --header-height:30px; }

#header{
  position:sticky;
  top:0;
  left:0;
  right:0;
  height:var(--header-height);
  display:flex;
  align-items:center;
  padding:0 12px;
  color:#000;
  z-index:1000;
  box-sizing:border-box;
  color: #999;
}

/* element that must sit at the far right */
.header-actions { margin-left: auto; display:inline-flex; gap:8px; align-items:center; }
/* element that must sit at the far right */

#header button{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  color: #b296ff;
  padding:var(--btn-pad);
  border-radius:var(--btn-radius);
  font-weight:700;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/*---------------------------------------------------*/
/* FLoating message */
/*---------------------------------------------------*/


.floating-msg {
  position: absolute;
  top: 80px;
  left: 50%;
  pointer-events: none;
  white-space: nowrap;
  transform: translateX(-50%);
  will-change: transform, opacity;
  font-weight: 600;
  backface-visibility: hidden;
  user-select: none;
  transition: transform 900ms cubic-bezier(.2,.9,.2,1), opacity 900ms ease;
  opacity: 1;
  z-index: 9999;

  /* new background + readability tweaks */
  background: rgba(255, 255, 255, 0.90); /* white, 90% opaque */
  color: #111;                           /* readable text color */
  padding: 6px 12px;                    /* breathing room */
  border-radius: 8px;                   /* soft corners */
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12); /* subtle lift */
  backdrop-filter: blur(4px);           /* optional frosted look on supporting browsers */
}


/*---------------------------------------------------*/
/* Found words display */
/*---------------------------------------------------*/
/* span full viewport but cap at 600px and center */
#found_words {
  position: relative;                       /* keep in document flow vertically */
  width: min(100vw, 600px);                 /* fill viewport up to 600px */
  left: 50%;                                /* center reference point */
  transform: translateX(-50%);              /* perfectly center the capped box */
  box-sizing: border-box;
  padding: 10px 16px;
  background: #eee;
  border: 6px solid #ddd;
  color: #999;
  border-radius: 8px;
  white-space: nowrap;                      /* preserve unbroken words if desired */
  overflow: visible;
  z-index: 20;
  margin-top: 10px;
}

/* table fills the capped box */
#found_words table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

/* keep words unbroken in cells */
#found_words td {
  white-space: nowrap;
  padding: 0px 5px;
  font-weight: 700;
  color: #9aa0a6;
}

/* --- Fallback when a transformed ancestor makes centering behave incorrectly --- */
/* If you detect an ancestor with transform/filter/perspective, add .fw-fixed to the body
   or to #found_words itself via JS to apply the fixed fallback. */
.fw-fixed #found_words,
#found_words.fw-fixed {
  position: fixed !important;
  left: 50% !important;
  top: auto !important;     /* keep original vertical document flow if you wish; set top if needed */
  transform: translateX(-50%) !important;
  width: min(100vw, 600px) !important;
  z-index: 9999 !important;
}




/*---------------------------------------------------*/
/* MENU */
/*---------------------------------------------------*/

/* simple hidden class (removed from layout) */
.u-hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; }

/* optional visually-hidden for screen-reader-only */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*---------------------------------------------------*/
/* MOBILE ZOOM FIX */
/*---------------------------------------------------*/

/* Mobile-only responsive overrides (CSS-first) */
@media (max-width: 900px), (pointer: coarse) {
  /* keep most SVGs responsive on mobile */
  svg {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* make key UI slots scale safely on mobile */
  #vs_box,
  .svg-wrap > svg,
  #logo svg,
  #donut,
  #orbSVG {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* ensure vs_box doesn't force page zoom; allow internal scrolling if tall */
  #vs_box {
    max-height: 72vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* avoid full-page vertical centering that can cause cut-off */
  html, body { height: auto !important; min-height: 100vh; display: block !important; }
  body { padding-top: env(safe-area-inset-top, 8px); }
}


/* --- Replace legacy global SVG sizing with a safe default --- */

/* Default: make SVGs responsive and never force the page scale */
svg:not([data-legacy-size]) {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}

/* UI slots that should fill their boxes explicitly (keeps current behavior) */
.svg-wrap > svg,
#vs_box svg,
#logo svg,
#donut,
#orbSVG {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  box-sizing: border-box;
}

/* Only keep legacy fixed-square sizing when explicitly requested */
svg[data-legacy-size="true"] {
  width: var(--size);
  height: var(--size);
}


/* Stop vertical-centering sitewide; keep natural top-to-bottom flow */
html, body {
  height: auto;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Use normal document flow on small and large viewports (no place-items center) */
body {
  display: block;
  font-family: system-ui, sans-serif;
  background-color: var(--bg, #eeeeee);
  padding-top: env(safe-area-inset-top, 0);
}

/* Center main UI blocks horizontally but do not center vertically */
.donut-container,
#logo,
#vs_box,
#found_words,
#controls {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Keep the donut centered horizontally while remaining responsive */
.donut-container {
  width: min(var(--donut-size), 100%);
  max-width: 100vw;
  display: block;
  margin-top: 1.25rem;    /* space from top content */
  margin-bottom: 1.5rem;
}

/* Ensure #vs_box sits in normal flow and is horizontally centered */
#vs_box {
  width: 100%;
  max-width: 980px;
  margin: 0.5rem auto 1rem;
  box-sizing: border-box;
}

/* If you want the large logo to remain visually centered but not fixed: */
#logo {
  width: min(92vw, 500px);
  max-width: 100%;
  margin: 1.25rem auto;
  position: static;
  transform: none;
}

/* Keep SVGs responsive inside these centered containers */
.donut-wrap svg,
#donut,
#orbSVG,
#logo svg,
#vs_box svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* Preserve any intended small-screen behavior: keep content flowing from top */
@media (min-width: 1200px) {
  /* If you want a fixed, centered overlay on very large screens, enable it here */
  /* #logo { position: fixed; left:50%; top:50%; transform: translate(-50%,-50%); } */
}


/* === orb / donut proportional sizing (paste at EOF) === */

/* Make the donut wrapper size by width (keeps a stable square) instead of forcing a fixed height */
.donut-wrap {
  width: 100%;
  height: auto;                /* allow height to follow the rendered SVG aspect */
  aspect-ratio: 1 / 1;         /* keep donut-wrap square */
  padding: var(--donut-padding);
  box-sizing: border-box;
  position: relative;          /* required for absolutely-positioned orb */
}

/* Let the donut SVG size by width and preserve aspect ratio */
.donut-wrap svg#donut,
.donut-wrap > svg#donut {
  width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
}

/* Make orbSVG size relative to the donut-wrap instead of fixed px.
   Use percentage height so it always scales with the donut's rendered height. */
.donut-wrap svg#orbSVG,
.donut-wrap > svg#orbSVG {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* keep perfectly centered */
  width: auto;                       /* let height control its size */
  height: 40%;                       /* 50% of donut-wrap height; tweak to taste */
  max-height: 40%;                   /* safety cap so it never overgrows on very small screens */
  pointer-events: none;
  display: block;
  box-sizing: border-box;
}

/* If you want a slightly smaller orb on phones, reduce the percentage under a media query */
@media (max-width: 480px) {
  .donut-wrap svg#orbSVG { height: 40%; max-height: 40%; }
}

/* If you still rely on explicit --donut-size for some layouts, make it fluid with clamp */
:root {
  --donut-size: clamp(180px, 60vmin, 420px);
}

/* Keep .donut-container centered horizontally and never wider than viewport */
.donut-container {
  width: min(var(--donut-size), 100%);
  max-width: 100vw;
  margin: 0 auto;
  box-sizing: border-box;
}

/* MOBILE: force InputLine_text to a fixed absolute font-size */
@media (max-width: 900px), (pointer: coarse) {
  html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* prevent Safari/Android auto-resize */

  /* fixed pixel size you want — change 16px to any px value */
  #InputLine_text {
    font-size: 35px !important;
    line-height: 1 !important;
    white-space: nowrap;         /* keep as single-line if desired */
    transform: none !important;  /* avoid inherited transforms scaling text */
    -webkit-transform: none !important;
    display: inline-block;       /* prevents strange flow/scale under flex/grid */
  }

  /* ensure the container does not shrink the text (flex children) */
  #InputLine { font-size: 0; }            /* neutralize inherited vw-based sizes if any */
  #InputLine #InputLine_text { font-size: 35px !important; } /* re-apply exact value */
}

/* ===== INPUTLINE: robust centering + sane mobile font-size ===== */


#header_wrapper,#return_to_main_menu,
#competitive_score_wrapper {
  display: flex;
  flex-direction: column;    /* stack children vertically */
  align-items: center;       /* horizontal center for all children */
  text-align: center;        /* center inline text inside children */
  gap: 0.5rem;               /* small spacing between children */
  width: 100%;               /* keep wrapper responsive */
  box-sizing: border-box;
}

#competitive_score{
  font-size:1.0rem;
  color:#777;
  background:#eeeeee;
  border:4px solid #ccc;
  padding:8px 10px;
  border-radius:10px;
  font-weight:600;
  margin-bottom:10px;
}

#return_to_main_menu button{
  font-size:0.9rem;
  background:#ddd;
  color:#aaa;
  border:4px solid #ccc;
  padding:8px 10px;
  border-radius:9999px;
  cursor:pointer;
  font-weight:600;
  margin:0px;
}

.stat_text {
  font-size: 0.9rem;            /* small enough to fit */  
}

.stat_value {
  font-size: 1.5rem;            /* small enough to fit */  
}

#rules_menu {
  max-width: 600px;
}