/* ============================================================
   EDUQUEST AI — DESIGN TOKENS
   Palette: Ink Navy #12132B · Void Purple #1B1B3A · Quest Teal #2DD4BF
            Ember Gold #FFB627 · Boss Crimson #FF5C7A · Mist White #F1F0FA
   Type: Space Grotesk (display) · Inter (body) · JetBrains Mono (HUD numerics)
   ============================================================ */

:root{
  --ink:#12132B;
  --void:#1B1B3A;
  --void-2:#232449;
  --void-3:#2B2C57;
  --teal:#2DD4BF;
  --teal-dim:#1B8C7E;
  --gold:#FFB627;
  --crimson:#FF5C7A;
  --mist:#F1F0FA;
  --lavender:#9997C4;
  --blue:#7C9CFF;
  --line: rgba(241,240,250,0.08);
  --shadow: 0 12px 32px rgba(0,0,0,0.35);
  --radius: 18px;
  --radius-sm: 12px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

body[data-theme="theme_sunset"]{ --teal:#FF8A5B; --blue:#FFB627; --ink:#241323; --void:#331B33; --void-2:#3E223E; }
body[data-theme="theme_ocean"]{ --teal:#38BDF8; --gold:#5EEAD4; --ink:#0B1B2B; --void:#0F2A3F; --void-2:#123350; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--mist);
  font-family:var(--font-body);
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
.hidden{ display:none !important; }
button{ font-family:inherit; cursor:pointer; }
input,select{ font-family:inherit; }
h1,h2,h3{ font-family:var(--font-display); margin:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ============================================================
   ONBOARDING
   ============================================================ */
#onboarding{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 10%, rgba(45,212,191,0.16), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(255,182,39,0.12), transparent 45%),
    var(--ink);
  padding:24px;
}
.ob-shell{ width:100%; max-width:460px; text-align:center; }
.ob-logo{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:36px; }
.ob-logo-mark{
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:16px;
}
.ob-logo-text{ font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:0.2px; }
.ob-logo-text span{ color:var(--teal); }

.ob-screen{ display:none; animation:fadeUp .45s ease; }
.ob-screen.active{ display:block; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

.ob-hero-badge{
  display:inline-block; padding:6px 14px; border-radius:999px;
  background:rgba(45,212,191,0.12); color:var(--teal); font-size:13px; font-weight:600;
  margin-bottom:18px; border:1px solid rgba(45,212,191,0.3);
}
.ob-screen h1{ font-size:38px; line-height:1.15; margin-bottom:14px; }
.ob-screen h2{ font-size:26px; margin-bottom:8px; }
.ob-sub{ color:var(--lavender); font-size:15px; line-height:1.5; margin:0 0 28px; }

.ob-choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px; }
.ob-subject-grid{ grid-template-columns:1fr 1fr; }
.ob-school-choice, .ob-subject-choice{
  background:var(--void); border:2px solid var(--line); border-radius:var(--radius);
  padding:22px 12px; color:var(--mist); transition:.15s;
}
.ob-school-choice:hover, .ob-subject-choice:hover{ border-color:var(--teal); transform:translateY(-2px); }
.ob-school-choice.selected, .ob-subject-choice.selected{
  border-color:var(--teal); background:rgba(45,212,191,0.12);
  box-shadow:0 0 0 3px rgba(45,212,191,0.18);
}
.ob-choice-icon{ font-size:30px; margin-bottom:8px; }
.ob-choice-label{ font-weight:700; font-size:15px; }
.ob-choice-hint{ color:var(--lavender); font-size:12px; margin-top:2px; }

.avatar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.avatar-choice{
  aspect-ratio:1; border-radius:16px; font-size:26px; background:var(--void);
  border:2px solid var(--line); display:flex; align-items:center; justify-content:center; transition:.15s;
}
.avatar-choice:hover{ transform:translateY(-2px); border-color:var(--teal); }
.avatar-choice.selected{ border-color:var(--gold); background:rgba(255,182,39,0.15); box-shadow:0 0 0 3px rgba(255,182,39,0.2); }

.ob-name-input{
  width:100%; padding:16px 18px; border-radius:var(--radius-sm); border:2px solid var(--line);
  background:var(--void); color:var(--mist); font-size:17px; margin-bottom:22px; text-align:center;
}
.ob-name-input:focus{ outline:none; border-color:var(--teal); }

.ob-dots{ display:flex; gap:8px; justify-content:center; margin-top:30px; }
.ob-dot{ width:7px; height:7px; border-radius:50%; background:var(--line); }
.ob-dot.active{ background:var(--teal); width:20px; border-radius:4px; transition:.25s; }

.btn-primary{
  background:linear-gradient(135deg, var(--teal), var(--teal-dim));
  color:var(--ink); border:none; padding:15px 26px; border-radius:14px;
  font-weight:700; font-size:15px; transition:.15s; box-shadow:0 6px 18px rgba(45,212,191,0.28);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(45,212,191,0.36); }
.btn-primary:active{ transform:translateY(0); }
.btn-lg{ width:100%; padding:17px; font-size:16px; }
.btn-glow{ background:linear-gradient(135deg, var(--gold), #FF8A3D); box-shadow:0 6px 22px rgba(255,182,39,0.35); }
.btn-ghost{
  background:transparent; border:2px solid var(--line); color:var(--mist);
  padding:13px 24px; border-radius:14px; font-weight:600;
}
.btn-danger{ background:rgba(255,92,122,0.14); color:var(--crimson); border:2px solid rgba(255,92,122,0.4); padding:13px 24px; border-radius:14px; font-weight:700; }
.btn-small{ background:var(--gold); color:var(--ink); border:none; padding:8px 14px; border-radius:10px; font-weight:700; font-size:12.5px; }

/* ============================================================
   APP SHELL / NAV
   ============================================================ */
#app{ display:flex; min-height:100vh; }
#main-nav{
  width:220px; flex-shrink:0; background:var(--void); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:22px 14px; gap:4px; position:sticky; top:0; height:100vh;
}
.nav-brand{ display:flex; align-items:center; gap:10px; padding:6px 10px 22px; }
.nav-brand-mark{ width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--teal),var(--blue)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:13px; }
.nav-brand-text{ font-family:var(--font-display); font-weight:700; font-size:16px; }
.nav-extra{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.nav-item{
  display:flex; align-items:center; gap:12px; background:transparent; border:none; color:var(--lavender);
  padding:11px 12px; border-radius:12px; font-size:14px; font-weight:600; text-align:left; transition:.15s;
}
.nav-item:hover{ background:var(--void-2); color:var(--mist); }
.nav-item.active{ background:rgba(45,212,191,0.14); color:var(--teal); }
.nav-icon{ font-size:17px; width:20px; text-align:center; }

#main-content{ flex:1; padding:26px 30px 100px; max-width:840px; margin:0 auto; width:100%; }

.screen{ display:none; animation:fadeUp .3s ease; }
.screen.active{ display:block; }
.screen-title{ font-size:24px; margin-bottom:4px; }
.screen-sub{ color:var(--lavender); font-size:14px; margin:0 0 20px; }
.screen-note{ color:var(--lavender); font-size:12.5px; margin-top:18px; line-height:1.5; }
.section-subhead{ font-size:16px; margin:26px 0 12px; font-family:var(--font-display); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.dash-player-card{ display:flex; align-items:center; gap:16px; background:var(--void); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; flex:1; min-width:260px; }
.avatar-circle{
  width:64px; height:64px; border-radius:50%; background:var(--void-2); border:3px solid var(--teal);
  display:flex; align-items:center; justify-content:center; font-size:32px; flex-shrink:0;
}
.avatar-circle.frame-frame_gold{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(255,182,39,0.2); }
.avatar-circle.frame-frame_neon{ border-color:#39FF88; box-shadow:0 0 14px rgba(57,255,136,0.55); }
.dash-player-info{ flex:1; }
.dash-name{ font-family:var(--font-display); font-weight:700; font-size:17px; }
.dash-level{ font-family:var(--font-mono); font-size:12px; color:var(--gold); font-weight:700; letter-spacing:0.5px; margin:2px 0 8px; }
.xp-track{ height:9px; background:var(--void-2); border-radius:6px; overflow:hidden; }
.xp-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--teal),var(--blue)); border-radius:6px; transition:width .5s ease; }
.dash-xp-text{ font-family:var(--font-mono); font-size:11px; color:var(--lavender); margin-top:5px; }

.dash-currency{ display:flex; gap:10px; flex-wrap:wrap; }
.currency-pill{
  background:var(--void); border:1px solid var(--line); border-radius:999px; padding:10px 16px;
  font-family:var(--font-mono); font-weight:700; font-size:14px; white-space:nowrap;
}

.dash-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
.stat-chip{ background:var(--void); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 8px; text-align:center; }
.stat-chip-val{ font-family:var(--font-mono); font-weight:700; font-size:16px; color:var(--teal); }
.stat-chip-label{ font-size:11px; color:var(--lavender); margin-top:3px; }

.continue-btn{
  width:100%; text-align:left; background:linear-gradient(120deg, rgba(45,212,191,0.16), rgba(124,156,255,0.14));
  border:1.5px solid rgba(45,212,191,0.4); border-radius:var(--radius); padding:20px 24px; margin-bottom:20px;
  display:flex; flex-direction:column; gap:4px; transition:.15s; color:var(--mist);
}
.continue-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.continue-btn-label{ font-size:12px; letter-spacing:1px; color:var(--lavender); font-weight:700; }
.continue-btn-sub{ font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--teal); }

.mission-card{ background:var(--void); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:14px; }
.mission-head{ font-size:12.5px; font-weight:700; letter-spacing:0.5px; color:var(--gold); margin-bottom:8px; }
.mission-text{ font-size:14px; margin-bottom:10px; }
.mission-track{ height:9px; background:var(--void-2); border-radius:6px; overflow:hidden; }
.mission-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--gold),#FF8A3D); border-radius:6px; transition:width .4s; }
.mission-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-family:var(--font-mono); font-size:12px; color:var(--lavender); }

.recommend-card{
  background:linear-gradient(120deg, rgba(255,92,122,0.1), rgba(255,182,39,0.08));
  border:1.5px dashed rgba(255,182,39,0.4); border-radius:var(--radius); padding:16px 18px; cursor:pointer;
}
.rec-title{ font-size:11.5px; font-weight:700; letter-spacing:1px; color:var(--gold); margin-bottom:6px; }
.rec-topic{ font-family:var(--font-display); font-weight:700; font-size:17px; margin-bottom:3px; }
.rec-sub{ font-size:13px; color:var(--lavender); }

/* ============================================================
   STORY MAP (signature element)
   ============================================================ */
.story-map{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:0;
  padding:20px 0 40px;
}
.story-chapter-title{
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--teal);
  margin:26px 0 14px; text-align:center; text-transform:uppercase; letter-spacing:1px;
}
.story-node{
  width:110px; min-height:96px; border-radius:20px; background:var(--void); border:2px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px 8px;
  margin:10px 0; position:relative; transition:.15s; color:var(--mist);
}
.story-node:not(.locked):hover{ transform:translateY(-3px) scale(1.03); border-color:var(--teal); box-shadow:0 8px 20px rgba(45,212,191,0.25); }
.story-node::before{
  content:""; position:absolute; top:-18px; left:50%; width:2px; height:18px;
  background:repeating-linear-gradient(var(--line) 0 6px, transparent 6px 12px); transform:translateX(-50%);
}
.story-node:first-child::before, .story-chapter-title + .story-node::before{ display:none; }
.story-node.locked{ opacity:0.45; cursor:not-allowed; }
.story-node.boss-node{ border-color:rgba(255,92,122,0.5); background:rgba(255,92,122,0.08); }
.story-node.boss-node:not(.locked):hover{ border-color:var(--crimson); box-shadow:0 8px 20px rgba(255,92,122,0.3); }
.story-node:nth-child(odd){ margin-left:-70px; }
.story-node:nth-child(even){ margin-left:70px; }
.story-node-icon{ font-size:26px; }
.story-node-name{ font-size:12px; font-weight:700; text-align:center; }
.story-node-stars{ font-size:11px; }

/* ============================================================
   GAME MODES
   ============================================================ */
.modes-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mode-card{
  background:var(--void); border:1.5px solid var(--line); border-radius:var(--radius); padding:22px 16px;
  text-align:left; color:var(--mist); transition:.15s;
}
.mode-card:hover{ transform:translateY(-3px); border-color:var(--teal); box-shadow:var(--shadow); }
.mode-icon{ font-size:30px; margin-bottom:8px; }
.mode-name{ font-family:var(--font-display); font-weight:700; font-size:16px; margin-bottom:5px; }
.mode-desc{ font-size:12.5px; color:var(--lavender); line-height:1.4; }

/* ============================================================
   QUIZ ENGINE SCREEN
   ============================================================ */
.quiz-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.quiz-quit{ background:var(--void); border:1px solid var(--line); color:var(--lavender); width:34px; height:34px; border-radius:10px; font-size:15px; }
.quiz-mode-label{ font-family:var(--font-display); font-weight:700; font-size:15px; }
.quiz-progress{ font-family:var(--font-mono); font-size:13px; color:var(--lavender); }
.quiz-progress-track{ height:6px; background:var(--void-2); border-radius:6px; overflow:hidden; margin-bottom:16px; }
.quiz-progress-fill{ height:100%; width:0%; background:var(--teal); transition:width .3s; }

.quiz-hud{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.quiz-score{ font-family:var(--font-mono); font-weight:700; color:var(--gold); }
.quiz-streak{ font-family:var(--font-mono); font-weight:700; color:var(--crimson); }
.quiz-hearts{ display:flex; gap:4px; margin-left:auto; font-size:16px; }
.quiz-hearts .heart.lost{ opacity:0.25; filter:grayscale(1); }

.quiz-timer-wrap{ margin-bottom:16px; }
.quiz-timer-track{ height:8px; background:var(--void-2); border-radius:6px; overflow:hidden; }
.quiz-timer-bar{ height:100%; width:100%; background:var(--teal); border-radius:6px; transition:width .1s linear; }
.quiz-timer-bar.danger{ background:var(--crimson); }
.quiz-timer-text{ font-family:var(--font-mono); font-size:11px; color:var(--lavender); margin-top:4px; text-align:right; }

.boss-wrap{
  text-align:center; margin:0 0 18px; padding:14px 16px 12px;
  border:1px solid rgba(124,156,255,.18); border-radius:22px;
  background:linear-gradient(180deg,rgba(23,31,68,.96),rgba(10,17,42,.98));
  overflow:hidden; position:relative;
}
.math-boss-kicker{font-size:9px;letter-spacing:.15em;font-weight:1000;color:#91a6da;margin-bottom:7px}
.math-boss-arena{min-height:142px;display:grid;grid-template-columns:1fr 52px 1fr;align-items:end;gap:8px;position:relative}
.math-boss-fighter{display:grid;justify-items:center;gap:4px;font-size:10px;letter-spacing:.09em;color:#b8c7ec}
.boss-player-figure{width:92px;height:108px;transition:transform .2s,filter .2s}
.boss-player-figure .numo-svg{width:100%;height:100%}
.boss-figure{
  width:92px;height:92px;border-radius:31px;display:grid;place-items:center;position:relative;
  font:1000 44px/1 var(--font-display);color:#fff1a8;
  background:radial-gradient(circle at 35% 25%,#9258ff,#431b78 58%,#22103e);
  border:3px solid rgba(211,173,255,.7);
  box-shadow:0 10px 0 rgba(24,7,45,.55),0 0 30px rgba(139,92,246,.28);
  transition:transform .18s,filter .18s;
}
.boss-figure small{position:absolute;bottom:10px;font:900 9px/1 var(--font-mono);color:#e9d5ff;letter-spacing:.12em}
.math-boss-vs{align-self:center;font:1000 17px/1 var(--font-display);color:#ffdd77;text-shadow:0 0 16px rgba(250,204,21,.3)}
.math-boss-impact{position:absolute;left:50%;top:48%;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%) scale(0);pointer-events:none}
.boss-wrap.player-attack .boss-player-figure{animation:mathHeroAttack .42s ease}
.boss-wrap.boss-hit .boss-figure{animation:mathBossHit .42s ease}
.boss-wrap.boss-attack .boss-figure{animation:mathBossAttack .42s ease}
.boss-wrap.player-hit .boss-player-figure{animation:mathPlayerHit .42s ease;filter:saturate(.7)}
.boss-wrap.player-attack .math-boss-impact{animation:mathImpactGood .45s ease}
.boss-wrap.boss-attack .math-boss-impact{animation:mathImpactBad .45s ease}
@keyframes mathHeroAttack{45%{transform:translateX(34px) rotate(5deg) scale(1.06)}100%{transform:none}}
@keyframes mathBossHit{25%{transform:translateX(11px) rotate(5deg)}55%{transform:translateX(-9px) rotate(-4deg);filter:brightness(1.5)}100%{transform:none}}
@keyframes mathBossAttack{45%{transform:translateX(-34px) rotate(-5deg) scale(1.07)}100%{transform:none}}
@keyframes mathPlayerHit{25%{transform:translateX(-10px) rotate(-5deg)}55%{transform:translateX(8px) rotate(4deg)}100%{transform:none}}
@keyframes mathImpactGood{45%{transform:translate(-50%,-50%) scale(4);background:rgba(45,212,191,.7);box-shadow:0 0 28px #2dd4bf}100%{opacity:0}}
@keyframes mathImpactBad{45%{transform:translate(-50%,-50%) scale(4);background:rgba(244,63,94,.72);box-shadow:0 0 28px #f43f5e}100%{opacity:0}}
.boss-hp-row,.player-hp-row{display:flex;align-items:center;gap:8px;margin-top:7px}
.math-boss-hp-label{width:46px;text-align:left;font:1000 8px/1 var(--font-mono);letter-spacing:.1em;color:#8798c2}
.boss-hp-track,.player-hp-track{flex:1;height:12px;background:var(--void-2);border-radius:8px;overflow:hidden}
.boss-hp-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--crimson),#FF8A5B);transition:width .35s}
.player-hp-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--teal),var(--blue));transition:width .35s}
.boss-hp-text{font-family:var(--font-mono);font-size:10px;color:var(--lavender);width:82px;text-align:right}
.math-boss-status{min-height:26px;margin-top:7px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.035);font-size:10px;font-weight:850;color:#b9c6e8;display:flex;align-items:center;justify-content:center;gap:6px}
.math-boss-status.good{color:#82edd1;background:rgba(45,212,191,.07)}
.math-boss-status.good::before{content:"⚡";font-size:11px}
.math-boss-status.bad::before{content:"💥";font-size:11px}
.math-boss-status.bad{color:#fda4af;background:rgba(244,63,94,.07)}
.math-boss-result{margin:16px 0 2px;padding:14px;border-radius:17px;background:rgba(124,58,237,.07);border:1px solid rgba(167,139,250,.18)}
.math-boss-result-title{font:900 14px/1.2 var(--font-display);color:#e8ddff;margin-bottom:10px}
.math-boss-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.math-boss-result-grid>div{padding:9px 7px;border-radius:12px;background:rgba(255,255,255,.04)}
.math-boss-result-grid small{display:block;font-size:7px;letter-spacing:.1em;color:#8e9cc2;font-weight:1000}
.math-boss-result-grid strong{display:block;margin-top:4px;font-size:14px}
.math-boss-result p{margin:9px 0 0;font-size:10px;color:#9aa9cf}
@media(max-width:620px){
  .boss-wrap{padding:10px 9px}
  .math-boss-arena{min-height:116px;grid-template-columns:1fr 38px 1fr}
  .boss-player-figure{width:72px;height:84px}
  .boss-figure{width:72px;height:72px;border-radius:24px;font-size:34px}
  .boss-hp-text{width:67px;font-size:8px}
  .math-boss-hp-label{width:38px;font-size:7px}
  .math-boss-result-grid{grid-template-columns:1fr}
}

.quiz-question-card{
  background:var(--void); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px;
  text-align:center; margin-bottom:18px; min-height:70px; display:flex; align-items:center; justify-content:center;
}
.quiz-question-text{ font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.4; }
/* Phase 7.34.1 — visual questions: worksheet-style large object above prompt */
.quiz-question-card.visual-question-card{
  min-height:220px;
  padding:22px;
}
.visual-question-card .quiz-question-text,
.student-live-question.visual-question-card{
  width:100%;
}
.quiz-question-visual{
  width:132px;
  height:132px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  border-radius:22px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  overflow:hidden;
}
.quiz-question-visual-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:8px;
  box-sizing:border-box;
}
.quiz-question-prompt{
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  line-height:1.35;
  text-align:center;
}
.student-live-question.visual-question-card{
  text-align:center;
  padding:20px;
}
@media (max-width:600px){
  .quiz-question-card.visual-question-card{ min-height:200px; padding:18px 14px; }
  .quiz-question-visual{ width:116px; height:116px; }
  .quiz-question-prompt{ font-size:17px; }
}
.quiz-question-card.shake{ animation:shake .35s; }
.quiz-question-card.bounce{ animation:bounce .4s; }
@keyframes shake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-6px);} 80%{transform:translateX(6px);} }
@keyframes bounce{ 0%{transform:scale(1);} 40%{transform:scale(1.03);} 100%{transform:scale(1);} }

.quiz-answers{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.quiz-answers.type-tf{ grid-template-columns:1fr 1fr; }
.quiz-answers.type-fill, .quiz-answers.type-arrange{ grid-template-columns:1fr; }
.answer-btn{
  background:var(--void); border:2px solid var(--line); border-radius:var(--radius-sm); padding:18px 14px;
  color:var(--mist); font-size:15px; font-weight:600; text-align:center; transition:.12s;
}
.answer-btn:hover{ border-color:var(--teal); transform:translateY(-2px); }
.answer-btn.correct{ border-color:var(--teal); background:rgba(45,212,191,0.18); }
.answer-btn.wrong{ border-color:var(--crimson); background:rgba(255,92,122,0.18); }

.fill-wrap{ display:flex; gap:10px; }
.fill-input{ flex:1; padding:16px; border-radius:var(--radius-sm); border:2px solid var(--line); background:var(--void); color:var(--mist); font-size:15px; }
.fill-input:focus{ outline:none; border-color:var(--teal); }

.arrange-wrap{ display:flex; flex-direction:column; gap:12px; }
.arrange-target{ min-height:56px; border:2px dashed var(--line); border-radius:var(--radius-sm); padding:10px; display:flex; flex-wrap:wrap; gap:8px; background:var(--void); }
.arrange-bank{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.arrange-chip{ background:var(--void-2); border:1.5px solid var(--line); border-radius:10px; padding:9px 14px; font-weight:600; color:var(--mist); }
.arrange-chip.used{ opacity:0.3; }
.arrange-chip.placed{ background:rgba(45,212,191,0.16); border-color:var(--teal); }
.submit-btn{ background:linear-gradient(135deg,var(--teal),var(--teal-dim)); border:none; color:var(--ink); font-weight:700; }

.quiz-feedback{ margin-top:16px; padding:16px 18px; border-radius:var(--radius-sm); animation:fadeUp .25s; }
.quiz-feedback.good{ background:rgba(45,212,191,0.14); border:1px solid rgba(45,212,191,0.4); }
.quiz-feedback.bad{ background:rgba(255,92,122,0.12); border:1px solid rgba(255,92,122,0.35); }
.fb-title{ font-family:var(--font-display); font-weight:700; font-size:16px; margin-bottom:4px; }
.fb-correct{ font-size:13.5px; margin-bottom:4px; }
.fb-explain{ font-size:13px; color:var(--lavender); line-height:1.5; }

.nova-fab{
  position:fixed; right:22px; bottom:22px; width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), #FF8A3D); border:none; font-size:24px; box-shadow:0 8px 20px rgba(255,182,39,0.4);
  z-index:40;
}

/* ============================================================
   RESULTS
   ============================================================ */
#screen-results{ display:none; }
#screen-results.active{ display:flex; justify-content:center; padding-top:20px; }
.results-card{
  background:var(--void); border:1px solid var(--line); border-radius:24px; padding:32px 26px;
  max-width:420px; width:100%; text-align:center; animation:fadeUp .35s;
}
.results-title{ font-size:24px; margin-bottom:8px; color:var(--gold); }
.results-stars{ font-size:30px; margin-bottom:14px; letter-spacing:4px; }
.results-score-big{ font-family:var(--font-mono); font-size:34px; font-weight:700; color:var(--teal); margin-bottom:18px; }
.results-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.results-stat{ background:var(--void-2); border-radius:12px; padding:12px 6px; }
.results-stat-val{ font-family:var(--font-mono); font-weight:700; font-size:17px; }
.results-stat-label{ font-size:11px; color:var(--lavender); margin-top:2px; }
.results-rewards{ display:flex; gap:10px; justify-content:center; margin-bottom:22px; }
.reward-pill{ background:rgba(255,182,39,0.15); border:1px solid rgba(255,182,39,0.4); color:var(--gold); padding:8px 16px; border-radius:999px; font-family:var(--font-mono); font-weight:700; font-size:13px; }
.results-actions{ display:flex; flex-direction:column; gap:10px; }

/* ============================================================
   STATS / ACHIEVEMENTS / LEADERBOARD / SHOP
   ============================================================ */
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:10px; }
.stat-block{ background:var(--void); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 10px; text-align:center; }
.stat-block-label{ font-size:11px; color:var(--lavender); margin-bottom:6px; }
.stat-block-val{ font-family:var(--font-mono); font-weight:700; font-size:15px; }
.subject-bars{ display:flex; flex-direction:column; gap:12px; }
.subject-bar-row{ display:flex; align-items:center; gap:12px; }
.subject-bar-label{ width:150px; font-size:13px; font-weight:600; flex-shrink:0; }
.subject-bar-track{ flex:1; height:10px; background:var(--void-2); border-radius:6px; overflow:hidden; }
.subject-bar-fill{ height:100%; border-radius:6px; transition:width .5s; }
.subject-bar-pct{ font-family:var(--font-mono); font-size:12px; width:38px; text-align:right; color:var(--lavender); }

.achv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.achv-card{ background:var(--void); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 14px; text-align:center; opacity:0.55; }
.achv-card.unlocked{ opacity:1; border-color:rgba(255,182,39,0.4); background:rgba(255,182,39,0.06); }
.achv-icon{ font-size:28px; margin-bottom:8px; }
.achv-name{ font-weight:700; font-size:13.5px; margin-bottom:4px; }
.achv-desc{ font-size:11.5px; color:var(--lavender); line-height:1.4; }

.lb-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.lb-tab{ background:var(--void); border:1px solid var(--line); color:var(--lavender); padding:9px 16px; border-radius:999px; font-weight:600; font-size:13px; }
.lb-tab.active{ background:rgba(45,212,191,0.15); border-color:var(--teal); color:var(--teal); }
.lb-list{ display:flex; flex-direction:column; gap:8px; }
.lb-row{ display:flex; align-items:center; gap:12px; background:var(--void); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 14px; }
.lb-row.lb-me{ border-color:var(--teal); background:rgba(45,212,191,0.1); }
.lb-rank{ width:30px; font-weight:700; text-align:center; }
.lb-avatar{ font-size:20px; }
.lb-name{ flex:1; font-weight:600; font-size:13.5px; }
.lb-level{ font-family:var(--font-mono); font-size:12px; color:var(--lavender); }
.lb-xp{ font-family:var(--font-mono); font-size:12px; color:var(--gold); width:70px; text-align:right; }

.shop-balance{ font-family:var(--font-mono); font-weight:700; color:var(--gold); margin-bottom:16px; font-size:16px; }
.shop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.shop-card{ background:var(--void); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 14px; text-align:center; }
.shop-card.owned{ border-color:rgba(45,212,191,0.4); }
.shop-icon{ font-size:28px; margin-bottom:8px; }
.shop-name{ font-weight:700; font-size:13.5px; }
.shop-type{ font-size:11px; color:var(--lavender); text-transform:capitalize; margin-bottom:10px; }
.shop-btn{ background:var(--void-2); border:1px solid var(--line); color:var(--mist); padding:8px 14px; border-radius:10px; font-weight:700; font-size:12.5px; width:100%; }

.future-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px; }
.future-card{ background:var(--void); border:1px dashed var(--line); border-radius:var(--radius-sm); padding:20px 10px; text-align:center; opacity:0.75; }
.future-icon{ font-size:24px; margin-bottom:6px; }
.future-name{ font-size:12.5px; font-weight:600; }
.quicklinks-grid{ margin-bottom:22px; }
.quicklink{ opacity:1; border-style:solid; color:var(--mist); transition:.15s; }
.quicklink:hover{ border-color:var(--teal); transform:translateY(-2px); }

/* ============================================================
   PROFILE
   ============================================================ */
.profile-form{ display:flex; flex-direction:column; gap:6px; max-width:400px; }
.field-label{ font-size:12.5px; font-weight:700; color:var(--lavender); margin:14px 0 6px; text-transform:uppercase; letter-spacing:0.5px; }
.profile-avatar-big{ width:80px; height:80px; font-size:38px; margin-bottom:12px; }
.text-input, .select-input{ padding:13px 14px; border-radius:var(--radius-sm); border:2px solid var(--line); background:var(--void); color:var(--mist); font-size:14px; }
.text-input:focus, .select-input:focus{ outline:none; border-color:var(--teal); }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; text-transform:none; font-size:14px; color:var(--mist); }
.toggle-row input{ width:20px; height:20px; accent-color:var(--teal); }
.profile-form .btn-primary, .profile-form .btn-danger{ margin-top:14px; }

/* ============================================================
   OVERLAYS
   ============================================================ */
.overlay{
  position:fixed; inset:0; background:rgba(10,10,25,0.65); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:60; opacity:0; pointer-events:none; transition:.2s;
}
.overlay.show{ opacity:1; pointer-events:auto; }
.overlay-card{ background:var(--void); border:1px solid var(--line); border-radius:20px; padding:26px; width:90%; max-width:400px; max-height:86vh; overflow-y:auto; }
.overlay-card.small{ max-width:340px; }
.overlay-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.overlay-close{ background:var(--void-2); border:none; color:var(--mist); width:30px; height:30px; border-radius:8px; font-size:14px; }
.overlay-actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }

/* ============================================================
   NOVA AI TUTOR PANEL
   ============================================================ */
.nova-panel{
  position:fixed; right:22px; bottom:88px; width:300px; max-width:calc(100vw - 32px);
  background:var(--void); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  transform:translateY(16px) scale(0.96); opacity:0; pointer-events:none; transition:.2s; z-index:50;
}
.nova-panel.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.nova-head{ display:flex; align-items:center; gap:8px; padding:14px 14px 10px; border-bottom:1px solid var(--line); }
.nova-avatar{ font-size:20px; }
.nova-title{ font-weight:700; font-size:13.5px; flex:1; }
.nova-messages{ padding:14px; max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.nova-msg{ background:var(--void-2); border-radius:12px; padding:10px 12px; font-size:12.5px; line-height:1.5; }
.nova-msg.thinking{ color:var(--lavender); font-style:italic; }

/* ============================================================
   LEVEL UP / TOAST / CONFETTI
   ============================================================ */
.levelup-overlay{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,25,0.75); opacity:0; pointer-events:none; transition:.25s;
}
.levelup-overlay.show{ opacity:1; pointer-events:auto; }
.levelup-card{ text-align:center; animation:levelPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes levelPop{ 0%{transform:scale(0.5); opacity:0;} 60%{transform:scale(1.08);} 100%{transform:scale(1); opacity:1;} }
.levelup-burst{ font-size:54px; margin-bottom:6px; }
.levelup-title{ font-family:var(--font-display); font-size:22px; letter-spacing:2px; color:var(--gold); }
.levelup-level{ font-family:var(--font-mono); font-size:38px; font-weight:700; color:var(--teal); margin:6px 0; }
.levelup-coins{ font-family:var(--font-mono); color:var(--gold); font-size:16px; }

#toast-container{ position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  background:var(--void); border:1px solid var(--teal); color:var(--mist); padding:11px 18px; border-radius:999px;
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; box-shadow:var(--shadow);
  opacity:0; transform:translateY(-12px); transition:.3s;
}
.toast.show{ opacity:1; transform:translateY(0); }

#confetti-container{ position:fixed; inset:0; pointer-events:none; z-index:70; overflow:hidden; }
.confetti-piece{ position:absolute; top:-10px; width:8px; height:12px; border-radius:2px; animation:confettiFall 2s linear forwards; }
@keyframes confettiFall{ to{ transform:translateY(100vh) rotate(540deg); opacity:0.3; } }

/* ============================================================
   RESPONSIVE — bottom nav on mobile
   ============================================================ */
@media (max-width: 860px){
  .dash-stats-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px){
  #app{ flex-direction:column; }
  #main-nav{
    position:fixed; bottom:0; left:0; right:0; top:auto; width:100%; height:auto;
    flex-direction:row; padding:8px 6px calc(8px + env(safe-area-inset-bottom)); border-right:none; border-top:1px solid var(--line);
    z-index:30; justify-content:space-around; align-items:center; gap:0;
  }
  .nav-brand, .nav-extra{ display:none; }
  .nav-item{ flex-direction:column; gap:2px; padding:6px 4px; font-size:10px; flex:1; align-items:center; border-radius:10px; }
  .nav-icon{ font-size:19px; }
  #main-content{ padding:20px 16px 90px; }
  .modes-grid, .achv-grid, .shop-grid, .future-grid{ grid-template-columns:1fr 1fr; }
  .dash-stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .story-node:nth-child(odd){ margin-left:-40px; }
  .story-node:nth-child(even){ margin-left:40px; }
  .nova-panel{ right:12px; left:12px; width:auto; bottom:82px; }
  .nova-fab{ right:16px; bottom:78px; }
}
@media (max-width: 420px){
  .quiz-answers{ grid-template-columns:1fr; }
  .quiz-answers.type-tf{ grid-template-columns:1fr 1fr; }
  .dash-currency{ width:100%; }
}


/* ============================================================
   SUPABASE LIVE CLASSROOM — PHASE 1
   ============================================================ */
.live-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  align-items:start;
}
.live-card{
  background:var(--void);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
}
.live-card-title{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:700;
  margin-bottom:20px;
}
.live-card .text-input{ margin-bottom:16px; }
.live-card .btn-lg{ margin-top:6px; }
.live-status{
  min-height:22px;
  margin-top:12px;
  color:var(--lavender);
  font-size:13px;
}
.live-status.success{ color:var(--teal); }
.live-status.error{ color:var(--crimson); }
.live-kicker{
  color:var(--teal);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:1.5px;
  font-weight:700;
}
.live-room-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  margin:7px 0 24px;
}
.live-code-label{
  color:var(--lavender);
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
}
.live-code{
  text-align:center;
  font-family:var(--font-mono);
  font-size:44px;
  font-weight:700;
  letter-spacing:8px;
  color:var(--gold);
  padding:10px 0 16px;
}
.live-card .btn-ghost{
  display:block;
  margin:0 auto 24px;
}
.live-player-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 0 10px;
  border-top:1px solid var(--line);
  font-weight:700;
}
.live-player-head strong{
  background:rgba(45,212,191,.12);
  border:1px solid rgba(45,212,191,.25);
  color:var(--teal);
  min-width:34px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.live-player-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:80px;
  margin-bottom:18px;
}
.live-player-row{
  display:grid;
  grid-template-columns:28px 12px 1fr;
  gap:8px;
  align-items:center;
  padding:11px 12px;
  border-radius:12px;
  background:var(--void-2);
  border:1px solid var(--line);
}
.live-player-rank{ color:var(--lavender); font-family:var(--font-mono); font-size:12px; }
.live-player-dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 9px rgba(45,212,191,.7); }
.live-player-name{ font-weight:600; }
.live-empty{ color:var(--lavender); text-align:center; padding:24px 8px; }
.live-code-input{
  text-transform:uppercase;
  text-align:center;
  font-family:var(--font-mono);
  font-size:24px !important;
  font-weight:700;
  letter-spacing:5px;
}
.student-waiting-avatar{ font-size:52px; text-align:center; margin:18px 0 10px; }
.student-waiting-text{ text-align:center; font-size:18px; }
.student-room-meta{ text-align:center; color:var(--lavender); font-size:13px; margin:7px 0 22px; }
.live-waiting-pulse{
  text-align:center;
  color:var(--teal);
  background:rgba(45,212,191,.09);
  border:1px solid rgba(45,212,191,.2);
  border-radius:12px;
  padding:14px;
  animation:livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{ opacity:.65; }
  50%{ opacity:1; }
}
@media (max-width:800px){
  .live-grid{ grid-template-columns:1fr; }
  .live-code{ font-size:36px; letter-spacing:6px; }
}


/* ============================================================
   LIVE CLASSROOM — PHASE 2
   ============================================================ */
.live-config-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:14px;
}
.live-config-row .select-input{ width:100%; }
.live-player-row{
  grid-template-columns:28px 12px 1fr auto !important;
}
.live-player-score{
  font-family:var(--font-mono);
  color:var(--gold);
  font-size:12px;
}
.teacher-live-controls{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.teacher-q-meta,
.student-live-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--lavender);
  font-family:var(--font-mono);
  font-size:12px;
  margin-bottom:10px;
}
.teacher-question-preview,
.student-live-question{
  background:var(--void-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  line-height:1.35;
  margin:10px 0 14px;
}
.teacher-answer-meter{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:12px 0;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(45,212,191,.08);
  border:1px solid rgba(45,212,191,.18);
}
.teacher-answer-meter strong{
  color:var(--teal);
  font-family:var(--font-mono);
  font-size:20px;
}
.student-live-timer-track{
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:var(--void-3);
  margin-bottom:14px;
}
.student-live-timer-bar{
  height:100%;
  width:100%;
  background:var(--gold);
  transition:width .2s linear;
}
.student-live-answers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.student-live-answers .answer-btn{
  min-height:64px;
}
.student-live-answers .live-answer-input{
  grid-column:1/-1;
}
.student-live-answers .btn-primary{
  grid-column:1/-1;
}
.selected-live-answer{
  border-color:var(--teal) !important;
  box-shadow:0 0 0 3px rgba(45,212,191,.18) !important;
}
.student-live-feedback{
  min-height:24px;
  text-align:center;
  color:var(--teal);
  margin:14px 0;
  font-weight:600;
}
.student-mini-board{
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:18px;
}
.mini-rank-row,
.final-rank-row{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:10px;
  align-items:center;
  padding:11px 12px;
  border-radius:11px;
  margin-top:8px;
  background:var(--void-2);
  border:1px solid var(--line);
}
.mini-rank-row.me,
.final-rank-row.me{
  border-color:rgba(45,212,191,.5);
  background:rgba(45,212,191,.08);
}
.mini-rank-row strong,
.final-rank-row strong{
  font-family:var(--font-mono);
  color:var(--gold);
}
.teacher-final-board{
  margin-top:20px;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.student-finish-title{
  text-align:center;
  font-family:var(--font-display);
  font-size:26px;
  font-weight:700;
  color:var(--gold);
  margin:18px 0;
}
.student-finish-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}
.student-finish-stats > div{
  text-align:center;
  padding:14px;
  border-radius:12px;
  background:var(--void-2);
  border:1px solid var(--line);
}
.student-finish-stats span{
  display:block;
  color:var(--lavender);
  font-size:12px;
}
.student-finish-stats strong{
  display:block;
  margin-top:4px;
  font-size:22px;
  color:var(--teal);
}
@media (max-width:650px){
  .student-live-answers{ grid-template-columns:1fr; }
  .live-config-row{ grid-template-columns:1fr; }
}


/* ============================================================
   PHASE 2.1 — ARRANGE CHIPS + REVEAL ANSWER
   ============================================================ */
.teacher-question-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
.teacher-question-actions button{
  width:100%;
}
.teacher-reveal-panel{
  margin:14px 0;
  padding:16px;
  border:1px solid rgba(255,182,39,.28);
  background:rgba(255,182,39,.07);
  border-radius:14px;
}
.teacher-reveal-answer{
  font-family:var(--font-display);
  color:var(--gold);
  font-size:21px;
  font-weight:700;
  margin:7px 0;
}
.teacher-reveal-explain{
  color:var(--lavender);
  line-height:1.5;
  font-size:14px;
}

.arrange-live-instruction{
  grid-column:1/-1;
  color:var(--lavender);
  font-size:13px;
  font-weight:600;
}
.arrange-live-target{
  grid-column:1/-1;
  min-height:62px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:12px;
  border:2px dashed rgba(45,212,191,.25);
  background:rgba(45,212,191,.05);
  border-radius:14px;
}
.arrange-live-placeholder{
  color:var(--lavender);
  opacity:.65;
  font-size:13px;
}
.arrange-live-bank{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  padding:12px 0;
}
.arrange-live-chip{
  border:1px solid var(--line);
  background:var(--void-2);
  color:var(--mist);
  padding:11px 14px;
  border-radius:11px;
  font-weight:700;
  font-size:14px;
}
.arrange-live-chip:hover:not(:disabled){
  border-color:var(--teal);
}
.arrange-live-chip:disabled{
  opacity:.35;
}
.arrange-live-chip.selected{
  opacity:1;
  border-color:rgba(45,212,191,.45);
  background:rgba(45,212,191,.12);
}
.arrange-live-submit{
  grid-column:1/-1;
  width:100%;
}

.student-reveal-box{
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--void-2);
  padding:16px;
  margin:14px 0;
}
.student-reveal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.student-reveal-head strong{
  color:var(--gold);
  font-family:var(--font-mono);
}
.student-reveal-verdict{
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
}
.student-reveal-verdict.correct{ color:var(--teal); }
.student-reveal-verdict.wrong{ color:var(--crimson); }
.student-reveal-verdict.missed{ color:var(--gold); }
.student-reveal-label{
  color:var(--lavender);
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:11px;
  font-weight:700;
}
.student-reveal-correct{
  color:var(--gold);
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  margin:5px 0 8px;
}
.student-reveal-explain{
  color:var(--lavender);
  font-size:14px;
  line-height:1.5;
}
.revealed-correct-answer{
  border-color:var(--teal) !important;
  background:rgba(45,212,191,.15) !important;
  opacity:1 !important;
}
.revealed-wrong-answer{
  border-color:var(--crimson) !important;
  background:rgba(255,92,122,.12) !important;
  opacity:1 !important;
}
@media (max-width:600px){
  .teacher-question-actions{
    grid-template-columns:1fr;
  }
  .arrange-live-chip{
    padding:12px 14px;
    font-size:15px;
  }
}

.jawi-text{direction:rtl;unicode-bidi:isolate;font-family:"Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;font-size:1.12em;line-height:1.75}


/* ========================= STORY MODE 2.0 ========================= */
.global-aura-pill{
  position:fixed; right:18px; bottom:18px; z-index:1200;
  display:flex; align-items:center; gap:9px;
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(255,190,60,.32);
  background:rgba(12,15,24,.90); backdrop-filter:blur(12px);
  box-shadow:0 10px 35px rgba(0,0,0,.28);
  font-size:12px; letter-spacing:.7px;
}
.global-aura-pill strong{color:var(--gold);font-family:var(--font-mono);font-size:14px}

.meme-reaction-overlay{
  position:fixed; inset:0; z-index:5000;
  pointer-events:none;
  display:grid; place-items:center;
  opacity:0; transform:scale(.86);
}
.meme-reaction-overlay.show{
  animation:memePop 1.45s cubic-bezier(.2,.9,.2,1) both;
}
.meme-reaction-card{
  min-width:min(86vw,360px);
  text-align:center;
  padding:22px 24px;
  border:1px solid rgba(45,212,191,.35);
  border-radius:24px;
  background:rgba(10,13,22,.93);
  box-shadow:0 24px 80px rgba(0,0,0,.48);
  backdrop-filter:blur(16px);
}
.nova-reaction-face{
  width:68px;height:68px;margin:0 auto 10px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(45,212,191,.10);
  border:1px solid rgba(45,212,191,.35);
  font-family:var(--font-display);font-size:28px;color:var(--teal);
}
.meme-reaction-text{
  font-family:var(--font-display);
  font-size:clamp(22px,6vw,36px);
  font-weight:800;line-height:1.05;color:var(--mist);
  text-transform:uppercase;
}
.meme-aura-gain{
  margin-top:10px;color:var(--gold);
  font-family:var(--font-mono);font-weight:800;letter-spacing:1.4px;
}
@keyframes memePop{
  0%{opacity:0;transform:scale(.72) rotate(-2deg)}
  15%{opacity:1;transform:scale(1.06) rotate(1deg)}
  25%,75%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.96) translateY(-18px)}
}
@media(max-width:600px){
  .global-aura-pill{right:10px;bottom:74px;padding:8px 11px}
  .meme-reaction-card{padding:18px 16px}
}

.education-level-chip{font-size:11px;opacity:.78;letter-spacing:.4px}



.avatar-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:620px;
  margin:24px auto;
}
.ob-avatar-choice{
  border:1px solid var(--line);
  background:var(--void-2);
  color:var(--mist);
  border-radius:16px;
  padding:18px 12px;
  cursor:pointer;
}
.ob-avatar-choice.selected{
  border-color:var(--teal);
  background:rgba(45,212,191,.10);
}
.ob-avatar-choice .ob-choice-icon{
  font-size:34px;
  margin-bottom:6px;
}
@media(max-width:600px){
  .avatar-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

.avatar-picker{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  width:min(560px,90vw);
  margin:24px auto;
}
.avatar-choice{
  min-height:84px;
  border:1px solid var(--line);
  background:var(--void-2);
  border-radius:16px;
  font-size:34px;
  cursor:pointer;
}
.avatar-choice.selected{
  border-color:var(--teal);
  background:rgba(45,212,191,.10);
  box-shadow:0 0 0 2px rgba(45,212,191,.08);
}
@media(max-width:520px){
  .avatar-picker{grid-template-columns:repeat(3,minmax(0,1fr));}
}

.live-confirm-answer-btn{grid-column:1/-1;width:100%;margin-top:4px}
.live-confirm-answer-btn:disabled{opacity:.48;cursor:not-allowed}
#student-live-answers .live-answer-btn.selected-live-answer{
  border-color:var(--teal)!important;
  background:rgba(45,212,191,.14)!important;
  box-shadow:0 0 0 3px rgba(45,212,191,.12)!important
}

.student-answer-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 18px
}
.student-answer-stats>div{
  text-align:center;padding:10px 8px;border-radius:12px;background:var(--void-2);border:1px solid var(--line)
}
.student-answer-stats span{
  display:block;color:var(--lavender);font-size:10px;text-transform:uppercase;letter-spacing:.6px
}
.student-answer-stats strong{
  display:block;margin-top:4px;font-family:var(--font-mono);font-size:18px
}
#student-stat-correct,#student-final-correct{color:var(--teal)}
#student-stat-wrong,#student-final-wrong{color:var(--crimson)}
#student-stat-accuracy,#student-final-accuracy{color:var(--gold)}
.student-finish-stats-wide{grid-template-columns:repeat(5,1fr)}
@media(max-width:700px){
 .student-answer-stats{grid-template-columns:repeat(2,1fr)}
 .student-finish-stats-wide{grid-template-columns:repeat(2,1fr)}
 .student-finish-stats-wide>div:last-child{grid-column:1/-1}
}

/* Phase 7.8 avatar stability */
.player-avatar:empty::before,.profile-avatar:empty::before,.dash-avatar:empty::before{
  content:"🧑‍🚀";
}

/* ========================= PHASE 7.9 — AVATAR RENDER FIX ========================= */
#ob-avatar-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(72px,1fr));
  gap:12px;
  width:min(560px,90vw);
  margin:24px auto !important;
  min-height:96px;
  visibility:visible !important;
  opacity:1 !important;
}
#ob-avatar-grid .avatar-choice{
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-height:82px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--void-2);
  font-size:34px;
  cursor:pointer;
  visibility:visible !important;
  opacity:1 !important;
}
#ob-avatar-grid .avatar-choice.selected{
  border-color:var(--teal);
  background:rgba(45,212,191,.12);
  box-shadow:0 0 0 2px rgba(45,212,191,.08);
}
@media(max-width:560px){
  #ob-avatar-grid{grid-template-columns:repeat(3,minmax(68px,1fr));}
}


/* ========================= PHASE 7.10 — LIVE LAYOUT POLISH ========================= */

/* Base live grid */
.live-grid{
  width:min(100%, 980px);
  margin:0 auto;
  align-items:start;
}

/* BEFORE join/create:
   show the setup card centered instead of leaving an empty second column */
.live-grid-student:not(.has-live-room),
.live-grid-teacher:not(.has-live-room){
  display:grid;
  grid-template-columns:minmax(320px, 520px);
  justify-content:center;
  gap:0;
}

/* AFTER room is active:
   balanced setup/lobby or join/game columns */
.live-grid-student.has-live-room,
.live-grid-teacher.has-live-room{
  display:grid;
  grid-template-columns:minmax(320px, 1fr) minmax(360px, 1fr);
  justify-content:center;
  gap:20px;
}

/* Keep the cards visually balanced */
.live-grid-student > .live-card,
.live-grid-teacher > .live-card{
  width:100%;
  min-width:0;
}

/* Teacher panel can be slightly wider for leaderboard/question controls */
.live-grid-teacher.has-live-room{
  grid-template-columns:minmax(340px, .95fr) minmax(380px, 1.05fr);
}

/* Student game area should not drift to the far right */
#student-lobby{
  justify-self:stretch;
}

/* Center screen headers with the live content area */
#screen-multiplayer .screen-title,
#screen-multiplayer .screen-sub,
#screen-teacher .screen-title,
#screen-teacher .screen-sub{
  width:min(100%, 980px);
  margin-left:auto;
  margin-right:auto;
}

/* Mobile/tablet: always a clean single column */
@media(max-width:840px){
  .live-grid-student,
  .live-grid-student.has-live-room,
  .live-grid-teacher,
  .live-grid-teacher.has-live-room{
    grid-template-columns:1fr !important;
    width:min(100%, 620px);
    gap:16px;
  }

  #screen-multiplayer .screen-title,
  #screen-multiplayer .screen-sub,
  #screen-teacher .screen-title,
  #screen-teacher .screen-sub{
    width:min(100%, 620px);
  }
}

@media(max-width:520px){
  .live-grid{
    width:100%;
  }

  .live-grid-student:not(.has-live-room),
  .live-grid-teacher:not(.has-live-room){
    grid-template-columns:1fr;
  }

  .live-card{
    border-radius:16px;
  }
}

/* ========================= PHASE 7.11 — MULTIPLAYER UX CLEANUP ========================= */
#student-room-code-input:disabled,
#student-live-name-input:disabled{
  opacity:.72;
  cursor:not-allowed;
}
.joined-room-btn{
  background:rgba(45,212,191,.14)!important;
  border:1px solid var(--teal)!important;
  color:var(--teal)!important;
  box-shadow:none!important;
}
.student-final-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
}
.student-final-actions .btn-secondary{
  min-height:48px;
}
#student-lobby:has(#student-finished-view:not(.hidden)) .student-answer-stats{
  margin-bottom:12px;
}
@media(max-width:840px){
  #student-lobby{
    order:1;
  }
  #student-join-card{
    order:2;
  }
  #student-live-grid.has-live-room #student-join-card{
    display:none;
  }
  .student-final-actions{
    grid-template-columns:1fr;
  }
  #student-finished-view{
    width:100%;
  }
  .aura-widget,
  #aura-widget,
  .aura-pill{
    bottom:92px!important;
  }
}


/* ========================= PHASE 7.12 — FINAL STATS OVERFLOW FIX ========================= */
/* Final result: never force 5 stat cards into a narrow live-game panel. */
.student-finish-stats.student-finish-stats-wide{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:10px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.student-finish-stats.student-finish-stats-wide > div{
  min-width:0;
  width:auto;
  box-sizing:border-box;
  overflow:hidden;
}

/* Desktop:
   Rank + Score + Accuracy = first row (2 columns each)
   Correct + Wrong = second row (3 columns each) */
.student-finish-stats-wide > div:nth-child(1),
.student-finish-stats-wide > div:nth-child(2),
.student-finish-stats-wide > div:nth-child(5){
  grid-column:span 2;
}
.student-finish-stats-wide > div:nth-child(3),
.student-finish-stats-wide > div:nth-child(4){
  grid-column:span 3;
}

/* Keep long values contained */
.student-finish-stats-wide strong,
.student-finish-stats-wide span{
  max-width:100%;
  overflow-wrap:anywhere;
}

/* Phone:
   Rank | Score
   Correct | Wrong
   Accuracy full width */
@media(max-width:700px){
  .student-finish-stats.student-finish-stats-wide{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .student-finish-stats-wide > div:nth-child(1),
  .student-finish-stats-wide > div:nth-child(2),
  .student-finish-stats-wide > div:nth-child(3),
  .student-finish-stats-wide > div:nth-child(4){
    grid-column:span 1;
  }
  .student-finish-stats-wide > div:nth-child(5){
    grid-column:1 / -1;
  }
}

/* ========================= PHASE 7.13 — LEAVE ROOM ========================= */
.student-final-actions{
  grid-template-columns:1fr !important;
}
#student-leave-room-btn{
  width:100%;
  min-height:48px;
}


/* ========================= PHASE 7.14 — LEAVE BUTTON CLICK FIX ========================= */
#student-leave-room-btn{
  position:relative;
  z-index:20;
  pointer-events:auto !important;
  cursor:pointer !important;
  width:100%;
  min-height:50px;
}
.student-final-actions{
  position:relative;
  z-index:20;
  pointer-events:auto;
}


/* ========================= PHASE 7.15 — LEAVE ROOM ANYTIME ========================= */
.student-room-actions{
  margin-top:14px;
}
#student-leave-room-anytime-btn{
  width:100%;
  min-height:48px;
  position:relative;
  z-index:20;
  pointer-events:auto !important;
  cursor:pointer !important;
}
@media(max-width:840px){
  .student-room-actions{
    margin-top:12px;
  }
}


/* ========================= PHASE 7.16 — LIVE INPUT OVERFLOW FIX ========================= */

/* Prevent room-code/name fields from spilling into the next column */
.live-card,
.live-card *{
  box-sizing:border-box;
}

.live-card .text-input,
.live-card .select-input,
.live-card .live-code-input,
#student-room-code-input,
#student-live-name-input{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* The large room-code font can remain, but it must stay inside its own card */
#student-room-code-input.live-code-input{
  display:block;
  overflow:hidden;
  text-overflow:clip;
}

/* Ensure both columns respect their grid tracks */
.live-grid-student.has-live-room > *,
.live-grid-teacher.has-live-room > *{
  min-width:0 !important;
  max-width:100%;
}

/* Keep inner content aligned and contained */
#student-live-grid .live-card,
#teacher-live-grid .live-card{
  overflow:hidden;
}

/* Slightly increase desktop gap so cards breathe without overlapping */
@media(min-width:841px){
  .live-grid-student.has-live-room,
  .live-grid-teacher.has-live-room{
    column-gap:24px !important;
  }
}


/* ========================= PHASE 7.19 — ACTIVE V1 SUBJECTS ========================= */
[data-subject="science"],
[data-subject="gk"],
[data-subject="general"],
[data-subject="general-knowledge"]{
  display:none !important;
}

/* Phase 7.21 — player setup is intentionally simple */
#mode-config-topic-row,
#mode-config-diff-row { display:none !important; }


/* ========================= PHASE 7.25 — UI/UX & GAMEPLAY POLISH ========================= */
/* Primary journey stays visible; secondary tools live in More. */
.dash-section-kicker{
  margin:4px 0 9px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
  color:var(--lavender);
}
.dash-mission-kicker{ margin-top:22px; }

.dash-primary-actions{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(190px,.65fr);
  gap:12px;
  margin-bottom:4px;
}
.dash-primary-actions .continue-btn{ margin:0; min-height:78px; }
.dash-play-btn{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:78px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1.5px solid var(--line);
  background:var(--void);
  color:var(--mist);
  text-align:left;
  transition:.15s;
}
.dash-play-btn:hover{
  transform:translateY(-2px);
  border-color:var(--teal);
  box-shadow:var(--shadow);
}
.dash-play-icon{ font-size:26px; }
.dash-play-btn strong{
  display:block;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.4px;
}
.dash-play-btn small{
  display:block;
  margin-top:3px;
  color:var(--lavender);
  font-size:11px;
}

.mode-card{ min-height:158px; }
.mode-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.mode-badge{
  border:1px solid var(--line);
  background:var(--void-2);
  border-radius:999px;
  padding:5px 8px;
  color:var(--lavender);
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.45px;
  white-space:nowrap;
}
.mode-card:hover .mode-badge{
  color:var(--teal);
  border-color:rgba(45,212,191,.4);
}

.results-eyebrow{
  margin-bottom:5px;
  color:var(--lavender);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.1px;
}
.results-card{
  box-shadow:0 18px 55px rgba(0,0,0,.24);
}
.results-stat-val{ font-size:19px; }
.results-actions .btn-primary,
.results-actions .btn-ghost{ min-height:48px; }

.more-hub-grid{ margin-bottom:26px; }
.more-hub-grid .future-card{ min-height:104px; }
.profile-settings-head{
  padding-top:20px;
  border-top:1px solid var(--line);
}

/* Make touch targets consistent. */
.mode-card,.future-card,.nav-item,.continue-btn,.dash-play-btn,
.results-actions button,.quiz-quit{ cursor:pointer; }
.mode-card:focus-visible,.future-card:focus-visible,.nav-item:focus-visible,
.continue-btn:focus-visible,.dash-play-btn:focus-visible,.results-actions button:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

/* Tablet/mobile: keep the two primary CTAs readable. */
@media(max-width:720px){
  .dash-primary-actions{ grid-template-columns:1fr; }
  .dash-primary-actions .continue-btn,
  .dash-play-btn{ min-height:68px; }
  .mode-card{ min-height:148px; }
}
@media(max-width:520px){
  .modes-grid{ grid-template-columns:1fr; }
  .mode-card{ min-height:0; padding:18px 16px; }
  .more-hub-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:380px){
  .more-hub-grid{ grid-template-columns:1fr; }
  .results-grid{ gap:6px; }
  .results-stat{ padding:10px 4px; }
  .results-rewards{ flex-wrap:wrap; }
}

/* PHASE 7.27 — STORY EXPERIENCE POLISH */
.story-overview{display:grid;grid-template-columns:auto minmax(140px,1fr) auto;align-items:center;gap:14px;margin:18px 0 6px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(120deg,rgba(45,212,191,.08),rgba(129,140,248,.07))}
.story-overview-copy{display:flex;flex-direction:column;gap:3px}.story-overview-label{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:1px;color:var(--teal)}.story-overview-copy strong{font-size:12px}
.story-overview-track,.story-chapter-progress{height:7px;overflow:hidden;border-radius:999px;background:var(--void-2)}.story-overview-fill,.story-chapter-progress-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal),var(--blue));transition:width .45s ease}.story-overview-stars{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--gold)}
.story-map{gap:18px;padding-top:18px}.story-chapter-card{width:min(100%,760px);padding:18px 20px 24px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008))}
.story-chapter-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}.story-chapter-kicker{margin-bottom:3px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:1px;color:var(--lavender)}.story-chapter-card .story-chapter-title{margin:0;text-align:left;font-size:16px}.story-chapter-stars{font-family:var(--font-mono);font-size:11px;color:var(--gold);white-space:nowrap}.story-chapter-progress{margin-bottom:20px}
.story-chapter-path{position:relative;display:flex;flex-direction:column;align-items:center}.story-chapter-path::before{content:"";position:absolute;top:40px;bottom:42px;left:50%;width:2px;transform:translateX(-50%);background:repeating-linear-gradient(var(--line) 0 7px,transparent 7px 14px)}
.story-chapter-path .story-node{z-index:1;width:126px;min-height:112px;margin:8px 0;background:var(--void);box-shadow:0 8px 24px rgba(0,0,0,.12)}.story-chapter-path .story-node::before{display:none}.story-chapter-path .story-node:nth-child(odd){margin-left:-92px}.story-chapter-path .story-node:nth-child(even){margin-left:92px}
.story-node-status{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.8px;color:var(--lavender)}.story-node.completed{border-color:rgba(45,212,191,.55);background:linear-gradient(180deg,rgba(45,212,191,.08),var(--void))}.story-node.completed .story-node-status{color:var(--teal)}
.story-node.boss-node{width:142px;min-height:126px;border-color:rgba(255,92,122,.58);background:linear-gradient(180deg,rgba(255,92,122,.12),var(--void))}.story-boss-tag{margin-top:4px;padding:3px 7px;border-radius:999px;border:1px solid rgba(255,92,122,.38);color:var(--crimson);font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.6px}.story-node:not(.locked):active{transform:scale(.98)}
@media(max-width:720px){.story-overview{grid-template-columns:1fr auto}.story-overview-track{grid-column:1/-1;grid-row:2}.story-chapter-card{padding:16px 12px 20px}}
@media(max-width:520px){.story-chapter-path .story-node:nth-child(odd){margin-left:-52px}.story-chapter-path .story-node:nth-child(even){margin-left:52px}.story-chapter-path .story-node{width:116px}.story-chapter-path .story-node.boss-node{width:132px}}


/* ========================= PHASE 7.28 — PLAYER DATA SAFETY ========================= */
.player-data-panel{
  margin-top:8px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(45,212,191,.055),rgba(129,140,248,.045));
}
.player-data-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.player-data-title{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  color:var(--mist);
}
.player-data-sub,.player-data-note{
  margin-top:4px;
  color:var(--lavender);
  font-size:10px;
  line-height:1.5;
}
.save-status{
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid rgba(45,212,191,.3);
  border-radius:999px;
  color:var(--teal);
  font-family:var(--font-mono);
  font-size:8px;
  font-weight:700;
}
.player-data-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.player-data-actions .btn-ghost{
  min-height:43px;
  margin:0;
}
.player-data-note{
  margin-top:10px;
}
@media(max-width:520px){
  .player-data-head{flex-direction:column}
  .player-data-actions{grid-template-columns:1fr}
}


/* ========================= PHASE 7.29 — ACCOUNT + CLOUD SAVE ========================= */
.cloud-account-panel{
  margin-top:8px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(129,140,248,.07),rgba(45,212,191,.045));
}
.cloud-account-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.cloud-status{flex:0 0 auto;padding:5px 8px;border-radius:999px;font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.5px}
.cloud-status.local{border:1px solid var(--line);color:var(--lavender)}
.cloud-status.ready{border:1px solid rgba(45,212,191,.35);color:var(--teal);background:rgba(45,212,191,.06)}
.cloud-auth-form{display:grid;gap:9px}.cloud-auth-form .profile-input{margin:0}
.cloud-signed-in{display:grid;gap:12px}.cloud-user-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--void)}
.cloud-user-row div{min-width:0}.cloud-user-row small{display:block;margin-bottom:3px;color:var(--lavender);font-family:var(--font-mono);font-size:8px;letter-spacing:.7px}.cloud-user-row strong{display:block;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.cloud-user-row .btn-ghost{margin:0;min-height:38px}
@media(max-width:520px){.cloud-account-head,.cloud-user-row{align-items:stretch;flex-direction:column}}

/* PHASE 7.35 — ABC ADVENTURE A–C (isolated prototype) */
.abc-adventure-card{border-color:rgba(250,204,21,.32);background:linear-gradient(145deg,rgba(250,204,21,.08),rgba(45,212,191,.05))}
.abc-head{display:flex;align-items:center;gap:14px}.abc-head>div:nth-child(2){flex:1}.abc-stars{font-size:18px;font-weight:800}
.abc-evolution{display:flex;align-items:center;gap:14px;margin:18px 0;padding:14px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.abc-buddy{font-size:46px}.abc-evolution>div:last-child{flex:1}.abc-track{height:8px;margin-top:8px;border-radius:999px;background:var(--void);overflow:hidden}.abc-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--lavender));transition:.3s}
.abc-worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.abc-world{padding:22px 14px;border:1px solid var(--line);border-radius:20px;background:var(--surface);text-align:center;cursor:pointer}.abc-world:hover{transform:translateY(-2px)}
.abc-world-letter{font-size:56px;font-weight:900}.abc-world-pics{font-size:34px;margin:8px 0}.abc-world small{color:var(--muted)}
.abc-game{max-width:680px;margin:20px auto;text-align:center;padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--surface)}
.abc-letter{font-size:96px;line-height:1;font-weight:900}.abc-sound{margin:12px 0 18px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--void);color:var(--text);cursor:pointer}.abc-prompt{font-size:22px;font-weight:800;margin:10px 0 18px}.abc-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.abc-choice{min-height:120px;border:2px solid var(--line);border-radius:20px;background:var(--void);color:var(--text);font-size:46px;cursor:pointer}.abc-choice span{display:block;font-size:15px;font-weight:800;margin-top:6px}.abc-feedback{min-height:32px;margin-top:16px;font-size:18px;font-weight:800}.hidden{display:none!important}
@media(max-width:600px){.abc-worlds{grid-template-columns:1fr}.abc-world{padding:14px}.abc-world-letter{font-size:44px}.abc-game{padding:18px}.abc-letter{font-size:80px}.abc-choice{min-height:105px;font-size:40px}}

/* PHASE 7.35.2 — Kid-friendly ABC World: isolated light/colorful theme */
#screen-abc-adventure{
  position:relative;overflow:hidden;min-height:calc(100vh - 40px);padding:22px;
  color:#25315f;
  background:
    radial-gradient(circle at 10% 16%,rgba(255,255,255,.95) 0 34px,transparent 36px),
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.92) 0 48px,transparent 50px),
    radial-gradient(circle at 86% 12%,rgba(255,255,255,.9) 0 42px,transparent 44px),
    linear-gradient(180deg,#7ddcff 0%,#b9efff 48%,#fff3a8 49%,#a8e66b 72%,#64c95b 100%);
  border-radius:28px;
}
#screen-abc-adventure:before,#screen-abc-adventure:after{content:"";position:absolute;pointer-events:none;z-index:0}
#screen-abc-adventure:before{width:230px;height:230px;right:-65px;top:55px;border-radius:50%;background:radial-gradient(circle,#fff6a8 0 28%,#ffd84d 29% 48%,rgba(255,216,77,.2) 49% 63%,transparent 64%)}
#screen-abc-adventure:after{left:-4%;right:-4%;bottom:-70px;height:180px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#5fd65d,#38ae51)}
#screen-abc-adventure>*{position:relative;z-index:1}
#screen-abc-adventure .screen-title{color:#263263;text-shadow:0 2px 0 rgba(255,255,255,.75)}
#screen-abc-adventure .screen-sub{color:#52638c}
#screen-abc-adventure .quiz-quit{background:rgba(255,255,255,.82);border-color:rgba(64,91,143,.18);color:#34466f;box-shadow:0 5px 14px rgba(55,92,139,.12)}
.abc-stars{padding:9px 14px;border-radius:999px;background:#fff8cc;color:#a46100;box-shadow:0 5px 14px rgba(150,105,0,.12)}
.abc-evolution{border:3px solid rgba(255,255,255,.72);background:rgba(255,255,255,.82);box-shadow:0 12px 28px rgba(54,105,132,.16);color:#30426d}
.abc-track{background:#dbe9ff}.abc-track span{background:linear-gradient(90deg,#ff8bb5,#ffcf4b,#58d68d,#65c7ff)}
.abc-worlds{gap:18px}.abc-world{border:3px solid rgba(255,255,255,.82);background:rgba(255,255,255,.88);color:#27345f;box-shadow:0 12px 24px rgba(48,102,132,.16);transition:.18s transform,.18s box-shadow}
.abc-world:nth-child(1){background:linear-gradient(160deg,#fff7f2,#ffd9e4)}
.abc-world:nth-child(2){background:linear-gradient(160deg,#fffbea,#ffe887)}
.abc-world:nth-child(3){background:linear-gradient(160deg,#f1f8ff,#cfe8ff)}
.abc-world:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 16px 30px rgba(48,102,132,.22)}
.abc-world small{color:#68779b}.abc-world-letter{color:#ff5f8f;text-shadow:0 3px 0 #fff}.abc-world:nth-child(2) .abc-world-letter{color:#f1a900}.abc-world:nth-child(3) .abc-world-letter{color:#438ce0}
.abc-game{border:4px solid rgba(255,255,255,.88);background:rgba(255,255,255,.9);box-shadow:0 18px 38px rgba(48,102,132,.2);color:#283660}
.abc-letter{color:#ff5f8f;text-shadow:0 4px 0 #ffe1ec}.abc-sound{border:0;background:linear-gradient(135deg,#6dd7ff,#8d8cff);color:#fff;font-size:16px;font-weight:900;box-shadow:0 7px 0 rgba(70,91,177,.2)}
.abc-prompt{color:#35456f}.abc-choice{border:3px solid #dbe5ff;background:#fff;color:#27345f;box-shadow:0 7px 0 #d7e0f6;transition:.12s transform,.12s box-shadow}.abc-choice:hover{transform:translateY(-2px);border-color:#76cfff}.abc-choice:active{transform:translateY(3px);box-shadow:0 3px 0 #d7e0f6}.abc-choice span{color:#56698f}.abc-feedback{color:#8b4aa4}
@media(max-width:600px){#screen-abc-adventure{padding:14px;border-radius:20px}.abc-head{gap:8px}.abc-stars{font-size:14px;padding:7px 10px}.abc-evolution{margin:12px 0}.abc-worlds{gap:12px}}

/* PHASE 7.35.3 — slower playful voice, richer evolution, chapter celebration */
.abc-buddy{min-width:82px;text-align:center;font-size:54px;animation:abcBuddyFloat 2.2s ease-in-out infinite}
@keyframes abcBuddyFloat{50%{transform:translateY(-7px) rotate(2deg)}}
.abc-celebration{position:absolute;inset:0;z-index:50;display:none;place-items:center;overflow:hidden;background:rgba(78,190,255,.16);backdrop-filter:blur(2px)}
.abc-celebration.show{display:grid}
.abc-celebrate-card{position:relative;z-index:3;width:min(88%,430px);padding:24px 28px 28px;text-align:center;border:5px solid #fff;border-radius:32px;background:linear-gradient(155deg,#fff8bc,#ffd9f1 52%,#ccefff);box-shadow:0 24px 70px rgba(54,72,126,.28);animation:abcCelebratePop .55s cubic-bezier(.2,1.5,.45,1)}
.abc-celebrate-card h2{margin:2px 0;color:#ff4f8b;font-size:34px}.abc-celebrate-card p{margin:4px 0 10px;font-size:20px;font-weight:900;color:#42527d}.abc-celebrate-card strong{display:block;color:#7c4db2;font-size:18px}.abc-trophy{font-size:54px;animation:abcTrophy .7s ease-in-out infinite alternate}.abc-big-letter{font-size:82px;line-height:1;font-weight:1000;color:#ffb400;text-shadow:0 4px 0 #fff,0 8px 18px rgba(255,150,0,.25)}.abc-ribbon{font-size:28px;margin:8px 0 12px;letter-spacing:5px}
.abc-burst{position:absolute;inset:0;z-index:2;pointer-events:none}.abc-burst i{position:absolute;left:var(--x);top:-30px;width:12px;height:24px;border-radius:4px;background:hsl(calc(var(--i)*43),90%,62%);transform:rotate(var(--r));animation:abcConfetti 2.7s cubic-bezier(.18,.7,.25,1) var(--d) forwards}.abc-burst i:nth-child(3n){width:18px;height:18px;border-radius:50%}.abc-burst i:nth-child(4n){width:8px;height:30px}
@keyframes abcConfetti{0%{opacity:1;transform:translateY(-30px) rotate(0)}100%{opacity:.9;transform:translateY(105vh) rotate(760deg)}}
@keyframes abcCelebratePop{from{opacity:0;transform:scale(.55) rotate(-4deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes abcTrophy{to{transform:scale(1.12) rotate(5deg)}}
@media(max-width:600px){.abc-celebrate-card{padding:20px}.abc-big-letter{font-size:68px}.abc-celebrate-card h2{font-size:28px}}
/* Phase 7.36 — ABC illustrated object renderer + progression v2 */
.abc-world-images{height:112px;display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 10px}
.abc-world-images img{width:94px;height:94px;object-fit:contain;filter:drop-shadow(0 7px 7px rgba(55,78,120,.16))}
.abc-object-img{display:block;width:150px;height:150px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 10px 9px rgba(55,78,120,.16));animation:abcObjectFloat 2.1s ease-in-out infinite}
@keyframes abcObjectFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
.abc-choices.abc-single-stage{grid-template-columns:1fr;max-width:360px;margin:0 auto}
.abc-choice.abc-continue{min-height:210px;background:linear-gradient(160deg,#fff,#f7fbff);font-size:22px}
.abc-choice.abc-continue span,.abc-choice.abc-continue small{display:block;margin-top:8px;color:#68779b;font-size:15px;font-weight:900}
.abc-meet-letter{font-size:112px;line-height:1;font-weight:1000;color:#ff5f8f;text-shadow:0 5px 0 #ffe1ec}
.abc-choice.abc-picture-choice{min-height:175px;padding:8px}.abc-picture-choice .abc-object-img{width:142px;height:142px}
.abc-choice.abc-letter-choice{font-size:72px;font-weight:1000;min-height:145px;color:#ff5f8f}
@media(max-width:600px){.abc-world-images{height:90px}.abc-world-images img{width:78px;height:78px}.abc-object-img{width:125px;height:125px}.abc-picture-choice .abc-object-img{width:112px;height:112px}.abc-choice.abc-picture-choice{min-height:145px}.abc-meet-letter{font-size:90px}.abc-choice.abc-letter-choice{font-size:62px;min-height:125px}}

/* Phase 7.37 — D–F world palette */
.abc-world:nth-child(4){background:linear-gradient(160deg,#f4fff1,#c8f5b7)}
.abc-world:nth-child(5){background:linear-gradient(160deg,#fff4fb,#efcfff)}
.abc-world:nth-child(6){background:linear-gradient(160deg,#efffff,#bfeff5)}
.abc-world:nth-child(4) .abc-world-letter{color:#5cae49}.abc-world:nth-child(5) .abc-world-letter{color:#a96bd8}.abc-world:nth-child(6) .abc-world-letter{color:#20a9b8}

/* PHASE 7.37.1 — full-screen ABC chapter celebration */
.abc-celebration{position:fixed!important;inset:0!important;z-index:9999!important;background:linear-gradient(180deg,#69d8ff 0%,#b9efff 45%,#fff0a8 100%)!important;backdrop-filter:none!important;padding:20px;box-sizing:border-box}
.abc-celebration.show{display:grid!important;place-items:center!important}
.abc-celebrate-card{width:min(92vw,620px)!important;padding:30px 30px 28px!important;border-radius:38px!important;box-shadow:0 28px 90px rgba(54,72,126,.3)!important}
.abc-celebrate-objects{display:flex;align-items:center;justify-content:center;gap:24px;margin:8px auto 14px}
.abc-celebrate-objects img{width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(55,78,120,.18));animation:abcObjectFloat 1.4s ease-in-out infinite alternate}
.abc-celebrate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.abc-celebrate-btn{border:0;border-radius:999px;padding:13px 22px;font-size:16px;font-weight:900;cursor:pointer;color:#fff;background:linear-gradient(135deg,#ff5f8f,#9b6cff);box-shadow:0 7px 0 rgba(91,69,150,.2)}
.abc-celebrate-btn.secondary{background:#fff;color:#52638c;box-shadow:0 7px 0 rgba(82,99,140,.14)}
.abc-firework{position:absolute;width:12px;height:12px;border-radius:50%;z-index:1;pointer-events:none;animation:abcFirework 1.45s ease-out infinite}
.abc-firework.f1{left:13%;top:18%;box-shadow:0 -65px #ff4f8b,46px -46px #ffd84d,65px 0 #65c7ff,46px 46px #8f6cff,0 65px #58d68d,-46px 46px #ff8bb5,-65px 0 #ffd84d,-46px -46px #65c7ff}
.abc-firework.f2{right:14%;top:24%;animation-delay:.45s;box-shadow:0 -58px #8f6cff,41px -41px #58d68d,58px 0 #ff8bb5,41px 41px #ffd84d,0 58px #65c7ff,-41px 41px #ff4f8b,-58px 0 #58d68d,-41px -41px #ffd84d}
.abc-ribbon-shot{position:absolute;z-index:1;font-size:72px;animation:abcRibbonShot 1.1s cubic-bezier(.2,.9,.25,1) both;pointer-events:none}.abc-ribbon-shot.left{left:4%;bottom:8%;transform:rotate(-24deg)}.abc-ribbon-shot.right{right:4%;bottom:8%;transform:scaleX(-1) rotate(-24deg)}
@keyframes abcFirework{0%{transform:scale(.15);opacity:0}25%{opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes abcRibbonShot{0%{transform:translateY(80px) scale(.3) rotate(-30deg);opacity:0}60%{opacity:1}100%{transform:translateY(0) scale(1) rotate(-18deg);opacity:1}}
@media(max-width:600px){.abc-celebrate-card{padding:22px 16px!important}.abc-celebrate-objects img{width:88px;height:88px}.abc-ribbon-shot{font-size:48px}.abc-celebrate-actions{gap:8px}.abc-celebrate-btn{font-size:14px;padding:12px 17px}}

/* Phase 7.37.2 — ABC final challenge multi-select feedback */
.abc-choice.abc-correct-pick{border-color:#4fd17b!important;background:#ecfff2!important;box-shadow:0 7px 0 #bcebc9!important;transform:translateY(-2px)}
.abc-choice.abc-correct-pick::after{content:'✓';position:absolute;right:12px;top:8px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#4fd17b;color:white;font-size:22px;font-weight:1000}
.abc-choice.abc-wrong-pick{animation:abcWrongWiggle .35s ease;border-color:#ff8d9e!important;background:#fff1f4!important}
.abc-choice.abc-picture-choice{position:relative}
@keyframes abcWrongWiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}


/* ========================= FINAL POLISH 1 — ABC VISUAL CONSISTENCY ========================= */
/* Repeat the original A–F pastel palette across all 26 letter cards. */
#abc-worlds .abc-world:nth-child(6n+1){background:linear-gradient(160deg,#fff7f2,#ffd9e4)}
#abc-worlds .abc-world:nth-child(6n+2){background:linear-gradient(160deg,#fffbea,#ffe887)}
#abc-worlds .abc-world:nth-child(6n+3){background:linear-gradient(160deg,#f1f8ff,#cfe8ff)}
#abc-worlds .abc-world:nth-child(6n+4){background:linear-gradient(160deg,#f1fff5,#c9f4d4)}
#abc-worlds .abc-world:nth-child(6n+5){background:linear-gradient(160deg,#fbf3ff,#e6d2ff)}
#abc-worlds .abc-world:nth-child(6n+6){background:linear-gradient(160deg,#efffff,#c9f3f3)}
#abc-worlds .abc-world:nth-child(6n+1) .abc-world-letter{color:#ff5f8f}
#abc-worlds .abc-world:nth-child(6n+2) .abc-world-letter{color:#f1a900}
#abc-worlds .abc-world:nth-child(6n+3) .abc-world-letter{color:#438ce0}
#abc-worlds .abc-world:nth-child(6n+4) .abc-world-letter{color:#35a867}
#abc-worlds .abc-world:nth-child(6n+5) .abc-world-letter{color:#8f62d6}
#abc-worlds .abc-world:nth-child(6n+6) .abc-world-letter{color:#24a9b6}

/* Dashboard card: soft kindergarten/classroom illustration behind the content. */
.mode-card.abc-adventure-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(16,20,42,.96) 0%,rgba(16,20,42,.88) 44%,rgba(16,20,42,.56) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 300'%3E%3Crect width='900' height='300' fill='%23ffe9a8'/%3E%3Crect y='205' width='900' height='95' fill='%23a8dc88'/%3E%3Crect x='545' y='55' width='145' height='118' rx='8' fill='%238bd3ff' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M617 55v118M545 114h145' stroke='%23fff' stroke-width='7'/%3E%3Crect x='710' y='70' width='130' height='100' rx='9' fill='%235e8c6d' stroke='%23d9b26f' stroke-width='10'/%3E%3Ctext x='730' y='115' font-size='34' font-family='Arial' font-weight='700' fill='%23fff'%3EABC%3C/text%3E%3Ctext x='735' y='151' font-size='25' font-family='Arial' font-weight='700' fill='%23ffe76b'%3E1 2 3%3C/text%3E%3Crect x='520' y='205' width='155' height='16' rx='8' fill='%23e49a65'/%3E%3Cpath d='M542 220v55M653 220v55' stroke='%23a66a4a' stroke-width='13' stroke-linecap='round'/%3E%3Ccircle cx='480' cy='190' r='28' fill='%23ff8bb5'/%3E%3Crect x='462' y='212' width='36' height='55' rx='15' fill='%238d8cff'/%3E%3Ccircle cx='745' cy='210' r='26' fill='%23ffd45e'/%3E%3Crect x='728' y='230' width='34' height='50' rx='14' fill='%236dd7ff'/%3E%3Cpath d='M805 205l18-42 18 42z' fill='%23ff7d70'/%3E%3Ccircle cx='823' cy='151' r='11' fill='%23ffd84d'/%3E%3C/svg%3E") center right/cover no-repeat;
}
.mode-card.abc-adventure-card:after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(135deg,rgba(250,204,21,.09),rgba(45,212,191,.04));
}
.mode-card.abc-adventure-card>*{position:relative;z-index:1}

/* ===== EduQuest V1 Kids Learning Hub ===== */
.legacy-nav-hidden{display:none!important}
.kids-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:30px;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:linear-gradient(135deg,rgba(116,88,255,.24),rgba(45,207,191,.14));margin-bottom:30px;min-height:220px}
.kids-hero-copy{position:relative;z-index:2;max-width:620px}.kids-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--gold)}
.kids-hero h1{font-family:var(--font-display);font-size:clamp(30px,5vw,52px);line-height:1.02;margin:8px 0 10px}.kids-hero p{color:var(--lavender);font-size:16px;margin:0 0 20px}
.kids-primary{display:flex!important;align-items:center;gap:12px;width:auto!important;min-height:0!important;padding:13px 18px!important;border-radius:16px!important;background:linear-gradient(135deg,var(--teal),#5b7cff)!important;color:white!important;border:0!important;text-align:left!important}.kids-primary>span:first-child{font-size:20px}.kids-primary strong,.kids-primary small{display:block}.kids-primary small{opacity:.82;margin-top:2px}
.kids-hero-art{font-size:76px;min-width:190px;text-align:center;filter:drop-shadow(0 12px 20px rgba(0,0,0,.2));transform:rotate(2deg)}.kids-hero-art span{font-size:30px;position:absolute;margin:-5px 0 0 -5px}.kids-hero-art b{font-size:46px;display:block;margin-top:-12px}
.kids-section-head{display:flex;justify-content:space-between;align-items:end;gap:14px;margin:0 0 15px}.kids-section-head.compact{margin-top:30px}.kids-section-head h2{font-family:var(--font-display);font-size:24px;margin:4px 0 0}.kids-age-pill{font-size:11px;font-weight:800;padding:7px 11px;border-radius:999px;background:rgba(45,207,191,.12);color:var(--teal);border:1px solid rgba(45,207,191,.3)}
.kids-learning-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.kids-feature-card,.kids-coming-card{min-height:170px;border-radius:22px;padding:20px!important;display:flex;gap:16px;align-items:flex-start;text-align:left}.kids-feature-card{grid-column:span 2}.kids-feature-card .kids-card-copy{max-width:520px}.kids-coming-card{background:var(--void);border:1px solid var(--line);opacity:.82}.kids-card-icon{font-size:42px;line-height:1}.kids-card-badge{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.8px;color:var(--teal);margin-bottom:7px}.kids-card-badge.soon{color:var(--gold)}.kids-feature-card h3,.kids-coming-card h3{font-family:var(--font-display);font-size:21px;margin:0 0 6px}.kids-feature-card p,.kids-coming-card p{margin:0;color:var(--lavender);line-height:1.45}.kids-card-link{display:inline-block;margin-top:14px;color:var(--teal);font-weight:800;font-size:13px}
.kids-progress-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.kids-progress-card{background:var(--void);border:1px solid var(--line);border-radius:18px;padding:17px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.kids-progress-card>span{font-size:28px;grid-row:span 2}.kids-progress-card strong{font-family:var(--font-display);font-size:17px}.kids-progress-card small{color:var(--lavender)}.learn-screen-grid{margin-top:22px}
@media(max-width:700px){.kids-hero{padding:22px;min-height:0}.kids-hero-art{display:none}.kids-learning-grid{grid-template-columns:1fr}.kids-feature-card{grid-column:span 1}.kids-feature-card,.kids-coming-card{min-height:0}.kids-progress-grid{grid-template-columns:1fr}.kids-section-head{align-items:flex-start}.kids-age-pill{white-space:nowrap}}


/* V1.0.6 — subtle illustrated backgrounds for learning feature cards.
   Visual-only patch: no gameplay/navigation/onboarding logic changed. */
.kids-coming-card{position:relative;overflow:hidden;isolation:isolate;background-color:var(--void)}
.kids-coming-card:before{content:"";position:absolute;inset:0;z-index:-2;background-position:center right;background-size:cover;background-repeat:no-repeat;opacity:.55;pointer-events:none}
.kids-coming-card:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(16,20,42,.97) 0%,rgba(16,20,42,.88) 52%,rgba(16,20,42,.52) 100%);pointer-events:none}
.kids-coming-card>*{position:relative;z-index:1}

.kids-coming-card.feature-piano:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 240'%3E%3Crect width='600' height='240' fill='%235f73c9'/%3E%3Ccircle cx='505' cy='52' r='18' fill='%23ffd75e' opacity='.9'/%3E%3Cpath d='M468 50v70c0 18-17 31-36 25-17-5-17-27-2-36 10-6 21-5 30-1V64l54-14v58c0 18-17 31-36 25-17-5-17-27-2-36 10-6 21-5 30-1V38z' fill='%23f8b5ff' opacity='.9'/%3E%3Crect x='300' y='126' width='275' height='82' rx='12' fill='%23f8f6ef'/%3E%3Cg stroke='%23242b54' stroke-width='2'%3E%3Cpath d='M325 126v82M350 126v82M375 126v82M400 126v82M425 126v82M450 126v82M475 126v82M500 126v82M525 126v82M550 126v82'/%3E%3C/g%3E%3Cg fill='%23242b54'%3E%3Crect x='318' y='126' width='14' height='48' rx='3'/%3E%3Crect x='343' y='126' width='14' height='48' rx='3'/%3E%3Crect x='393' y='126' width='14' height='48' rx='3'/%3E%3Crect x='418' y='126' width='14' height='48' rx='3'/%3E%3Crect x='443' y='126' width='14' height='48' rx='3'/%3E%3Crect x='493' y='126' width='14' height='48' rx='3'/%3E%3Crect x='518' y='126' width='14' height='48' rx='3'/%3E%3C/svg%3E")}
.kids-coming-card.feature-numbers:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 240'%3E%3Crect width='600' height='240' fill='%233f9fcf'/%3E%3Cg font-family='Arial' font-weight='800' text-anchor='middle'%3E%3Crect x='322' y='45' width='90' height='90' rx='18' fill='%23ffd963'/%3E%3Ctext x='367' y='105' font-size='54' fill='%23304b73'%3E1%3C/text%3E%3Crect x='422' y='88' width='90' height='90' rx='18' fill='%23ff8f9d'/%3E%3Ctext x='467' y='148' font-size='54' fill='%23ffffff'%3E2%3C/text%3E%3Crect x='515' y='33' width='70' height='70' rx='16' fill='%239be38d'/%3E%3Ctext x='550' y='82' font-size='43' fill='%23304b73'%3E3%3C/text%3E%3C/g%3E%3Ccircle cx='370' cy='184' r='16' fill='%23ffffff' opacity='.8'/%3E%3Ccircle cx='414' cy='194' r='11' fill='%23ffffff' opacity='.65'/%3E%3Ccircle cx='548' cy='164' r='13' fill='%23ffffff' opacity='.75'/%3E%3C/svg%3E")}
.kids-coming-card.feature-colors:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 240'%3E%3Crect width='600' height='240' fill='%237a63c7'/%3E%3Ccircle cx='350' cy='80' r='45' fill='%23ff667f'/%3E%3Crect x='410' y='40' width='86' height='86' rx='14' fill='%235ed6c7' transform='rotate(9 453 83)'/%3E%3Cpath d='M540 38l52 90h-104z' fill='%23ffd85c'/%3E%3Ccircle cx='505' cy='170' r='35' fill='%236db7ff'/%3E%3Cpath d='M334 175c0-31 25-56 56-56s56 25 56 56' fill='none' stroke='%23ff8aba' stroke-width='16'/%3E%3Cpath d='M350 175c0-22 18-40 40-40s40 18 40 40' fill='none' stroke='%23ffd85c' stroke-width='14'/%3E%3C/svg%3E")}

/* V1.0.7 — ABC Tiles background visibility fix ONLY. */
.kids-coming-card.feature-piano:before{
  opacity:.68;
  background-position:center right;
  background-size:cover;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 240'%3E%3Crect width='600' height='240' fill='%234f63bd'/%3E%3Cg transform='translate(300 72)'%3E%3Crect width='280' height='126' rx='18' fill='%23f7f5ee'/%3E%3Cg stroke='%23313a63' stroke-width='3'%3E%3Cpath d='M35 0v126M70 0v126M105 0v126M140 0v126M175 0v126M210 0v126M245 0v126'/%3E%3C/g%3E%3Cg fill='%23242b54'%3E%3Crect x='24' width='20' height='73' rx='3'/%3E%3Crect x='59' width='20' height='73' rx='3'/%3E%3Crect x='129' width='20' height='73' rx='3'/%3E%3Crect x='164' width='20' height='73' rx='3'/%3E%3Crect x='199' width='20' height='73' rx='3'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23ffd75e'%3E%3Ccircle cx='520' cy='40' r='9'/%3E%3Ccircle cx='274' cy='48' r='7'/%3E%3C/g%3E%3Cg fill='%23ff9bd8'%3E%3Cpath d='M276 83v-40h8v31c15-5 26 2 24 13-2 12-20 17-29 9-5-4-5-9-3-13z'/%3E%3Cpath d='M538 73v-43h8v34c15-5 26 2 24 13-2 12-20 17-29 9-5-4-5-9-3-13z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== V1.0.10 REWARDS + MORE REWORK ===== */
.kids-eyebrow{display:block;font:700 11px/1.2 'JetBrains Mono',monospace;letter-spacing:.14em;color:#ffc443;margin-bottom:7px}
.kids-rewards-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 32px;border:1px solid rgba(92,232,209,.22);border-radius:24px;background:linear-gradient(135deg,rgba(36,199,181,.12),rgba(73,94,216,.15) 58%,rgba(255,196,67,.08));margin-bottom:22px;overflow:hidden;position:relative}
.kids-rewards-hero:after{content:'✨';position:absolute;right:120px;top:24px;font-size:28px;opacity:.35}
.kids-rewards-hero h2,.kids-more-head h2{font-size:clamp(28px,3.4vw,40px);line-height:1.05;margin:0 0 8px;color:#fff}
.kids-rewards-hero p,.kids-more-head p{color:var(--text-muted);max-width:650px;margin:0;line-height:1.55}
.kids-rewards-trophy{font-size:72px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.28));transform:rotate(5deg);flex:0 0 auto}
.kids-reward-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 26px}
.kids-reward-stat{display:flex;gap:14px;align-items:center;padding:18px 20px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.018));min-height:92px}
.kids-reward-stat>span{font-size:32px;line-height:1}
.kids-reward-stat strong{display:block;font-size:19px;line-height:1.1;color:#fff;margin-bottom:5px}
.kids-reward-stat small{display:block;color:var(--text-muted);font-size:13px}
.kids-section-head.compact{margin:2px 0 14px}
.kids-section-head.compact h2{font-size:26px;margin:0;color:#fff}
.kids-badge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kids-badge-card{padding:20px 14px;text-align:center;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.025);min-height:150px;display:flex;flex-direction:column;justify-content:center}
.kids-badge-card span{font-size:40px;display:block;margin-bottom:10px;filter:saturate(.55);opacity:.55}
.kids-badge-card strong{display:block;margin-bottom:5px;color:#fff;font-size:15px}
.kids-badge-card small{color:var(--text-muted);line-height:1.35;font-size:12px}
.kids-badge-card.earned{border-color:rgba(255,196,67,.42);background:linear-gradient(145deg,rgba(255,196,67,.12),rgba(255,255,255,.025))}
.kids-badge-card.earned span{filter:none;opacity:1}
.kids-reward-note{margin-top:16px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.035);color:var(--text-muted);text-align:center;font-size:13px;border:1px solid rgba(255,255,255,.04)}
.legacy-rewards-hidden,.legacy-more-hidden{display:none!important}

.kids-more-head{margin-bottom:18px;padding:24px 28px;border:1px solid rgba(92,232,209,.16);border-radius:22px;background:linear-gradient(135deg,rgba(56,73,152,.18),rgba(44,181,171,.08))}
.kids-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:28px}
.kids-more-card{width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:18px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;min-height:88px;transition:.16s ease}
.kids-more-card:not(.static):hover{transform:translateY(-2px);border-color:rgba(63,221,202,.42);background:rgba(63,221,202,.055)}
.kids-more-card>span:first-child{font-size:30px;width:38px;text-align:center;flex:0 0 auto}
.kids-more-card div{flex:1;min-width:0}
.kids-more-card strong{display:block;font-size:17px;margin-bottom:4px;color:#fff}
.kids-more-card small{display:block;color:var(--text-muted);line-height:1.35;font-size:12px}
.kids-more-card b{font-size:26px;color:var(--text-muted);font-weight:400}
.kids-more-card.static{cursor:default}
.kids-card-badge.soon{font:700 9px/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:#ffc443;border:1px solid rgba(255,196,67,.25);padding:7px 8px;border-radius:999px;white-space:nowrap}
.profile-settings-head{margin-top:6px;padding-top:24px;border-top:1px solid var(--border)}
.kids-profile-form{max-width:720px;padding:22px;border:1px solid var(--border);border-radius:22px;background:rgba(255,255,255,.025)}
.kids-profile-form .profile-avatar-big{margin:10px 0 18px}
.kids-profile-form .avatar-grid{margin-bottom:22px}
.kids-profile-form .field-label{margin-top:16px}
.kids-cloud-note{margin-top:12px;color:var(--text-muted);font-size:13px;line-height:1.5}

@media(max-width:900px){.kids-badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.kids-reward-grid,.kids-more-grid{grid-template-columns:1fr}.kids-rewards-hero{padding:22px}.kids-rewards-trophy{font-size:52px}.kids-badge-grid{grid-template-columns:1fr 1fr}.kids-more-head{padding:20px}}
@media(max-width:520px){.kids-rewards-hero{align-items:flex-start}.kids-rewards-trophy{font-size:42px}.kids-badge-grid{grid-template-columns:1fr}.kids-more-card{padding:16px}.kids-card-badge.soon{display:none}}

/* V1.0.11 PRIMARY LEARNING RESTORE — additive UI only */
.primary-head{margin-top:34px}.primary-head p{margin:6px 0 0;color:var(--text-muted)}
.primary-learning-grid,.primary-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:30px}
.primary-path-card,.primary-mode-card{width:100%;display:flex;align-items:center;gap:18px;text-align:left;padding:24px;border:1px solid var(--border);border-radius:22px;background:var(--surface);color:var(--text);cursor:pointer;transition:.2s}
.primary-path-card:hover,.primary-mode-card:hover{transform:translateY(-2px);border-color:rgba(45,212,191,.55)}
.primary-path-icon,.primary-mode-card>span{font-size:42px;flex:0 0 auto}.primary-path-card h3,.primary-mode-card h3{font-size:20px;margin:5px 0 6px}.primary-path-card p,.primary-mode-card p{color:var(--text-muted);line-height:1.45;margin:0}.primary-mode-grid{margin-bottom:34px}.primary-mode-card{min-height:132px}.early-head{margin-top:8px}
@media(max-width:760px){.primary-learning-grid,.primary-mode-grid{grid-template-columns:1fr}.primary-path-card,.primary-mode-card{padding:19px}}

/* ============================================================
   V1.0.17 — LAUNCH QA PASS 2: MOBILE / TABLET SAFETY
   CSS-only guardrails. No gameplay, story, question, scoring or persistence logic changed.
   ============================================================ */
@media (max-width: 900px){
  html,body{max-width:100%;overflow-x:hidden}
  #main-content{width:100%;min-width:0}
  .screen{max-width:100%;min-width:0}
  button,.btn,.nav-item,.mode-card,.answer-btn{touch-action:manipulation}
  .mode-card,.answer-btn,.btn{min-height:48px}
  img,svg,video{max-width:100%}
}
@media (max-width: 720px){
  .quiz-topbar{gap:10px;align-items:center}
  .quiz-quit{min-width:44px;min-height:44px;display:grid;place-items:center}
  .quiz-question-card{max-width:100%;overflow-wrap:anywhere}
  .quiz-answers{width:100%}
  .results-card{width:min(100%,520px);max-width:100%;padding:24px 18px}
  .results-actions .btn,.results-card .btn{width:100%;min-height:50px}
  .abc-worlds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .abc-world-card{min-width:0}
  .kids-feature-card{min-width:0}
}
@media (max-width: 480px){
  #main-content{padding-left:12px;padding-right:12px}
  .abc-worlds{grid-template-columns:1fr}
  .quiz-answers,.quiz-answers.type-tf{grid-template-columns:1fr}
  .answer-btn{padding:16px 12px;min-height:54px}
  .kids-rewards-hero{gap:12px}
  .kids-rewards-hero h2,.kids-more-head h2{font-size:27px}
}

/* === FEATURE EXPANSION 1 — MULTIPLAYER + CUSTOM QUIZ === */
.archived-secondary-step{display:none!important}
.multiplayer-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.multiplayer-feature-card{border:1px solid rgba(92,232,209,.25);background:linear-gradient(135deg,rgba(92,232,209,.08),rgba(111,120,255,.08));color:var(--text);border-radius:22px;padding:20px;display:flex;gap:16px;text-align:left;cursor:pointer;min-height:150px;transition:.18s ease}
.multiplayer-feature-card:hover{transform:translateY(-2px);border-color:rgba(92,232,209,.55)}
.multiplayer-feature-card h3{font-family:var(--font-display);font-size:20px;margin:0 0 6px}.multiplayer-feature-card p{margin:0;color:var(--lavender);line-height:1.45}.mp-feature-icon{font-size:40px}
.custom-question-builder{margin:14px 0;padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}
.custom-builder-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}.custom-builder-head strong,.custom-builder-head small{display:block}.custom-builder-head small{color:var(--lavender);margin-top:4px}
.custom-q-card{padding:14px;margin:10px 0;border:1px solid var(--line);border-radius:14px;background:var(--void)}.custom-q-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.custom-q-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.custom-q-card input,.custom-q-card select{width:100%}.custom-q-question{margin-bottom:8px}.custom-builder-count{margin-top:10px;color:var(--lavender);font-size:13px}
@media(max-width:700px){.multiplayer-feature-grid,.custom-q-grid{grid-template-columns:1fr}.multiplayer-feature-card{min-height:0}}


/* v1.10.2 — ABC Adventure responsive + visual polish (scoped) */
#screen-abc-adventure{
  width:min(100%,1180px);
  margin:0 auto;
  box-sizing:border-box;
}
#screen-abc-adventure .abc-head{
  min-height:58px;
}
#screen-abc-adventure .abc-evolution{
  max-width:100%;
}
#screen-abc-adventure .abc-worlds{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
#screen-abc-adventure .abc-world{
  min-width:0;
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#screen-abc-adventure .abc-world strong{
  line-height:1.25;
  overflow-wrap:anywhere;
}
#screen-abc-adventure .abc-world-images{
  width:100%;
}
#screen-abc-adventure .abc-world-images img{
  max-width:44%;
}
#screen-abc-adventure .abc-world-locked{
  position:relative;
}
#screen-abc-adventure .abc-world-locked:after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.5);
  pointer-events:none;
}
#screen-abc-adventure .abc-world-complete{
  box-shadow:0 12px 24px rgba(48,102,132,.16),inset 0 0 0 2px rgba(34,197,94,.18);
}
#screen-abc-adventure .abc-game{
  width:min(100%,720px);
  box-sizing:border-box;
}
#screen-abc-adventure .abc-choices{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
#screen-abc-adventure .abc-choice{
  width:100%;
  min-width:0;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
#screen-abc-adventure .abc-sound{
  min-height:44px;
  touch-action:manipulation;
}
#screen-abc-adventure .abc-feedback{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.3;
}
@media (min-width:1200px){
  #screen-abc-adventure{padding:24px 30px}
  #screen-abc-adventure .abc-worlds{gap:20px}
  #screen-abc-adventure .abc-world{min-height:276px;padding:20px 16px}
  #screen-abc-adventure .abc-world-letter{font-size:58px}
  #screen-abc-adventure .abc-world-images{height:118px}
  #screen-abc-adventure .abc-world-images img{width:98px;height:98px}
}
@media (min-width:701px) and (max-width:1050px){
  #screen-abc-adventure .abc-worlds{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  #screen-abc-adventure{
    width:100%;
    min-height:100dvh;
    padding:12px 10px 28px;
    border-radius:0;
  }
  #screen-abc-adventure:before{width:150px;height:150px;right:-52px;top:74px}
  #screen-abc-adventure:after{bottom:-92px;height:150px}
  #screen-abc-adventure .abc-head{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
  }
  #screen-abc-adventure .abc-head .quiz-quit{
    width:42px;height:42px;min-width:42px;padding:0;
  }
  #screen-abc-adventure .screen-title{
    font-size:clamp(20px,6vw,26px);
    line-height:1.08;
    white-space:normal;
  }
  #screen-abc-adventure .screen-sub{
    margin-top:3px;
    font-size:12px;
  }
  #screen-abc-adventure .abc-stars{
    align-self:start;
    white-space:nowrap;
    font-size:13px;
    padding:7px 9px;
  }
  #screen-abc-adventure .abc-evolution{
    margin:10px 0 12px;
    padding:10px 12px;
    gap:10px;
    border-radius:16px;
  }
  #screen-abc-adventure .abc-buddy{
    min-width:54px;
    font-size:42px;
  }
  #screen-abc-adventure .abc-evolution strong{font-size:14px}
  #screen-abc-adventure .abc-worlds{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  #screen-abc-adventure .abc-world{
    min-height:198px;
    padding:12px 8px;
    border-width:2px;
    border-radius:17px;
  }
  #screen-abc-adventure .abc-world-letter{font-size:42px}
  #screen-abc-adventure .abc-world-images{
    height:76px;
    gap:4px;
    margin:4px 0 7px;
  }
  #screen-abc-adventure .abc-world-images img{
    width:68px;height:68px;max-width:46%;
  }
  #screen-abc-adventure .abc-world strong{font-size:13px}
  #screen-abc-adventure .abc-world small{font-size:11px}
  #screen-abc-adventure .abc-game{
    margin:12px auto 0;
    padding:16px 12px 18px;
    border-width:3px;
    border-radius:22px;
  }
  #screen-abc-adventure .abc-letter{font-size:72px}
  #screen-abc-adventure .abc-sound{
    margin:9px 0 12px;
    padding:9px 14px;
  }
  #screen-abc-adventure .abc-prompt{
    margin:7px 0 12px;
    font-size:clamp(18px,5.4vw,22px);
    line-height:1.22;
  }
  #screen-abc-adventure .abc-choices{
    gap:9px;
  }
  #screen-abc-adventure .abc-choice{
    min-height:100px;
    border-radius:17px;
    font-size:38px;
  }
  #screen-abc-adventure .abc-choice.abc-picture-choice{
    min-height:132px;
    padding:6px;
  }
  #screen-abc-adventure .abc-picture-choice .abc-object-img{
    width:102px;height:102px;max-width:100%;
  }
  #screen-abc-adventure .abc-choice.abc-letter-choice{
    min-height:108px;
    font-size:54px;
  }
  #screen-abc-adventure .abc-choice.abc-continue{
    min-height:178px;
  }
  #screen-abc-adventure .abc-meet-letter{font-size:78px}
  #screen-abc-adventure .abc-feedback{
    min-height:28px;
    margin-top:11px;
    font-size:15px;
  }
}
@media (max-width:390px){
  #screen-abc-adventure{padding-left:8px;padding-right:8px}
  #screen-abc-adventure .abc-worlds{gap:8px}
  #screen-abc-adventure .abc-world{min-height:184px;padding:10px 6px}
  #screen-abc-adventure .abc-world-letter{font-size:38px}
  #screen-abc-adventure .abc-world-images{height:68px}
  #screen-abc-adventure .abc-world-images img{width:61px;height:61px}
  #screen-abc-adventure .abc-world strong{font-size:12px}
  #screen-abc-adventure .abc-choices{gap:7px}
  #screen-abc-adventure .abc-picture-choice .abc-object-img{width:92px;height:92px}
}


/* v1.10.3 — ABC single-card alignment fix */
#screen-abc-adventure .abc-choices.abc-single-stage{
  width:min(100%,360px)!important;
  max-width:360px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  justify-items:center!important;
}
#screen-abc-adventure .abc-choices.abc-single-stage .abc-choice{
  width:100%!important;
  max-width:360px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
@media (max-width:700px){
  #screen-abc-adventure .abc-choices.abc-single-stage{
    width:min(100%,320px)!important;
    max-width:320px!important;
  }
  #screen-abc-adventure .abc-choices.abc-single-stage .abc-choice{
    max-width:320px!important;
  }
}
@media (max-width:390px){
  #screen-abc-adventure .abc-choices.abc-single-stage{
    width:min(100%,290px)!important;
    max-width:290px!important;
  }
  #screen-abc-adventure .abc-choices.abc-single-stage .abc-choice{
    max-width:290px!important;
  }
}


/* v1.10.4 — targeted ABC single-stage grid specificity fix */
#screen-abc-adventure .abc-choices.abc-single-stage{
  grid-template-columns:minmax(0,1fr)!important;
  place-items:center!important;
}


/* RC3.5.1 — compact battle/question rhythm without changing answer mechanics */
#screen-quiz .quiz-question-card{
  padding-top:20px;
  padding-bottom:20px;
}
#screen-quiz #quiz-question{
  margin-top:0;
  margin-bottom:0;
  line-height:1.45;
}
#screen-quiz .quiz-answers{
  margin-top:18px;
}
@media(max-width:620px){
  #screen-quiz .quiz-question-card{
    padding:16px 14px;
  }
  #screen-quiz #quiz-question{
    font-size:clamp(16px,4.4vw,19px);
    line-height:1.4;
  }
  #screen-quiz .quiz-answers{
    margin-top:14px;
    gap:10px;
  }
}


/* RC3.5.3 — return player to the Story chapter/stage they just completed */
.story-node.story-return-focus,
.story-chapter-card.story-return-focus{
  animation:storyReturnFocusPulse 1.25s ease both;
}
@keyframes storyReturnFocusPulse{
  0%{box-shadow:0 0 0 0 rgba(45,212,191,0)}
  35%{box-shadow:0 0 0 4px rgba(45,212,191,.18),0 0 28px rgba(45,212,191,.18)}
  100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}
}


/* RC3.5.7 — hidden developer Story QA panel */
.dev-qa-panel{
  position:fixed;right:14px;bottom:14px;z-index:99999;width:min(330px,calc(100vw - 28px));
  padding:13px;border-radius:18px;background:rgba(10,16,40,.98);
  border:1px solid rgba(96,165,250,.28);box-shadow:0 18px 55px rgba(0,0,0,.45);
  color:#e8eeff;font-family:var(--font-body,system-ui,sans-serif)
}
.dev-qa-panel.hidden{display:none}
.dev-qa-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.dev-qa-head small{display:block;font-size:8px;letter-spacing:.15em;color:#7dd3fc;font-weight:1000}
.dev-qa-head strong{display:block;margin-top:2px;font-size:15px}
.dev-qa-head button{width:30px;height:30px;border:0;border-radius:10px;background:#1b2651;color:#cdd7ff;font-size:18px;cursor:pointer}
.dev-qa-toggle{display:flex;align-items:center;gap:8px;padding:9px;border-radius:12px;background:rgba(255,255,255,.045);font-size:10px;font-weight:800;margin-bottom:9px}
.dev-qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:7px}
.dev-qa-grid button,.dev-qa-reset{border:1px solid rgba(255,255,255,.09);border-radius:10px;background:#182249;color:#e5ecff;padding:9px 5px;font-size:9px;font-weight:900;cursor:pointer}
.dev-qa-grid.boss button{background:#2b1745;color:#f0dcff}
.dev-qa-reset{width:100%;margin-top:3px;background:#401c2d;color:#fecdd3}
.dev-qa-panel p{margin:8px 0 0;text-align:center;color:#7182ad;font-size:8px}
@media(max-width:620px){
  .dev-qa-panel{right:8px;bottom:8px;width:calc(100vw - 16px)}
  .dev-qa-grid{grid-template-columns:repeat(2,1fr)}
}


/* =========================================================
   RC3.5.11 — Bright Cheerful Visual Refresh (Phase 1)
   Visual layer only. No layout, gameplay, navigation or logic changes.
   ========================================================= */

:root{
  --ms-bg-deep:#2a2d8f;
  --ms-bg-purple:#6f3fd4;
  --ms-bg-blue:#2f7de9;
  --ms-bg-cyan:#59d7ef;
  --ms-surface:rgba(255,255,255,.14);
  --ms-surface-strong:rgba(255,255,255,.20);
  --ms-surface-soft:rgba(255,255,255,.10);
  --ms-border:rgba(255,255,255,.24);
  --ms-border-soft:rgba(255,255,255,.14);
  --ms-shadow:0 18px 46px rgba(42,45,143,.18);
  --ms-shadow-soft:0 10px 30px rgba(42,45,143,.12);
  --ms-math:#35c9ff;
  --ms-english:#a985ff;
  --ms-bm:#ff9f66;
  --ms-jawi:#52dfb0;
}

html,body{
  background:
    radial-gradient(circle at 14% 10%, rgba(115,225,255,.34), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(255,162,228,.24), transparent 30%),
    radial-gradient(circle at 78% 78%, rgba(118,255,213,.18), transparent 30%),
    linear-gradient(145deg,#3c46b8 0%,#6a45d7 34%,#3f75de 68%,#56c8e5 100%);
  background-attachment:fixed;
}

body::before,body::after{
  content:"";position:fixed;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(8px);opacity:.55;
}
body::before{
  width:34vw;height:34vw;min-width:320px;min-height:320px;left:-10vw;top:18vh;
  background:radial-gradient(circle,rgba(134,230,255,.24),rgba(255,255,255,0) 68%);
}
body::after{
  width:38vw;height:38vw;min-width:340px;min-height:340px;right:-12vw;bottom:-10vh;
  background:radial-gradient(circle,rgba(255,170,220,.20),rgba(255,255,255,0) 70%);
}
.screen{background:transparent !important;}

.card,.panel,.hub-card,.mode-card,.subject-card,.story-chapter,.story-node,.profile-card,.stats-card,.reward-card,.daily-card,.shop-card,.achievement-card,.result-card,.quiz-card,.question-card,.home-card,.adventure-card{
  border-color:var(--ms-border-soft) !important;box-shadow:var(--ms-shadow-soft);
}

.dashboard-card,.primary-learning-card,.story-map-card,.story-chapter,.profile-panel,.stats-panel,.results-panel,.quiz-shell,.mode-config-panel,.modal-card{
  background:linear-gradient(160deg,rgba(255,255,255,.19),rgba(255,255,255,.10)) !important;
  border:1px solid var(--ms-border) !important;box-shadow:var(--ms-shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

.topbar,.app-header,.dashboard-topbar,.story-header,.learning-header{
  background:linear-gradient(180deg,rgba(40,45,125,.78),rgba(62,61,160,.58)) !important;
  border-bottom:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}

.btn-primary,.primary-btn,.cta-primary,button.primary,.start-btn,.continue-btn{
  background:linear-gradient(135deg,#6d68f8,#4fa8f4 58%,#58d3e7) !important;
  border:1px solid rgba(255,255,255,.28) !important;box-shadow:0 8px 24px rgba(49,92,224,.24);
}
.btn-primary:hover,.primary-btn:hover,.cta-primary:hover,button.primary:hover,.start-btn:hover,.continue-btn:hover{filter:brightness(1.08) saturate(1.06);}
.btn-secondary,.secondary-btn,.back-btn,.menu-btn,.icon-btn{background:rgba(255,255,255,.12) !important;border-color:rgba(255,255,255,.18) !important;}

.adventure-card,.mode-card,.hub-card,.home-card{
  background:linear-gradient(155deg,rgba(255,255,255,.20),rgba(255,255,255,.09)) !important;
  border:1px solid rgba(255,255,255,.20) !important;
}
.adventure-card:hover,.mode-card:hover,.hub-card:hover,.home-card:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(48,70,180,.22);}

[data-subject="math"],.subject-math,.math-card{--subject-accent:var(--ms-math);}
[data-subject="english"],.subject-english,.english-card{--subject-accent:var(--ms-english);}
[data-subject="bm"],.subject-bm,.bm-card{--subject-accent:var(--ms-bm);}
[data-subject="jawi"],.subject-jawi,.jawi-card{--subject-accent:var(--ms-jawi);}
[data-subject],.subject-math,.subject-english,.subject-bm,.subject-jawi{
  border-color:color-mix(in srgb,var(--subject-accent,#8dcfff) 38%,rgba(255,255,255,.14)) !important;
  box-shadow:0 12px 30px rgba(35,45,140,.12),inset 0 1px 0 rgba(255,255,255,.18);
}

#screen-story,.story-screen{
  background:radial-gradient(circle at 50% 0%,rgba(105,225,255,.16),transparent 36%),radial-gradient(circle at 18% 56%,rgba(255,180,219,.13),transparent 28%),transparent !important;
}
.story-chapter{overflow:hidden;position:relative;}
.story-chapter::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 40%),radial-gradient(circle at 86% 0%,rgba(126,225,255,.09),transparent 30%);}

#screen-modes,#screen-learning,.learning-hub-screen{
  background:radial-gradient(circle at 20% 8%,rgba(117,233,255,.14),transparent 26%),radial-gradient(circle at 82% 18%,rgba(255,191,233,.11),transparent 30%),transparent !important;
}
.mode-card{position:relative;overflow:hidden;}
.mode-card::before{content:"";position:absolute;width:90px;height:90px;right:-28px;top:-34px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.20),transparent 68%);pointer-events:none;}

#screen-quiz{
  background:radial-gradient(circle at 50% -10%,rgba(119,224,255,.14),transparent 38%),linear-gradient(180deg,rgba(54,70,174,.18),rgba(59,46,138,.06)) !important;
}
.quiz-shell,.question-card{box-shadow:0 18px 44px rgba(36,47,140,.16);}

#screen-results{
  background:radial-gradient(circle at 50% 8%,rgba(255,224,119,.13),transparent 28%),radial-gradient(circle at 18% 32%,rgba(113,231,255,.13),transparent 24%),transparent !important;
}

.dashboard-shell::before,.adventure-shell::before,.learning-hub::before,.story-shell::before{
  content:"✦   ·   ✧   ·   ✦";position:absolute;top:16px;right:5%;color:rgba(255,255,255,.15);font-size:14px;letter-spacing:14px;pointer-events:none;user-select:none;
}

@media (max-width:720px){
  html,body{
    background-attachment:scroll;
    background:radial-gradient(circle at 14% 8%,rgba(115,225,255,.26),transparent 28%),radial-gradient(circle at 88% 14%,rgba(255,162,228,.18),transparent 28%),linear-gradient(155deg,#4655bf 0%,#714bd4 40%,#4384dc 72%,#63cbe0 100%);
  }
  body::before,body::after{opacity:.35;filter:blur(4px);}
  .dashboard-card,.primary-learning-card,.story-map-card,.story-chapter,.profile-panel,.stats-panel,.results-panel,.quiz-shell,.mode-config-panel,.modal-card{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  .adventure-card:hover,.mode-card:hover,.hub-card:hover,.home-card:hover{transform:none;}
}

@media (prefers-reduced-motion:reduce){
  .adventure-card,.mode-card,.hub-card,.home-card{transition:none !important;}
}


/* =========================================================
   RC3.5.12 — Card Refinement / Visual Density Pass
   Bright-cheerful theme preserved. Visual-only changes.
   ========================================================= */

:root{
  --ms-card-bg:rgba(19,27,68,.88);
  --ms-card-bg-soft:rgba(28,38,88,.78);
  --ms-card-bg-light:rgba(255,255,255,.16);
  --ms-card-border:rgba(255,255,255,.20);
  --ms-card-border-strong:rgba(255,255,255,.30);
  --ms-card-shadow:0 12px 30px rgba(18,27,88,.22);
  --ms-card-shadow-strong:0 18px 42px rgba(18,27,88,.28);
}

/* Generic dark cards: clearer, denser, less washed-out */
.card,
.panel,
.hub-card,
.mode-card,
.subject-card,
.story-chapter,
.story-node,
.profile-card,
.stats-card,
.reward-card,
.daily-card,
.shop-card,
.achievement-card,
.result-card,
.quiz-card,
.question-card,
.home-card,
.adventure-card{
  background:linear-gradient(160deg, rgba(24,33,82,.92), rgba(16,24,62,.88)) !important;
  border:1px solid var(--ms-card-border) !important;
  box-shadow:var(--ms-card-shadow) !important;
}

/* Cards that should feel brighter but still solid */
.dashboard-card,
.primary-learning-card,
.story-map-card,
.profile-panel,
.stats-panel,
.results-panel,
.quiz-shell,
.mode-config-panel,
.modal-card{
  background:
    linear-gradient(160deg, rgba(30,39,92,.92), rgba(22,31,77,.86)) !important;
  border:1px solid var(--ms-card-border-strong) !important;
  box-shadow:var(--ms-card-shadow-strong) !important;
}

/* Navigation / utility cards and horizontal strips */
.dashboard-quest,
.dashboard-journey,
.dashboard-quick-start,
.dashboard-stat,
.classroom-strip,
.reward-summary,
.reward-milestone,
.reward-help,
.more-card,
.profile-section,
.local-save-card{
  background:linear-gradient(160deg, rgba(28,38,88,.86), rgba(19,28,70,.82)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 10px 26px rgba(20,29,80,.18);
}

/* Tighter and more consistent internal density */
.card,
.panel,
.hub-card,
.mode-card,
.subject-card,
.story-chapter,
.profile-card,
.stats-card,
.reward-card,
.shop-card,
.achievement-card,
.home-card,
.adventure-card{
  padding-top:clamp(12px,1vw,18px);
  padding-bottom:clamp(12px,1vw,18px);
}

.mode-card,
.subject-card,
.achievement-card,
.shop-card{
  min-height:unset !important;
}

/* Reduce excessive empty vertical gaps in menus */
.mode-grid,
.subject-grid,
.achievement-grid,
.shop-grid,
.quick-start-grid,
.more-grid{
  gap:10px !important;
}

.dashboard-section,
.learning-section,
.rewards-section,
.profile-section-wrap,
.more-section{
  margin-bottom:14px !important;
}

/* Adventure tiles: stronger card edge and inner contrast */
.adventure-card{
  background:
    linear-gradient(150deg, rgba(23,32,77,.95), rgba(20,27,65,.90)) !important;
  border-color:rgba(255,255,255,.22) !important;
}

.adventure-card:hover{
  border-color:rgba(119,224,255,.48) !important;
  box-shadow:0 16px 36px rgba(20,30,95,.28) !important;
}

/* Learning Hub: stronger visual grouping */
#screen-modes .mode-card,
#screen-learning .mode-card,
.learning-hub-screen .mode-card{
  background:
    linear-gradient(155deg, rgba(22,31,76,.94), rgba(16,24,62,.90)) !important;
  border-color:rgba(255,255,255,.18) !important;
}

#screen-modes .subject-card,
#screen-learning .subject-card{
  background:rgba(22,31,76,.92) !important;
}

/* Rewards: cards were too translucent; make milestones readable */
#screen-rewards .reward-card,
#screen-rewards .achievement-card,
#screen-rewards .stats-card,
#screen-rewards .panel{
  background:
    linear-gradient(155deg, rgba(29,40,92,.94), rgba(21,30,73,.90)) !important;
  border-color:rgba(255,255,255,.18) !important;
}

#screen-rewards .achievement-card{
  padding:14px 16px !important;
}

/* More / Profile: stop large areas looking faint */
#screen-profile .profile-card,
#screen-profile .panel,
#screen-more .card,
#screen-more .panel{
  background:
    linear-gradient(155deg, rgba(31,42,96,.92), rgba(20,30,74,.88)) !important;
  border-color:rgba(255,255,255,.20) !important;
}

/* Form fields need stronger separation from the bright background */
input,
select,
textarea{
  background:rgba(14,22,58,.92) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* Give text cards a bit more breathing consistency, but not emptiness */
.card h2,
.card h3,
.panel h2,
.panel h3,
.mode-card h3,
.achievement-card h3{
  margin-bottom:4px;
}

.card p,
.panel p,
.mode-card p,
.achievement-card p{
  margin-top:3px;
  margin-bottom:6px;
}

/* Stronger footer/info strips */
.info-strip,
.help-strip,
.reward-help,
.profile-help{
  background:rgba(43,68,130,.48) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

/* Mobile card density */
@media (max-width: 720px){
  .card,
  .panel,
  .hub-card,
  .mode-card,
  .subject-card,
  .story-chapter,
  .profile-card,
  .stats-card,
  .reward-card,
  .shop-card,
  .achievement-card,
  .home-card,
  .adventure-card{
    padding-top:12px;
    padding-bottom:12px;
  }

  .mode-grid,
  .subject-grid,
  .achievement-grid,
  .shop-grid,
  .quick-start-grid,
  .more-grid{
    gap:8px !important;
  }
}


/* =========================================================
   RC3.5.13 — Actual Card Selector Refinement
   Uses the real production class names from index.html.
   ========================================================= */

/* HOME */
#screen-dashboard .ms-home-world{
  background:linear-gradient(145deg,rgba(20,30,78,.96),rgba(19,36,82,.93)) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:0 20px 48px rgba(19,29,91,.30) !important;
}
#screen-dashboard .ms-quest-card,
#screen-dashboard .ms-journey-card,
#screen-dashboard .ms-quick-card{
  background:linear-gradient(155deg,rgba(21,30,76,.97),rgba(16,23,59,.94)) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 12px 28px rgba(16,25,83,.24) !important;
}
#screen-dashboard .ms-quest-card,
#screen-dashboard .ms-journey-card{padding:16px 18px !important}
#screen-dashboard .ms-quick-card{padding:12px 14px !important}
#screen-dashboard .ms-home-row{gap:10px !important;margin-top:12px !important}
#screen-dashboard .ms-quick-grid{gap:9px !important}
#screen-dashboard .ms-daily-reward{
  box-shadow:0 14px 34px rgba(28,47,111,.22) !important;
  border:1px solid rgba(255,255,255,.34) !important;
}
#screen-dashboard .ms-progress-strip{
  background:rgba(28,52,112,.40) !important;
  border:1px solid rgba(255,255,255,.15) !important;
}

/* ADVENTURES */
#screen-adventures .adv3-card{
  background:linear-gradient(150deg,rgba(19,28,71,.98),rgba(13,21,55,.95)) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 15px 36px rgba(15,24,76,.28) !important;
}
#screen-adventures .adv3-card .adv3-body{padding:22px !important}
#screen-adventures .adv3-grid{gap:12px !important}
#screen-adventures .adv3-divider{margin:26px 0 24px !important}
#screen-adventures .adv3-card p{color:#c9d3ef !important}
#screen-adventures .adv3-card:hover{
  border-color:rgba(104,226,255,.56) !important;
  box-shadow:0 18px 40px rgba(15,24,76,.34) !important;
}

/* PRIMARY LEARNING HUB */
#screen-modes .learning-launcher{
  background:linear-gradient(145deg,rgba(21,31,78,.97),rgba(15,24,62,.96)) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:0 18px 44px rgba(17,27,88,.28) !important;
  padding:20px !important;
}
#screen-modes .subject-chips{gap:8px !important;margin-top:14px !important}
#screen-modes .subject-chip{
  background:rgba(18,27,68,.96) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 7px 18px rgba(12,20,64,.18) !important;
  min-height:56px !important;
}
#screen-modes .subject-chip.active{
  background:linear-gradient(135deg,rgba(21,144,163,.52),rgba(27,49,103,.97)) !important;
  border-color:#46e4df !important;
  box-shadow:0 9px 22px rgba(28,181,198,.20) !important;
}
#screen-modes .launcher-divider{margin:18px 0 !important}
#screen-modes .plh-mode-grid{gap:9px !important}
#screen-modes .plh-mode{
  background:linear-gradient(150deg,rgba(21,30,73,.97),rgba(15,23,59,.95)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 8px 20px rgba(13,22,70,.20) !important;
  padding:14px 16px !important;
}
#screen-modes .plh-live{
  background:linear-gradient(145deg,rgba(36,76,137,.76),rgba(25,57,114,.74)) !important;
  border:1px solid rgba(111,224,255,.28) !important;
  box-shadow:0 12px 28px rgba(18,40,96,.20) !important;
}

/* REWARDS — actual screen id is screen-leaderboard */
#screen-leaderboard .reward-v2-hero{
  background:linear-gradient(135deg,rgba(25,52,105,.96),rgba(42,33,103,.95)) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:0 16px 38px rgba(17,28,89,.26) !important;
}
#screen-leaderboard .reward-v2-stat,
#screen-leaderboard .reward-v2-progress-card{
  background:linear-gradient(150deg,rgba(22,31,75,.97),rgba(15,23,58,.95)) !important;
  border:1px solid rgba(255,255,255,.19) !important;
  box-shadow:0 9px 22px rgba(15,24,76,.20) !important;
}
#screen-leaderboard .reward-v2-stats{gap:8px !important;margin-bottom:12px !important}
#screen-leaderboard .reward-v2-stat{padding:13px 14px !important}
#screen-leaderboard .reward-v2-progress-card{padding:16px !important;margin-bottom:18px !important}
#screen-leaderboard .reward-v2-badges{gap:9px !important}
#screen-leaderboard .reward-v2-badge,
#screen-leaderboard .reward-badge-card{
  background:linear-gradient(150deg,rgba(31,47,101,.94),rgba(22,34,82,.93)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 8px 20px rgba(18,28,82,.18) !important;
}
#screen-leaderboard .reward-v2-note{
  background:rgba(39,88,150,.42) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

/* MORE / PROFILE */
#screen-profile .kids-more-head{
  background:linear-gradient(145deg,rgba(89,65,194,.44),rgba(43,82,169,.34)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 12px 28px rgba(31,40,123,.17) !important;
}
#screen-profile .kids-more-grid{gap:9px !important}
#screen-profile .kids-more-card{
  background:linear-gradient(145deg,rgba(83,66,190,.68),rgba(54,72,169,.60)) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 8px 20px rgba(31,40,123,.16) !important;
  min-height:70px !important;
  padding:13px 15px !important;
}
#screen-profile .kids-profile-form{
  background:linear-gradient(155deg,rgba(75,78,190,.40),rgba(39,96,183,.31)) !important;
  border:1px solid rgba(255,255,255,.19) !important;
  box-shadow:0 14px 32px rgba(31,45,127,.16) !important;
  padding:18px !important;
}
#screen-profile .local-save-panel{
  background:linear-gradient(145deg,rgba(20,43,78,.88),rgba(22,30,71,.91)) !important;
  border:1px solid rgba(105,230,218,.27) !important;
  box-shadow:0 9px 24px rgba(15,27,72,.18) !important;
}
#screen-profile .avatar-grid{gap:8px !important}

/* Improve inner text contrast on all reviewed menu cards */
#screen-dashboard .ms-quest-card p,
#screen-dashboard .ms-journey-card p,
#screen-dashboard .ms-quick-card small,
#screen-modes .plh-mode p,
#screen-modes .plh-mode small,
#screen-profile .kids-more-card small,
#screen-leaderboard .reward-v2-stat small{
  color:#b8c5e8 !important;
}

/* Mobile stays dense but comfortable */
@media(max-width:720px){
  #screen-dashboard .ms-home-row{gap:8px !important}
  #screen-adventures .adv3-grid{gap:10px !important}
  #screen-adventures .adv3-card .adv3-body{padding:18px !important}
  #screen-modes .learning-launcher{padding:16px !important}
  #screen-profile .kids-profile-form{padding:15px !important}
}


/* =========================================================
   RC3.5.14 — Tinted Card System
   Controlled hue integration with the bright-cheerful world.
   ========================================================= */

:root{
  --ms-home-tint-a:rgba(56,74,170,.96);
  --ms-home-tint-b:rgba(35,87,156,.92);

  --ms-adv-tint-a:rgba(62,48,151,.96);
  --ms-adv-tint-b:rgba(37,74,139,.93);

  --ms-learn-tint-a:rgba(27,64,137,.97);
  --ms-learn-tint-b:rgba(31,88,152,.93);

  --ms-reward-tint-a:rgba(78,57,143,.96);
  --ms-reward-tint-b:rgba(81,72,135,.93);

  --ms-more-tint-a:rgba(82,65,172,.92);
  --ms-more-tint-b:rgba(50,97,169,.88);

  --ms-math-tint:rgba(49,167,218,.22);
  --ms-english-tint:rgba(139,105,235,.22);
  --ms-bm-tint:rgba(232,126,94,.22);
  --ms-jawi-tint:rgba(62,196,159,.22);
}

/* HOME — blue-violet with cyan undertone */
#screen-dashboard .ms-home-world{
  background:
    radial-gradient(circle at 84% 18%, rgba(88,211,235,.16), transparent 34%),
    linear-gradient(145deg,var(--ms-home-tint-a),var(--ms-home-tint-b)) !important;
}

#screen-dashboard .ms-quest-card{
  background:
    linear-gradient(145deg,rgba(45,62,145,.98),rgba(30,76,137,.95)) !important;
  border-color:rgba(115,218,255,.26) !important;
}

#screen-dashboard .ms-journey-card{
  background:
    linear-gradient(145deg,rgba(66,50,145,.97),rgba(47,66,133,.95)) !important;
  border-color:rgba(171,146,255,.25) !important;
}

#screen-dashboard .ms-quick-card:nth-child(1){
  background:linear-gradient(145deg,rgba(31,89,145,.96),rgba(28,71,126,.94)) !important;
}
#screen-dashboard .ms-quick-card:nth-child(2){
  background:linear-gradient(145deg,rgba(68,54,151,.96),rgba(47,68,134,.94)) !important;
}
#screen-dashboard .ms-quick-card:nth-child(3){
  background:linear-gradient(145deg,rgba(39,89,137,.96),rgba(28,78,126,.94)) !important;
}

/* ADVENTURES — violet/indigo world cards */
#screen-adventures .adv3-card{
  background:
    radial-gradient(circle at 90% 8%, rgba(122,185,255,.08), transparent 30%),
    linear-gradient(150deg,var(--ms-adv-tint-a),var(--ms-adv-tint-b)) !important;
}

#screen-adventures .adv3-card:nth-child(4n+1){
  border-color:rgba(116,220,255,.27) !important;
}
#screen-adventures .adv3-card:nth-child(4n+2){
  border-color:rgba(190,143,255,.26) !important;
}
#screen-adventures .adv3-card:nth-child(4n+3){
  border-color:rgba(255,173,209,.23) !important;
}
#screen-adventures .adv3-card:nth-child(4n){
  border-color:rgba(101,225,190,.23) !important;
}

/* LEARN — cool blue/cyan base */
#screen-modes .learning-launcher{
  background:
    radial-gradient(circle at 82% 10%, rgba(99,224,242,.11), transparent 30%),
    linear-gradient(145deg,var(--ms-learn-tint-a),var(--ms-learn-tint-b)) !important;
  border-color:rgba(112,226,244,.25) !important;
}

#screen-modes .plh-mode{
  background:
    linear-gradient(145deg,rgba(34,73,141,.97),rgba(25,60,123,.95)) !important;
  border-color:rgba(122,202,255,.20) !important;
}

/* Subject semantic tints */
#screen-modes .subject-chip{
  background:linear-gradient(145deg,rgba(31,63,130,.95),rgba(26,52,111,.94)) !important;
}

#screen-modes .subject-chip:nth-child(1){
  background:
    linear-gradient(145deg,var(--ms-math-tint),rgba(29,60,125,.95)) !important;
  border-color:rgba(84,209,255,.34) !important;
}

#screen-modes .subject-chip:nth-child(2){
  background:
    linear-gradient(145deg,var(--ms-english-tint),rgba(52,47,129,.95)) !important;
  border-color:rgba(174,139,255,.34) !important;
}

#screen-modes .subject-chip:nth-child(3){
  background:
    linear-gradient(145deg,var(--ms-bm-tint),rgba(72,58,125,.95)) !important;
  border-color:rgba(255,167,120,.34) !important;
}

#screen-modes .subject-chip:nth-child(4){
  background:
    linear-gradient(145deg,var(--ms-jawi-tint),rgba(31,78,118,.95)) !important;
  border-color:rgba(95,222,183,.34) !important;
}

#screen-modes .subject-chip.active:nth-child(1){
  background:linear-gradient(145deg,rgba(41,176,219,.54),rgba(27,87,151,.96)) !important;
}
#screen-modes .subject-chip.active:nth-child(2){
  background:linear-gradient(145deg,rgba(132,96,226,.58),rgba(63,59,146,.96)) !important;
}
#screen-modes .subject-chip.active:nth-child(3){
  background:linear-gradient(145deg,rgba(222,111,82,.52),rgba(85,63,137,.96)) !important;
}
#screen-modes .subject-chip.active:nth-child(4){
  background:linear-gradient(145deg,rgba(53,186,149,.52),rgba(31,93,125,.96)) !important;
}

/* REWARDS — purple/blue base with warm gold accents */
#screen-leaderboard .reward-v2-hero{
  background:
    radial-gradient(circle at 88% 10%, rgba(255,203,92,.10), transparent 28%),
    linear-gradient(135deg,var(--ms-reward-tint-a),var(--ms-reward-tint-b)) !important;
  border-color:rgba(255,214,120,.24) !important;
}

#screen-leaderboard .reward-v2-stat:nth-child(1){
  background:linear-gradient(145deg,rgba(87,62,145,.96),rgba(65,70,132,.94)) !important;
}
#screen-leaderboard .reward-v2-stat:nth-child(2){
  background:linear-gradient(145deg,rgba(79,72,154,.96),rgba(59,78,139,.94)) !important;
}
#screen-leaderboard .reward-v2-stat:nth-child(3){
  background:linear-gradient(145deg,rgba(53,91,150,.96),rgba(44,82,137,.94)) !important;
}
#screen-leaderboard .reward-v2-stat:nth-child(4){
  background:linear-gradient(145deg,rgba(91,63,145,.96),rgba(70,68,134,.94)) !important;
}

#screen-leaderboard .reward-v2-progress-card{
  background:
    linear-gradient(145deg,rgba(67,67,146,.95),rgba(48,78,139,.93)) !important;
}

#screen-leaderboard .reward-v2-badge,
#screen-leaderboard .reward-badge-card{
  background:
    linear-gradient(145deg,rgba(61,72,145,.94),rgba(46,79,137,.92)) !important;
}

#screen-leaderboard .reward-v2-note{
  background:
    linear-gradient(145deg,rgba(50,104,163,.42),rgba(76,84,157,.38)) !important;
}

/* MORE — lavender/blue instead of flat translucent purple */
#screen-profile .kids-more-head{
  background:
    linear-gradient(145deg,var(--ms-more-tint-a),var(--ms-more-tint-b)) !important;
}

#screen-profile .kids-more-card:nth-child(1){
  background:linear-gradient(145deg,rgba(104,78,194,.74),rgba(61,100,175,.68)) !important;
}
#screen-profile .kids-more-card:nth-child(2){
  background:linear-gradient(145deg,rgba(87,74,184,.74),rgba(62,89,165,.68)) !important;
}
#screen-profile .kids-more-card:nth-child(3){
  background:linear-gradient(145deg,rgba(112,76,178,.72),rgba(67,96,168,.66)) !important;
}

#screen-profile .kids-profile-form{
  background:
    linear-gradient(150deg,rgba(89,79,187,.54),rgba(48,105,180,.46)) !important;
}

#screen-profile .local-save-panel{
  background:
    linear-gradient(145deg,rgba(31,73,117,.90),rgba(41,59,119,.90)) !important;
}

/* Shared soft highlight so tinted cards still feel like one design system */
#screen-dashboard .ms-quest-card,
#screen-dashboard .ms-journey-card,
#screen-dashboard .ms-quick-card,
#screen-adventures .adv3-card,
#screen-modes .subject-chip,
#screen-modes .plh-mode,
#screen-leaderboard .reward-v2-stat,
#screen-leaderboard .reward-v2-progress-card,
#screen-profile .kids-more-card,
#screen-profile .kids-profile-form{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 11px 28px rgba(20,28,91,.20) !important;
}

/* Avoid oversaturation on small screens */
@media(max-width:720px){
  #screen-dashboard .ms-quest-card,
  #screen-dashboard .ms-journey-card,
  #screen-dashboard .ms-quick-card,
  #screen-adventures .adv3-card,
  #screen-modes .plh-mode,
  #screen-leaderboard .reward-v2-stat,
  #screen-profile .kids-more-card{
    filter:saturate(.92);
  }
}


/* =========================================================
   RC3.5.15 — Mobile Layout Recovery
   P0 responsive guard after bright/tinted visual refresh.
   Desktop visual theme is intentionally preserved.
   ========================================================= */

@media (max-width: 720px){

  html,
  body{
    width:100%;
    max-width:100%;
    min-height:100%;
    overflow-x:hidden !important;
  }

  body{
    position:relative;
  }

  *, *::before, *::after{
    box-sizing:border-box;
  }

  /* ---------- Onboarding: exactly one step viewport ---------- */
  #onboarding{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
    overscroll-behavior:none;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px !important;
  }

  #onboarding .ob-shell{
    width:min(100%,560px) !important;
    max-width:560px !important;
    height:calc(100dvh - 20px) !important;
    min-height:0 !important;
    max-height:calc(100dvh - 20px) !important;
    padding:14px !important;
    margin:0 auto !important;
    border-radius:22px !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  #onboarding .ob-logo{
    flex:0 0 auto;
    margin-bottom:8px !important;
  }

  #onboarding .ob-screen{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-height:none !important;
    flex:1 1 auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:2px 2px 8px !important;
  }

  /* Preserve the app's step visibility mechanism. Hidden onboarding steps
     must never occupy flow space on phones. */
  #onboarding .ob-screen.hidden,
  #onboarding .ob-screen[hidden],
  #onboarding .ob-screen[aria-hidden="true"]{
    display:none !important;
  }

  #onboarding .ob-screen:not(.active):not([style*="display: block"]):not([style*="display:block"]){
    /* Fallback only for builds where JS toggles .active. */
  }

  #onboarding .ob-dots{
    flex:0 0 auto;
    margin:7px 0 0 !important;
    padding-bottom:1px;
  }

  #onboarding .ob-welcome-grid{
    grid-template-columns:1fr !important;
    gap:6px !important;
    min-height:0 !important;
  }

  #onboarding .ob-mascot-stage{
    min-height:130px !important;
  }

  #onboarding .ob-mascot{
    font-size:68px !important;
  }

  #onboarding .ob-feature-pills{
    margin:10px 0 4px !important;
    gap:6px !important;
  }

  #onboarding .ob-feature-pills span{
    padding:6px 8px !important;
    font-size:9px !important;
  }

  #onboarding .ob-screen h1{
    font-size:clamp(30px,10vw,38px) !important;
    line-height:1 !important;
  }

  #onboarding .ob-screen h2{
    font-size:clamp(23px,7vw,30px) !important;
  }

  #onboarding .ob-sub{
    font-size:11px !important;
    line-height:1.4 !important;
  }

  #onboarding #ob-avatar-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    margin-top:10px !important;
  }

  #onboarding #ob-avatar-grid .avatar-choice{
    min-width:0 !important;
    min-height:58px !important;
    font-size:27px !important;
  }

  #onboarding .ob-name-sign{
    width:100% !important;
    max-width:430px !important;
    margin:12px auto !important;
  }

  #onboarding .ob-name-input{
    min-width:0 !important;
  }

  #onboarding .ob-world-cta,
  #onboarding #ob-finish-btn{
    width:100% !important;
    max-width:430px !important;
  }

  /* ---------- App shell ---------- */
  #app{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  #main-content{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  #main-content > .screen{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  /* All main menu grids collapse cleanly. */
  .ms-home-row,
  .ms-quick-grid,
  .adv3-grid,
  .primary-grid,
  .subject-chips,
  .plh-mode-grid,
  .reward-v2-stats,
  .reward-v2-badges,
  .kids-more-grid{
    min-width:0 !important;
  }

  #screen-dashboard .ms-home-row,
  #screen-dashboard .ms-quick-grid,
  #screen-adventures .adv3-grid,
  #screen-adventures .primary-grid,
  #screen-leaderboard .reward-v2-stats{
    grid-template-columns:1fr !important;
  }

  #screen-modes .subject-chips{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #screen-modes .plh-mode-grid{
    grid-template-columns:1fr !important;
  }

  /* Prevent tinted cards from overflowing viewport. */
  #screen-dashboard .ms-home-world,
  #screen-dashboard .ms-quest-card,
  #screen-dashboard .ms-journey-card,
  #screen-dashboard .ms-quick-card,
  #screen-adventures .adv3-card,
  #screen-modes .learning-launcher,
  #screen-modes .subject-chip,
  #screen-modes .plh-mode,
  #screen-leaderboard .reward-v2-hero,
  #screen-leaderboard .reward-v2-stat,
  #screen-leaderboard .reward-v2-progress-card,
  #screen-profile .kids-more-head,
  #screen-profile .kids-more-card,
  #screen-profile .kids-profile-form,
  #screen-profile .local-save-panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #screen-adventures .adv3-wide,
  #screen-adventures .adv3-primary-wide{
    grid-column:auto !important;
    min-height:0 !important;
  }

  #screen-adventures .adv3-card{
    min-height:190px !important;
  }

  #screen-adventures .adv3-body{
    max-width:100% !important;
  }

  #screen-leaderboard .reward-v2-hero{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  #screen-leaderboard .reward-v2-level{
    width:100% !important;
    min-width:0 !important;
  }

  #screen-profile .kids-more-card{
    min-height:68px !important;
  }

  input,
  select,
  textarea,
  button{
    max-width:100%;
  }
}

@media (max-width: 430px){
  #onboarding{
    padding:6px !important;
  }

  #onboarding .ob-shell{
    height:calc(100dvh - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
    padding:11px !important;
    border-radius:18px !important;
  }

  #onboarding .ob-mascot-stage{
    min-height:110px !important;
  }

  #screen-modes .subject-chips{
    grid-template-columns:1fr 1fr !important;
  }
}


/* =========================================================
   RC3.5.16 — Avatar Grid Consistency
   Prevent selected avatar cards from overlapping neighbours.
   ========================================================= */

#onboarding #ob-avatar-grid{
  align-items:stretch;
}

#onboarding #ob-avatar-grid .avatar-choice{
  position:relative;
  transform:none !important;
  z-index:1;
  overflow:visible;
}

#onboarding #ob-avatar-grid .avatar-choice:hover{
  transform:translateY(-2px) !important;
  z-index:2;
}

#onboarding #ob-avatar-grid .avatar-choice.selected{
  transform:translateY(-2px) scale(1.035) !important;
  z-index:3;
  border-color:#ffd166 !important;
  background:#34447e !important;
  box-shadow:
    0 6px 0 #a66a19,
    0 0 0 2px rgba(255,209,102,.14),
    0 0 20px rgba(255,209,102,.22) !important;
}

/* Keep enough breathing room for the subtle selected-state scale. */
#onboarding #ob-avatar-grid{
  gap:12px !important;
}

@media(max-width:720px){
  #onboarding #ob-avatar-grid{
    gap:8px !important;
  }

  #onboarding #ob-avatar-grid .avatar-choice.selected{
    transform:translateY(-1px) scale(1.02) !important;
    box-shadow:
      0 5px 0 #a66a19,
      0 0 0 2px rgba(255,209,102,.12),
      0 0 16px rgba(255,209,102,.20) !important;
  }
}


/* =========================================================
   RC3.5.17 — Visual Balance Pass
   Calm the Learn content panel slightly while preserving the
   bright-cheerful global theme and stronger selected states.
   ========================================================= */

/* Learn: reduce panel saturation/brightness ~10–15% */
#screen-modes .learning-launcher{
  background:
    radial-gradient(circle at 82% 10%, rgba(99,224,242,.07), transparent 30%),
    linear-gradient(145deg,rgba(24,54,122,.98),rgba(27,72,132,.95)) !important;
  border-color:rgba(112,226,244,.22) !important;
  box-shadow:0 18px 42px rgba(17,27,88,.25) !important;
}

/* Non-selected subject cards are a touch calmer */
#screen-modes .subject-chip{
  filter:saturate(.90) brightness(.97);
}

/* Active subject becomes the clear focal point */
#screen-modes .subject-chip.active{
  filter:saturate(1.08) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.05),
    0 10px 24px rgba(22,43,118,.24) !important;
}

/* Challenge cards: slightly calmer than active subject */
#screen-modes .plh-mode{
  filter:saturate(.94) brightness(.985);
  background:
    linear-gradient(145deg,rgba(31,64,129,.97),rgba(24,53,113,.95)) !important;
}

/* Preserve colorful icon identity without making whole card compete */
#screen-modes .plh-mode-icon{
  filter:saturate(1.05) brightness(1.03);
}

/* Classroom strip should sit below the learning launcher in hierarchy */
#screen-modes .plh-live{
  filter:saturate(.90) brightness(.97);
}

/* Mobile gets the same hierarchy without extra dimming */
@media(max-width:720px){
  #screen-modes .learning-launcher{
    background:
      radial-gradient(circle at 82% 10%, rgba(99,224,242,.06), transparent 30%),
      linear-gradient(145deg,rgba(25,57,126,.98),rgba(29,75,136,.95)) !important;
  }

  #screen-modes .subject-chip{
    filter:saturate(.92) brightness(.98);
  }

  #screen-modes .subject-chip.active{
    filter:saturate(1.08) brightness(1.05);
  }

  #screen-modes .plh-mode{
    filter:saturate(.95) brightness(.99);
  }
}


/* =========================================================
   RC3.5.21 — Time Attack Retirement / Learning Hub Simplification
   Three distinct solo modes: Free Practice, Quick Quiz, Survival.
   ========================================================= */
#screen-modes .plh-mode-grid.launcher-modes{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
@media(max-width:760px){
  #screen-modes .plh-mode-grid.launcher-modes{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   Central Visual Assets Pass 1.1 — ABC Adventure layout cleanup
   Scoped visual repair only. Gameplay/progression unchanged.
   ========================================================= */
#screen-abc-adventure{
  --abc-navy:#26345f;
  --abc-muted:#61719a;
  isolation:isolate;
  padding:20px clamp(14px,3vw,28px) 72px !important;
}

/* Keep scenery decorative instead of competing with content. */
#screen-abc-adventure:before{
  width:150px !important;
  height:150px !important;
  right:-45px !important;
  top:76px !important;
  opacity:.58 !important;
  z-index:0 !important;
}
#screen-abc-adventure:after{
  left:-3% !important;
  right:-3% !important;
  bottom:-48px !important;
  height:92px !important;
  opacity:.82 !important;
  border-radius:55% 55% 0 0 !important;
  z-index:0 !important;
}

/* Give the header its own readable surface. */
#screen-abc-adventure .abc-head{
  position:relative;
  z-index:5;
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center !important;
  gap:12px !important;
  min-height:72px !important;
  padding:11px 12px !important;
  margin:0 0 12px !important;
  border:2px solid rgba(255,255,255,.82);
  border-radius:20px;
  background:rgba(255,255,255,.93);
  box-shadow:0 10px 28px rgba(42,67,124,.18);
  backdrop-filter:blur(6px);
}
#screen-abc-adventure .abc-head-copy{min-width:0}
#screen-abc-adventure .abc-head .quiz-quit{
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:13px !important;
  display:grid !important;
  place-items:center;
  font-size:18px;
}
#screen-abc-adventure .abc-head .screen-title{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 !important;
  color:var(--abc-navy) !important;
  font-size:clamp(20px,4vw,27px) !important;
  line-height:1.05 !important;
  text-shadow:none !important;
  white-space:normal;
}
#screen-abc-adventure .abc-title-icon{
  width:28px;
  height:28px;
  object-fit:contain;
  flex:0 0 auto;
}
#screen-abc-adventure .abc-head .screen-sub{
  margin:4px 0 0 !important;
  color:var(--abc-muted) !important;
  font-size:12px !important;
  font-weight:700;
  line-height:1.25;
}
#screen-abc-adventure .abc-stars{
  position:relative;
  z-index:6;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:70px;
  min-height:42px;
  padding:8px 12px !important;
  margin:0 !important;
  border:2px solid rgba(231,173,34,.2);
  border-radius:999px !important;
  background:#fff9d8 !important;
  color:#855000 !important;
  font-size:16px !important;
  font-weight:1000 !important;
  box-shadow:0 6px 16px rgba(126,87,12,.12) !important;
}
#screen-abc-adventure .abc-star-icon{width:20px;height:20px;object-fit:contain}
#screen-abc-adventure .abc-star-count{min-width:1ch;text-align:center}

/* Evolution card should read as a clean status card, not blend into scenery. */
#screen-abc-adventure .abc-evolution{
  position:relative;
  z-index:4;
  min-height:72px;
  margin:0 0 14px !important;
  padding:11px 14px !important;
  gap:12px !important;
  border:2px solid rgba(255,255,255,.92) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 9px 22px rgba(42,67,124,.14) !important;
}
#screen-abc-adventure .abc-buddy{
  min-width:58px !important;
  width:58px;
  font-size:42px !important;
  line-height:1;
}
#screen-abc-adventure .abc-evolution strong{
  display:block;
  color:#31416d;
  font-size:14px;
  line-height:1.2;
}
#screen-abc-adventure .abc-track{
  height:9px !important;
  margin-top:8px !important;
  background:#e5ebf8 !important;
  border:1px solid rgba(62,86,142,.08);
}

/* Main gameplay panel: opaque and comfortably above the decorative hill. */
#screen-abc-adventure .abc-game{
  position:relative;
  z-index:4;
  width:min(100%,680px) !important;
  margin:16px auto 6px !important;
  padding:20px clamp(14px,4vw,24px) 24px !important;
  border:3px solid rgba(255,255,255,.96) !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 18px 38px rgba(45,73,132,.18) !important;
}
#screen-abc-adventure .abc-letter{
  font-size:clamp(68px,15vw,92px) !important;
  margin-top:0;
}
#screen-abc-adventure .abc-sound{
  margin:8px 0 14px !important;
  min-height:40px !important;
  padding:8px 14px !important;
}
#screen-abc-adventure .abc-prompt{
  margin:8px 0 14px !important;
  color:#35456f !important;
  font-size:clamp(17px,4vw,21px) !important;
  line-height:1.25;
}
#screen-abc-adventure .abc-choices.abc-single-stage{
  width:min(100%,320px) !important;
  max-width:320px !important;
}
#screen-abc-adventure .abc-choice.abc-continue{
  min-height:150px !important;
  padding:14px !important;
  border-radius:18px !important;
}
#screen-abc-adventure .abc-meet-letter{
  font-size:clamp(74px,18vw,100px) !important;
}
#screen-abc-adventure .abc-feedback{
  min-height:24px !important;
  margin-top:12px !important;
  font-size:16px !important;
}

@media(max-width:600px){
  #screen-abc-adventure{
    min-height:calc(100dvh - 18px) !important;
    padding:10px 10px 58px !important;
    border-radius:18px !important;
  }
  #screen-abc-adventure:before{
    width:110px !important;
    height:110px !important;
    right:-38px !important;
    top:86px !important;
    opacity:.38 !important;
  }
  #screen-abc-adventure:after{
    bottom:-42px !important;
    height:68px !important;
    opacity:.72 !important;
  }
  #screen-abc-adventure .abc-head{
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:8px !important;
    min-height:64px !important;
    padding:9px 9px !important;
    border-radius:17px;
  }
  #screen-abc-adventure .abc-head .quiz-quit{
    width:36px !important;min-width:36px !important;height:36px !important;min-height:36px !important;
    border-radius:11px !important;font-size:16px;
  }
  #screen-abc-adventure .abc-head .screen-title{
    gap:6px;
    font-size:clamp(17px,5.1vw,21px) !important;
  }
  #screen-abc-adventure .abc-title-icon{width:23px;height:23px}
  #screen-abc-adventure .abc-head .screen-sub{font-size:10px !important;margin-top:3px !important}
  #screen-abc-adventure .abc-stars{
    min-width:58px;
    min-height:36px;
    padding:6px 9px !important;
    font-size:14px !important;
    gap:4px;
  }
  #screen-abc-adventure .abc-star-icon{width:17px;height:17px}
  #screen-abc-adventure .abc-evolution{
    min-height:64px;
    padding:9px 11px !important;
    border-radius:16px !important;
  }
  #screen-abc-adventure .abc-buddy{min-width:50px !important;width:50px;font-size:36px !important}
  #screen-abc-adventure .abc-evolution strong{font-size:12px}
  #screen-abc-adventure .abc-game{
    margin-top:10px !important;
    padding:16px 12px 20px !important;
    border-radius:20px !important;
  }
  #screen-abc-adventure .abc-choice.abc-continue{min-height:132px !important}
  #screen-abc-adventure .abc-feedback{font-size:14px !important}
}

@media(max-width:390px){
  #screen-abc-adventure .abc-head{
    grid-template-columns:36px minmax(0,1fr) 52px;
  }
  #screen-abc-adventure .abc-head .screen-title{font-size:16px !important}
  #screen-abc-adventure .abc-title-icon{width:20px;height:20px}
  #screen-abc-adventure .abc-stars{min-width:52px;padding:5px 7px !important}
}


/* CENTRAL VISUAL PASS 1.2 MINIMAL — ABC header icon only.
   Intentionally does NOT change Magic Egg, world cards, gameplay, or progression. */
#screen-abc-adventure .abc-head .screen-title{
  gap:10px !important;
  align-items:center !important;
}
#screen-abc-adventure .abc-title-icon{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 2px 3px rgba(31,52,104,.10));
}
@media(max-width:600px){
  #screen-abc-adventure .abc-head .screen-title{gap:8px !important}
  #screen-abc-adventure .abc-title-icon{
    width:28px !important;
    height:28px !important;
    flex-basis:28px !important;
  }
}
@media(max-width:390px){
  #screen-abc-adventure .abc-title-icon{
    width:25px !important;
    height:25px !important;
    flex-basis:25px !important;
  }
}
/* MindaMatch v3.1.2 isolated module integration */
.adv3-mindamatch .adv3-art{display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(145deg,#ede9fe,#dbeafe);}
.mindamatch-preview.picture{width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(42,34,105,.18));}
.mindamatch-preview.word{display:grid;place-items:center;min-width:76px;padding:12px 14px;border-radius:16px;background:#fff;color:#312e81;font-weight:1000;font-size:1.25rem;box-shadow:0 8px 18px rgba(42,34,105,.14);}
.mindamatch-link{width:46px;height:4px;border-radius:99px;background:linear-gradient(90deg,#7c3aed,#38bdf8);transform:rotate(-8deg);}
.mindamatch-module[hidden]{display:none!important;}
.mindamatch-module{position:fixed;inset:0;z-index:100000;background:#4338ca;}
.mindamatch-module iframe{display:block;width:100%;height:100%;border:0;background:#4338ca;}
.mindamatch-module-close{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));z-index:2;border:2px solid rgba(255,255,255,.7);border-radius:999px;padding:10px 15px;background:rgba(17,24,39,.88);color:#fff;font:800 .88rem/1 system-ui,sans-serif;box-shadow:0 8px 22px rgba(0,0,0,.24);cursor:pointer;}
.mindamatch-module-close:focus-visible{outline:4px solid #fff27a;outline-offset:3px;}
html.mindamatch-open,html.mindamatch-open body{overflow:hidden!important;}
@media(max-width:600px){.mindamatch-module-close{padding:9px 12px;font-size:.78rem}.mindamatch-preview.picture{width:70px;height:70px}.mindamatch-preview.word{min-width:66px;font-size:1.05rem}}
/* Learning Report polish: strictly scoped to the existing MindaMatch report. */
#mindamatch-report.mm-report-panel{margin-top:28px;padding:24px;border:1px solid rgba(255,255,255,.2);border-radius:22px;background:#1c2452;color:#f7f9ff;box-sizing:border-box;min-width:0}
#mindamatch-report .mm-report-title{margin:0 0 8px;font-size:1.3rem;line-height:1.3;color:#fff}
#mindamatch-report .mm-report-note{margin:0 0 20px;color:#cbd5f2;font-size:.9rem;line-height:1.6}
#mindamatch-report .mm-report-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#mindamatch-report .mm-report-metric{padding:18px;border-radius:16px;background:#131a3b;border:1px solid #35426c;min-width:0}
#mindamatch-report .mm-report-label{color:#cbd5f2;font-size:.85rem;line-height:1.5}
#mindamatch-report .mm-report-value{margin-top:8px;font-size:2rem;line-height:1.2;font-weight:800;color:#95efea;font-variant-numeric:tabular-nums}
#mindamatch-report .mm-report-history-title{margin:24px 0 12px;color:#fff;font-size:.95rem;line-height:1.5}
#mindamatch-report .mm-report-history{padding:0;margin:0;list-style:none}
#mindamatch-report .mm-report-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,.45fr) minmax(74px,.45fr);gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid #39436a}
#mindamatch-report .mm-report-row:last-child{border-bottom:0;padding-bottom:0}
#mindamatch-report .mm-report-when{display:flex;flex-direction:column;gap:5px;min-width:0;overflow-wrap:anywhere}
#mindamatch-report .mm-report-when time{font-size:.9rem;font-weight:600;color:#f7f9ff}
#mindamatch-report .mm-report-when span,#mindamatch-report .mm-report-result span{font-size:.8rem;color:#cbd5f2;line-height:1.5}
#mindamatch-report .mm-report-result{display:flex;flex-direction:column;gap:5px;text-align:right;min-width:0}
#mindamatch-report .mm-report-result strong{font-size:1rem;color:#fff;font-variant-numeric:tabular-nums}
#mindamatch-report .mm-report-accuracy strong{color:#95efea}
#mindamatch-report .mm-report-empty{margin:18px 0 0;padding:16px;border:1px dashed #647299;border-radius:14px;line-height:1.6;color:#d9e2f8;font-size:.9rem}
@media(max-width:540px){
 #mindamatch-report.mm-report-panel{padding:16px;border-radius:18px}
 #mindamatch-report .mm-report-metric{padding:14px}
 #mindamatch-report .mm-report-value{font-size:1.65rem}
 #mindamatch-report .mm-report-row{gap:10px;grid-template-columns:minmax(0,1fr) 52px 66px}
}
@media(max-width:360px){
 #mindamatch-report .mm-report-summary{grid-template-columns:1fr}
 #mindamatch-report .mm-report-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 #mindamatch-report .mm-report-when{grid-column:1/-1}
 #mindamatch-report .mm-report-result{text-align:left}
}
/* Central reward artwork: preserve existing cards, grids and icon containers. */
.ms-reward-asset { width:1em; height:1em; object-fit:contain; vertical-align:-.15em; display:inline-block; }
.achv-icon .ms-reward-asset { width:1em; height:1em; }
.reward-v2-badge-icon .ms-reward-asset { width:32px; height:32px; }
.ms-reward-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
/* ============================================================
   REPORT A PROBLEM
   ============================================================ */

.report-problem-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  margin:0 0 16px;
  padding:9px 13px;
  border:1px solid rgba(241,240,250,.12);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:var(--lavender);
  font-size:13px;
  font-weight:700;
  transition:.15s ease;
}

.report-problem-back:hover,
.report-problem-back:focus-visible{
  color:var(--mist);
  border-color:var(--teal);
  background:rgba(45,212,191,.09);
  outline:none;
}

.report-problem-card{
  scrollbar-width:thin;
  scrollbar-color:rgba(153,151,196,.65) transparent;
}

.report-problem-card::-webkit-scrollbar{
  width:8px;
}

.report-problem-card::-webkit-scrollbar-track{
  background:transparent;
}

.report-problem-card::-webkit-scrollbar-thumb{
  background:rgba(153,151,196,.55);
  border-radius:999px;
}

.report-problem-card::-webkit-scrollbar-thumb:hover{
  background:rgba(45,212,191,.75);
}

.report-problem-dialog{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(6,10,28,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.report-problem-card{
  width:min(680px,100%);
  max-height:min(88vh,760px);
  overflow-y:auto;
  padding:26px;
  border:1px solid rgba(241,240,250,.12);
  border-radius:24px;
  background:
    radial-gradient(circle at top right,rgba(124,156,255,.12),transparent 34%),
    var(--void);
  color:var(--mist);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}

.report-problem-card h2{
  margin:0 0 8px;
  font-size:26px;
  line-height:1.2;
}

.report-problem-card>p{
  margin:0 0 20px;
  color:var(--lavender);
  font-size:14px;
  line-height:1.5;
}

.report-problem-categories{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:22px;
}

.report-problem-categories button{
  min-height:48px;
  padding:12px 14px;
  border:1px solid rgba(241,240,250,.12);
  border-radius:14px;
  background:var(--void-2);
  color:var(--mist);
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  text-align:left;
  transition:.15s ease;
}

.report-problem-categories button:hover,
.report-problem-categories button:focus-visible{
  border-color:var(--teal);
  background:rgba(45,212,191,.1);
  outline:none;
}

.report-problem-categories button[aria-pressed="true"],
.report-problem-categories button.active{
  border-color:var(--teal);
  background:rgba(45,212,191,.14);
  box-shadow:0 0 0 2px rgba(45,212,191,.12);
}

.report-problem-fields section{
  display:grid;
  gap:16px;
  margin-bottom:20px;
}

.report-problem-fields label{
  display:grid;
  gap:7px;
  color:var(--mist);
  font-size:13px;
  font-weight:700;
}

.report-problem-fields textarea,
.report-problem-fields select{
  width:100%;
  min-height:46px;
  border:1px solid rgba(241,240,250,.13);
  border-radius:12px;
  background:var(--ink);
  color:var(--mist);
  font-family:var(--font-body);
  font-size:14px;
  outline:none;
}

.report-problem-fields textarea{
  min-height:108px;
  padding:12px 14px;
  resize:vertical;
  line-height:1.5;
}

.report-problem-fields select{
  padding:0 12px;
}

.report-problem-fields textarea:focus,
.report-problem-fields select:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(45,212,191,.12);
}

.report-problem-privacy{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 22px;
  margin:18px 0;
  padding:16px 18px;
  border:1px solid rgba(255,182,39,.2);
  border-radius:16px;
  background:rgba(255,182,39,.07);
  color:var(--mist);
  font-size:12.5px;
  line-height:1.45;
}

.report-problem-privacy strong{
  color:var(--gold);
}

.report-problem-privacy ul{
  margin:4px 0 8px;
  padding-left:18px;
  color:var(--lavender);
}

.report-problem-diagnostics{
  margin:14px 0 18px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}

.report-problem-diagnostics label{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--mist);
  font-size:13px;
  font-weight:600;
}

.report-problem-diagnostics input{
  width:18px;
  height:18px;
  accent-color:var(--teal);
}

.report-problem-preview,
.report-problem-success,
.report-problem-pii-warning{
  margin-top:16px;
  padding:16px;
  border-radius:16px;
}

.report-problem-preview{
  border:1px solid rgba(124,156,255,.22);
  background:rgba(124,156,255,.08);
}

.report-problem-success{
  border:1px solid rgba(45,212,191,.24);
  background:rgba(45,212,191,.09);
}

.report-problem-pii-warning{
  border:1px solid rgba(255,92,122,.28);
  background:rgba(255,92,122,.09);
}

.report-problem-preview h3,
.report-problem-success h3{
  margin:0 0 10px;
  font-size:16px;
}

.report-problem-card button[data-action="preview"],
.report-problem-card button[data-action="send"],
.report-problem-card button[data-action="send-anyway"],
.report-problem-card button[data-action="copy-reference"]{
  min-height:44px;
  padding:11px 18px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,var(--teal),var(--teal-dim));
  color:var(--ink);
  font-weight:800;
  font-size:14px;
}

.report-problem-card button[data-action="close"],
.report-problem-card button[data-action="edit"]{
  min-height:44px;
  padding:11px 18px;
  margin-left:8px;
  border:1px solid rgba(241,240,250,.14);
  border-radius:12px;
  background:transparent;
  color:var(--mist);
  font-weight:700;
  font-size:14px;
}

.report-problem-card button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.report-problem-card button:focus-visible{
  outline:3px solid rgba(45,212,191,.35);
  outline-offset:2px;
}

@media (max-width:640px){
  .report-problem-dialog{
    align-items:flex-end;
    padding:12px;
  }

  .report-problem-card{
    width:100%;
    max-height:92vh;
    padding:20px;
    border-radius:22px 22px 16px 16px;
  }

  .report-problem-categories{
    grid-template-columns:1fr;
  }

  .report-problem-privacy{
    grid-template-columns:1fr;
  }
}

/* RC1.2 launch-blocker: consistent visible exit controls on standalone screens. */
.ms-screen-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0 0 14px;
  padding: 10px 16px;
  border: 1px solid rgba(21, 54, 92, .16);
  border-radius: 14px;
  background: #fff;
  color: #173457;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(34, 72, 112, .10);
}
.ms-screen-back:hover { transform: translateY(-1px); }
.ms-screen-back:focus-visible { outline: 3px solid rgba(43, 124, 255, .35); outline-offset: 2px; }
#screen-numbers-adventure .nr-topbar .ms-screen-back {
  width: auto;
  min-width: 64px;
  padding-inline: 13px;
  margin: 0;
  color: #fff;
  background: rgba(7,21,46,.44);
  border-color: rgba(255,255,255,.38);
  font-size: 14px;
}