/*
 * 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); }
.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-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-arabic body,
html.loc-font-devanagari body, html.loc-font-bengali body { font-family: var(--i18n-font); }

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

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

.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(22 * var(--u)); padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(32 * 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)); }
.score-stat-value.danger { color: #E53935; }
.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 .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%; }

/* ---- 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); }
.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; }
.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(14 * var(--u));
  margin-top: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u));
  opacity: 0; transform: translateY(calc(10 * var(--u)));
  transition: opacity .35s ease, transform .35s ease;
}
.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; }
.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; }
.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; }
/* 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; }
.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 */
.ba-reveal { display: flex; flex-direction: column; align-items: center; }
.ba-tier-img { width: calc(150 * var(--u)); height: calc(150 * var(--u)); object-fit: contain; }
.ba-tier-name { font-size: calc(34 * var(--u)); color: var(--accent1); margin-top: calc(6 * var(--u)); }
.ba-age-label { font-weight: 900; font-size: calc(13 * var(--u)); letter-spacing: 0.1em; color: var(--text-secondary); margin-top: calc(10 * var(--u)); }
.ba-age { font-size: calc(72 * var(--u)); color: var(--text-primary); line-height: 1; }
.ba-advice { margin-top: calc(12 * var(--u)); font-size: calc(14 * var(--u)); color: var(--text-secondary); text-align: center; }

/* ---- animated tier reveal (Nintendo-Brain-Age style) ---- */
.ba-anim-stage { position: relative; width: 100%; height: calc(162 * 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)); }
.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(320 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * 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(4 * var(--u)); }
.share-opt { width: 100%; text-decoration: none; }
.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)); }