/* WisdomHoot — kid-friendly, responsive, offline. */

:root {
  --bg: #f3f6ff;
  --bg2: #e8efff;
  --card: #ffffff;
  --ink: #21324d;
  --muted: #5e6d86; /* darkened to meet WCAG AA (≈4.8:1 on white) for secondary text */
  --primary: #4d69f3;
  --primary-dark: #3a53d0;
  --accent-text: var(--primary-dark); /* accent used AS text; applySeasonalTheme lightens it in dark mode */
  --good: #2f9e44;
  --good-bg: #e7f7ec;
  --bad: #e8590c;
  --bad-bg: #fff2e8;
  --ring: #dbe4ff;
  --shadow: 0 10px 30px rgba(40, 70, 140, 0.12);
  --radius: 18px;
  /* Fluid base size: text & spacing scale smoothly from small phones to large
     tablets/desktops, clamped so it never gets too tiny or too huge. */
  font-size: clamp(15px, 1.15vw + 0.55rem, 21px);
}

* { box-sizing: border-box; }

/* Visible keyboard focus ring (only for keyboard users, not mouse/touch). */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
/* Headings receive focus on screen change (keyboard / screen-reader landing) — no ring on mouse. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, .play-title[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Accessibility preferences (Settings ▸ Accessibility; mirrored on <html data-*>) ---- */
/* OpenDyslexic (SIL OFL 1.1, vendored in assets/fonts/opendyslexic) — only requested when the
   "Dyslexia-friendly font" toggle is on; the @font-face is defined once, lazily fetched by the
   browser when first used. */
@font-face { font-family: "OpenDyslexic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/opendyslexic/opendyslexic-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "OpenDyslexic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/opendyslexic/opendyslexic-latin-700-normal.woff2") format("woff2"); }
html[data-font="dyslexic"] body, html[data-font="dyslexic"] button, html[data-font="dyslexic"] input, html[data-font="dyslexic"] select, html[data-font="dyslexic"] textarea { font-family: "OpenDyslexic", "Comic Sans MS", "Segoe UI", system-ui, sans-serif; }
html[data-font="dyslexic"] body { line-height: 1.55; }
html[data-text="large"] { font-size: 112.5%; }
html[data-text="xl"] { font-size: 125%; }
html[data-easyread="1"] body { letter-spacing: .03em; word-spacing: .12em; line-height: 1.6; }
html[data-easyread="1"] .prompt, html[data-easyread="1"] .choice-btn, html[data-easyread="1"] .steps { line-height: 1.7; }
html[data-calm="1"] .home-streak, html[data-calm="1"] .profile-risk, html[data-calm="1"] .spin-hint { display: none; }
html[data-calm="1"] *, html[data-calm="1"] *::before, html[data-calm="1"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
/* High contrast: solid surfaces, strong borders, 7:1 text — light and dark. */
html[data-contrast="1"] { --ink: #000000; --muted: #2b2b2b; --card: #ffffff; --bg: #ffffff; --bg2: #f1f1f1; --ring: #000000; --good: #0a6b1e; --bad: #b02a00; --good-bg: #e6f4ea; --bad-bg: #fde7df; }
html[data-dark="1"][data-contrast="1"] { --ink: #ffffff; --muted: #e6e6e6; --card: #000000; --bg: #000000; --bg2: #111111; --ring: #ffffff; --good: #7ee08a; --bad: #ff9b6b; --good-bg: #0b2a12; --bad-bg: #3a1a0a; }
html[data-contrast="1"] body.has-3d .card, html[data-contrast="1"] body.has-3d .top-bar, html[data-contrast="1"] body.has-3d .play-bar,
html[data-contrast="1"] body.has-3d .create-form, html[data-contrast="1"] body.has-3d .badges-panel, html[data-contrast="1"] body.has-3d .profile-card,
html[data-contrast="1"] body.has-3d .subject-card, html[data-contrast="1"] body.has-3d .grade-btn, html[data-contrast="1"] body.has-3d .choice-btn,
html[data-contrast="1"] .chip, html[data-contrast="1"] .modal-card, html[data-contrast="1"] .goal-card, html[data-contrast="1"] .season-chip, html[data-contrast="1"] .weekly-card, html[data-contrast="1"] .progress-panel { background: var(--card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--ink); }
html[data-contrast="1"] .btn, html[data-contrast="1"] .choice-btn, html[data-contrast="1"] .grade-btn, html[data-contrast="1"] .subject-card, html[data-contrast="1"] .profile-card,
html[data-contrast="1"] .settings-row, html[data-contrast="1"] .chip, html[data-contrast="1"] .card, html[data-contrast="1"] select, html[data-contrast="1"] .name-input, html[data-contrast="1"] .answer-input { border: 3px solid var(--ink) !important; }
html[data-contrast="1"] .btn-primary { background: var(--ink); color: var(--card); }
html[data-contrast="1"] .play-stats span, html[data-contrast="1"] .summary-chip { background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
html[data-contrast="1"] :focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-transparency: reduce) {
  body.has-3d .card, body.has-3d .top-bar, body.has-3d .play-bar, body.has-3d .create-form, body.has-3d .badges-panel,
  body.has-3d .profile-card, body.has-3d .subject-card, body.has-3d .grade-btn, body.has-3d .choice-btn { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Answer state is never colour-only: a check / cross accompanies the colour. */
.choice-btn { position: relative; }
.choice-btn.correct::before { content: "✓ "; font-weight: 900; }
.choice-btn.wrong::before { content: "✗ "; font-weight: 900; }
/* Number badges for keyboard answering — shown once a key has been used. */
.key-hint { display: none; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); min-width: 20px; height: 20px; border-radius: 6px; font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center; background: var(--bg2); color: var(--muted); border: 1px solid var(--ring); }
html[data-kbd="1"] .key-hint { display: inline-block; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Baloo 2", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 500px at 50% -10%, var(--bg2), var(--bg)) fixed;
  min-height: 100vh;
  min-height: 100svh; /* stable on mobile where the URL bar shows/hides */
  -webkit-tap-highlight-color: transparent;
}

#app {
  max-width: min(1040px, 100%);
  margin: 0 auto;
  /* Respect notches / rounded corners / home indicators on iPhone & iPad. */
  padding:
    max(18px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(60px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.screen { animation: fadein 0.35s ease; }
.center { text-align: center; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

h1 { font-size: 2.2rem; margin: 6px 0; }
h2.section-title { font-size: 1.5rem; margin: 22px 0 14px; }
.tagline { color: var(--muted); font-size: 1.05rem; margin: 4px 0 8px; }
.muted { color: var(--muted); }
.install-btn { margin: 4px auto 8px; display: inline-block; }
.noscript-msg { max-width: 600px; margin: 60px auto; text-align: center; }
.footer-note { color: var(--muted); font-size: .82rem; margin-top: 22px; }
.footer-note a { color: var(--accent-text); }

/* ---------- Hero ---------- */
.hero { padding: 10px 0 6px; }
.hero-emoji { font-size: 3.4rem; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.1rem); letter-spacing: -.02em; margin: 4px 0 6px; }
.hero-tagline {
  display: inline-block; color: var(--ink); font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 800; margin: 0 0 8px;
  padding: 4px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.72);
}
.hero-sub { color: var(--muted); font-size: .98rem; margin: 0 auto 10px; max-width: 680px; }
.hero-pills { list-style: none; margin: 0 auto 4px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; }
.hero-pills li {
  color: var(--ink); border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 999px;
  padding: 5px 12px; font-size: .88rem; font-weight: 700; white-space: nowrap; box-shadow: 0 3px 10px rgba(40, 30, 10, 0.08);
}
.hero-pills li:nth-child(1) { background: #ffe4e4; }
.hero-pills li:nth-child(2) { background: #e3f1ff; }
.hero-pills li:nth-child(3) { background: #e4f9e4; }
.hero-pills li:nth-child(4) { background: #fff1cc; }
.hero-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 780px; margin: 14px auto 4px; }
.hero-feature {
  position: relative; background: var(--card); border: 2px solid var(--ring); border-top-width: 6px; border-radius: var(--radius); padding: 14px 12px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0;
  transition: transform .15s;
}
.hero-feature:nth-child(1) { border-top-color: #ff7a59; }
.hero-feature:nth-child(2) { border-top-color: #f5b400; }
.hero-feature:nth-child(3) { border-top-color: #3b9cff; }
.hero-feature:hover { transform: translateY(-3px); }
.hero-feature-emoji { font-size: 1.9rem; line-height: 1; width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.hero-feature:nth-child(1) .hero-feature-emoji { background: #ffe4dc; }
.hero-feature:nth-child(2) .hero-feature-emoji { background: #fff1c2; }
.hero-feature:nth-child(3) .hero-feature-emoji { background: #dcecff; }
@keyframes logo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cta-glow { 0%, 100% { box-shadow: 0 6px 0 var(--primary-dark), 0 0 0 0 rgba(255, 140, 60, 0.0); } 50% { box-shadow: 0 6px 0 var(--primary-dark), 0 0 0 12px rgba(255, 140, 60, 0.18); } }
.app-logo { animation: logo-bob 3.2s ease-in-out infinite; }
.profile-card.add.primary { animation: cta-glow 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .app-logo, .profile-card.add.primary { animation: none !important; } }
html[data-calm="1"] .app-logo, html[data-calm="1"] .profile-card.add.primary { animation: none !important; }
.hero-feature b { font-size: 1rem; }
.hero-feature span:last-child { color: var(--muted); font-size: .88rem; line-height: 1.35; }
.profile-card.add.primary {
  border-style: solid; border-color: var(--primary); background: var(--primary); color: #fff;
  box-shadow: 0 6px 0 var(--primary-dark); grid-column: 1 / -1; max-width: 300px; margin: 0 auto; width: 100%;
}
.profile-card.add.primary .profile-stars { color: rgba(255, 255, 255, 0.9); }
.profile-card.add.primary:hover { border-color: var(--primary-dark); }
@media (max-width: 640px) {
  .hero-features { grid-template-columns: 1fr; gap: 8px; }
  .hero-feature { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; text-align: left; align-items: center; border-top-width: 2px; border-left-width: 6px; padding: 10px 12px; }
  .hero-feature:nth-child(1) { border-left-color: #ff7a59; } .hero-feature:nth-child(2) { border-left-color: #f5b400; } .hero-feature:nth-child(3) { border-left-color: #3b9cff; }
  .hero-feature-emoji { grid-row: 1 / 3; width: 44px; height: 44px; font-size: 1.4rem; margin: 0; }
  .hero-feature b, .hero-feature span:last-child { display: block; }
}

/* ---------- Buttons ---------- */
.btn {
  border: none; border-radius: 14px; padding: 12px 20px; font: inherit;
  font-weight: 700; cursor: pointer; transition: transform .08s, box-shadow .15s, background .15s;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.btn:active { transform: translateY(2px) scale(.99); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 0 var(--primary-dark); }
.btn-primary:active { box-shadow: 0 2px 0 var(--primary-dark); }
.btn-ghost { background: #fff; color: var(--ink); border: 2px solid var(--ring); }
.btn-next { background: var(--good); color: #fff; box-shadow: 0 6px 0 #1f7a32; margin-top: 14px; }
.btn-next:active { box-shadow: 0 2px 0 #1f7a32; }
.row-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* ---------- Cards ---------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }

/* ---------- Profiles ---------- */
.profile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px; margin: 10px auto; max-width: 700px;
}
.profile-card {
  position: relative; min-width: 0; background: var(--card); border: 3px solid var(--ring); border-radius: var(--radius);
  padding: 20px 10px; cursor: pointer; transition: transform .1s, border-color .15s; font: inherit; color: inherit;
}
.profile-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.profile-card.add { border-style: dashed; color: var(--muted); }
.profile-avatar { font-size: 3rem; }
.profile-name { font-weight: 700; margin-top: 6px; overflow-wrap: break-word; }
.profile-stars { color: var(--muted); font-size: .95rem; }
/* Corner action icons — 40px hit areas for little fingers (WCAG touch target),
   the glyph centered inside each. */
.profile-del, .profile-edit, .profile-log {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; line-height: 1; color: var(--muted); cursor: pointer;
  transition: color .15s; -webkit-tap-highlight-color: transparent;
}
.profile-del { top: 2px; right: 2px; font-size: 1.5rem; }
.profile-del:hover { color: var(--bad); }
.profile-edit { top: 2px; left: 2px; font-size: 1.2rem; }
.profile-edit:hover { color: var(--accent-text); }
.profile-log { bottom: 2px; right: 2px; font-size: 1.2rem; }
.profile-log:hover { color: var(--accent-text); }
.profile-tools {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px;
}
.tool-btn { font-size: .9rem; padding: 8px 14px; }

/* ---------- Settings (gear + sheet) ---------- */
/* The settings gear sits in the top-right corner of the *screen* on every device — pinned to
   the viewport, offset by the same safe-area insets #app uses, so it clears notches and the
   status bar on phones and hugs the edge on wide laptops instead of the centred content column. */
.screen-topbar {
  position: fixed; z-index: 30;
  top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  display: flex; justify-content: flex-end; align-items: center; pointer-events: auto;
}
.settings-gear {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; background: #fff; color: var(--ink);
  border: 2px solid var(--ring); cursor: pointer; box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s;
}
.settings-gear:hover { transform: rotate(35deg); border-color: var(--primary); }
.settings-gear:active { transform: rotate(35deg) scale(.95); }
.settings-section-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 8px;
}
.settings-section-title:first-child { margin-top: 2px; }
.settings-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; background: var(--bg); border: 2px solid var(--ring);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer; font: inherit; color: inherit; text-decoration: none;
  transition: border-color .15s, background .15s, transform .08s;
}
.settings-row:hover { border-color: var(--primary); background: #fff; }
.settings-row:active { transform: scale(.99); }
.settings-row-icon { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.settings-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-row-label { font-weight: 700; color: var(--ink); }
.settings-row-desc { font-size: .82rem; color: var(--muted); line-height: 1.3; }
.settings-switch {
  margin-left: auto; flex: 0 0 auto; width: 48px; height: 28px; border-radius: 999px;
  background: var(--ring); position: relative; transition: background .15s;
}
.settings-switch.on { background: var(--good); }
.settings-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s;
}
.settings-switch.on .settings-switch-knob { transform: translateX(20px); }
.app-logo { display: block; margin: 4px auto 6px; border-radius: 22%; box-shadow: 0 8px 22px rgba(40, 70, 140, 0.18); }
.about-logo { vertical-align: middle; border-radius: 22%; margin-right: 4px; }
.settings-version { text-align: center; color: var(--muted); font-size: .8rem; margin: 14px 0 2px; }

/* ---------- Progress panel (parent view) ---------- */
.home-streak { color: var(--bad); font-weight: 700; margin: 2px 0 8px; }
.continue-btn { display: flex; margin: 2px auto 8px; font-size: 1.05rem; padding: 14px 24px; }
.weak-btn { display: flex; margin: 0 auto 16px; font-size: .95rem; padding: 12px 18px; border-color: var(--bad); color: var(--bad); flex-wrap: wrap; justify-content: center; }
.weak-btn:hover { background: var(--bad-bg); }
.focus-chip { background: var(--bad-bg); color: var(--bad); }
.replay-btn { display: flex; margin: 0 auto 16px; font-size: .95rem; padding: 12px 18px; border-color: var(--primary); color: var(--accent-text); flex-wrap: wrap; justify-content: center; }
.replay-btn:hover { background: #eaf0ff; }
.replay-chip { background: #eaf0ff; color: var(--accent-text); }
/* Dark mode (Settings "Dark mode", or the device setting while on auto). applySeasonalTheme
   sets <html data-dark="1">; the seasonal accent (--primary) still applies on top. Ink/card
   pairs keep ≥ 7:1 so questions stay as readable as the light look. */
html[data-dark="1"] {
  --bg: #0f1526; --bg2: #182038; --card: #1b2238; --ink: #eef2ff; --muted: #b3bdd6;
  --ring: #34406a; --shadow: 0 10px 30px rgba(0, 0, 0, .5); --good-bg: #16331f; --bad-bg: #3a2416;
}
html[data-dark="1"] .btn-ghost, html[data-dark="1"] .word-chip, html[data-dark="1"] .avatar-opt.selected,
html[data-dark="1"] .settings-row:hover, html[data-dark="1"] .profile-card, html[data-dark="1"] .tb-stat { background: var(--card); color: var(--ink); }
html[data-dark="1"] .replay-btn:hover, html[data-dark="1"] .replay-chip, html[data-dark="1"] .adapt-chip.replay, html[data-dark="1"] .chip,
html[data-dark="1"] .word-chip.placed, html[data-dark="1"] .speak-btn:hover, html[data-dark="1"] .steps .formula { background: #26305a; color: #dfe6ff; }
html[data-dark="1"] .steps .formula.rule { color: #ffb380; background: #3a2416; }
html[data-dark="1"] .settings-switch-knob { background: #eef2ff; }
html[data-dark="1"] .speak-btn, html[data-dark="1"] .name-input, html[data-dark="1"] .answer-input { background: var(--bg2); color: var(--ink); }
html[data-dark="1"] /* Printables: on-screen preview overlay; in print, the only thing on the page. Always light. */
.print-view { position: fixed; inset: 0; z-index: 3000; overflow: auto; background: #fff; color: #111; padding: 16px 20px 40px; font-size: 16px; }
.print-tools { position: sticky; top: 0; display: flex; gap: 10px; justify-content: flex-end; background: #fff; padding: 6px 0 10px; z-index: 1; }
.ws { max-width: 760px; margin: 0 auto; }
.ws-head { border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 12px; }
.ws-title { font-size: 1.4rem; font-weight: 800; }
.ws-meta { margin-top: 6px; }
.ws-list { padding-left: 22px; }
.ws-q { margin: 0 0 16px; break-inside: avoid; page-break-inside: avoid; }
.ws-prompt .big-emoji { font-size: 1.6rem; }
.ws-prompt .equation { margin: 4px 0; }
.ws-choices { list-style: none; padding-left: 14px; margin: 6px 0 0; }
.ws-choices li::before { content: "○  "; }
.ws-choices.order li::before { content: "☐  "; }
.ws-blank { border-bottom: 2px solid #333; height: 1.8em; width: 60%; margin-top: 6px; }
.ws-key { break-before: page; page-break-before: always; margin-top: 28px; border-top: 2px dashed #999; padding-top: 12px; }
.ws-key ol { columns: 2; padding-left: 22px; }
.cert { text-align: center; border: 10px double #c9a227; padding: 40px 28px; max-width: 760px; margin: 24px auto; background: #fffdf5; }
.cert-kicker { letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: #8a6d1d; margin-top: 10px; }
.cert-name { font-size: 2.4rem; font-weight: 800; margin: 14px 0 4px; }
.cert-for { color: #555; }
.cert-badge { font-size: 1.6rem; font-weight: 800; margin: 10px 0 4px; }
.cert-desc { color: #444; }
.cert-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; font-size: .9rem; color: #555; }
.cert-sign { border-top: 1px solid #999; padding-top: 4px; }
.cert-btn { display: block; margin: 8px auto 14px; }
@media print {
  body > *:not(.print-view) { display: none !important; }
  .print-view { position: static; overflow: visible; padding: 0; }
  .no-print { display: none !important; }
  /* Reading selections scroll on screen; on paper they must print in full. */
  .passage { max-height: none !important; overflow: visible !important; }
}
.weekly-card { margin: 12px 0 14px; padding: 16px 18px; }
.weekly-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.weekly-days { color: var(--muted); font-weight: 700; font-size: .85rem; }
.weekly-main { font-size: 1.05rem; margin: 6px 0 8px; }
.weekly-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; font-size: .9rem; }
.weekly-label { font-weight: 800; color: var(--muted); margin-right: 2px; }
.weekly-chip { background: var(--bg2); border-radius: 999px; padding: 3px 10px; font-weight: 700; }
.weekly-chip.good { background: var(--good-bg); color: var(--good); }
.weekly-chip.warn { background: var(--bad-bg); color: var(--bad); }
.trend { font-size: .85rem; font-weight: 700; color: var(--muted); }
.trend.up { color: var(--good); }
.trend.down { color: var(--bad); }
.goal-card { display: flex; align-items: center; gap: 12px; margin: 0 auto 14px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 2px solid var(--ring); box-shadow: var(--shadow); width: fit-content; max-width: 100%; }
.goal-ring { flex: none; transform: rotate(-90deg); }
.goal-track { fill: none; stroke: var(--ring); stroke-width: 6; }
.goal-fill { fill: none; stroke: var(--good); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.goal-title { font-weight: 800; font-size: .95rem; }
.goal-sub { color: var(--muted); font-size: .85rem; }
.home-streak.at-risk { color: var(--bad); }
.profile-risk { color: var(--bad); font-size: .78rem; font-weight: 700; margin-top: 4px; }
.summary-chip.goal-hit { background: var(--good-bg); color: var(--good); }
.settings-value { font-weight: 800; color: var(--accent-text); }
.season-chip { background: var(--card); color: #dfe6ff; }
html[data-dark="1"] body { background: radial-gradient(1200px 500px at 50% -10%, var(--bg2), var(--bg)) fixed; }

/* Dark seasonal skies (Halloween): text drawn straight on the sky goes light + shadowed. */
html[data-theme-dark="1"] .section-title, html[data-theme-dark="1"] h1, html[data-theme-dark="1"] .home-streak,
html[data-theme-dark="1"] .footer-note, html[data-theme-dark="1"] .spin-hint, html[data-theme-dark="1"] .grade-note { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
/* Seasonal greeting on Home (applySeasonalTheme sets the accent tokens on <html>). */
.season-chip { display: inline-block; margin: -6px auto 14px; padding: 6px 14px; border-radius: 999px; background: var(--card); border: 2px solid var(--ring); color: var(--accent-text); font-weight: 700; box-shadow: var(--shadow); }
.adapt-chip { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 12px; font-size: .78rem; font-weight: 800; vertical-align: middle; }
.adapt-chip.challenge { background: #fff4d6; color: #8a5a00; }
.adapt-chip.warmup { background: var(--good-bg); color: var(--good); }
.adapt-chip.replay { background: #eaf0ff; color: var(--accent-text); }
.loading-card { text-align: center; font-weight: 700; color: var(--muted); padding: 28px; }
.onboard-list { margin: 6px 0 0; padding-left: 2px; list-style: none; }
.onboard-list li { margin: 8px 0; line-height: 1.4; }
.progress-panel { max-width: 640px; margin: 12px auto; text-align: left; }
.progress-title { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 6px 0 8px; }
.prog-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.prog-label { flex: 0 0 40%; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog-bar { flex: 1; height: 12px; background: var(--ring); border-radius: 999px; overflow: hidden; }
.prog-fill { display: block; height: 100%; border-radius: 999px; }
.prog-fill.good { background: var(--good); }
.prog-fill.mid { background: #f0a020; }
.prog-fill.low { background: var(--bad); }
.prog-pct { flex: 0 0 3.2em; text-align: right; font-weight: 700; color: var(--muted); }
.progress-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.prog-chip { background: var(--bad-bg); color: var(--bad); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: .9rem; }

/* ---------- Round progress ---------- */
.round-progress { max-width: 520px; margin: 6px auto 2px; }
.play-bar .round-progress { flex-basis: 100%; order: 9; width: 100%; max-width: none; margin: 2px 0 0; }
.play-bar .round-progress-label { margin-top: 3px; }
.round-progress-track { height: 10px; background: var(--ring); border-radius: 999px; overflow: hidden; }
.round-progress-fill { height: 100%; width: 0; background: var(--primary); border-radius: 999px; transition: width .35s ease; }
.round-progress-label { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 5px; font-weight: 700; }

/* ---------- Round summary ---------- */
.summary-card { max-width: 460px; margin: 10px auto; text-align: center; }
.summary-emoji { font-size: 4rem; line-height: 1; }
.summary-title { margin: 6px 0 2px; }
.summary-sub { color: var(--muted); margin: 0 0 12px; }
.summary-score { font-size: 3.4rem; font-weight: 800; color: var(--accent-text); line-height: 1; }
.summary-score span { font-size: 1.6rem; color: var(--muted); font-weight: 700; }
.summary-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.summary-chip { background: var(--bg); border: 2px solid var(--ring); border-radius: 999px; padding: 6px 14px; font-weight: 700; color: var(--ink); }

/* ---------- Create form ---------- */
.create-form { max-width: 460px; margin: 0 auto; text-align: left; }
.field-label { display: block; font-weight: 700; margin: 12px 0 6px; }
.name-input, .answer-input {
  width: 100%; padding: 14px; font: inherit; border: 2px solid var(--ring); border-radius: 12px; background: #fbfcff;
}
.name-input:focus, .answer-input:focus { outline: none; border-color: var(--primary); }
.field-error { display: none; color: var(--bad); font-weight: 700; font-size: .85rem; margin: 6px 0 0; }
.field-error.show { display: block; animation: fadein .2s ease; }
.avatar-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.avatar-opt {
  font-size: 1.7rem; padding: 6px 0; border: 2px solid transparent; border-radius: 12px; background: var(--bg2); cursor: pointer;
  min-width: 0; overflow: hidden; line-height: 1.2;
}
.avatar-opt.selected { border-color: var(--primary); background: #fff; }
@media (max-width: 480px) { .avatar-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Curriculum (school system) picker — on the create form and in Settings. */
.curriculum-select {
  width: 100%; padding: 12px 14px; font: inherit; font-weight: 700; color: var(--ink); border: 2px solid var(--ring);
  border-radius: 12px; background: #fbfcff; cursor: pointer;
}
.curriculum-select:focus { outline: none; border-color: var(--primary); }
.curriculum-note { font-size: .85rem; color: var(--muted); line-height: 1.4; margin: 8px 0 0; }
.curriculum-picker { display: flex; flex-direction: column; gap: 6px; width: 100%; }
/* Sub-topic row (Grades 7–10) under the topic chips; grades without that sub-topic dim. */
.grade-btn.dim { opacity: .4; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; font-weight: 700; color: var(--accent-text); text-decoration: underline; cursor: pointer; align-self: flex-start; }
.link-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.settings-curriculum { flex-wrap: wrap; cursor: default; }
.settings-curriculum .curriculum-picker { flex: 1 1 100%; margin-top: 4px; }
html[data-dark="1"] .curriculum-select { background: var(--bg2); color: var(--ink); }

/* ---------- Top bar ---------- */
.top-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border-radius: 14px; padding: 10px 16px; box-shadow: var(--shadow); flex-wrap: wrap;
}
.tb-left { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tb-avatar { font-size: 1.6rem; }
.tb-edit { color: #c1ccdf; font-size: 1.05rem; cursor: pointer; padding: 4px; line-height: 1; }
.tb-edit:hover { color: var(--accent-text); }
.tb-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tb-stat { background: var(--bg2); padding: 6px 12px; border-radius: 20px; font-weight: 700; }
.tb-switch { padding: 8px 14px; }
.tb-gear { width: 44px; height: 44px; font-size: 1.3rem; }
.voice-toggle { padding: 8px 14px; font-weight: 700; }

/* ---------- Read-aloud ---------- */
.speak-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 10px;
  font: inherit; font-weight: 700; font-size: .95rem; color: var(--accent-text);
  background: var(--bg2); border: 2px solid var(--ring); border-radius: 22px;
  padding: 8px 16px; cursor: pointer; transition: background .15s, border-color .15s;
}
.speak-btn:hover { background: #eef2ff; border-color: var(--primary); }

/* ---------- Subjects ---------- */
.subject-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 6px; }
.subject-card {
  --accent: var(--primary);
  min-width: 0; /* let this grid item shrink below its text's intrinsic width on narrow phones */
  background: var(--card); border: 3px solid var(--ring); border-radius: var(--radius); padding: 22px 10px;
  cursor: pointer; transition: transform .1s, border-color .15s; font: inherit; color: inherit;
}
.subject-card:hover { transform: translateY(-4px); }
.subject-card.active { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79, 109, 245, 0.2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.subject-emoji { font-size: 2.8rem; }
.subject-label { font-weight: 800; margin-top: 6px; overflow-wrap: normal; hyphens: manual; font-size: clamp(.8rem, 3.8vw, 1rem); }
@media (max-width: 520px) { .subject-emoji { font-size: 2.1rem; } .subject-card { padding: 16px 6px; } .subject-row { gap: 10px; } }

/* ---------- Grades ---------- */
.grade-section { margin: 18px 0; }
.grade-title { margin: 10px 0; }
.grade-note { font-size: .85rem; color: var(--ink); opacity: .85; line-height: 1.4; margin: -4px 0 10px; }
/* The hidden attribute must win over any author display: value (e.g. .topic-pick { display: flex }). */
[hidden] { display: none !important; }
/* OSSLT Prep: a full-width fourth tile (Ontario · Grade 10) and the reading-selection box. */
.subject-card.prep { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 12px 16px; }
.subject-card.prep .subject-emoji { font-size: 1.8rem; }
.subject-card.prep .subject-label { text-align: left; }
.subject-caption { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.passage { text-align: left; background: var(--bg2); border: 1px solid var(--ring); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; max-height: 46vh; overflow: auto; font-size: .95rem; line-height: 1.55; }
.passage-kind { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 2px; }
.passage-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; }
.passage .para { margin: 0 0 8px; }
.passage .para.line { margin: 0 0 5px; }
.passage .para.headline { font-weight: 800; font-size: 1.05rem; }
.passage .para.byline { font-style: italic; color: var(--muted); font-size: .88rem; }
.passage .para:last-child { margin-bottom: 0; }
html[data-dark="1"] .passage { background: var(--card); }
/* Topic + sub-topic dropdowns above the grade grid (compact on phones). */
.topic-pickers { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 4px 0 12px; }
.topic-pick { display: flex; flex-direction: column; gap: 4px; flex: 1 1 240px; min-width: 0; }
.topic-title { font-weight: 800; }
.topic-title small { font-weight: 600; color: var(--muted); }
.topic-select, .subtopic-select {
  width: 100%; padding: 10px 12px; font: inherit; font-weight: 700; color: var(--ink); border: 2px solid var(--ring);
  border-radius: 12px; background: #fbfcff; cursor: pointer;
}
.topic-select:focus, .subtopic-select:focus { outline: none; border-color: var(--primary); }
html[data-dark="1"] .topic-select, html[data-dark="1"] .subtopic-select { background: var(--bg2); color: var(--ink); }
.grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.grade-btn {
  min-width: 0; background: var(--card); border: 2px solid var(--ring); border-radius: 14px; padding: 12px 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; color: inherit; transition: transform .08s, border-color .15s;
}
.grade-btn:hover { transform: translateY(-3px); border-color: var(--primary); }
.g-short { font-size: 1.4rem; font-weight: 800; }
.g-age { font-size: .72rem; color: var(--muted); }

/* ---------- Badges panel ---------- */
.badges-panel { margin-top: 22px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  display: flex; align-items: center; gap: 8px; background: var(--bg2); padding: 8px 14px; border-radius: 20px; font-weight: 700;
}
.badge-emoji { font-size: 1.3rem; }
.mini-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-weight: 700; }
.view-badges-btn { display: block; margin: 14px 0 4px; }
.badge-more { color: var(--muted); }
.badges-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- Achievements screen ---------- */
.badge-cat { margin-top: 14px; padding: 16px 18px; }
.badge-cat-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.badge-cat-count { color: var(--muted); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.badge-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 14px 10px; border-radius: 14px; border: 2px solid var(--ring); background: var(--bg2);
}
.badge-card.earned { border-color: var(--good); background: var(--good-bg); }
.badge-card.locked { opacity: 0.92; }
.badge-card-emoji { font-size: 1.8rem; line-height: 1; }
.badge-card.locked .badge-card-emoji { filter: grayscale(1); opacity: 0.75; }
.badge-card-label { font-weight: 800; font-size: .9rem; }
.badge-card-desc { font-size: .74rem; color: var(--muted); line-height: 1.25; }
.badge-prog { width: 100%; height: 8px; background: var(--ring); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.badge-prog-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.badge-prog-text { font-size: .72rem; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.badge-prog-text.earned-text { color: var(--good); }

/* ---------- Activity log ---------- */
.log-summary { margin: 14px 0 4px; }
.log-days { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.log-day { padding: 16px 18px; }
.log-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.log-day-title { margin: 0; font-size: 1.05rem; }
.log-day-stats { color: var(--muted); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.log-entries { display: flex; flex-direction: column; gap: 6px; }
.log-entry { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--bg2); }
.log-entry.correct { background: var(--good-bg); }
.log-entry.wrong { background: var(--bad-bg); }
.log-time { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.log-subject { font-size: 1.2rem; flex: none; }
.log-detail { display: flex; flex-direction: column; min-width: 0; flex: 1 1 140px; }
.log-skill { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-meta { color: var(--muted); font-size: .78rem; }
.log-result { font-weight: 800; white-space: nowrap; flex: none; margin-left: auto; }
.log-more { display: block; margin: 16px auto 0; }

/* Reviewable (wrong) entries: tappable to reveal the mistake breakdown. */
.log-entry.reviewable { cursor: pointer; }
.log-entry.reviewable:hover { filter: brightness(0.98); }
.log-review-hint { color: var(--bad); font-weight: 700; }
.log-chevron { display: inline-block; margin-left: 4px; color: var(--muted); font-size: .8rem; transition: transform .15s ease; }
.log-entry.open .log-chevron { transform: rotate(180deg); }
.log-review {
  margin: -2px 2px 6px; padding: 12px 14px; border-radius: 10px;
  background: var(--card); color: var(--ink); border: 2px solid var(--ring);
  display: flex; flex-direction: column; gap: 8px;
}
.review-line { display: flex; flex-direction: column; gap: 2px; }
.review-lbl { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.review-val { font-weight: 600; overflow-wrap: break-word; }
.rev-wrong { color: var(--bad); }
.rev-right { color: var(--good); }

/* Floating back-to-top button on the Progress screen. */
.scroll-top-btn {
  position: fixed; z-index: 20;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--ring); background: var(--card); color: var(--accent-text);
  font-size: 1.4rem; font-weight: 800; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 18px rgba(40, 70, 140, 0.22);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { border-color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .scroll-top-btn { transition: none; } }

/* ---------- Play ---------- */
.play-bar {
  display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px;
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 14px; padding: 8px 10px; margin-left: -10px; margin-right: -10px; width: calc(100% + 20px);
  box-shadow: 0 6px 16px rgba(40, 70, 140, 0.08);
}
.play-title { font-weight: 800; font-size: 1.15rem; min-width: 0; flex: 1 1 auto; }
@media (max-width: 560px) { .play-title { font-size: 1rem; flex-basis: 100%; order: 3; } }
.play-stats { display: flex; gap: 8px; }
.play-stats span { background: var(--card); padding: 6px 12px; border-radius: 20px; font-weight: 700; box-shadow: var(--shadow); }
.strand-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { background: #eaf0ff; color: var(--accent-text); padding: 4px 12px; border-radius: 16px; font-size: .82rem; font-weight: 700; }

.board { position: relative; }
/* On wide screens (tablets in landscape, desktop) keep the question column at a
   comfortable reading width and centered, rather than stretching the full app
   width — the 3D world still fills the background behind it. */
.play-screen .play-bar,
.play-screen .strand-chips,
.play-screen .board { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.problem-card { position: relative; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.skill-tag { color: var(--muted); font-weight: 700; font-size: .85rem; }
.skill-tag .strand { color: var(--accent-text); }
.qtimer {
  flex: none; font-weight: 800; font-size: .95rem; padding: 4px 12px; border-radius: 20px;
  background: var(--bg2); color: var(--accent-text); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qtimer.warn { background: #fff3bf; color: #b8860b; }
.qtimer.danger { background: #ffe3e3; color: #e03131; animation: timerpulse 1s ease-in-out infinite; }
.qtimer.done { opacity: .6; }
@keyframes timerpulse { 50% { opacity: .5; } }
.prompt { font-size: 1.3rem; line-height: 1.5; margin-bottom: 8px; }
.prompt .equation { font-size: 2rem; font-weight: 800; margin: 14px 0; letter-spacing: 1px; }
.big-emoji { font-size: 2.6rem; line-height: 1.4; margin: 12px 0; word-break: break-word; }
.word-label { font-size: 1.6rem; font-weight: 800; letter-spacing: 3px; margin-top: 6px; text-transform: lowercase; }
.seq { font-size: 1.8rem; font-weight: 800; margin: 12px 0; }
.compare-row { display: flex; gap: 24px; justify-content: center; margin: 12px 0; font-size: 1.6rem; text-align: center; }
.passage { background: var(--bg2); border-radius: 12px; padding: 14px 16px; font-size: 1.05rem; line-height: 1.6; margin-bottom: 12px; text-align: left; }
.question, .sentence { font-weight: 700; margin: 8px 0; }
.sentence { font-style: italic; }

/* choices */
.answer-area { margin-top: 10px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.choice-btn {
  background: #fbfcff; border: 2px solid var(--ring); border-radius: 14px; padding: 16px; font: inherit; font-weight: 700;
  cursor: pointer; transition: transform .08s, border-color .15s, background .15s; min-height: 58px;
}
.choice-btn:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-2px); }
.choice-btn:disabled { cursor: default; }
.choice-btn.correct { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.choice-btn.wrong { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
@media (max-width: 480px) { .choice-grid { grid-template-columns: 1fr; } }

/* input */
.input-wrap { display: flex; gap: 10px; }
.input-wrap .answer-input { flex: 1; font-size: 1.2rem; }
.answer-input.correct { border-color: var(--good); background: var(--good-bg); }
.answer-input.wrong { border-color: var(--bad); background: var(--bad-bg); }

/* order game */
.order-target {
  min-height: 60px; border: 2px dashed var(--ring); border-radius: 12px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px;
}
.order-target.correct { border-color: var(--good); background: var(--good-bg); }
.order-target.wrong { border-color: var(--bad); background: var(--bad-bg); }
.order-target .placeholder { color: var(--muted); }
.order-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.word-chip { background: #fff; border: 2px solid var(--ring); border-radius: 10px; padding: 10px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.word-chip.placed { background: #eaf0ff; border-color: var(--primary); }
.word-chip:disabled { opacity: .7; cursor: default; }

/* feedback */
.feedback { display: none; margin-top: 16px; padding: 16px; border-radius: 14px; }
.feedback.show { display: block; animation: fadein .3s ease; }
.feedback.good { background: var(--good-bg); border: 2px solid var(--good); }
.feedback.bad { background: var(--bad-bg); border: 2px solid var(--bad); }
.fb-title { font-size: 1.25rem; font-weight: 800; }
.feedback.good .fb-title { color: var(--good); }
.feedback.bad .fb-title { color: var(--bad); }
.answer-reveal { margin-top: 8px; font-size: 1.05rem; }
.hint-btn { margin: 8px 0 0; font-size: .9rem; }
.hint-text { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--bg2); border: 2px dashed var(--ring); font-weight: 600; }
.why-btn { margin: 10px 0 0; font-size: .9rem; }
.why-steps { margin-top: 6px; }
.steps-title { font-weight: 800; margin: 12px 0 4px; }
.steps { margin: 0; padding-left: 22px; line-height: 1.7; }
.steps li { margin-bottom: 4px; }
.steps .formula {
  display: inline-block; font-weight: 800; color: var(--accent-text);
  background: #eaf0ff; border-radius: 6px; padding: 0 7px; margin-right: 4px;
  font-family: "Cambria Math", "Times New Roman", Georgia, serif; letter-spacing: .2px;
}
.steps .formula.rule { color: #b34700; background: #fff2e8; }
body.has-3d .steps .formula { background: rgba(234, 240, 255, 0.9); }
body.has-3d .steps .formula.rule { background: rgba(255, 242, 232, 0.9); }

/* toast */
.badge-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120%);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 30px; font-weight: 700;
  box-shadow: var(--shadow); z-index: 50; transition: transform .4s cubic-bezier(.2,1.4,.5,1); max-width: 90vw;
}
.badge-toast.show { transform: translate(-50%, 0); }
.badge-toast.sync { background: var(--primary); font-size: .95rem; padding: 10px 18px; }
.badge-toast.undo-toast { display: flex; align-items: center; gap: 14px; font-size: .95rem; padding: 10px 12px 10px 18px; }
.undo-btn {
  font: inherit; font-weight: 700; color: var(--ink); background: #fff; border: none;
  padding: 6px 14px; border-radius: 20px; cursor: pointer;
}
.undo-btn:hover { background: #eef2ff; }

/* confetti */
.confetti-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; top: -10px; width: 9px; height: 14px; border-radius: 2px; animation: fall 1.3s ease-in forwards; }
@keyframes fall { to { transform: translateY(420px) rotate(360deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .confetti, .badge-toast, .screen { animation: none !important; }
}

/* ===================================================================== */
/* 3D world layer                                                         */
/* ===================================================================== */
#scene { display: none; }
body.has-3d { background: #bfe3ff; }
body.has-3d #scene {
  display: block; position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0;
  /* Vertical swipes and pinches stay with the browser so the page scrolls even when the
     finger lands on the world; horizontal drags still spin the world. */
  touch-action: pan-y pinch-zoom;
}
body.has-3d #app { position: relative; z-index: 1; pointer-events: none; }
/* Let empty areas fall through to the canvas so kids can spin the world,
   while all real controls stay clickable. */
body.has-3d #app .card,
body.has-3d #app .top-bar,
body.has-3d #app .play-bar,
body.has-3d #app .play-stats span,
body.has-3d #app .badges-panel,
body.has-3d #app button,
body.has-3d #app input,
body.has-3d #app .chip { pointer-events: auto; }

/* Glass styling for surfaces floating over the 3D world */
body.has-3d .card,
body.has-3d .top-bar,
body.has-3d .play-bar,
body.has-3d .create-form,
body.has-3d .badges-panel {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.7);
}
body.has-3d .profile-card,
body.has-3d .subject-card,
body.has-3d .grade-btn {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.has-3d .choice-btn { background: rgba(255, 255, 255, 0.9); }
body.has-3d .hero h1 { text-shadow: 0 2px 12px rgba(255, 255, 255, 0.6); }
/* Dark mode: the same glass surfaces, tinted navy so text stays readable over the night world. */
html[data-dark="1"] body.has-3d .card, html[data-dark="1"] body.has-3d .top-bar, html[data-dark="1"] body.has-3d .play-bar,
html[data-dark="1"] body.has-3d .create-form, html[data-dark="1"] body.has-3d .badges-panel, html[data-dark="1"] .play-bar {
  background: rgba(27, 34, 56, 0.9); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
html[data-dark="1"] body.has-3d .profile-card, html[data-dark="1"] body.has-3d .subject-card, html[data-dark="1"] body.has-3d .grade-btn { background: rgba(27, 34, 56, 0.86); }
html[data-dark="1"] body.has-3d .choice-btn { background: rgba(27, 34, 56, 0.92); color: var(--ink); }
html[data-dark="1"] body.has-3d .hero h1 { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
body.has-3d .hero-tagline { text-shadow: 0 1px 8px rgba(255, 255, 255, 0.6); }
html[data-dark="1"] body.has-3d .hero-tagline { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
html[data-dark="1"] .hero-tagline { background: rgba(27, 34, 56, 0.85); }
html[data-dark="1"] .hero-pills li { color: var(--ink); border-color: rgba(255, 255, 255, 0.14); }
html[data-dark="1"] .hero-pills li:nth-child(1) { background: #4a2a2a; }
html[data-dark="1"] .hero-pills li:nth-child(2) { background: #223a58; }
html[data-dark="1"] .hero-pills li:nth-child(3) { background: #23412a; }
html[data-dark="1"] .hero-pills li:nth-child(4) { background: #4a3d1a; }
html[data-dark="1"] .hero-feature:nth-child(1) .hero-feature-emoji { background: #4a2a2a; }
html[data-dark="1"] .hero-feature:nth-child(2) .hero-feature-emoji { background: #4a3d1a; }
html[data-dark="1"] .hero-feature:nth-child(3) .hero-feature-emoji { background: #223a58; }
html[data-dark="1"] body.has-3d .hero-feature { background: rgba(27, 34, 56, 0.9); border-color: rgba(255, 255, 255, 0.1); }
html[data-dark="1"] .profile-card.add.primary { background: var(--primary); color: #fff; }

/* Play screen: push the question panel to the bottom so the 3D stage shows
   in the space above it. Uses dynamic viewport height so it fits correctly on
   mobile browsers whose toolbars appear/disappear. */
body.has-3d .play-screen { display: flex; flex-direction: column; min-height: calc(100vh - 40px); min-height: calc(100dvh - 40px); }
body.has-3d .play-screen .board { margin-top: auto; }
body.has-3d .play-screen .problem-card.has-visual { max-height: 62vh; max-height: 62dvh; overflow-y: auto; }

/* Landscape phones (short height): tighten vertical space and let the card
   scroll rather than pushing the 3D stage off-screen. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero-emoji { font-size: 2.2rem; }
  h1 { font-size: 1.6rem; }
  .subject-row { grid-template-columns: repeat(3, 1fr); }
  body.has-3d .play-screen { min-height: auto; }
  body.has-3d .play-screen .board { margin-top: 16px; }
  body.has-3d .play-screen .problem-card.has-visual { max-height: none; }
  .prompt { font-size: 1.15rem; }
  .prompt .equation { font-size: 1.6rem; margin: 8px 0; }
}

/* A gentle hint that the world is draggable */
.spin-hint {
  text-align: center; color: var(--muted); font-weight: 700; font-size: .85rem;
  margin: 6px 0 0; opacity: .8;
}
body:not(.has-3d) .spin-hint { display: none; }

.tally {
  display: inline-block; margin: 6px 0 2px; padding: 6px 14px; border-radius: 20px;
  background: var(--bg2); font-weight: 700; color: var(--accent-text);
}

.problem-card.glass { position: relative; overflow: hidden; }

/* ---------- Reduced motion ---------- */
/* Respect the OS "reduce motion" setting: near-instant transitions/animations,
   no confetti, no smooth auto-scroll. (The 3D world's idle spin/bob is calmed in
   js/scene3d.js.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto !important; }
  .confetti-layer { display: none !important; }
}