/* =====================================================================
   DAILY BRAIN TEST — style.css
   ---------------------------------------------------------------------
   One organised stylesheet. Colours, fonts and sizes live in the
   "design tokens" at the top, so changing a colour there changes it
   everywhere.

   Sections:
      1. Design tokens (CSS custom properties)
      2. Page basics
      3. Shared building blocks: buttons, glass, chips
      4. Screens and transitions
      5. Title screen
      6. Game screen: HUD (timer, score, rank)
      7. Game screen: question card and answer buttons
      8. Question types (one block each)
      9. Celebrations: pops, banners, countdown, rank-up, toast
     10. Results screen
     11. Dialogs (stats, help, quit)
     12. Brain mascot
     13. Intensity stages (Calm → Legendary)
     14. Bigger screens (tablet / desktop)
     15. Animations (keyframes)
     16. Reduced motion
   ===================================================================== */

/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('assets/fonts/fredoka-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url('assets/fonts/nunito-latin.woff2') format('woff2');
}

@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --font-display: 'Fredoka', 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ink: #241A4D;            /* main text */
  --ink-soft: #5E5590;       /* secondary text */
  --outline: #2B1380;        /* chunky outline on big titles */
  --outline-deep: #1B0B5A;
  --paper: #FFFFFF;
  --paper-2: #F4F1FF;
  --lilac: #E6E0FF;

  --good: #22C55E; --good-light: #6EF29B; --good-dark: #15803D;
  --bad: #FF4D5E;  --bad-light: #FF8A95;  --bad-dark: #C81E35;
  --gold: #FFB800; --gold-light: #FFE27A; --gold-dark: #C98700;

  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius: 20px;
  --radius-sm: 14px;

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --card-shadow:
    inset 0 2px 0 #FFFFFF,
    0 8px 0 rgba(36, 26, 77, .16),
    0 28px 44px -16px rgba(20, 8, 70, .6);

  --cat: #6457FF; --cat-dark: #4436D6; --cat-soft: #E9E7FF;   /* replaced per question */
  --accent: #7CF3FF;                                         /* replaced per stage */
}

/* =====================================================================
   2. PAGE BASICS
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { width: 100%; height: 100%; min-height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(160deg, #36B4FF, #5A4BF5);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
@supports (height: 100dvh) {
  html, body { height: 100dvh; min-height: 100dvh; }
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
:focus-visible { outline: 4px solid #FFE45C; outline-offset: 3px; border-radius: 12px; }
h1, h2, h3, p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; display: block; }
.noscript { position: fixed; inset: 40% 10% auto; z-index: 99; padding: 20px; border-radius: 20px; background: #fff; text-align: center; }
.startup-state {
  position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 28px; color: #fff; text-align: center; font-family: var(--font-display); font-size: 22px;
  background: linear-gradient(160deg, #36B4FF, #5A4BF5);
}
.startup-state > span:first-child { font-size: 64px; }
.startup-state.is-error strong { font-size: 28px; }
.startup-state.is-error span { max-width: 520px; font-family: var(--font-body); font-size: 17px; }
body:not(.is-loading) #loading-state { display: none; }
.storage-status {
  width: 100%; padding: 9px 12px; border-radius: 14px; color: #5D3100; background: #FFF0B8;
  font-size: 13px; line-height: 1.35; text-align: center; box-shadow: inset 0 0 0 2px #F2C94C;
}

/* =====================================================================
   3. SHARED BUILDING BLOCKS
   ===================================================================== */

/* ---- Chunky 3D "squishy" button ---- */
.btn {
  --b1: #6CF59A; --b2: #1FBF5A; --b3: #128A3E; --glow: rgba(18, 138, 62, .45);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 58px; padding: 0 22px;
  border: 0; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .01em;
  color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  background: linear-gradient(180deg, var(--b1), var(--b2));
  box-shadow: 0 6px 0 var(--b3), 0 14px 24px -8px var(--glow), inset 0 2px 0 rgba(255, 255, 255, .45);
  transition: transform .12s ease-out, box-shadow .12s ease-out, filter .2s;
}
.btn::before {             /* glossy highlight on the top half */
  content: ''; position: absolute; z-index: -1; left: 8px; right: 8px; top: 4px; height: 46%;
  border-radius: 14px 14px 40px 40px / 14px 14px 18px 18px;
  background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .06));
  pointer-events: none;
}
@media (hover: hover) { .btn:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 8px 0 var(--b3), 0 18px 28px -8px var(--glow), inset 0 2px 0 rgba(255, 255, 255, .45); } }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--b3), 0 4px 10px -4px var(--glow), inset 0 2px 0 rgba(255, 255, 255, .45); transition-duration: .05s; }
.btn-green { --b1: #6CF59A; --b2: #1FBF5A; --b3: #128A3E; --glow: rgba(18, 138, 62, .5); }
.btn-blue  { --b1: #6CB4FF; --b2: #2F7BFF; --b3: #1A55C9; --glow: rgba(26, 85, 201, .5); }
.btn-red   { --b1: #FF8A95; --b2: #FF4D5E; --b3: #C81E35; --glow: rgba(200, 30, 53, .45); }
.btn-gold  { --b1: #FFE88A; --b2: #FFB800; --b3: #C98700; --glow: rgba(201, 135, 0, .5); color: #4A2A00; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.btn-white { --b1: #FFFFFF; --b2: #ECE7FF; --b3: #B9AEE8; --glow: rgba(36, 26, 77, .35); color: var(--ink); text-shadow: none; }
.btn-xl { min-height: 68px; font-size: 23px; border-radius: 24px; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.btn-row .btn { font-size: 18px; padding: 0 12px; }

/* ---- Round glassy icon button ---- */
.icon-btn {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .22); color: #fff; font-size: 21px; line-height: 1;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 4px 0 rgba(20, 0, 80, .2), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .12s, background .2s;
}
.icon-btn.small { width: 40px; height: 40px; font-size: 17px; font-weight: 900; }
.icon-btn:active { transform: translateY(3px) scale(.95); }
@media (hover: hover) { .icon-btn:hover { background: rgba(255, 255, 255, .34); } }
.mute-btn { position: fixed; z-index: 70; top: max(12px, env(safe-area-inset-top)); right: 12px; }
.mute-off { display: none; }
body.is-muted .mute-on { display: none; }
body.is-muted .mute-off { display: inline; }

/* ---- Glass pill buttons on the title screen ---- */
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px;
  border-radius: 999px; border: 2px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .2); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 4px 0 rgba(20, 0, 80, .2), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .12s;
}
.chip-btn:active { transform: translateY(3px); }

/* ---- Frosted white card ---- */
.glass {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(244, 240, 255, .94));
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
}

/* =====================================================================
   4. SCREENS AND TRANSITIONS
   ===================================================================== */
#app { position: fixed; inset: 0; z-index: 1; min-height: 100%; }
.screen {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: max(12px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(1.06);
  transition: opacity .45s ease, transform .7s var(--ease-out), visibility 0s linear .7s;
}
.screen.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .5s ease .12s, transform .8s var(--ease-out) .08s, visibility 0s;
}
.screen.is-leaving {
  visibility: visible; opacity: 0; transform: scale(.9) translateY(-24px);
  transition: opacity .35s ease, transform .5s var(--ease-out), visibility 0s linear .5s;
}
#screen-game.is-shaking .game-col { animation: screen-shake .42s ease-out; }

/* =====================================================================
   5. TITLE SCREEN
   ===================================================================== */
.title-layout {
  width: 100%; max-width: 460px; min-height: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 4px 0 8px;
}
.title-top {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-right: 56px;     /* room for the mute button */
}
.streak-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px 0 10px;
  border-radius: 999px; color: #fff; border: 2px solid rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, #FFB547, #FF6A00);
  box-shadow: 0 4px 0 #C2410C, 0 10px 22px -6px rgba(255, 106, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .5);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.streak-chip b { font-size: 21px; }
.streak-chip .flame { font-size: 22px; display: inline-block; animation: flame-flicker 1.1s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.streak-chip.is-cold { background: linear-gradient(180deg, #A9B6D6, #7484AE); box-shadow: 0 4px 0 #56638A, inset 0 2px 0 rgba(255, 255, 255, .5); }
.streak-chip.is-cold .flame { filter: grayscale(1); animation: none; opacity: .8; }
.streak-label { font-size: 13px; opacity: .95; }
.freeze { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .3); font-size: 14px; }
.freeze b { font-size: 14px; }

.title-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-glow {
  position: absolute; left: 50%; top: 70px; width: 300px; height: 300px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 45%, transparent 70%);
  animation: glow-breathe 4s ease-in-out infinite;
}
.hero-glow::after {          /* slowly turning light rays */
  content: ''; position: absolute; inset: -40px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .16) 0 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%);
  animation: spin-plain 30s linear infinite;
}
.hero-mascot { position: relative; width: 168px; height: 196px; margin-bottom: -18px; }
.logo { position: relative; display: flex; flex-direction: column; align-items: center; line-height: .88; z-index: 2; }
.logo-ribbon {
  position: relative; z-index: 2; margin-bottom: -2px; padding: 6px 22px 7px;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .28em; text-transform: uppercase;
  color: #4A2A00; background: linear-gradient(180deg, #FFEC99, #FFB800);
  border-radius: 999px; transform: rotate(-4deg);
  box-shadow: 0 4px 0 #C98700, 0 10px 18px -4px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .7);
}
.logo-main {
  position: relative; display: block; padding: 0 6px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(58px, 17vw, 88px); letter-spacing: .01em; white-space: nowrap;
  color: var(--outline);
  -webkit-text-stroke: 14px var(--outline);
  paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--outline-deep), 0 12px 0 #12073F, 0 22px 30px rgba(10, 0, 50, .45);
}
.logo-main::after {          /* the bright gradient letters on top */
  content: attr(data-text); position: absolute; inset: 0; padding: 0 6px;
  -webkit-text-stroke: 0; text-shadow: none;
  color: transparent;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 42%, #FFF3B0 58%, #FFC93C 100%);
  -webkit-background-clip: text; background-clip: text;
}
.date-pill {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px;
  border-radius: 999px; color: #fff; font-weight: 800; font-size: 15px;
  background: rgba(30, 10, 90, .25); border: 2px solid rgba(255, 255, 255, .3);
}
.brand-promise {
  margin-top: 9px; color: rgba(255, 255, 255, .92); font-family: var(--font-display); font-size: 13px;
  font-weight: 600; letter-spacing: .06em; text-shadow: 0 2px 5px rgba(20, 0, 70, .28);
}
.brand-promise span { color: #FFE27A; }

.title-card {
  width: 100%; padding: 18px;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .35s var(--ease-out);
  animation: rise-in .8s var(--spring) .15s both;
}
.title-card::after, .q-card::after {   /* soft light glare that follows the mouse */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 0%), rgba(255, 255, 255, .55), transparent 55%);
  opacity: 0; transition: opacity .3s;
}
@media (hover: hover) and (pointer: fine) { .title-card:hover::after, .q-card:hover::after { opacity: .7; } }
#title-fresh, #title-done { display: grid; gap: 12px; }
.challenge-invite {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 11px 14px;
  border: 2px solid rgba(255, 255, 255, .5); border-radius: 18px; color: #fff;
  background: linear-gradient(110deg, rgba(255, 196, 57, .28), rgba(124, 92, 255, .28));
  text-align: left;
}
.challenge-invite > span { flex: none; font-size: 25px; }
.challenge-invite b { font-family: var(--font-display); font-size: 16px; }
.challenge-invite p { margin: 2px 0 0; font-size: 12px; font-weight: 800; line-height: 1.35; }
.btn-play {
  min-height: 76px; font-size: 25px; border-radius: 26px;
  --b1: #7CFFA8; --b2: #1FC75E; --b3: #0F8A3D;
  animation: play-breathe 2.4s ease-in-out infinite;
}
.btn-play::after {            /* shine that sweeps across */
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 60px; left: -90px; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: skewX(-18deg); animation: shine-sweep 3.2s ease-in-out 1s infinite;
}
.btn-icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: #1FBF5A; font-size: 18px; text-shadow: none; padding-left: 3px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
.title-sub { text-align: center; color: var(--ink-soft); font-size: 13.5px; font-weight: 800; }
.done-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, #ECFDF3, #D1FAE0); box-shadow: inset 0 0 0 2px #A7F3C4; }
.done-check { font-size: 32px; }
.done-label { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--good-dark); }
.done-score { font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.done-score b { font-size: 30px; }
.next-test { text-align: center; font-weight: 800; font-size: 14px; color: var(--ink-soft); }
.next-test b { font-variant-numeric: tabular-nums; color: var(--ink); }
.next-test.on-dark, .next-test.on-dark b { color: #fff; }

.how-tiles { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.how-tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px 10px;
  border-radius: 20px; text-align: center; color: #fff;
  background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: rise-in .7s var(--spring) both;
}
.how-tile:nth-child(1) { animation-delay: .3s; }
.how-tile:nth-child(2) { animation-delay: .4s; }
.how-tile:nth-child(3) { animation-delay: .5s; }
.how-ico { font-size: 28px; margin-bottom: 2px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .15)); }
.how-tile b { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.how-tile small { font-size: 12px; font-weight: 800; opacity: .88; }
/* After today's test the how-to tiles step aside to keep the screen tidy */
.title-layout:has(#title-fresh[hidden]) .how-tiles { display: none; }
.title-layout:has(#title-fresh[hidden]) .hero-mascot { width: 140px; height: 163px; margin-bottom: -16px; }
.best-line { color: #fff; font-weight: 800; font-size: 14px; opacity: .95; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }

/* Honest, local-only preview of a future opt-in leaderboard. */
.leader-preview {
  width: 100%; padding: 14px; border-radius: 24px; text-align: left; color: var(--ink);
  box-shadow: 0 7px 0 rgba(36, 26, 77, .16), 0 20px 34px -18px rgba(20, 8, 70, .55), inset 0 2px 0 #fff;
}
.leader-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.leader-preview-head h2 { font-family: var(--font-display); font-size: 19px; line-height: 1; }
.eyebrow { display: block; margin-bottom: 3px; color: #705CE8; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.preview-chip { padding: 4px 9px; border-radius: 999px; color: #fff; background: #6C55E8; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.leader-row { display: grid; grid-template-columns: 28px 38px 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 16px; }
.leader-row.is-you { background: linear-gradient(100deg, #EEE9FF, #FFF5D5); box-shadow: inset 0 0 0 2px rgba(108, 85, 232, .15); }
.leader-place { text-align: center; color: var(--ink-soft); font-family: var(--font-display); font-size: 18px; }
.leader-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; font-size: 20px; box-shadow: 0 3px 0 #D2C8F4; }
.leader-person, .leader-points { display: flex; flex-direction: column; min-width: 0; }
.leader-person b { font-family: var(--font-display); font-size: 15px; }
.leader-person small, .leader-points small { color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.leader-points { text-align: right; }
.leader-points b { font-family: var(--font-display); font-size: 21px; line-height: 1; color: #4D36C8; }
.leader-locked { margin-top: 8px; color: var(--ink-soft); font-size: 11px; text-align: center; }

/* =====================================================================
   6. GAME SCREEN: HUD
   ===================================================================== */
.game-layout { width: 100%; max-width: 560px; min-height: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.side-left, .side-right { display: none; }
.game-col { display: flex; flex-direction: column; min-width: 0; min-height: 100%; }
.hud { position: relative; z-index: 5; padding-right: 54px; }
.hud-row { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.hud-mascot { width: 50px; height: 56px; flex: none; margin: -4px 0 -6px; }
.hud-mid { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.stage-pill {
  padding: 3px 10px; border-radius: 999px; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; white-space: nowrap;
  background: rgba(20, 0, 70, .25); border: 1.5px solid rgba(255, 255, 255, .35);
}
.q-counter { color: rgba(255, 255, 255, .9); font-weight: 900; font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
.mode-badge {
  padding: 3px 9px; border-radius: 999px; background: linear-gradient(180deg, #FFEC99, #FFB800); color: #4A2A00;
  font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; box-shadow: 0 2px 0 #C98700;
}
.score-box {
  flex: none; min-width: 78px; padding: 4px 12px 6px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, #FFFFFF, #EAE4FF);
  box-shadow: 0 5px 0 rgba(36, 26, 77, .28), 0 12px 22px -8px rgba(0, 0, 0, .45), inset 0 2px 0 #fff;
}
.score-label { display: block; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.score-num { display: block; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.score-num.is-bumping { animation: bump .5s var(--spring); }

.timer { --hue: 140; position: relative; display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.timer-num {
  flex: none; min-width: 68px; height: 42px; padding: 0 10px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(20, 0, 70, .3); border: 2px solid rgba(255, 255, 255, .3); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 25px; font-variant-numeric: tabular-nums;
}
.timer-ico { font-size: 16px; opacity: .9; }
#time-left { display: inline-block; min-width: 1.3em; text-align: center; }
#time-left.is-ticking { animation: tick-pop .4s var(--spring); }
.timer-track {
  position: relative; flex: 1; height: 26px; border-radius: 999px; overflow: hidden;
  background: rgba(15, 0, 50, .38); border: 3px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .35), 0 4px 0 rgba(20, 0, 70, .2);
}
.timer-fill {
  position: relative; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(180deg, hsl(var(--hue) 95% 66%), hsl(var(--hue) 85% 45%));
  box-shadow: 0 0 18px hsl(var(--hue) 95% 55% / .8);
  transition: width .2s linear;
}
.timer-fill::before {        /* moving candy stripes */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .18) 0 10px, transparent 10px 20px);
  background-size: 28px 28px; animation: stripes 1s linear infinite;
}
.timer-gloss { position: absolute; left: 10px; right: 10px; top: 3px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .45); pointer-events: none; }
.timer.is-low .timer-track { animation: danger-pulse .8s ease-in-out infinite; }
.timer.is-low .timer-num { background: rgba(200, 20, 50, .65); animation: danger-num .8s ease-in-out infinite; }
.timer.is-paused .timer-fill { filter: brightness(1.06); }
.timer.is-paused .timer-fill::before { animation-play-state: paused; }
.timer.is-overflow .timer-fill { background: linear-gradient(90deg, #6CF59A, #5CE1FF, #B78CFF, #FFD84D, #6CF59A); background-size: 300% 100%; animation: rainbow 2.5s linear infinite; }
.timer.is-boosted .timer-track { animation: boost-flash .6s ease-out; }
.paused-tag {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 2;
  padding: 1px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: 11px; font-weight: 900; letter-spacing: .05em; pointer-events: none;
}
.bonus-layer { position: absolute; right: 0; top: 0; width: 1px; height: 1px; pointer-events: none; z-index: 3; }
.bonus {
  position: absolute; right: 6px; top: -4px; padding: 2px 12px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff;
  background: linear-gradient(180deg, #6CF59A, #18B663); box-shadow: 0 4px 0 #0E8A49, 0 0 20px rgba(108, 245, 154, .7);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  animation: bonus-float 1.15s var(--ease-out) forwards;
}
.bonus-7 { font-size: 25px; background: linear-gradient(180deg, #FFE27A, #FF9F1C); box-shadow: 0 4px 0 #C26A00, 0 0 24px rgba(255, 180, 0, .8); }
.bonus-8 { font-size: 28px; background: linear-gradient(180deg, #FF9AE0, #FF4FA3); box-shadow: 0 4px 0 #C2186B, 0 0 30px rgba(255, 79, 163, .9); }

.rank-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; color: #fff; font-weight: 800; font-size: 12.5px; }
.rank-now, .rank-next { white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.rank-track { flex: 1; min-width: 40px; height: 10px; border-radius: 999px; background: rgba(15, 0, 50, .3); overflow: hidden; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3); }
.rank-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #FFE27A, #FFB800); box-shadow: 0 0 10px rgba(255, 210, 60, .9); transition: width .7s var(--spring); }
.streak-badge {
  padding: 2px 10px; border-radius: 999px; white-space: nowrap; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  background: linear-gradient(180deg, #FFB547, #FF5E00); box-shadow: 0 3px 0 #B43C00;
}
.streak-badge.is-bumping { animation: bump .45s var(--spring); }
.streak-badge[data-level="2"] { background: linear-gradient(180deg, #FF8A3D, #FF2E2E); box-shadow: 0 3px 0 #A01010, 0 0 16px rgba(255, 90, 0, .8); }
.streak-badge[data-level="3"] { background: linear-gradient(180deg, #FFE45C, #FF4FA3); color: #fff; box-shadow: 0 3px 0 #B0186B, 0 0 22px rgba(255, 79, 163, .95); animation: hot-glow 1s ease-in-out infinite alternate; }

/* =====================================================================
   7. QUESTION CARD AND ANSWER BUTTONS
   ===================================================================== */
.stage-area {                /* the question sits in the middle of the free space */
  position: relative; flex: 1; display: grid; align-content: center;
  margin-top: 14px; padding-bottom: max(8px, 4vh);
}
.q-wrap {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  animation: q-in .6s var(--spring) both;
}
.q-wrap.q-exit { animation: q-out .4s ease-in forwards; pointer-events: none; }

.q-card {
  position: relative; padding: 14px 16px 12px; border-radius: var(--radius-xl);
  border: 4px solid rgba(255, 255, 255, .9);
  background:
    linear-gradient(180deg, var(--cat-soft) 0, #FFFFFF 120px, #F7F4FF 100%) padding-box,
    linear-gradient(180deg, #FFFFFF, #FFFFFF) border-box;
  box-shadow: var(--card-shadow), 0 0 60px -18px var(--cat);
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .3s var(--ease-out), box-shadow .4s;
}
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.q-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px 4px 4px; border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 80%, #fff), var(--cat));
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 15px; text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  box-shadow: 0 3px 0 var(--cat-dark), inset 0 1px 0 rgba(255, 255, 255, .45);
  animation: chip-in .5s var(--spring) .1s both;
}
.q-chip-emoji { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .92); font-size: 16px; text-shadow: none; }
.q-level { color: var(--cat); font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.q-prompt {
  margin: 12px 2px 12px; text-align: center; outline: none;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 6.2vw, 29px); line-height: 1.18;
  color: var(--ink); text-wrap: balance; overflow-wrap: anywhere;
}
.q-mark { color: var(--cat-dark); background: linear-gradient(transparent 60%, color-mix(in srgb, var(--cat) 28%, transparent) 60%); padding: 0 2px; font-weight: 700; }
.q-play { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.q-play:empty { display: none; }
.q-feedback {
  min-height: 22px; margin-top: 12px; text-align: center; font-weight: 800; font-size: 15px; line-height: 1.35;
  color: var(--ink-soft); opacity: 0;
}
.q-feedback.is-showing { opacity: 1; animation: fb-in .45s var(--spring); }
.q-feedback[data-ok="true"] { color: var(--good-dark); }
.q-feedback[data-ok="false"] { color: var(--bad-dark); }
.q-choices { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choices.is-odd-count .choice:last-child { grid-column: 1 / -1; }
.choice {
  position: relative; min-height: 70px; padding: 10px 24px; border: 0; border-radius: var(--radius);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #F0ECFF 100%);
  color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 23px; line-height: 1.15;
  overflow-wrap: anywhere;
  box-shadow:
    0 6px 0 color-mix(in srgb, var(--cat) 50%, #B9AEE8),
    0 14px 22px -10px rgba(20, 8, 70, .55),
    inset 0 2px 0 #FFFFFF, inset 0 -3px 0 rgba(36, 26, 77, .05);
  transition: transform .12s ease-out, box-shadow .12s ease-out, opacity .3s, filter .3s;
  animation: choice-in .55s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.choice-key {
  position: absolute; top: 7px; left: 8px; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 7px; background: var(--cat-soft); color: var(--cat-dark); font-family: var(--font-body); font-size: 11px; font-weight: 900;
}
@media (hover: none) { .choice-key, .pad-key { display: none; } }
@media (hover: hover) { .choice:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 9px 0 color-mix(in srgb, var(--cat) 55%, #B9AEE8), 0 18px 26px -10px rgba(20, 8, 70, .55), inset 0 2px 0 #fff; } }
.choice:not(:disabled):active { transform: translateY(6px) scale(.98); box-shadow: 0 0 0 color-mix(in srgb, var(--cat) 50%, #B9AEE8), 0 4px 10px -6px rgba(20, 8, 70, .5), inset 0 2px 0 #fff; transition-duration: .05s; }
.choice.is-correct {
  background: linear-gradient(180deg, var(--good-light), var(--good)); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .15);
  box-shadow: 0 6px 0 var(--good-dark), 0 0 0 4px rgba(255, 255, 255, .85), 0 0 34px rgba(34, 197, 94, .75);
  animation: correct-pop .55s var(--spring) both;
}
.choice.is-wrong {
  background: linear-gradient(180deg, var(--bad-light), var(--bad)); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .15);
  box-shadow: 0 6px 0 var(--bad-dark), 0 0 0 4px rgba(255, 255, 255, .85);
  animation: wrong-shake .5s ease-out both;
}
.choice.is-correct::after, .choice.is-wrong::after {
  position: absolute; top: -10px; right: -8px; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: #fff; font-size: 17px; font-weight: 900; text-shadow: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15); animation: badge-pop .45s var(--spring) .1s both;
}
.choice.is-correct::after { content: '✓'; color: var(--good-dark); }
.choice.is-wrong::after { content: '✕'; color: var(--bad-dark); }
.choice.is-dim { opacity: .45; filter: saturate(.5); transform: scale(.96); }
.choice:disabled .choice-key { opacity: 0; }
.choices.is-emoji .choice-label { font-size: 36px; }
.choices.is-collapsed { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.choices.is-collapsed .choice { min-height: 54px; }
.choices.is-collapsed .choice:not(.is-correct):not(.is-wrong) { display: none; }
.q-wrap[data-type="people"] .choice, .q-wrap[data-type="logic"] .choice { font-size: 19px; min-height: 60px; }
.q-wrap[data-type="wordOdd"] .choice { font-size: 21px; }

/* =====================================================================
   8. QUESTION TYPES
   ===================================================================== */

/* ---- Quick Maths ---- */
.equation {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 4px 0 8px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 13vw, 64px); line-height: 1.05; color: var(--ink);
}
.eq-num { animation: tile-in .5s var(--spring) both; }
.eq-num:nth-child(3) { animation-delay: .12s; }
.eq-op { color: var(--cat); }
.eq-unknown {
  min-width: 1.35em; padding: 0 .18em; border-radius: 18px; text-align: center;
  color: var(--cat); background: var(--cat-soft); border: 4px dashed var(--cat);
  animation: unknown-pulse 1.4s ease-in-out infinite;
}
.eq-unknown.is-good, .seq-unknown.is-good { color: #fff; border: 4px solid #fff; background: linear-gradient(180deg, var(--good-light), var(--good)); box-shadow: 0 5px 0 var(--good-dark); animation: correct-pop .5s var(--spring); }
.eq-unknown.is-bad, .seq-unknown.is-bad { color: #4A2A00; border: 4px solid #fff; background: linear-gradient(180deg, var(--gold-light), var(--gold)); box-shadow: 0 5px 0 var(--gold-dark); animation: badge-pop .5s var(--spring); }   /* shows the right answer */

/* ---- True or False ---- */
.tf-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.tf-card {
  --yes: 0; --no: 0;
  position: relative; width: min(100%, 330px); padding: 30px 16px; border-radius: 26px; text-align: center;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 50%), linear-gradient(140deg, var(--cat), var(--cat-dark));
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 10vw, 48px); line-height: 1.1;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .2);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--cat-dark) 75%, #000), 0 22px 34px -12px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .4);
  touch-action: pan-y; cursor: grab;
  transition: transform .45s var(--spring), box-shadow .3s;
  animation: card-deal .6s var(--spring) both;
}
.tf-card.is-dragging { cursor: grabbing; transition: none; }
.tf-stamp {
  position: absolute; top: 10px; padding: 3px 10px; border-radius: 10px; border: 3px solid #fff;
  font-size: 15px; letter-spacing: .1em; text-shadow: none; pointer-events: none;
}
.tf-stamp-yes { right: 12px; background: var(--good); transform: rotate(12deg); opacity: var(--yes); }
.tf-stamp-no { left: 12px; background: var(--bad); transform: rotate(-12deg); opacity: var(--no); }
.tf-card.went-right { transform: translateX(26px) rotate(5deg); }
.tf-card.went-left { transform: translateX(-26px) rotate(-5deg); }
.tf-card.went-right .tf-stamp-yes, .tf-card.went-left .tf-stamp-no { opacity: 1; animation: stamp .4s var(--spring); }
.tf-card.is-good { box-shadow: 0 8px 0 var(--good-dark), 0 0 0 5px #fff, 0 0 40px rgba(34, 197, 94, .8); }
.tf-card.is-bad { box-shadow: 0 8px 0 var(--bad-dark), 0 0 0 5px #fff, 0 0 40px rgba(255, 77, 94, .8); }
.tf-hint { font-size: 13px; font-weight: 900; color: var(--ink-soft); opacity: .75; letter-spacing: .06em; }
.tf-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tf-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 78px; border: 0; border-radius: 24px;
  font-family: var(--font-display); font-weight: 700; font-size: 23px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  transition: transform .12s, box-shadow .12s, opacity .3s;
  animation: choice-in .55s var(--spring) both;
}
.tf-no { background: linear-gradient(180deg, var(--bad-light), var(--bad)); box-shadow: 0 7px 0 var(--bad-dark), 0 14px 22px -10px rgba(200, 30, 53, .7), inset 0 2px 0 rgba(255, 255, 255, .45); }
.tf-yes { background: linear-gradient(180deg, var(--good-light), var(--good)); box-shadow: 0 7px 0 var(--good-dark), 0 14px 22px -10px rgba(21, 128, 61, .7), inset 0 2px 0 rgba(255, 255, 255, .45); animation-delay: .07s; }
.tf-btn:not(:disabled):active { transform: translateY(6px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.tf-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-size: 22px; text-shadow: none; box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.tf-no .tf-ico { color: var(--bad); }
.tf-yes .tf-ico { color: var(--good); }
.tf-btn.is-dim { opacity: .35; transform: scale(.95); }
.tf-btn.is-correct { box-shadow: 0 7px 0 rgba(0, 0, 0, .25), 0 0 0 4px #fff, 0 0 30px rgba(34, 197, 94, .8); animation: correct-pop .5s var(--spring); }
.tf-btn.is-wrong { box-shadow: 0 7px 0 rgba(0, 0, 0, .25), 0 0 0 4px #fff; animation: wrong-shake .5s; }

/* ---- Memory Flip ---- */
.preview-bar { position: relative; width: 100%; height: 32px; border-radius: 999px; overflow: hidden; background: var(--cat-soft); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .12); }
.preview-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 75%, #fff), var(--cat)); transform-origin: left; animation: drain var(--ms, 3000ms) linear forwards; }
.preview-label { position: relative; display: grid; place-items: center; height: 100%; color: #fff; font-weight: 900; font-size: 14px; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.target-bubble {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 6px 5px 18px; border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 80%, #fff), var(--cat)); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 18px; box-shadow: 0 4px 0 var(--cat-dark);
}
.target-bubble.is-popping { animation: badge-pop .5s var(--spring); }
.target-emoji { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; font-size: 30px; }
.mem-grid {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; width: 100%; perspective: 900px;
  /* As wide as possible, but short enough that every row fits on screen */
  max-width: min(400px, max(220px, calc((100vh - 420px) * var(--cols) / var(--rows, 3) / 1.12)));
}
@supports (height: 100dvh) {
  .mem-grid { max-width: min(400px, max(220px, calc((100dvh - 420px) * var(--cols) / var(--rows, 3) / 1.12))); }
}
.mem-card { position: relative; aspect-ratio: 1 / 1.08; padding: 0; border: 0; background: none; border-radius: 18px; animation: card-deal .5s var(--spring) both; animation-delay: var(--d, 0ms); }
.mem-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .5s var(--spring); transition-delay: var(--d, 0ms); }
.mem-card.is-up .mem-inner { transform: rotateY(0deg); transition-delay: 0ms; }
.mem-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.mem-front { background: linear-gradient(180deg, #FFFFFF, #F1EDFF); font-size: clamp(28px, 8.5vw, 44px); box-shadow: 0 5px 0 #D2C8F5, inset 0 0 0 3px #fff; }
.mem-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 6px, transparent 6px 14px),
    linear-gradient(160deg, color-mix(in srgb, var(--cat) 80%, #fff), var(--cat-dark));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--cat-dark) 70%, #000), inset 0 2px 0 rgba(255, 255, 255, .45);
}
.mem-back::after { content: '?'; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 7vw, 34px); color: rgba(255, 255, 255, .95); text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
@media (hover: hover) { .mem-card:not(:disabled):hover .mem-inner { transform: rotateY(180deg) translateZ(0) translateY(-4px); } }
.mem-card.is-match .mem-front { background: linear-gradient(180deg, #ECFDF3, #BBF7D0); box-shadow: 0 5px 0 var(--good), 0 0 0 4px var(--good), 0 0 24px rgba(34, 197, 94, .6); }
.mem-card.is-miss .mem-front { background: linear-gradient(180deg, #FFF1F2, #FFC9CF); box-shadow: 0 5px 0 var(--bad), 0 0 0 4px var(--bad); animation: wrong-shake .5s; }
.mem-card.is-target:not(.is-match) .mem-front { box-shadow: 0 5px 0 var(--good), 0 0 0 4px var(--good), 0 0 26px rgba(34, 197, 94, .8); animation: glow-pulse 1s ease-in-out infinite; }

/* ---- Pattern Echo ---- */
.echo-status {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 8px 14px; border-radius: 999px; background: var(--cat-soft); color: var(--cat-dark); font-weight: 900; font-size: 14px;
  transition: background .3s, color .3s;
}
.echo-status.is-go { background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 80%, #fff), var(--cat)); color: #fff; animation: badge-pop .5s var(--spring); }
.echo-dots { display: flex; gap: 6px; }
.echo-dot { width: 13px; height: 13px; border-radius: 50%; background: rgba(36, 26, 77, .15); transition: background .2s, transform .2s; }
.is-go .echo-dot { background: rgba(255, 255, 255, .35); }
.echo-dot.is-shown { background: var(--cat); transform: scale(1.2); }
.echo-dot.is-done { background: #fff; box-shadow: 0 0 0 2px var(--good); transform: scale(1.15); }
.echo-dot.is-bad { background: var(--bad); }
.pad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(100%, 320px); aspect-ratio: 1; padding: 6px; }
.pad {
  --pc: #FF4D5E; --pl: #FFA3AD; --pd: #B8162D;
  position: relative; border: 0; padding: 0; border-radius: 24px;
  background: radial-gradient(circle at 35% 28%, var(--pl), var(--pc) 68%);
  box-shadow: 0 8px 0 var(--pd), inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -12px 22px rgba(0, 0, 0, .14);
  filter: saturate(.8) brightness(.88);
  transition: transform .1s, filter .12s, box-shadow .12s;
  animation: card-deal .5s var(--spring) both;
}
.pad-0 { --pl: #FF8E99; border-radius: 90px 24px 24px 24px; }
.pad-1 { --pc: #2F7BFF; --pl: #9CC8FF; --pd: #1546B0; border-radius: 24px 90px 24px 24px; animation-delay: .06s; }
.pad-2 { --pc: #1FBF5A; --pl: #8EF0B2; --pd: #0E7A37; border-radius: 24px 24px 24px 90px; animation-delay: .12s; }
.pad-3 { --pc: #FFB800; --pl: #FFE58F; --pd: #B87800; border-radius: 24px 24px 90px 24px; animation-delay: .18s; }
.pad-key { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .85); font-weight: 900; font-size: 14px; }
.pad.is-lit { filter: saturate(1.25) brightness(1.3); transform: scale(1.05); box-shadow: 0 8px 0 var(--pd), 0 0 0 6px rgba(255, 255, 255, .85), 0 0 50px 12px var(--pl), inset 0 3px 0 rgba(255, 255, 255, .6); }
.pad:not(:disabled):active { transform: translateY(6px); box-shadow: 0 2px 0 var(--pd), inset 0 3px 0 rgba(255, 255, 255, .45); }
.pad.is-wrong { animation: wrong-shake .5s; filter: grayscale(.4); }
.pad.is-hint { animation: hint-blink .45s ease-in-out 4; }
.pad-grid.is-win .pad { animation: win-bounce .6s var(--spring) both; filter: saturate(1.2) brightness(1.15); }
.pad-grid.is-win .pad-1 { animation-delay: .06s; }
.pad-grid.is-win .pad-2 { animation-delay: .12s; }
.pad-grid.is-win .pad-3 { animation-delay: .18s; }

/* ---- Patterns: sequences ---- */
.seq-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 4px 0 6px; }
.seq-tile {
  display: grid; place-items: center; min-width: 44px; height: 58px; padding: 0 6px; border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF, #F0ECFF); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 25px; font-variant-numeric: tabular-nums;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--cat) 45%, #C9C0F0), inset 0 2px 0 #fff;
  animation: tile-in .5s var(--spring) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms);
}
.seq-row.is-emoji .seq-tile { font-size: 27px; }
.seq-unknown { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 80%, #fff), var(--cat)); box-shadow: 0 5px 0 var(--cat-dark); }
.seq-unknown:not(.is-good):not(.is-bad) { animation: tile-in .5s var(--spring) both, unknown-pulse 1.4s ease-in-out .9s infinite; animation-delay: calc(var(--i, 0) * 70ms + 80ms), 1s; }

/* ---- Spot the odd one out ---- */
.odd-grid { display: grid; grid-template-columns: repeat(var(--size), minmax(0, 1fr)); gap: 7px; width: 100%; max-width: 380px; }
.odd-cell {
  aspect-ratio: 1; padding: 0; border: 0; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(180deg, #FFFFFF, #F1EDFF); box-shadow: 0 4px 0 #D2C8F5, inset 0 2px 0 #fff;
  font-size: calc(min(380px, 82vw) / var(--size) * .52); line-height: 1;
  transition: transform .12s, opacity .3s;
  animation: pop-in .45s var(--spring) both; animation-delay: var(--d, 0ms);
}
.odd-cell:not(:disabled):active { transform: translateY(3px) scale(.95); }
@media (hover: hover) { .odd-cell:not(:disabled):hover { transform: translateY(-2px); } }
.odd-emoji { display: inline-block; }
.odd-emoji.is-mirrored { transform: scaleX(-1); }
.odd-cell.is-odd { position: relative; z-index: 2; background: linear-gradient(180deg, #ECFDF3, #BBF7D0); box-shadow: 0 4px 0 var(--good-dark), 0 0 0 4px var(--good), 0 0 26px rgba(34, 197, 94, .85); animation: glow-pulse 1s ease-in-out infinite; }
.odd-cell.is-wrong { background: linear-gradient(180deg, #FFF1F2, #FFC9CF); box-shadow: 0 4px 0 var(--bad-dark), 0 0 0 4px var(--bad); animation: wrong-shake .5s; }
.odd-cell.is-dim { opacity: .3; }

/* ---- Word Unscramble ---- */
.word-hint {
  display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; font-size: 54px;
  background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--cat-soft));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--cat) 40%, #E5DDFB), 0 0 0 6px rgba(255, 255, 255, .8);
  animation: float 3s ease-in-out infinite;
}
.word-slots { display: flex; justify-content: center; gap: 6px; }
.slot {
  display: grid; place-items: center; width: clamp(38px, 11vw, 52px); height: clamp(48px, 13.5vw, 60px); padding: 0;
  border-radius: 14px; border: 3px dashed color-mix(in srgb, var(--cat) 55%, #D5CCF5); background: #FAF8FF;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 7vw, 30px); color: var(--ink);
}
.slot.is-filled { border-style: solid; border-color: var(--cat); background: #fff; box-shadow: 0 4px 0 var(--cat-dark); }
.slot.is-popping { animation: badge-pop .35s var(--spring); }
.word-slots.is-good .slot { color: #fff; border-color: #fff; background: linear-gradient(180deg, var(--good-light), var(--good)); box-shadow: 0 4px 0 var(--good-dark); animation: wave .6s var(--spring) both; }
.word-slots.is-bad .slot { border-color: var(--bad); background: #FFF1F2; color: var(--bad-dark); animation: wrong-shake .5s; }
.word-slots.is-reveal .slot { border-style: solid; border-color: var(--good); background: #ECFDF3; color: var(--good-dark); animation: wave .6s var(--spring) both; }
.word-slots .slot:nth-child(2) { animation-delay: .05s; } .word-slots .slot:nth-child(3) { animation-delay: .1s; }
.word-slots .slot:nth-child(4) { animation-delay: .15s; } .word-slots .slot:nth-child(5) { animation-delay: .2s; }
.word-slots .slot:nth-child(6) { animation-delay: .25s; } .word-slots .slot:nth-child(7) { animation-delay: .3s; }
.word-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tile {
  display: grid; place-items: center; width: clamp(46px, 12.8vw, 60px); height: clamp(54px, 14.5vw, 66px); padding: 0; border: 0;
  border-radius: 16px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 7.5vw, 32px);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .22);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 55%, #FFE9A8), var(--cat));
  box-shadow: 0 6px 0 var(--cat-dark), 0 12px 18px -8px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .55);
  transition: transform .12s, opacity .25s, box-shadow .12s;
  animation: tile-drop .55s var(--spring) both; animation-delay: calc(var(--i, 0) * 55ms + 100ms);
}
.tile:not(:disabled):active { transform: translateY(5px); box-shadow: 0 1px 0 var(--cat-dark); }
.tile.is-used { opacity: .18; transform: scale(.82); box-shadow: none; }
.mini-btn {
  align-self: center; padding: 7px 18px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .22); color: #fff; font-weight: 900; font-size: 14px;
  box-shadow: 0 3px 0 rgba(20, 0, 70, .2);
}

/* ---- Which word doesn't belong ---- */
.play-hint { font-weight: 800; font-size: 14px; color: var(--ink-soft); }

/* ---- Logic ---- */
.clues { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.clue {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px;
  background: var(--cat-soft); border-left: 6px solid var(--cat); color: var(--ink); font-weight: 800; font-size: 17px; line-height: 1.3;
  animation: clue-in .5s var(--spring) both; animation-delay: calc(var(--i, 0) * 110ms + 100ms);
}
.clue-ico { font-size: 20px; flex: none; }

/* ---- Which is more? ---- */
.vs-wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; padding-top: 14px; }
.vs-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 176px; padding: 18px 10px 14px; border: 0; border-radius: 26px;
  background: radial-gradient(circle at 50% 30%, #FFFFFF, #F0ECFF 75%);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--cat) 40%, #C9C0F0), 0 18px 26px -12px rgba(20, 8, 70, .55), inset 0 2px 0 #fff;
  transition: transform .2s var(--spring), opacity .3s, filter .3s, box-shadow .2s;
  animation: vs-left .6s var(--spring) both;
}
.vs-1 { animation-name: vs-right; }
@media (hover: hover) { .vs-card:not(:disabled):hover { transform: translateY(-4px) rotate(-1deg); } .vs-1:not(:disabled):hover { transform: translateY(-4px) rotate(1deg); } }
.vs-card:not(:disabled):active { transform: translateY(5px) scale(.98); }
.vs-emoji { font-size: clamp(56px, 16vw, 72px); line-height: 1; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .18)); }
.vs-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.15; color: var(--ink); text-align: center; }
.vs-badge {
  position: absolute; left: 50%; top: calc(50% + 7px); transform: translate(-50%, -50%); z-index: 3;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(180deg, #FFE27A, #FF8A1F); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 20px; text-shadow: 0 2px 0 rgba(150, 50, 0, .5);
  box-shadow: 0 4px 0 #C2410C, 0 0 0 5px #fff, 0 10px 20px rgba(0, 0, 0, .3);
  animation: vs-pulse 1.3s ease-in-out infinite;
}
.vs-crown { position: absolute; top: -24px; font-size: 38px; opacity: 0; transform: translateY(-16px) scale(.5); pointer-events: none; }
.vs-card.is-winner { background: radial-gradient(circle at 50% 30%, #FFFFFF, #C9F7DA 80%); box-shadow: 0 7px 0 var(--good-dark), 0 0 0 4px var(--good), 0 0 36px rgba(34, 197, 94, .6); transform: scale(1.04); }
.vs-card.is-winner .vs-crown { animation: crown-drop .6s var(--spring) .15s forwards; }
.vs-card.is-loser { opacity: .55; filter: grayscale(.5); transform: scale(.93); }
.vs-card.is-wrong { box-shadow: 0 7px 0 var(--bad-dark), 0 0 0 4px var(--bad); animation: wrong-shake .5s; opacity: .75; }

/* ---- People Reveal ---- */
.person-flip { width: 100%; max-width: 420px; height: 190px; perspective: 1100px; }
.person-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--spring); }
.person-flip.is-flipped .person-inner { transform: rotateY(180deg); }
.person-face {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 24px; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden;
}
.person-front {
  background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .8), transparent 40%), linear-gradient(135deg, #FFF6D6, #FFDB6E);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9), 0 6px 0 #E5A800;
}
.silhouette { flex: none; width: 104px; height: 104px; filter: drop-shadow(0 6px 0 rgba(160, 100, 0, .3)); animation: float 3s ease-in-out infinite; }
.person-clues { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.person-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.person-era, .person-today {
  display: inline-flex; align-items: center; min-height: 23px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; line-height: 1; font-weight: 950; letter-spacing: .025em; color: #fff;
  background: linear-gradient(135deg, #6D4AFF, #A346FF); box-shadow: 0 2px 0 rgba(53, 28, 125, .45);
}
.person-era.is-2000s, .person-era.is-now { background: linear-gradient(135deg, #FF4F91, #FF7A1F); box-shadow: 0 2px 0 rgba(164, 49, 27, .45); }
.person-today { background: linear-gradient(135deg, #087E69, #0FAF83); box-shadow: 0 2px 0 #075E54; }
.person-tag { font-family: var(--font-display); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: #8A5600; }
.clue-chip { padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 900; font-size: 14px; box-shadow: 0 3px 0 #E5A800; }
.clue-chip.is-emoji { font-size: 24px; letter-spacing: 3px; padding: 3px 12px; }
.person-emoji-clues { display: flex; gap: 6px; min-height: 38px; }
.clue-bubble {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 0 #E5A800, 0 5px 12px rgba(138, 86, 0, .18);
  font-size: 21px; opacity: 0; transform: scale(.35) translateY(8px); pointer-events: none;
}
.clue-bubble.is-visible { animation: people-clue-pop .55s var(--spring) both; }
@keyframes people-clue-pop {
  0% { opacity: 0; transform: scale(.35) translateY(8px) rotate(-10deg); }
  70% { opacity: 1; transform: scale(1.14) translateY(-2px) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}
.person-back {
  transform: rotateY(180deg); color: #fff;
  background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .35), transparent 40%), linear-gradient(135deg, #FFB800, #FF7A1F);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), 0 6px 0 #C2560C;
}
.person-icon { flex: none; display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; background: rgba(255, 255, 255, .3); font-size: 48px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6); }
.person-back-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-shadow: 0 1px 2px rgba(120, 50, 0, .35); }
.person-kicker { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; opacity: .95; }
.person-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.1; }
.person-fact { font-size: 14px; font-weight: 800; line-height: 1.32; }
.btn-next { --b1: #FFE88A; --b2: #FFB800; --b3: #C98700; --glow: rgba(201, 135, 0, .5); color: #4A2A00; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); animation: choice-in .5s var(--spring) .3s both; }
.next-fill { position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .45); transform-origin: left; animation: fill-up var(--ms, 3600ms) linear forwards; }
.next-text { position: relative; }

/* =====================================================================
   9. CELEBRATIONS: POPS, BANNERS, COUNTDOWN, RANK-UP, TOAST
   ===================================================================== */
.pop-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.pop {
  position: absolute; transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)); white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 34px; color: #fff;
  -webkit-text-stroke: 7px var(--outline); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--outline-deep), 0 10px 20px rgba(0, 0, 0, .3);
  animation: pop-float 1.05s var(--ease-out) forwards;
}
.pop-good { color: #9CFFBF; }
.pop-bad { color: #FFB3BA; font-size: 28px; }
.combo-pop {
  position: absolute; left: 50%; top: 34%; white-space: nowrap;
  padding: 10px 26px 12px; border-radius: 999px; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 8vw, 40px); color: #fff;
  text-shadow: 0 3px 0 rgba(120, 30, 0, .45);
  background: linear-gradient(180deg, #FFC14D, #FF6A00);
  box-shadow: 0 6px 0 #B43C00, 0 0 0 5px #fff, 0 0 50px rgba(255, 140, 0, .8);
  animation: combo-in 1.45s var(--spring) forwards;
}
.combo-pop[data-level="2"] { background: linear-gradient(180deg, #FF8A3D, #FF2E2E); box-shadow: 0 6px 0 #A01010, 0 0 0 5px #fff, 0 0 60px rgba(255, 60, 0, .9); }
.combo-pop[data-level="3"] { background: linear-gradient(90deg, #FF4FA3, #FF8A1F, #FFD84D, #FF4FA3); background-size: 300% 100%; box-shadow: 0 6px 0 #9D1260, 0 0 0 5px #fff, 0 0 70px rgba(255, 79, 163, .95); animation: combo-in 1.45s var(--spring) forwards, rainbow 1.2s linear infinite; }

.countdown { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, rgba(20, 0, 70, .25), rgba(20, 0, 70, .5)); }
#countdown-num {
  font-family: var(--font-display); font-weight: 700; font-size: min(46vw, 230px); line-height: 1; color: #fff;
  -webkit-text-stroke: 18px var(--outline); paint-order: stroke fill;
  text-shadow: 0 12px 0 var(--outline-deep);
}
#countdown-num.is-popping { animation: count-pop .9s var(--spring) both; }
#countdown-num[data-go="true"] { color: #8CFFB4; font-size: min(34vw, 170px); }

.stage-banner {
  position: fixed; left: 0; right: 0; top: 38%; z-index: 65; display: grid; place-items: center; pointer-events: none;
  opacity: 0; visibility: hidden;
}
.stage-banner.is-showing { visibility: visible; animation: banner-life 1.7s var(--ease-out) forwards; }
.stage-banner-text, #stage-banner-text {
  display: block; padding: 14px 38px 16px; transform: rotate(-3deg) skewX(-6deg);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 9vw, 52px); letter-spacing: .03em; color: #fff;
  text-shadow: 0 4px 0 rgba(40, 0, 90, .5);
  background: linear-gradient(90deg, #6457FF, #FF4FA3);
  border-radius: 20px; box-shadow: 0 8px 0 rgba(30, 0, 80, .45), 0 0 0 5px #fff, 0 0 70px rgba(255, 255, 255, .55);
}
.stage-banner[data-kind="stage-1"] #stage-banner-text { background: linear-gradient(90deg, #FFB800, #FF8A1F); }
.stage-banner[data-kind="stage-2"] #stage-banner-text { background: linear-gradient(90deg, #FF4FA3, #A346FF); }
.stage-banner[data-kind="stage-3"] #stage-banner-text { background: linear-gradient(90deg, #FF3D3D, #FF8A1F); }
.stage-banner[data-kind="stage-4"] #stage-banner-text { background: linear-gradient(90deg, #FFD84D, #FF4FA3, #7C5CFF, #5CE1FF); }
.stage-banner[data-kind="end"] #stage-banner-text { background: linear-gradient(90deg, #FF4D5E, #FF8A1F); }

.rankup {
  --rank: #FFB800;
  position: fixed; inset: 0; z-index: 78; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle, color-mix(in srgb, var(--rank) 55%, transparent), rgba(20, 0, 60, .78) 70%);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.rankup.is-showing { animation: fade-in .3s ease-out; }
.rankup-rays {
  position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .13) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 4%, transparent 38%); mask: radial-gradient(circle, #000 4%, transparent 38%);
  animation: spin 14s linear infinite;
}
.rankup-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #fff; }
.rankup.is-showing .rankup-inner { animation: rank-in .8s var(--spring) both; }
.rankup-kicker {
  padding: 6px 18px; border-radius: 999px; background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .2);
}
.rankup-badge {
  display: grid; place-items: center; width: 170px; height: 170px; border-radius: 50%; font-size: 96px;
  background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--rank) 70%, #fff) 45%, var(--rank));
  box-shadow: 0 10px 0 color-mix(in srgb, var(--rank) 60%, #000), 0 0 0 8px #fff, 0 0 90px 20px color-mix(in srgb, var(--rank) 80%, #fff);
}
.rankup.is-showing .rankup-badge { animation: badge-spin 1s var(--spring) .1s both; }
.rankup-name {
  margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 12vw, 68px); line-height: 1;
  -webkit-text-stroke: 10px var(--outline); paint-order: stroke fill; text-shadow: 0 7px 0 var(--outline-deep);
}
.rankup-sub { font-weight: 800; font-size: 16px; opacity: .92; }

.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 90; max-width: calc(100% - 32px);
  padding: 13px 22px; border-radius: 999px; background: rgba(28, 14, 72, .94); color: #fff; font-weight: 800; font-size: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  transition: transform .5s var(--spring), opacity .3s;
}
.toast.is-showing { transform: translate(-50%, 0); opacity: 1; }

/* =====================================================================
   10. RESULTS SCREEN
   ===================================================================== */
.results-layout { width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 12px; text-align: center; }
.res-col { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.res-kicker { padding: 5px 14px; border-radius: 999px; background: rgba(20, 0, 70, .25); color: #fff; font-weight: 900; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.res-title {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 11vw, 58px); line-height: 1; color: #fff; outline: none;
  -webkit-text-stroke: 10px var(--outline); paint-order: stroke fill; text-shadow: 0 6px 0 var(--outline-deep), 0 14px 24px rgba(0, 0, 0, .3);
  animation: rise-in .7s var(--spring) both;
}
.res-hero { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; }
.res-mascot { width: 128px; height: 150px; margin-right: -14px; z-index: 2; }
.res-score-orb {
  position: relative; display: grid; place-items: center; align-content: center; width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #FFFFFF, #FFF3C4 40%, #FFC93C 85%);
  box-shadow: 0 9px 0 #C98700, 0 0 0 7px #fff, 0 0 0 13px rgba(255, 255, 255, .3), 0 24px 50px -10px rgba(0, 0, 0, .45);
  animation: orb-in .9s var(--spring) .2s both;
}
.res-score-orb::before {
  content: ''; position: absolute; inset: -26px; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .35) 0 10deg, transparent 10deg 24deg);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 58%, transparent 72%); mask: radial-gradient(circle, transparent 55%, #000 58%, transparent 72%);
  animation: spin-plain 18s linear infinite;
}
.res-score { font-family: var(--font-display); font-weight: 700; font-size: 82px; line-height: .9; color: var(--ink); font-variant-numeric: tabular-nums; }
.res-score-label { font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #8A5600; }
.res-score-orb.is-landed { animation: landed .6s var(--spring); }
.res-pb {
  padding: 8px 20px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #4A2A00;
  background: linear-gradient(180deg, #FFEC99, #FFB800); box-shadow: 0 5px 0 #C98700, 0 0 30px rgba(255, 210, 60, .8);
  animation: badge-pop .6s var(--spring) 1s both, hot-glow 1.2s ease-in-out 1.6s infinite alternate;
}
.res-rank {
  --rank: #FFB800;
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border-radius: 24px; text-align: left;
  background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--rank) 22%, #fff));
  box-shadow: var(--card-shadow), inset 0 0 0 3px color-mix(in srgb, var(--rank) 50%, #fff);
  animation: rise-in .7s var(--spring) .4s both;
}
.rank-medal {
  flex: none; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; font-size: 38px;
  background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--rank) 60%, #fff) 50%, var(--rank));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--rank) 60%, #000), 0 0 0 4px #fff;
}
.rank-words { display: flex; flex-direction: column; min-width: 0; }
.rank-words small { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.rank-words b { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.05; color: var(--ink); }
.rank-words span { font-size: 13.5px; font-weight: 800; color: var(--ink-soft); }
.res-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.challenge-result {
  width: 100%; margin: 0; padding: 10px 13px; border-radius: 16px; color: #fff;
  background: rgba(255, 255, 255, .17); border: 2px solid rgba(255, 255, 255, .32);
  font-weight: 900; line-height: 1.4;
}
.res-stat {
  display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 20px; color: #fff;
  background: rgba(255, 255, 255, .17); border: 2px solid rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: rise-in .6s var(--spring) both;
}
.res-stat:nth-child(1) { animation-delay: .5s; } .res-stat:nth-child(2) { animation-delay: .58s; } .res-stat:nth-child(3) { animation-delay: .66s; }
.res-stat b { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; }
.res-stat small { font-size: 12px; font-weight: 800; opacity: .9; }
.res-stat > span { font-size: 20px; }
.res-card { width: 100%; padding: 16px; text-align: left; animation: rise-in .7s var(--spring) .7s both; }
.res-h2 { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); margin: 0 0 10px; }
.res-squares { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-bottom: 14px; }
.sq {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; font-size: 14px;
  animation: pop-in .35s var(--spring) both; animation-delay: calc(var(--i, 0) * 25ms + 800ms);
}
.sq.is-ok { background: linear-gradient(180deg, #8CF5B0, var(--good)); box-shadow: 0 3px 0 var(--good-dark); }
.sq.is-bad { background: linear-gradient(180deg, #FFA7B0, var(--bad)); box-shadow: 0 3px 0 var(--bad-dark); filter: saturate(.9); }
.empty-note { grid-column: 1 / -1; font-weight: 800; color: var(--ink-soft); }
.res-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cat-row { display: grid; grid-template-columns: 28px minmax(0, 7.5em) 1fr auto; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.cat-emoji { font-size: 20px; text-align: center; }
.cat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-bar { height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--cat) 15%, #EEE9FF); overflow: hidden; }
.cat-bar i { display: block; height: 100%; width: var(--pct); border-radius: inherit; background: var(--cat); transform-origin: left; animation: grow-x .9s var(--ease-out) 1s both; }
.cat-score { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
#share-btn { animation: rise-in .6s var(--spring) .9s both, share-glow 2.4s ease-in-out 2s infinite; }
.result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.desktop-result-actions .btn { width: 100%; min-height: 54px; padding-inline: 10px; font-size: 16px; }
.desktop-result-actions:has(#challenge-btn[hidden]) { grid-template-columns: 1fr; }
.mobile-result-actions { display: none; }

.share-preview {
  position: relative; isolation: isolate; width: 100%; min-height: 154px; padding: 16px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px;
  border: 3px solid rgba(255, 255, 255, .78); border-radius: 25px; color: #fff; text-align: left;
  background: linear-gradient(135deg, #32217E 0%, #6254F5 55%, #C343AE 125%);
  box-shadow: 0 7px 0 rgba(27, 11, 90, .45), 0 22px 36px -18px rgba(20, 8, 70, .7);
}
.share-preview::after { content: ''; position: absolute; width: 170px; height: 170px; right: -55px; top: -80px; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.share-preview-brand { display: flex; align-items: center; gap: 8px; }
.share-preview-brand > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(150deg, #41C8FF, #7D55F7); box-shadow: 0 3px 0 rgba(20, 0, 70, .35); font-size: 21px; }
.share-preview-brand div, .share-preview > div:nth-child(3) { display: flex; flex-direction: column; }
.share-preview-brand b { font-family: var(--font-display); font-size: 15px; }
.share-preview-brand small, .share-preview > div:nth-child(3) small { color: rgba(255, 255, 255, .75); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.share-preview-score { grid-row: span 2; display: flex; flex-direction: column; align-items: center; min-width: 76px; }
.share-preview-score b { font-family: var(--font-display); font-size: 50px; line-height: .85; color: #FFE27A; text-shadow: 0 3px 0 #7D4A00; }
.share-preview-score span { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.share-preview-grid { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; }
.share-preview-grid span { width: 11px; height: 11px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.share-preview-grid .is-ok { background: #62ED91; }
.share-preview-grid .is-bad { background: #FF7886; }
.share-preview > p { grid-column: 1 / -1; color: rgba(255, 255, 255, .76); font-size: 10px; text-align: center; }
.leader-preview-results { background: rgba(255, 255, 255, .94); }

/* =====================================================================
   11. DIALOGS (STATS, HOW TO PLAY, QUIT)
   ===================================================================== */
.dialog {
  width: min(440px, calc(100% - 24px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 30px;
  background: linear-gradient(180deg, #FFFFFF, #F4F0FF); color: var(--ink);
  box-shadow: 0 10px 0 rgba(36, 26, 77, .2), 0 40px 80px -20px rgba(10, 0, 50, .7);
  overflow: auto;
}
.dialog[open] { animation: dialog-in .5s var(--spring); }
.dialog::backdrop { background: rgba(20, 5, 70, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dialog.small { width: min(360px, calc(100% - 24px)); }
.dialog-inner { position: relative; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.dialog-title { font-family: var(--font-display); font-weight: 700; font-size: 28px; text-align: center; padding: 0 40px; }
.dialog-close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--lilac); color: var(--ink); font-size: 18px; font-weight: 900; box-shadow: 0 3px 0 #C9C0F0;
}
.dialog-close:active { transform: translateY(3px); box-shadow: none; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.stat-tile { display: flex; flex-direction: column; align-items: center; padding: 11px 4px; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 #DCD4F7; text-align: center; }
.stat-tile b { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.05; }
.stat-tile span, .stat-tile small { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.stat-tile.hot { background: linear-gradient(180deg, #FFF3E0, #FFD9AE); box-shadow: 0 4px 0 #F2A65A; }
.stat-tile.ice { background: linear-gradient(180deg, #EAF8FF, #C4ECFF); box-shadow: 0 4px 0 #7CC8F0; }
.dist-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.dist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dist-row { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; }
.dist-label { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dist-bar i {
  display: block; width: var(--w); min-width: 28px; padding: 3px 8px; border-radius: 9px; text-align: right; font-style: normal;
  background: linear-gradient(90deg, #B7AEF0, #8F82F0); color: #fff; font-weight: 900; font-size: 13px;
  transform-origin: left; animation: grow-x .7s var(--ease-out) both;
}
.dist-row.is-today i { background: linear-gradient(90deg, #6CF59A, #1FBF5A); box-shadow: 0 0 14px rgba(34, 197, 94, .6); }
.dialog-note { font-size: 13px; font-weight: 700; color: var(--ink-soft); text-align: center; }
.help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.help-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #E2DAFA; }
.help-list li > span { flex: none; font-size: 24px; line-height: 1.2; }
.help-list p { font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.help-ranks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
@media (min-width: 600px) { .help-ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.help-rank { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 14px; background: color-mix(in srgb, var(--rank) 16%, #fff); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rank) 40%, #fff); }
.help-rank span { font-size: 20px; }
.help-rank b { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.help-rank small { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
#quit-text { text-align: center; font-weight: 700; color: var(--ink-soft); line-height: 1.4; }

/* =====================================================================
   12. BRAIN MASCOT
   The SVG contains every face part; data-mood decides which are shown.
   ===================================================================== */
.mascot { display: block; }
.mascot-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mascot .m-shadow { fill: rgba(20, 0, 60, .22); }
.mascot .m-bob, .mascot .m-arm-l, .mascot .m-arm-r, .mascot .m-pupil, .mascot .m-flame, .mascot .m-hat, .mascot .m-sweat {
  transform-box: fill-box;
}
.mascot .m-bob { transform-origin: 50% 100%; animation: m-bob 2.6s ease-in-out infinite; }
.mascot .m-arm-l { transform-origin: 100% 100%; transform: rotate(-95deg); transition: transform .4s var(--spring); }
.mascot .m-arm-r { transform-origin: 0% 100%; transform: rotate(95deg); transition: transform .4s var(--spring); }
.mascot .m-eyes-open { animation: m-blink 4.5s infinite; transform-box: fill-box; transform-origin: center; }

/* Hide the optional parts, then switch them on per mood. */
.mascot .m-eyes-happy, .mascot .m-eyes-sad, .mascot .m-glasses, .mascot .m-mouth-open, .mascot .m-mouth-frown,
.mascot .m-mouth-o, .mascot .m-sweat, .mascot .m-flames, .mascot .m-hat { display: none; }

.mascot[data-mood="happy"] .m-eyes-open, .mascot[data-mood="happy"] .m-mouth-smile { display: none; }
.mascot[data-mood="happy"] .m-eyes-happy, .mascot[data-mood="happy"] .m-mouth-open { display: inline; }
.mascot[data-mood="happy"] .m-bob { animation: m-jump .55s var(--spring) 2; }
.mascot[data-mood="happy"] .m-arm-l { transform: rotate(0deg); }
.mascot[data-mood="happy"] .m-arm-r { transform: rotate(0deg); }

.mascot[data-mood="sad"] .m-eyes-open, .mascot[data-mood="sad"] .m-mouth-smile { display: none; }
.mascot[data-mood="sad"] .m-eyes-sad, .mascot[data-mood="sad"] .m-mouth-frown, .mascot[data-mood="sad"] .m-sweat { display: inline; }
.mascot[data-mood="sad"] .m-bob { animation: m-wobble .5s ease-in-out 2; }
.mascot[data-mood="sad"] .m-sweat { animation: m-sweat 1s ease-in infinite; }
.mascot[data-mood="sad"] .m-arm-l { transform: rotate(-150deg); }
.mascot[data-mood="sad"] .m-arm-r { transform: rotate(150deg); }

.mascot[data-mood="fire"] .m-eyes-open { display: none; }
.mascot[data-mood="fire"] .m-glasses, .mascot[data-mood="fire"] .m-flames { display: inline; }
.mascot[data-mood="fire"] .m-flame { transform-origin: 50% 100%; animation: m-flame .5s ease-in-out infinite alternate; }
.mascot[data-mood="fire"] .m-flame-2 { animation-delay: -.2s; }
.mascot[data-mood="fire"] .m-flame-3 { animation-delay: -.35s; }
.mascot[data-mood="fire"] .m-bob { animation: m-groove .8s ease-in-out infinite; }
.mascot[data-mood="fire"] .m-arm-r { transform: rotate(20deg); }

.mascot[data-mood="party"] .m-eyes-open, .mascot[data-mood="party"] .m-mouth-smile { display: none; }
.mascot[data-mood="party"] .m-eyes-happy, .mascot[data-mood="party"] .m-mouth-open, .mascot[data-mood="party"] .m-hat { display: inline; }
.mascot[data-mood="party"] .m-bob { animation: m-jump .7s var(--spring) infinite; }
.mascot[data-mood="party"] .m-arm-l { transform: rotate(0deg); animation: m-wave-l .45s ease-in-out infinite alternate; }
.mascot[data-mood="party"] .m-arm-r { transform: rotate(0deg); animation: m-wave-r .45s ease-in-out infinite alternate; }

.mascot[data-mood="think"] .m-mouth-smile { display: none; }
.mascot[data-mood="think"] .m-mouth-o { display: inline; }
.mascot[data-mood="think"] .m-pupil { transform: translate(3px, -5px); }
.mascot[data-mood="think"] .m-arm-r { transform: rotate(25deg); }

/* =====================================================================
   13. INTENSITY STAGES  (body[data-stage] = 0 Calm … 4 Legendary)
   ===================================================================== */
body { transition: background .8s; }
body[data-stage="1"] { background: linear-gradient(160deg, #FFB347, #FF5FA2); }
body[data-stage="2"] { background: linear-gradient(160deg, #FF5FA2, #8A3FFC); }
body[data-stage="3"] { background: linear-gradient(160deg, #FF5E3A, #B0186B); }
body[data-stage="4"] { background: linear-gradient(160deg, #2A0B6B, #0B0530); }

/* Warming Up and above: a soft coloured glow behind the question card */
body[data-stage="2"] .q-card { box-shadow: var(--card-shadow), 0 0 70px -10px var(--cat), 0 0 0 4px rgba(255, 255, 255, .4); }
body[data-stage="2"] .stage-pill { background: linear-gradient(90deg, #FF4FA3, #A346FF); border-color: #fff; }

/* Intense: the card breathes with a hot glow, the timer heats up */
body[data-stage="3"] .q-card { animation: hot-card 1.4s ease-in-out infinite alternate; }
body[data-stage="3"] .stage-pill { background: linear-gradient(90deg, #FF3D3D, #FF8A1F); border-color: #fff; animation: hot-glow 1s ease-in-out infinite alternate; }
body[data-stage="3"] .score-box { box-shadow: 0 5px 0 #B43C00, 0 0 26px rgba(255, 120, 0, .8), inset 0 2px 0 #fff; }

/* Legendary: a rainbow ring spins around the card, the HUD turns gold */
body[data-stage="4"] .q-card::before {
  content: ''; position: absolute; inset: -8px; padding: 6px; border-radius: 36px; pointer-events: none;
  background: conic-gradient(from var(--angle), #FFD84D, #FF4FA3, #7C5CFF, #5CE1FF, #6CF59A, #FFD84D);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 10px rgba(255, 216, 77, .8));
  animation: ring-spin 3s linear infinite;
}
body[data-stage="4"] .q-card { box-shadow: var(--card-shadow), 0 0 90px -6px rgba(255, 216, 77, .65); }
body[data-stage="4"] .score-box { background: linear-gradient(180deg, #FFF6C9, #FFC93C); box-shadow: 0 5px 0 #C98700, 0 0 34px rgba(255, 210, 60, .9), inset 0 2px 0 #fff; }
body[data-stage="4"] .score-label { color: #8A5600; }
body[data-stage="4"] .stage-pill {
  border-color: #fff; color: #fff;
  background: linear-gradient(90deg, #FFD84D, #FF4FA3, #7C5CFF, #5CE1FF, #FFD84D); background-size: 300% 100%;
  animation: rainbow 3s linear infinite; text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
body[data-stage="4"] .timer-track { border-color: rgba(255, 216, 77, .8); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .35), 0 0 22px rgba(255, 216, 77, .55); }
body[data-stage="4"] .rank-fill { background: linear-gradient(90deg, #FFD84D, #FF4FA3, #7C5CFF); }

/* =====================================================================
   14. BIGGER SCREENS
   ===================================================================== */
@media (min-width: 600px) {
  .screen { padding-left: 24px; padding-right: 24px; }
  .q-card { padding: 18px 22px 16px; }
  .choice { min-height: 80px; font-size: 26px; }
  .tf-card { padding: 38px 20px; }
}

/* Small-screen pass: keep the play area calm, thumb-friendly and above the fold. */
@media (max-width: 480px) {
  .screen { padding: max(8px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .title-layout { justify-content: flex-start; gap: 11px; padding-top: 2px; }
  .title-top { padding-right: 49px; }
  .chip-btn { width: 42px; padding: 0; justify-content: center; }
  .chip-btn > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .streak-chip { padding-right: 10px; }
  .title-hero { margin-top: -4px; }
  .hero-mascot { width: 122px; height: 142px; margin-bottom: -13px; }
  .logo-main { font-size: clamp(48px, 15vw, 66px); -webkit-text-stroke-width: 11px; text-shadow: 0 5px 0 var(--outline-deep), 0 9px 0 #12073F, 0 16px 24px rgba(10, 0, 50, .4); }
  .logo-ribbon { padding: 5px 18px 6px; font-size: 15px; }
  .date-pill { margin-top: 10px; padding: 5px 13px; font-size: 13px; }
  .brand-promise { margin-top: 7px; font-size: 11px; }
  .title-card { padding: 14px; border-radius: 24px; }
  .btn-play { min-height: 66px; font-size: 21px; }
  .how-tile { padding: 9px 3px 8px; border-radius: 16px; }
  .how-ico { font-size: 22px; }
  .how-tile b { font-size: 14px; }
  .how-tile small { font-size: 10px; }
  .leader-preview { padding: 12px; border-radius: 20px; }

  .hud { padding-right: 48px; }
  .hud-row { min-height: 45px; gap: 5px; }
  .hud-mascot { display: none; }
  .hud-mid { gap: 3px 5px; }
  .stage-pill { padding: 3px 8px; font-size: 11px; }
  .q-counter { font-size: 10px; }
  .score-box { min-width: 62px; padding: 4px 8px 5px; border-radius: 15px; }
  .score-num { font-size: 27px; }
  .timer { margin-top: 6px; gap: 7px; }
  .timer-num { min-width: 59px; height: 36px; padding: 0 7px; font-size: 20px; }
  .rank-row { margin-top: 7px; }
  .rank-next { display: none; }
  .stage-area { align-content: start; margin-top: 10px; padding-bottom: 12px; }
  .q-wrap { gap: 11px; }
  .q-card { padding: 12px 13px 10px; border-width: 3px; border-radius: 24px; }
  .q-chip { font-size: 13px; }
  .q-prompt { margin: 10px 2px; font-size: clamp(21px, 6vw, 27px); }
  .q-feedback { margin-top: 9px; }
  .choices { gap: 10px; }
  .choice { min-height: 62px; padding: 9px 13px; border-radius: 17px; font-size: 20px; box-shadow: 0 5px 0 color-mix(in srgb, var(--cat) 50%, #B9AEE8), 0 11px 18px -10px rgba(20, 8, 70, .5), inset 0 2px 0 #fff; }

  .results-layout, .res-col { gap: 11px; }
  .res-title { font-size: clamp(38px, 10vw, 50px); }
  .res-mascot { width: 102px; height: 120px; }
  .res-score-orb { width: 144px; height: 144px; }
  .res-score { font-size: 70px; }
  .res-rank { padding: 10px 13px; border-radius: 20px; }
  .rank-medal { width: 54px; height: 54px; font-size: 31px; }
  .rank-words b { font-size: 23px; }
  .res-stat { padding: 8px 3px; border-radius: 16px; }
  .res-stat b { font-size: 22px; }
  .res-card { padding: 14px; }
}

@media (max-width: 1099px) {
  .desktop-result-actions { display: none; }
  .mobile-result-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .mobile-result-share, .mobile-result-challenge {
    display: inline-flex; width: 100%; min-height: 58px; margin-top: 1px;
    animation: rise-in .6s var(--spring) .7s both, share-glow 2.4s ease-in-out 1.8s infinite;
  }
}

/* Desktop: three columns – mascot · game · rank ladder */
@media (min-width: 1100px) {
  .game-layout { max-width: 1180px; grid-template-columns: 230px minmax(0, 1fr) 230px; gap: 32px; }
  .game-col { max-width: 640px; width: 100%; justify-self: center; }
  .side-left, .side-right { display: flex; flex-direction: column; justify-content: center; }
  .side-left { align-items: center; gap: 16px; }
  .side-mascot { width: 220px; height: 256px; filter: drop-shadow(0 18px 24px rgba(20, 0, 60, .3)); }
  .side-streak {
    min-height: 44px; padding: 8px 18px; border-radius: 999px; color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 20px;
  }
  .side-streak:empty { visibility: hidden; }
  .side-streak:not(:empty) { background: linear-gradient(180deg, #FFB547, #FF5E00); box-shadow: 0 4px 0 #B43C00, 0 0 24px rgba(255, 120, 0, .6); animation: badge-pop .4s var(--spring); }
  .side-streak[data-level="3"] { background: linear-gradient(180deg, #FFE45C, #FF4FA3); box-shadow: 0 4px 0 #B0186B, 0 0 30px rgba(255, 79, 163, .9); }
  .hud-mascot { display: none; }
  .hud { padding-right: 0; }
  .side-right { gap: 10px; }
  .ladder-title { margin: 0 0 4px 6px; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: #fff; text-shadow: 0 2px 0 rgba(20, 0, 70, .3); }
  .ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .ladder-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 18px; color: #fff;
    background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .2);
    font-weight: 800; transition: transform .4s var(--spring), background .4s, box-shadow .4s;
  }
  .ladder-emoji { font-size: 20px; filter: grayscale(.8); opacity: .7; transition: filter .4s, opacity .4s; }
  .ladder-name { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 16px; opacity: .75; }
  .ladder-min { font-size: 13px; opacity: .7; }
  .ladder-item.is-reached .ladder-emoji { filter: none; opacity: 1; }
  .ladder-item.is-reached .ladder-name { opacity: 1; }
  .ladder-item.is-current {
    transform: scale(1.07) translateX(-6px); color: var(--ink);
    background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--rank) 35%, #fff));
    border-color: #fff; box-shadow: 0 5px 0 color-mix(in srgb, var(--rank) 60%, #000), 0 0 30px color-mix(in srgb, var(--rank) 70%, transparent);
  }
  .ladder-item.is-current .ladder-name { opacity: 1; }
  .ladder-item.is-current .ladder-min { opacity: 1; color: var(--ink-soft); }
  .stage-area { margin-top: 18px; }
  .q-prompt { font-size: 30px; }
  .title-layout { max-width: 500px; }
  /* Results: score on the left, breakdown and buttons on the right */
  .results-layout { max-width: 1040px; min-height: 100%; flex-direction: row; align-items: center; gap: 40px; }
  .res-col { flex: 1; }
  .res-score-orb { width: 196px; height: 196px; }
  .res-score { font-size: 96px; }
  .res-mascot { width: 150px; height: 176px; }
  .res-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
  .cat-row { grid-template-columns: 24px minmax(0, 1fr) 46px auto; font-size: 13px; }
  .cat-name { grid-column: 2 / 4; grid-row: 1; }
  .cat-bar { grid-column: 2 / 4; grid-row: 2; height: 8px; }
  .cat-emoji { grid-row: 1 / 3; }
  .cat-score { grid-row: 1 / 3; grid-column: 4; }
  .res-squares { grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 4px; }
  .sq { font-size: 12px; border-radius: 7px; }
}

/* Laptop and short-desktop results: keep every primary action above the fold. */
@media (min-width: 1100px) and (max-height: 900px) {
  #screen-results { padding-top: 8px; padding-bottom: 8px; }
  .results-layout { max-width: 1120px; gap: 28px; }
  .res-col { gap: 8px; }
  .res-kicker { padding: 3px 12px; font-size: 11px; }
  .res-title { font-size: 44px; -webkit-text-stroke-width: 8px; text-shadow: 0 4px 0 var(--outline-deep), 0 10px 18px rgba(0, 0, 0, .28); }
  .res-hero { margin: -2px 0; }
  .res-score-orb { width: 150px; height: 150px; }
  .res-score { font-size: 72px; }
  .res-mascot { width: 112px; height: 132px; }
  .res-rank { padding: 9px 13px; border-radius: 20px; }
  .rank-medal { width: 52px; height: 52px; font-size: 30px; }
  .rank-words b { font-size: 23px; }
  .rank-words span { font-size: 12px; }
  .res-stat { min-height: 60px; padding: 6px 3px; border-radius: 16px; }
  .res-stat b { font-size: 22px; }
  .res-stat > span { font-size: 16px; }
  .res-stat small { font-size: 10px; }

  .res-card { padding: 11px 13px; border-radius: 22px; }
  .res-h2 { margin-bottom: 7px; font-size: 15px; }
  .res-squares { gap: 3px; margin-bottom: 9px; }
  .sq { border-radius: 4px; font-size: 0; box-shadow: 0 2px 0 var(--good-dark); }
  .sq.is-bad { box-shadow: 0 2px 0 var(--bad-dark); }
  .res-cats { gap: 4px 14px; }
  .cat-row { grid-template-columns: 22px minmax(0, 1fr) 40px auto; gap: 5px; font-size: 11px; }
  .cat-emoji { font-size: 16px; }
  .cat-bar { height: 7px; }

  .share-preview { min-height: 102px; padding: 10px 13px; gap: 4px 12px; border-radius: 21px; }
  .share-preview-brand > span { width: 32px; height: 32px; border-radius: 10px; font-size: 17px; }
  .share-preview-score b { font-size: 42px; }
  .share-preview-grid span { width: 9px; height: 9px; }
  .share-preview > p { font-size: 9px; }
  #share-btn { min-height: 50px; font-size: 19px; border-radius: 18px; }
  .res-col-side > .btn-row .btn, #res-practice-btn { min-height: 46px; font-size: 16px; }

  .leader-preview-results { padding: 8px 11px; border-radius: 18px; }
  .leader-preview-results .leader-preview-head { margin-bottom: 5px; }
  .leader-preview-results .leader-preview-head h2 { font-size: 15px; }
  .leader-preview-results .eyebrow { display: none; }
  .leader-preview-results .leader-row { grid-template-columns: 24px 32px 1fr auto; padding: 5px 8px; }
  .leader-preview-results .leader-avatar { width: 30px; height: 30px; font-size: 16px; }
  .leader-preview-results .leader-points b { font-size: 18px; }
  .next-test.on-dark { font-size: 11px; }
}

@media (min-width: 1100px) and (max-height: 760px) {
  .results-layout { gap: 22px; }
  .res-col { gap: 6px; }
  .res-title { font-size: 40px; }
  .res-score-orb { width: 138px; height: 138px; }
  .res-score { font-size: 66px; }
  .res-mascot { width: 100px; height: 118px; }
  .res-card { padding-top: 9px; padding-bottom: 9px; }
  .share-preview { min-height: 94px; }
  .share-preview-grid { display: none; }
  .leader-preview-results .leader-preview-head { display: none; }
  .leader-preview-results { padding-top: 6px; padding-bottom: 6px; }
}
@media (min-width: 1100px) and (min-height: 760px) {
  .hero-mascot { width: 196px; height: 228px; margin-bottom: -22px; }
  .logo-main { font-size: 100px; }
  .logo-ribbon { font-size: 21px; }
}

/* Short screens (small phones, landscape laptops): tighten the title */
@media (max-height: 760px) {
  .hero-mascot { width: 130px; height: 152px; margin-bottom: -14px; }
  .logo-main { font-size: clamp(52px, 15vw, 74px); }
  .title-layout { gap: 12px; }
  .how-tile { padding: 9px 4px 8px; }
}
@media (max-width: 360px) {
  .choice { font-size: 20px; min-height: 62px; }
  .streak-label { display: none; }
  .tf-btn { font-size: 20px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .screen { padding-top: 8px; padding-bottom: 10px; }
  #screen-title { padding-left: 12px; padding-right: 12px; }
  .title-layout {
    max-width: 860px; min-height: 100%; display: grid;
    grid-template-columns: minmax(170px, .72fr) minmax(300px, 1.28fr);
    grid-template-areas: "top top" "hero card";
    grid-template-rows: 44px minmax(0, 1fr); align-items: center; gap: 6px 16px;
  }
  .title-top { grid-area: top; }
  .title-hero { grid-area: hero; margin: 0; align-self: center; }
  .title-card { grid-area: card; padding: 10px 12px; border-radius: 20px; }
  .hero-mascot { width: 82px; height: 96px; margin-bottom: -10px; }
  .hero-glow { width: 180px; height: 180px; top: 38px; }
  .logo-ribbon { padding: 3px 14px 4px; font-size: 11px; }
  .logo-main { font-size: 42px; -webkit-text-stroke-width: 8px; text-shadow: 0 4px 0 var(--outline-deep), 0 7px 0 #12073F, 0 12px 18px rgba(10, 0, 50, .38); }
  .date-pill { margin-top: 6px; padding: 3px 10px; font-size: 10px; }
  .brand-promise { margin-top: 5px; font-size: 9px; letter-spacing: .03em; }
  .btn-play { min-height: 56px; font-size: 19px; border-radius: 20px; }
  .btn-icon { width: 34px; height: 34px; }
  .title-sub { font-size: 11px; }
  .title-layout > .how-tiles, .title-layout > .best-line, .title-layout > .leader-preview { display: none; }
  .game-layout { align-items: start; }
  .hud { gap: 5px; }
  .stage-area { margin-top: 8px; }
  .q-card { min-height: 190px; padding-top: 10px; padding-bottom: 10px; }
  .choice { min-height: 52px; }
  .person-flip { height: 164px; }
}

/* =====================================================================
   15. ANIMATIONS (KEYFRAMES)
   ===================================================================== */
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spin-plain { to { transform: rotate(360deg); } }
@keyframes ring-spin { to { --angle: 360deg; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(26px) scale(.96); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } }
@keyframes glow-breathe { 50% { opacity: .65; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes flame-flicker { from { transform: rotate(-6deg) scale(1); } to { transform: rotate(6deg) scale(1.12); } }
@keyframes play-breathe { 50% { transform: scale(1.025); } }
@keyframes shine-sweep { 0% { left: -90px; } 45%, 100% { left: calc(100% + 60px); } }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes tick-pop { 0% { transform: scale(1.45); color: #FFE45C; } 100% { transform: scale(1); } }
@keyframes stripes { to { background-position: 28px 0; } }
@keyframes danger-pulse { 50% { box-shadow: inset 0 3px 6px rgba(0, 0, 0, .35), 0 0 0 4px rgba(255, 77, 94, .6), 0 0 26px rgba(255, 77, 94, .9); } }
@keyframes danger-num { 50% { transform: scale(1.08); } }
@keyframes rainbow { to { background-position: 300% 0; } }
@keyframes boost-flash { 0% { box-shadow: 0 0 0 0 rgba(108, 245, 154, .9), inset 0 3px 6px rgba(0, 0, 0, .35); } 100% { box-shadow: 0 0 0 14px rgba(108, 245, 154, 0), inset 0 3px 6px rgba(0, 0, 0, .35); } }
@keyframes bonus-float {
  0% { opacity: 0; transform: translateY(14px) scale(.4); }
  20% { opacity: 1; transform: translateY(-6px) scale(1.15); }
  35% { transform: translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateY(-46px) scale(.95); }
}
@keyframes hot-glow { from { filter: brightness(1); } to { filter: brightness(1.18) drop-shadow(0 0 8px rgba(255, 140, 0, .8)); } }
@keyframes screen-shake {
  15% { transform: translate(-9px, 3px) rotate(-.6deg); } 30% { transform: translate(8px, -3px) rotate(.5deg); }
  45% { transform: translate(-6px, 2px); } 60% { transform: translate(4px, -1px); } 80% { transform: translate(-2px, 0); }
}
@keyframes q-in { from { opacity: 0; transform: translateX(70px) scale(.92) rotate(2deg); filter: blur(4px); } }
@keyframes q-out { to { opacity: 0; transform: translateX(-90px) scale(.9) rotate(-3deg); filter: blur(4px); } }
@keyframes chip-in { from { opacity: 0; transform: translateX(-20px) scale(.6); } }
@keyframes fb-in { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@keyframes choice-in { from { opacity: 0; transform: translateY(26px) scale(.85); } }
@keyframes correct-pop { 0% { transform: scale(1); } 40% { transform: scale(1.1) rotate(-1.5deg); } 100% { transform: scale(1.03); } }
@keyframes wrong-shake { 20% { transform: translateX(-10px) rotate(-2deg); } 40% { transform: translateX(9px) rotate(2deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(3px); } }
@keyframes badge-pop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
@keyframes tile-in { from { opacity: 0; transform: translateY(-18px) scale(.6) rotate(-8deg); } }
@keyframes tile-drop { 0% { opacity: 0; transform: translateY(-50px) rotate(-14deg); } 100% { opacity: 1; } }
@keyframes unknown-pulse { 50% { transform: scale(1.07); box-shadow: 0 0 22px color-mix(in srgb, var(--cat) 55%, transparent); } }
@keyframes card-deal { from { opacity: 0; transform: translateY(30px) rotateX(40deg) scale(.8); } }
@keyframes stamp { 0% { transform: scale(2.2) rotate(0deg); opacity: 0; } 100% { opacity: 1; } }
@keyframes drain { to { transform: scaleX(0); } }
@keyframes fill-up { from { transform: scaleX(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes glow-pulse { 50% { filter: brightness(1.12); transform: scale(1.06); } }
@keyframes hint-blink { 50% { filter: saturate(1.3) brightness(1.35); box-shadow: 0 8px 0 var(--pd), 0 0 0 6px #fff, 0 0 40px var(--pl); } }
@keyframes win-bounce { 40% { transform: scale(1.1) translateY(-6px); } }
@keyframes float { 50% { transform: translateY(-7px); } }
@keyframes wave { 40% { transform: translateY(-12px) scale(1.08); } }
@keyframes clue-in { from { opacity: 0; transform: translateX(-30px); } }
@keyframes vs-left { from { opacity: 0; transform: translateX(-60px) rotate(-8deg); } }
@keyframes vs-right { from { opacity: 0; transform: translateX(60px) rotate(8deg); } }
@keyframes vs-pulse { 50% { transform: translate(-50%, -50%) scale(1.12) rotate(-6deg); } }
@keyframes crown-drop { to { opacity: 1; transform: translateY(0) scale(1) rotate(-10deg); } }
@keyframes pop-float {
  0% { opacity: 0; transform: translate(-50%, -30%) rotate(var(--tilt)) scale(.3); }
  25% { opacity: 1; transform: translate(-50%, -60%) rotate(var(--tilt)) scale(1.18); }
  40% { transform: translate(-50%, -70%) rotate(var(--tilt)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) rotate(var(--tilt)) scale(.9); }
}
@keyframes combo-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-12deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(3deg); }
  30% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  80% { opacity: 1; transform: translate(-50%, -60%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(.85) rotate(-2deg); }
}
@keyframes count-pop { 0% { opacity: 0; transform: scale(2.6) rotate(-10deg); } 30% { opacity: 1; transform: scale(.92); } 50% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes banner-life {
  0% { opacity: 0; transform: scale(.3) translateY(30px); }
  15% { opacity: 1; transform: scale(1.12); }
  25% { transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}
@keyframes rank-in { from { opacity: 0; transform: scale(.4) translateY(60px); } }
@keyframes badge-spin { from { transform: rotateY(540deg) scale(.3); } }
@keyframes orb-in { from { opacity: 0; transform: scale(.2) rotate(-30deg); } }
@keyframes landed { 0% { transform: scale(1); } 30% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes share-glow { 50% { box-shadow: 0 6px 0 var(--b3), 0 0 0 6px rgba(255, 255, 255, .35), 0 0 34px rgba(108, 245, 154, .8), inset 0 2px 0 rgba(255, 255, 255, .45); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(40px) scale(.9); } }
@keyframes hot-card { from { box-shadow: var(--card-shadow), 0 0 50px -10px rgba(255, 90, 0, .6); } to { box-shadow: var(--card-shadow), 0 0 80px 0 rgba(255, 60, 0, .85); } }

/* Mascot */
@keyframes m-bob { 50% { transform: translateY(-6px) scaleY(1.02); } }
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes m-jump { 0% { transform: translateY(0) scale(1.1, .9); } 40% { transform: translateY(-22px) scale(.95, 1.06); } 100% { transform: translateY(0) scale(1); } }
@keyframes m-wobble { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes m-sweat { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes m-flame { from { transform: scaleY(.88) skewX(-4deg); } to { transform: scaleY(1.12) skewX(5deg); } }
@keyframes m-groove { 25% { transform: rotate(-4deg) translateY(-3px); } 75% { transform: rotate(4deg) translateY(-3px); } }
@keyframes m-wave-l { from { transform: rotate(-20deg); } to { transform: rotate(15deg); } }
@keyframes m-wave-r { from { transform: rotate(20deg); } to { transform: rotate(-15deg); } }

/* =====================================================================
   16. REDUCED MOTION
   If the device asks for less motion we switch off movement: no shaking,
   no flying, no spinning. Colours still change so feedback is clear.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .title-card, .q-card { transform: none !important; }
  .title-card::after, .q-card::after { display: none; }
  /* Short-lived pop-ups simply show (without flying) and are removed by the game. */
  .pop { opacity: 1; animation: none !important; transform: translate(-50%, -80%); }
  .combo-pop, .bonus { animation: none !important; }
  .stage-banner.is-showing { opacity: 1; animation: none !important; }
}

/* =====================================================================
   17. CELESTIAL ATELIER — BRAGLIO'S SIGNATURE ART DIRECTION
   A mythic observatory, illuminated-manuscript warmth and modern game
   clarity. These overrides intentionally keep the existing layout and
   interaction geometry stable while transforming the visual language.
   ===================================================================== */
:root {
  --font-monument: 'Palatino Linotype', Palatino, Georgia, serif;
  --night-0: #050816;
  --night-1: #09152f;
  --night-2: #102652;
  --lapis: #1d4f91;
  --ivory: #fff9e9;
  --ivory-deep: #f1e3bd;
  --antique-gold: #d6a94f;
  --bright-gold: #ffd77a;
  --gold-shadow: #72501c;
  --coral-jewel: #e56d62;
  --celestial-border: rgba(236, 197, 111, .58);
  --ink: #18213a;
  --ink-soft: #58617a;
  --outline: #101c3b;
  --outline-deep: #060b1c;
  --paper: var(--ivory);
  --paper-2: #f6edda;
  --lilac: #e9e1d2;
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius: 17px;
  --radius-sm: 12px;
  --card-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 0 0 1px rgba(102,72,24,.12),
    0 1px 0 rgba(255,231,167,.7),
    0 18px 50px -20px rgba(0,4,18,.92);
}

body,
body[data-stage="1"],
body[data-stage="2"],
body[data-stage="3"],
body[data-stage="4"] {
  background-color: var(--night-0);
  background-image:
    linear-gradient(180deg, rgba(3,8,24,.18), rgba(3,8,24,.5)),
    radial-gradient(circle at 50% 42%, rgba(48,101,169,.08), rgba(3,8,24,.34) 68%),
    url('assets/art/celestial-observatory-v1.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
body[data-stage="1"] { background-blend-mode: normal, screen, normal; }
body[data-stage="2"] { background-blend-mode: normal, color-dodge, normal; }
body[data-stage="3"] { background-blend-mode: multiply, screen, normal; }
body[data-stage="4"] { background-blend-mode: multiply, luminosity, normal; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,5,15,.76), transparent 15%, transparent 85%, rgba(2,5,15,.76)),
    linear-gradient(180deg, rgba(2,5,15,.18), transparent 38%, rgba(2,5,15,.44));
}

.bg-canvas { opacity: .32; mix-blend-mode: screen; filter: saturate(.72) brightness(.9); }
.screen { isolation: isolate; }
.screen::before {
  content: '';
  position: fixed;
  inset: max(7px, env(safe-area-inset-top)) 7px max(7px, env(safe-area-inset-bottom));
  z-index: 65;
  pointer-events: none;
  border: 1px solid rgba(236,197,111,.28);
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(6,13,33,.62), inset 0 0 42px rgba(9,21,47,.42);
}

/* Monumental brand lockup */
.hero-glow {
  width: 330px;
  height: 330px;
  top: 82px;
  background: radial-gradient(circle, rgba(255,225,154,.38), rgba(64,111,180,.12) 46%, transparent 72%);
  filter: drop-shadow(0 0 32px rgba(222,176,83,.25));
}
.hero-glow::after {
  background: repeating-conic-gradient(from 0deg, rgba(238,200,116,.16) 0 1deg, transparent 1deg 18deg);
}
.hero-mascot { filter: drop-shadow(0 14px 18px rgba(0,0,0,.44)) drop-shadow(0 0 18px rgba(255,208,102,.18)); }
.logo-ribbon {
  padding: 5px 23px 6px;
  color: #1b2440;
  background: linear-gradient(180deg, #fff0bd, #c9973f);
  border: 1px solid #ffe5a1;
  border-radius: 4px;
  transform: rotate(-2deg);
  box-shadow: 0 3px 0 #76501c, 0 12px 25px -10px rgba(0,0,0,.7), inset 0 1px 0 #fff8dc;
  font-size: 15px;
  letter-spacing: .36em;
}
.logo-main {
  padding: 4px 12px 8px;
  font-family: var(--font-monument);
  font-weight: 700;
  font-size: clamp(61px, 18vw, 94px);
  letter-spacing: -.045em;
  color: #101a35;
  -webkit-text-stroke: 10px #101a35;
  text-shadow: 0 4px 0 #72501c, 0 8px 0 #060a18, 0 22px 36px rgba(0,0,0,.58);
}
.logo-main::after {
  padding: 4px 12px 8px;
  color: transparent;
  background:
    linear-gradient(180deg, #fffdf4 0%, #ffe7a8 38%, #d7a44d 70%, #fff0b7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.72));
}
.date-pill,
.res-kicker {
  color: #fff4cf;
  background: linear-gradient(180deg, rgba(13,29,61,.82), rgba(7,15,35,.82));
  border: 1px solid var(--celestial-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 22px -14px #000;
  backdrop-filter: blur(16px);
}
.brand-promise { color: rgba(255,248,225,.88); font-family: var(--font-monument); font-size: 14px; letter-spacing: .11em; }
.brand-promise span { color: var(--bright-gold); }

/* Vellum and midnight surfaces */
.glass,
.dialog {
  background:
    linear-gradient(135deg, rgba(255,255,255,.62), transparent 38%),
    linear-gradient(180deg, rgba(255,252,240,.985), rgba(241,228,196,.965));
  border: 1px solid rgba(255,226,156,.92);
  box-shadow: var(--card-shadow), 0 0 0 1px rgba(84,58,20,.52), 0 30px 80px -34px rgba(0,0,0,.92);
}
.title-card.glass {
  background:
    radial-gradient(circle at 50% -20%, rgba(80,128,194,.2), transparent 45%),
    linear-gradient(155deg, rgba(13,29,61,.94), rgba(5,12,30,.96));
  border: 1px solid rgba(240,202,117,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 3px rgba(7,16,38,.65), 0 24px 60px -24px rgba(0,0,0,.9);
  color: var(--ivory);
}
.title-card .title-sub { color: rgba(255,246,219,.72); }
.title-card .next-test,
.title-card .next-test b { color: rgba(255,246,219,.84); }
.title-card .done-banner { color: var(--ink); }
.leader-preview-results,
.leader-preview.glass { background: linear-gradient(145deg, rgba(255,252,241,.97), rgba(232,219,190,.95)); }

/* Enamel controls: tactile, precious, restrained */
.btn {
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 15px;
  text-shadow: 0 1px 1px rgba(0,0,0,.32);
  box-shadow: 0 4px 0 var(--b3), 0 16px 26px -17px var(--glow), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.18);
}
.btn::before { left: 5px; right: 5px; top: 3px; height: 42%; border-radius: 11px 11px 40% 40%; opacity: .72; }
.btn-green { --b1: #4fc89a; --b2: #197b66; --b3: #0b493f; --glow: rgba(35,178,135,.48); }
.btn-blue  { --b1: #5a91d7; --b2: #28558f; --b3: #122e58; --glow: rgba(67,123,199,.5); }
.btn-red   { --b1: #ee8a7d; --b2: #a94748; --b3: #68252c; --glow: rgba(200,79,75,.42); }
.btn-gold,
.btn-play,
.btn-next { --b1: #ffe5a1; --b2: #c99840; --b3: #72501c; --glow: rgba(221,174,76,.5); color: #17203a; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.btn-white { --b1: #fffdf5; --b2: #e8ddc4; --b3: #998462; --glow: rgba(3,10,26,.3); }
.btn-xl { border-radius: 17px; }
.btn-play { animation: play-breathe 3.4s ease-in-out infinite; }
.btn-icon { color: #9b6b22; background: #fff8e6; box-shadow: 0 2px 0 #8d6c38; }
.icon-btn,
.chip-btn {
  color: #fff4cf;
  background: linear-gradient(180deg, rgba(19,42,82,.82), rgba(8,19,43,.86));
  border: 1px solid var(--celestial-border);
  box-shadow: 0 3px 0 rgba(2,6,18,.72), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}
.streak-chip {
  color: #fff4d5;
  background: linear-gradient(180deg, #b55f38, #733529);
  border: 1px solid #e5a36a;
  box-shadow: 0 3px 0 #3e1d1b, 0 12px 24px -15px rgba(255,128,68,.7), inset 0 1px 0 rgba(255,255,255,.22);
}
.how-tile,
.res-stat,
.challenge-result {
  background: linear-gradient(155deg, rgba(18,39,76,.82), rgba(7,16,38,.84));
  border: 1px solid rgba(231,194,109,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px -20px #000;
  backdrop-filter: blur(16px);
}

/* Game HUD and parchment question theatre */
.hud {
  margin-top: 3px;
  padding: 8px 58px 9px 10px;
  border: 1px solid rgba(234,197,111,.4);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(9,23,51,.82), rgba(4,11,27,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 34px -25px #000;
  backdrop-filter: blur(17px);
}
.stage-pill,
.timer-num {
  color: #fff5d7;
  background: rgba(4,12,31,.6);
  border-color: rgba(234,197,111,.38);
}
.score-box {
  background: linear-gradient(180deg, #fff7df, #d8bd82);
  border: 1px solid #ffe9b4;
  box-shadow: 0 4px 0 #6f552b, 0 14px 24px -12px rgba(0,0,0,.8), inset 0 1px 0 #fff;
}
.timer-track {
  background: rgba(2,8,22,.74);
  border-color: rgba(235,199,112,.38);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.68), 0 1px 0 rgba(255,236,184,.2);
}
.rank-track { background: rgba(1,7,20,.72); box-shadow: inset 0 2px 4px rgba(0,0,0,.68); }
.rank-fill { background: linear-gradient(90deg, #9d6c28, #ffe097, #c48e35); }
.q-card {
  padding: 16px 18px 14px;
  border: 1px solid #ffe8b5;
  background:
    linear-gradient(135deg, rgba(255,255,255,.65), transparent 35%),
    linear-gradient(180deg, color-mix(in srgb, var(--cat-soft) 42%, #fff8e9) 0, #fffaf0 122px, #eee0be 100%);
  box-shadow: var(--card-shadow), 0 0 0 4px rgba(8,19,43,.72), 0 0 0 5px rgba(227,186,96,.55), 0 28px 80px -42px var(--cat);
}
.q-card::before {
  content: '';
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(144,105,42,.2);
  border-radius: calc(var(--radius-xl) - 7px);
}
.q-prompt { font-family: var(--font-monument); font-weight: 700; letter-spacing: -.018em; }
.q-chip {
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 2px 0 var(--cat-dark), inset 0 1px 0 rgba(255,255,255,.42);
}
.choice {
  border: 1px solid rgba(137,99,40,.24);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), transparent 42%),
    linear-gradient(180deg, #fffdf6 0%, #f3e6c9 100%);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--cat) 36%, #88724e), 0 15px 24px -16px rgba(4,10,28,.8), inset 0 1px 0 #fff;
}
@media (hover: hover) {
  .choice:not(:disabled):hover {
    transform: translateY(-3px);
    filter: brightness(1.025);
    box-shadow: 0 7px 0 color-mix(in srgb, var(--cat) 40%, #88724e), 0 20px 30px -18px rgba(4,10,28,.9), inset 0 1px 0 #fff;
  }
}

/* Results as an award tableau */
.res-title {
  font-family: var(--font-monument);
  color: #fff0bd;
  -webkit-text-stroke: 5px #111b36;
  text-shadow: 0 3px 0 #76501c, 0 7px 0 #060a18, 0 18px 30px rgba(0,0,0,.5);
}
.res-score-orb {
  background: radial-gradient(circle at 34% 28%, #fffdf3, #ffe5a0 35%, #c88d2f 74%, #744d19 100%);
  box-shadow: 0 7px 0 #664514, 0 0 0 4px #fff0bc, 0 0 0 10px rgba(210,164,71,.28), 0 26px 55px -12px rgba(0,0,0,.65);
}
.res-score { color: #18213a; font-family: var(--font-monument); }
.res-rank,
.res-card { border: 1px solid rgba(255,227,160,.88); }
.rank-medal { box-shadow: 0 4px 0 color-mix(in srgb, var(--rank) 48%, #4b391b), 0 0 0 3px #fff5d7; }
.rank-words b,
.res-h2,
.dialog-title,
.leader-preview-head h2 { font-family: var(--font-monument); }
.share-preview {
  border: 1px solid rgba(245,211,133,.74);
  background:
    radial-gradient(circle at 88% 5%, rgba(255,216,128,.2), transparent 30%),
    linear-gradient(145deg, #0a1a3a 0%, #173b70 55%, #6b3345 120%);
  box-shadow: 0 5px 0 #071126, 0 25px 46px -24px rgba(0,0,0,.84), inset 0 1px 0 rgba(255,255,255,.12);
}
.share-preview-brand > span { background: linear-gradient(150deg, #d6a94f, #315e9a); box-shadow: 0 2px 0 #050a18; }

/* Dialogs feel like opened folios rather than generic modals. */
.dialog { border-radius: 20px; }
.dialog::backdrop { background: rgba(2,7,20,.72); backdrop-filter: blur(12px) saturate(.8); }
.dialog-close { background: #e8d8b7; box-shadow: 0 2px 0 #8e7754; }
.stat-tile,
.help-list li { background: rgba(255,253,246,.78); box-shadow: 0 3px 0 #b9a47d; border: 1px solid rgba(137,99,40,.16); }
.dist-bar i { background: linear-gradient(90deg, #315f9a, #d2a54d); }

@media (max-width: 480px) {
  body,
  body[data-stage="1"],
  body[data-stage="2"],
  body[data-stage="3"],
  body[data-stage="4"] { background-position: 50% center; }
  .screen::before { border-radius: 17px; }
  .hud { padding-top: 5px; padding-bottom: 6px; border-radius: 15px; }
  .logo-main { -webkit-text-stroke-width: 7px; text-shadow: 0 3px 0 #72501c, 0 6px 0 #060a18, 0 16px 28px rgba(0,0,0,.55); }
  .q-card { box-shadow: var(--card-shadow), 0 0 0 2px rgba(8,19,43,.76), 0 0 0 3px rgba(227,186,96,.5); }
}

@media (prefers-contrast: more) {
  .title-card.glass,
  .hud,
  .how-tile,
  .res-stat { background: #07142f; border-color: #ffe29a; }
  .q-card,
  .choice,
  .glass,
  .dialog { background: #fffaf0; }
}

/* 18. PROGRESSION, INSTALLATION AND OFFLINE TRUST */
.pwa-tools {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px auto 0;
}
.btn-compact {
  min-height: 42px;
  padding: 9px 16px;
  font-size: 14px;
  border-radius: 15px;
}
.connection-status {
  max-width: 340px;
  padding: 9px 14px;
  border: 1px solid rgba(242, 201, 109, .5);
  border-radius: 999px;
  background: rgba(7, 19, 47, .9);
  color: var(--celestial-ivory);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(4, 10, 30, .28);
}
.achievement-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.achievement-heading .dist-title { margin: 0; }
.achievement-count {
  color: #725518;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 0;
  margin: 10px 0 16px;
  list-style: none;
}
.achievement {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 68px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(105, 79, 25, .2);
  border-radius: 15px;
  background: rgba(255, 253, 244, .64);
  box-shadow: inset 0 -2px rgba(83, 58, 14, .09);
}
.achievement::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, #dca92d var(--progress), rgba(25, 35, 64, .1) var(--progress));
}
.achievement.is-locked { filter: saturate(.28); opacity: .68; }
.achievement-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(220, 169, 45, .55);
  border-radius: 50%;
  background: linear-gradient(145deg, #fff9d9, #e4b642);
  font-size: 21px;
  box-shadow: 0 3px 0 #9a6a18;
}
.achievement.is-locked .achievement-icon { background: #e7e4dc; box-shadow: 0 3px 0 #aba59a; }
.achievement-copy { min-width: 0; }
.achievement-copy b,
.achievement-copy small { display: block; }
.achievement-copy b { color: var(--celestial-ink); font-family: var(--font-display); font-size: 13px; }
.achievement-copy small { margin-top: 2px; color: #5b647a; font-size: 10px; font-weight: 800; line-height: 1.25; }
.data-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.data-controls .btn { min-width: 0; padding-inline: 8px; }
.feedback-btn { width: 100%; margin-top: 14px; }
.privacy-note {
  margin: 10px 0 0;
  color: #667089;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 520px) {
  .achievement-grid { grid-template-columns: 1fr; }
  .achievement { min-height: 62px; }
  .data-controls { grid-template-columns: 1fr; }
}