/*
 * app.css — responsive shell + screen layouts for the standalone web app.
 * The Android dp design maps directly: --u scales to a phone-width play column
 * (full width on mobile, a centred ~460px column on desktop).
 */
:root {
  --col: min(100vw, 460px, 56vh);
  --u: calc(var(--col) / 411);  /* 411dp reference width => 1u ≈ 1dp */
}
/* Fit-to-viewport: on short/square screens (foldables, tablets, landscape) the
 * play column is ALSO capped by viewport HEIGHT, so the whole game screen
 * (question card + full keypad) scales down to fit with no scrolling. On tall
 * phones 100vw wins, so they're unchanged. dvh excludes mobile browser chrome. */
@supports (height: 1dvh) {
  :root { --col: min(100vw, 460px, 56dvh); }
}

html, body { height: 100%; }
/* paint the safe-area / overscroll regions in the theme colour too, so an
 * installed (standalone) PWA blends edge-to-edge into the status/home bars. */
html, body { background: var(--bg); }
body { overflow: hidden; }

.app {
  width: var(--col);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* screen system: absolutely-stacked, toggled by .active */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(16 * var(--u)) calc(18 * var(--u));
  padding-top: max(calc(16 * var(--u)), env(safe-area-inset-top));
  padding-bottom: max(calc(16 * var(--u)), env(safe-area-inset-bottom));
  overflow-y: auto;
  overflow-x: hidden;
}
.screen.active { display: flex; }

/* ---------------------------------------------------------------- menu */
/* Header is a chunky card (mirrors MainActivity's title_card / bg_game_card) with
 * the settings gear tucked into its bottom-right corner. */
.menu-header {
  position: relative;
  text-align: center;
  margin: calc(8 * var(--u)) 0 calc(16 * var(--u));
  padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u));
}
.menu-title { font-size: calc(50 * var(--u)); line-height: 0.92; letter-spacing: 0.02em; color: var(--text-primary); }
.menu-sub { margin-top: calc(8 * var(--u)); font-size: calc(14 * var(--u)); color: var(--text-secondary); }
.menu-streak { margin-top: calc(3 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 900; color: #1A8F3C; }

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(14 * var(--u));
}
.menu-card {
  grid-column: span 1;
  padding: calc(20 * var(--u)) calc(14 * var(--u)) calc(26 * var(--u));
  text-align: center;
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
  /* own GPU layer — without this, some emulator/GPU compositors fail to invalidate
   * scrolled card tiles and ghost the upper cards over the lower ones (overlap) */
  will-change: transform;
}
.menu-card.wide { grid-column: span 2; }
.menu-card:active { transform: translateY(calc(4 * var(--u))); box-shadow: 0 calc(1 * var(--u)) 0 0 var(--shadow); }
/* Online-only mode dimmed while offline; its desc reads "Needs connection". */
.menu-card.mc-offline { opacity: 0.5; }
.menu-card.mc-offline .mc-icon { filter: grayscale(1); }
.menu-card.mc-offline .mc-desc { color: #C2410C; font-weight: 800; }
/* Floating "NEW" tag on a freshly-unlocked card (Equation Raiders) — gold pill
 * bobbing at the top-right corner; removed on first open. */
.menu-card.has-new { position: relative; overflow: visible; }
.mc-new {
  position: absolute; top: calc(-10 * var(--u)); right: calc(-6 * var(--u)); z-index: 5;
  background: linear-gradient(180deg, #FFDD6B, #F5A623); color: #3a2400;
  font-weight: 900; font-size: calc(12 * var(--u)); letter-spacing: 0.06em;
  padding: calc(4 * var(--u)) calc(11 * var(--u)); border-radius: calc(20 * var(--u));
  border: calc(2 * var(--u)) solid #fff6d8;
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,0.3), 0 0 calc(13 * var(--u)) rgba(255,200,60,0.75);
  pointer-events: none; animation: mcNewFloat 1.5s ease-in-out infinite;
}
@keyframes mcNewFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); }
  50% { transform: translateY(calc(-4 * var(--u))) rotate(-6deg) scale(1.09); }
}
.menu-card .mc-icon { width: calc(56 * var(--u)); height: calc(56 * var(--u)); margin: 0 auto calc(12 * var(--u)); }
.menu-card .mc-icon svg { display: block; width: 100%; height: 100%; }
.menu-card .mc-title { font-size: calc(18 * var(--u)); font-weight: 900; line-height: 1.08; color: var(--text-primary); }
.menu-card .mc-desc { margin-top: calc(5 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.2; color: var(--text-secondary); }

/* Wide cards lay out horizontally (icon left, text, chevron) like item_brain_age_card.xml. */
.menu-card.wide {
  display: flex;
  align-items: center;
  text-align: left;
  padding: calc(16 * var(--u)) calc(18 * var(--u));
}
.menu-card.wide .mc-icon { width: calc(58 * var(--u)); height: calc(58 * var(--u)); margin: 0 calc(14 * var(--u)) 0 0; flex: 0 0 auto; }
.menu-card.wide .mc-body { flex: 1 1 auto; min-width: 0; }
.menu-card.wide .mc-title { line-height: 1.1; }
.menu-card.wide .mc-desc { margin-top: calc(2 * var(--u)); }
.menu-card.wide .mc-chev { flex: 0 0 auto; width: calc(20 * var(--u)); height: calc(28 * var(--u)); margin-left: calc(8 * var(--u)); opacity: 0.8; }

.menu-fab {
  position: absolute;
  bottom: calc(6 * var(--u));
  right: calc(10 * var(--u));
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  min-width: 44px; min-height: 44px;
  padding: calc(8 * var(--u));
  border: none; background: transparent; cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.menu-fab:active { transform: scale(0.92); }
.menu-fab svg { width: 100%; height: 100%; }

/* Share glyph — mirrors the gear, tucked into the header card's bottom-left. */
.menu-share {
  position: absolute;
  bottom: calc(6 * var(--u));
  left: calc(10 * var(--u));
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
  min-width: 40px; min-height: 40px;
  padding: calc(8 * var(--u));
  border: none; background: transparent; cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.menu-share:active { transform: scale(0.92); }
.menu-share svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- i18n
 * Script-font buckets: the chunky display font only carries Latin/Cyrillic, so
 * non-Latin locales swap in a system stack with the right glyphs (a bundled
 * display face per script can replace these later). loc-font-latin = default.
 * Set on <html> by i18n.applyLocale(). */
html.loc-font-cjk        { --i18n-font: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; }
html.loc-font-ja         { --i18n-font: "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP","Meiryo",sans-serif; }
html.loc-font-ko         { --i18n-font: "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Nanum Gothic",sans-serif; }
html.loc-font-arabic     { --i18n-font: "Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif; }
html.loc-font-devanagari { --i18n-font: "Noto Sans Devanagari","Kohinoor Devanagari",sans-serif; }
html.loc-font-bengali    { --i18n-font: "Noto Sans Bengali","Kohinoor Bangla",sans-serif; }
html.loc-font-cjk body, html.loc-font-ja body, html.loc-font-ko body, html.loc-font-arabic body,
html.loc-font-devanagari body, html.loc-font-bengali body { font-family: var(--i18n-font); }
/* A thick -webkit-text-stroke (outlined titles + arcade banners) FLOODS dense
   non-Latin glyphs (CJK/Arabic/Indic) into solid blobs — e.g. Japanese "準備はいい？"
   rendered as a black smear. Drop the stroke for those scripts; the text-shadow
   already carries contrast. Latin countdown digits (.rd-cd-num) keep their outline. */
html:is(.loc-font-cjk,.loc-font-ja,.loc-font-ko,.loc-font-arabic,.loc-font-devanagari,.loc-font-bengali) :is(.mw-outline,.bl-announce),
html:is(.loc-font-cjk,.loc-font-ja,.loc-font-ko,.loc-font-arabic,.loc-font-devanagari,.loc-font-bengali) .rd-cd:not(.rd-cd-num) {
  -webkit-text-stroke-width: 0;
}

/* RTL (Arabic/Urdu): dir=rtl on <html> flips text/flow automatically; mirror the
 * absolutely-positioned corner buttons so they don't collide. */
[dir="rtl"] .menu-fab  { right: auto; left: calc(10 * var(--u)); }
[dir="rtl"] .menu-share { left: auto; right: calc(10 * var(--u)); }
[dir="rtl"] .back-fab  { left: auto; right: calc(14 * var(--u)); }
[dir="rtl"] .back-fab svg, [dir="rtl"] .mc-chev svg { transform: scaleX(-1); }

/* Flag language button — top-left of the home logo card (mirrors the gear). */
.menu-lang {
  position: absolute;
  top: calc(12 * var(--u)); left: calc(12 * var(--u));
  width: calc(40 * var(--u)); height: calc(34 * var(--u));
  min-width: 40px; min-height: 34px;
  padding: 0; border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; z-index: 2;
}
.menu-lang:active { transform: scale(0.92); }
.menu-flag, .intro-flag, .lang-flag {
  display: block; width: calc(30 * var(--u)); height: calc(22 * var(--u));
  object-fit: cover; border-radius: calc(5 * var(--u));
  border: calc(2 * var(--u)) solid var(--stroke);
  box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,0.25);
}
[dir="rtl"] .menu-lang { left: auto; right: calc(12 * var(--u)); }

/* PRO / BASIC tier chip — top-right of the logo card, mirroring the flag on the
 * left. Same chunky font + colour as the MATH WORKOUT wordmark, just smaller;
 * "BASIC" is tappable (opens the Pro sheet), "PRO" is a plain label. */
.menu-tier {
  position: absolute;
  top: calc(12 * var(--u)); right: calc(14 * var(--u));
  height: calc(34 * var(--u));
  display: flex; align-items: center;
  font-weight: 900; font-size: calc(20 * var(--u)); letter-spacing: 0.02em;
  color: var(--text-primary);
  z-index: 2; -webkit-tap-highlight-color: transparent;
}
.menu-tier[role="button"] { cursor: pointer; }
.menu-tier[role="button"]:active { transform: scale(0.94); }
[dir="rtl"] .menu-tier { right: auto; left: calc(14 * var(--u)); }

/* Intro flag button — top-left of the onboarding screen (mirrors intro-mute). */
.intro-lang {
  position: absolute; top: max(calc(14 * var(--u)), env(safe-area-inset-top)); left: calc(16 * var(--u));
  z-index: 5; width: calc(44 * var(--u)); height: calc(44 * var(--u));
  padding: 0; border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
}
.intro-lang:active { transform: scale(0.92); }
.intro-flag { width: calc(34 * var(--u)); height: calc(25 * var(--u)); }

/* Language picker dialog (tap a flag). */
.lang-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: calc(22 * var(--u)); background: rgba(6,8,14,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lang-card { width: 100%; max-width: calc(360 * var(--u)); max-height: 84dvh; overflow-y: auto; padding: calc(18 * var(--u)); transform: scale(0.94); opacity: 0; transition: transform 140ms ease-out, opacity 140ms ease-out; }
.lang-card.in { transform: scale(1); opacity: 1; }
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.lang-opt { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); border: calc(3 * var(--u)) solid var(--stroke); background: var(--tile-face, var(--face)); cursor: pointer; font-weight: 900; color: var(--text-primary); }
.lang-opt.on { background: var(--accent1); }
.lang-opt:active { transform: translateY(calc(2 * var(--u))); }
.lang-name { font-size: calc(15 * var(--u)); }

/* ---------------------------------------------------------------- game */
.game-top { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.game-top .mw-progress { flex: 1; }
.game-timer { font-variant-numeric: tabular-nums; font-weight: 900; font-size: calc(18 * var(--u)); min-width: calc(56 * var(--u)); text-align: right; }
/* real-time adaptive FOCUS chip: flashes "Focusing on ×" then dims to a small ADAPTIVE pill */
.adapt-chip { font-weight: 900; font-size: calc(10 * var(--u)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary); background: var(--accent1); border-radius: calc(10 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)); white-space: nowrap; line-height: 1; transition: background 400ms ease, color 400ms ease, opacity 400ms ease, padding 400ms ease; }
.adapt-chip[hidden] { display: none; }
.adapt-chip.pilled { background: transparent; color: var(--text-secondary); opacity: 0.7; padding: 0; font-size: calc(9 * var(--u)); letter-spacing: 0.12em; }
.adapt-chip.chip-in { animation: chipIn 380ms cubic-bezier(.2,1.3,.4,1) both; }
@keyframes chipIn { 0% { transform: scale(.55); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* iOS-safe exit: a pause button (≥44pt tap target) in the top-left safe area.
 * Tapping it opens the pause sheet — no bare back arrow to fat-finger mid-game. */
.game-pause-btn, .game-back-btn {
  flex: 0 0 auto;
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
  min-width: 44px; min-height: 44px;          /* HIG minimum, even on tiny --u */
  margin: calc(-4 * var(--u)) 0 calc(-4 * var(--u)) calc(-4 * var(--u));
  display: flex; align-items: center; justify-content: center;
  border: none; padding: calc(9 * var(--u)); cursor: pointer;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-primary) 9%, transparent);
  -webkit-tap-highlight-color: transparent;
}
.game-pause-btn:active, .game-back-btn:active { background: color-mix(in srgb, var(--text-primary) 18%, transparent); transform: scale(0.94); }
.game-pause-btn svg, .game-back-btn svg { width: 100%; height: 100%; }
.game-pause-btn svg rect { fill: var(--text-primary); }

.pause-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 62%, rgba(0,0,0,0.55));
  backdrop-filter: blur(calc(3 * var(--u)));
  padding: calc(24 * var(--u));
}
.pause-overlay[hidden] { display: none; }
.pause-sheet {
  width: 100%; max-width: calc(320 * var(--u));
  padding: calc(26 * var(--u)) calc(22 * var(--u));
  display: flex; flex-direction: column; gap: calc(12 * var(--u));
  text-align: center;
}
.pause-title { font-size: calc(34 * var(--u)); color: var(--text-primary); margin-bottom: calc(6 * var(--u)); }
.pause-sheet .mw-btn { align-self: stretch; }

/* the next-question preview — grey, centred, above the card (like Android) */
.q-next {
  text-align: center;
  font-weight: 900;
  font-size: calc(22 * var(--u));
  color: var(--text-secondary);
  min-height: calc(28 * var(--u));
  margin-bottom: calc(8 * var(--u));
}

/* the question + answer live in ONE chunky card (Android's bg_game_card) */
.q-area {
  flex: 1;
  min-height: 0;   /* let the card shrink so the keypad is always visible (no scroll) */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(14 * var(--u));
  margin: 0 0 calc(12 * var(--u));
  padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(28 * var(--u));
}
.q-text { font-size: calc(60 * var(--u)); font-weight: 900; text-align: center; max-width: 100%; }
/* each new question fades in fast */
@keyframes mw-qin { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } to { opacity: 1; transform: translateY(0); } }
.q-text.q-in { animation: mw-qin 150ms ease-out; }
/* full-width answer field (matches the keypad width), purple ink, grey "?" hint */
.q-answer {
  width: 100%;
  min-height: calc(80 * var(--u));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(52 * var(--u)); font-weight: 900;
  color: var(--answer-ink);
  font-variant-numeric: tabular-nums;
}
.q-answer.placeholder { color: #8A8A8A; }
.q-hint { font-size: calc(20 * var(--u)); color: var(--text-secondary); min-height: calc(26 * var(--u)); }
/* brief green flash when the completed answer is correct (the answer stays
 * painted long enough to be seen before advancing) */
@keyframes mw-correct {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.q-answer.correct { color: #1A8F3C; animation: mw-correct 240ms ease-out; }
/* 3-wrongs reveal: the correct answer shown IN the answer slot, same size, red. */
.q-answer.reveal { color: #E53935; }

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(10 * var(--u));
  margin-top: calc(8 * var(--u));
}
.keypad .mw-tile { height: calc(64 * var(--u)); font-size: calc(30 * var(--u)); display: flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------- countdown */
.count-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--u)); padding: calc(24 * var(--u)); background: var(--bg); z-index: 5; }
.count-mode { text-align: center; font-size: calc(32 * var(--u)); line-height: 1.0; color: var(--text-primary); }
.count-diff { font-weight: 900; font-size: calc(20 * var(--u)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.count-count { font-weight: 900; font-size: calc(16 * var(--u)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.count-digit { font-size: calc(150 * var(--u)); color: var(--text-primary); margin-top: calc(8 * var(--u)); }

/* ----------------------------------------------------------- complete */
.complete-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 5; }
.complete-text { font-size: calc(64 * var(--u)); color: var(--accent2); text-align: center; }

/* -------------------------------------------------------------- score */
.score-wrap { flex: 1; display: flex; flex-direction: column; }
.score-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); text-align: center; }
.score-stat { width: 100%; }
.score-stat-label { font-weight: 900; font-size: calc(16 * var(--u)); letter-spacing: 0.1em; color: var(--text-secondary); }
.score-stat-label.final { font-size: calc(20 * var(--u)); color: var(--text-primary); }
.score-stat-value { margin-top: calc(4 * var(--u)); font-weight: 900; font-size: calc(44 * var(--u)); }
/* Nintendo-style: penalty values are an understated grey, not red — and no stroke */
.score-stat-value.danger { color: var(--text-secondary); }

/* "Complete" breather overlay (between finishing a workout and the score reveal) */
.complete-overlay { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: var(--bg); cursor: pointer; opacity: 0; transition: opacity .18s ease; }
.complete-overlay.in { opacity: 1; }
.complete-box { padding: calc(28 * var(--u)) calc(44 * var(--u)) calc(34 * var(--u)); display: flex; align-items: center; justify-content: center; transform: scale(0.6); opacity: 0; animation: completePop .42s cubic-bezier(.2,1.3,.5,1) forwards; }
/* chunky but understated: a theme-aware dark grey (a softened primary text), no stroke */
.complete-text { font-size: calc(40 * var(--u)); font-weight: 900; color: color-mix(in srgb, var(--text-primary) 70%, var(--face)); text-transform: uppercase; letter-spacing: 0.04em; }
@keyframes completePop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.score-final { margin-top: calc(6 * var(--u)); font-weight: 900; font-size: calc(58 * var(--u)); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.score-divider { width: 70%; height: calc(3 * var(--u)); background: var(--stroke); border-radius: calc(2 * var(--u)); }
.score-actions { display: flex; gap: calc(10 * var(--u)); margin-top: calc(18 * var(--u)); }
.score-actions .mw-btn { flex: 1; }
.hidden { visibility: hidden; }
.fade-in { animation: mw-fadein 320ms ease-out; }
@keyframes mw-fadein { from { opacity: 0; } to { opacity: 1; } }

/* local best-times dialog (offline ModernScoresDialog equivalent) */
.scores-overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 62%, rgba(0,0,0,0.55)); backdrop-filter: blur(calc(3 * var(--u))); padding: calc(24 * var(--u)); }
.scores-sheet { width: 100%; max-width: calc(340 * var(--u)); padding: calc(24 * var(--u)) calc(20 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.scores-title { text-align: center; font-size: calc(28 * var(--u)); color: var(--text-primary); }
.scores-list { display: flex; flex-direction: column; gap: calc(6 * var(--u)); max-height: 50vh; overflow-y: auto; }
.scores-row { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--panel-face); font-weight: 900; }
.scores-row.current { background: var(--accent1); }
.scores-row .rank { width: calc(24 * var(--u)); color: var(--text-secondary); }
.scores-row .t { flex: 1; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.scores-empty { text-align: center; color: var(--text-secondary); font-weight: 900; padding: calc(16 * var(--u)); }
.scores-close { align-self: stretch; }

/* ================================================================
 * Settings + Times-Table picker — card-per-section, matched to
 * activity_options_modern.xml / activity_times_table_menu_modern.xml
 * ================================================================ */
/* back chevron (top-left), mirrors the menu gear FAB */
.back-fab {
  position: absolute;
  top: max(calc(14 * var(--u)), env(safe-area-inset-top));
  left: calc(14 * var(--u));
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  min-width: 44px; min-height: 44px;
  padding: calc(10 * var(--u));
  border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; z-index: 2;
}
.back-fab:active { transform: scale(0.92); }
.back-fab svg { width: 100%; height: 100%; }

/* bottom-anchored primary action: the content scrolls, the action button stays
 * pinned to the bottom of the viewport (the app-wide pattern). */
.screen-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; transform: translateZ(0); background: var(--bg); }
.screen-action { flex: 0 0 auto; align-self: stretch; margin-top: calc(12 * var(--u)); }

/* Android-style fading edge: content fades out at whichever edge has more to
 * scroll. --ft/--fb are toggled by attachScrollFade() (0 when that edge is at
 * the end, ~34u when there's content beyond it). */
.scroll-fade {
  --ft: 0px; --fb: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
}

/* plain dark page title (Settings — NOT outlined, per Android) */
.opt-title { text-align: center; font-weight: 900; font-size: calc(28 * var(--u)); color: var(--text-primary); letter-spacing: 0.08em; margin: calc(10 * var(--u)) 0 calc(20 * var(--u)); }

/* a bg_game_card section */
.opt-card { padding: calc(18 * var(--u)); margin-bottom: calc(16 * var(--u)); }
/* small-caps secondary section label */
.opt-label { font-weight: 900; font-size: calc(12 * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: calc(12 * var(--u)); }

/* segmented single-select group (outlined buttons, selected = accent) */
.opt-seg { display: flex; gap: calc(8 * var(--u)); }
.opt-seg.vertical { flex-direction: column; }
.seg-btn {
  flex: 1; border: calc(3 * var(--u)) solid var(--stroke); border-radius: calc(14 * var(--u));
  background: transparent; color: var(--text-primary); font-family: inherit; font-weight: 900;
  font-size: calc(16 * var(--u)); padding: calc(12 * var(--u)) calc(10 * var(--u)); cursor: pointer;
}
.seg-btn.on { background: var(--accent1); }

/* a title+subtitle row with a control on the right (reminders/sound/random) */
.opt-row { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.opt-row-sub { margin-top: calc(12 * var(--u)); padding-top: calc(12 * var(--u)); border-top: calc(2 * var(--u)) solid color-mix(in srgb, var(--stroke) 14%, transparent); }
.opt-row .opt-text { flex: 1; }
.opt-row .opt-text .t { font-weight: 900; font-size: calc(16 * var(--u)); color: var(--text-primary); }
.opt-row .opt-text .s { margin-top: calc(2 * var(--u)); font-size: calc(12 * var(--u)); color: var(--text-secondary); }

/* custom switch (no emoji, chunky) */
.mw-switch { flex: 0 0 auto; width: calc(54 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(30 * var(--u)); border: calc(3 * var(--u)) solid var(--stroke); background: var(--panel-face); position: relative; cursor: pointer; transition: background 120ms; }
.mw-switch::after { content: ''; position: absolute; top: calc(2 * var(--u)); left: calc(2 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--stroke); transition: transform 120ms; }
.mw-switch.on { background: var(--accent1); }
.mw-switch.on::after { transform: translateX(calc(24 * var(--u))); }

/* theme swatch row (horizontal scroll) + current label */
.theme-row { display: flex; gap: calc(10 * var(--u)); overflow-x: auto; padding-bottom: calc(4 * var(--u)); scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hl, 0px), #000 calc(100% - var(--hr, 0px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--hl, 0px), #000 calc(100% - var(--hr, 0px)), transparent 100%); }
.theme-row::-webkit-scrollbar { display: none; }
.theme-sw { flex: 0 0 auto; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(3 * var(--u)) solid var(--stroke); cursor: pointer; }
.theme-sw.on { border-width: calc(5 * var(--u)); border-color: var(--text-primary); }
.theme-current { margin-top: calc(12 * var(--u)); font-size: calc(12 * var(--u)); color: var(--text-secondary); }

/* shared "Quit workout?" confirm (timed modes) — opaque cover hides the question,
 * the game loop/timer keeps running underneath (anti-cheat) */
.quit-confirm { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: calc(24 * var(--u)); background: rgba(6,8,14,0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.quit-card { width: 100%; max-width: calc(340 * var(--u)); display: flex; flex-direction: column; align-items: stretch; gap: calc(14 * var(--u)); text-align: center; padding: calc(24 * var(--u)); }
.quit-title { font-size: calc(30 * var(--u)); color: var(--text-primary); }
.quit-sub { font-size: calc(13 * var(--u)); color: var(--text-secondary); line-height: 1.35; }
.quit-confirm .score-actions { width: 100%; flex-direction: column; }
.quit-confirm .score-actions .mw-btn { flex: 0 0 auto; }

/* ---- Pro upgrade sheet / soft nag ---- */
.pw-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: calc(20 * var(--u)); background: rgba(6,8,14,0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pw-card { position: relative; width: 100%; max-width: calc(360 * var(--u)); display: flex; flex-direction: column; align-items: stretch; gap: calc(12 * var(--u)); text-align: center; padding: calc(26 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)); opacity: 0; transform: translateY(calc(16 * var(--u))) scale(0.97); transition: opacity 0.22s, transform 0.22s; }
.pw-card.in { opacity: 1; transform: none; }
.pw-close { position: absolute; top: calc(8 * var(--u)); right: calc(8 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); padding: calc(7 * var(--u)); background: transparent; border: none; }
.pw-close svg { display: block; width: 100%; height: 100%; }
.pw-badge { width: calc(64 * var(--u)); height: calc(64 * var(--u)); margin: 0 auto calc(2 * var(--u)); }
.pw-title { font-size: calc(26 * var(--u)); color: var(--text-primary); }
.pw-sub { font-size: calc(14 * var(--u)); color: var(--text-secondary); }
/* contextual reason banner at the top of the paywall (e.g. daily World Challenge used up) */
.pw-note { margin: calc(2 * var(--u)) auto calc(12 * var(--u)); max-width: 94%; font-size: calc(13.5 * var(--u));
  font-weight: 700; line-height: 1.42; color: var(--text-primary); text-align: center;
  background: color-mix(in srgb, var(--accent1) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent1) 32%, transparent);
  border-radius: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); }
.pw-benefits { list-style: none; margin: calc(6 * var(--u)) 0; padding: 0; display: flex; flex-direction: column; gap: calc(9 * var(--u)); text-align: left; }
.pw-benefits li { display: flex; align-items: flex-start; gap: calc(9 * var(--u)); font-size: calc(13.5 * var(--u)); color: var(--text-primary); line-height: 1.32; }
.pw-chk { flex: 0 0 auto; width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin-top: calc(1 * var(--u)); }
.pw-chk svg { display: block; width: 100%; height: 100%; }
.pw-actions { display: flex; flex-direction: column; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); }
.pw-redeem-toggle, .pw-later { background: transparent; border: none; color: var(--text-secondary); font-size: calc(13 * var(--u)); font-weight: 700; padding: calc(6 * var(--u)); text-decoration: underline; }
.pw-redeem { display: flex; flex-direction: column; gap: calc(8 * var(--u)); margin-top: calc(2 * var(--u)); }
.pw-redeem[hidden] { display: none; }
.pw-redeem-row { display: flex; gap: calc(8 * var(--u)); }
.pw-code { flex: 1; min-width: 0; padding: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(2 * var(--u)) solid var(--stroke); background: var(--face); color: var(--text-primary); font-weight: 900; font-size: calc(18 * var(--u)); letter-spacing: calc(3 * var(--u)); text-align: center; text-transform: uppercase; }
.pw-redeem-go { flex: 0 0 auto; padding-left: calc(16 * var(--u)); padding-right: calc(16 * var(--u)); }
.pw-msg { font-size: calc(12.5 * var(--u)); min-height: calc(16 * var(--u)); color: var(--text-secondary); }
.pw-msg.err { color: #E5484D; }
.pw-msg.ok { color: #2E9E5B; }

/* Limited-time deal block — the ONLY place the price appears. A struck-out
 * regular price that the live price slams in and knocks out, with a sparkle
 * burst + an urgency badge (Temu-style). Triggered by .pw-card.deal-go. */
.pw-deal { margin: calc(2 * var(--u)) 0; padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(11 * var(--u)); border-radius: calc(16 * var(--u)); background: linear-gradient(to bottom, #FFF6DE, #FFE9B8); border: calc(2 * var(--u)) dashed #E8A41E; display: flex; flex-direction: column; align-items: center; gap: calc(7 * var(--u)); overflow: visible; }
.pw-deal-prices { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); }
.pw-was { position: relative; font-weight: 900; font-size: calc(24 * var(--u)); color: #8a6d2f; transition: transform 0.35s ease-out, opacity 0.35s ease-out; }
.pw-was::after { content: ''; position: absolute; left: -6%; top: 52%; width: 0; height: calc(3 * var(--u)); background: #E5484D; border-radius: 2px; transform: rotate(-9deg); transform-origin: left center; }
.pw-now { position: relative; font-weight: 900; font-size: calc(42 * var(--u)); line-height: 1; color: #1A8F3C; opacity: 0; transform: scale(0.2) rotate(-12deg); }
.pw-deal-badge { font-weight: 900; font-size: calc(11 * var(--u)); letter-spacing: 0.03em; color: #fff; background: linear-gradient(to bottom, #FF7043, #E5391C); padding: calc(4 * var(--u)) calc(11 * var(--u)); border-radius: calc(20 * var(--u)); box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(229,57,28,0.4); }

.pw-card.deal-go .pw-was { transform: scale(0.66) translateX(calc(-4 * var(--u))); opacity: 0.55; }
.pw-card.deal-go .pw-was::after { width: 112%; transition: width 0.4s ease-out 0.18s; }
.pw-card.deal-go .pw-now { animation: pwSlam 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
@keyframes pwSlam {
  0% { opacity: 0; transform: scale(0.2) rotate(-12deg); }
  55% { opacity: 1; transform: scale(1.2) rotate(3deg); }
  78% { transform: scale(0.94) rotate(-1.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.pw-card.deal-go .pw-deal-badge { animation: pwBadge 1.15s ease-in-out 0.55s infinite; }
@keyframes pwBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* sparkle burst around the live price */
.pw-sparks { position: absolute; inset: 0; pointer-events: none; }
.pw-spark { position: absolute; left: 50%; top: 50%; width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: calc(-7 * var(--u)) 0 0 calc(-7 * var(--u)); opacity: 0; --tx: 0px; --ty: 0px; }
.pw-spark svg { display: block; width: 100%; height: 100%; }
.pw-spark-0 { --tx: calc(-46 * var(--u)); --ty: calc(-30 * var(--u)); }
.pw-spark-1 { --tx: calc(46 * var(--u)); --ty: calc(-34 * var(--u)); }
.pw-spark-2 { --tx: calc(-56 * var(--u)); --ty: calc(8 * var(--u)); }
.pw-spark-3 { --tx: calc(58 * var(--u)); --ty: calc(12 * var(--u)); }
.pw-spark-4 { --tx: calc(-28 * var(--u)); --ty: calc(34 * var(--u)); }
.pw-spark-5 { --tx: calc(34 * var(--u)); --ty: calc(36 * var(--u)); }
.pw-spark-6 { --tx: calc(2 * var(--u)); --ty: calc(-48 * var(--u)); }
.pw-card.deal-go .pw-spark { animation: pwSpark 0.72s ease-out forwards; }
.pw-card.deal-go .pw-spark-0 { animation-delay: 0.42s; }
.pw-card.deal-go .pw-spark-1 { animation-delay: 0.50s; }
.pw-card.deal-go .pw-spark-2 { animation-delay: 0.46s; }
.pw-card.deal-go .pw-spark-3 { animation-delay: 0.54s; }
.pw-card.deal-go .pw-spark-4 { animation-delay: 0.58s; }
.pw-card.deal-go .pw-spark-5 { animation-delay: 0.50s; }
.pw-card.deal-go .pw-spark-6 { animation-delay: 0.62s; }
@keyframes pwSpark {
  0% { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(0); }
  35% { opacity: 1; transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.6)) scale(1) rotate(60deg); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.4) rotate(150deg); }
}
/* Settings Pro card */
.pro-status { display: flex; align-items: center; gap: calc(8 * var(--u)); font-weight: 800; color: var(--text-primary); }
.pro-status .pw-chk { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }

/* ---- Auth sheet ---- */
.auth-fields { display: flex; flex-direction: column; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); }
.auth-input { letter-spacing: normal; text-transform: none; text-align: left; font-size: calc(16 * var(--u)); font-weight: 600; }
.auth-input[hidden] { display: none; }
.auth-toggle { background: none; border: none; color: var(--text-secondary); font-weight: 700; font-size: calc(13 * var(--u)); text-decoration: underline; padding: calc(6 * var(--u)); }
.auth-google { display: flex; justify-content: center; min-height: calc(40 * var(--u)); }
.auth-google[hidden] { display: none; }
/* native Google Sign-In button (custom — GIS renders its own in the browser) */
.auth-gbtn { display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); width: 280px; max-width: 100%; min-height: calc(44 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 999px; border: 1px solid #DADCE0; background: #fff; color: #3c4043; font-family: inherit; font-weight: 600; font-size: calc(14 * var(--u)); letter-spacing: normal; text-transform: none; cursor: pointer; }
.auth-gbtn:active { background: #f1f3f4; }
.auth-gbtn .auth-g { flex: 0 0 auto; }
.auth-msg { min-height: calc(16 * var(--u)); }
/* Settings account card */
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); }
.acct-who { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; }
.acct-name { font-weight: 800; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-email { font-size: calc(12 * var(--u)); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-actions { display: flex; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
.acct-actions .mw-btn { flex: 1; }
.acct-link { background: none; border: none; color: var(--text-secondary); font-weight: 700; font-size: calc(13 * var(--u)); text-decoration: underline; padding: calc(6 * var(--u)); }
/* themed, full-width CTA + link used by the Pro + Account cards */
.opt-cta { width: 100%; margin-top: calc(12 * var(--u)); }
/* the share CTA carries the brand name via %{brand} (mixed-case "Math Bro"); the
   original copy was hand-uppercased, so force uppercase to keep the chunky look */
.invite-btn { text-transform: uppercase; }

/* ---- Coach (Math Bro: "Max") -------------------------------------------- */
/* end-of-workout verdict card appended after the score reveal */
.coach-card {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  margin-top: calc(10 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u));
  opacity: 0; transform: translateY(calc(10 * var(--u)));
  transition: opacity .35s ease, transform .35s ease;
}
/* mastery summary spoken in Max's box (folded in from the standalone rows) */
.coach-extra { margin-top: calc(5 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.coach-extra-line { font-weight: 800; font-size: calc(13 * var(--u)); line-height: 1.2; }
/* difficulty-autopilot offer: coach avatar + ask + Yes/No (or a single Play-now) */
.coach-levelup { align-items: flex-start; }
.coach-levelup .lvl-actions { display: flex; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
.coach-levelup .lvl-actions .mw-btn { flex: 1; min-height: calc(44 * var(--u)); font-size: calc(14 * var(--u)); }
.coach-card.in { opacity: 1; transform: none; }
.coach-avatar { width: calc(56 * var(--u)); height: calc(56 * var(--u)); flex: 0 0 auto; }
.coach-body { text-align: left; min-width: 0; }
[dir="rtl"] .coach-body { text-align: right; }
.coach-name {
  font-weight: 900; font-size: calc(12 * var(--u)); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: calc(2 * var(--u));
}
.coach-line { font-weight: 800; font-size: calc(15 * var(--u)); line-height: 1.25; color: var(--text-primary); }
/* onboarding: Max greets the user */
.intro-coach-avatar { width: calc(122 * var(--u)); height: calc(122 * var(--u)); margin: 0 auto calc(10 * var(--u)); }

/* ---- Max "alive": idle bob + talking sway/mouth + typewriter caret ---------- */
.coach-anim .coach-avatar-svg { animation: maxIdle 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.coach-talking .coach-avatar-svg { animation: maxTalk 0.9s ease-in-out infinite; }
.coach-talking .max-mouth { transform-box: fill-box; transform-origin: center; animation: maxMouth 0.26s steps(2, end) infinite; }
@keyframes maxIdle {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50% { transform: rotate(1.5deg) translateY(calc(-2 * var(--u))); }
}
@keyframes maxTalk {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(calc(-3 * var(--u))); }
}
@keyframes maxMouth {
  0% { transform: scaleY(0.5); }
  50% { transform: scaleY(1.5); }
  100% { transform: scaleY(0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .coach-anim .coach-avatar-svg, .coach-talking .coach-avatar-svg, .coach-talking .max-mouth { animation: none; }
}
/* Max's voice: his quotes use the distinctive brand display font (Fredoka) so
   he reads differently from the app's Roboto body text. */
.max-voice { font-family: 'Fredoka', 'Roboto', system-ui, sans-serif; font-weight: 600; letter-spacing: 0.005em; }

/* typewriter blinking caret while a line types out */
.tw::after { content: '▌'; margin-left: 0.06em; opacity: 0.7; animation: twCaret 0.7s steps(1) infinite; color: var(--text-secondary); }
@keyframes twCaret { 0%, 50% { opacity: 0.7; } 50.01%, 100% { opacity: 0; } }

/* first-load splash: pulsing brain over the theme background */
#splash { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg, #EAEAEA); transition: opacity 0.45s ease; }
#splash.gone { opacity: 0; pointer-events: none; }
.splash-brain { width: 40vw; max-width: calc(190 * var(--u)); filter: drop-shadow(0 0 calc(16 * var(--u)) rgba(108, 76, 224, 0.45)); animation: splashPulse 1.3s ease-in-out infinite; }
[data-brand="bro"] .splash-brain { filter: drop-shadow(0 0 calc(16 * var(--u)) rgba(46, 123, 255, 0.5)); }
@keyframes splashPulse { 0%, 100% { transform: scale(0.9); opacity: 0.82; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .splash-brain { animation: none; } }

/* intro science-fact chip */
.intro-fact {
  display: flex; gap: calc(8 * var(--u)); align-items: flex-start; text-align: left;
  margin-top: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u));
  background: var(--panel-face, var(--face)); border-radius: calc(12 * var(--u));
  font-size: calc(12.5 * var(--u)); font-weight: 600; line-height: 1.35; color: var(--text-secondary);
}
.intro-fact-ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: 0 0 auto; margin-top: calc(1 * var(--u)); }
[dir="rtl"] .intro-fact { text-align: right; }
.intro-coach-tag {
  font-weight: 900; font-size: calc(12 * var(--u)); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: calc(8 * var(--u));
}
/* Brain Age inline Max line (staggered with the reveal) */
.ba-coach { opacity: 0; transition: opacity .4s ease; margin-top: calc(10 * var(--u)); font-weight: 800; font-size: calc(14 * var(--u)); color: var(--text-primary); }
.ba-coach.show { opacity: 1; }
.ba-coach b { color: var(--text-secondary); }

/* ---- Post-purchase thank-you overlay -------------------------------------- */
.ty-overlay {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: calc(20 * var(--u)); background: rgba(8, 10, 22, 0.55);
  opacity: 0; transition: opacity .22s ease;
}
.ty-overlay.in { opacity: 1; }
.ty-card {
  position: relative;
  width: 100%; max-width: calc(360 * var(--u)); max-height: 92vh; overflow-y: auto;
  padding: calc(22 * var(--u)) calc(20 * var(--u)); text-align: center;
  transform: translateY(calc(16 * var(--u))) scale(0.97); transition: transform .26s cubic-bezier(.2,.9,.3,1.2);
}
.ty-close {
  position: absolute; top: calc(10 * var(--u)); right: calc(10 * var(--u)); z-index: 2;
  width: calc(34 * var(--u)); height: calc(34 * var(--u)); padding: calc(7 * var(--u));
  border: none; background: none; cursor: pointer; border-radius: 50%;
}
[dir="rtl"] .ty-close { right: auto; left: calc(10 * var(--u)); }
.ty-overlay.in .ty-card { transform: none; }
.ty-art { width: calc(104 * var(--u)); height: calc(104 * var(--u)); margin: 0 auto calc(8 * var(--u)); }
.ty-title { font-weight: 900; font-size: calc(30 * var(--u)); line-height: 1.05; margin-bottom: calc(8 * var(--u)); }
.ty-body { font-weight: 600; font-size: calc(15 * var(--u)); line-height: 1.4; color: var(--text-secondary); margin-bottom: calc(16 * var(--u)); }
.ty-fb { text-align: left; background: var(--panel-face, var(--face)); border-radius: calc(16 * var(--u)); padding: calc(14 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.ty-fb-label { font-weight: 900; font-size: calc(12 * var(--u)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: calc(8 * var(--u)); }
.ty-msg, .ty-email {
  width: 100%; font-family: inherit; font-size: calc(15 * var(--u)); color: var(--text-primary);
  background: var(--face); border: calc(2 * var(--u)) solid var(--stroke); border-radius: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)); margin-bottom: calc(8 * var(--u)); resize: vertical;
}
.ty-email { margin-bottom: calc(10 * var(--u)); }
.ty-send { width: 100%; }
.ty-status { font-weight: 700; font-size: calc(13 * var(--u)); text-align: center; margin-top: calc(8 * var(--u)); min-height: calc(16 * var(--u)); color: var(--text-secondary); }
.ty-status.ok { color: #1f9d57; }
.ty-status.err { color: #e5484d; }
.ty-fb.sent .ty-msg, .ty-fb.sent .ty-email, .ty-fb.sent .ty-send, .ty-fb.sent .ty-fb-label { display: none; }
[dir="rtl"] .ty-fb { text-align: right; }
.opt-link { display: block; width: 100%; text-align: center; background: none; border: none; color: var(--text-secondary); font-weight: 700; font-size: calc(13 * var(--u)); text-decoration: underline; margin-top: calc(8 * var(--u)); padding: calc(6 * var(--u)); }

/* mobile-only gate — desktop visitors get this instead of the app */
.desktop-block { align-items: center; justify-content: center; padding: calc(24 * var(--u)); }
.db-card { width: 100%; max-width: calc(360 * var(--u)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(10 * var(--u)); padding: calc(32 * var(--u)) calc(24 * var(--u)); }
.db-logo { width: calc(96 * var(--u)); height: calc(96 * var(--u)); border-radius: calc(22 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,0.25); }
.db-title { font-size: calc(30 * var(--u)); color: var(--text-primary); margin-top: calc(6 * var(--u)); }
.db-sub { font-weight: 900; font-size: calc(13 * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent1); }
.db-body { font-size: calc(15 * var(--u)); color: var(--text-secondary); line-height: 1.45; margin: calc(4 * var(--u)) 0; }
.db-cta { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.db-link { margin-top: calc(4 * var(--u)); color: var(--text-secondary); font-weight: 700; font-size: calc(13 * var(--u)); text-decoration: underline; }

/* Times-Table picker */
.tt-titlecard { text-align: center; padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.tt-titlecard .mw-outline { font-size: calc(32 * var(--u)); line-height: 0.98; color: var(--text-primary); }
.tt-titlecard .sub { margin-top: calc(8 * var(--u)); font-size: calc(13 * var(--u)); color: var(--text-secondary); }
.tt-hint { text-align: center; font-weight: 900; font-size: calc(12 * var(--u)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin: calc(16 * var(--u)) 0 calc(10 * var(--u)); }
/* AI adaptive mode tiles (×12 / ×15) */
.ai-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); margin-bottom: calc(4 * var(--u)); }
/* AI adaptive tiles — light lavender when OFF, bold AI-purple + glow + lift when SELECTED */
.ai-tile { height: calc(64 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1 * var(--u));
  background: linear-gradient(180deg, #efe9fc 0%, #ddd1f6 100%);
  border-color: #c3b2ec; box-shadow: 0 calc(5 * var(--u)) 0 0 #c8b9ee; color: #6c4ce0;
  transition: transform .12s ease, box-shadow .12s ease; }
.ai-tile::before { opacity: .5; }
.ai-tile-top { font-size: calc(13 * var(--u)); font-weight: 900; letter-spacing: 0.14em; color: rgba(108,76,224,0.65); }
.ai-tile-bot { font-size: calc(22 * var(--u)); font-weight: 900; color: #6c4ce0; }
.ai-tile.selected { background: linear-gradient(180deg, #9b82ff 0%, #6c4ce0 56%, #553acb 100%);
  border-color: #34197f; box-shadow: 0 calc(5 * var(--u)) 0 0 #34197f, 0 0 0 calc(3 * var(--u)) rgba(124,108,255,0.55); transform: translateY(calc(-2 * var(--u))); }
.ai-tile.selected::before { opacity: .3; }
.ai-tile.selected .ai-tile-top { color: rgba(255,255,255,0.85); }
.ai-tile.selected .ai-tile-bot { color: #fff; }
/* AI game streak counter + goal line */
.ai-streak { font-variant-numeric: tabular-nums; font-weight: 900; font-size: calc(18 * var(--u)); min-width: calc(56 * var(--u)); text-align: right; color: var(--text-primary); }
.ai-goal { color: var(--text-secondary); }

.tt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u)); }
.tt-tile { height: calc(58 * var(--u)); font-size: calc(20 * var(--u)); display: flex; align-items: center; justify-content: center; }
.tt-tile.selected { background: var(--accent1); }
.tt-tile.selected::before { opacity: 0; }
.tt-desc { text-align: center; padding: calc(16 * var(--u)); margin: calc(16 * var(--u)) 0; font-size: calc(14 * var(--u)); color: var(--text-secondary); }

/* ================================================================
 * The Brain Cruncher (modernised)
 * ================================================================ */
.bc-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); }
.bc-level { height: calc(72 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--u)); }
.bc-level.selected { background: var(--accent1); }
.bc-level.selected::before { opacity: 0; }
.bc-lvl-top { font-size: calc(18 * var(--u)); font-weight: 900; color: var(--text-primary); }
.bc-lvl-bot { font-size: calc(10 * var(--u)); font-weight: 900; letter-spacing: 0.1em; color: var(--text-secondary); }
.bc-lock { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }

.bc-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--u)); padding: calc(20 * var(--u)); }
.bc-cue { font-weight: 900; font-size: calc(16 * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.bc-big { font-size: calc(58 * var(--u)); line-height: 1.05; color: var(--text-primary); text-align: center; }
.bc-stepno { font-variant-numeric: tabular-nums; font-weight: 900; font-size: calc(16 * var(--u)); color: var(--text-secondary); min-width: calc(48 * var(--u)); text-align: right; }

.bc-entry { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) 0; }
.bc-entry[hidden] { display: none; }   /* keypad/SUBMIT stay hidden until the entry phase */
.bc-entry .q-answer { width: 100%; }
.bc-entry .keypad { width: 100%; }
.bc-entry .bc-submit { align-self: stretch; margin-top: calc(6 * var(--u)); }
.bc-prompt { font-size: calc(26 * var(--u)); color: var(--text-primary); text-align: center; line-height: 1.05; }
.bc-hint { font-size: calc(15 * var(--u)); font-weight: 900; color: var(--text-secondary); min-height: calc(20 * var(--u)); text-align: center; }
.bc-result-title { font-size: calc(34 * var(--u)); color: var(--accent1); text-align: center; margin-bottom: calc(8 * var(--u)); }

/* ================================================================
 * Galaxy Run / Math Blaster (Three.js, hardcoded dark space theme)
 * ================================================================ */
.blaster-screen { background: #06070f; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.blaster-gl { flex: 1; min-height: 0; position: relative; }
.blaster-gl canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 0; }
/* Equation Raiders steers by swiping the canvas — stop the browser treating the
   drag as a scroll/zoom (which fires pointercancel and makes steering jagged). */
.raiders-gl, .raiders-gl canvas { touch-action: none; }
.blaster-hud { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: max(calc(10 * var(--u)), env(safe-area-inset-top)) calc(14 * var(--u)) calc(8 * var(--u)); z-index: 3; color: #eaf6ff; }
.blaster-quit { flex: 0 0 auto; }
.blaster-quit svg path { stroke: #cfe3ff; }
.bl-lives { display: flex; gap: calc(4 * var(--u)); }
.bl-life { width: calc(20 * var(--u)); height: calc(20 * var(--u)); display: inline-block; }
.bl-life svg { display: block; width: 100%; height: 100%; }
.bl-wave { flex: 1; text-align: center; font-weight: 900; font-size: calc(14 * var(--u)); letter-spacing: 0.08em; color: #9fb6d8; }
.bl-score { font-variant-numeric: tabular-nums; font-weight: 900; font-size: calc(20 * var(--u)); }
.bl-mute { flex: 0 0 auto; width: calc(34 * var(--u)); height: calc(34 * var(--u)); padding: calc(5 * var(--u)); background: transparent; border: none; }
.bl-mute svg { display: block; width: 100%; height: 100%; }
/* answer overlay bottom-LEFT, leaving the bottom-right for the bomb button */
.bl-answer { position: absolute; left: calc(18 * var(--u)); right: calc(90 * var(--u)); bottom: calc(14 * var(--u)); z-index: 2; pointer-events: none; text-align: left; font-weight: 900; font-size: calc(34 * var(--u)); color: #9bf6ff; font-variant-numeric: tabular-nums; text-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,0.7); }
/* floating smart-bomb button, bottom-right of the playfield */
.bl-bomb { position: absolute; right: calc(14 * var(--u)); bottom: calc(10 * var(--u)); width: calc(64 * var(--u)); height: calc(64 * var(--u)); z-index: 4; padding: calc(8 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid #ffd166;
  background: radial-gradient(circle at 38% 30%, #3a486c 0%, #1b2338 55%, #0b1120 100%);
  box-shadow: 0 calc(5 * var(--u)) calc(13 * var(--u)) rgba(0,0,0,0.55), inset 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(255,255,255,0.2), inset 0 calc(-3 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,0.45); transition: transform .08s; }
.bl-bomb svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,0.5)); }
.bl-bomb:active { transform: translateY(calc(2 * var(--u))) scale(0.96); }
/* center-screen wave / boss banner (notifyEvent) */
.bl-announce { position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); z-index: 5; pointer-events: none; white-space: nowrap; text-align: center; font-weight: 900; font-family: 'Arial Black', system-ui, sans-serif; font-size: calc(46 * var(--u)); letter-spacing: 0.04em; -webkit-text-stroke: calc(2 * var(--u)) #0a0e1a; text-shadow: 0 0 calc(12 * var(--u)) rgba(0,0,0,0.85), 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,0.6); }
.bl-announce[hidden] { display: none; }
/* Prime Raiders banners can be long (act names, "PERFECT RESCUE", the pod hint) —
 * wrap + shrink + clamp width so they never bleed off-screen (Galaxy Run untouched). */
.raiders-screen .bl-announce { white-space: normal; max-width: 88vw; font-size: calc(34 * var(--u)); line-height: 1.05; }
.raiders-screen .rd-act { max-width: 90vw; margin: calc(1 * var(--u)) auto 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* sci-fi display font (self-hosted Orbitron, offline-safe) for the Prime Raiders HUD/banners */
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../../assets/fonts/orbitron.woff2') format('woff2'); }
.raiders-screen .rd-wave, .raiders-screen .rd-act, .raiders-screen .rd-score,
.raiders-screen .rd-cd, .raiders-screen .bl-announce, .raiders-screen .rd-pop,
.raiders-screen .rd-bomb-count, .raiders-screen .rd-over-title, .raiders-screen .rd-over-score,
.raiders-screen .rd-board-title, .raiders-screen .rd-rank {
  font-family: 'Orbitron', 'Arial Black', system-ui, sans-serif;
}
/* wave/act countdown LABELS must fit the screen (Orbitron is wide) — wrap + shrink;
 * the big 3-2-1 DIGIT stays large (single char, always fits). */
.raiders-screen .rd-cd { max-width: 92vw; white-space: normal; text-align: center; line-height: 1.02; letter-spacing: 0; }
.raiders-screen .rd-cd:not(.rd-cd-num) { font-size: calc(36 * var(--u)); }
.raiders-screen .rd-cd.rd-cd-num { font-size: calc(130 * var(--u)); white-space: nowrap; }
.bl-bomb-count { position: absolute; top: calc(-6 * var(--u)); right: calc(-6 * var(--u)); min-width: calc(24 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: calc(12 * var(--u)); background: linear-gradient(180deg, #ff9a52, #f4511e); border: calc(2.5 * var(--u)) solid #fff; color: #fff; font-weight: 900; font-size: calc(14 * var(--u)); line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,0.5); font-variant-numeric: tabular-nums; }
.bl-bomb.empty { opacity: 0.4; }
.bl-bomb.judder { animation: bl-judder 0.3s; }
.bomb-spark { transform-origin: 39px 6.5px; animation: bombSpark .5s ease-in-out infinite; }
@keyframes bombSpark { 0%,100% { opacity: .8; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }

/* Pro-locked controls (Hard/Very Hard difficulty, themes after the free changes) */
.seg-btn.locked { opacity: 0.62; }
.seg-btn .seg-lock { vertical-align: -1px; margin-left: calc(4 * var(--u)); opacity: 0.85; }
.theme-sw.locked { opacity: 0.4; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(0,0,0,0.12); }
@keyframes bl-judder { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.bl-end-medal { font-weight: 900; font-size: calc(19 * var(--u)); letter-spacing: 0.08em; }

/* ---- Equation Raiders (3D thumb shooter) ---- */
/* top stack: HUD row + goal, anchored to the top; canvas (swipe area) shows through */
.rd-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none; padding-top: max(calc(8 * var(--u)), env(safe-area-inset-top)); }
.rd-top button { pointer-events: auto; }
.rd-hudrow { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); color: #eaf6ff; }
.rd-spacer { flex: 1; }
.rd-lives { display: flex; gap: calc(4 * var(--u)); }
.rd-heart { width: calc(21 * var(--u)); height: calc(21 * var(--u)); display: block; }
.rd-score { font-variant-numeric: tabular-nums; font-weight: 900; font-size: calc(20 * var(--u)); color: #eaf6ff; }
.rd-fx { display: flex; gap: calc(4 * var(--u)); }
.rd-chip { font-weight: 900; font-size: calc(12 * var(--u)); border-radius: calc(9 * var(--u)); padding: calc(2 * var(--u)) calc(7 * var(--u)); color: #08121c; font-variant-numeric: tabular-nums; }
.rd-chip-slow { background: #54cfe6; }
.rd-chip-mult { background: #d8a8ff; }
.rd-chip-combo { background: #ffd24a; }
.rd-shield { width: calc(72 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(20,40,70,0.6); border: calc(1.5 * var(--u)) solid #2f6fd0; overflow: hidden; box-shadow: inset 0 0 calc(8 * var(--u)) rgba(80,160,255,0.25); }
.rd-shield-fill { height: 100%; width: 100%; background: linear-gradient(90deg,#4fd0ff,#9be8ff); transition: width .18s ease-out; box-shadow: 0 0 calc(8 * var(--u)) rgba(120,220,255,0.6); }
.rd-progress { text-align: center; margin-top: calc(2 * var(--u)); }
.rd-wave { font-weight: 900; font-size: calc(20 * var(--u)); line-height: 1.04; color: #ffd23f; text-transform: uppercase; letter-spacing: 0.05em; text-shadow: 0 0 calc(8 * var(--u)) rgba(255,210,63,0.45); }
.rd-act { font-weight: 800; font-size: calc(12 * var(--u)); color: #9fb6d8; text-transform: uppercase; letter-spacing: 0.12em; margin-top: calc(1 * var(--u)); }
/* 3-2-1 countdown — big, centered, hype */
.rd-cd { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; white-space: nowrap; font-weight: 900; font-family: 'Arial Black', system-ui, sans-serif; font-size: calc(60 * var(--u)); letter-spacing: 0.02em; -webkit-text-stroke: calc(2.5 * var(--u)) #0a1018; text-shadow: 0 0 calc(22 * var(--u)) rgba(90,200,255,0.55), 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,0.6); }
.rd-cd.rd-cd-num { font-size: calc(150 * var(--u)); }
.rd-cd[hidden] { display: none; }
/* swipe-to-steer teaching finger (during the countdown) */
.rd-swipe { position: absolute; bottom: 15%; left: 50%; z-index: 6; pointer-events: none; width: calc(60 * var(--u)); height: calc(30 * var(--u)); filter: drop-shadow(0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,0.55)); animation: rdSwipeMove 1.5s ease-in-out infinite; }
.rd-swipe[hidden] { display: none; }
@keyframes rdSwipeMove {
  0%   { transform: translateX(calc(-50% - 80 * var(--u))) rotate(-10deg); opacity: 0; }
  14%  { opacity: 1; }
  58%  { transform: translateX(calc(-50% + 80 * var(--u))) rotate(8deg); opacity: 1; }
  76%  { transform: translateX(calc(-50% + 80 * var(--u))) rotate(8deg); opacity: 0; }
  100% { transform: translateX(calc(-50% - 80 * var(--u))) rotate(-10deg); opacity: 0; }
}
/* "Tap to fire" — the second teaching hint (after swipe-to-steer). A tapping
 * finger over a glowing label, centred low on the playfield; pulse ring conveys
 * the tap contact. Dismissed on the first shot. */
.rd-tap { position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%); z-index: 6;
  pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); }
.rd-tap[hidden] { display: none; }
.rd-tap-finger { position: relative; width: calc(46 * var(--u)); height: calc(46 * var(--u));
  filter: drop-shadow(0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,0.55));
  animation: rdTapPress 1.05s ease-in-out infinite; }
.rd-tap-finger::after { content: ''; position: absolute; left: 50%; top: calc(10 * var(--u));
  width: calc(40 * var(--u)); height: calc(40 * var(--u)); transform: translate(-50%,-50%);
  border: calc(3 * var(--u)) solid rgba(155,246,255,0.9); border-radius: 50%;
  animation: rdTapRing 1.05s ease-out infinite; }
.rd-tap-label { font-weight: 900; font-size: calc(15 * var(--u)); letter-spacing: 0.04em;
  color: #9bf6ff; text-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,0.7);
  background: rgba(12,28,52,0.6); padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); }
@keyframes rdTapPress { 0%,100% { transform: translateY(calc(-6 * var(--u))) scale(1); }
  45% { transform: translateY(calc(2 * var(--u))) scale(0.9); } }
@keyframes rdTapRing { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.4); }
  35% { opacity: 0.9; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); } }
/* smart-bomb button (bottom-right of the playfield) */
.rd-bomb { position: absolute; right: calc(14 * var(--u)); bottom: calc(88 * var(--u)); z-index: 5; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 38% 32%, #ff8a8a, #c01530); border: calc(2 * var(--u)) solid #2a0a12; color: #fff; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,0.5); }
.rd-bomb[hidden] { display: none; }
.rd-bomb[data-empty="1"] { opacity: 0.4; }
.rd-bomb-glyph { display: flex; line-height: 0; }
.rd-bomb-count { font-weight: 900; font-size: calc(13 * var(--u)); font-variant-numeric: tabular-nums; margin-top: calc(-2 * var(--u)); }
/* floating score numbers */
.rd-pop { position: absolute; z-index: 4; pointer-events: none; font-weight: 900; font-size: calc(17 * var(--u)); transform: translate(-50%,-50%); text-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,0.7); white-space: nowrap; }
/* friendly-pod speech bubble ("Save me!" / "Don't shoot!") */
.rd-podsay { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap;
  font-weight: 800; font-size: calc(12 * var(--u)); color: #0a2a18; background: #c9f7df; border: calc(2 * var(--u)) solid #2a8a5a;
  border-radius: calc(10 * var(--u)); padding: calc(3 * var(--u)) calc(9 * var(--u)); box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,0.4); animation: rdPodSay .22s ease-out; }
.rd-podsay::after { content: ''; position: absolute; left: 50%; bottom: calc(-6 * var(--u)); transform: translateX(-50%); border: calc(6 * var(--u)) solid transparent; border-top-color: #2a8a5a; }
@keyframes rdPodSay { from { opacity: 0; transform: translate(-50%, -88%) scale(0.7); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
/* UN-Squadron-style fox pilot panel (bottom-left, in the dead space under the ship) */
.rd-pilot { position: absolute; left: calc(10 * var(--u)); bottom: calc(88 * var(--u)); z-index: 5; pointer-events: none;
  display: flex; align-items: center; gap: calc(7 * var(--u));
  background: linear-gradient(180deg, rgba(10,22,40,0.88), rgba(6,14,28,0.88));
  border: calc(2 * var(--u)) solid #2f6fd0; border-radius: calc(12 * var(--u));
  padding: calc(4 * var(--u)) calc(11 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  box-shadow: 0 0 calc(14 * var(--u)) rgba(60,140,255,0.3), inset 0 0 calc(10 * var(--u)) rgba(40,100,200,0.2); }
.rd-pilot[hidden] { display: none; }
.rd-pilot-face { width: calc(50 * var(--u)); height: calc(50 * var(--u)); flex: 0 0 auto; border-radius: calc(10 * var(--u)); overflow: hidden;
  background: radial-gradient(circle at 50% 38%, rgba(80,160,255,0.22), rgba(6,14,28,0) 72%); }
.rd-pilot-meta { display: flex; flex-direction: column; line-height: 1.12; }
.rd-pilot-name { font-family: 'Orbitron','Arial Black',sans-serif; font-weight: 900; font-size: calc(13 * var(--u)); color: #4fd0ff; letter-spacing: 0.1em; text-shadow: 0 0 calc(6 * var(--u)) rgba(80,200,255,0.6); }
.rd-pilot-status { font-family: 'Orbitron','Arial Black',sans-serif; font-weight: 700; font-size: calc(10 * var(--u)); color: #dfe9ff; letter-spacing: 0.04em; margin-top: calc(2 * var(--u)); }
/* warp-speed transition between Acts (radial speed-line tunnel) */
.rd-warp { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(180,220,255,0) 13%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0deg, rgba(190,225,255,0.6) 0.5deg, rgba(255,255,255,0) 2.4deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 3%, #000 44%);
          mask: radial-gradient(circle at 50% 50%, transparent 3%, #000 44%); }
.rd-warp[hidden] { display: none; }
.rd-warp.on { animation: rdWarp 1.15s ease-in forwards; }
@keyframes rdWarp { 0% { opacity: 0; transform: scale(0.6); } 22% { opacity: 1; } 100% { opacity: 1; transform: scale(2.8); } }
/* Arcade Continue countdown (shown on death before the score/name screen) */
.rd-continue { position: absolute; inset: 0; z-index: 9; pointer-events: auto; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(30,10,18,0.82), rgba(4,4,10,0.94) 76%);
  opacity: 0; transition: opacity .3s ease; }
.rd-continue.in { opacity: 1; }
.rd-continue-card { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); padding: calc(16 * var(--u)); text-align: center; }
.rd-continue-title { font-family: 'Orbitron','Arial Black',sans-serif; font-weight: 900; font-size: calc(34 * var(--u)); letter-spacing: 0.08em; color: #ffd23f; }
.rd-continue-num { font-family: 'Orbitron','Arial Black',sans-serif; font-weight: 900; font-size: calc(108 * var(--u)); line-height: 1; color: #fff;
  text-shadow: 0 0 calc(22 * var(--u)) rgba(255,90,118,0.85), 0 calc(3 * var(--u)) 0 #b3243c; }
.rd-continue-num.go { animation: rdContPop .5s ease-out; }
@keyframes rdContPop { 0% { transform: scale(1.6); color: #ff5a76; } 55% { transform: scale(0.92); } 100% { transform: scale(1); color: #fff; } }
.rd-continue-sub { font-family: 'Orbitron','Arial Black',sans-serif; font-weight: 700; font-size: calc(15 * var(--u)); letter-spacing: 0.04em; color: #cfe6ff; opacity: 0.9; }
.rd-continue-actions { display: flex; gap: calc(14 * var(--u)); margin-top: calc(4 * var(--u)); }
.rd-continue-actions .mw-btn { min-width: calc(118 * var(--u)); font-size: calc(20 * var(--u)); }
/* Phase-2 boss math-gate (themed per boss via --bcol/--bacc set inline) */
.rd-gate { position: absolute; inset: 0; z-index: 8; pointer-events: auto; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--bcol) 30%, #060912), #04060e 78%); opacity: 0; transition: opacity .35s ease; }
.rd-gate.in { opacity: 1; }
.rd-gate.out { opacity: 0; }
.rd-gate-stage { width: min(94vw, calc(440 * var(--u))); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); padding: calc(10 * var(--u)); }
.rd-gate-portrait { width: calc(112 * var(--u)); height: calc(112 * var(--u)); flex: 0 0 auto; filter: drop-shadow(0 0 calc(18 * var(--u)) color-mix(in srgb, var(--bacc) 60%, transparent)); animation: rdGateFloat 3s ease-in-out infinite; }
@keyframes rdGateFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(-6 * var(--u))); } }
.rd-gate-name { font-family: 'Orbitron','Arial Black',sans-serif; font-weight: 900; font-size: calc(24 * var(--u)); color: var(--bacc); letter-spacing: 0.06em; text-align: center; }
.rd-gate-taunt { font-style: italic; font-size: calc(14 * var(--u)); color: #dfe9ff; text-align: center; max-width: 90%; line-height: 1.3; }
.rd-gate-q { display: flex; flex-direction: column; align-items: center; gap: calc(7 * var(--u)); width: 100%; margin-top: calc(2 * var(--u)); }
.rd-gate-prog { font-family: 'Orbitron','Arial Black',sans-serif; font-weight: 800; font-size: calc(11 * var(--u)); color: var(--bacc); letter-spacing: 0.12em; text-transform: uppercase; }
.rd-gate-timer { width: 86%; height: calc(8 * var(--u)); border-radius: calc(5 * var(--u)); background: rgba(20,30,50,0.7); overflow: hidden; border: calc(1.5 * var(--u)) solid color-mix(in srgb, var(--bacc) 50%, transparent); }
.rd-gate-timer-fill { height: 100%; width: 100%; background: var(--bacc); }
.rd-gate-question { font-family: 'Orbitron','Arial Black',sans-serif; font-weight: 900; font-size: calc(34 * var(--u)); color: #fff; letter-spacing: 0.02em; }
.rd-gate-answer { width: 84%; text-align: center; padding: calc(7 * var(--u)); border-radius: calc(13 * var(--u)); background: rgba(8,16,30,0.85); border: calc(2.5 * var(--u)) solid var(--bacc); }
.rd-gate-answer.ok { border-color: #46e0b0; box-shadow: 0 0 calc(16 * var(--u)) rgba(70,224,176,0.6); }
.rd-gate-ink { font-family: 'Orbitron','Arial Black',sans-serif; font-weight: 900; font-size: calc(32 * var(--u)); color: #eaf2ff; }
.rd-gate-ink.placeholder { color: #56688a; }
.rd-gate-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); width: 84%; margin-top: calc(2 * var(--u)); }
.rd-key { font-family: 'Orbitron','Arial Black',sans-serif; font-weight: 900; font-size: calc(21 * var(--u)); min-height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bcol) 55%, #0c1a30), color-mix(in srgb, var(--bcol) 28%, #060f1e));
  border: calc(2 * var(--u)) solid color-mix(in srgb, var(--bacc) 60%, transparent); box-shadow: 0 calc(3 * var(--u)) 0 rgba(0,0,0,0.45); cursor: pointer; }
.rd-key:active { transform: translateY(calc(2 * var(--u))); box-shadow: 0 calc(1 * var(--u)) 0 rgba(0,0,0,0.45); }
/* boss HP bar (top, hidden default) */
.rd-bossbar { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); margin-top: calc(4 * var(--u)); }
.rd-bossbar[hidden] { display: none; }
.rd-bossbar-name { font-family: 'Orbitron','Arial Black',sans-serif; font-weight: 900; font-size: calc(12 * var(--u)); color: #ff8a9a; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 0 calc(6 * var(--u)) rgba(255,80,110,0.5); }
.rd-bossbar-track { width: min(80vw, calc(360 * var(--u))); height: calc(11 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(30,10,16,0.8); border: calc(1.5 * var(--u)) solid #c0304a; overflow: hidden; }
.rd-bossbar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff5a76, #ffd23f); transition: width .25s ease-out; box-shadow: 0 0 calc(8 * var(--u)) rgba(255,90,120,0.6); }
/* Phase-3 rescue cargo chip */
.rd-cargo { margin: calc(3 * var(--u)) auto 0; padding: calc(2 * var(--u)) calc(10 * var(--u)); width: max-content;
  font-family: 'Orbitron','Arial Black',sans-serif; font-weight: 900; font-size: calc(12 * var(--u)); letter-spacing: 0.08em;
  color: #cfeeff; background: rgba(20,40,56,0.78); border: calc(1.5 * var(--u)) solid #4fd0ff; border-radius: calc(7 * var(--u));
  text-shadow: 0 0 calc(6 * var(--u)) rgba(80,200,255,0.5); box-shadow: 0 0 calc(9 * var(--u)) rgba(80,200,255,0.3); }
.rd-cargo[hidden] { display: none; }
.rd-hint { position: absolute; bottom: calc(10 * var(--u)); left: 0; right: 0; text-align: center; z-index: 3; pointer-events: none; color: #8197b8; font-weight: 700; font-size: calc(13 * var(--u)); transition: opacity .4s ease; }
.rd-hint.gone { opacity: 0; }

/* first-run "how to play" with Max */
.rd-intro { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; background: rgba(6,8,16,0.82); padding: calc(20 * var(--u)); }
.rd-intro[hidden] { display: none; }
.rd-intro-card { padding: calc(22 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(7 * var(--u)); text-align: center; max-width: calc(360 * var(--u)); }
.rd-intro-ava { width: calc(72 * var(--u)); height: calc(72 * var(--u)); }
.rd-intro-title { font-size: calc(26 * var(--u)); color: var(--accent1); }
.rd-intro-name { font-weight: 900; font-size: calc(12 * var(--u)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-top: calc(-2 * var(--u)); }
.rd-intro-lines { display: flex; flex-direction: column; gap: calc(6 * var(--u)); margin: calc(6 * var(--u)) 0; }
.rd-intro-line { font-weight: 700; font-size: calc(14 * var(--u)); color: var(--text-primary); line-height: 1.3; }
.rd-intro .rd-start { margin-top: calc(6 * var(--u)); min-width: calc(180 * var(--u)); }

/* game over + leaderboard */
.rd-over { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(6,8,16,0.78); opacity: 0; transition: opacity .3s ease; padding: calc(18 * var(--u)); }
.rd-over.in { opacity: 1; }
.rd-over-card { padding: calc(22 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); text-align: center; min-width: calc(250 * var(--u)); max-width: calc(360 * var(--u)); }
.rd-over-title { font-size: calc(28 * var(--u)); color: #ff6a80; }
.rd-over-score { font-weight: 900; font-size: calc(52 * var(--u)); color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.rd-over-best { color: var(--text-secondary); font-weight: 800; font-size: calc(13 * var(--u)); }
.rd-submit-area { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(4 * var(--u)); align-self: stretch; }
.rd-submit-note { color: var(--text-secondary); font-weight: 700; font-size: calc(13 * var(--u)); }
.rd-rank { font-weight: 900; font-size: calc(26 * var(--u)); color: var(--accent1); }
.rd-handle { width: 100%; box-sizing: border-box; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(2 * var(--u)) solid var(--stroke); background: var(--face); color: var(--text-primary); font-weight: 800; font-size: calc(15 * var(--u)); text-align: center; }
.rd-submit-btn, .rd-board-btn { min-height: calc(48 * var(--u)); align-self: stretch; }
.rd-over-card .score-actions { margin-top: calc(10 * var(--u)); align-self: stretch; }
.rd-board { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: rgba(6,8,16,0.8); opacity: 0; transition: opacity .25s ease; padding: calc(18 * var(--u)); }
.rd-board.in { opacity: 1; }
.rd-board-card { padding: calc(20 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); width: 100%; max-width: calc(340 * var(--u)); }
.rd-board-title { font-size: calc(22 * var(--u)); color: var(--accent1); text-align: center; }
.rd-board-rows { display: flex; flex-direction: column; gap: calc(3 * var(--u)); max-height: calc(320 * var(--u)); overflow-y: auto; }
.rd-board-row { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: color-mix(in srgb, var(--text-primary) 6%, transparent); font-weight: 800; font-size: calc(14 * var(--u)); }
.rd-board-rank { width: calc(24 * var(--u)); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rd-board-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.rd-board-score { color: color-mix(in srgb, var(--accent1) 40%, var(--text-primary)); font-weight: 900; font-variant-numeric: tabular-nums; }
.rd-board-close { margin-top: calc(4 * var(--u)); }

/* locked mode card (Equation Raiders before Galaxy Run is cleared) */
.menu-card.locked { opacity: 0.66; filter: saturate(0.5); }
.menu-card.locked .mc-icon { filter: grayscale(0.7); }
.mc-lock { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: 0 0 auto; opacity: 0.85; align-self: center; }
/* GENERAL OBELUS boss bar — 12 crimson segments, drains right→left */
.bl-bossbar { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(env(safe-area-inset-top, 0px) + 44 * var(--u)); height: calc(12 * var(--u)); z-index: 3; display: flex; gap: calc(2 * var(--u)); }
.bl-bossseg { flex: 1; border-radius: calc(2 * var(--u)); background: linear-gradient(to bottom, #ff5a5a, #b3122a); box-shadow: 0 0 calc(4 * var(--u)) rgba(255,60,60,0.6); transition: opacity 0.2s; }
.bl-bossseg:not(:last-child) { border-right: calc(1 * var(--u)) solid rgba(255,215,64,0.5); }
.bl-bossseg.dead { background: #2a1016; box-shadow: none; opacity: 0.45; }
/* pause modal — opaque cover so the descending questions can't be read while paused */
.bl-pause { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: calc(24 * var(--u)); background: rgba(6,7,15,0.98); }
.bl-pause[hidden] { display: none; }
.bl-pause-card { display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--u)); text-align: center; }
.bl-pause-title { font-size: calc(44 * var(--u)); color: #9bf6ff; }
.bl-pause-sub { font-size: calc(13 * var(--u)); color: #9fb6d8; letter-spacing: 0.04em; }
.bl-pause .score-actions { width: 100%; max-width: calc(320 * var(--u)); }
/* end-overlay leaderboard submit + pilot-name prompt */
.bl-submit-area { width: 100%; max-width: calc(320 * var(--u)); display: flex; flex-direction: column; align-items: stretch; gap: calc(8 * var(--u)); }
.bl-submit-area:empty { display: none; }
.bl-submit-note { font-size: calc(13 * var(--u)); color: #9fb6d8; text-align: center; }
.bl-handle { width: 100%; padding: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(2 * var(--u)) solid #38507e; background: #131c30; color: #eaf6ff; font-family: inherit; font-weight: 900; font-size: calc(16 * var(--u)); text-align: center; box-sizing: border-box; }
.bl-handle::placeholder { color: #5e7299; }
.bl-rank { font-size: calc(34 * var(--u)); color: #ffd166; text-align: center; }
.blaster-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); padding: 0 calc(12 * var(--u)) max(calc(12 * var(--u)), env(safe-area-inset-bottom)); }
.blaster-keypad .mw-tile { height: calc(48 * var(--u)); font-size: calc(24 * var(--u)); display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, #1b2740, #131c30); border: calc(3 * var(--u)) solid #38507e; color: #dfeaff; box-shadow: 0 calc(4 * var(--u)) 0 0 #0a1120; }
.blaster-keypad .mw-tile::before { opacity: 0; }
.bl-end { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(16 * var(--u)); background: rgba(6,7,15,0.82); padding: calc(24 * var(--u)); }
.bl-end-title { font-size: calc(40 * var(--u)); color: #46e0b0; text-align: center; }
.bl-end-score { font-weight: 900; font-size: calc(20 * var(--u)); color: #eaf6ff; }
.bl-end .score-actions { width: 100%; max-width: calc(320 * var(--u)); }

/* ================================================================
 * Galaxy Run — Mission Control (the orrery map)
 * ================================================================ */
.galaxymap-screen { padding: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 28%, #0d1632 0%, #06070f 72%); }
.gm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; z-index: 0; }
.gm-header { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: flex-start; gap: calc(10 * var(--u)); padding: max(calc(10 * var(--u)), env(safe-area-inset-top)) calc(14 * var(--u)) calc(8 * var(--u)); }
.gm-back { flex: 0 0 auto; }
.gm-back svg path { stroke: #cfe3ff; }
.gm-pilot-chip { flex: 1; background: rgba(13,23,40,0.72); border: calc(2 * var(--u)) solid #2a3a5c; border-radius: calc(14 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); cursor: pointer; }
.gm-pilot-chip:active { transform: scale(0.98); }
.gm-pilot-row { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.gm-pilot-name { flex: 1; font-weight: 900; font-size: calc(15 * var(--u)); color: #eaf6ff; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-pilot-best { font-weight: 900; font-size: calc(15 * var(--u)); color: #ffd740; font-variant-numeric: tabular-nums; }
.gm-global-rank { font-size: calc(11 * var(--u)); color: #7fa0c8; letter-spacing: 0.04em; margin-top: calc(2 * var(--u)); }
.gm-mute { flex: 0 0 auto; width: calc(38 * var(--u)); height: calc(38 * var(--u)); padding: calc(6 * var(--u)); background: rgba(13,23,40,0.72); border: calc(2 * var(--u)) solid #2a3a5c; border-radius: calc(12 * var(--u)); align-self: flex-start; }
.gm-mute svg { display: block; width: 100%; height: 100%; }
/* pointer-events:none so taps over the console's text/gradient pass THROUGH to
 * the orrery canvas (so the low-sitting Additron stays tappable); only the
 * LAUNCH button re-enables pointer events. */
.gm-briefing { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; padding: calc(16 * var(--u)) calc(16 * var(--u)) max(calc(16 * var(--u)), env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(7,11,24,0.97) 58%, rgba(7,11,24,0)); }
.gm-brief-head { display: flex; align-items: baseline; gap: calc(10 * var(--u)); }
.gm-world-name { flex: 1; font-weight: 900; font-size: calc(24 * var(--u)); letter-spacing: 0.04em; line-height: 1.0; }
.gm-world-medal { font-weight: 900; font-size: calc(13 * var(--u)); }
.gm-world-threat { font-size: calc(13 * var(--u)); letter-spacing: 0.1em; margin-top: calc(4 * var(--u)); }
.gm-world-info { font-size: calc(13.5 * var(--u)); line-height: 1.35; color: #c3d4ea; margin-top: calc(6 * var(--u)); min-height: calc(40 * var(--u)); }
.gm-world-meta { font-size: calc(12 * var(--u)); font-weight: 900; letter-spacing: 0.04em; margin-top: calc(4 * var(--u)); }
.gm-launch { pointer-events: auto; width: 100%; margin-top: calc(12 * var(--u)); background: linear-gradient(to bottom, #3ED978, #1faf5b); border: none; color: #04210f; box-shadow: 0 calc(5 * var(--u)) 0 0 #14672f; font-size: calc(20 * var(--u)); letter-spacing: 0.06em; }
.gm-launch::before { opacity: 0; }
.gm-launch:active { transform: translateY(calc(3 * var(--u))); box-shadow: 0 calc(2 * var(--u)) 0 0 #14672f; }
.gm-launch:disabled { filter: grayscale(0.5); }
/* Top Pilots dialog */
.gm-lb-overlay { position: absolute; inset: 0; z-index: 20; background: rgba(3,5,12,0.7); display: flex; align-items: center; justify-content: center; padding: calc(20 * var(--u)); }
.gm-lb-panel { width: 100%; max-width: calc(360 * var(--u)); max-height: 82%; display: flex; flex-direction: column; background: #0d1730; border: calc(2 * var(--u)) solid #2a3a5c; border-radius: calc(18 * var(--u)); padding: calc(18 * var(--u)); }
.gm-lb-title { font-weight: 900; font-size: calc(18 * var(--u)); color: #ffd740; text-align: center; letter-spacing: 0.08em; }
.gm-lb-rank { font-size: calc(12 * var(--u)); color: #9fb6d8; text-align: center; margin: calc(6 * var(--u)) 0 calc(10 * var(--u)); }
.gm-lb-rows { flex: 1; overflow-y: auto; min-height: 0; }
/* Pilot of the Week — gold crown banner above the daily board (both space modes). */
.gm-lb-weekly, .rd-board-weekly { display: flex; align-items: center; justify-content: center;
  gap: calc(8 * var(--u)); margin: calc(8 * var(--u)) 0 calc(2 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u));
  border-radius: calc(12 * var(--u)); background: rgba(14,11,4,0.82);
  border: calc(1.5 * var(--u)) solid rgba(245,194,51,0.65); }
.gm-lb-weekly[hidden], .rd-board-weekly[hidden] { display: none; }
.gm-lb-crown, .rd-week-crown { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: 0 0 auto;
  filter: drop-shadow(0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,0.5)); }
.gm-lb-week-txt, .rd-week-txt { font-size: calc(12.5 * var(--u)); font-weight: 800; color: #ffe7a3;
  letter-spacing: 0.03em; }
.gm-lb-week-txt b, .rd-week-txt b { color: #fff; }
.gm-lb-weekly .lb-flag { width: calc(20 * var(--u)); height: calc(14 * var(--u)); flex: 0 0 auto; }
.gm-lb-row { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); }
.gm-lb-row.alt { background: rgba(255,255,255,0.06); }
.gm-lb-row.me { background: rgba(255,215,64,0.16); }
.gm-lb-r { width: calc(28 * var(--u)); font-weight: 900; font-variant-numeric: tabular-nums; }
.gm-lb-n { flex: 1; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-lb-s { font-weight: 900; font-variant-numeric: tabular-nums; color: #eaf6ff; }
.gm-lb-empty { text-align: center; color: #78909C; padding: calc(28 * var(--u)) 0; }
/* country flag chip on leaderboard rows (baked PNGs, like Android) */
.lb-flag { width: calc(22 * var(--u)); height: calc(15 * var(--u)); border-radius: calc(3 * var(--u)); object-fit: cover; vertical-align: middle; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,0.18); }
.lb-name .lb-flag { margin-right: calc(7 * var(--u)); margin-top: calc(-2 * var(--u)); }
.gm-lb-close { margin-top: calc(12 * var(--u)); }

/* ================================================================
 * Brain Age Check
 * ================================================================ */
.ba-stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ba-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--u)); padding: calc(18 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.ba-instr { font-weight: 900; font-size: calc(18 * var(--u)); text-align: center; color: var(--text-primary); }
/* connect-the-dots */
.ba-connect { padding: calc(10 * var(--u)); }
.ba-dots { width: 100%; max-width: calc(320 * var(--u)); aspect-ratio: 1; touch-action: none; }
.ba-orb { fill: var(--panel-face); stroke: var(--stroke); stroke-width: 3; }
.ba-orb.lit { fill: var(--accent1); }
.ba-orb-t { font-weight: 900; font-size: 30px; fill: var(--text-primary); pointer-events: none; }
.ba-dot { cursor: pointer; }
.ba-orb { transition: fill 0.12s; }
.ba-trail { fill: none; stroke: var(--accent1); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
/* divisibility grid */
.ba-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u)); width: 100%; }
.ba-num { height: calc(54 * var(--u)); font-size: calc(20 * var(--u)); display: flex; align-items: center; justify-content: center; }
.ba-num.selected { background: var(--accent1); }
.ba-num.selected::before { opacity: 0; }
.ba-num.reveal { background: #1A8F3C; color: #fff; }   /* answer shown after 3 wrongs so a struggling player can't get stuck */
.ba-num.reveal::before { opacity: 0; }
.ba-grid-done { align-self: stretch; margin-top: calc(6 * var(--u)); }
/* shape */
.ba-shape { width: calc(120 * var(--u)); height: calc(120 * var(--u)); }
.ba-choices { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); width: 100%; }
.ba-choice { min-height: calc(60 * var(--u)); }
.ba-choice.correct { background: var(--accent1); }
/* reveal — tightened so it fits without scrolling on most phones: the score-card's
   22u inter-section gap is collapsed here and the per-section margins removed (they
   stacked on top of the gap), with a smaller hero + compact panels. */
.ba-reveal { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); padding-top: calc(14 * var(--u)); padding-bottom: calc(16 * var(--u)); justify-content: center; }
.ba-tier-img { width: calc(118 * var(--u)); height: calc(118 * var(--u)); object-fit: contain; }
.ba-tier-name { font-size: calc(30 * var(--u)); color: var(--accent1); }
.ba-age-label { font-weight: 900; font-size: calc(12 * var(--u)); letter-spacing: 0.1em; color: var(--text-secondary); }
.ba-age { font-size: calc(58 * var(--u)); color: var(--text-primary); line-height: 1; }
.ba-advice { font-size: calc(13 * var(--u)); color: var(--text-secondary); text-align: center; }

/* ---- trending brain age (sparkline) ---- */
.ba-trend { width: 100%; padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--panel-face); border: calc(2 * var(--u)) solid var(--stroke); }
.ba-trend-head { font-weight: 900; font-size: calc(10.5 * var(--u)); letter-spacing: 0.12em; color: var(--text-secondary); text-align: center; }
.ba-spark { display: block; margin: calc(4 * var(--u)) 0 calc(3 * var(--u)); }
.ba-spark-line { stroke: var(--accent1); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ba-spark-dot { fill: var(--accent1); opacity: 0.45; }
.ba-spark-now { fill: var(--accent1); stroke: var(--stroke); stroke-width: 2; }
.ba-trend-line { font-weight: 800; font-size: calc(12.5 * var(--u)); text-align: center; color: var(--text-primary); }
.ba-trend-better { color: #2E9E5B; }
.ba-trend-worse { color: #C9603C; }

/* ---- focus insight / Max tip ---- */
.ba-insight { width: 100%; display: flex; gap: calc(10 * var(--u)); align-items: flex-start; padding: calc(9 * var(--u)) calc(11 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--panel-face); border: calc(2 * var(--u)) solid var(--stroke); text-align: left; }
.ba-insight-ava, .ba-insight-icon { flex: 0 0 auto; width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.ba-insight-icon { display: flex; align-items: center; justify-content: center; }
.ba-insight-body { flex: 1 1 auto; min-width: 0; }
.ba-insight-name { font-weight: 900; font-size: calc(10.5 * var(--u)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.ba-insight-text { font-weight: 700; font-size: calc(13 * var(--u)); color: var(--text-primary); line-height: 1.28; min-height: calc(16 * var(--u)); }
.ba-practice { min-height: calc(40 * var(--u)); margin-top: calc(8 * var(--u)); padding: calc(5 * var(--u)) calc(15 * var(--u)) calc(9 * var(--u)); font-size: calc(13.5 * var(--u)); border-radius: calc(22 * var(--u)); box-shadow: 0 calc(4 * var(--u)) 0 0 color-mix(in srgb, var(--accent1) 45%, black 55%); display: inline-flex; gap: calc(7 * var(--u)); }
.ba-practice:active, .ba-practice.pressed { box-shadow: 0 calc(1 * var(--u)) 0 0 color-mix(in srgb, var(--accent1) 45%, black 55%); }
.ba-practice-arrow { flex: 0 0 auto; }

/* compact reveal footer: shorter DONE, tighter than the generic score-actions */
.ba-reveal-wrap .score-actions { margin-top: calc(10 * var(--u)); }
.ba-reveal-wrap .score-actions .mw-btn { min-height: calc(60 * var(--u)); }

/* ---- animated tier reveal (Nintendo-Brain-Age style) ---- */
.ba-anim-stage { position: relative; width: 100%; height: calc(120 * var(--u)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ba-anim-stage .ba-tier-img { position: relative; z-index: 1; }
.ba-smoke { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ba-puff { position: absolute; border-radius: 50%; filter: blur(1.5px); pointer-events: none; will-change: transform, opacity; }
/* sections build up one at a time */
.ba-sec { opacity: 0; transform: translateY(calc(10 * var(--u))); pointer-events: none; transition: opacity .42s ease, transform .42s ease; }
.ba-sec.show { opacity: 1; transform: none; pointer-events: auto; }
/* per-tier entrance: direction matches the vehicle (rocket up, train/car/bike/turtle from left, jet/fish from right) */
@keyframes baRocket { 0%{transform:translateY(180%) scale(.55);opacity:0} 14%{opacity:1} 68%{transform:translateY(-11%) scale(1.06)} 84%{transform:translateY(4%) scale(.98)} 100%{transform:translateY(0) scale(1);opacity:1} }
@keyframes baJet { 0%{transform:translateX(185%) scale(.85);opacity:0} 18%{opacity:1} 80%{transform:translateX(-9%)} 100%{transform:translateX(0);opacity:1} }
@keyframes baTrain { 0%{transform:translateX(-180%) translateY(0);opacity:0} 14%{opacity:1} 40%{transform:translateX(-58%) translateY(-3%)} 54%{transform:translateX(-34%) translateY(0)} 70%{transform:translateX(-12%) translateY(-2%)} 86%{transform:translateX(3%) translateY(0)} 100%{transform:translateX(0) translateY(0);opacity:1} }
@keyframes baCar { 0%{transform:translateX(-165%);opacity:0} 14%{opacity:1} 70%{transform:translateX(7%)} 85%{transform:translateX(-3%)} 100%{transform:translateX(0);opacity:1} }
@keyframes baBicycle { 0%{transform:translateX(-150%) rotate(-5deg);opacity:0} 14%{opacity:1} 60%{transform:translateX(-10%) rotate(3deg)} 80%{transform:translateX(2%) rotate(-1deg)} 100%{transform:translateX(0) rotate(0);opacity:1} }
@keyframes baFish { 0%{transform:translateX(155%) translateY(0);opacity:0} 14%{opacity:1} 36%{transform:translateX(68%) translateY(-9%)} 56%{transform:translateX(34%) translateY(9%)} 76%{transform:translateX(12%) translateY(-5%)} 100%{transform:translateX(0) translateY(0);opacity:1} }
@keyframes baTurtle { 0%{transform:translateX(-122%);opacity:0} 10%{opacity:1} 100%{transform:translateX(0);opacity:1} }
.ba-enter-rocket  { animation: baRocket 1.2s cubic-bezier(.2,.7,.3,1) both; }
.ba-enter-jet     { animation: baJet .85s cubic-bezier(.15,.8,.25,1) both; }
.ba-enter-train   { animation: baTrain 1.35s ease-out both; }
.ba-enter-car     { animation: baCar 1.05s cubic-bezier(.2,.7,.3,1) both; }
.ba-enter-bicycle { animation: baBicycle 1.3s ease-out both; }
.ba-enter-fish    { animation: baFish 1.4s ease-out both; }
.ba-enter-turtle  { animation: baTurtle 1.7s linear both; }
@media (prefers-reduced-motion: reduce) { .ba-enter-rocket,.ba-enter-jet,.ba-enter-train,.ba-enter-car,.ba-enter-bicycle,.ba-enter-fish,.ba-enter-turtle { animation-duration: .01s; } }

/* ================================================================
 * Mental Math Master (spoken)
 * ================================================================ */
.mmm-listen { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
.mmm-word { font-weight: 900; font-size: calc(30 * var(--u)); letter-spacing: 0.06em; color: var(--text-primary); }
.q-text.mmm-reveal { font-size: calc(52 * var(--u)); font-weight: 900; }
.q-text.mmm-reveal.revealed { color: #E53935; }
.mmm-again { align-self: center; display: inline-flex; align-items: center; min-height: calc(52 * var(--u)); padding: calc(8 * var(--u)) calc(20 * var(--u)); }

/* ================================================================
 * World Challenge
 * ================================================================ */
.wc-globe { width: calc(96 * var(--u)); height: calc(96 * var(--u)); margin: 0 auto calc(6 * var(--u)); }
.wc-note { font-size: calc(13 * var(--u)); color: var(--text-secondary); text-align: center; margin-top: calc(8 * var(--u)); }

/* suspense overlay before the reveal (tap to skip) */
.wc-suspense { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(22 * var(--u)); background: var(--bg); }
.wc-suspense-title { text-align: center; font-size: calc(40 * var(--u)); line-height: 1.02; color: var(--text-primary); }
.wc-pips { display: flex; gap: calc(14 * var(--u)); }
.wc-pips span { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: var(--panel-face); border: calc(3 * var(--u)) solid var(--stroke); transition: transform 160ms, background 160ms; }
.wc-pips span.on { background: var(--accent1); transform: scale(1.4); }

/* result */
.wc-headline { font-size: calc(58 * var(--u)); color: var(--text-primary); text-align: center; font-variant-numeric: tabular-nums; margin: calc(6 * var(--u)) 0; }
.wc-submit-area { width: 100%; margin-top: calc(16 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.wc-handle { width: 100%; margin-top: calc(8 * var(--u)); padding: calc(12 * var(--u)); border: calc(3 * var(--u)) solid var(--stroke); border-radius: calc(12 * var(--u)); background: var(--face); color: var(--text-primary); font-weight: 900; font-size: calc(16 * var(--u)); text-align: center; }
.wc-rank { font-size: calc(40 * var(--u)); color: var(--accent1); text-align: center; }

/* weekly leader banner */
.wc-weekly { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); margin-bottom: calc(12 * var(--u)); font-weight: 900; font-size: calc(13 * var(--u)); color: var(--text-primary); }
.wc-crown { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex: 0 0 auto; }

/* leaderboard table */
.lb-head { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(14 * var(--u)) calc(8 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 900; letter-spacing: 0.08em; color: var(--text-secondary); }
.lb-list { display: flex; flex-direction: column; gap: calc(8 * var(--u)); overflow-y: auto; }
.lb-row { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); font-weight: 900; }
.lb-row.me { background: var(--accent1); }
.lb-rank { width: calc(34 * var(--u)); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.lb-name { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-correct { width: calc(64 * var(--u)); text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lb-time { width: calc(56 * var(--u)); text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ====================================================================
 * DESKTOP / wide layout (mouse + physical keyboard).
 * Mobile keeps the phone column; desktop opens up into a wider stage:
 * a multi-column menu, and a focused, roomier play area.
 * ==================================================================== */
/* On desktop the app stays a phone-shaped column (every screen is designed for
 * it — widening to a stage would only sprawl the menus/settings/dialogs), framed
 * and centred on a soft backdrop so it reads as intentional, plus pointer/hover
 * affordances and the "type your answer" hint since the keyboard is primary. */
@media (min-width: 760px) and (pointer: fine) {
  :root { --col: min(96vw, 480px, 56dvh); }       /* a touch larger than mobile, still a column; height-fit on short windows */
  body { display: flex; align-items: center; justify-content: center; }
  /* depth backdrop behind the centred column (theme-agnostic vignette) */
  body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(130% 100% at 50% 0%, rgba(255,255,255,0.06), rgba(0,0,0,0.22)); }
  .app {
    height: min(100dvh, calc(1.9 * var(--col)));   /* a portrait-proportioned card, not the full window */
    border-radius: calc(30 * var(--u));
    box-shadow: 0 calc(24 * var(--u)) calc(70 * var(--u)) rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.08);
  }
  /* affordances */
  .menu-card, .mw-tile, .mw-btn, .theme-sw, .back-fab, .menu-fab, .pw-close, .pro-go, .pro-redeem { cursor: pointer; }
  .mw-tile:hover, .mw-btn:hover { filter: brightness(1.05); }
  .menu-card:hover { transform: translateY(calc(-2 * var(--u))); box-shadow: 0 calc(8 * var(--u)) 0 0 var(--shadow); }
  /* keyboard is primary on desktop — surface the hint under the keypad */
  .keypad::after {
    content: 'Tap or type your answer';
    grid-column: 1 / -1; text-align: center;
    font-size: calc(13 * var(--u)); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-secondary); margin-top: calc(2 * var(--u));
  }
}

/* Tablets / large foldables (touch, ≥700px): keep the portrait play column but
 * make it a roomier, framed card centred on a soft backdrop — and ALWAYS
 * height-fit (56dvh) so the full keypad shows without scrolling in any
 * orientation. The app becomes a portrait-proportioned card so a big tablet
 * doesn't stretch the question card into a near-empty box. */
@media (min-width: 700px) and (pointer: coarse) {
  :root { --col: min(96vw, 520px, 56dvh); }
  body { display: flex; align-items: center; justify-content: center; }
  body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(130% 100% at 50% 0%, rgba(255,255,255,0.06), rgba(0,0,0,0.22)); }
  .app {
    height: min(100dvh, calc(1.85 * var(--col)));
    border-radius: calc(30 * var(--u));
    box-shadow: 0 calc(20 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.08);
  }
}

/* ================================================================
 * Achievements (109-badge grid + detail dialog)
 * ================================================================ */
.ach-title { text-align: center; font-weight: 900; font-size: calc(30 * var(--u)); color: #E8A41E; letter-spacing: 0.06em; margin: calc(6 * var(--u)) 0 calc(14 * var(--u)); }
.ach-progress-card { padding: calc(14 * var(--u)); margin-bottom: calc(16 * var(--u)); }
.ach-progress-text { text-align: center; font-weight: 900; font-size: calc(15 * var(--u)); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ach-progress-text b { color: #E8A41E; }
.ach-bar { margin-top: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(5 * var(--u)); background: color-mix(in srgb, var(--text-primary) 12%, transparent); overflow: hidden; }
.ach-bar-fill { height: 100%; background: linear-gradient(to right, #E8A41E, #FFCF5A); border-radius: calc(5 * var(--u)); transition: width 0.4s; }
.ach-section { margin-bottom: calc(18 * var(--u)); }
.ach-head { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.ach-cat { flex: 1; font-weight: 900; font-size: calc(15 * var(--u)); color: var(--text-primary); letter-spacing: 0.03em; border-left: calc(4 * var(--u)) solid #E8A41E; padding-left: calc(8 * var(--u)); }
.ach-chip { font-weight: 900; font-size: calc(12 * var(--u)); color: var(--text-secondary); background: color-mix(in srgb, var(--text-primary) 10%, transparent); border-radius: calc(10 * var(--u)); padding: calc(3 * var(--u)) calc(9 * var(--u)); font-variant-numeric: tabular-nums; }
.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); }
.ach-badge { position: relative; aspect-ratio: 1 / 1; padding: calc(4 * var(--u)); background: none; border: none; cursor: pointer; }
.ach-badge img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.3s; }
.ach-badge img.loaded { opacity: 1; }
.ach-badge:active { transform: scale(0.94); }
.ach-badge.locked img { filter: grayscale(1); opacity: 0.34; }
.ach-lock { position: absolute; right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ach-detail-ov { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: calc(24 * var(--u)); background: rgba(0,0,0,0.55); }
.ach-detail { width: 100%; max-width: calc(340 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); padding: calc(22 * var(--u)); text-align: center; }
.ach-detail-badge { width: calc(150 * var(--u)); height: calc(150 * var(--u)); object-fit: contain; }
.ach-detail-badge.locked { filter: grayscale(1); opacity: 0.34; }
.ach-detail-tier { font-weight: 900; font-size: calc(13 * var(--u)); letter-spacing: 0.1em; }
.ach-detail-name { font-weight: 900; font-size: calc(22 * var(--u)); color: var(--text-primary); }
.ach-detail-desc { font-size: calc(13.5 * var(--u)); color: var(--text-secondary); line-height: 1.35; }
.ach-detail-status { margin-top: calc(6 * var(--u)); font-weight: 900; font-size: calc(12 * var(--u)); color: var(--text-secondary); letter-spacing: 0.08em; }
.ach-detail-hint { font-size: calc(13 * var(--u)); color: var(--text-primary); }
.ach-detail-actions { width: 100%; margin-top: calc(6 * var(--u)); }
.ach-close { width: 100%; margin-top: calc(6 * var(--u)); }

/* ACHIEVEMENT UNLOCKED popup (springy spin + sparkle burst) */
.au-ov { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: calc(24 * var(--u)); background: rgba(0,0,0,0.6); }
.au-card { width: 100%; max-width: calc(340 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); padding: calc(24 * var(--u)); text-align: center; }
.au-header { font-weight: 900; font-size: calc(15 * var(--u)); letter-spacing: 0.14em; color: var(--text-primary); }
.au-badge-wrap { position: relative; width: calc(160 * var(--u)); height: calc(160 * var(--u)); display: flex; align-items: center; justify-content: center; margin: calc(6 * var(--u)) 0; }
.au-badge { width: 100%; height: 100%; object-fit: contain; animation: au-reveal 780ms cubic-bezier(.18,.9,.3,1) 60ms both; }
@keyframes au-reveal { from { transform: scale(0.3) rotate(0deg); opacity: 0; } to { transform: scale(1) rotate(720deg); opacity: 1; } }
.au-tier { font-weight: 900; font-size: calc(13 * var(--u)); letter-spacing: 0.1em; }
.au-name { font-weight: 900; font-size: calc(24 * var(--u)); color: var(--text-primary); line-height: 1.05; }
.au-desc { font-size: calc(13.5 * var(--u)); color: var(--text-secondary); line-height: 1.35; }
.au-actions { width: 100%; margin-top: calc(8 * var(--u)); display: flex; gap: calc(10 * var(--u)); }
/* equal-width twin buttons: min-width:0 defeats the flex content floor so the
   longer label ("AWESOME") can't out-grow "SHARE" */
.au-actions .mw-btn { flex: 1 1 0; min-width: 0; }
.au-spark { position: absolute; left: 50%; top: 50%; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; pointer-events: none; animation: au-spark 700ms ease-out forwards; }
@keyframes au-spark { 0% { transform: translate(-50%,-50%) scale(0.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; } }

/* ================================================================
 * Write-it Mode (handwriting answer panel)
 * ================================================================ */
.wi-panel { display: flex; flex-direction: column; gap: calc(10 * var(--u)); width: 100%; flex: 1.5; min-height: 0; }
.wi-stage { position: relative; width: 100%; flex: 1; min-height: calc(140 * var(--u)); }
.wi-canvas, .wi-demo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: calc(16 * var(--u)); }
.wi-canvas { background: #fff; border: calc(3 * var(--u)) solid var(--stroke); touch-action: none; cursor: crosshair; }
.wi-demo { pointer-events: none; }
.wi-demo[hidden] { display: none; }
.wi-status { position: absolute; left: 0; right: 0; bottom: calc(6 * var(--u)); display: flex; align-items: center; justify-content: center; height: calc(24 * var(--u)); pointer-events: none; }
.wi-status-text { font-size: calc(13 * var(--u)); font-weight: 900; color: var(--text-secondary); }
.wi-wavy { width: calc(90 * var(--u)); height: calc(22 * var(--u)); }
.wi-wavy[hidden] { display: none; }
.wi-controls { display: flex; align-items: center; }
.wi-mute { position: absolute; top: calc(8 * var(--u)); right: calc(8 * var(--u)); z-index: 2; width: calc(48 * var(--u)); height: calc(48 * var(--u)); padding: calc(10 * var(--u)); border-radius: 50%; background: rgba(255,255,255,0.82); border: calc(2 * var(--u)) solid var(--stroke); box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,0.12); color: var(--text-primary); }
.wi-mute.muted { color: var(--text-secondary); }
.wi-mute svg { display: block; width: 100%; height: 100%; }
.wi-clear { flex: 1; width: 100%; }
.opt-sub { font-size: calc(12 * var(--u)); color: var(--text-secondary); margin-top: calc(2 * var(--u)); }

/* ================= first-run onboarding (intro) ================= */
.intro-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg); padding: calc(22 * var(--u)); }
.intro-ops { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.intro-ops span { position: absolute; font-weight: 900; color: var(--accent1); opacity: .12; font-size: calc(120 * var(--u)); }
.intro-ops span:nth-child(1) { top: 6%; left: 8%; transform: rotate(-12deg); }
.intro-ops span:nth-child(2) { top: 22%; right: 6%; transform: rotate(10deg); }
.intro-ops span:nth-child(3) { bottom: 16%; left: 4%; transform: rotate(8deg); }
.intro-ops span:nth-child(4) { bottom: 8%; right: 12%; transform: rotate(-8deg); }
.intro-stage { position: relative; z-index: 1; width: 100%; max-width: calc(380 * var(--u)); }
.intro-mute { position: absolute; top: max(calc(14 * var(--u)), env(safe-area-inset-top)); right: calc(16 * var(--u)); z-index: 5; width: calc(44 * var(--u)); height: calc(44 * var(--u)); padding: calc(9 * var(--u)); border-radius: 50%; background: var(--face); border: calc(2 * var(--u)) solid var(--stroke); color: var(--text-primary); box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,0.12); }
.intro-mute.off { color: var(--text-secondary); }
.intro-mute svg { display: block; width: 100%; height: 100%; }
.intro-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(14 * var(--u)); opacity: 0; transform: translateY(calc(16 * var(--u))); transition: opacity .42s ease, transform .42s ease; }
.intro-step.in { opacity: 1; transform: none; }
.intro-title { font-size: calc(46 * var(--u)); color: var(--text-primary); line-height: 1; }
.intro-sub { font-size: calc(18 * var(--u)); color: var(--text-secondary); line-height: 1.42; max-width: 32ch; }
.intro-textcard { width: 100%; padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); }
.intro-textcard .intro-sub { color: var(--text-primary); opacity: .85; max-width: none; }
.intro-welcome .intro-logo { width: calc(132 * var(--u)); height: calc(132 * var(--u)); border-radius: calc(30 * var(--u)); box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(0,0,0,.18); animation: introPop .6s cubic-bezier(.2,.8,.3,1.25) both; }
@keyframes introPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.intro-welcome .mw-btn, .intro-setup .mw-btn, .intro-welcomepage .mw-btn { margin-top: calc(8 * var(--u)); min-width: calc(190 * var(--u)); }
/* welcome pages (brain + Android copy) */
.intro-brain { position: relative; width: calc(122 * var(--u)); height: calc(99 * var(--u)); filter: drop-shadow(0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(74,47,176,.28)); animation: brainFloat 4.6s ease-in-out infinite; }
/* Max narrates the intro pages from INSIDE the text card: a big avatar floating
   over the card's top-left corner (no box of his own). The heading is pushed to
   the right so it clears him. */
.intro-textcard-coach { position: relative; padding-top: calc(40 * var(--u)); }
.intro-textcard-coach .intro-wtitle { align-self: flex-end; text-align: right; max-width: 72%; }
.intro-maxlet {
  position: absolute; top: calc(-52 * var(--u)); left: calc(-14 * var(--u));
  width: calc(122 * var(--u)); height: calc(122 * var(--u));
  filter: drop-shadow(0 calc(5 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,0.30));
}
.intro-maxlet .coach-avatar-svg { width: 100%; height: 100%; }
@keyframes brainFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(calc(-8 * var(--u))) rotate(1deg); } }
.intro-wtitle { font-size: calc(34 * var(--u)); color: var(--text-primary); line-height: 1.05; }
.intro-pagedots { display: flex; gap: calc(7 * var(--u)); margin: calc(2 * var(--u)) 0; }
.intro-pagedots span { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--stroke); transition: background .25s, width .25s; }
.intro-pagedots span.on { width: calc(22 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--accent1); }
/* question step */
.intro-progress { display: flex; gap: calc(8 * var(--u)); }
.intro-progress span { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--stroke); transition: background .25s, width .25s; }
.intro-progress span.on { width: calc(26 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--accent1); }
.intro-q { position: relative; }
.intro-q .q-area, .intro-keypad { width: 100%; }
.intro-keypad { margin-top: calc(2 * var(--u)); }
/* Praise flash — a big word that zooms into the middle of the screen and fades
   out fast (overlay, doesn't take layout space or block the keypad). */
.intro-cheer {
  position: absolute; inset: 0; z-index: 40; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: calc(62 * var(--u)); line-height: 1;
  color: var(--accent1); -webkit-text-stroke: calc(2 * var(--u)) var(--stroke);
  text-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.3);
  opacity: 0;
}
.intro-cheer.show { animation: cheerPop .72s cubic-bezier(.18,.9,.3,1.2) forwards; }
@keyframes cheerPop {
  0%   { opacity: 0; transform: scale(.3); }
  22%  { opacity: 1; transform: scale(1.18); }
  42%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}
/* setup step */
.intro-burst { animation: introPop .55s cubic-bezier(.2,.8,.3,1.25) both; }
.intro-card { width: 100%; padding: calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.intro-opt-row { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); }
.intro-opt-label { display: flex; flex-direction: column; text-align: left; }
.intro-opt-label b { color: var(--text-primary); font-size: calc(16 * var(--u)); }
.intro-opt-label span { color: var(--text-secondary); font-size: calc(12.5 * var(--u)); }
.intro-install { width: 100%; }
.intro-ioshint { font-size: calc(13 * var(--u)); color: var(--text-secondary); line-height: 1.4; }
.intro-ioshint b { color: var(--text-primary); }

/* ============ logo tap — 16 random fun animations (Android parity) ============ */
.menu-title { transform-origin: center; will-change: transform; }
.logo-anim-spin { animation: la-spin .8s ease; }
@keyframes la-spin { to { transform: rotate(360deg); } }
.logo-anim-zoom { animation: la-zoom .6s ease; }
@keyframes la-zoom { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.logo-anim-bounce { animation: la-bounce .9s; }
@keyframes la-bounce { 0%,20%,53%,80%,100% { transform: translateY(0); } 40%,43% { transform: translateY(-26px); } 70% { transform: translateY(-13px); } 90% { transform: translateY(-4px); } }
.logo-anim-wobble { animation: la-wobble .9s; }
@keyframes la-wobble { 0%,100% { transform: none; } 15% { transform: translateX(-18px) rotate(-5deg); } 30% { transform: translateX(14px) rotate(4deg); } 45% { transform: translateX(-10px) rotate(-3deg); } 60% { transform: translateX(7px) rotate(2deg); } 75% { transform: translateX(-4px) rotate(-1deg); } }
.logo-anim-shake { animation: la-shake .7s; }
@keyframes la-shake { 0%,100% { transform: translateX(0); } 10%,30%,50%,70%,90% { transform: translateX(-9px); } 20%,40%,60%,80% { transform: translateX(9px); } }
.logo-anim-flipx { animation: la-flipx .85s ease; }
@keyframes la-flipx { 0% { transform: perspective(500px) rotateY(0); } 100% { transform: perspective(500px) rotateY(360deg); } }
.logo-anim-flipy { animation: la-flipy .85s ease; }
@keyframes la-flipy { 0% { transform: perspective(500px) rotateX(0); } 100% { transform: perspective(500px) rotateX(360deg); } }
.logo-anim-tada { animation: la-tada 1s; }
@keyframes la-tada { 0% { transform: scale(1); } 10%,20% { transform: scale(.9) rotate(-3deg); } 30%,50%,70%,90% { transform: scale(1.1) rotate(3deg); } 40%,60%,80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }
.logo-anim-rubber { animation: la-rubber .9s; }
@keyframes la-rubber { 0% { transform: scale(1,1); } 30% { transform: scale(1.25,.75); } 40% { transform: scale(.75,1.25); } 50% { transform: scale(1.15,.85); } 65% { transform: scale(.95,1.05); } 75% { transform: scale(1.05,.95); } 100% { transform: scale(1,1); } }
.logo-anim-jello { animation: la-jello .9s; }
@keyframes la-jello { 0%,11%,100% { transform: none; } 22% { transform: skewX(-12deg) skewY(-12deg); } 33% { transform: skewX(6deg) skewY(6deg); } 44% { transform: skewX(-3deg) skewY(-3deg); } 55% { transform: skewX(1.5deg) skewY(1.5deg); } }
.logo-anim-heartbeat { animation: la-heart .9s ease; }
@keyframes la-heart { 0% { transform: scale(1); } 14% { transform: scale(1.22); } 28% { transform: scale(1); } 42% { transform: scale(1.22); } 70%,100% { transform: scale(1); } }
.logo-anim-swing { animation: la-swing .8s ease; transform-origin: top center; }
@keyframes la-swing { 20% { transform: rotate(13deg); } 40% { transform: rotate(-9deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
.logo-anim-squish { animation: la-squish .6s ease; }
@keyframes la-squish { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.28,.68); } }
.logo-anim-stretch { animation: la-stretch .6s ease; }
@keyframes la-stretch { 0%,100% { transform: scale(1,1); } 50% { transform: scale(.78,1.32); } }
.logo-anim-drop { animation: la-drop .8s cubic-bezier(.3,1.4,.5,1); }
@keyframes la-drop { 0% { transform: translateY(-32px); opacity: .55; } 60% { transform: translateY(7px); } 80% { transform: translateY(-3px); } 100% { transform: translateY(0); opacity: 1; } }
.logo-anim-tilt { animation: la-tilt .7s ease; }
@keyframes la-tilt { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-8deg); } 70% { transform: rotate(5deg); } }

/* ---- share sheet (desktop fallback when Web Share API is unavailable) ---- */
.share-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: calc(20 * var(--u)); background: rgba(6,8,14,0.6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.share-card { width: 100%; max-width: calc(340 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(24 * var(--u)) calc(22 * var(--u)); text-align: center; }
.share-title { font-size: calc(22 * var(--u)); color: var(--text-primary); margin-bottom: calc(2 * var(--u)); }
/* icon-only share grid — logos read on their own, no labels */
.share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12 * var(--u)); }
.share-tile { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: calc(9 * var(--u));
  background: color-mix(in srgb, var(--text-primary) 7%, transparent); border: none; border-radius: calc(16 * var(--u));
  cursor: pointer; transition: transform .1s ease, background .15s ease; -webkit-tap-highlight-color: transparent; }
.share-tile:hover { background: color-mix(in srgb, var(--text-primary) 12%, transparent); }
.share-tile:active { transform: scale(0.9); }
.share-ico { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.share-ico svg { width: 100%; height: 100%; display: block; }
.share-close { background: none; border: none; color: var(--text-secondary); font-weight: 700; font-size: calc(14 * var(--u)); padding: calc(8 * var(--u)); margin-top: calc(2 * var(--u)); }
/* WeChat scan-to-share QR */
.qr-box { width: calc(216 * var(--u)); height: calc(216 * var(--u)); margin: calc(4 * var(--u)) auto 0; background: #fff; border-radius: calc(10 * var(--u)); padding: calc(8 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.2); }
.qr-box svg { display: block; }
.qr-hint { color: var(--text-secondary); font-size: calc(13 * var(--u)); font-weight: 700; margin-top: calc(2 * var(--u)); }
/* shared modal corner-X (added by lib/modal.js trapModal) — flips side in RTL */
.modal-x { position: absolute; top: calc(9 * var(--u)); inset-inline-end: calc(9 * var(--u)); z-index: 3;
  width: calc(30 * var(--u)); height: calc(30 * var(--u)); padding: calc(6 * var(--u)); border: none; cursor: pointer;
  background: color-mix(in srgb, var(--text-primary) 9%, transparent); border-radius: 50%; color: var(--text-secondary);
  -webkit-tap-highlight-color: transparent; transition: transform .1s ease, background .15s ease; }
.modal-x:hover { background: color-mix(in srgb, var(--text-primary) 16%, transparent); }
.modal-x:active { transform: scale(0.88); }
.modal-x svg { width: 100%; height: 100%; display: block; }
/* slim one-time "downloading offline files" bar, pinned to the very top */
#mw-dl-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 96; height: calc(30 * var(--u)); pointer-events: none;
  opacity: 0; transform: translateY(-100%); transition: opacity .3s ease, transform .3s ease; }
#mw-dl-bar.on { opacity: 1; transform: none; }
#mw-dl-bar .dl-fill { position: absolute; top: 0; left: 0; height: calc(5 * var(--u)); width: 3%;
  background: linear-gradient(90deg, var(--accent2, var(--accent1)) 0%, var(--accent1) 30%, color-mix(in srgb, #fff 85%, var(--accent1)) 50%, var(--accent1) 70%, var(--accent2, var(--accent1)) 100%);
  background-size: 220% 100%; animation: dlFlow 1.15s linear infinite;
  box-shadow: 0 0 calc(9 * var(--u)) color-mix(in srgb, var(--accent1) 90%, transparent); transition: width .35s ease; }
@keyframes dlFlow { from { background-position: 220% 0; } to { background-position: 0 0; } }
/* a solid dark chip with light text so the label reads on ANY theme/background */
#mw-dl-bar .dl-label { position: absolute; top: calc(7 * var(--u)); left: 50%; transform: translateX(-50%); white-space: nowrap;
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: .03em; color: #fff;
  background: #0c1730; padding: calc(3 * var(--u)) calc(12 * var(--u)); border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(7 * var(--u)) rgba(0,0,0,.32); }
#mw-dl-bar .dl-label::before { content: ''; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%;
  background: var(--accent1); box-shadow: 0 0 calc(6 * var(--u)) var(--accent1); animation: dlDot 1s ease-in-out infinite; }
@keyframes dlDot { 0%, 100% { opacity: .4; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.15); } }

/* "Thinking" brain loader — shown while a slow async step runs (e.g. switching
   language fetches a locale module). Theme-neutral scrim + soft blur. */
.thinking-ov { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center;
  justify-content: center; background: rgba(10,20,40,.10); backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s ease; }
.thinking-ov.in { opacity: 1; }
.thinking-brain { width: calc(120 * var(--u)); height: calc(120 * var(--u));
  filter: drop-shadow(0 0 calc(11 * var(--u)) color-mix(in srgb, var(--accent1) 55%, transparent)); }
.thinking-brain .tb-nc { width: 100%; height: 100%; }

/* Inline brand spinner — a smaller loader for in-place loading states
 * (leaderboard lists, etc.), centred in its container in place of "Loading…". */
.brain-inline { display: flex; align-items: center; justify-content: center;
  padding: calc(28 * var(--u)) 0; }
.brain-inline .tb-nc { width: calc(72 * var(--u)); height: calc(72 * var(--u));
  filter: drop-shadow(0 0 calc(8 * var(--u)) color-mix(in srgb, var(--accent1) 50%, transparent)); }

/* "Thinking" loader — a Newton's cradle swinging inside a spinning gradient ring.
 * Theme-aware (accent1/2); fills whichever wrapper sizes it (.thinking-brain / .brain-inline). */
.tb-nc { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.tb-nc .tb-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 3%, var(--accent2, var(--accent1)) 16%,
    var(--accent1) 40%, color-mix(in srgb, #fff 80%, var(--accent1)) 55%, var(--accent1) 72%,
    var(--accent2, var(--accent1)) 90%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 13%), #000 calc(100% - 13%));
          mask: radial-gradient(farthest-side, #0000 calc(100% - 13%), #000 calc(100% - 13%));
  animation: tbSpin 1.05s linear infinite; }
@keyframes tbSpin { to { transform: rotate(1turn); } }
.tb-nc .tb-pend { position: relative; width: 13%; height: 38%; margin-top: 28%;
  display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.tb-nc .tb-pend i { width: 15%; min-width: 1px; flex: 1;
  background: color-mix(in srgb, var(--text-secondary) 50%, transparent); }
.tb-nc .tb-pend b { width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, #fff 58%, var(--accent1)), var(--accent1) 74%);
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.3); }
.tb-nc .tb-p1 { animation: tbSwingL 1.05s ease-in-out infinite; }
.tb-nc .tb-p5 { animation: tbSwingR 1.05s ease-in-out infinite; }
@keyframes tbSwingL { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(-28deg); } }
@keyframes tbSwingR { 0%, 50%, 100% { transform: rotate(0); } 75% { transform: rotate(28deg); } }
@media (prefers-reduced-motion: reduce) {
  .tb-nc .tb-ring { animation-duration: 2.4s; }
  .tb-nc .tb-p1, .tb-nc .tb-p5 { animation: none; }
}

/* Progress / Mastery screen — spaced-repetition "facts mastered" map */
.mastery-screen { display: flex; flex-direction: column; height: 100%; }
.m-title { font-size: calc(26 * var(--u)); color: var(--text-primary); flex: 1; text-align: center; }
.m-spacer { width: calc(44 * var(--u)); }
.m-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.m-card { padding: calc(14 * var(--u)); }
.m-sub { font-weight: 900; font-size: calc(20 * var(--u)); color: var(--text-primary); margin-bottom: calc(3 * var(--u)); }
.m-count { color: var(--text-secondary); font-weight: 800; margin-bottom: calc(12 * var(--u)); }
.m-grid { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: calc(2 * var(--u)); width: 100%; }
.m-cell { aspect-ratio: 1 / 1; border-radius: calc(4 * var(--u)); }
.m-cell.m-hd { background: transparent !important; display: flex; align-items: center; justify-content: center; font-size: calc(11 * var(--u)); font-weight: 800; color: var(--text-secondary); }
.m-legend { display: flex; gap: calc(14 * var(--u)); margin-top: calc(12 * var(--u)); flex-wrap: wrap; font-size: calc(13 * var(--u)); color: var(--text-secondary); font-weight: 700; }
.m-legend i { display: inline-block; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 4px; margin-right: calc(5 * var(--u)); vertical-align: -2px; }
.m-ops { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.m-op { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.m-op-sym { width: calc(28 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 900; color: var(--text-primary); text-align: center; }
.m-op-bar { flex: 1; height: calc(16 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--panel-face); overflow: hidden; }
.m-op-fill { height: 100%; background: linear-gradient(90deg, #FFB74D, #66BB6A); border-radius: calc(8 * var(--u)); }
.m-op-num { width: calc(34 * var(--u)); text-align: right; font-weight: 900; color: var(--text-primary); }
.m-empty { text-align: center; color: var(--text-secondary); font-weight: 700; padding: calc(16 * var(--u)); }

/* results-screen mastery celebration + Progress review CTA */
.score-mastery { text-align: center; display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin-top: calc(4 * var(--u)); }
.sm-line { font-weight: 800; font-size: calc(16 * var(--u)); }
.sm-master { color: #1A8F3C; }
.sm-strong { color: var(--text-secondary); }
.sm-adapt { color: var(--text-primary); }
.sm-adapt::before { content: '✦ '; }
.m-review { width: 100%; margin-bottom: calc(2 * var(--u)); }
/* Trouble Spots card — weak skill families with a "See how" that opens the explainer */
.m-trouble-row { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) 0; border-top: 1px solid color-mix(in srgb, var(--text-secondary) 16%, transparent); }
.m-trouble-row:first-of-type { border-top: none; }
.m-trouble-name { font-weight: 800; font-size: calc(16 * var(--u)); color: var(--text-primary); }
.m-showhow { min-width: 0; padding: calc(7 * var(--u)) calc(14 * var(--u)); font-size: calc(13 * var(--u)); }
.m-trophy { width: 100%; margin-top: calc(2 * var(--u)); display: inline-flex; align-items: center; justify-content: center; gap: calc(9 * var(--u)); }
.m-trophy-ico { flex: 0 0 auto; color: var(--accent1); }

/* Math Adapt AI™ card — interactive per-mode difficulty (Progress + Settings) */
.adapt-ai { margin-bottom: calc(16 * var(--u)); }
.m-scroll .adapt-ai { margin-bottom: 0; }   /* m-scroll provides the gap in Progress */
.adapt-ai-head { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.adapt-ai-name { font-weight: 900; font-size: calc(20 * var(--u)); color: var(--text-primary); letter-spacing: -0.01em; }
.adapt-ai-tm { font-size: calc(10 * var(--u)); vertical-align: super; opacity: 0.65; margin-left: 1px; }
.adapt-ai-chip { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); flex: 0 0 auto; font-weight: 900; font-size: calc(11 * var(--u)); letter-spacing: 0.14em; color: #fff; background: linear-gradient(135deg, #7B5CFF, #45A6FF); padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: 999px; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(90, 70, 255, 0.34); }
.adapt-ai-dot { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #fff; animation: aiDot 1.4s ease-in-out infinite; }
@keyframes aiDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.adapt-ai-blurb { font-size: calc(13.5 * var(--u)); color: var(--text-secondary); line-height: 1.45; margin-bottom: calc(10 * var(--u)); }
/* "you can tap the bars" hint — a faint accent chip so the override is discoverable */
.adapt-ai-hint { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); margin-bottom: calc(12 * var(--u)); padding: calc(5 * var(--u)) calc(11 * var(--u)); border-radius: 999px; background: color-mix(in srgb, var(--accent1) 32%, transparent); font-size: calc(12.5 * var(--u)); font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.adapt-ai-tap { flex: 0 0 auto; }
.adapt-ai-row { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) 0; border-top: 1px solid color-mix(in srgb, var(--text-secondary) 16%, transparent); }
.adapt-ai-row:first-of-type { border-top: none; }
.adapt-ai-mode { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: calc(15 * var(--u)); color: var(--text-primary); }
.adapt-ai-ctl { flex: 0 0 auto; display: flex; align-items: center; gap: calc(9 * var(--u)); }
.adapt-ai-lvl { font-weight: 900; font-size: calc(11 * var(--u)); letter-spacing: 0.04em; text-transform: uppercase; padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: 999px; color: #1c1408; white-space: nowrap; min-width: calc(56 * var(--u)); text-align: center; }
.adapt-ai-lvl.d1 { background: #BFE6C5; } .adapt-ai-lvl.d2 { background: #FFE08A; } .adapt-ai-lvl.d3 { background: #FFC078; } .adapt-ai-lvl.d4 { background: #F4A0A0; }
.adapt-ai-meter { display: flex; align-items: flex-end; gap: calc(3 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: calc(9 * var(--u)); background: color-mix(in srgb, var(--text-secondary) 9%, transparent); }
.adapt-ai-bar { -webkit-appearance: none; appearance: none; background: none; border: none; padding: calc(5 * var(--u)) calc(2 * var(--u)); display: flex; align-items: flex-end; cursor: pointer; }
.adapt-ai-bar .bar { display: block; width: calc(7 * var(--u)); border-radius: calc(3 * var(--u)); background: color-mix(in srgb, var(--text-secondary) 28%, transparent); transition: background .15s ease; }
.adapt-ai-bar .bar.h1 { height: calc(9 * var(--u)); } .adapt-ai-bar .bar.h2 { height: calc(14 * var(--u)); } .adapt-ai-bar .bar.h3 { height: calc(19 * var(--u)); } .adapt-ai-bar .bar.h4 { height: calc(24 * var(--u)); }
.adapt-ai-bar .bar.on.d1 { background: #5BBE73; } .adapt-ai-bar .bar.on.d2 { background: #E8B23A; } .adapt-ai-bar .bar.on.d3 { background: #E8902E; } .adapt-ai-bar .bar.on.d4 { background: #D85A5A; }
.adapt-ai-progress { width: 100%; margin-top: calc(10 * var(--u)); background: none; border: none; color: var(--text-primary); opacity: 0.8; font-weight: 800; font-size: calc(13.5 * var(--u)); text-align: right; text-decoration: underline; cursor: pointer; padding: calc(6 * var(--u)) 0 0; }

/* Score screen: heart-rate-MONITOR trajectory of recent pace (per mode) */
.traj-panel { margin-top: calc(10 * var(--u)); border-radius: calc(16 * var(--u)); background: #0A1119; padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 calc(34 * var(--u)) rgba(0, 0, 0, 0.55); }
.traj-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(6 * var(--u)); }
.traj-title { display: flex; align-items: center; gap: calc(7 * var(--u)); font-weight: 900; font-size: calc(12 * var(--u)); letter-spacing: 0.09em; text-transform: uppercase; color: #C9D6E2; }
.traj-led { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #C9D6E2; animation: trajLed 1.1s ease-in-out infinite; }
.traj-runs { font-weight: 800; font-size: calc(11 * var(--u)); color: #6B7C8C; font-variant-numeric: tabular-nums; }
.traj-canvas { display: block; width: 100%; height: calc(92 * var(--u)); border-radius: calc(8 * var(--u)); }
.traj-cap { margin-top: calc(7 * var(--u)); font-weight: 800; font-size: calc(13 * var(--u)); text-align: center; color: #C9D6E2; }
.traj-up .traj-led { background: #33F2A0; box-shadow: 0 0 calc(9 * var(--u)) #33F2A0; }
.traj-down .traj-led { background: #FF6B79; box-shadow: 0 0 calc(9 * var(--u)) #FF6B79; }
.traj-flat .traj-led { background: #FFC36B; box-shadow: 0 0 calc(9 * var(--u)) #FFC36B; }
.traj-up .traj-cap { color: #33F2A0; }
.traj-down .traj-cap { color: #FF6B79; }
.traj-flat .traj-cap { color: #FFC36B; }
@keyframes trajLed { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Progress: mastery-level card + tappable table rows */
.m-levelcard { padding-bottom: calc(16 * var(--u)); }
.m-lvl-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(8 * var(--u)); }
.m-lvl { font-weight: 900; font-size: calc(20 * var(--u)); color: var(--text-primary); }
.m-lvl-n { font-weight: 800; color: var(--text-secondary); font-size: calc(14 * var(--u)); }
.m-lvl-bar { height: calc(16 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--panel-face); overflow: hidden; }
.m-lvl-fill { height: 100%; border-radius: calc(8 * var(--u)); background: linear-gradient(90deg, #FFB74D, #66BB6A); transition: width .4s ease; }
.m-tap { text-align: center; color: var(--text-secondary); font-size: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }
.m-cell.m-row { cursor: pointer; transition: color .12s; }
.m-cell.m-row:active { color: var(--accent1); transform: scale(1.18); }

/* first-visit Gains explainer (Max) */
.mi-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: calc(24 * var(--u)); background: rgba(0,0,0,0.6); opacity: 0; transition: opacity .2s ease; }
.mi-overlay.in { opacity: 1; }
.mi-card { width: 100%; max-width: calc(360 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); padding: calc(24 * var(--u)); text-align: center; transform: translateY(calc(14 * var(--u))) scale(.97); transition: transform .25s ease; }
.mi-overlay.in .mi-card { transform: none; }
.mi-avatar { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
.mi-avatar svg { width: 100%; height: 100%; display: block; }
.mi-title { font-size: calc(24 * var(--u)); color: var(--text-primary); }
.mi-name { font-weight: 900; color: var(--accent1); font-size: calc(15 * var(--u)); margin-top: calc(-4 * var(--u)); }
.mi-lines { display: flex; flex-direction: column; gap: calc(11 * var(--u)); text-align: left; margin: calc(8 * var(--u)) 0 calc(4 * var(--u)); }
.mi-line { font-size: calc(15 * var(--u)); color: var(--text-primary); font-weight: 600; line-height: 1.4; }
.mi-dots { display: inline-flex; gap: 3px; margin-right: calc(6 * var(--u)); vertical-align: -1px; }
.mi-dots i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 3px; display: inline-block; }
.mi-ok { width: 100%; margin-top: calc(8 * var(--u)); }
.m-levelcard, .m-opcard { position: relative; cursor: pointer; }
.m-help { position: absolute; top: calc(10 * var(--u)); right: calc(12 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--panel-face); color: var(--text-secondary); font-weight: 900; font-size: calc(13 * var(--u)); display: flex; align-items: center; justify-content: center; border: calc(2 * var(--u)) solid var(--stroke); }
.m-levelcard .m-lvl-n { padding-right: calc(20 * var(--u)); }
.rd-gotit { display: flex; align-items: center; gap: calc(8 * var(--u)); font-weight: 700; font-size: calc(13 * var(--u)); color: var(--text-secondary); cursor: pointer; margin-top: calc(4 * var(--u)); }
.rd-gotit-cb { width: calc(20 * var(--u)); height: calc(20 * var(--u)); accent-color: var(--accent1); flex: 0 0 auto; }

/* ---- Max's per-mode intro (coachintro.js) ---- */
.ci-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(8,10,20,0.7); backdrop-filter: blur(calc(3 * var(--u))); opacity: 0; transition: opacity .2s ease; padding: calc(20 * var(--u)); }
.ci-overlay.in { opacity: 1; }
.ci-card { padding: calc(22 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); text-align: center; max-width: calc(380 * var(--u)); }
.ci-ava { width: calc(78 * var(--u)); height: calc(78 * var(--u)); }
/* Max blinks — the shades band thins to a line and back (his "eyes" closing).
   .max-blink toggled on any avatar container (intro card, score verdict, …). */
.max-eyes { transform-box: fill-box; transform-origin: center; }
.max-blink .max-eyes { animation: maxEyesBlink 0.2s ease; }
@keyframes maxEyesBlink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.1); } }
.ci-name { font-weight: 900; font-size: calc(12 * var(--u)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-top: calc(-2 * var(--u)); }
.ci-speak { font-weight: 800; font-size: calc(20 * var(--u)); line-height: 1.34; color: var(--text-primary); min-height: calc(26 * var(--u)); }
.ci-science { font-size: calc(13.5 * var(--u)); line-height: 1.34; color: var(--text-primary); background: color-mix(in srgb, var(--accent1) 22%, var(--face)); border: calc(1.5 * var(--u)) solid color-mix(in srgb, var(--accent1) 45%, transparent); border-radius: calc(12 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); }
.ci-sci-tag { font-weight: 900; color: color-mix(in srgb, var(--accent1) 38%, var(--text-primary)); text-transform: uppercase; font-size: calc(11.5 * var(--u)); letter-spacing: 0.05em; }
.ci-gotit { display: flex; align-items: center; gap: calc(8 * var(--u)); font-weight: 700; font-size: calc(13 * var(--u)); color: var(--text-secondary); cursor: pointer; margin-top: calc(2 * var(--u)); }
.ci-gotit-cb { width: calc(20 * var(--u)); height: calc(20 * var(--u)); accent-color: var(--accent1); flex: 0 0 auto; }
.ci-go { margin-top: calc(4 * var(--u)); min-width: calc(180 * var(--u)); }

/* Animated "how to solve" explainer (ui/explainer.js) — reuses the .ci card look. */
.ex-overlay { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; background: rgba(8,10,20,0.72); backdrop-filter: blur(calc(3 * var(--u))); opacity: 0; transition: opacity .2s ease; padding: calc(18 * var(--u)); }
.ex-overlay.in { opacity: 1; }
.ex-card { padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); text-align: center; width: 100%; max-width: calc(400 * var(--u)); }
/* The original question — always visible so the player knows what they're solving. */
.ex-question { font-weight: 900; font-size: calc(26 * var(--u)); color: var(--text-primary); letter-spacing: 0.01em; margin-bottom: calc(2 * var(--u)); font-variant-numeric: tabular-nums; }
.ex-stage { position: relative; width: 100%; height: calc(196 * var(--u)); background: var(--panel-face); border-radius: calc(18 * var(--u)); overflow: hidden; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(0,0,0,0.06); }
.ex-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.ex-ava { width: calc(70 * var(--u)); height: calc(70 * var(--u)); margin-top: calc(6 * var(--u)); }
.ex-name { font-weight: 900; font-size: calc(11 * var(--u)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-top: calc(-2 * var(--u)); }
.ex-speak { font-weight: 800; font-size: calc(19 * var(--u)); line-height: 1.32; color: var(--text-primary); min-height: calc(50 * var(--u)); display: flex; align-items: center; justify-content: center; padding: 0 calc(6 * var(--u)); }
.ex-controls { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); width: 100%; }
.ex-controls .ex-next { min-width: calc(116 * var(--u)); }
.ex-nav { width: calc(46 * var(--u)); height: calc(46 * var(--u)); flex: 0 0 auto; border-radius: 50%; border: none; background: var(--panel-face); color: var(--text-primary); padding: calc(11 * var(--u)); cursor: pointer; box-shadow: 0 calc(2 * var(--u)) 0 0 var(--shadow); }
.ex-nav:active { transform: translateY(calc(2 * var(--u))); box-shadow: none; }
.ex-dots { display: flex; gap: calc(7 * var(--u)); flex: 1 1 auto; justify-content: center; }
.ex-dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: color-mix(in srgb, var(--text-secondary) 32%, transparent); transition: background .2s, transform .2s; }
.ex-dot.on { background: var(--accent1); transform: scale(1.25); }
.ex-replaylink { background: none; border: none; color: var(--text-secondary); font-weight: 800; font-size: calc(13 * var(--u)); text-decoration: underline; padding: calc(8 * var(--u)); margin-top: calc(2 * var(--u)); cursor: pointer; }
.ex-replaylink[hidden] { display: none; }
/* sparkle at the answer */
.ex-spk-host { position: absolute; width: 0; height: 0; pointer-events: none; }
.ex-spk { position: absolute; left: 0; top: 0; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; transform: translate(-50%,-50%); animation: ex-spark .8s ease-out forwards; }
@keyframes ex-spark { 0% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); } }

/* "See how →" / Skip — matching themed buttons, centred, on a 3rd-strike miss. */
.kp-actions { display: flex; gap: calc(10 * var(--u)); justify-content: center; align-items: center; flex-wrap: wrap; }
.kp-seehow, .kp-skip { padding: calc(9 * var(--u)) calc(18 * var(--u)); font-size: calc(14 * var(--u)); min-width: calc(112 * var(--u)); }

/* Offline banner — a calm, persistent top bar shown whenever the device reports
 * no connection (and on a request timeout while seemingly online). Amber, not red
 * (it's a state, not an error); slides down under the safe-area inset; the pulsing
 * dot reads as "still trying". pointer-events:none so it never blocks taps. */
/* (the persistent .net-banner was removed — offline is a first-class state now;
   main.js shows a brief one-time toast instead, and online-only features gate
   themselves contextually.) */

/* Welcome card — one-time "welcome to the new Math Workout" on the migrated app. */
.welcome-ov { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: calc(24 * var(--u)); background: rgba(8,12,24,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .22s ease; }
.welcome-ov.in { opacity: 1; }
.welcome-card { max-width: calc(380 * var(--u)); width: 100%; text-align: center;
  padding: calc(26 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u));
  transform: translateY(calc(12 * var(--u))) scale(.97); transition: transform .25s ease; }
.welcome-ov.in .welcome-card { transform: none; }
.welcome-coach { width: calc(104 * var(--u)); height: calc(104 * var(--u)); margin: 0 auto calc(4 * var(--u)); }
.welcome-logo { font-weight: 900; font-size: calc(26 * var(--u)); letter-spacing: .04em; margin-bottom: calc(10 * var(--u)); }
.welcome-title { font-weight: 900; font-size: calc(20 * var(--u)); color: var(--text-primary); margin-bottom: calc(8 * var(--u)); }
.welcome-body { font-size: calc(14.5 * var(--u)); line-height: 1.4; color: var(--text-secondary); margin-bottom: calc(18 * var(--u)); }
.welcome-go { min-width: calc(160 * var(--u)); }

/* Self-serve "get my Pro code" recovery dialog (Settings → Pro card) */
.recover-ov { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(10,20,40,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: calc(20 * var(--u)); }
.recover-card { max-width: calc(380 * var(--u)); width: 100%; text-align: center; padding: calc(24 * var(--u)) calc(22 * var(--u)); }
.recover-title { font-weight: 900; font-size: calc(20 * var(--u)); color: var(--text-primary); margin-bottom: calc(8 * var(--u)); }
.recover-body { font-size: calc(14 * var(--u)); line-height: 1.45; color: var(--text-secondary); margin-bottom: calc(14 * var(--u)); }
.recover-email { width: 100%; box-sizing: border-box; padding: calc(12 * var(--u)) calc(14 * var(--u)); font-size: calc(15 * var(--u));
  border: 2px solid color-mix(in srgb, var(--text-secondary) 35%, transparent); border-radius: calc(12 * var(--u));
  background: #fff; color: #15223d; margin-bottom: calc(12 * var(--u)); text-align: center; }
.recover-send { width: 100%; }
.recover-msg { min-height: calc(18 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 800; }
.recover-msg.ok { color: #2E9E5B; }
.recover-msg.err { color: #d23b3b; }
.recover-hint { margin-top: calc(14 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--text-secondary); opacity: .85; line-height: 1.4; }