* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:     #0f0e1a; --card:   #1a1930; --accent: #7c3aed; --lite:   #a78bfa;
  --green:  #22c55e; --red:    #ef4444; --yellow: #f59e0b; --blue:   #3b82f6;
  --text:   #f1f5f9; --sub:    #94a3b8;
}
/* ── Light Mode ─────────────────────────────────────────────── */
body[data-theme="light"] {
  --bg:     #e8e9f0;
  --card:   #f0f1f8;
  --accent: #7c3aed;
  --lite:   #7c3aed;
  --green:  #16a34a;
  --red:    #dc2626;
  --yellow: #b45309;
  --blue:   #2563eb;
  --text:   #1a1035;
  --sub:    #4b5563;
}
body[data-theme="light"] .btn.grey { background:#c4c6d0; color:#1a1035; }
body[data-theme="light"] .btn.grey:hover { background:#a8aab8; }
body[data-theme="light"] .tab-bar { background:#e8e9f0ee; border-top:1px solid #c8c9d8; box-shadow:0 -2px 12px rgba(0,0,0,.10); }
body[data-theme="light"] .tab { color:#4b5563; }
body[data-theme="light"] .tab.active { color:var(--accent); }
body[data-theme="light"] .pu-card { background:#c8c9d8; }
body[data-theme="light"] .pu-card span { color:#374151; }
body[data-theme="light"] .guide-tip { background:#d0d1e0; }
body[data-theme="light"] input[type="text"],
body[data-theme="light"] input[type="number"] { background:#e8e9f0; color:var(--text); }
body[data-theme="light"] .match-card { background:#d8d9e8; color:var(--text); border-color:#b8b9d0; }
body[data-theme="light"] .match-card.flipped { background:#f0f1f8; }
body[data-theme="light"] .match-card.matched { background:rgba(22,163,74,.18); border-color:#16a34a; }
body[data-theme="light"] .pause-box,
body[data-theme="light"] .match-ready-box { background:#f0f1f8; color:var(--text); }
body[data-theme="light"] .match-header { background:#e8e9f0cc; }
body[data-theme="light"] .mm-opp-bar { background:#d0d1e0; color:var(--text); }
body[data-theme="light"] .settings-card { background:#f0f1f8; }
body[data-theme="light"] .mode-card { background:#f0f1f8; color:var(--text); }
body[data-theme="light"] .scoring-info-box { background:#e8e9f0; }
body[data-theme="light"] .pill { background:#d0d1e0; color:#374151; }
body[data-theme="light"] .brain-svg { filter: drop-shadow(0 0 8px rgba(124,58,237,0.4)); }

/* ── Kids Theme (Mental Math Kids version) — "Ocean Explorer" ──────────────── */
/* Overrides the CSS custom properties every component already reads from, so
   cards/text/accents across kids-home-screen re-theme for free — no need to
   touch individual component rules. Declared after body[data-theme="light"]
   so it always wins (equal specificity, source order decides): kids theme
   should look the same regardless of the user's underlying dark/light pick. */
body.kids-active {
  --bg:     #eafcff;
  --card:   #fffef8;
  --accent: #2fb6c4;
  --lite:   #5fd6e0;
  --text:   #0a4a52;
  --sub:    #3d7a82;
  /* One continuous gradient for the WHOLE page (not just the .app content box) —
     darker ocean teal at the bottom, lighter sky blue as it rises toward the top.
     Put on body itself, not on #kids-home-screen, so the outer page margin and
     the app content share the exact same backdrop with no visible seam.
     The range is deliberately WIDE (bright sky -> deep water, not light-blue ->
     slightly-less-light-blue): the depth is what makes the cream bubbles pop. */
  background: linear-gradient(180deg, #bdeaf7 0%, #4fb8d6 45%, #0f7a92 80%, #0a5568 100%);
}
#kids-home-screen.active { min-height:100vh; }

/* The kids theme applies to EVERY screen in the Kids version (Stats, Account,
   Settings, Guide, Profile), not just Kids Home — see showScreen() in game.js.
   Almost everything re-themes for free off the vars above. The rules below are
   the exceptions: components that hardcode DARK-theme colours and would be
   unreadable on the cream cards. They must stay inside this kids block, which
   sits AFTER the body[data-theme="light"] rules — several are equal specificity,
   so source order is what makes them win. */
body.kids-active .settings-card    { background: var(--card); }
body.kids-active .db-pill          { border-color: rgba(10,74,82,.22); }
body.kids-active .db-pill:hover,
body.kids-active .db-pill-active   { background: var(--accent); border-color: var(--accent); color: #04333a; }
body.kids-active .db-recent-score  { color: #0f7a92; }
body.kids-active .toggle-btn.muted { background: #8fb9c0; color: #04333a; }
body.kids-active .btn.grey         { background: #8fb9c0; color: #04333a; }
body.kids-active .btn.grey:hover   { background: #7aa8b0; }
body.kids-active #acct-method      { color: #0f7a92; }

/* Account screen's sign-in-method line — was an inline #a855f7, moved here so
   the kids theme can override it (CSS can't beat an inline style). */
#acct-method { text-align:center; font-size:.8rem; color:#a855f7; font-weight:600; margin-bottom:24px; }
/* The title is the gradient wordmark (see .kids-wordmark) — the same logo the
   splash lands on. Its warm letters survive this pale water ONLY because of the
   wordmark's teal keyline; plain amber here is 1.29:1. */
.kids-home-title { font-size:2rem; line-height:1.12; margin:4px 0; }
.kids-home-title .kwm-line { display:block; }
@media (max-width:400px) { .kids-home-title { font-size:1.6rem; } }

/* Kids ocean colors only — geometry comes from the shared `.profile-pill` base.
   Fixed hex rather than theme vars: the kids look must not shift with the
   user's dark/light pick. */
.profile-pill-kids {
  background:rgba(255,255,255,.92);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.profile-pill-kids .p-name { color:#0a4a52; }

/* ── Kids bubble cards ("Option 3" — Bubble Capsules) ───────────────────────
   Circular tiles, all the SAME fixed size (not content-driven), so a future
   row of many games stays visually even. Grows on hover (mouse) AND on
   press/touch (:active — works on iPad/iPhone since these elements already
   have onclick handlers, which is what makes :active fire on iOS Safari). */
.kids-bubble-grid {
  display:flex; flex-wrap:wrap; justify-content:center; gap:22px;
  padding:8px 4px 4px;
}
/* The rocket-gradient ring means "this one is playable" — it's a SIGNAL, not
   decoration, which is why .kb-soon below drops it rather than dimming it.
   The two-layer background is the only way to put a gradient on a border: the
   cream fill paints to padding-box, the gradient to border-box, and the border
   itself must be `transparent` for the ring to show through.
   NOTE this replaced the old pale-cyan `inset 0 0 0 6px #d7f4fa` halo — the two
   read as competing rings when stacked, so the halo now only survives on .kb-soon. */
.kids-bubble-card {
  width:150px; height:150px; flex:0 0 auto;
  border-radius:50%;
  border:3px solid transparent;
  background:
    linear-gradient(#fffef8, #fffef8) padding-box,
    linear-gradient(135deg, #fbbf24, #f97316, #f472b6) border-box;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; cursor:pointer; padding:14px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.kids-bubble-card:hover  { transform:scale(1.08); box-shadow:0 12px 24px rgba(0,0,0,.24); }
.kids-bubble-card:active { transform:scale(1.12); }
.kids-bubble-card .kb-icon  { font-size:2.6rem; line-height:1; }
.kids-bubble-card .kb-label { font-size:.85rem; font-weight:800; color:#0a4a52; margin-top:6px; line-height:1.2; }

/* Not-yet-built games: translucent so they read as "water, not glass" — present
   and promising, but clearly not tappable. Crucially this also DROPS the gradient
   ring back to plain white, so the ring keeps meaning "playable" — a dimmed
   gradient would still say "alive". The single `background` here deliberately
   overrides the base's two-layer padding-box/border-box stack. */
.kids-bubble-card.kb-soon {
  background:rgba(255,255,255,.3); border-color:rgba(255,255,255,.5);
  box-shadow:0 4px 12px rgba(0,0,0,.12), inset 0 0 0 5px rgba(255,255,255,.28);
  cursor:default;
}
.kids-bubble-card.kb-soon .kb-icon  { opacity:.75; }
.kids-bubble-card.kb-soon .kb-label { color:#08404a; opacity:.85; }
.kids-bubble-card.kb-soon:hover,
.kids-bubble-card.kb-soon:active {
  transform:none;
  box-shadow:0 4px 12px rgba(0,0,0,.12), inset 0 0 0 5px rgba(255,255,255,.28);
}
@media (max-width:400px) {
  .kids-bubble-card { width:126px; height:126px; }
  .kids-bubble-card .kb-icon  { font-size:2.1rem; }
  .kids-bubble-card .kb-label { font-size:.72rem; }
}
@media (prefers-reduced-motion: reduce) { .kids-bubble-card { transition:none; } }

/* ── Ocean Explorer rocket: same rocket illustration as version-select, just
   recontextualized as a diver instead of a spaceship (ripple + bubbles below
   it instead of stars around it). No changes to the rocket's own artwork. */
.rocket-scene { position:relative; display:inline-block; }
.rocket-icon { animation:rocketBob 3.2s ease-in-out infinite; }
@keyframes rocketBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.rocket-ripple { display:block; margin:0 auto; }
.rocket-bubble {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.35));
  box-shadow:inset 0 0 3px rgba(255,255,255,.6);
  animation:bubbleRise 3.6s ease-in infinite;
}
@keyframes bubbleRise { 0% { transform:translateY(0); opacity:.9; } 100% { transform:translateY(-46px); opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .rocket-icon, .rocket-bubble { animation:none; }
}
html { overflow-x:hidden; }
body { background:var(--bg); color:var(--text); font-family:'Segoe UI',system-ui,sans-serif; min-height:100dvh; display:flex; justify-content:center; align-items:flex-start; padding:20px 16px 60px; overflow-x:hidden; width:100%; }

/* ── Splash Screen ───────────────────────────────────── */
#splash-screen {
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  cursor:pointer;
  transition:opacity .7s ease;
}
#splash-screen.fade-out { opacity:0; pointer-events:none; }
#splash-logo-wrap {
  animation:splash-pop .55s cubic-bezier(.34,1.56,.64,1) both;
}
#splash-svg { width:160px; height:150px; }
#splash-title {
  font-size:2.6rem; font-weight:900; letter-spacing:.22em;
  display:flex; gap:0;
}
#splash-sub {
  font-size:1rem; font-weight:700; letter-spacing:.45em;
  color:var(--sub);
  display:flex; gap:0; align-items:center;
}
.sl {
  display:inline-block;
  opacity:0;
  animation:splash-letter .3s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:calc(.45s + var(--i) * .07s);
}
@keyframes splash-pop {
  from { transform:scale(.4); opacity:0; }
  to   { transform:scale(1);  opacity:1; }
}
@keyframes splash-letter {
  from { transform:scale(.3) translateY(10px); opacity:0; }
  to   { transform:scale(1)  translateY(0);    opacity:1; }
}

/* ── Kids Splash ("Surfacing") ────────────────────────
   Sibling of #splash-screen: same display:none-at-rest + playSplash() contract.
   The rocket rises from below while the ocean cross-fades up behind it, landing
   on the identical gradient Kids Home uses — the splash IS the transition from
   the dark amber version panel into the ocean, so neither hand-off cuts. */
#kids-splash {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; cursor:pointer;
  transition:opacity .7s ease;
}
#kids-splash.fade-out { opacity:0; pointer-events:none; }
.ks-layer { position:absolute; inset:0; }
/* The world you're leaving: the amber-tinted version panel. */
.ks-dark  { background:linear-gradient(180deg,#3d2a12 0%,#241708 60%,#160e05 100%); }
/* The world you're arriving in — keep in sync with body.kids-active's gradient. */
.ks-ocean {
  opacity:0;
  background:linear-gradient(180deg,#bdeaf7 0%,#4fb8d6 45%,#0f7a92 80%,#0a5568 100%);
  animation:ks-surface 1.5s ease-in-out .15s forwards;
}
@keyframes ks-surface { to { opacity:1; } }

/* 52% is about the ceiling: past roughly half the screen width the ascent stops
   reading as flight and just reads as the rocket growing. The travel is what
   sells it, so size trades against distance — don't push this much further. */
/* The 24vh term is load-bearing, not a nicety: the rocket is sized by WIDTH but
   the title is placed by HEIGHT, so on a landscape iPad a width-only rocket
   would be half the viewport tall and crash through the title. Capping against
   vh keeps it ~22vh tall on any shape, so the lockup below always clears it. */
.ks-rocket {
  position:absolute; left:50%; top:26%; width:min(52%, 215px, 24vh);
  transform:translate(-50%,150%);
  animation:ks-ascend 1.5s cubic-bezier(.22,.9,.3,1.05) .1s forwards;
}
.ks-rocket svg { width:100%; height:auto; display:block; }
@keyframes ks-ascend {
  0%   { transform:translate(-50%,150%); }
  70%  { transform:translate(-50%,-6%); }
  100% { transform:translate(-50%,0); }
}
/* Settles into the same idle bob the rocket uses on Kids Home. */
.ks-rocket-inner { animation:rocketBob 3.2s ease-in-out 1.6s infinite; }

.ks-bub {
  position:absolute; border-radius:50%; opacity:0;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.3));
  animation:ks-trail 1.5s ease-out infinite;
}
@keyframes ks-trail {
  0%   { opacity:0;  transform:translateY(0) scale(.5); }
  25%  { opacity:.9; }
  100% { opacity:0;  transform:translateY(-90px) scale(1.1); }
}

/* ── The Mental Math Kids wordmark ─────────────────────
   The rocket's amber→orange→pink walked across the letters over a hard teal
   keyline. SHARED by the splash (#ks-title/#ks-sub) and Kids Home's <h1>, so
   the splash hands off into a home screen wearing the same logo — that's the
   whole point, don't let the two drift apart.
   Always TWO stacked lines ("MENTAL MATH" / "KIDS"), same size on both: it's a
   wordmark, not a name-plus-subtitle. Stacking is also what lets the type be
   big — as one row it had to shrink to 1.5rem to fit a phone.
   The keyline is load-bearing, NOT decoration — see CSS GOTCHA #8 in NOTES.md
   before touching it. Warm letters measure 1.29:1 on Kids Home's pale top water
   and ~1.9:1 on the splash's mid-blue; the outline is the only thing carrying
   them at either spot. */
.kids-wordmark {
  text-align:center; font-weight:900; letter-spacing:.1em;
  text-shadow:
    0 2px 0 #06414d, 0 -1px 0 #06414d, 1px 1px 0 #06414d, -1px 1px 0 #06414d,
    0 4px 14px rgba(0,0,0,.45);
}
.kwl { display:inline-block; }        /* one letter; carries its own gradient stop */

/* Splash placement. Keep the lines tight enough to read as one block (~12px
   apart at 2rem). */
#ks-title, #ks-sub {
  position:absolute; left:0; right:0; font-size:2rem;
}
#ks-title { top:56%; }
#ks-sub   { top:62%; }
/* The write-on is the SPLASH's job only — Kids Home reuses .kids-wordmark/.kwl
   but must render instantly, so the animation is scoped to the splash's two ids
   rather than living on .kwl. */
#ks-title .kwl, #ks-sub .kwl {
  opacity:0;
  animation:splash-letter .34s cubic-bezier(.34,1.56,.64,1) forwards;
}
/* Staged, not continuous: the name writes on, THEN "KIDS" drops in under it.
   Last letter lands ~2.55s, inside the 3200ms auto-advance set in game.js's
   VERSION_SPLASH — retime both together if either changes. */
#ks-title .kwl { animation-delay:calc(1.45s + var(--i) * .045s); }
#ks-sub   .kwl { animation-delay:calc(2.05s + var(--i) * .06s); }
@media (max-width:400px) {
  #ks-title, #ks-sub { font-size:1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-ocean  { opacity:1; animation:none; }
  .ks-rocket { transform:translate(-50%,0); animation:none; }
  .ks-rocket-inner, .ks-bub { animation:none; }
  #ks-title .kwl, #ks-sub .kwl { opacity:1; animation:none; }
}
.app { width:100%; max-width:480px; overflow-x:hidden; }
.screen { display:none; } .screen.active { display:block; padding:70px 20px 20px; }
h1 { font-size:2rem; font-weight:800; text-align:center; }
h2 { font-size:1rem; font-weight:600; color:var(--sub); margin-bottom:8px; }
.sub { color:var(--sub); text-align:center; font-size:.9rem; margin-top:4px; }
.btn { display:block; width:100%; background:var(--accent); color:var(--text); border:none; border-radius:12px; padding:13px 28px; font-size:1rem; font-weight:700; cursor:pointer; transition:background .15s,transform .1s; margin-top:10px; text-align:center; }
.btn:hover { background:var(--lite); } .btn:active { transform:scale(.97); }
.btn.grey  { background:#374151; } .btn.grey:hover  { background:#4b5563; }
.btn.green { background:var(--green); } .btn.green:hover { background:#16a34a; }
.btn.blue  { background:var(--blue); } .btn.blue:hover  { background:#2563eb; }
.pill-group { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.pill { background:var(--card); color:var(--sub); border:2px solid transparent; border-radius:999px; padding:7px 18px; font-size:.9rem; font-weight:600; cursor:pointer; transition:all .15s; }
.pill.selected { background:var(--accent); color:var(--text); border-color:var(--lite); }

/* ── Game setup screens ──────────────────────────────────
   Shared by Solo Practice / Classic Challenge (#menu-screen) and both Match &
   Find setups. Everything below still uses `.pill-group` > `.pill[data-val]`,
   because game.js selects by exactly that (the generic `.pill-group` click
   handler and `getSelected(id)`) — these are styling modifiers ONLY. Don't
   rename them out from under that wiring. */

/* Difficulty as cards that show a REAL example of what you'd be answering.
   "Easy" alone says nothing — easy addition could be 2+3 or 40+50. The example
   text is written by refreshSetupPreview() in game.js from the actual question
   generator, so it can never drift from the real questions. */
.pill-group.diff-cards { gap:8px; flex-wrap:nowrap; }
.diff-cards .pill {
  flex:1; border-radius:14px; padding:9px 4px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:0;
}
.diff-cards .d-name { font-size:.9rem; font-weight:800; }
.diff-cards .d-eg {
  font-size:.72rem; font-weight:700; opacity:.65;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.diff-cards .pill.selected .d-eg { opacity:.9; }

/* The minor settings (length / timer): visible but compressed, so they stop
   competing with Topic. Two lines instead of eight. */
.setup-card {
  background:var(--card); border-radius:16px;
  padding:2px 14px; margin-bottom:16px;
}
.setup-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid rgba(128,128,140,.16);
}
.setup-row:last-child { border-bottom:none; }
.setup-row-label { font-size:.85rem; font-weight:700; color:var(--sub); flex:0 0 auto; }
/* Overrides .pill-group's own margin/wrap for the inline row context. */
.setup-row .pill-group { margin:0; margin-left:auto; justify-content:flex-end; gap:6px; }
.setup-row .pill { background:var(--bg); font-size:.78rem; padding:5px 12px; }
.setup-row .pill.selected { background:var(--accent); color:var(--text); }

/* Live preview — the last thing seen before committing. */
.setup-preview {
  background:var(--card); border:2px solid var(--accent);
  border-radius:16px; padding:14px; margin-bottom:16px; text-align:center;
}
.sp-label {
  font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lite); margin-bottom:5px;
}
.sp-q { font-size:1.5rem; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; }
.sp-meta { font-size:.72rem; color:var(--sub); margin-top:5px; }
@media (max-width:360px) {
  .diff-cards .d-eg { font-size:.62rem; }
  .sp-q { font-size:1.25rem; }
}
input[type="text"],input[type="number"],input[type="email"],input[type="password"] { width:100%; background:var(--card); border:2px solid var(--accent); border-radius:12px; color:var(--text); font-size:1.4rem; font-weight:700; text-align:center; padding:12px; outline:none; margin-bottom:10px; transition:border-color .2s; }
input:focus { border-color:var(--lite); } input:disabled { opacity:.4; }

/* Home */
#home-screen .logo { text-align:center; padding:8px 0 20px; }

/* ── CSS Logo ─────────────────────────────────────────────── */
.css-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.css-logo-sm {
  transform: scale(0.55);
  transform-origin: center bottom;
}
.brain-svg {
  width: 140px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(168,85,247,0.7)) drop-shadow(0 0 20px rgba(244,114,182,0.35));
}
.css-logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.css-logo-mental {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.25em;
  background: linear-gradient(90deg, #f472b6, #e2e8f0, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.css-logo-math-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.css-logo-math {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  background: linear-gradient(90deg, #f472b6, #a855f7, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.css-logo-line {
  display: inline-block;
  height: 2px;
  width: 22px;
  border-radius: 2px;
}
.css-logo-line.left  { background: #f472b6; }
.css-logo-line.right { background: #38bdf8; }
.mode-card { background:var(--card); border-radius:16px; padding:20px; margin-bottom:12px; cursor:pointer; border:2px solid var(--accent); transition:border-color .2s, box-shadow .2s; box-shadow: 0 4px 16px rgba(124,58,237,.25); }
.mode-card:hover { border-color:var(--lite); box-shadow: 0 4px 24px rgba(124,58,237,.45); }
.mode-card h3 { font-size:1.1rem; margin-bottom:4px; }
.mode-card p  { color:var(--sub); font-size:.88rem; }
.mode-card .icon { font-size:1.6rem; margin-bottom:8px; }

/* Back button */
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sub);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 6px 12px 6px 8px;
  border-radius: 10px;
  background: var(--card);
  border: 1.5px solid rgba(255,255,255,.07);
  transition: color .15s, background .15s, transform .1s;
  user-select: none;
}
.back:hover { color: var(--text); background: var(--accent); border-color: var(--accent); }
.back:active { transform: scale(.95); }

/* Lobby */
.room-code-display { background:var(--card); border-radius:16px; text-align:center; padding:28px; margin:16px 0; }
.room-code-display .label { color:var(--sub); font-size:.9rem; margin-bottom:8px; }
.room-code-display .code { font-size:3rem; font-weight:900; color:var(--lite); letter-spacing:8px; }
.players-list { margin:16px 0; }
.player-row { background:var(--card); border-radius:10px; padding:12px 16px; margin-bottom:8px; display:flex; align-items:center; gap:10px; font-weight:600; }
.player-row .dot { width:10px; height:10px; border-radius:50%; background:var(--green); flex-shrink:0; }
.waiting-msg { text-align:center; color:var(--sub); font-size:.9rem; margin:12px 0; }

/* Game */
#progress-bar-wrap { width:100%; height:6px; background:var(--card); border-radius:3px; margin-bottom:16px; overflow:hidden; }
#progress-bar { height:100%; background:var(--accent); border-radius:3px; transition:width .3s; width:0%; }
.game-top { display:flex; align-items:center; gap:12px; justify-content:space-between; font-size:.9rem; color:var(--sub); margin-bottom:12px; }
#score-display { color:var(--lite); font-weight:700; }

/* Scoreboard */
.scoreboard { display:flex; gap:8px; margin-bottom:10px; }
.score-card { flex:1; background:var(--card); border-radius:12px; padding:10px 14px; text-align:center; border:2px solid transparent; }
.score-card.me   { border-color:var(--accent); }
.score-card.them { border-color:#374151; }
.score-card .name { font-size:.8rem; color:var(--sub); margin-bottom:2px; }
.score-card .pts  { font-size:1.4rem; font-weight:800; }
.score-card.leading .pts { color:var(--green); }
.score-card .status { font-size:.75rem; font-weight:700; min-height:16px; margin-top:4px; }
.status-correct { color:var(--green); } .status-wrong { color:var(--red); }

/* Power-up pip bars */
.pu-mini-bar { display:flex; gap:4px; justify-content:center; margin-top:5px; }
.pu-pip { width:9px; height:9px; border-radius:50%; background:#1e1e38; border:1.5px solid #3a3a6a; transition:background .15s, box-shadow .15s; }
.pu-pip.filled { background:#f59e0b; border-color:#f59e0b; box-shadow:0 0 5px #f59e0b88; }

/* Timer */
.timer-wrap { display:flex; justify-content:center; margin-bottom:14px; }
#timer-svg { width:72px; height:72px; }
#timer-bg  { fill:none; stroke:var(--card); stroke-width:8; }
#timer-fg  { fill:none; stroke:var(--green); stroke-width:8; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset .9s linear,stroke .3s; }
#timer-text { font-size:1.2rem; font-weight:800; fill:var(--text); dominant-baseline:middle; text-anchor:middle; }

.q-card { background:var(--card); border-radius:16px; text-align:center; padding:28px 20px; margin-bottom:14px; }
#question-text { font-size:2.6rem; font-weight:800; letter-spacing:2px; }
#answer-input  { font-size:1.8rem; }
#feedback { text-align:center; font-size:1rem; font-weight:600; min-height:24px; margin-bottom:10px; }
.fb-correct { color:var(--green); } .fb-wrong { color:var(--red); } .fb-timeout { color:var(--yellow); }

.empty-answer-warning {
  border: 2px solid #7f1d1d;
  background: rgba(127,29,29,.18);
  color: #fca5a5;
  border-radius: 10px;
  padding: 10px 16px;
  text-align: center;
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 8px;
  animation: warnShake .35s ease;
}
.empty-answer-warning.hidden { display: none; }

@keyframes warnShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-7px); }
  40%  { transform: translateX(7px); }
  60%  { transform: translateX(-5px); }
  80%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

/* Power-up popup */
.popup-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.popup-overlay.hidden { display:none; }
.popup-box { background:var(--card); border-radius:20px; padding:28px 24px; width:100%; max-width:400px; text-align:center; border:2px solid var(--accent); }
.popup-box h2 { color:var(--yellow); font-size:1.3rem; margin-bottom:6px; }
.popup-box p  { color:var(--sub); font-size:.9rem; margin-bottom:20px; }
.powerup-options { display:flex; gap:12px; }
.powerup-btn { flex:1; background:var(--bg); border:2px solid var(--accent); border-radius:14px; padding:16px 10px; cursor:pointer; color:var(--text); transition:background .15s,transform .1s; }
.powerup-btn:hover { background:var(--accent); transform:scale(1.03); }
.powerup-btn .pu-icon { font-size:2rem; margin-bottom:8px; }
.powerup-btn .pu-name { font-weight:800; font-size:1rem; margin-bottom:4px; }
.powerup-btn .pu-desc { font-size:.78rem; color:var(--sub); }

/* Opponent choosing popup */
.opp-choosing-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:98; padding:20px; }
.opp-choosing-overlay.hidden { display:none; }
.opp-choosing-box { background:var(--card); border-radius:20px; padding:32px 24px; text-align:center; border:2px solid var(--yellow); max-width:360px; width:100%; }
.opp-choosing-box .icon { font-size:2.5rem; margin-bottom:12px; }
.opp-choosing-box h2 { color:var(--yellow); font-size:1.2rem; margin-bottom:6px; }
.opp-choosing-box p  { color:var(--sub); font-size:.9rem; }

/* Freeze overlay */
.freeze-overlay { position:fixed; inset:0; background:rgba(59,130,246,.2); display:flex; align-items:center; justify-content:center; z-index:90; }
.freeze-overlay.hidden { display:none; }
.freeze-box { background:rgba(30,30,46,.96); border:3px solid var(--blue); border-radius:20px; padding:28px 32px; text-align:center; }
.freeze-box .freeze-icon { font-size:3rem; }
.freeze-box h2 { color:var(--blue); font-size:1.3rem; margin:8px 0 4px; }
.freeze-box .freeze-count { font-size:3rem; font-weight:900; color:var(--blue); }

/* Double points */
.double-overlay { position:fixed; inset:0; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; z-index:95; padding:20px; }
.double-overlay.hidden { display:none; }
.double-box { background:var(--card); border-radius:20px; padding:32px 24px; text-align:center; border:3px solid var(--yellow); max-width:380px; width:100%; }
.double-box .d-icon { font-size:3rem; margin-bottom:12px; }
.double-box h2 { color:var(--yellow); font-size:1.3rem; margin-bottom:8px; }
.double-box p  { color:var(--sub); font-size:.9rem; }

/* Results */
#result-screen { text-align:center; }
.winner-banner { background:var(--card); border-radius:16px; padding:24px; margin:16px 0; }
.winner-banner .trophy { font-size:3rem; }
.winner-banner .winner-name { font-size:2rem; font-weight:900; color:var(--lite); }
.winner-banner h2 { font-size:1.4rem; color:var(--text); margin:8px 0 4px; }
.final-scores { display:flex; gap:10px; margin:16px 0; }
.final-score-card { flex:1; background:var(--card); border-radius:12px; padding:14px; text-align:center; }
.final-score-card .name { color:var(--sub); font-size:.85rem; margin-bottom:6px; }
.final-score-card .pts  { font-size:1.8rem; font-weight:800; }
.final-score-card.winner { border:2px solid var(--green); }
.final-score-card.winner .pts { color:var(--green); }
.review-list { text-align:left; margin-bottom:16px; }
.review-item { background:var(--card); border-radius:10px; padding:10px 14px; margin-bottom:6px; font-size:.9rem; display:flex; align-items:center; gap:10px; }
.review-item.ok  { border-left:4px solid var(--green); }
.review-item.bad { border-left:4px solid var(--red); }
.review-item .note { color:var(--sub); font-size:.82rem; }
.btn-row { display:flex; gap:10px; }
.btn-row .btn { flex:1; margin-top:0; }

/* Profile setup screen */
#profile-screen { text-align:center; }
#profile-screen h1 { margin-bottom:6px; }
#profile-screen .sub { margin-bottom:28px; }
#profile-name-input { font-size:1.2rem; text-align:center; }
.avatar-grid { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:16px 0 24px; }
.avatar-opt {
  width:60px; height:60px; font-size:2rem;
  background:var(--card); border:3px solid transparent;
  border-radius:16px; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  transition:all .15s;
}
.avatar-opt:hover  { border-color:var(--lite); transform:scale(1.1); }
.avatar-opt.picked { border-color:var(--accent); background:var(--accent); transform:scale(1.08); }

/* Profile pill — shared by BOTH home screens (regular + kids). Geometry lives
   here; only colors differ per version, in the two modifier blocks below.
   See `.profile-pill-kids` / `.profile-pill-standard`.
   It is a DISPLAY element, not a control: no cursor/hover/press states, because
   editing moved to the menu (My Account) and something that looks tappable but
   isn't is worse than either. Don't re-add a hover here without giving it a job. */
.profile-pill {
  position:fixed; top:14px; right:16px; z-index:401;
  display:flex; align-items:center; gap:8px;
  border-radius:30px;
  padding:5px 14px 5px 8px;
}
.profile-pill .p-avatar { font-size:1.5rem; line-height:1; }
.profile-pill .p-name   { font-weight:800; font-size:.82rem; }
@media (max-width:400px) {
  .profile-pill .p-avatar { font-size:1.3rem; }
  .profile-pill .p-name   { font-size:.74rem; }
}

/* Regular Mental Math: reads from the theme vars, so it still follows the
   user's dark/light pick like the full-width card it replaced did. */
.profile-pill-standard {
  background:var(--card);
  border:2px solid var(--accent);
  box-shadow:0 4px 14px rgba(124,58,237,.3);
}
.profile-pill-standard .p-name { color:var(--text); }

/* Avatar on scoreboard */
.score-card .avatar { font-size:1.4rem; margin-bottom:2px; }

/* Countdown overlay */
.countdown-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:200; }
.countdown-overlay.hidden { display:none; }
.countdown-box { text-align:center; }
.countdown-number { font-size:8rem; font-weight:900; line-height:1; animation:popIn .4s ease; }
.countdown-go { font-size:5rem; font-weight:900; color:var(--green); animation:popIn .4s ease; }
.countdown-label { color:var(--sub); font-size:1rem; margin-top:12px; }
@keyframes popIn { 0%{transform:scale(1.6);opacity:0} 100%{transform:scale(1);opacity:1} }

@media (max-width:400px) { #question-text { font-size:2rem; } .pill { padding:6px 12px; font-size:.82rem; } }

/* ── Guide Screen ────────────────────────────────────────── */
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.guide-grid-3 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px; }
@media(max-width:500px){ .guide-grid-3 { grid-template-columns:1fr; } }
.guide-section-label {
  font-size:1rem;
  font-weight:800;
  color:var(--text);
  margin:18px 0 10px;
  padding-bottom:6px;
  border-bottom:2px solid var(--border);
  letter-spacing:.02em;
}
.guide-card {
  background:var(--card);
  border-radius:16px;
  padding:16px 14px;
  border:2px solid transparent;
  display:flex;
  flex-direction:column;
  gap:0;
}
.guide-card-pink   { border-color:#f472b6; }
.guide-card-purple { border-color:#a855f7; }
.guide-card-blue   { border-color:#3b82f6; }
.guide-card-yellow { border-color:#f59e0b; }
.guide-card-crane  { border-color:#14b8a6; }
.guide-card-green  { border-color:#22c55e; }
.guide-card-title {
  font-size:.92rem;
  font-weight:800;
  margin-bottom:10px;
}
.guide-card-pink   .guide-card-title { color:#f472b6; }
.guide-card-purple .guide-card-title { color:#a855f7; }
.guide-card-blue   .guide-card-title { color:#60a5fa; }
.guide-card-yellow .guide-card-title { color:#f59e0b; }
.guide-card-crane  .guide-card-title { color:#14b8a6; }
.guide-card-green  .guide-card-title { color:#22c55e; }
.guide-p { font-size:.82rem; color:var(--sub); line-height:1.6; margin-bottom:7px; }
.guide-p strong { color:var(--text); }
.guide-tip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.guide-tip { border-radius:7px; padding:4px 9px; font-size:.76rem; font-weight:700; }
.guide-tip-pink   { background:rgba(244,114,182,.15); color:#f472b6; }
.guide-tip-purple { background:rgba(168,85,247,.15);  color:#a855f7; }
.guide-tip-blue   { background:rgba(59,130,246,.15);  color:#60a5fa; }
.guide-tip-yellow { background:rgba(245,158,11,.15);  color:#f59e0b; }
.guide-tip-crane  { background:rgba(20,184,166,.15);  color:#14b8a6; }
.guide-tip-green  { background:rgba(34,197,94,.15);   color:#22c55e; }
.guide-pu-row { display:flex; gap:8px; align-items:flex-start; font-size:.8rem; color:var(--sub); line-height:1.5; }
.guide-pu-row span:first-child { flex-shrink:0; font-size:1rem; }
.guide-pu-row strong { color:var(--text); }
.pu-card { display:flex; gap:14px; align-items:center; background:var(--bg); border-radius:12px; padding:12px 14px; margin-bottom:8px; }
.pu-card-ico { font-size:2rem; line-height:1; width:36px; text-align:center; flex-shrink:0; }
.pu-card strong { font-size:.9rem; font-weight:800; display:block; margin-bottom:3px; }
.pu-card span  { font-size:.82rem; color:var(--sub); line-height:1.45; }
.freeze-name { color:#60a5fa; }
.blast-name  { color:#f87171; }
.steal-name  { color:#fbbf24; }

/* ── Math background symbols ─────────────────────────────── */
.math-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-weight: 900;
  color: var(--text);
  user-select: none;
}
.math-bg.visible { display: block; opacity: 1; }
.math-bg span { position: absolute; line-height: 1; }

/* ── Kids background decorations — rising bubbles for the Ocean Explorer theme ── */
.kids-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  display: none; user-select: none;
}
.kids-bg.visible { display: block; }
.kids-bg span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), rgba(255,255,255,.25));
  box-shadow: inset 0 0 4px rgba(255,255,255,.5);
  animation: kidsBubbleDrift 6s ease-in-out infinite;
}
@keyframes kidsBubbleDrift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .kids-bg span { animation: none; } }

/* ── Tab Bar ─────────────────────────────────────────────── */
.tab-bar {
  position: fixed;
  top: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 400;
  pointer-events: none;
}
.tab-bar > * { pointer-events: all; }
#auth-tab-area { display: flex; align-items: center; }
#google-signin-tab, #google-signout-tab {
  background: var(--card);
  border: 2px solid transparent;
  border-radius: 14px;
  color: var(--text);
  font-size: .78rem;
  font-weight: 600;
  height: 46px;
  padding: 0 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  white-space: nowrap;
}
#google-signin-tab:hover, #google-signout-tab:hover { border-color: var(--lite); }
/* ── Hamburger nav ──────────────────────────────────────
   Replaced a row of five square tabs, which ate too much of a phone screen.
   Everything below reads from the theme vars, so the kids version re-themes for
   free via body.kids-active — no kids-specific rules needed here. */
.nav-menu { position: relative; }
.nav-toggle {
  background: var(--card);
  border: 2px solid transparent;
  border-radius: 14px;
  width: 46px; height: 46px;
  padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.nav-toggle:hover { border-color: var(--lite); transform: scale(1.08); }
.nav-toggle[aria-expanded="true"] { border-color: var(--accent); background: var(--accent); }
/* Three bars from one element: the middle is the span, the outer two its
   pseudo-elements — which is also what lets them fold into an ✕ when open. */
.nav-bars {
  position: relative; display: block;
  width: 20px; height: 2.5px; border-radius: 2px;
  background: var(--text);
  transition: background .2s;
}
.nav-bars::before, .nav-bars::after {
  content: ''; position: absolute; left: 0;
  width: 20px; height: 2.5px; border-radius: 2px;
  background: var(--text);
  transition: transform .2s;
}
.nav-bars::before { top: -6px; }
.nav-bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars::after  { transform: translateY(-6px) rotate(-45deg); }

.nav-dropdown {
  position: absolute; top: 54px; left: 0;
  min-width: 190px;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  animation: navDrop .16s ease-out;
}
/* MUST be explicit: the `hidden` attribute's UA style is `display:none`, but the
   rule above is more specific and would beat it, leaving the menu always open. */
.nav-dropdown[hidden] { display: none; }
@keyframes navDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Menu rows. Keeps the .tab-btn name/ids the rest of the app already targets. */
.tab-btn {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: .9rem; font-weight: 700;
  width: 100%; text-align: left;
  padding: 9px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  display: flex; align-items: center; gap: 10px;
}
.tab-btn .nav-ico { font-size: 1.15rem; line-height: 1; }
.tab-btn:hover  { background: var(--bg); }
.tab-btn.active { border-color: var(--accent); background: var(--accent); }

/* Switch Version row. Same shape as .tab-btn but deliberately NOT that class —
   showScreen() would try to mark it .active by id, and it isn't a destination
   within the current version, it changes which version you're in. */
.nav-row {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  color: var(--sub);
  font-family: inherit;
  font-size: .9rem; font-weight: 700;
  width: 100%; text-align: left;
  padding: 9px 12px;
  cursor: pointer;
  transition: background .15s, color .15s;
  display: flex; align-items: center; gap: 10px;
}
.nav-row .nav-ico { font-size: 1.15rem; line-height: 1; }
.nav-row:hover { background: var(--bg); color: var(--text); }
.nav-sep {
  border: none; border-top: 1px solid var(--sub);
  opacity: .28; margin: 4px 6px;
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle, .nav-bars, .nav-bars::before, .nav-bars::after, .tab-btn { transition: none; }
  .nav-dropdown { animation: none; }
}

/* ── Dashboard filter pills ─────────────────────────────── */
.db-pill {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #ffffff22;
  background: transparent;
  color: var(--sub);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.db-pill:hover { border-color: #a855f7; color: #fff; }
.db-pill-active { background: #a855f7; border-color: #a855f7; color: #fff; }

/* ── Dashboard ───────────────────────────────────────────── */
.db-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.db-stat-card {
  background: var(--card);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  border-top: 3px solid var(--db-clr, #a855f7);
  position: relative;
  overflow: hidden;
}
.db-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--db-clr, #a855f7)12%, transparent 60%);
  opacity: 0.07;
  pointer-events: none;
}
.db-stat-icon { font-size: 1.2rem; margin-bottom: 4px; }
.db-stat-val  { font-size: 1.6rem; font-weight: 900; color: var(--db-clr, #a855f7); line-height: 1.1; }
.db-stat-label{ font-size: .7rem; color: var(--sub); margin-top: 3px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }

.db-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.db-panel {
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
}
.db-panel-wide { grid-column: 1 / -1; }
.db-panel-title {
  font-size: .82rem;
  font-weight: 800;
  color: var(--sub);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* topic bars */
.db-topic-row { display: flex; flex-direction: column; gap: 3px; }
.db-topic-name { font-size: .8rem; font-weight: 600; display: flex; justify-content: space-between; }
.db-topic-track { height: 6px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.db-topic-fill  { height: 100%; border-radius: 99px; transition: width .5s ease; }

/* recent games */
.db-recent-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: .82rem;
}
.db-recent-icon { font-size: 1rem; }
.db-recent-topic{ font-weight: 600; }
.db-recent-score{ font-weight: 900; color: #a855f7; }
.db-recent-date { font-size: .72rem; color: var(--sub); }

/* game type rows */
.db-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--bg);
  font-size: .85rem;
}
.db-type-row:last-child { border-bottom: none; }

@media (max-width: 480px) {
  .db-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .db-main-grid { grid-template-columns: 1fr; }
  .db-panel-wide { grid-column: auto; }
}

/* ── 2×2 Mode Grid ───────────────────────────────────────── */
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}
.mode-grid .mode-card {
  margin-bottom: 0;
}
.mode-grid .mode-card h3 { font-size: .95rem; }
.mode-grid .mode-card p  { font-size: .80rem; }

/* Home grid — 2 cards top + 1 wide card below */
.home-grid {
  grid-template-columns: 1fr 1fr;
}
.home-grid .wide-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}
.home-grid .wide-card .icon { font-size:1.4rem; margin-bottom:0; }
.home-grid .wide-card h3 { font-size:.95rem; margin-bottom:2px; }
.home-grid .wide-card p  { font-size:.80rem; margin:0; }

/* Taller cards for selection screens */
.tall-card {
  padding: 28px 20px !important;
}
.tall-card .icon { font-size: 2.2rem !important; margin-bottom: 12px !important; }
.tall-card h3 { font-size: 1.1rem !important; }
.tall-card p  { font-size: .85rem !important; }

/* ── Version Select (Mental Math vs Mental Math Kids) ──────────────────────── */
/* body centers .app via flexbox (not margin:auto), and both body and .app have
   overflow-x:hidden, so the usual negative-margin "breakout" trick gets clipped.
   Widening .app itself (re-centered naturally by body's flexbox) is the safe way
   to give this one screen more width without touching every other screen. */
.app:has(#version-select-screen.active) { max-width:1100px; }
.version-select-screen.active {
  display:flex !important; flex-direction:column; min-height:100vh;
}
.version-select-screen {
  padding-left:0 !important; padding-right:0 !important; padding-bottom:0 !important;
}
.version-header { padding:0 20px 20px; text-align:center; flex-shrink:0; }
.version-split { display:flex; flex:1; max-width:1100px; width:100%; margin:0 auto; }
.version-panel {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:15% 16px 32px; cursor:pointer; text-align:center;
  transition:background .2s, transform .1s;
}
.version-panel:active { transform:scale(.98); }
.version-panel-standard {
  background:linear-gradient(180deg, rgba(124,58,237,.16), transparent 60%);
  border-right:1px solid rgba(255,255,255,.08);
}
.version-panel-standard:hover { background:linear-gradient(180deg, rgba(124,58,237,.28), transparent 60%); }
.version-panel-kids {
  background:linear-gradient(180deg, rgba(251,191,36,.16), transparent 60%);
}
.version-panel-kids:hover { background:linear-gradient(180deg, rgba(251,191,36,.28), transparent 60%); }
.version-panel-logo { width:100px; height:94px; margin-bottom:22px; }
.version-panel h2 { font-size:1.35rem; margin-bottom:10px; line-height:1.25; }
.version-panel p { color:var(--sub); font-size:.85rem; max-width:190px; line-height:1.4; margin:0; }
@media (max-width:400px) {
  .version-panel { padding-top:12%; }
  .version-panel-logo { width:78px; height:74px; margin-bottom:16px; }
  .version-panel h2 { font-size:1.12rem; }
  .version-panel p { font-size:.78rem; max-width:150px; }
}

/* ── Scoring Info Box ─────────────────────────────────────── */
.scoring-info-box {
  background: var(--card);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 24px;
  border: 1.5px solid var(--border);
}
.scoring-info-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--lite);
}
.scoring-info-rows { display: flex; flex-direction: column; gap: 8px; }
.scoring-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .88rem;
  color: var(--sub);
}
.pts-badge {
  font-size: .8rem;
  font-weight: 800;
  border-radius: 8px;
  padding: 3px 10px;
}
.green-badge  { background: rgba(34,197,94,.18);  color: #86efac; }
.blue-badge   { background: rgba(96,165,250,.18);  color: #93c5fd; }
.yellow-badge { background: rgba(250,204,21,.18);  color: #fde68a; }
.grey-badge   { background: rgba(148,163,184,.18); color: #cbd5e1; }
.red-badge    { background: rgba(239,68,68,.18);   color: #fca5a5; }

/* ── Match & Find ────────────────────────────────────────── */
#match-game-screen {
  padding-top: 70px;
}

.match-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.match-quit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  letter-spacing: .01em;
}
.match-quit:hover { background: #dc2626; }
.match-stat {
  font-size: .82rem;
  font-weight: 700;
  color: var(--sub);
  background: var(--card);
  border-radius: 8px;
  padding: 4px 10px;
}

.match-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* Card base */
.match-card {
  border-radius: 12px;
  min-height: 74px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s, border-color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  position: relative;
  background: var(--accent);
}
.match-card:hover:not(.matched):not(.flipped) {
  transform: scale(1.05);
  border-color: var(--lite);
}

/* Front face (hidden state) */
.match-front {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Back face (revealed) */
.match-back {
  display: none;
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  padding: 8px 6px;
  line-height: 1.3;
  width: 100%;
  align-items: center;
  justify-content: center;
}
/* Flipped state */
.match-card.flipped {
  background: #1e2a3e;
  border-color: var(--blue);
}
.match-card.flipped .match-front { display: none; }
.match-card.flipped .match-back  { display: flex; color: #93c5fd; }

/* Answer card flipped */
.match-card.flipped.is-answer {
  background: #1a2e1a;
  border-color: var(--green);
}
.match-card.flipped.is-answer .match-back { color: #86efac; }

/* Matched state — green glow */
.match-card.matched {
  cursor: default;
  background: rgba(34,197,94,.22) !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 16px 4px rgba(34,197,94,.45);
}
.match-card.matched .match-front { display: none; }
.match-card.matched .match-back  { display: flex; color: #86efac; font-weight: 900; }

/* Shake before fly-off */
@keyframes matchShake {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  15%  { transform: translate(-6px, 0) rotate(-4deg) scale(1.06); }
  30%  { transform: translate(6px, 0) rotate(4deg) scale(1.06); }
  45%  { transform: translate(-5px, 0) rotate(-3deg) scale(1.04); }
  60%  { transform: translate(5px, 0) rotate(3deg) scale(1.04); }
  75%  { transform: translate(-3px, 0) rotate(-2deg) scale(1.02); }
  100% { transform: translate(0,0) rotate(0deg) scale(1); }
}
.match-card.match-shake {
  animation: matchShake 0.35s ease forwards;
  pointer-events: none;
  z-index: 10;
  position: relative;
}

/* Speed fly-off */
@keyframes flyOff {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  30%  { transform: translate(calc(var(--fly-x) * 0.3), -30px) rotate(calc(var(--fly-rot) * 0.4)) scale(1.1); opacity: 1; }
  100% { transform: translate(calc(var(--fly-x) * 3.5), 80px) rotate(var(--fly-rot)) scale(0.4); opacity: 0; }
}
.match-card.fly-off {
  animation: flyOff 0.38s cubic-bezier(.6,0,1,1) forwards;
  pointer-events: none;
  position: relative;
  z-index: 10;
}

/* Wrong flash */
.match-card.wrong-flash {
  border-color: var(--red);
  background: rgba(239,68,68,.15);
}

/* Match result overlay */
.match-result-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100dvh;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.match-result-overlay.hidden { display: none; }
.match-result-box {
  background: var(--card);
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  border: 2px solid var(--accent);
  width: 100%;
  max-width: 380px;
  margin: auto;
}
.match-result-stats {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 16px 0;
}
.mstat {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 16px;
  flex: 1;
}
.mstat-val   { font-size: 1.5rem; font-weight: 900; color: var(--lite); }
.mstat-label { font-size: .75rem; color: var(--sub); margin-top: 2px; }

/* ── Bottom Watermark ────────────────────────────────────── */
.bottom-watermark {
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.13;
  user-select: none;
}

/* ── Pause Button ────────────────────────────────────────── */
.pause-btn {
  background: #2a2a3e;
  border: 1.5px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 10px;
  padding: 5px 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.pause-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Pause Overlay ───────────────────────────────────────── */
.pause-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100dvh;
  background: rgba(0,0,0,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  overscroll-behavior: contain;
}
.pause-overlay.hidden { display: none; }
.pause-box {
  background: var(--card);
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  border: 2px solid var(--accent);
  max-width: 320px;
  width: 100%;
}
.pause-box h2 { font-size: 1.7rem; font-weight: 900; margin-bottom: 6px; }
.pause-box p  { color: var(--sub); margin-bottom: 24px; }

/* Like Terms pill — same style as all other pills, no special color */

/* ── Like Terms Intro Overlay ────────────────────────────── */
.like-terms-intro-box {
  max-width: 360px;
  padding: 28px 22px 22px;
  text-align: left;
}
.lt-intro-p { font-size: .88rem; color: var(--sub); line-height: 1.6; margin-bottom: 6px; }
.lt-intro-p strong { color: var(--text); }
.lt-example-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 4px;
}
.lt-example {
  border-radius: 12px;
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lt-example.yes  { background: rgba(34,197,94,.1);  border: 1.5px solid rgba(34,197,94,.35); }
.lt-example.no   { background: rgba(239,68,68,.1);  border: 1.5px solid rgba(239,68,68,.35); }
.lt-badge { font-size: .7rem; font-weight: 800; border-radius: 6px; padding: 2px 6px; width: fit-content; }
.lt-badge.yes { background: rgba(34,197,94,.2);  color: #22c55e; }
.lt-badge.no  { background: rgba(239,68,68,.2);  color: #ef4444; }
.lt-pair { display: flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 800; color: var(--text); }
.lt-pair span:nth-child(2) { color: var(--sub); font-weight: 400; font-size: .85rem; }
.lt-reason { font-size: .75rem; color: var(--sub); }
.lt-reason strong { color: var(--text); }

/* ── Match Preview ───────────────────────────────────────── */
@keyframes cardPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  65%  { transform: scale(0.93); }
  82%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.match-card.pop-reveal {
  animation: cardPop 0.45s ease forwards;
}

.match-ready-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
}
.match-ready-overlay.hidden { display: none; }
.match-ready-box {
  background: var(--card);
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  border: 2px solid var(--accent);
  max-width: 340px;
  width: 100%;
}
.match-ready-box h2 {
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 8px;
}
.match-ready-box p {
  color: var(--sub);
  font-size: .95rem;
  margin-bottom: 24px;
}
.match-ready-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 14px 40px;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  transition: opacity .15s;
}
.match-ready-btn:hover { opacity: .85; }

/* ── Match Multi Game ────────────────────────────────────── */
#match-multi-game-screen { padding-top: 70px; }

.mm-opp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: 12px;
  padding: 8px 14px;
  margin-bottom: 14px;
  font-size: .88rem;
  border: 1.5px solid var(--border);
}
.mm-opp-bar span:first-child { font-size: 1.3rem; }
#mm-opp-name { font-weight: 700; flex: 1; }
.mm-opp-stat { color: var(--sub); font-size: .82rem; }
.mm-opp-stat strong { color: var(--lite); }

/* Versus result box */
.mm-versus-box {
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
  margin: 12px 0;
}
.mm-versus-side {
  flex: 1;
  background: var(--bg);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
}

/* ── Settings Screen ─────────────────────────────────────── */
.settings-card {
  background: var(--card);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-label {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.settings-desc {
  font-size: .82rem;
  color: var(--sub);
}
.toggle-btn {
  background: var(--accent);
  border: none;
  border-radius: 999px;
  color: var(--text);
  font-size: .9rem;
  font-weight: 700;
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.toggle-btn:hover { background: var(--lite); }
.toggle-btn.muted { background: #374151; }