/* ---------------------------------------------------------------
   Gate Rush HUD / overlays - hyper-casual mobile game chrome.
   Pale icy palette, chunky rounded blocks, no external assets.
   --------------------------------------------------------------- */

:root {
  /* ice / paper */
  --ice-0:   #FFFFFF;
  --ice-1:   #EFF6FB;
  --ice-2:   #DCE9F3;
  --ice-3:   #C3D5E4;
  --ice-4:   #A8C0D4;

  /* ink */
  --ink:     #1B2230;
  --ink-2:   #2C3446;
  --ink-3:   #4A5670;

  /* crowd blue */
  --blue:      #5EB8E8;
  --blue-hi:   #8AD2F3;
  --blue-lo:   #2F81B7;
  --blue-deep: #22608B;

  /* rival red */
  --red:      #E8433A;
  --red-hi:   #F4715F;
  --red-lo:   #C42B25;
  --red-deep: #8E1E19;

  /* accents */
  --green:     #4ECB71;
  --green-hi:  #7BE197;
  --green-lo:  #2FA355;
  --green-deep:#1F7A3E;
  --gold:      #FFC02E;
  --gold-lo:   #E09A17;

  /* progress track */
  --seg-empty: #39415A;
  --seg-gap:   #1E2734;

  --font: ui-rounded, "SF Pro Rounded", "Baloo 2", Fredoka, "Nunito", "Segoe UI Variable Display",
          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* one knob to shrink the whole HUD on small screens */
  --ui: 1;
  --avatar: 52px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --shadow-soft: 0 10px 24px rgba(21, 38, 56, .28);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #C4D0DC;
  color: var(--ink-2);
  font-family: var(--font);
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-weight: inherit; cursor: pointer; border: 0; background: none; }
svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* the single most important rule: JS toggles .hidden on overlays */
[hidden] { display: none !important; }

.only-touch { display: none; }
.only-wide  { display: inline; }

/* White text that has to survive on top of the game scene.
   `paint-order: stroke fill` draws one clean outline behind the glyph;
   stacking eight offset shadows to fake it muddies the counters and
   the joins at display sizes. */
.stroked {
  color: #fff;
  paint-order: stroke fill;
  -webkit-text-stroke: 4px var(--ink);
  /* soft drop only — a hard offset shadow this close to a fat stroke
     reads as a second, blurred copy of the word rather than depth */
  text-shadow: 0 5px 12px rgba(27, 34, 48, .38);
}
.stroked--lg {
  -webkit-text-stroke-width: 6px;
  text-shadow: 0 8px 18px rgba(27, 34, 48, .4);
}

/* ---------- shell / stage ---------- */
.game-shell {
  width: 100vw;
  height: 100dvh;
  height: 100vh;
  display: flex;
}
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #8CA0BC 0%, #A6B7CC 25%, #C4D0DC 60%, #DFE6EB 100%);
}
#gameCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.touch-zones { position: absolute; inset: 0; z-index: 5; display: flex; }
.touch-zone  { flex: 1 1 50%; }

/* ================================ HUD ================================ */
.hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: calc(10px * var(--ui));
  padding: calc(12px * var(--ui) + env(safe-area-inset-top)) calc(14px * var(--ui)) 0;
  pointer-events: none;
}
.hud a, .hud button { pointer-events: auto; }

.hud__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(7px * var(--ui));
  min-width: 0;
}

.hud__level {
  font-size: calc(clamp(13px, 2.1vw, 19px) * var(--ui));
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}

/* round chunky HUD buttons (back / pause) */
.hud-btn {
  width: calc(44px * var(--ui));
  height: calc(44px * var(--ui));
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(11px * var(--ui));
  border-radius: 50%;
  color: var(--ink-2);
  background: linear-gradient(180deg, var(--ice-0) 0%, var(--ice-2) 100%);
  border: 3px solid #fff;
  box-shadow: 0 5px 0 rgba(44, 52, 70, .28), 0 8px 16px rgba(21, 38, 56, .26);
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.hud-btn svg { stroke-width: 3.2; }
.hud-btn:hover { filter: brightness(1.04); }
.hud-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(44, 52, 70, .28), 0 3px 8px rgba(21, 38, 56, .26);
}
.hud-btn:focus-visible { outline: 3px solid var(--blue-hi); outline-offset: 3px; }
#pauseBtn svg { fill: currentColor; stroke: none; }

/* ---------- progress row ---------- */
.progress-row {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--ui));
  max-width: 100%;
}

.progress-track {
  position: relative;
  width: calc(clamp(150px, 34vw, 300px) * var(--ui));
  height: calc(24px * var(--ui));
  border-radius: calc(13px * var(--ui));
  border: 3px solid #fff;
  overflow: hidden;
  background-color: var(--seg-gap);
  /* discrete blocks: 6 segments, 4px gutters */
  background-image: repeating-linear-gradient(
    90deg,
    var(--seg-empty) 0,
    var(--seg-empty) calc((100% - 20px) / 6),
    var(--seg-gap)   calc((100% - 20px) / 6),
    var(--seg-gap)   calc((100% - 20px) / 6 + 4px)
  );
  box-shadow: 0 5px 0 rgba(27, 34, 48, .26), 0 8px 16px rgba(21, 38, 56, .24),
              inset 0 3px 0 rgba(0, 0, 0, .28);
}
.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6F4FD 46%, #A9E1F2 100%);
  box-shadow: inset 0 -3px 0 rgba(47, 129, 183, .35);
  transition: width .12s linear;
}
/* re-cut the gutters on TOP of the fill so it stays segmented */
.progress-track::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    transparent     0,
    transparent     calc((100% - 20px) / 6),
    var(--seg-gap)  calc((100% - 20px) / 6),
    var(--seg-gap)  calc((100% - 20px) / 6 + 4px)
  );
}
/* travelling gleam on the filled part */
.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%);
  animation: gleam 2.6s linear infinite;
}
@keyframes gleam { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* ---------- avatar tiles (pure CSS crowds) ---------- */
.avatar {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--avatar) * var(--ui));
  height: calc(var(--avatar) * var(--ui));
  border-radius: calc(14px * var(--ui));
  border: 3px solid #fff;
  overflow: hidden;
  background: linear-gradient(180deg, #E8F1F7 0%, #DCE6ED 46%, #CBD8E2 100%);
  box-shadow: 0 5px 0 rgba(27, 34, 48, .24), 0 8px 16px rgba(21, 38, 56, .26);
}
/* the little road wedge */
.avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #D4D4D1 0%, #C8C8C5 55%, #BCBCB9 100%);
  clip-path: polygon(40% 30%, 60% 30%, 90% 100%, 10% 100%);
}
/* glossy tile sheen */
.avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}
.avatar__crowd { position: absolute; inset: 0; }

/* blue mob: body ellipse + head circle per figure, back rows first */
.avatar--player .avatar__crowd {
  background-image:
    radial-gradient(circle 2.6px at 50% 55%, var(--blue-hi) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 3.4px 4.4px at 50% 66%, var(--blue) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 2.4px at 31% 48%, var(--blue-hi) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 3.1px 4.1px at 31% 58%, var(--blue-lo) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 2.4px at 69% 48%, var(--blue-hi) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 3.1px 4.1px at 69% 58%, var(--blue-lo) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 2.1px at 50% 39%, var(--blue) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 2.8px 3.6px at 50% 48%, var(--blue-deep) 0 92%, rgba(0,0,0,0) 100%);
}
/* red rival + gold crown on the boss */
.avatar--rival .avatar__crowd {
  background-image:
    radial-gradient(ellipse 3.4px 1.6px at 50% 44%, var(--gold) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 2.8px at 50% 54%, var(--red-hi) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 3.8px 4.8px at 50% 67%, var(--red) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 2.4px at 30% 48%, var(--red-hi) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 3.1px 4.1px at 30% 58%, var(--red-lo) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 2.4px at 70% 48%, var(--red-hi) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 3.1px 4.1px at 70% 58%, var(--red-lo) 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 2.8px 3.6px at 50% 47%, var(--red-deep) 0 92%, rgba(0,0,0,0) 100%);
}

/* ---------- army count readout ---------- */
@property --cnt-1 { syntax: "<color>"; inherits: false; initial-value: #8AD2F3; }
@property --cnt-2 { syntax: "<color>"; inherits: false; initial-value: #3FA0E8; }

.count-badge {
  --cnt-1: #8AD2F3;
  --cnt-2: #3FA0E8;
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui));
  padding: calc(5px * var(--ui)) calc(18px * var(--ui)) calc(6px * var(--ui)) calc(12px * var(--ui));
  border-radius: 999px;
  border: 3px solid #fff;
  background: linear-gradient(180deg, var(--cnt-1) 0%, var(--cnt-2) 100%);
  color: #fff;
  font-size: calc(clamp(20px, 3.4vw, 30px) * var(--ui));
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(27, 34, 48, .45), 0 3px 6px rgba(27, 34, 48, .35);
  box-shadow: 0 6px 0 var(--blue-deep), 0 10px 18px rgba(21, 38, 56, .32);
  transform-origin: 50% 50%;
  will-change: transform;
}
/* tiny white runner glyph */
.count-badge::before {
  content: "";
  width: calc(17px * var(--ui));
  height: calc(21px * var(--ui));
  flex: 0 0 auto;
  background-image:
    radial-gradient(circle 4px at 50% 22%, #fff 0 92%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 5px 6.5px at 50% 66%, #fff 0 92%, rgba(0,0,0,0) 100%);
  background-repeat: no-repeat;
  opacity: .95;
}

.count-badge.bump-up   { animation: bumpUp   .42s cubic-bezier(.34, 1.56, .64, 1); }
.count-badge.bump-down { animation: bumpDown .42s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes bumpUp {
  0%   { transform: scale(1);              --cnt-1: #8AD2F3; --cnt-2: #3FA0E8; }
  16%  { transform: scale(1.30, 1.24);     --cnt-1: #A8F0C0; --cnt-2: var(--green); }
  62%  { transform: scale(1.06);           --cnt-1: #A8F0C0; --cnt-2: var(--green); }
  100% { transform: scale(1);              --cnt-1: #8AD2F3; --cnt-2: #3FA0E8; }
}
@keyframes bumpDown {
  0%   { transform: scale(1);              --cnt-1: #8AD2F3; --cnt-2: #3FA0E8; }
  18%  { transform: scale(1.16, .78);      --cnt-1: #FF9084; --cnt-2: var(--red); }
  62%  { transform: scale(.98, 1.03);      --cnt-1: #FF9084; --cnt-2: var(--red); }
  100% { transform: scale(1);              --cnt-1: #8AD2F3; --cnt-2: #3FA0E8; }
}

/* ============================ SCENE TOAST ============================ */
.scene-toast {
  position: absolute;
  top: 21%;
  left: 50%;
  z-index: 18;
  transform: translate(-50%, -16px) scale(.82);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: calc(9px * var(--ui)) calc(26px * var(--ui)) calc(11px * var(--ui));
  border-radius: 999px;
  border: 3px solid #fff;
  color: #fff;
  font-size: clamp(18px, 4.2vw, 32px);
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 3px 0 rgba(27, 34, 48, .45), 0 5px 10px rgba(27, 34, 48, .4);
  background: linear-gradient(180deg, var(--ink-3) 0%, var(--ink-2) 100%);
  box-shadow: 0 7px 0 rgba(27, 34, 48, .35), 0 12px 24px rgba(21, 38, 56, .32);
  transition: opacity .18s ease, transform .26s cubic-bezier(.34, 1.56, .64, 1);
}
.scene-toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.scene-toast.tone-good    { background: linear-gradient(180deg, var(--green-hi) 0%, var(--green) 100%); box-shadow: 0 7px 0 var(--green-deep), 0 12px 24px rgba(21, 38, 56, .32); }
.scene-toast.tone-bad     { background: linear-gradient(180deg, var(--red-hi) 0%, var(--red) 100%);     box-shadow: 0 7px 0 var(--red-deep),   0 12px 24px rgba(21, 38, 56, .32); }
.scene-toast.tone-neutral { background: linear-gradient(180deg, var(--blue-hi) 0%, var(--blue) 100%);   box-shadow: 0 7px 0 var(--blue-deep),  0 12px 24px rgba(21, 38, 56, .32); }

/* =========================== LANE BUTTONS =========================== */
.lane-controls { display: none; }
.lane-btn {
  position: absolute;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 22;
  width: 72px;
  height: 72px;
  padding: 18px;
  border-radius: 50%;
  color: var(--ink-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(220, 233, 243, .92) 100%);
  border: 4px solid #fff;
  box-shadow: 0 7px 0 rgba(44, 52, 70, .3), 0 12px 22px rgba(21, 38, 56, .3);
  transition: transform .08s ease, box-shadow .08s ease;
}
.lane-btn svg { stroke-width: 3.4; }
#laneLeftBtn  { left:  calc(18px + env(safe-area-inset-left)); }
#laneRightBtn { right: calc(18px + env(safe-area-inset-right)); }
.lane-btn:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 rgba(44, 52, 70, .3), 0 4px 10px rgba(21, 38, 56, .3);
}

/* ============================= OVERLAYS ============================= */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 90% at 50% 40%, rgba(120, 160, 195, .38) 0%, rgba(35, 58, 84, .55) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
  animation: scrimIn .22s ease-out both;
  overflow: auto;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

.overlay__card {
  position: relative;
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.4vw, 18px);
  text-align: center;
  padding: clamp(22px, 4vw, 34px) clamp(20px, 5vw, 42px) clamp(24px, 4.4vw, 36px);
  border-radius: var(--radius-lg);
  border: 4px solid #fff;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F7FC 52%, #DCE9F3 100%);
  box-shadow: 0 10px 0 rgba(44, 52, 70, .22), 0 26px 54px rgba(21, 38, 56, .42),
              inset 0 3px 0 rgba(255, 255, 255, .9);
  animation: cardIn .4s cubic-bezier(.34, 1.56, .64, 1) both;
}
.overlay__card--slim { width: min(360px, 100%); }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(26px) scale(.86); }
  to   { opacity: 1; transform: none; }
}

.overlay__eyebrow {
  margin: 0;
  font-size: clamp(10px, 1.6vw, 12px);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-lo);
}

/* title sits on a chunky blue ribbon so white outlined text reads on the pale card */
.overlay__title {
  margin: 0;
  padding: clamp(8px, 1.6vw, 12px) clamp(18px, 4vw, 30px) clamp(10px, 1.8vw, 14px);
  border-radius: var(--radius-md);
  border: 4px solid #fff;
  background: linear-gradient(180deg, var(--blue-hi) 0%, var(--blue) 55%, #3FA0E8 100%);
  box-shadow: 0 7px 0 var(--blue-deep), 0 12px 22px rgba(21, 38, 56, .3);
  font-size: clamp(26px, 6vw, 44px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.overlay__title--sm { font-size: clamp(22px, 5vw, 32px); }

.overlay__body {
  margin: 0;
  max-width: 42ch;
  color: var(--ink-3);
  font-size: clamp(14px, 2.2vw, 16px);
  font-weight: 700;
  line-height: 1.55;
}
.overlay__body strong { color: var(--blue-lo); font-weight: 900; }

.overlay__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 2px;
}
.overlay__actions--stack { flex-direction: column; width: 100%; }
.overlay__actions--stack .btn { width: 100%; }

/* ------------------------------ buttons ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(12px, 2vw, 15px) clamp(24px, 4vw, 34px);
  border-radius: 999px;
  border: 4px solid #fff;
  font-size: clamp(15px, 2.4vw, 18px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn--lg { padding: clamp(15px, 2.6vw, 19px) clamp(32px, 6vw, 48px); font-size: clamp(17px, 3vw, 22px); }

.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, var(--green-hi) 0%, var(--green) 55%, #3FBB64 100%);
  box-shadow: 0 7px 0 var(--green-lo), 0 12px 22px rgba(21, 38, 56, .3);
  text-shadow: 0 2px 0 rgba(23, 84, 47, .55);
  animation: btnPulse 1.2s ease-in-out infinite;
}
.btn--primary:hover { filter: brightness(1.05); }
.btn--primary:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--green-lo), 0 4px 10px rgba(21, 38, 56, .3);
  animation: none;
}
@keyframes btnPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

.btn--ghost {
  color: var(--ink-2);
  background: linear-gradient(180deg, #FFFFFF 0%, #DCE9F3 100%);
  box-shadow: 0 7px 0 rgba(44, 52, 70, .26), 0 12px 22px rgba(21, 38, 56, .24);
}
.btn--ghost:hover { filter: brightness(1.03); }
.btn--ghost:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 rgba(44, 52, 70, .26), 0 4px 10px rgba(21, 38, 56, .24);
}

/* little play triangle inside the start button */
.btn__play {
  width: 0; height: 0;
  border-left: 15px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  filter: drop-shadow(0 2px 0 rgba(23, 84, 47, .5));
}

/* ---------------------------- controls hint ---------------------------- */
.controls-hint {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: clamp(12px, 1.9vw, 14px);
  font-weight: 800;
}
kbd {
  display: inline-block;
  min-width: 26px;
  margin: 0 2px;
  padding: 3px 7px 4px;
  border-radius: 8px;
  border: 2px solid #fff;
  background: linear-gradient(180deg, #FFFFFF 0%, #DCE9F3 100%);
  box-shadow: 0 3px 0 rgba(44, 52, 70, .28);
  color: var(--ink-2);
  font-family: inherit;
  font-size: .92em;
  font-weight: 900;
  line-height: 1;
}

/* ------------------------------- stars ------------------------------- */
.stars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 2vw, 14px);
}
/* covers both the static .star spans and the <svg> nodes the JS injects */
.stars .star,
.stars svg {
  width: clamp(42px, 9vw, 58px);
  height: clamp(42px, 9vw, 58px);
  flex: 0 0 auto;
  stroke: none;
  fill: var(--ice-3);
  filter: drop-shadow(0 4px 0 rgba(44, 52, 70, .22));
}
.stars .star {
  background: linear-gradient(180deg, #E4EDF4 0%, var(--ice-3) 100%);
  clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 34%);
}
.stars .star.is-lit {
  background: linear-gradient(180deg, #FFE08A 0%, var(--gold) 48%, var(--gold-lo) 100%);
  filter: drop-shadow(0 4px 0 rgba(176, 118, 12, .5)) drop-shadow(0 0 12px rgba(255, 192, 46, .75));
}
.stars svg.is-lit {
  fill: var(--gold);
  filter: drop-shadow(0 4px 0 rgba(176, 118, 12, .5)) drop-shadow(0 0 12px rgba(255, 192, 46, .75));
}
/* staggered pop-in */
.stars > * { animation: starPop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.stars > *:nth-child(2) { animation-delay: .12s; }
.stars > *:nth-child(3) { animation-delay: .24s; }
@keyframes starPop {
  0%   { opacity: 0; transform: scale(.2) rotate(-35deg); }
  70%  { opacity: 1; transform: scale(1.18) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 820px), (pointer: coarse) {
  .only-touch { display: inline; }
  .only-wide  { display: none; }
  .lane-controls { display: block; }
}

@media (max-width: 560px) {
  :root { --ui: .88; --avatar: 44px; --radius-lg: 22px; --radius-md: 16px; }
  .progress-row { gap: 7px; }
  .scene-toast { top: 24%; }
  .lane-btn { width: 64px; height: 64px; padding: 16px; }
}

/* short landscape phones: keep the card from clipping */
@media (max-height: 460px) {
  .overlay__card { gap: 9px; padding: 16px 22px 18px; }
  .overlay__title { font-size: clamp(20px, 4.6vw, 28px); padding: 6px 18px 8px; }
  .overlay__body { display: none; }
  .stars .star, .stars svg { width: 36px; height: 36px; }
  .hud__level { display: none; }
}

/* ========================= REDUCED MOTION ========================= */
@media (prefers-reduced-motion: reduce) {
  .progress-fill::after,
  .btn--primary { animation: none !important; }
  .overlay,
  .overlay__card,
  .stars > * {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
  .count-badge.bump-up,
  .count-badge.bump-down { animation-duration: .12s !important; }
  .scene-toast { transition-duration: .01ms !important; }
  * { scroll-behavior: auto !important; }
}

/* ================= LEVEL SELECT / PROGRESSION ================= */
/* =====================================================================
   ui-levels.css  -  APPEND to the end of the existing stylesheet
   (after the current "REDUCED MOTION" block).

   Level select + campaign progression chrome. Same language as the rest
   of the HUD: chunky rounded blocks, 3-4px white borders, hard offset
   drop shadows, 900-weight rounded type. No images, no icon fonts, no
   network - the padlock, the completion check, the mini stars and the
   button glyphs are all pure CSS.
   ===================================================================== */

/* per-biome accents: bright top / deep bottom + label, named like the
   existing --blue / --blue-lo ramps. These are the ONLY new :root vars. */
:root {
  --bio-ice:        #8AD2F3;  --bio-ice-lo:      #2F81B7;
  --bio-desert:     #F5CE7C;  --bio-desert-lo:   #B27A1E;
  --bio-meadow:     #8FDD84;  --bio-meadow-lo:   #34904A;
  --bio-volcano:    #F98F63;  --bio-volcano-lo:  #B0341F;
  --bio-neon:       #C08BFF;  --bio-neon-lo:     #5A2FB0;
}

/* ======================== HUD: level badge ======================== */
.hud__levelrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--ui));
  min-width: 0;
}

#levelBadge {
  display: inline-flex;
  align-items: baseline;
  gap: calc(4px * var(--ui));
  flex: 0 0 auto;
  padding: calc(3px * var(--ui)) calc(11px * var(--ui)) calc(4px * var(--ui));
  border-radius: 999px;
  border: 3px solid #fff;
  background: linear-gradient(180deg, var(--ink-3) 0%, var(--ink-2) 100%);
  color: #fff;
  font-size: calc(clamp(12px, 2vw, 16px) * var(--ui));
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(27, 34, 48, .45);
  box-shadow: 0 4px 0 rgba(27, 34, 48, .34), 0 7px 14px rgba(21, 38, 56, .26);
}
/* pseudo prefix survives textContent writes from the JS */
#levelBadge::before {
  content: "LV";
  font-size: .66em;
  font-weight: 900;
  letter-spacing: .1em;
  opacity: .78;
}

/* ==================== READY: the Levels button ==================== */
#levelsBtn {
  gap: 12px;
}
/* 2x2 dot grid glyph, same trick as .btn__play */
#levelsBtn::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border-radius: 4px;
  background-image:
    radial-gradient(circle 3.1px at 26% 26%, var(--blue-lo) 0 92%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 3.1px at 74% 26%, var(--blue)    0 92%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 3.1px at 26% 74%, var(--blue)    0 92%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 3.1px at 74% 74%, var(--gold-lo) 0 92%, rgba(0, 0, 0, 0) 100%);
  background-repeat: no-repeat;
}

/* ======================== LEVEL SELECT card ======================== */
#overlayLevels { z-index: 44; }

#overlayLevels .overlay__card {
  width: min(680px, 100%);
  max-height: 100%;          /* card never taller than the overlay box */
  gap: clamp(10px, 2vw, 15px);
  padding-left: clamp(14px, 3.4vw, 26px);
  padding-right: clamp(14px, 3.4vw, 26px);
}

/* optional "12 / 45 stars" line - collapses when the JS leaves it empty */
.levels-tally {
  margin: -4px 0 0;
  color: var(--ink-3);
  font-size: clamp(12px, 1.9vw, 14px);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.levels-tally:empty { display: none; }

/* --------------------------- the grid --------------------------- */
#levelGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.7vw, 13px);
  align-content: start;
  width: 100%;
  min-height: 0;              /* lets it shrink inside the flex card */
  max-height: min(48vh, 400px);
  max-height: min(48dvh, 400px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: clamp(8px, 1.6vw, 12px);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(168, 192, 212, .34) 0%, rgba(220, 233, 243, .22) 100%);
  box-shadow: inset 0 3px 0 rgba(44, 52, 70, .12), inset 0 0 0 3px rgba(255, 255, 255, .85);
  scrollbar-width: thin;
  scrollbar-color: var(--ice-4) transparent;
}
#levelGrid::-webkit-scrollbar { width: 10px; }
#levelGrid::-webkit-scrollbar-track { background: transparent; }
#levelGrid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 3px solid transparent;
  background: var(--ice-4);
  background-clip: padding-box;
}

/* ---------------------------- a tile ---------------------------- */
.level-tile {
  /* the two knobs the padlock position is derived from */
  --tile-pad: clamp(9px, 1.7vw, 13px);
  --num-size: clamp(34px, 7.2vw, 46px);
  --tile-accent:    var(--blue-hi);
  --tile-accent-lo: var(--blue-lo);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--tile-pad) 5px calc(var(--tile-pad) - 2px);
  border-radius: var(--radius-md);
  border: 3px solid #fff;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--ice-1) 52%, var(--ice-2) 100%);
  box-shadow: 0 5px 0 rgba(44, 52, 70, .24), 0 8px 16px rgba(21, 38, 56, .20);
  color: var(--ink-2);
  text-align: center;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
/* tinted biome header band (paints under the relatively-positioned kids) */
.level-tile::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--tile-pad) + var(--num-size) * .58);
  border-radius: calc(var(--radius-md) - 3px) calc(var(--radius-md) - 3px) 0 0;
  background: linear-gradient(180deg, var(--tile-accent) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: .34;
  pointer-events: none;
}
.level-tile > * { position: relative; }

.level-tile:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 7px 0 rgba(44, 52, 70, .24), 0 12px 20px rgba(21, 38, 56, .24);
}
.level-tile:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(44, 52, 70, .24), 0 3px 8px rgba(21, 38, 56, .20);
}
.level-tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* big bold number in an accent chip */
.level-tile__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--num-size);
  height: var(--num-size);
  flex: 0 0 auto;
  border-radius: calc(var(--num-size) * .3);
  border: 3px solid #fff;
  background: linear-gradient(180deg, var(--tile-accent) 0%, var(--tile-accent-lo) 100%);
  color: #fff;
  font-size: calc(var(--num-size) * .5);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(27, 34, 48, .4);
  box-shadow: 0 4px 0 rgba(27, 34, 48, .24), 0 6px 12px rgba(21, 38, 56, .18);
}

.level-tile__name {
  margin-top: 5px;
  max-width: 100%;
  color: var(--ink-2);
  font-size: clamp(10px, 1.9vw, 13px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.level-tile__biome {
  max-width: 100%;
  color: var(--tile-accent-lo);
  font-size: clamp(8px, 1.4vw, 10px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.level-tile__stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .6vw, 4px);
  margin-top: 4px;
}

/* --------------------------- mini stars --------------------------- */
/* same clip-path silhouette as .stars .star, just small */
.mini-star {
  width: clamp(11px, 2.3vw, 14px);
  height: clamp(11px, 2.3vw, 14px);
  flex: 0 0 auto;
  background: linear-gradient(180deg, #E4EDF4 0%, var(--ice-3) 100%);
  clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 34%);
  filter: drop-shadow(0 2px 0 rgba(44, 52, 70, .18));
}
.mini-star.is-lit {
  background: linear-gradient(180deg, #FFE08A 0%, var(--gold) 48%, var(--gold-lo) 100%);
  filter: drop-shadow(0 2px 0 rgba(176, 118, 12, .45));
}

/* --------------------------- completed --------------------------- */
.level-tile--done {
  box-shadow: 0 5px 0 var(--green-lo), 0 8px 16px rgba(21, 38, 56, .20),
              inset 0 0 0 3px rgba(78, 203, 113, .38);
}
.level-tile--done:hover {
  box-shadow: 0 7px 0 var(--green-lo), 0 12px 20px rgba(21, 38, 56, .24),
              inset 0 0 0 3px rgba(78, 203, 113, .38);
}
.level-tile--done:active {
  box-shadow: 0 1px 0 var(--green-lo), 0 3px 8px rgba(21, 38, 56, .20),
              inset 0 0 0 3px rgba(78, 203, 113, .38);
}
/* pure-CSS tick in the top-right corner */
.level-tile--done::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 6px;
  width: clamp(12px, 2.4vw, 15px);
  height: clamp(12px, 2.4vw, 15px);
  background: linear-gradient(180deg, var(--green-hi) 0%, var(--green-lo) 100%);
  clip-path: polygon(43% 73%, 88% 12%, 100% 26%, 45% 100%, 0% 58%, 13% 43%);
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95)) drop-shadow(0 1.5px 0 rgba(255, 255, 255, .8));
  pointer-events: none;
}

/* ----------------------------- locked ----------------------------- */
.level-tile--locked {
  pointer-events: none;
  cursor: not-allowed;
  background: linear-gradient(180deg, #F8FAFC 0%, var(--ice-2) 100%);
  box-shadow: 0 4px 0 rgba(44, 52, 70, .16), 0 6px 12px rgba(21, 38, 56, .14);
}
.level-tile--locked::before { filter: saturate(0); opacity: .14; }
/* desaturate + dim everything except the padlock itself */
.level-tile--locked > :not(.level-tile__lock) { filter: saturate(.08); opacity: .55; }
.level-tile--locked .level-tile__num { color: transparent; text-shadow: none; }

/* padlock: hidden by default, drawn entirely in CSS when locked.
   Sits dead-centre on the number chip: chip centre = pad + size/2 from the
   top of the padding box (which is what `top` resolves against). The -25%
   Y nudge re-centres the body once the shackle above it is counted in. */
.level-tile__lock { display: none; }
.level-tile--locked .level-tile__lock {
  display: block;
  position: absolute;
  left: 50%;
  top: calc(var(--tile-pad) + var(--num-size) / 2);
  transform: translate(-50%, -25%);
  width: calc(var(--num-size) * .44);
  height: calc(var(--num-size) * .34);
  border-radius: calc(var(--num-size) * .1);
  background: linear-gradient(180deg, var(--ink-3) 0%, var(--ink-2) 100%);
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95)) drop-shadow(0 2px 0 rgba(255, 255, 255, .7));
}
/* shackle */
.level-tile--locked .level-tile__lock::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  transform: translateX(-50%);
  width: 62%;
  height: calc(var(--num-size) * .2);
  border: calc(var(--num-size) * .08) solid var(--ink-3);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
/* keyhole: dot + stem via a negative-spread shadow */
.level-tile--locked .level-tile__lock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translateX(-50%);
  width: calc(var(--num-size) * .1);
  height: calc(var(--num-size) * .1);
  border-radius: 50%;
  background: var(--ice-1);
  box-shadow: 0 calc(var(--num-size) * .09) 0 calc(var(--num-size) * -.017) var(--ice-1);
}

/* ------------------------ per-biome accents ------------------------ */
.level-tile[data-biome="ice"]     { --tile-accent: var(--bio-ice);     --tile-accent-lo: var(--bio-ice-lo); }
.level-tile[data-biome="desert"]  { --tile-accent: var(--bio-desert);  --tile-accent-lo: var(--bio-desert-lo); }
.level-tile[data-biome="meadow"]  { --tile-accent: var(--bio-meadow);  --tile-accent-lo: var(--bio-meadow-lo); }
.level-tile[data-biome="volcano"] { --tile-accent: var(--bio-volcano); --tile-accent-lo: var(--bio-volcano-lo); }
.level-tile[data-biome="neon"]    { --tile-accent: var(--bio-neon);    --tile-accent-lo: var(--bio-neon-lo); }

/* ==================== END overlay: level banner ==================== */
#endLevelName {
  margin: -2px 0 0;
  padding: 6px 16px 7px;
  border-radius: 999px;
  border: 3px solid #fff;
  background: linear-gradient(180deg, var(--ice-1) 0%, var(--ice-3) 100%);
  color: var(--ink-2);
  font-size: clamp(11px, 1.9vw, 13px);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow: 0 4px 0 rgba(44, 52, 70, .2), 0 7px 14px rgba(21, 38, 56, .18);
}
#endLevelName:empty { display: none; }

/* ===================== END overlay: Next Level ===================== */
#nextLevelBtn { gap: 12px; }
/* chevron, built from borders like .btn__play */
.btn__next {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-right: 4px solid #fff;
  border-top: 4px solid #fff;
  border-radius: 2px;
  transform: rotate(45deg);
  filter: drop-shadow(0 2px 0 rgba(23, 84, 47, .45));
}
/* while Next Level is on screen it is the only hero button: calm Play Again
   down to the ghost treatment (no :has() needed - #nextLevelBtn precedes it) */
#nextLevelBtn:not([hidden]) ~ #retryBtn {
  animation: none;
  color: var(--ink-2);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--ice-2) 100%);
  box-shadow: 0 7px 0 rgba(44, 52, 70, .26), 0 12px 22px rgba(21, 38, 56, .24);
  text-shadow: none;
}
#nextLevelBtn:not([hidden]) ~ #retryBtn:active {
  box-shadow: 0 2px 0 rgba(44, 52, 70, .26), 0 4px 10px rgba(21, 38, 56, .24);
}

/* ========================== RESPONSIVE ========================== */
@media (max-width: 560px) {
  #levelGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: min(46vh, 340px);
    max-height: min(46dvh, 340px);
  }
  #overlayLevels .overlay__card { gap: 10px; }
}

/* 375px phones: keep 3 across, just tighten everything */
@media (max-width: 400px) {
  #levelGrid { gap: 7px; padding: 8px; }
  .level-tile { --tile-pad: 8px; --num-size: 33px; padding-left: 3px; padding-right: 3px; }
  .level-tile__name { font-size: 10px; margin-top: 4px; }
  .level-tile__biome { font-size: 8px; letter-spacing: .08em; }
  .levels-tally { font-size: 11px; }
  #levelsBtn::before { width: 15px; height: 15px; }
}

/* short landscape phones: the HUD level row goes, the grid gets flatter */
@media (max-height: 460px) {
  .hud__levelrow { display: none; }
  #overlayLevels .overlay__card { gap: 8px; padding-top: 16px; padding-bottom: 18px; }
  .levels-tally, #endLevelName { display: none; }
  #levelGrid {
    max-height: 42vh;
    max-height: 42dvh;
    padding: 7px;
  }
  .level-tile { --tile-pad: 7px; --num-size: 30px; }
  .level-tile__name { margin-top: 3px; }
}

/* ======================== NEXT RIVAL cue ======================== */
/* The clash is the one event the player cannot see coming in time to react to
   it, so the size of the crowd they are about to hit is spelled out up front,
   and turns red the moment they are not big enough to survive it. */
.rival-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 4px 12px 5px;
  border-radius: 999px;
  border: 3px solid #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, var(--ice-2) 100%);
  box-shadow: 0 4px 0 rgba(44, 52, 70, .2), 0 8px 16px rgba(21, 38, 56, .22);
  line-height: 1;
  transition: background .18s ease, box-shadow .18s ease;
}
.rival-cue[hidden] { display: none; }

.rival-cue__label {
  color: var(--ink-3);
  font-size: calc(10px * var(--ui));
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rival-cue__num {
  color: var(--ink);
  font-size: calc(15px * var(--ui));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* behind the rival: the whole pill goes hot */
.rival-cue.is-danger {
  border-color: #fff;
  background: linear-gradient(180deg, var(--red-hi) 0%, var(--red) 100%);
  box-shadow: 0 4px 0 var(--red-lo), 0 8px 16px rgba(142, 30, 25, .35);
  animation: rivalPulse .9s ease-in-out infinite;
}
.rival-cue.is-danger .rival-cue__label { color: rgba(255, 255, 255, .88); }
.rival-cue.is-danger .rival-cue__num {
  color: #fff;
  text-shadow: 0 2px 0 rgba(142, 30, 25, .55);
}
@keyframes rivalPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ====================== MATHS OPTIONS panel ====================== */
.overlay__body--tight { margin-bottom: 2px; }

/* gear glyph, built from a ring + notches so it needs no asset */
.btn__gear {
  position: relative;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 3.5px solid currentColor;
  opacity: .85;
}
.btn__gear::before,
.btn__gear::after {
  content: "";
  position: absolute;
  inset: -4px 42%;
  border-radius: 2px;
  background: currentColor;
}
.btn__gear::after { transform: rotate(90deg); }

/* the card must fit the stage, not the page: four option rows plus the header
   would otherwise run off both ends of a short landscape viewport */
#overlaySettings .overlay__card {
  max-height: calc(100% - 24px);
  overflow: hidden;
}

.opt-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  min-height: 0;
  max-height: min(42vh, 300px);
  max-height: min(42dvh, 300px);
  padding: 10px;
  overflow-y: auto;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--ice-1) 0%, var(--ice-2) 100%);
  box-shadow: inset 0 2px 6px rgba(21, 38, 56, .14);
}

.opt-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 3px solid #fff;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F7FB 100%);
  box-shadow: 0 4px 0 rgba(44, 52, 70, .16), 0 8px 16px rgba(21, 38, 56, .12);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.opt-row:hover { filter: brightness(1.03); }
.opt-row:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(44, 52, 70, .16), 0 3px 8px rgba(21, 38, 56, .12);
}
.opt-row:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.opt-row__glyph {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 3px solid #fff;
  background: linear-gradient(180deg, var(--ice-2) 0%, var(--ice-3) 100%);
  box-shadow: 0 3px 0 rgba(44, 52, 70, .2);
  color: var(--ink-2);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}
.opt-row.is-on .opt-row__glyph {
  background: linear-gradient(180deg, var(--green-hi) 0%, var(--green) 100%);
  box-shadow: 0 3px 0 var(--green-lo);
  color: #fff;
  text-shadow: 0 2px 0 rgba(23, 84, 47, .5);
}

.opt-row__text { min-width: 0; }
.opt-row__name {
  display: block;
  font-size: clamp(14px, 2.3vw, 16px);
  font-weight: 900;
  letter-spacing: -.01em;
}
.opt-row__note {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: clamp(11px, 1.8vw, 12.5px);
  font-weight: 700;
  line-height: 1.35;
}
.opt-row__stage {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px 3px;
  border-radius: 999px;
  background: var(--ice-2);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* pill switch */
.opt-row__switch {
  position: relative;
  width: 52px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 3px solid #fff;
  background: linear-gradient(180deg, var(--ice-3) 0%, var(--ice-4) 100%);
  box-shadow: inset 0 2px 5px rgba(21, 38, 56, .25);
  transition: background .15s ease;
}
.opt-row__switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(21, 38, 56, .35);
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.opt-row.is-on .opt-row__switch {
  background: linear-gradient(180deg, var(--green) 0%, var(--green-lo) 100%);
}
.opt-row.is-on .opt-row__switch::after { transform: translateX(22px); }

/* ======================= REDUCED MOTION ======================= */
/* nothing here animates unconditionally, but the hover/press travel is
   still motion - drop it for people who asked for less. */
@media (prefers-reduced-motion: reduce) {
  .level-tile { transition-duration: .01ms !important; }
  .level-tile:hover,
  .level-tile:active { transform: none; }
  .opt-row { transition-duration: .01ms !important; }
  .opt-row:hover,
  .opt-row:active { transform: none; }
  .opt-row__switch::after { transition-duration: .01ms !important; }
  .rival-cue.is-danger { animation: none; }
}