/* ---------------------------------------------------------------
   Count Masters 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 */
.stroked {
  color: #fff;
  paint-order: stroke fill;
  -webkit-text-stroke: 1px rgba(27, 34, 48, .55);
  text-shadow:
    -2px -2px 0 var(--ink),  2px -2px 0 var(--ink),
    -2px  2px 0 var(--ink),  2px  2px 0 var(--ink),
    -2px  0   0 var(--ink),  2px  0   0 var(--ink),
     0   -2px 0 var(--ink),  0    2px 0 var(--ink),
     0    4px 0 rgba(27, 34, 48, .32),
     0    8px 14px rgba(27, 34, 48, .30);
}
.stroked--lg {
  -webkit-text-stroke: 1.5px rgba(27, 34, 48, .6);
  text-shadow:
    -3px -3px 0 var(--ink),  3px -3px 0 var(--ink),
    -3px  3px 0 var(--ink),  3px  3px 0 var(--ink),
    -3px  0   0 var(--ink),  3px  0   0 var(--ink),
     0   -3px 0 var(--ink),  0    3px 0 var(--ink),
     0    7px 0 rgba(27, 34, 48, .30),
     0   12px 20px rgba(27, 34, 48, .32);
}

/* ---------- 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; }
}

/* ====================== 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; }
}