/* ============================================================
   EDUMONS — Educational Games Platform
   Centralized design tokens. Three switchable directions:
   [data-theme="arcade"] | "quest" | "neon"
   These map 1:1 to a Tailwind theme config on handoff.
   ============================================================ */

:root {
  /* Type scale (rem-ish, fixed for prototype) */
  --font-display: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Reward / system hues shared across themes */
  --xp: #ffc233;          /* gold xp/coins */
  --xp-ink: #4a3500;
  --success: #2bb673;
  --danger: #ff5a5f;
  --premium: #f6b21b;     /* premium / locked gold */
}

/* ---------------- ARCADE (bright, chunky, default) ------------- */
[data-theme="arcade"] {
  --bg: #edf8f5;
  --bg-2: #d8eeea;
  --surface: #ffffff;
  --surface-2: #f3fbf9;
  --ink: #123540;
  --ink-soft: #53727a;
  --border: #cfe6e1;
  --border-strong: #acd3cc;

  --primary: #ef5b50;
  --primary-ink: #ffffff;
  --primary-soft: #ffe1dd;

  --math: #0d9f9b;
  --math-soft: #d7f3ef;
  --english: #7665d8;
  --english-soft: #e8e4fa;

  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 30px;
  --shadow: 0 10px 0 rgba(8,70,74,0.055), 0 18px 30px rgba(8,70,74,0.12);
  --shadow-sm: 0 5px 0 rgba(8,70,74,0.045), 0 8px 16px rgba(8,70,74,0.10);
  --press: 6px;           /* chunky pressable offset */
  --ring: rgba(239,91,80,0.32);
  --glow: none;
  --card-border-w: 2.5px;
}

/* ---------------- QUEST (storybook, warm, organic) ------------- */
[data-theme="quest"] {
  --bg: #f4ead4;
  --bg-2: #ecdcbc;
  --surface: #fffdf6;
  --surface-2: #f6ead0;
  --ink: #463218;
  --ink-soft: #7a6240;
  --border: #e3cda0;
  --border-strong: #d2b67e;

  --primary: #e2872a;
  --primary-ink: #fffaf0;
  --primary-soft: #f7e3c4;

  --math: #2a9d8f;
  --math-soft: #d4ece8;
  --english: #e2674a;
  --english-soft: #f8ddd2;

  --radius: 26px;
  --radius-sm: 16px;
  --radius-lg: 34px;
  --shadow: 0 14px 34px rgba(110,80,30,0.18);
  --shadow-sm: 0 8px 18px rgba(110,80,30,0.14);
  --press: 4px;
  --ring: rgba(226,135,42,0.32);
  --glow: none;
  --card-border-w: 2px;
}

/* ---------------- NEON (dark console, scales to 6-12) ---------- */
[data-theme="neon"] {
  --bg: #0d1026;
  --bg-2: #090b1c;
  --surface: #171c3c;
  --surface-2: #212951;
  --ink: #eef1ff;
  --ink-soft: #aab3e0;
  --border: #2b3568;
  --border-strong: #3a4684;

  --primary: #fca311;
  --primary-ink: #1a1300;
  --primary-soft: #2c2a4d;

  --math: #22d3ee;
  --math-soft: #16304a;
  --english: #fb7185;
  --english-soft: #3a1f33;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;
  --shadow: 0 16px 40px rgba(0,0,0,0.55);
  --shadow-sm: 0 8px 22px rgba(0,0,0,0.45);
  --press: 4px;
  --ring: rgba(252,163,17,0.45);
  --glow: 0 0 18px;
  --card-border-w: 1.5px;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
/* overflow-x: CLIP, not hidden — hidden turns html/body into scroll containers,
   and a non-scrollable scroll container with overscroll-behavior≠auto swallows
   every wheel event in Safari/Firefox (page can't scroll at all). clip guards
   against sideways overflow without creating a scroll container. */
html, body { margin: 0; padding: 0; overflow-x: clip; }
html { overscroll-behavior-y: none; }  /* root scroller only: blocks pull-to-refresh, never wheel */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.05; }
button { font-family: var(--font-body); cursor: pointer; color: inherit; }
/* Touch: kill the 300ms double-tap-zoom wait + grey tap flash on fast-tap game
   buttons (quiz choices, balloon pops); pinch-zoom on the page still works. */
button, [role="button"], .btn, .chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
::selection { background: var(--ring); }

/* Arcade playfields: svh sizes against the VISIBLE iOS viewport (toolbar up),
   so the field + steer buttons never spill below the fold; the vh line is the
   fallback for browsers without svh. */
.pf-64 { height: min(64vh, 560px); height: min(64svh, 560px); }
.pf-62 { height: min(62vh, 540px); height: min(62svh, 540px); }
.pf-58 { height: min(58vh, 480px); height: min(58svh, 480px); }
.pf-56 { height: min(56vh, 440px); height: min(56svh, 440px); }

/* App scaling shell */
.app-frame {
  min-height: 100vh;
  color: var(--ink);            /* theme lives on this element, so --ink resolves here */
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--surface-2), transparent 60%),
    var(--bg);
  display: flex;
  flex-direction: column;
}
[data-theme="neon"] .app-frame {
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(34,211,238,0.10), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(251,113,133,0.10), transparent 60%),
    var(--bg);
}
/* Neon polish: card depth, luminous borders, crisper headings */
[data-theme="neon"] .card {
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, #4655a8 14%), var(--surface));
  border-color: color-mix(in oklab, var(--border) 70%, #5566c4 30%);
}
[data-theme="neon"] h1, [data-theme="neon"] h2, [data-theme="neon"] h3 {
  text-shadow: 0 0 22px rgba(120,140,255,0.18);
}
[data-theme="neon"] .chip { background: color-mix(in oklab, var(--surface-2) 80%, #4655a8 20%); }
[data-theme="neon"] .bar { background: #0c1330; }

/* ============================================================
   TERNQUEST PUBLIC WORLD
   Brand-led landing and origin surfaces. All illustration is code-native so
   the first visit stays light; full cinematic art remains lazy/R2 territory.
   ============================================================ */
.tq-landing {
  background:
    radial-gradient(900px 460px at 8% 18%, rgba(77,205,190,.14), transparent 70%),
    linear-gradient(180deg,#f4fbf9 0%,#edf8f5 42%,#f9fcfb 100%);
}
.tq-landing-nav {
  background:color-mix(in oklab,#f5fbfa 86%,transparent);
  border-bottom:1px solid rgba(20,91,96,.09);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.tq-hero {
  width:min(1180px,calc(100% - 32px));min-height:570px;margin:20px auto 0;
  display:grid;grid-template-columns:minmax(0,1.03fr) minmax(410px,.97fr);align-items:center;gap:38px;
  padding:clamp(40px,6vw,78px);position:relative;overflow:hidden;border-radius:38px;
  color:#fff;background:
    radial-gradient(680px 390px at 88% 5%,rgba(40,191,181,.42),transparent 72%),
    radial-gradient(460px 330px at 3% 98%,rgba(83,99,188,.24),transparent 75%),
    linear-gradient(142deg,#07384b 0%,#07535d 52%,#086c70 100%);
  box-shadow:0 26px 70px rgba(6,57,67,.24);
}
.tq-hero::before { content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:radial-gradient(circle at center,#fff 0 1px,transparent 1.5px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 68%); }
.tq-hero__copy { position:relative;z-index:2;align-items:flex-start; }
.tq-hero__copy h1 { font-size:clamp(43px,5.3vw,72px);line-height:.98;letter-spacing:-1.8px;max-width:650px;text-shadow:0 7px 30px rgba(0,0,0,.18); }
.tq-hero__copy h1 span { display:block;color:#ffcf6c; }
.tq-hero__copy>p { margin:0;max-width:590px;font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:#d8f4f0;font-weight:700; }
.tq-hero__chip { color:#fff;background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px rgba(255,255,255,.12); }
.tq-hero .btn--primary { background:#f15b50;box-shadow:0 6px 0 #b93733,0 12px 30px rgba(238,70,65,.24); }
.tq-hero__ghost { color:#fff!important;background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.22)!important;box-shadow:none!important; }
.tq-student-link { align-self:flex-start;background:none;border:0;padding:0;color:#c5e8e5;font:700 14px var(--font-display);text-decoration:underline;text-underline-offset:4px; }
.tq-hero__trust { color:#d0ece9; }
.tq-hero__visual { position:relative;z-index:1;min-width:0;display:grid;place-items:center; }
.tq-orbit-card { width:min(100%,470px);aspect-ratio:1/1.04;position:relative;overflow:hidden;border-radius:45% 45% 34% 34%;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.17);box-shadow:inset 0 1px rgba(255,255,255,.22),0 24px 50px rgba(1,31,45,.28); }
.tq-aurora { position:absolute;width:380px;height:100px;border-radius:50%;filter:blur(28px);opacity:.32;transform:rotate(-24deg); }
.tq-aurora--one { top:35px;left:-60px;background:#70f0bb; }
.tq-aurora--two { top:100px;right:-120px;background:#a794ff; }
.tq-orbit-sun { position:absolute;right:58px;top:52px;width:72px;height:72px;border-radius:50%;background:#ffc761;box-shadow:0 0 55px rgba(255,199,97,.58); }
.tq-world { position:absolute;width:250px;height:250px;border-radius:50%;left:50%;top:49%;transform:translate(-50%,-30%);overflow:hidden;background:radial-gradient(circle at 32% 24%,#d9fbf5,#76d6cb 54%,#229998 100%);box-shadow:inset -26px -22px 40px rgba(4,75,89,.25),0 24px 55px rgba(1,27,40,.34); }
.tq-world::after { content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(255,255,255,.32);box-shadow:inset 0 0 0 35px transparent; }
.tq-world i { position:absolute;display:block;background:#58b989;border-radius:60% 45% 55% 40%;opacity:.9;transform:rotate(-18deg); }
.tq-world i:nth-child(1){width:86px;height:48px;left:35px;top:50px}.tq-world i:nth-child(2){width:62px;height:91px;right:39px;top:87px;transform:rotate(23deg)}.tq-world i:nth-child(3){width:51px;height:30px;left:57px;bottom:38px;transform:rotate(8deg)}
.tq-flight-path { position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);overflow:visible; }
.tq-flight-path path { fill:none;stroke:#ffd16f;stroke-width:3;stroke-linecap:round;stroke-dasharray:4 11;filter:drop-shadow(0 0 7px rgba(255,205,102,.7));animation:tqRoute 12s linear infinite; }
@keyframes tqRoute { to{stroke-dashoffset:-180} }
.tq-route-dot { position:absolute;width:9px;height:9px;border-radius:50%;background:#fff4c9;box-shadow:0 0 0 5px rgba(255,209,111,.18),0 0 18px #ffd16f; }
.tq-route-dot--a{left:74px;top:91px}.tq-route-dot--b{right:53px;top:212px}.tq-route-dot--c{left:95px;bottom:57px}
.tq-pip-flight { position:absolute;z-index:3;left:120px;top:66px;transform:rotate(-5deg);animation:tqFly 4.6s ease-in-out infinite; }
@keyframes tqFly { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-12px) rotate(-2deg)} }
.tq-pole { position:absolute;z-index:2;font:700 10px/1.2 var(--font-display);letter-spacing:1.5px;color:#bfe8e4; }
.tq-pole b { display:block;margin-top:4px;font-size:12px;letter-spacing:0;color:#fff; }
.tq-pole--north{left:31px;top:41px}.tq-pole--south{right:27px;bottom:32px;text-align:right}
.tq-mission-card { position:absolute;z-index:4;left:22px;bottom:22px;width:190px;display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid rgba(255,255,255,.22);border-radius:16px;background:rgba(4,44,55,.66);backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(0,0,0,.2); }
.tq-mission-card span,.tq-mission-card small { color:#bfe8e4;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px; }.tq-mission-card strong{font:700 14px var(--font-display)}
.tq-journeys { width:min(1080px,calc(100% - 48px));margin:-26px auto 42px;position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);padding:12px;background:rgba(255,255,255,.9);border:1px solid rgba(18,91,96,.12);border-radius:24px;box-shadow:0 18px 46px rgba(6,65,70,.13);backdrop-filter:blur(12px); }
.tq-journey { min-width:0;display:flex;align-items:center;gap:11px;padding:11px 14px;position:relative; }.tq-journey>span{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:color-mix(in oklab,var(--journey) 13%,#fff)}.tq-journey>div{min-width:0;display:flex;flex-direction:column}.tq-journey small{color:var(--journey);font:800 10px var(--font-display);letter-spacing:.4px;text-transform:uppercase}.tq-journey strong{font:700 13px var(--font-display);white-space:nowrap}.tq-journey>i{position:absolute;right:0;width:1px;height:42px;background:#d7e8e5}
.tq-origin-teaser { width:min(1080px,calc(100% - 32px));margin:26px auto 48px;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(320px,1.2fr);gap:clamp(30px,6vw,76px);align-items:center;padding:clamp(28px,5vw,54px);border-radius:34px;background:linear-gradient(135deg,#e1f6f1,#fff8e8);border:2px solid #c9e8e1;overflow:hidden; }
.tq-origin-teaser__art { min-height:255px;position:relative;display:grid;place-items:center; }.tq-origin-teaser__art .tern-mascot{position:relative;z-index:2}.tq-origin-ring{position:absolute;border:2px dashed rgba(13,135,139,.3);border-radius:50%;animation:tqSpin 22s linear infinite}.tq-origin-ring--one{width:240px;height:240px}.tq-origin-ring--two{width:185px;height:185px;animation-direction:reverse;animation-duration:15s}@keyframes tqSpin{to{transform:rotate(360deg)}}
.tq-origin-mile { position:absolute;right:-4px;bottom:3px;z-index:3;padding:9px 12px;border-radius:13px;background:#0b5963;color:#fff;font:700 11px/1.3 var(--font-display);box-shadow:0 8px 20px rgba(6,65,70,.2); }
.tq-origin-teaser__copy h2 { font-size:clamp(30px,4.5vw,48px);color:#123f49; }.tq-origin-teaser__copy p{margin:0;color:#527078;font-size:17px;line-height:1.6;font-weight:700}.tq-origin-teaser__copy .btn{align-self:flex-start}.tq-eyebrow{color:#0d8f8d;font:800 12px var(--font-display);letter-spacing:1.8px}

@media(max-width:900px){.tq-hero{grid-template-columns:1fr;padding:50px 34px 28px}.tq-hero__copy{align-items:center;text-align:center}.tq-hero__copy>p{max-width:680px}.tq-student-link{align-self:center}.tq-hero__visual{width:min(100%,520px);margin:auto}.tq-journeys{grid-template-columns:repeat(2,1fr);margin-top:-18px}.tq-journey:nth-child(2)>i{display:none}}
@media(max-width:620px){.tq-nav-story{display:none!important}.tq-landing-nav{padding:10px 10px!important;gap:6px}.tq-landing-nav>div:last-child{gap:6px}.tq-landing-nav>div:first-child strong{font-size:19px!important}.tq-landing-nav>div:first-child svg{width:34px!important;height:34px!important}.tq-landing-nav .btn--sm{padding:8px 10px;white-space:nowrap}.tq-hero{width:100%;margin:0;border-radius:0;min-height:0;padding:40px 18px 24px}.tq-hero__copy h1{font-size:42px}.tq-hero__copy>p{font-size:17px}.tq-hero__copy .row{justify-content:center}.tq-orbit-card{max-width:410px}.tq-pip-flight{left:25%;top:14%}.tq-pip-flight .tern-mascot{transform:scale(.85);transform-origin:center}.tq-journeys{width:calc(100% - 24px);grid-template-columns:1fr;margin-top:-10px}.tq-journey>i{left:68px;right:auto;bottom:0;width:calc(100% - 82px);height:1px}.tq-journey:nth-child(2)>i{display:block}.tq-journey:last-child>i{display:none}.tq-origin-teaser{grid-template-columns:1fr;padding:28px 20px}.tq-origin-teaser__copy{text-align:center;align-items:center}.tq-origin-teaser__copy .btn{align-self:stretch;justify-content:center}.tq-origin-mile{right:4px}.tq-pole{display:none}}
@media(max-width:365px){.tq-landing-nav .btn--ghost{display:none!important}}
@media(prefers-reduced-motion:reduce){.tq-flight-path path,.tq-pip-flight,.tq-origin-ring{animation:none!important}}

/* Brand-origin editorial page */
.tq-story-page { min-height:100vh;color:#143842;background:#f6fbf9; }
.tq-story-nav { position:sticky;top:0;z-index:30;padding:14px clamp(16px,4vw,44px);background:rgba(246,251,249,.9);border-bottom:1px solid #d9ebe7;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); }
.tq-story-brand { border:0;background:none;padding:0; }
.tq-story-hero { min-height:650px;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(400px,.98fr);gap:30px;align-items:center;padding:clamp(48px,7vw,90px) max(32px,calc((100vw - 1160px)/2));overflow:hidden;color:#fff;background:radial-gradient(600px 420px at 82% 14%,rgba(54,207,186,.32),transparent 72%),linear-gradient(135deg,#062f43,#07565e 58%,#087878); }
.tq-story-hero__copy { position:relative;z-index:3;align-items:flex-start; }
.tq-story-kicker,.tq-story-chapter { color:#55d8c3;font:800 11px var(--font-display);letter-spacing:2px; }
.tq-story-hero__copy h1 { font-size:clamp(56px,7vw,94px);line-height:.9;letter-spacing:-2.2px; }.tq-story-hero__copy h1 span{color:#ffca66}.tq-story-hero__copy>p{max-width:610px;margin:0;color:#d9f3f0;font-size:20px;line-height:1.6;font-weight:700}
.tq-story-facts { margin-top:15px; }.tq-story-facts>span{min-width:150px;color:#c3e9e5;font-size:12px;line-height:1.35}.tq-story-facts b{display:block;color:#fff;font:800 10px var(--font-display);letter-spacing:1.2px}
.tq-story-hero__art { width:min(100%,520px);aspect-ratio:1;position:relative;justify-self:center; }
.tq-story-globe { position:absolute;width:340px;height:340px;left:50%;top:50%;transform:translate(-50%,-42%);overflow:hidden;border-radius:50%;background:radial-gradient(circle at 31% 23%,#e1fff9,#82dcd0 50%,#1b989a 100%);box-shadow:inset -35px -31px 60px rgba(4,64,79,.3),0 30px 70px rgba(1,26,40,.42) }.tq-story-globe::after{content:"";position:absolute;inset:20px;border:1px solid rgba(255,255,255,.3);border-radius:50%}.tq-story-globe i{position:absolute;background:#52b981;border-radius:55% 45%;opacity:.94}.tq-story-globe i:nth-child(1){width:112px;height:65px;left:38px;top:67px;transform:rotate(-17deg)}.tq-story-globe i:nth-child(2){width:77px;height:120px;right:49px;top:123px;transform:rotate(19deg)}.tq-story-globe i:nth-child(3){width:69px;height:38px;left:70px;bottom:50px;transform:rotate(8deg)}
.tq-story-hero__art>svg { position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:visible }.tq-story-hero__art>svg path{fill:none;stroke:#ffd06c;stroke-width:4;stroke-linecap:round;stroke-dasharray:4 14;filter:drop-shadow(0 0 7px rgba(255,208,108,.7));animation:tqRoute 12s linear infinite}.tq-story-pip{position:absolute;z-index:4;left:21%;top:9%;animation:tqFly 4.8s ease-in-out infinite}.tq-story-sun{position:absolute;right:23px;top:37px;width:85px;height:85px;border-radius:50%;background:#ffca66;box-shadow:0 0 55px rgba(255,202,102,.55)}.tq-story-point{position:absolute;z-index:4;color:#d4f2ee;font:800 10px var(--font-display);letter-spacing:1.6px}.tq-story-point--north{left:22px;top:70px}.tq-story-point--south{right:15px;bottom:32px}
.tq-story-intro { max-width:1080px;margin:auto;padding:90px 30px; }.tq-story-intro__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;margin-top:28px}.tq-story-intro h2,.tq-story-values h2,.tq-story-promise h2{font-size:clamp(38px,5vw,60px);line-height:1;color:#123f49}.tq-story-intro p{font-size:18px;line-height:1.7;color:#4f6f76;margin:0;font-weight:700}.tq-story-source{padding-top:14px;border-top:1px solid #cfe4df;font-size:13px!important}.tq-story-source a{color:#087f81;font-weight:800}
.tq-story-values { padding:90px max(24px,calc((100vw - 1160px)/2));background:#e5f5f1; }.tq-story-section-title{text-align:center}.tq-story-section-title>p{margin:5px 0 0;color:#55747b;font-size:17px;font-weight:700}.tq-story-value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}.tq-story-value-grid article{min-height:265px;padding:28px 24px;border:1px solid #c7e1dc;border-radius:23px;background:rgba(255,255,255,.75);box-shadow:0 12px 30px rgba(12,82,85,.08)}.tq-story-value-grid article>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0a777b;color:#fff;font:800 12px var(--font-display)}.tq-story-value-grid h3{margin-top:35px;font-size:25px;color:#123f49}.tq-story-value-grid p{color:#58747b;font-size:15px;line-height:1.55;font-weight:700}
.tq-story-promise { max-width:1020px;margin:90px auto;display:grid;grid-template-columns:300px 1fr;gap:70px;align-items:center;padding:0 28px}.tq-story-promise__pip{min-height:300px;display:grid;place-items:center;position:relative;border-radius:48% 48% 32% 32%;background:radial-gradient(circle at 50% 35%,#fff,#d8f0eb)}.tq-story-promise__pip::after{content:"";position:absolute;inset:18px;border:2px dashed rgba(13,143,141,.22);border-radius:50%;animation:tqSpin 20s linear infinite}.tq-story-promise__pip .tern-mascot{position:relative;z-index:2}.tq-story-promise p{font-size:17px;line-height:1.65;color:#54737a;font-weight:700;margin:0}.tq-story-promise blockquote{margin:8px 0 0;padding:16px 20px;border-left:5px solid #ef5b50;color:#0b6d72;background:#eef9f6;border-radius:0 15px 15px 0;font:700 25px var(--font-display)}
.tq-story-final { min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:70px 24px;color:#fff;background:radial-gradient(500px 250px at 50% 0,rgba(73,198,184,.3),transparent),linear-gradient(145deg,#052f43,#075f64)}.tq-story-final>span{margin-top:7px;color:#61ddc8;font:800 11px var(--font-display);letter-spacing:2px}.tq-story-final h2{font-size:clamp(38px,5.5vw,62px);line-height:1}.tq-story-final p{margin:0 0 14px;color:#cfeeea;font-size:17px;font-weight:700}.tq-story-final .btn{background:#ef5b50;box-shadow:0 6px 0 #b93733}
@media(max-width:850px){.tq-story-hero{grid-template-columns:1fr;text-align:center;padding:60px 24px 30px}.tq-story-hero__copy{align-items:center}.tq-story-facts{justify-content:center}.tq-story-hero__art{max-width:490px}.tq-story-intro__grid{grid-template-columns:1fr;gap:28px}.tq-story-value-grid{grid-template-columns:repeat(2,1fr)}.tq-story-promise{grid-template-columns:240px 1fr;gap:36px}}
@media(max-width:580px){.tq-story-nav .btn--ghost{display:none}.tq-story-hero{min-height:0}.tq-story-hero__copy h1{font-size:58px}.tq-story-hero__copy>p{font-size:17px}.tq-story-facts{display:grid!important;grid-template-columns:1fr 1fr}.tq-story-hero__art{transform:scale(.86);margin:-20px 0}.tq-story-globe{width:300px;height:300px}.tq-story-pip{left:13%}.tq-story-intro{padding:65px 22px}.tq-story-value-grid{grid-template-columns:1fr}.tq-story-value-grid article{min-height:0}.tq-story-promise{grid-template-columns:1fr;text-align:center;margin:65px auto}.tq-story-promise__pip{min-height:250px}.tq-story-promise blockquote{text-align:left}.tq-story-final{min-height:430px}}
@media(prefers-reduced-motion:reduce){.tq-story-hero__art>svg path,.tq-story-pip,.tq-story-promise__pip::after{animation:none!important}}

/* ============================================================
   PRIMITIVES
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 22px;
  font-size: 17px;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
  position: relative;
  white-space: nowrap;
}
.btn--primary {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 var(--press) 0 color-mix(in oklab, var(--primary) 70%, #000);
}
[data-theme="neon"] .btn--primary { box-shadow: 0 var(--press) 0 #a96c06, var(--glow) var(--ring); }
.btn--primary:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(var(--press)); box-shadow: 0 0 0 color-mix(in oklab, var(--primary) 70%, #000); }
.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border: var(--card-border-w) solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { transform: translateY(-1px); border-color: var(--primary); }
.btn--lg { font-size: 20px; padding: 18px 30px; border-radius: var(--radius); white-space: normal; }
.btn--sm { font-size: 14px; padding: 9px 14px; min-height: 44px; }
.btn--block { width: 100%; justify-content: center; white-space: normal; }

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: var(--card-border-w) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: var(--sp-5); }

/* ---- Chips / Pills ---- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; padding: 7px 14px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  border: 2px solid var(--border);
}
.chip--on { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
button.chip { min-height: 44px; } /* tappable chips (arcade filters) meet the 44px target */

/* ---- Pills for tags ---- */
.tag {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .6px;
  padding: 4px 10px; border-radius: 999px;
}

/* ---- Badges (icon tiles) ---- */
.tile {
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  aspect-ratio: 1;
}

/* ---- XP / progress bar ---- */
.bar {
  height: 14px; border-radius: 999px; background: var(--surface-2);
  border: 2px solid var(--border); overflow: hidden; position: relative;
}
.bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--xp), color-mix(in oklab, var(--xp) 70%, #ff9d2f));
  transition: width .5s cubic-bezier(.2,.9,.3,1);
}
[data-theme="neon"] .bar > i { box-shadow: 0 0 14px var(--xp); }

/* ---- Lock / premium overlay ---- */
.locked { position: relative; }
.locked::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  backdrop-filter: blur(1.5px);
}

/* Mono label for placeholders */
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* Image placeholder (drop real art here) */
.ph {
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--ink) 7%, transparent) 0 8px,
    transparent 8px 16px);
  display: grid; place-items: center; text-align: center;
  color: var(--ink-soft); border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}
.ph .mono { font-size: 11px; opacity: .8; padding: 6px 10px; }

/* utility */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--sp-1);} .gap-2{gap:var(--sp-2);} .gap-3{gap:var(--sp-3);}
.gap-4 { gap: var(--sp-4);} .gap-5{gap:var(--sp-5);} .gap-6{gap:var(--sp-6);}
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.middle { align-items: center; }
.grow { flex: 1; }
.soft { color: var(--ink-soft); }
.muted-line { height: 2px; background: var(--border); border: none; border-radius: 2px; }

/* scrollbars in panels */
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

@keyframes pop { 0%{transform:scale(.85)} 60%{transform:scale(1.05)} 100%{transform:scale(1)} }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes wig { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
.pop { animation: pop .35s cubic-bezier(.2,.9,.3,1) both; }
.floaty { animation: floaty 3.5s ease-in-out infinite; }

/* Never let entrance animations hide content when motion is reduced/disabled. */
@media (prefers-reduced-motion: reduce) {
  .pop, .floaty { animation: none !important; opacity: 1 !important; }
}

/* ---- celebration confetti ---- */
@keyframes confettiFall { 0% { transform: translateY(-12vh) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(540deg); opacity: .9; } }
.confetti { position: absolute; top: -5vh; animation: confettiFall 2.6s linear forwards; }
/* ---- loading dots + skeleton ---- */
@keyframes dotPulse { 0%,100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1); opacity: 1; } }
.loaddot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); animation: dotPulse 1s ease-in-out infinite; }
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in oklab, var(--surface-2) 60%, var(--border)) 50%, var(--surface-2) 75%); background-size: 400px 100%; animation: shimmer 1.4s linear infinite; }

/* ---- Accessibility toggles ---- */
.dyslexia, .dyslexia * { font-family: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif !important; letter-spacing: .3px; }
/* Large-text accessibility. `zoom` reflows cleanly and is supported in
   Chrome/Safari and modern Firefox (126+); fall back to font-size for older
   browsers without zoom so it's never a no-op. */
.big-text { zoom: 1.14; }
@supports not (zoom: 1) { .big-text { font-size: 114%; } }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }

/* ---- Shop animations ---- */
.shop-tile { transition: transform .14s cubic-bezier(.2,.9,.3,1), box-shadow .14s ease; }
.shop-tile:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(80,50,20,.16) !important; }
.shop-tile:hover .shop-badge { transform: rotate(-6deg) scale(1.08); }
.shop-tile:active { transform: translateY(-1px) scale(.99); }
.shop-badge { transition: transform .18s cubic-bezier(.2,1.4,.4,1); }
/* the previewed item springing onto Pip */
@keyframes tryOn { 0% { transform: scale(.4) rotate(-25deg); opacity: 0; } 55% { transform: scale(1.18) rotate(8deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.try-on { animation: tryOn .5s cubic-bezier(.2,.9,.3,1) both; }
@keyframes previewBob { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-10px) scale(1.03); } }
.preview-bob { animation: previewBob .5s ease; }
/* featured shelf sparkle */
@keyframes shimmer2 { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } }
.featured-glow { position: relative; overflow: hidden; }
.featured-glow::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); background-size: 220% 100%; animation: shimmer2 3.2s ease-in-out infinite; }
/* coin burst on buy */
@keyframes coinPop { 0% { transform: translateY(0) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-46px) scale(1); opacity: 0; } }
.coinbit { position: absolute; font-size: 16px; animation: coinPop .7s ease-out forwards; }

/* ---- Collectible badges (rarity glow, foil, float, twinkle) ---- */
.badge-mount svg { width: 100%; height: auto; display: block; }
.badge-float { animation: floaty 3.4s ease-in-out infinite; }
.rare-glow { filter: drop-shadow(0 0 6px rgba(63,127,224,.4)); }
.epic-glow { filter: drop-shadow(0 0 8px rgba(139,77,255,.45)); }
.legendary-glow { filter: drop-shadow(0 0 10px rgba(245,166,35,.55)); }
.badge-card { position: relative; border-radius: 18px; overflow: hidden; }
.badge-card.holo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.7) 45%, rgba(180,230,255,.5) 50%, rgba(255,210,150,.5) 55%, transparent 70%);
  background-size: 280% 280%; mix-blend-mode: overlay; animation: foil 3s linear infinite; }
@keyframes foil { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.badge-mount .sparks text { animation: twinkle 1.8s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
.reduce-motion .badge-card.holo::after, .reduce-motion .badge-float, .reduce-motion .sparks text { animation: none !important; }

/* ---- Balloon Pop arcade ---- */
@keyframes balloonBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-14px); } }
.balloon-bob { animation: balloonBob 2.8s ease-in-out infinite; transition: transform .1s ease; }
.balloon-bob:hover { filter: brightness(1.05); }
.balloon-bob:active { transform: translateX(-50%) scale(.94); }
.reduce-motion .balloon-bob { animation: none !important; }

/* ---- Arcade "Brain Games" featured tiles (extra polish) ----
   Per-tile hue comes in via the inline custom property --g. A gentle pulsing
   glow ring + lift-on-hover + a shimmer sweep over the art make these
   full-canvas games feel premium and tappable without shouting. */
.arcade-brain {
  --g: var(--primary);
  position: relative;
  border: 2px solid color-mix(in oklab, var(--g) 50%, var(--border)) !important;
  transition: transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease, border-color .22s ease;
  animation: brainPulse 3.6s ease-in-out infinite;
}
@keyframes brainPulse {
  0%,100% { box-shadow: 0 6px 20px color-mix(in oklab, var(--g) 20%, transparent), 0 2px 6px rgba(0,0,0,.06); }
  50%     { box-shadow: 0 11px 30px color-mix(in oklab, var(--g) 34%, transparent), 0 2px 6px rgba(0,0,0,.06); }
}
.arcade-brain:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--g) 82%, transparent) !important;
  box-shadow: 0 16px 40px color-mix(in oklab, var(--g) 42%, transparent), 0 4px 10px rgba(0,0,0,.08) !important;
  animation-play-state: paused;
}
.arcade-brain:active { transform: translateY(-2px) scale(.995); }
.arcade-brain .brain-head { position: relative; overflow: hidden; }
.arcade-brain .brain-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  background-size: 220% 100%; animation: shimmer2 3.6s ease-in-out infinite;
}
.arcade-brain .brain-icon {
  filter: drop-shadow(0 5px 12px color-mix(in oklab, var(--g) 55%, transparent));
  transition: transform .22s cubic-bezier(.2,1.4,.4,1);
}
.arcade-brain:hover .brain-icon { transform: scale(1.12) rotate(-3deg); }
.reduce-motion .arcade-brain, .reduce-motion .arcade-brain .brain-head::after { animation: none !important; }

/* ---- Full-screen during active arcade play (hide app chrome) ---- */
.game-active > header { display: none !important; }
.game-active > .nav-mobile { display: none !important; }
.game-active > main { padding-bottom: 0 !important; }

/* ---- Embodied tutor "Pip" stage (pip-stage.jsx) ---- */
.tern-mark { display:inline-grid; place-items:center; flex:0 0 auto; filter:drop-shadow(0 4px 8px rgba(6,54,64,.18)); }
.tern-mark svg { display:block; overflow:visible; }
.tern-mascot { filter:drop-shadow(0 8px 11px rgba(8,54,64,.16)); }
.tern-mascot svg { display:block; overflow:visible; }
.tern-mascot .tern-wing { transform-box:fill-box; transform-origin:center; transition:transform .24s cubic-bezier(.2,1.3,.4,1); }
.tern-mascot .tern-wing--wave { animation:ternWave 1.15s ease-in-out infinite; transform-origin:20% 82%; }
.tern-mascot .tern-wing--cheer { animation:ternCheer 1.45s ease-in-out infinite; transform-origin:50% 85%; }
.tern-mascot .tern-wing--point { animation:ternPoint .9s ease-in-out infinite alternate; }
.tern-mascot .tern-head--think { transform-box:fill-box; transform-origin:50% 70%; animation:ternThink 2.4s ease-in-out infinite; }
@keyframes ternWave { 0%,100%{transform:rotate(0)} 45%{transform:rotate(9deg)} 70%{transform:rotate(-4deg)} }
@keyframes ternCheer { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-2px) rotate(3deg)} }
@keyframes ternPoint { from{transform:translateX(0)} to{transform:translateX(2px)} }
@keyframes ternThink { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-4deg)} }
@keyframes pipRing { 0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.05); opacity: .65; } }
.pip-ring { animation: pipRing 1.1s ease-in-out infinite; }
@keyframes pipTalk { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1.15); } }
.pip-talk { animation: pipTalk .26s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
/* attention system: warm "ready to help" halo (NOT a mic indicator), ambient bob,
   and a brief brighten-pulse "nod" for calm first-try-correct acknowledgement */
.pip-glow { transition: opacity .9s ease; }
@keyframes pipGlowPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.pip-glow--pulse { animation: pipGlowPulse .8s ease-in-out 2; }
@keyframes pipBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pip-bob { animation: pipBob 2.8s ease-in-out infinite; }
.reduce-motion .pip-ring, .reduce-motion .pip-talk,
.reduce-motion .pip-glow--pulse, .reduce-motion .pip-bob,
.reduce-motion .tern-wing, .reduce-motion .tern-head { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tern-mascot .tern-wing, .tern-mascot .tern-head { animation:none !important; }
}