/* ============================================================================
   Comparing Numbers — the game that lives in {% block game %}.
   Nothing here touches the shell: every rule is scoped under #cnGame.
   Colours come from the shell's --mgv2-* / --op-accent contract so the game
   re-skins with the Box-colour panel and works in both themes.
   ========================================================================== */

#cnGame {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--mgv2-ui, 'Fredoka', system-ui, sans-serif);
}

body:not(.theme-light) #cnGame {
  --cn-face: rgba(255, 255, 255, 0.055);
  --cn-face-hi: rgba(255, 255, 255, 0.10);
  --cn-line: rgba(255, 255, 255, 0.16);
  --cn-ink: var(--mgv2-on-dark, #F6F2E4);
  --cn-mute: var(--mgv2-on-dark-mute, rgba(246, 242, 228, 0.52));
  --cn-door: #0C1631;
  --cn-door-line: rgba(246, 242, 228, 0.26);
  --cn-good: var(--mgv2-green-on-dark, #55D08F);
  --cn-dead: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px, rgba(255,255,255,.015) 6px 12px);
  --cn-dead-line: rgba(255, 255, 255, 0.20);
}
body.theme-light #cnGame {
  --cn-face: var(--mgv2-cream-soft, #F2EBD3);
  --cn-face-hi: #FFFFFF;
  --cn-line: var(--mgv2-cream-edge, #E4D9BB);
  --cn-ink: var(--mgv2-ink, #1A1E2E);
  --cn-mute: var(--mgv2-ink-mute, #6F6A58);
  --cn-door: #1A2A57;
  --cn-door-line: rgba(250, 246, 233, 0.28);
  --cn-good: var(--mgv2-green, #1F7A46);
  --cn-dead: repeating-linear-gradient(45deg, #E9E3D0 0 6px, #F5F0DF 6px 12px);
  --cn-dead-line: #C3BBA2;
}

/* ── question banner ─────────────────────────────────────────────────────── */
.cn-banner {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--cn-face);
  border: 1px solid var(--cn-line);
  border-left: 6px solid var(--cn-band, var(--op-accent));
}
.cn-voice {
  flex: none;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: linear-gradient(180deg, var(--mgv2-gold, #FFC73B), var(--mgv2-gold-2, #F08A1E));
  color: var(--mgv2-cta-ink, #2A1A05);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--mgv2-cta-ink, #2A1A05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cn-voice:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--mgv2-cta-ink, #2A1A05); }
.cn-voice.muted { filter: grayscale(1) opacity(.6); }
.cn-q {
  flex: 1;
  font-family: var(--mgv2-display, 'Fraunces', Georgia, serif);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--cn-ink);
}
.cn-q em { font-style: italic; color: var(--op-accent, #E87722); }
.cn-dots { display: flex; gap: 6px; flex: none; }
.cn-dots i {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--cn-line);
  transition: background .2s ease, transform .2s ease;
}
.cn-dots i.done { background: var(--cn-band, var(--op-accent)); }
.cn-dots i.now { background: var(--mgv2-gold, #FFC73B); transform: scale(1.35); }

/* ── stage ───────────────────────────────────────────────────────────────── */
.cn-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vh, 26px);
  padding: 8px 0;
}
.cn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.6vw, 40px);
  flex-wrap: nowrap;
}

/* ── piles ───────────────────────────────────────────────────────────────── */
.cn-mat {
  position: relative;
  border-radius: 22px;
  background: var(--cn-face);
  border: 1px solid var(--cn-line);
  padding: clamp(14px, 2vw, 24px);
  display: grid;
  gap: clamp(6px, 1vw, 14px);
  place-items: center;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, outline-color .16s ease;
  outline: 4px solid transparent;
  outline-offset: -4px;
}
.cn-mat:hover { transform: translateY(-3px); }
.cn-mat.picked { outline-color: var(--cn-good); }
.cn-mat.empty {
  border: 3px dashed var(--mgv2-gold, #FFC73B);
  background: transparent;
  min-width: 160px; min-height: 150px;
  display: grid; place-items: center;
  font-family: var(--mgv2-display, serif); font-weight: 700;
  font-size: 26px; color: var(--cn-mute);
}
.cn-orb {
  width: clamp(30px, 3.4vw, 48px);
  aspect-ratio: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(8, 14, 32, .35));
  animation: cnOrbIn .34s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes cnOrbIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.cn-mat-tag {
  margin-top: 10px;
  font-family: var(--mgv2-display, serif);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px);
  color: var(--cn-ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── numerals ────────────────────────────────────────────────────────────── */
.cn-num {
  font-family: var(--mgv2-display, 'Fraunces', serif);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1;
  color: var(--cn-ink);
  font-variant-numeric: tabular-nums;
  padding: 10px 22px;
  border-radius: 18px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.cn-num:hover { transform: translateY(-3px); background: var(--cn-face); }
.cn-num.picked { border-color: var(--cn-good); background: var(--cn-face); }
.cn-num.static { cursor: default; }
.cn-num.static:hover { transform: none; background: none; }

/* ── the mouth ───────────────────────────────────────────────────────────── */
.cn-mouth { flex: none; }
.cn-mouth rect {
  fill: var(--op-accent, #E87722);
  stroke: var(--cn-mouth-stroke, #1A1E2E);
  stroke-width: 3.4;
  stroke-linejoin: round;
  transition: transform .45s cubic-bezier(.2, 1.4, .6, 1);
}
body:not(.theme-light) #cnGame { --cn-mouth-stroke: #0B1329; }
.cn-mouth.hidden { visibility: hidden; }

/* ── place-value boxes ───────────────────────────────────────────────────── */
.cn-boxrow { display: flex; gap: 8px; }
.cn-box {
  width: clamp(44px, 5vw, 68px);
  height: clamp(56px, 6.4vw, 86px);
  border-radius: 14px;
  background: var(--cn-face-hi);
  border: 2px solid var(--cn-line);
  display: grid; place-items: center;
  font-family: var(--mgv2-display, serif);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 44px);
  color: var(--cn-ink);
  font-variant-numeric: tabular-nums;
}
.cn-box.dead { background: var(--cn-dead); border: 2px dashed var(--cn-dead-line); }
.cn-box.dead.quiet { visibility: hidden; }

/* ── doors ───────────────────────────────────────────────────────────────
   the numbers stay readable under their doors */
.cn-doorcol { position: relative; display: flex; flex-direction: column; align-items: center; }
.cn-door-num {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  font-family: var(--mgv2-display, serif); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 32px); color: var(--cn-mute);
  font-variant-numeric: tabular-nums;
}
.cn-door {
  position: relative;
  width: clamp(48px, 5.4vw, 74px);
  height: clamp(60px, 7vw, 94px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--cn-face-hi);
  border: 2px solid var(--cn-line);
  display: grid; place-items: center;
  font-family: var(--mgv2-display, serif);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 44px);
  color: var(--cn-ink);
  font-variant-numeric: tabular-nums;
  transition: transform .16s ease, border-color .2s ease, background .2s ease;
}
.cn-door .leaf {
  position: absolute; top: 0; bottom: 0; width: 51%;
  background: var(--cn-door);
  transition: transform .42s cubic-bezier(.2, 1.1, .5, 1);
  z-index: 2;
}
.cn-door .leaf.l { left: 0; transform-origin: left center; box-shadow: 2px 0 8px rgba(8,14,32,.35); }
.cn-door .leaf.r { right: 0; transform-origin: right center; box-shadow: -2px 0 8px rgba(8,14,32,.35); }
.cn-door.shut { border-color: var(--cn-door-line); }
.cn-door.shut .leaf.l { transform: none; }
.cn-door.shut .leaf.r { transform: none; }
.cn-door.shut::after {
  content: ""; position: absolute; z-index: 3;
  top: 12%; bottom: 12%; left: 50%; width: 2px;
  background: var(--cn-door-line);
}
.cn-door.open .leaf.l { transform: perspective(300px) rotateY(-86deg); }
.cn-door.open .leaf.r { transform: perspective(300px) rotateY(86deg); }
.cn-door.open { cursor: pointer; }
.cn-door.open:hover { transform: translateY(-3px); }
.cn-door.never { opacity: .55; }
.cn-door.tied, .cn-door.decides, .cn-door.settled { pointer-events: none; }
.cn-door.tied:hover, .cn-door.decides:hover, .cn-door.settled:hover { transform: none; }
.cn-door.tied { background: rgba(47, 168, 95, .14); border-color: var(--cn-good); color: var(--cn-good); }
.cn-door.tied::before {
  content: "same"; position: absolute; bottom: 5px; z-index: 4;
  font: 600 9px/1 var(--mgv2-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase;
  color: var(--cn-good);
}
.cn-door.decides {
  background: var(--mgv2-gold, #FFC73B);
  border-color: var(--mgv2-gold-2, #F08A1E);
  color: var(--mgv2-cta-ink, #2A1A05);
  box-shadow: 0 0 0 6px rgba(255, 199, 59, .26);
  animation: cnPop .5s cubic-bezier(.2, 1.4, .6, 1);
}

/* ── the tile tray ───────────────────────────────────────────────────────── */
.cn-gap {
  width: clamp(56px, 6vw, 84px);
  height: clamp(56px, 6vw, 84px);
  border-radius: 14px;
  border: 3px dashed var(--mgv2-gold, #FFC73B);
  background: rgba(255, 199, 59, .08);
  display: grid; place-items: center;
  font-family: var(--mgv2-display, serif); font-weight: 700;
  font-size: clamp(32px, 4vw, 54px);
  color: var(--cn-ink);
  flex: none;
}
.cn-gap.armed { animation: cnPulse 1.2s ease-in-out infinite; }
.cn-gap.filled {
  border: 3px solid var(--cn-good);
  background: rgba(47, 168, 95, .14);
  color: var(--cn-good);
  animation: cnPop .5s cubic-bezier(.2, 1.4, .6, 1);
}
.cn-tray {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 14px;
  padding-top: 4px;
}
.cn-tray[hidden] { display: none; }
.cn-tile {
  width: clamp(62px, 6.4vw, 86px);
  height: clamp(62px, 6.4vw, 86px);
  border-radius: 14px;
  background: var(--cn-face-hi);
  border: 2px solid var(--cn-line);
  font-family: var(--mgv2-display, serif);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px);
  color: var(--cn-ink);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--cn-line);
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.cn-tile:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 7px 0 var(--cn-line); }
.cn-tile:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--cn-line); }
.cn-tile:disabled { opacity: .4; cursor: default; }
.cn-tile.wrong { animation: cnShake .4s ease; border-color: var(--mgv2-tassel, #E84A4A); }

/* ── cards, slots, options ───────────────────────────────────────────────── */
.cn-card {
  width: clamp(84px, 9vw, 116px);
  height: clamp(98px, 10.4vw, 134px);
  border-radius: 14px;
  background: var(--cn-face-hi);
  border: 3px solid var(--mgv2-gold, #FFC73B);
  display: grid; place-items: center;
  font-family: var(--mgv2-display, serif);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 42px);
  color: var(--cn-ink);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--cn-line);
  transition: transform .14s ease, opacity .2s ease;
}
.cn-card:hover { transform: translateY(-3px); }
.cn-card.lifted { transform: translateY(-10px) rotate(-4deg); box-shadow: 0 14px 26px -8px rgba(8,14,32,.5); }
.cn-card.spent { opacity: 0; pointer-events: none; }
.cn-card.picked { border-color: var(--cn-good); color: var(--cn-good); }
.cn-slot {
  width: clamp(84px, 9vw, 116px);
  height: clamp(98px, 10.4vw, 134px);
  border-radius: 14px;
  border: 3px dashed var(--mgv2-gold, #FFC73B);
  background: rgba(255, 199, 59, .08);
  display: grid; place-items: center;
  font-family: var(--mgv2-display, serif);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 42px);
  color: var(--cn-ink);
  cursor: pointer;
}
.cn-slot.armed { animation: cnPulse 1.2s ease-in-out infinite; }
.cn-slot.full { border-style: solid; border-color: var(--cn-good); background: rgba(47,168,95,.12); }
.cn-opt {
  text-align: left;
  border: 2px solid var(--cn-line);
  background: var(--cn-face-hi);
  border-radius: 14px;
  padding: 16px 24px;
  font-family: var(--mgv2-ui, sans-serif);
  font-weight: 600;
  font-size: clamp(16px, 1.7vw, 21px);
  color: var(--cn-ink);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--cn-line);
  transition: transform .12s ease, box-shadow .12s ease;
  min-width: 280px;
}
.cn-opt:hover { transform: translateY(-2px); }
.cn-opt:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cn-line); }
.cn-opt.right { border-color: var(--cn-good); color: var(--cn-good); }
.cn-opt.wrong { animation: cnShake .4s ease; border-color: var(--mgv2-tassel, #E84A4A); }
.cn-opts { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.cn-opts.row { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.cn-opts.row .cn-opt { min-width: 0; text-align: center; font-family: var(--mgv2-display, serif); font-weight: 700; font-size: clamp(24px, 3vw, 38px); padding: 12px 26px; }

.cn-same {
  border: 0; border-radius: 999px;
  padding: 12px 30px;
  background: var(--cn-face);
  border: 2px solid var(--cn-line);
  color: var(--cn-ink);
  font-family: var(--mgv2-display, serif);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--cn-line);
}
.cn-same:hover { transform: translateY(-2px); }
.cn-same:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cn-line); }
.cn-same.picked { border-color: var(--cn-good); color: var(--cn-good); }

/* ── feedback ────────────────────────────────────────────────────────────── */
.cn-toast {
  position: absolute;
  left: 50%; top: 76px;
  transform: translate(-50%, -18px);
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--mgv2-display, serif);
  font-weight: 700;
  font-size: 20px;
  background: var(--mgv2-gold, #FFC73B);
  color: var(--mgv2-cta-ink, #2A1A05);
  box-shadow: 0 6px 18px -6px rgba(8, 14, 32, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .28s cubic-bezier(.2, 1.4, .6, 1);
  z-index: 8;
}
.cn-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cn-toast.good { background: var(--cn-good); color: #04120A; }
.cn-toast.soft { background: var(--cn-face-hi); color: var(--cn-ink); border: 1px solid var(--cn-line); }

.cn-hand {
  position: absolute;
  font-size: 34px;
  pointer-events: none;
  z-index: 9;
  animation: cnPulse 1.1s ease-in-out infinite;
  filter: drop-shadow(0 3px 5px rgba(8,14,32,.5));
}

.cn-conf {
  position: absolute; top: 0;
  font-size: 22px;
  pointer-events: none;
  z-index: 7;
  animation: cnFall 2.6s linear forwards;
}

@keyframes cnPop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes cnShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes cnPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: .82; } }
@keyframes cnFall { 0% { transform: translateY(-10px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(340px) rotate(220deg); opacity: 0; } }

#cnGame .cn-shake { animation: cnShake .4s ease; }
#cnGame .cn-box.cn-teach,
#cnGame .cn-door.cn-teach {
  outline: 4px solid var(--mgv2-gold, #FFC73B);
  outline-offset: 3px;
  animation: cnPulse 1.1s ease-in-out infinite;
}
#cnGame .cn-chosen {
  outline: 4px solid var(--cn-good);
  outline-offset: 7px;
  border-radius: 18px;
}

.cn-gap.filled.cn-pop {
  animation: cnGapPop .7s cubic-bezier(.2, 1.4, .6, 1);
  box-shadow: 0 0 0 6px rgba(47, 168, 95, .25), 0 0 26px rgba(47, 168, 95, .5);
}
@keyframes cnGapPop { 0% { transform: scale(.2); } 55% { transform: scale(1.45); } 100% { transform: scale(1); } }

.game-buttons .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.cn-num .cn-digit, .cn-num .cn-sep { position: relative; display: inline-block; }
.cn-num .cn-digit.cn-teach { animation: cnPulse 1s ease-in-out infinite; color: var(--mgv2-gold, #FFC73B); }

/* ── spoken-line caption ────────────────────────────────────────────────── */
.cn-caption {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  margin: 10px auto 0; max-width: 720px; min-height: 30px;
  text-align: center;
}
.cn-cap-line {
  font-family: 'Fredoka', sans-serif; font-weight: 500;
  font-size: clamp(15px, 1.7vw, 19px); color: var(--cn-ink);
  background: var(--cn-face); border: 1px solid var(--cn-line);
  border-radius: 999px; padding: 4px 16px;
  animation: cnRuleIn .4s ease-out both;
}

/* the pulled-out first-digit comparison on the L23 teach card */
.cn-intro-mini {
  display: none; align-items: center; gap: 14px;
  opacity: 0;
}
.cn-intro-mini.show { display: flex; animation: cnRuleIn .5s ease-out forwards; }
.cn-mini-d {
  width: 54px; height: 54px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 28px;
  color: var(--cn-ink); background: var(--cn-face-hi, var(--cn-face));
  border: 3px solid var(--mgv2-gold, #FFC73B);
}
.cn-mini-sign {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 30px;
  color: var(--cn-good);
}
.cn-mini-sign.cn-pop { display: inline-block; animation: cnGapPop .7s cubic-bezier(.2, 1.4, .6, 1); }

/* (box colours are handled by the page's own tweaks panel, bottom-right) */

/* ── level-intro teach card ─────────────────────────────────────────────── */
.cn-intro { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.cn-intro-row { display: flex; align-items: flex-end; gap: clamp(36px, 6vw, 80px); }
.cn-intro-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cn-intro .cn-box, #cnGame .cn-box { position: relative; overflow: visible; }
.cn-intro-cap {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cn-mute);
  opacity: 0; animation: cnRuleIn .5s ease-out forwards;
}
.cn-count {
  position: absolute; top: -14px; right: -10px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-style: normal; font-weight: 700; font-size: 15px;
  background: var(--mgv2-gold, #FFC73B); color: #2A1A05;
  box-shadow: 0 2px 0 rgba(42, 26, 5, 0.45);
  opacity: 0; transform: scale(0.4);
  animation: cnCountPop .5s cubic-bezier(.2, 1.4, .6, 1) forwards;
}
@keyframes cnCountPop { to { opacity: 1; transform: scale(1); } }
.cn-intro-rule {
  font-family: 'Fredoka', sans-serif; font-weight: 500;
  font-size: clamp(17px, 1.9vw, 22px); color: var(--cn-ink);
  opacity: 0; animation: cnRuleIn .6s ease-out 2.6s forwards;
}
.cn-intro-rule strong { color: var(--mgv2-gold, #FFC73B); }
@keyframes cnRuleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cn-intro-go { opacity: 0; animation: cnRuleIn .6s ease-out 3.2s forwards; }

/* ── page override ───────────────────────────────────────────────────────
   The shell's welcome card is authored for one tall viewport. Make it fill
   whatever height it is given instead: the card becomes a flex column at
   100% height, and its fixed-height art and display type scale with the
   viewport. The CTA is never scaled. */
#welcomeScreen .ws-kid-section {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 0 !important;
  box-sizing: border-box !important;
}
#welcomeScreen .ws-card {
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: clamp(16px, 3.4vh, 44px) 40px !important;
}
#welcomeScreen .ws-card > * { flex: none !important; }
/* the title and tagline must keep their full measure, or the headline
   re-wraps and collides with the line beneath it */
#welcomeScreen .ws-card h1,
#welcomeScreen .ws-tagline { width: 100% !important; }
#welcomeScreen .ws-landscape { height: clamp(90px, 21vh, 250px) !important; }
#welcomeScreen .ws-card h1 {
  font-size: clamp(34px, 7.4vh, 64px) !important;
  margin-bottom: clamp(4px, 1.5vh, 14px) !important;
}
#welcomeScreen .ws-tagline {
  font-size: clamp(13px, 2.7vh, 17px) !important;
  margin-bottom: clamp(6px, 2vh, 18px) !important;
}
#welcomeScreen .ws-mascot {
  height: clamp(80px, 19.5vh, 188px) !important;
  margin-bottom: clamp(8px, 2.8vh, 28px) !important;
}
#welcomeScreen .ws-start-badge,
#welcomeScreen .ws-chips > * { white-space: nowrap !important; }

@media (prefers-reduced-motion: reduce) {
  #cnGame *, #cnGame *::before, #cnGame *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ── phone layout ─────────────────────────────────────────────────────────
   THE ONE NON-DESIGN VISUAL on this page.

   The founder's design file is desktop-shaped: a sidebar column beside the
   game. Below 900px that two-column layout collapses to normal flow, which
   puts the score panel, the level card, the band meter and the rule note
   ABOVE the game — so a child on a phone scrolls past four panels before
   reaching the piles.

   This flips the order so the game comes first and the panels follow it.
   Source order only: nothing is restyled, resized, recoloured or moved on
   desktop. Recorded in the engineer report as the single visual that is not
   from the founder's file.                                                */
@media (max-width: 900px) {
  /* The shell already stacks here, with
     `@media (max-width:1023px){ .container{ display:block !important } }`.
     The stack itself is kept — only flex is needed to reorder, so the
     selector is one step more specific than the shell's to outrank its
     !important. */
  body .container {
    display: flex !important;
    flex-direction: column;
  }
  body #problemArea { order: -1; }
  body #sidebarCol  { order: 0; }
}