/* Brockademy — sticker-book arcade design system */
:root{
  /* ============================================================
     v10.0.0 — BROCKADEMY BRAND PALETTE (cream · navy · gold)
     Taken from the Brockademy roundel and poster. Replaces the old
     purple/rainbow scheme entirely.

     The rule for this palette: navy carries structure, gold carries
     emphasis, cream carries everything else. Colour is used to mean
     something (this is selected / this earned you something / this went
     wrong), never as decoration — which is what stops a screen full of
     panels reading as "busy" to a child.
     ============================================================ */
  --navy:#1B2540; --navy-2:#2C3E70; --navy-deep:#141C30; --navy-soft:#3A4568;
  --gold:#F5A623; --gold-2:#FFC46B; --gold-deep:#C77F14; --gold-wash:#FFF3D9;
  --cream:#FFF8EC; --cream-2:#FFFDF7; --cream-line:#EDE2CC;

  --ink:#1B2540; --ink-soft:#5A6478; --canvas:#FFF8EC; --card:#FFFDF7;

  /* legacy token names kept so every existing rule keeps working while
     pointing at the new brand colours — avoids a risky 3,000-line
     find/replace across the stylesheet for zero visual gain */
  --ultraberry:#1B2540; --bubblegum:#F5A623; --minty:#6FCF97; --sky:#2C3E70;
  --tangerine:#C77F14; --leaf:#6FCF97; --custard:#F5A623; --danger:#FF6F4C;
  --ultraberry-ink:#1B2540; --bubblegum-ink:#8A6A22; --minty-ink:#1F6F55; --sky-ink:#2C3E70;
  --tangerine-ink:#8A6A22; --leaf-ink:#1F6F55; --custard-ink:#8A6A22;

  --nav-active-bg:#1B2540; --nav-active-fg:#FFF8EC;
  --radius-l:22px; --radius-m:16px;
  /* flatter, quieter shadows — the old chunky 6px offset "sticker" look
     was a large part of why the app read as childish */
  --shadow-card:0 1px 2px rgba(22,41,75,.06), 0 8px 22px rgba(22,41,75,.08);
  --shadow-pop:0 4px 10px rgba(22,41,75,.10), 0 18px 40px rgba(22,41,75,.14);
  --nav-h:74px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
/* v8.23.0 — THE FONT BUG.
   Every heading and button used to declare  font-family:'Baloo 2',cursive.
   When Baloo 2 fails to arrive — a slow connection, an offline PWA launch,
   Google Fonts blocked on a school network — the browser falls back to the
   generic 'cursive' family, which on an iPhone is Snell Roundhand. That is
   why buttons like "Print worksheet" and the tab labels rendered in swirly
   handwriting while the body text stayed normal. The fallback is now the same
   real system stack the body uses, so a missing web font degrades to something
   that still looks like Brockademy. */
body{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior:none;
  background:var(--canvas);}
#app{max-width:760px;margin:0 auto;min-height:100dvh;position:relative;
  padding:calc(env(safe-area-inset-top) + 14px) 18px calc(var(--nav-h) + env(safe-area-inset-bottom) + 22px);}
#app.wide{max-width:980px;padding-bottom:40px}
/* Issue 6: responsive width — the app was locked to a phone-width column on
   every device, leaving big empty coloured margins on iPad and desktop.
   Widen the usable area as the screen grows so it uses the space properly. */
@media (min-width:768px){
  #app{max-width:900px;padding-left:32px;padding-right:32px}
  #app.wide{max-width:1120px}
}
@media (min-width:1100px){
  #app{max-width:1080px;padding-left:48px;padding-right:48px}
  #app.wide{max-width:1320px}
}
@media (min-width:1500px){
  #app{max-width:1280px}
  #app.wide{max-width:1500px}
}
h1,h2,h3{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;line-height:1.1}

header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.logo{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.55rem;letter-spacing:-.02em;
  display:flex;align-items:center;gap:8px}
.logo em{font-style:normal;color:var(--ultraberry)}
.logo .zap{display:inline-block;transform:rotate(-8deg)}
/* v7.7.0: the actual mascot logo image (Brockademy only — this class is
   simply never referenced in Brockademy's markup, so it has no effect there) */
.logo-mascot{width:32px;height:32px;flex:0 0 auto;display:inline-block}
.logo-mascot-lg{width:64px;height:64px;margin:0 auto 8px;display:block}
.stat-pills{display:flex;gap:8px;align-items:center}
.pill{display:flex;align-items:center;gap:5px;background:var(--card);border-radius:999px;padding:7px 12px;
  font-weight:800;font-size:.86rem;box-shadow:0 3px 0 rgba(27,37,64,.08);border:2px solid rgba(27,37,64,.06)}
.pill.xp{color:var(--ultraberry-ink)} .pill.streak{color:var(--tangerine-ink)}
.pill span.num{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:1rem}
.pill.link{cursor:pointer;color:var(--ink-soft)}

.screen{display:none;animation:screenIn .28s ease both}
.screen.active{display:block}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.screen-title{font-size:1.9rem;font-weight:800;margin:2px 0 4px}
.sub{color:var(--ink-soft);font-weight:600;font-size:.95rem;margin-bottom:18px}

/* banners + cards */
.level-banner{background:linear-gradient(120deg,var(--ultraberry),#3C5A99 60%,var(--bubblegum));
  border-radius:var(--radius-l);color:#fff;padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow-card);
  position:relative;overflow:hidden}
/* v10.0.0 — the level banner used to stamp a giant emoji here; the
   crest watermark now does that job across the whole page. */
/* v8.0.1 — mascot badge on the hero card: centred, oversized and faded into
   the background like a "scholar tab" watermark, rather than a small sharp
   badge in the corner (which used to overlap the text once this always
   rendered for every deployment). pointer-events:none so it never blocks
   taps on the card underneath it. */
.hero-mascot-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:170px;height:170px;opacity:.14;pointer-events:none;z-index:-1}
.hero-mascot-badge svg,.hero-mascot-badge img{width:100%;height:100%;display:block}
@media (max-width:420px){.hero-mascot-badge{width:120px;height:120px}}
.level-banner .lvl-name{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.3rem}
.level-banner .lvl-sub{font-size:.85rem;font-weight:700;opacity:.92;margin-bottom:10px}
.xp-bar{height:14px;background:rgba(255,255,255,.28);border-radius:999px;overflow:hidden}
.xp-bar>div{height:100%;background:#fff;border-radius:999px;transition:width .6s cubic-bezier(.2,.9,.3,1.2);box-shadow:0 0 12px rgba(255,255,255,.8)}
.xp-note{font-size:.78rem;font-weight:800;margin-top:7px;opacity:.95}

.panel{background:var(--card);border-radius:var(--radius-l);padding:18px;box-shadow:var(--shadow-card);
  border:2px solid rgba(27,37,64,.05);margin-bottom:16px}
.panel h3{font-size:1.1rem;margin-bottom:10px}

/* mission + goal */
.mission{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:2px dashed rgba(27,37,64,.07)}
.mission:last-child{border-bottom:none}
.mission .mk{width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:.95rem;
  background:rgba(27,37,64,.06)}
.mission.done .mk{background:#E7FBF4}
.mission .m-label{flex:1;font-weight:800;font-size:.92rem}
.mission.done .m-label{text-decoration:line-through;color:var(--ink-soft)}
.mission .m-prog{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:.85rem;color:var(--ink-soft)}
.goal-bar{height:16px;background:rgba(27,37,64,.08);border-radius:999px;overflow:hidden;margin:8px 0 6px}
.goal-bar>div{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--minty),var(--sky));transition:width .5s ease}
.goal-note{font-size:.82rem;font-weight:800;color:var(--ink-soft)}

/* nudge inbox */
.nudge-card{border-radius:var(--radius-m);padding:14px 16px;margin-bottom:10px;font-weight:700;position:relative;
  border:2px solid rgba(27,37,64,.08);box-shadow:0 4px 0 rgba(27,37,64,.07);animation:screenIn .3s ease both}
.nudge-card.praise{background:#FFF8E5;border-color:#F5D77A}
.nudge-card.nudge{background:#EDF7FF;border-color:#9AD8FB}
.nudge-card .n-from{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.nudge-card .n-msg{font-size:.95rem;line-height:1.4}

/* set tiles */
.set-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:600px){.set-grid{grid-template-columns:1fr 1fr}}
.set-tile{background:var(--card);border-radius:var(--radius-l);padding:16px;display:flex;align-items:center;gap:14px;
  box-shadow:var(--shadow-card);border:2px solid rgba(27,37,64,.05);cursor:pointer;transition:transform .15s ease;text-align:left;width:100%}
.set-tile:active{transform:scale(.97)}
.set-emoji{width:58px;height:58px;flex:none;border-radius:20px;display:grid;place-items:center;font-size:1.8rem;
  box-shadow:inset 0 -4px 0 rgba(27,37,64,.12)}
.set-info{flex:1;min-width:0}
.set-tile,.set-tile *{color:var(--ink)}
.set-name{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:1.12rem;color:var(--ink)}
.set-meta{font-size:.8rem;font-weight:700;color:var(--ink-soft)}
.ring{width:44px;height:44px;flex:none;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .pct{position:absolute;inset:0;display:grid;place-items:center;font-size:.62rem;font-weight:800;color:var(--ink)}

/* buttons + fields */
.btn{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:1rem;border:none;border-radius:var(--radius-m);
  padding:14px 18px;cursor:pointer;color:#fff;background:var(--ultraberry);box-shadow:0 5px 0 rgba(27,37,64,.18);
  transition:transform .12s ease}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(27,37,64,.18)}
.btn.block{width:100%} .btn.big{font-size:1.15rem;padding:16px 20px;border-radius:20px}
.btn.ghost{background:var(--card);color:var(--ink);border:2px solid rgba(27,37,64,.10);box-shadow:0 4px 0 rgba(27,37,64,.08)}
.btn.mint{background:var(--minty)} .btn.pink{background:var(--bubblegum)} .btn.small{padding:9px 14px;font-size:.88rem;border-radius:13px}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-row{display:flex;gap:10px} .btn-row .btn{flex:1}
.field{margin-bottom:14px}
.field label{display:block;font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.field input,.field select{width:100%;background:var(--card);border:2px solid rgba(27,37,64,.10);border-radius:var(--radius-m);
  padding:13px 15px;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);outline:none;transition:border-color .15s}
.field input:focus,.field select:focus{border-color:var(--ultraberry)}
.form-err{color:var(--danger);font-weight:800;font-size:.88rem;min-height:20px;margin:4px 0 8px}

/* flashcards */
.study-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.back-btn{background:var(--card);border:2px solid rgba(27,37,64,.08);border-radius:14px;width:42px;height:42px;
  font-size:1.1rem;cursor:pointer;box-shadow:0 3px 0 rgba(27,37,64,.08);font-weight:800;color:var(--ink)}
.study-set-name{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:1.15rem;flex:1}
.card-count{font-weight:800;font-size:.85rem;color:var(--ink-soft)}
.flip-stage{perspective:1400px;margin:6px 0 16px}
.flashcard{position:relative;width:100%;height:340px;transform-style:preserve-3d;cursor:pointer;
  transition:transform .55s cubic-bezier(.3,1.4,.4,1),height .2s ease}
/* v8.19.0 - a card carrying a visual needs more room above the bottom-pinned
   "Tap to flip" hint than plain text does. Toggled in JS (renderCard) so the
   fixed-height flip container never lets the visual/text collide with the
   hint - this was the exact overlap bug reported live (question text running
   into "Tap to flip"). Both faces share this height since .face is
   position:absolute;inset:0 on the parent .flashcard. */
.flashcard.has-visual{height:520px}
.flashcard.flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:30px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px;text-align:center;box-shadow:var(--shadow-pop)}
.face .tag{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:.68rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.face.front{background:var(--card);border:3px solid rgba(27,37,64,.07)}
.face.front .tag{background:rgba(27,37,64,.06);color:var(--ink-soft)}
.face .word{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.75rem;line-height:1.15}
.face.back{transform:rotateY(180deg);color:#fff}
.face.back .tag{background:rgba(255,255,255,.24);color:#fff}
.face.back .word{font-size:1.3rem;font-weight:700;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;line-height:1.4}
.face .hint{position:absolute;bottom:16px;font-size:.75rem;font-weight:800;opacity:.55}
.face .sticker{position:absolute;top:14px;right:14px;font-size:1.6rem;transform:rotate(10deg);filter:drop-shadow(0 3px 0 rgba(27,37,64,.15))}
.card-dots{display:flex;justify-content:center;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:99px;background:rgba(27,37,64,.14);transition:all .2s}
.dot.on{width:22px;background:var(--ultraberry)} .dot.seen{background:var(--minty)}

/* quiz */
.quiz-progress{height:12px;background:rgba(27,37,64,.08);border-radius:999px;overflow:hidden;margin:4px 0 20px}
.quiz-progress>div{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--minty),var(--sky));transition:width .35s ease}
.quiz-q{background:var(--card);border-radius:var(--radius-l);padding:24px 20px;text-align:center;box-shadow:var(--shadow-card);
  border:2px solid rgba(27,37,64,.05);margin-bottom:16px}
.quiz-q .ask{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.quiz-q .term{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.5rem}
.opts{display:grid;gap:10px}
.opt{background:var(--card);border:2px solid rgba(27,37,64,.10);border-radius:var(--radius-m);padding:15px 16px;
  font-weight:700;font-size:.98rem;text-align:left;cursor:pointer;color:var(--ink);box-shadow:0 4px 0 rgba(27,37,64,.07);
  transition:transform .12s ease;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;line-height:1.35}
.opt:active{transform:scale(.98)}
.opt.correct{background:#E7FBF4;border-color:var(--minty);box-shadow:0 4px 0 rgba(45,212,167,.5)}
.opt.wrong{background:#FFECEC;border-color:var(--danger);box-shadow:0 4px 0 rgba(255,77,77,.35);animation:shake .35s}
.opt.locked{pointer-events:none}
.opt.chosen{background:#EEF0FF;border-color:var(--purple,#1B2540);box-shadow:0 4px 0 rgba(44,62,112,.35)}
.quiz-feedback.neutral{color:var(--ink-soft,#6b6390);font-size:.98rem}
@keyframes shake{20%{transform:translateX(-6px)}45%{transform:translateX(6px)}70%{transform:translateX(-4px)}90%{transform:translateX(3px)}}
.quiz-feedback{min-height:32px;text-align:center;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.1rem;margin:12px 0}
.quiz-feedback.good{color:var(--minty)} .quiz-feedback.bad{color:var(--danger)}
.quiz-explain{margin:10px auto 0;max-width:560px;text-align:left;font-family:inherit;font-weight:500;
  font-size:.95rem;line-height:1.45;color:var(--ink,#1B2540);background:rgba(91,141,239,.08);
  border:1px solid rgba(91,141,239,.25);border-radius:12px;padding:10px 13px}
.quiz-explain .qx-why{font-weight:800;color:var(--deep,#1B2540);margin-right:4px}
.qx-next{display:block;margin:12px auto 0;padding:11px 26px;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;
  font-size:1rem;color:#fff;background:var(--deep,#1B2540);border:none;border-radius:12px;cursor:pointer}
.qx-next:hover{filter:brightness(1.06)}
.revision-badge{display:inline-block;margin:0 0 10px;padding:4px 12px;border-radius:99px;
  font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:.82rem;color:#fff;
  background:linear-gradient(135deg,#F5A623,#E8734A);box-shadow:0 2px 6px rgba(232,115,74,.3)}
.result-hero{text-align:center;padding:26px 18px;background:var(--card);border-radius:var(--radius-l);
  box-shadow:var(--shadow-pop);border:2px solid rgba(27,37,64,.05);margin-bottom:16px;position:relative;overflow:hidden}
.result-hero .big-emoji{font-size:3.4rem;animation:bounceIn .6s cubic-bezier(.3,1.6,.4,1)}
@keyframes bounceIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.result-score{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:2.6rem;margin:4px 0 0}
.result-msg{font-weight:800;color:var(--ink-soft)}
.stars{font-size:2rem;letter-spacing:6px;margin:8px 0}
.stars .off{opacity:.22;filter:grayscale(1)}
.reward-line{display:inline-flex;align-items:center;gap:8px;background:#FFF3D9;color:var(--ultraberry);
  font-weight:800;border-radius:999px;padding:8px 16px;margin-top:10px;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif}

/* create */
.picker-row{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:44px;height:44px;border-radius:15px;border:3px solid transparent;cursor:pointer;box-shadow:inset 0 -4px 0 rgba(27,37,64,.14)}
.swatch.on{border-color:var(--ink);transform:scale(1.08)}
.emoji-chip{width:44px;height:44px;border-radius:15px;background:var(--card);border:2px solid rgba(27,37,64,.10);
  font-size:1.35rem;cursor:pointer;display:grid;place-items:center}
.emoji-chip.on{border-color:var(--ultraberry);background:#FFF3D9;transform:scale(1.08)}
.pair-row{background:var(--card);border-radius:var(--radius-m);padding:12px;border:2px solid rgba(27,37,64,.07);
  margin-bottom:10px;box-shadow:0 3px 0 rgba(27,37,64,.05);position:relative}
.pair-row .n{position:absolute;top:10px;left:12px;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:.8rem;color:var(--ink-soft)}
.pair-row input{width:100%;border:none;border-bottom:2px solid rgba(27,37,64,.08);background:transparent;
  padding:9px 4px 7px 26px;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink);outline:none}
.pair-row input:focus{border-bottom-color:var(--ultraberry)}
.pair-row input+input{padding-left:26px;border-bottom:none;color:var(--ink-soft)}
.pair-row .del{position:absolute;top:8px;right:8px;border:none;background:rgba(27,37,64,.06);width:26px;height:26px;
  border-radius:9px;cursor:pointer;font-weight:800;color:var(--ink-soft)}

/* rewards */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.badge{background:var(--card);border-radius:var(--radius-m);padding:16px 12px;text-align:center;border:2px solid rgba(27,37,64,.06);
  box-shadow:0 4px 0 rgba(27,37,64,.06)}
.badge .b-emoji{font-size:2.1rem}
.badge .b-name{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:.95rem;margin-top:6px}
.badge .b-desc{font-size:.74rem;font-weight:700;color:var(--ink-soft);margin-top:2px;line-height:1.3}
.badge.locked{opacity:.5} .badge.locked .b-emoji{filter:grayscale(1)}

/* bottom nav */
nav.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 12px);
  width:min(420px, calc(100% - 36px));background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-radius:26px;display:flex;padding:8px;
  box-shadow:0 8px 0 rgba(27,37,64,.10), 0 20px 40px rgba(27,37,64,.18);border:2px solid rgba(27,37,64,.06);z-index:50}
nav.tabbar button{flex:1;border:none;background:transparent;border-radius:18px;padding:9px 4px 7px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.005em;color:var(--ink-soft);transition:all .18s}   /* v10.6.0: .72 was too small to read comfortably */
nav.tabbar button .ico{font-size:1.35rem;transition:transform .18s}
nav.tabbar button.on{background:var(--nav-active-bg);color:var(--nav-active-fg)}
nav.tabbar button.on .ico{transform:translateY(-1px) scale(1.08)}

/* toast + confetti */
#toast{position:fixed;top:calc(env(safe-area-inset-top) + 16px);left:50%;transform:translateX(-50%) translateY(-90px);
  background:var(--ink);color:#fff;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;padding:11px 20px;border-radius:999px;
  box-shadow:0 12px 30px rgba(27,37,64,.35);z-index:99;transition:transform .35s cubic-bezier(.3,1.4,.4,1);
  font-size:.95rem;pointer-events:none;white-space:nowrap}
#toast.show{transform:translateX(-50%) translateY(0)}
.confetti{position:fixed;top:-14px;z-index:98;pointer-events:none;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.9}}
.empty{text-align:center;padding:36px 16px;color:var(--ink-soft);font-weight:700}
.empty .e-emoji{font-size:2.6rem;display:block;margin-bottom:8px}

/* auth screens */
.auth-wrap{max-width:430px;margin:0 auto;padding-top:6vh}
.auth-hero{text-align:center;margin-bottom:22px}
.auth-hero .mega{font-size:3rem}
.auth-hero h1{font-size:2rem}
.auth-hero p{color:var(--ink-soft);font-weight:700;margin-top:4px}
.auth-tabs{display:flex;background:rgba(27,37,64,.06);border-radius:16px;padding:5px;margin-bottom:16px}
.auth-tabs button{flex:1;border:none;background:transparent;border-radius:12px;padding:10px;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-weight:700;color:var(--ink-soft);cursor:pointer}
.auth-tabs button.on{background:#fff;color:var(--ink);box-shadow:0 3px 8px rgba(27,37,64,.12)}
.auth-alt{text-align:center;margin-top:16px;font-weight:800;font-size:.9rem;color:var(--ink-soft)}
.auth-alt a{color:var(--ultraberry)}

/* ---------- Parent HQ ---------- */
.kid-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.kid-tab{border:2px solid rgba(27,37,64,.10);background:var(--card);border-radius:999px;padding:9px 16px;cursor:pointer;
  font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;box-shadow:0 3px 0 rgba(27,37,64,.07);color:var(--ink)}
.kid-tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.hq-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.hq-grid{grid-template-columns:1fr 1fr}}
.stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.stat-card{flex:1;min-width:130px;background:var(--card);border-radius:var(--radius-m);padding:14px;text-align:center;
  border:2px solid rgba(27,37,64,.06);box-shadow:0 4px 0 rgba(27,37,64,.06)}
.stat-card .s-num{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.6rem}
.stat-card .s-label{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.mastery-row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.mastery-row .m-emoji{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:1.1rem}
.mastery-row .m-name{width:92px;flex:none;font-weight:800;font-size:.85rem}
.mastery-row .m-bar{flex:1;height:14px;background:rgba(27,37,64,.08);border-radius:999px;overflow:hidden}
.mastery-row .m-bar>div{height:100%;border-radius:999px;transition:width .5s ease}
.mastery-row .m-pct{width:44px;text-align:right;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:.85rem}
.chart{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:8px}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.chart .bar{width:100%;max-width:38px;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,var(--sky),var(--ultraberry));
  min-height:4px;transition:height .5s ease}
.chart .lbl{font-size:.68rem;font-weight:800;color:var(--ink-soft)}
.chart .val{font-size:.7rem;font-weight:800;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif}
.history-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:2px dashed rgba(27,37,64,.07);font-weight:700;font-size:.9rem}
.history-item:last-child{border-bottom:none}
.history-item .h-pct{margin-left:auto;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800}
.history-item .h-when{font-size:.74rem;color:var(--ink-soft);font-weight:700}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.chip{border:2px solid rgba(27,37,64,.12);background:var(--card);border-radius:999px;padding:8px 13px;font-weight:800;
  font-size:.84rem;cursor:pointer;color:var(--ink)}
.chip.on{border-color:var(--ultraberry);background:#FFF3D9;color:var(--ultraberry)}
.code-box{display:inline-flex;align-items:center;gap:10px;background:#FFF3D9;border:2px dashed var(--ultraberry);
  color:var(--ultraberry);font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:.2em;
  padding:10px 18px;border-radius:16px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* term grouping */
.term-header{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;
  font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.15rem;margin:10px 2px 0}
.term-header .term-progress{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:.78rem;font-weight:800;color:var(--ink-soft)}
.set-tile.locked-tile{opacity:.62;background:rgba(255,255,255,.7)}
.set-tile.locked-tile .set-name{color:var(--ink-soft)}
.set-tile.locked-tile .set-meta{font-size:.72rem}

.mastery-term{display:flex;justify-content:space-between;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;
  font-size:.92rem;color:var(--ink-soft);margin:12px 0 8px;padding-bottom:4px;border-bottom:2px dashed rgba(27,37,64,.08)}
.mastery-term:first-child{margin-top:0}

/* exams */
.exam-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:2px dashed rgba(27,37,64,.07)}
.exam-row:last-child{border-bottom:none}
.exam-info{flex:1;min-width:0}
.exam-name{font-weight:800;font-size:.95rem}
.exam-name .exam-sub{display:block;font-size:.72rem;font-weight:700;color:var(--ink-soft)}
.exam-chip{display:inline-block;margin-top:4px;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:.74rem;
  border-radius:999px;padding:3px 10px}
.exam-chip.pass{background:#E7FBF4;color:#0E9F76}
.exam-chip.fail{background:#FFECEC;color:var(--danger)}
.exam-chip.todo{background:color-mix(in srgb, var(--custard) 22%, var(--card));color:var(--custard-ink)}
.exam-chip.locked{background:rgba(27,37,64,.06);color:var(--ink-soft)}
.report-row{padding:10px 0;border-bottom:2px dashed rgba(27,37,64,.07)}
.report-row:last-child{border-bottom:none}
.report-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.report-name{font-weight:800;font-size:.95rem}
.report-breakdown{font-size:.78rem;font-weight:700;color:var(--ink-soft);margin-top:5px;line-height:1.5}

/* family league */
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:end;margin-bottom:16px}
.podium-spot{text-align:center}
.podium-spot .p-medal{font-size:2rem}
.podium-spot .p-name{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:.9rem;margin:2px 0}
.podium-spot .p-xp{font-weight:800;font-size:.8rem;color:var(--ultraberry);margin-bottom:6px}
.podium-spot .p-block{border-radius:14px 14px 0 0;background:linear-gradient(180deg,#fff,rgba(255,255,255,.6));
  border:2px solid rgba(27,37,64,.08);border-bottom:none;box-shadow:0 -4px 0 rgba(27,37,64,.04) inset}
/* heights are set inline by rank (gold tallest). Gold = .p1 (rank-0 spot) gets the golden block. */
.podium-spot.p1 .p-block{background:linear-gradient(180deg,#FFF4D6,#FFD84D);border-color:rgba(212,160,23,.4)}
.podium-spot.p2 .p-block{background:linear-gradient(180deg,#F4F4F8,#D8DCE8)}
.podium-spot.p3 .p-block{background:linear-gradient(180deg,#FBEBDD,#E9C4A6)}
.podium-spot.p1 .p-medal{font-size:2.5rem}
.podium-spot.me .p-name{color:var(--ultraberry)}
.league-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:2px dashed rgba(27,37,64,.07)}
.league-row:last-child{border-bottom:none}
.league-row.me{background:#FFF3D9;border-radius:14px;padding:11px 10px;border-bottom:none;margin:2px -4px}
.l-rank{width:38px;flex:none;text-align:center;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.15rem}
.l-info{flex:1;min-width:0}
.l-name{font-weight:800;font-size:.98rem}
.you-chip{font-size:.6rem;background:var(--ultraberry);color:#fff;border-radius:999px;padding:2px 7px;vertical-align:middle;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif}
.l-meta{font-size:.74rem;font-weight:700;color:var(--ink-soft)}
.l-engage{font-size:.68rem;font-weight:700;color:var(--ink-soft);opacity:.8;margin-top:2px}
.l-cheers{display:flex;gap:5px;margin-top:6px}
.cheer-btn{border:2px solid rgba(27,37,64,.1);background:#fff;border-radius:10px;padding:3px 7px;font-size:.95rem;cursor:pointer;line-height:1;transition:transform .1s,background .15s}
.cheer-btn:hover:not(:disabled){transform:scale(1.18);background:#FFF6DA}
.cheer-btn:disabled{opacity:.55;cursor:default}
.cheer-btn.cheered{background:#E9FBE9;border-color:#9BE8A0}
.cheer-count{font-size:.7rem;font-weight:800;color:#E8820C;background:#FFF3D6;border-radius:8px;padding:1px 6px;margin-left:4px}
.l-week{text-align:right;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;color:var(--ultraberry)}
.l-week span{display:block;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:.62rem;font-weight:800;color:var(--ink-soft)}
.spotlight-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.spot-card{background:#FFFBEE;border:2px solid #F5D77A;border-radius:var(--radius-m);padding:12px;text-align:center}
.spot-card .sp-emoji{font-size:1.6rem}
.spot-card .sp-label{font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin:3px 0}
.spot-card .sp-name{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:.95rem}
.spot-card .sp-value{font-size:.78rem;font-weight:800;color:#B07B00}

/* feedback modal */
.fb-overlay{position:fixed;inset:0;background:rgba(27,37,64,.45);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.fb-modal{background:var(--card);border-radius:var(--radius-l);padding:22px;max-width:420px;width:100%;
  box-shadow:var(--shadow-pop);border:2px solid rgba(27,37,64,.06)}
.fb-modal h3{font-size:1.2rem;margin-bottom:4px}
.fb-emojis{display:flex;gap:8px;margin-bottom:12px}
.fb-emojis button{flex:1;font-size:1.5rem;padding:9px 0;border-radius:14px;border:2px solid rgba(27,37,64,.10);
  background:var(--card);cursor:pointer;transition:transform .12s}
.fb-emojis button.on{border-color:var(--ultraberry);background:#FFF3D9;transform:scale(1.08)}
.fb-modal textarea{width:100%;border:2px solid rgba(27,37,64,.10);border-radius:var(--radius-m);padding:12px;
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink);outline:none;resize:vertical}
.fb-modal textarea:focus{border-color:var(--ultraberry)}

/* tutor chat */
.chat-panel{padding:12px}
.chat-box{max-height:46vh;min-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px}
.chat-bubble{max-width:85%;padding:11px 14px;border-radius:18px;font-weight:600;font-size:.94rem;line-height:1.45;white-space:pre-wrap}
.chat-bubble.bot{background:#FFF3D9;color:var(--ink);border-bottom-left-radius:6px;align-self:flex-start}
.chat-bubble.user{background:var(--ink);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.chat-input-row{display:flex;gap:8px;margin-top:10px}
.chat-input-row input{flex:1;background:var(--card);border:2px solid rgba(27,37,64,.10);border-radius:var(--radius-m);
  padding:13px 15px;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);outline:none}
.chat-input-row input:focus{border-color:var(--ultraberry)}
.chat-input-row .btn{padding:13px 18px}
/* screen-time warning + prize */
.nudge-card.warn{background:#FFF1E6;border-color:#FFB27A}
.prize-line{margin-top:10px;font-weight:800;font-size:.88rem;background:#FFF8E5;border:2px dashed #F5D77A;border-radius:12px;padding:9px 12px}
.prize-line.earned{background:#E7FBF4;border-color:var(--minty)}
.toggle-line{display:flex;gap:8px;align-items:flex-start;font-weight:700;font-size:.85rem;color:var(--ink-soft);margin-bottom:12px;cursor:pointer}
.toggle-line input{margin-top:3px;accent-color:var(--ultraberry);width:16px;height:16px}
/* focused test mode */
#screen-quiz{user-select:none;-webkit-user-select:none}

/* ===== dark mode ===== */
[data-theme="dark"]{
  /* dark mode is the same brand, inverted: deep navy canvas, cream ink,
     gold emphasis — not a different palette */
  --canvas:#141C30; --card:#1B2540; --ink:#FFF8EC; --ink-soft:#A9BAD4;
  --cream-line:#2A4066;
  --ultraberry-ink:#FFC46B; --bubblegum-ink:#FFC46B; --minty-ink:#6EE7C0; --sky-ink:#9CC3F5;
  --tangerine-ink:#FFC46B; --leaf-ink:#8FD8BC; --custard-ink:#FFC46B;
  /* the active nav pill must NOT use --ink as a background: in dark mode
     --ink is near-white, which made its white label invisible. */
  --nav-active-bg:#F5A623; --nav-active-fg:#141C30;
}
[data-theme="dark"] body{background:var(--canvas);color:var(--ink)}
[data-theme="dark"] .panel,[data-theme="dark"] .set-card,[data-theme="dark"] .set-tile,[data-theme="dark"] .flashcard .face,
[data-theme="dark"] .mission,[data-theme="dark"] .nudge-card,[data-theme="dark"] .report-row,
[data-theme="dark"] .lb-row,[data-theme="dark"] .history-item,[data-theme="dark"] .exam-card,
[data-theme="dark"] .badge-tile,[data-theme="dark"] .chat-input-row input,[data-theme="dark"] input,
[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:var(--card);color:var(--ink);border-color:rgba(255,255,255,.10)
}
/* v8.2.0 — readability sweep: in dark mode, typed text and placeholders in
   EVERY input/textarea/select must stay light-on-dark. Some inputs set their
   own light background inline; force a readable pairing regardless. */
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{color:#FFF8EC !important;-webkit-text-fill-color:#FFF8EC}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#8B93A7 !important;-webkit-text-fill-color:#8B93A7}
[data-theme="dark"] ::selection{background:#2C3E70;color:#fff}
[data-theme="dark"] .chat-bubble.bot{background:#332757;color:var(--ink)}
[data-theme="dark"] .chat-bubble.user{background:var(--ultraberry)}
[data-theme="dark"] .nudge-card.warn{background:#3A2A1B;border-color:#8A5A2B}
[data-theme="dark"] .prize-line{background:#332B14;border-color:#7A6A2B}
[data-theme="dark"] .prize-line.earned{background:#153B31;border-color:var(--minty)}
[data-theme="dark"] .tabbar{background:var(--card);border-top:1px solid rgba(255,255,255,.08)}
[data-theme="dark"] .app-header{background:var(--card)}
[data-theme="dark"] .btn.ghost{background:transparent;color:var(--ink);border-color:rgba(255,255,255,.25)}
.theme-btn{background:none;border:none;font-size:1.25rem;cursor:pointer;padding:4px 6px}

/* ===== year select ===== */
.year-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.year-btn{background:var(--card);border:3px solid rgba(27,37,64,.12);border-radius:var(--radius-m);
  padding:18px 10px;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.2rem;color:var(--ink);
  cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:.15s}
.year-btn span{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:700;font-size:.75rem;color:var(--ink-soft)}
.year-btn:active{transform:scale(.96);border-color:var(--ultraberry)}
[data-theme="dark"] .year-btn{border-color:rgba(255,255,255,.12)}

/* ===== minutes tracker ===== */
.min-track{height:10px;background:rgba(44,62,112,.15);border-radius:99px;overflow:hidden;margin-top:10px}
.min-fill{height:100%;background:linear-gradient(90deg,var(--ultraberry),var(--bubblegum));border-radius:99px;transition:width .5s}
.min-label{font-weight:800;font-size:.8rem;color:var(--ink-soft);margin-top:5px}

/* ===== voice ===== */
.voice-feedback{min-height:22px;font-weight:800;font-size:.88rem;text-align:center;margin-bottom:8px}
#micBtn.listening{background:var(--bubblegum);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ===== scratchpad ===== */
.scratch-btn{background:none;border:none;font-size:1.3rem;cursor:pointer;padding:2px 6px}
.scratch-overlay{position:fixed;inset:0;background:var(--canvas);z-index:60;display:flex;flex-direction:column;padding:12px}
.scratch-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.scratch-tools{display:flex;gap:6px;flex-wrap:wrap}
#scratchCanvas{flex:1;background:#fff;border-radius:16px;border:3px solid rgba(27,37,64,.15);width:100%;touch-action:none}
.scratch-note{font-weight:700;font-size:.75rem;color:var(--ink-soft);text-align:center;margin-top:8px}
.sketch-item{margin-bottom:12px}
.sketch-item img{width:100%;border-radius:12px;border:2px solid rgba(27,37,64,.12);background:#fff}
.sketch-meta{display:flex;justify-content:space-between;font-size:.8rem;font-weight:800;color:var(--ink-soft);margin-bottom:4px}

/* ===== install popup ===== */
.install-pop{position:fixed;inset:0;background:rgba(23,18,37,.55);z-index:70;display:flex;align-items:flex-end;justify-content:center;padding:16px}
.install-card{background:var(--card);border-radius:24px;padding:22px;max-width:420px;width:100%;position:relative;text-align:center;box-shadow:0 -8px 40px rgba(0,0,0,.25)}
.install-card h3{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:1.25rem;margin-bottom:6px}
.install-card p{font-weight:700;font-size:.9rem;color:var(--ink-soft);margin-bottom:14px}
.install-emoji{font-size:2.2rem;margin-bottom:4px}
.install-x{position:absolute;top:10px;right:14px;background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--ink-soft)}

/* stretch (next-year) question tag */
#qzAsk.stretch{color:#fff;background:linear-gradient(90deg,#FF8A3D,#FF6F4C);padding:6px 12px;border-radius:99px;display:inline-block;font-weight:800;box-shadow:0 3px 0 rgba(27,37,64,.15)}
[data-theme="dark"] #qzAsk.stretch{box-shadow:0 3px 0 rgba(0,0,0,.4)}

/* ===== quill strike FX ===== */
#quillFx{position:fixed;inset:0;z-index:80;display:none;pointer-events:none;align-items:center;justify-content:center;flex-direction:column}
#quillFx.strike{display:flex}
#quillFx .quill-ico{font-size:7rem;filter:drop-shadow(0 0 24px #FFD84D) drop-shadow(0 0 60px #1B2540);animation:quillIn 1.3s cubic-bezier(.2,1.4,.4,1) forwards}
#quillFx .quill-amt{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:2.2rem;color:#FFD84D;
  -webkit-text-stroke:2px #1B2540;animation:amtRise 1.3s ease-out forwards}
@keyframes quillIn{0%{transform:scale(0) rotate(-25deg);opacity:0}22%{transform:scale(1.7) rotate(8deg);opacity:1}
  36%{transform:scale(1.25) rotate(-5deg)}50%{transform:scale(1.4) rotate(2deg)}100%{transform:scale(1) rotate(0);opacity:0}}
@keyframes amtRise{0%{transform:translateY(24px);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateY(-36px);opacity:0}}
body.flash::after{content:'';position:fixed;inset:0;background:radial-gradient(circle,rgba(255,216,77,.45),rgba(44,62,112,.18) 70%);
  z-index:79;pointer-events:none;animation:flashFade 1s ease-out forwards}
@keyframes flashFade{0%{opacity:1}100%{opacity:0}}
.level-pulse{animation:lvlPulse 1.5s ease}
@keyframes lvlPulse{0%,100%{transform:scale(1)}20%{transform:scale(1.04)}40%{transform:scale(.99)}60%{transform:scale(1.02)}}

/* ===== fair league ===== */
.league-explainer{background:var(--card);border-radius:14px;padding:10px 14px;font-weight:700;font-size:.8rem;
  color:var(--ink-soft);margin-bottom:12px;border:2px dashed rgba(44,62,112,.3)}
.year-chip{background:rgba(44,62,112,.15);color:var(--ultraberry);font-size:.68rem;font-weight:800;
  padding:2px 7px;border-radius:99px;vertical-align:middle}
[data-theme="dark"] .year-chip{background:rgba(44,62,112,.4);color:#D5C4FF}
.pb-crown{font-size:1rem;margin-left:2px}
.delta{font-size:.75rem;margin-left:4px}
.delta.up{color:var(--minty)}
.delta.down{color:var(--bubblegum)}

/* ===== ghost race (solo mode) ===== */
.ghost-race{background:var(--card);border-radius:var(--radius-m);padding:16px}
.ghost-title{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.05rem;margin-bottom:12px;text-align:center}
.ghost-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:800;font-size:.82rem}
.ghost-row span{min-width:92px}
.ghost-track{flex:1;height:14px;background:rgba(44,62,112,.12);border-radius:99px;overflow:hidden}
.ghost-fill{height:100%;background:#B9AFD6;border-radius:99px;transition:width .6s}
.ghost-fill.me{background:linear-gradient(90deg,var(--ultraberry),var(--bubblegum))}
.ghost-note{text-align:center;font-weight:800;font-size:.85rem;margin-top:6px;color:var(--ultraberry)}
[data-theme="dark"] .ghost-note{color:#D5C4FF}

/* ===== hero chips (marketable landing) ===== */
.hero-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.hero-chips span{background:var(--card);border:2px solid rgba(44,62,112,.25);border-radius:99px;
  padding:6px 12px;font-weight:800;font-size:.75rem;color:var(--ink-soft)}

/* ===== Brocky mascot (junior years) ===== */
#mascot{position:fixed;right:14px;bottom:86px;z-index:75;display:flex;flex-direction:column;align-items:flex-end;
  gap:6px;pointer-events:none;opacity:0;transform:translateY(40px) scale(.6);transition:.35s cubic-bezier(.2,1.6,.4,1)}
#mascot.show{opacity:1;transform:translateY(0) scale(1)}
.mascot-face{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#FFD84D,#FF8A3D);
  display:flex;align-items:center;justify-content:center;font-size:2rem;border:4px solid #1B2540;
  box-shadow:0 6px 20px rgba(27,37,64,.3);animation:mascotBounce .8s ease infinite alternate}
.mascot-face img{width:48px;height:48px}
@keyframes mascotBounce{0%{transform:translateY(0) rotate(-4deg)}100%{transform:translateY(-6px) rotate(4deg)}}
.mascot-bubble{background:#fff;color:#1B2540;border:3px solid #1B2540;border-radius:16px 16px 4px 16px;
  padding:9px 13px;font-weight:800;font-size:.85rem;max-width:210px;box-shadow:0 4px 14px rgba(27,37,64,.2)}
[data-theme="dark"] .mascot-bubble{background:#332757;color:#FFF8EC;border-color:#1B2540}

/* ===== challenge arena ===== */
.challenge-card{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,rgba(44,62,112,.10),rgba(255,111,76,.10));
  border:3px dashed var(--ultraberry);border-radius:var(--radius-m);padding:14px;margin-bottom:16px}
.ch-emoji{font-size:2rem}
.ch-body{flex:1;display:flex;flex-direction:column;gap:2px}
.ch-body b{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:1.02rem}
.ch-body span{font-weight:700;font-size:.78rem;color:var(--ink-soft)}
.challenge-card .btn{white-space:nowrap;padding:10px 14px}

/* ===== admin stats ===== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.stat-tile{background:rgba(44,62,112,.08);border-radius:14px;padding:12px;text-align:center}
.stat-tile 
.stat-tile .st-num{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.5rem}
.stat-tile .st-label{font-weight:700;font-size:.7rem;color:var(--ink-soft)}
.bar-row{display:flex;gap:8px;align-items:flex-end}
.dau-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.dau-bar{width:100%;max-width:38px;background:linear-gradient(180deg,var(--ultraberry),var(--bubblegum));border-radius:8px 8px 3px 3px}
.dau-col span{font-weight:800;font-size:.75rem}
.dau-col label{font-weight:700;font-size:.62rem;color:var(--ink-soft)}

/* ===== school calendar ===== */
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cal-head b{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{text-align:center;font-weight:800;font-size:.65rem;color:var(--ink-soft);padding:2px 0}
.cal-day{aspect-ratio:1;border:none;border-radius:10px;font-weight:800;font-size:.8rem;cursor:pointer;
  background:rgba(44,62,112,.07);color:var(--ink)}
.cal-day.red{background:#FFD9D9;color:#B33}
.cal-day.amber{background:#FFEFC9;color:#9a6b00}
.cal-day.green{background:#C9F5E4;color:#0c7a56}
.cal-day.locked{background:transparent;color:var(--ink-soft);opacity:.45;cursor:not-allowed}
.cal-day.today{outline:3px solid var(--ultraberry)}
.cal-day.sel{box-shadow:0 0 0 3px var(--bubblegum)}
[data-theme="dark"] .cal-day{background:rgba(44,62,112,.18);color:var(--ink)}
[data-theme="dark"] .cal-day.red{background:#4A2323;color:#FF9B9B}
[data-theme="dark"] .cal-day.amber{background:#463A16;color:#FFD97A}
[data-theme="dark"] .cal-day.green{background:#14483A;color:#7CE8C2}
.cal-legend{display:flex;gap:12px;justify-content:center;margin-top:8px;font-weight:700;font-size:.68rem;color:var(--ink-soft);align-items:center;flex-wrap:wrap}
.cal-legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:3px}
.dot.green{background:#2DD4A7}.dot.amber{background:#F5C242}.dot.red{background:#FF7B7B}.dot.locked{background:#C6C0DA}

/* ===== daily lesson rows ===== */
.lesson-row{display:flex;align-items:center;gap:10px;background:var(--card);border-left:6px solid var(--ultraberry);
  border-radius:14px;padding:10px 12px;margin-bottom:8px;box-shadow:0 2px 8px rgba(27,37,64,.06)}
.lr-emoji{font-size:1.4rem}
.lr-body{flex:1;display:flex;flex-direction:column}
.lr-body b{font-size:.95rem}
.lr-body span{font-weight:700;font-size:.72rem;color:var(--ink-soft)}
/* v8.20.0 — the day's action buttons (Study/Revision · Review · Exam) share the
   full width of the drawer equally, so the row always reads as one solid bar
   instead of two small buttons floating against a wide empty space. */
.lr-actions{display:flex;gap:8px;width:100%;margin-top:10px}
.lr-actions .btn{flex:1 1 0;min-width:0;padding:11px 8px;font-size:.8rem;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.2}

/* ===== term toggles ===== */
.term-toggles{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.term-toggle{border:3px solid rgba(44,62,112,.3);background:var(--card);border-radius:99px;padding:9px 16px;
  font-weight:800;font-size:.85rem;color:var(--ink-soft);cursor:pointer}
.term-toggle.on{background:var(--ultraberry);border-color:var(--ultraberry);color:#fff}

/* home button on quiz + teach-me mini lesson */
.home-btn{background:var(--card);border:2px solid rgba(27,37,64,.15);border-radius:12px;padding:8px 12px;
  font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:.85rem;color:var(--ink);cursor:pointer}
[data-theme="dark"] .home-btn{border-color:rgba(255,255,255,.2)}
.teach-box{background:#FFF3D9;border:2px solid rgba(44,62,112,.35);border-radius:16px;padding:14px;margin:0 0 12px;
  font-weight:600;font-size:.9rem}
[data-theme="dark"] .teach-box{background:#332757}
.teach-title{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;margin-bottom:6px}
.teach-body{white-space:pre-wrap;line-height:1.5;margin-bottom:10px;max-height:40vh;overflow-y:auto}
.teach-loading{font-weight:800;color:var(--ultraberry)}

/* prominent voice buttons on flashcards */
.voice-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;justify-content:center}
.btn.voice-speak{background:var(--sky, #38BDF8);color:#fff}
.btn.voice-mic{background:var(--tangerine, #FF8A3D);color:#fff}

/* floating home tile (practice quizzes) */
#floatHome{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:55;
  background:var(--card);border:3px solid rgba(44,62,112,.35);border-radius:99px;padding:12px 26px;
  font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1rem;color:var(--ink);cursor:pointer;
  box-shadow:0 8px 24px rgba(27,37,64,.25);display:none;align-items:center;gap:6px}
#floatHome:active{transform:translateX(-50%) scale(.95)}

/* quiz voice/teach row */
.qv-row{justify-content:center;margin:10px 0 4px;display:flex;gap:8px}

/* back face safety: never invisible even without a colour */
.face.back{background:linear-gradient(140deg,#1B2540,#5B2AA8)}

/* danger + logo link */
.btn.danger{background:#E5484D;color:#fff}
.logo-link{cursor:pointer;user-select:none;transition:transform .15s}
.logo-link:active{transform:scale(.95)}

/* ===== Issue 8: livelier UI, same simple layout ===== */
.btn{background-image:linear-gradient(135deg,var(--ultraberry),#9A5CF0);transition:transform .12s,box-shadow .12s}
.btn:active{transform:translateY(2px) scale(.98)}
.btn.ghost,.btn.mint,.btn.pink,.btn.danger,.btn.voice-speak,.btn.voice-mic{background-image:none}
.btn.mint{background:linear-gradient(135deg,#2DD4A7,#1FB48C)}
.btn.pink{background:linear-gradient(135deg,#FF6F4C,#F03E72)}
.set-card,.panel,.exam-card{transition:transform .15s,box-shadow .15s}
.set-card:active{transform:scale(.97)}
@media (hover:hover){ .set-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(27,37,64,.16)} }
nav.tabbar button.on .ico{filter:drop-shadow(0 0 8px rgba(44,62,112,.8));transform:scale(1.15)}
nav.tabbar button .ico{transition:transform .15s,filter .15s}
.pill{transition:transform .15s}
.pill:active{transform:scale(1.1)}

/* ===== guided tour ===== */
#tourOverlay{position:fixed;inset:0;background:rgba(15,29,56,.55);z-index:90;display:none;align-items:center;justify-content:center;padding:18px}
.tour-card{background:var(--card);border-radius:26px;padding:26px 22px;max-width:420px;width:100%;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);position:relative}
.tour-emoji{font-size:3rem;margin-bottom:6px;animation:mascotBounce .9s ease infinite alternate}
.tour-card h3{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:1.3rem;margin-bottom:8px}
.tour-card p{font-weight:700;font-size:.92rem;color:var(--ink-soft);line-height:1.55;min-height:110px}
.tour-dots{display:flex;gap:6px;justify-content:center;margin:12px 0}
.tdot{width:8px;height:8px;border-radius:50%;background:rgba(44,62,112,.25)}
.tdot.on{background:var(--ultraberry);transform:scale(1.3)}
.tour-btns{justify-content:space-between}
.tour-skip{background:none;border:none;font-weight:800;font-size:.78rem;color:var(--ink-soft);margin-top:10px;cursor:pointer;text-decoration:underline}

/* KS boards, ticks, review, pin, print */
.ks-board{background:var(--card);border-radius:14px;padding:10px 14px;margin-bottom:10px}
.ks-title{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:.95rem;margin-bottom:6px;color:var(--ultraberry)}
.ks-row{display:flex;justify-content:space-between;font-weight:700;font-size:.85rem;padding:3px 0}
.lesson-row.done{opacity:.92;background:rgba(45,212,167,.08)}
.done-chip{background:var(--minty);color:#fff;font-size:.62rem;font-weight:800;padding:2px 8px;border-radius:99px;vertical-align:middle}
.pin-display{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:2rem;letter-spacing:.35em;text-align:center;
  background:rgba(44,62,112,.08);border-radius:14px;padding:12px}
/* v7.10.0 — subtle full-page mascot watermark (Brockademy only; the class
   is only ever added to <body> when BRAND_KEY === 'brockademy', so this
   never appears for Brockademy). Sits on a fixed, negative-z-index layer
   behind all real content, so it can never push or overlap anything. */
body.brand-watermark::before{
  content:'';
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  /* v10.0.0 — the round Brockademy crest is now the standard watermark
     across the whole app (child, Parent HQ and Admin all set
     body.brand-watermark). Kept very low opacity: it should read as
     paper texture behind the content, never as something competing
     with it. */
  background-image:url('/brand/crest');
  background-repeat:no-repeat;background-position:center 40%;
  background-size:min(64vw,460px) min(64vw,460px);
  opacity:.045;
}
#reviewOverlay{position:fixed;inset:0;background:rgba(15,29,56,.55);z-index:85;display:none;align-items:center;justify-content:center;padding:16px}
#upgradeOverlay{position:fixed;inset:0;background:rgba(15,29,56,.55);z-index:90;display:none;align-items:center;justify-content:center;padding:16px}
.review-card{background:var(--card);border-radius:22px;padding:20px;max-width:520px;width:100%;max-height:85vh;overflow-y:auto;position:relative}
.review-card h3{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;margin-bottom:4px}
.review-score{font-weight:800;color:var(--minty);margin-bottom:10px}
.rv-item{border-bottom:1px dashed rgba(44,62,112,.2);padding:8px 0}
.rv-q{font-weight:800;font-size:.9rem}
.rv-a{font-weight:700;font-size:.88rem;color:var(--ultraberry)}
[data-theme="dark"] .rv-a{color:#D5C4FF}
#printArea{display:none}
.ws-check{width:20px;height:20px;accent-color:var(--ultraberry);margin-right:4px;flex-shrink:0}
@media print{
  @page{ margin:16mm 14mm; }
  html, body{height:auto !important;overflow:visible !important;background:#fff !important}
  /* hide the live app + overlays specifically (the :not(#printArea) form breaks
     Chromium's print path and blanked the page); show only the worksheet */
  #app, nav.tabbar, .calc-fab, .fb-overlay, #installBanner{display:none !important}
  #printArea{display:block !important;position:static !important;width:auto !important;visibility:visible !important;
    color:#111;font-family:Georgia,'Times New Roman',serif;background:#fff;padding:0;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printArea .pw-break{break-before:page;page-break-before:always}
  /* branded header band — must never be stranded alone at a page's bottom,
     separated from the fields/questions that follow it (v7.4.1 fix: this is
     what was visually "blocking" the last question on the next page). */
  #printArea .pw-header{display:flex;align-items:center;justify-content:space-between;
    border:2px solid #1B2540;border-radius:10px;padding:12px 16px;margin-bottom:16px;
    background:linear-gradient(90deg,#FFF3D9,#fff);-webkit-print-color-adjust:exact;print-color-adjust:exact;
    break-inside:avoid;page-break-inside:avoid;break-after:avoid;page-break-after:avoid}
  #printArea .pw-brand{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:20px;font-weight:800;color:#1B2540;letter-spacing:.3px}
  #printArea .pw-brand .zap{color:#1B2540}
  #printArea .pw-meta{text-align:right;font-size:11px;color:#444;line-height:1.5}
  #printArea .pw-fields{display:flex;gap:24px;font-size:12px;margin:4px 0 16px;color:#333;
    break-inside:avoid;page-break-inside:avoid}
  #printArea .pw-fields span{border-bottom:1px solid #999;min-width:120px;display:inline-block}
  /* section banners */
  #printArea .pw-band{background:#1B2540;color:#fff;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
    font-size:15px;font-weight:800;padding:7px 14px;border-radius:8px;margin:20px 0 12px;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    break-inside:avoid;page-break-inside:avoid;break-after:avoid;page-break-after:avoid}
  #printArea h3{font-size:13px;color:#1B2540;margin:16px 0 8px;border-bottom:1px dashed #bbb;padding-bottom:3px;text-transform:uppercase;letter-spacing:.5px;
    break-inside:avoid;page-break-inside:avoid;break-after:avoid;page-break-after:avoid}
  #printArea .pw-note{margin:0 0 12px;font-size:13px;line-height:1.6;page-break-inside:avoid}
  /* v7.4.1: a question and its answer-space/answer are ONE unbreakable unit —
     this is the actual fix for the last-question/logo collision. */
  #printArea .pw-qwrap{break-inside:avoid;page-break-inside:avoid}
  #printArea .pw-q{font-size:13px;line-height:1.6;margin:0 0 4px}
  /* v8.28.0 — the picture that goes with a question (shape/diagram/scene),
     printed at a fixed, modest size so a page of ten questions doesn't turn
     into ten full-page pictures; centred so it reads the same as the
     on-screen quiz card. -webkit-print-color-adjust keeps the shape fills
     from printing as flat grey on browsers that strip colour by default. */
  #printArea .pw-visual{display:flex;justify-content:center;margin:4px 0 6px;
    break-inside:avoid;page-break-inside:avoid}
  #printArea .pw-visual svg{width:100px;height:auto;max-height:100px;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printArea .pw-work{border-bottom:1px dotted #bbb;height:46px;margin:0 0 14px}
  #printArea .pw-ans{font-size:12.5px;line-height:1.7;margin:0 0 5px}
  #printArea .pw-footer{text-align:center;font-size:9px;color:#999;
    font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;margin-top:20px;padding-top:8px;border-top:1px solid #eee}
  /* watermark: small, faint, corner mark that never covers text */
  /* subtle corner brand mark — inline, never forces a page break */
  #printArea .print-watermark{display:none}

  /* v7.10.0 — NEW full-page mascot watermark (Brockademy only), replacing
     the disabled corner mark above with a different mechanism on purpose:
     this is a fixed, non-flow, non-interactive background layer, so unlike
     the old corner mark it can never overlap or push printed question
     content (the bug that got the rule above turned off in the first
     place). Toggled via JS only when BRAND_KEY === 'brockademy'. */
  #printArea.has-watermark::before{
    content:'';
    position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:url('/mascot.svg');
    background-repeat:no-repeat;background-position:center;
    background-size:340px 340px;
    opacity:.06;
  }
}

.cf-stat{background:rgba(45,212,167,.1);border-radius:10px;padding:10px 12px;font-weight:700;font-size:.85rem;line-height:1.5}

/* ===== child card (Parent HQ) ===== */
.cc-head{display:flex;align-items:center;gap:12px}
.cc-avatar{width:52px;height:52px;border-radius:50%;background:rgba(44,62,112,.12);display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex-shrink:0;border:2px solid rgba(44,62,112,.25);overflow:hidden}
.cc-avatar:active{transform:scale(.95)}
.cc-headinfo{flex:1;min-width:0}
.cc-headinfo .sub{display:block;font-size:.78rem}
.cc-tools{margin-top:12px}
.cc-tools summary{font-weight:800;font-size:.82rem;color:var(--ink-soft);cursor:pointer;padding:4px 0}
.two-col{display:flex;gap:10px}
.two-col .field{flex:1}

/* ===== collapsible mastery ===== */
.mastery-group{margin-bottom:6px}
.mastery-group summary{cursor:pointer;list-style:none}
.mastery-group summary::-webkit-details-marker{display:none}
.mastery-group .mastery-term{display:flex;justify-content:space-between;font-weight:800;font-size:.85rem;
  padding:8px 10px;background:rgba(44,62,112,.06);border-radius:10px;margin-bottom:4px}
.mastery-group[open] summary .mastery-term{background:rgba(44,62,112,.12)}

/* ===== avatar picker ===== */
#avatarOverlay{position:fixed;inset:0;background:rgba(15,29,56,.55);z-index:95;display:none;align-items:center;justify-content:center;padding:18px}
.avatar-card{background:var(--card);border-radius:22px;padding:22px;max-width:400px;width:100%;position:relative}
.avatar-card h3{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;margin-bottom:12px}
.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.av-opt{font-size:1.8rem;background:rgba(44,62,112,.08);border:2px solid transparent;border-radius:14px;
  padding:8px 0;cursor:pointer;transition:transform .12s}
.av-opt:hover{border-color:var(--ultraberry)}
.av-opt:active{transform:scale(1.2)}

/* ===== student profile ===== */
.profile-hero{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:16px}
.profile-avatar{width:88px;height:88px;border-radius:50%;background:rgba(44,62,112,.12);display:flex;
  align-items:center;justify-content:center;cursor:pointer;border:3px solid rgba(44,62,112,.3);overflow:hidden}
.profile-avatar:active{transform:scale(.96)}
#profileBtn img{vertical-align:middle}

/* ============================================================
   LIVING ICONS — hover-reactive emoji animations (v4.3)
   Wrap any emoji in .fx-icon; add a data-fx for a specific
   personality. Falls back to a friendly wiggle.
   ============================================================ */
.fx-icon{display:inline-block;transition:transform .2s cubic-bezier(.3,1.5,.5,1);transform-origin:center bottom;cursor:default}
.fx-icon:hover{animation-duration:.7s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}

/* default: happy wiggle */
.fx-icon:hover{animation-name:fxWiggle}
@keyframes fxWiggle{0%,100%{transform:rotate(-8deg) scale(1.15)}50%{transform:rotate(8deg) scale(1.15)}}

/* lightning — electric zap + flicker */
.fx-icon[data-fx="quill"]:hover{animation-name:fxQuill}
@keyframes fxQuill{
  0%,100%{transform:scale(1.2) rotate(-6deg);filter:drop-shadow(0 0 0 #FFD84D)}
  20%{transform:scale(1.35) rotate(4deg);filter:drop-shadow(0 0 10px #FFD84D)}
  40%{transform:scale(1.1) rotate(-4deg);opacity:.6}
  60%{transform:scale(1.4) rotate(6deg);filter:drop-shadow(0 0 14px #FFF06A)}
  80%{opacity:1}
}
/* croissant / food — nibble bounce */
.fx-icon[data-fx="eat"]:hover{animation-name:fxEat}
@keyframes fxEat{0%,100%{transform:scale(1.2) rotate(0)}25%{transform:scale(1.05) rotate(-12deg)}50%{transform:scale(1.28) rotate(6deg)}75%{transform:scale(1.1) rotate(-6deg)}}
/* abacus / maths — tilt & count side to side */
.fx-icon[data-fx="count"]:hover{animation-name:fxCount}
@keyframes fxCount{0%,100%{transform:translateX(0) rotate(0) scale(1.15)}25%{transform:translateX(-3px) rotate(-6deg) scale(1.15)}75%{transform:translateX(3px) rotate(6deg) scale(1.15)}}
/* dancer — salsa sway */
.fx-icon[data-fx="dance"]:hover{animation-name:fxDance}
@keyframes fxDance{0%,100%{transform:rotate(-14deg) translateY(0) scale(1.15)}50%{transform:rotate(14deg) translateY(-4px) scale(1.2)}}
/* science — bubbling shake */
.fx-icon[data-fx="bubble"]:hover{animation-name:fxBubble}
@keyframes fxBubble{0%,100%{transform:translateY(0) scale(1.15)}20%{transform:translateY(-2px) rotate(-4deg) scale(1.18)}40%{transform:translateY(1px) rotate(4deg)}60%{transform:translateY(-3px) rotate(-2deg) scale(1.2)}80%{transform:translateY(0) rotate(2deg)}}
/* books / reading — flip open */
.fx-icon[data-fx="read"]:hover{animation-name:fxRead}
@keyframes fxRead{0%,100%{transform:rotateY(0) scale(1.15)}50%{transform:rotateY(35deg) scale(1.2)}}
/* badge — proud shine + bob */
.fx-icon[data-fx="shine"]:hover{animation-name:fxShine}
@keyframes fxShine{0%,100%{transform:translateY(0) scale(1.15);filter:drop-shadow(0 0 0 gold)}50%{transform:translateY(-5px) scale(1.25);filter:drop-shadow(0 0 10px gold)}}
/* fire / streak — flicker up */
.fx-icon[data-fx="flame"]:hover{animation-name:fxFlame}
@keyframes fxFlame{0%,100%{transform:scaleY(1.15) scaleX(1.1) translateY(0)}30%{transform:scaleY(1.3) scaleX(1) translateY(-3px) rotate(-3deg)}60%{transform:scaleY(1.1) scaleX(1.2) translateY(1px) rotate(3deg)}}
/* brain — think pulse */
.fx-icon[data-fx="think"]:hover{animation-name:fxThink}
@keyframes fxThink{0%,100%{transform:scale(1.15)}50%{transform:scale(1.3) rotate(5deg)}}
/* creatures — hop */
.fx-icon[data-fx="hop"]:hover{animation-name:fxHop}
@keyframes fxHop{0%,100%{transform:translateY(0) scale(1.15)}40%{transform:translateY(-7px) scale(1.2) rotate(-5deg)}70%{transform:translateY(0) scale(1.1)}}
/* rocket — blast off */
.fx-icon[data-fx="launch"]:hover{animation-name:fxLaunch}
@keyframes fxLaunch{0%{transform:translateY(0) rotate(-45deg) scale(1.15)}50%{transform:translateY(-6px) rotate(-45deg) scale(1.25)}100%{transform:translateY(0) rotate(-45deg) scale(1.15)}}
/* home — gentle bounce */
.fx-icon[data-fx="bounce"]:hover{animation-name:fxBounce}
@keyframes fxBounce{0%,100%{transform:translateY(0) scale(1.15)}50%{transform:translateY(-5px) scale(1.2)}}
/* pencil — write scribble */
.fx-icon[data-fx="write"]:hover{animation-name:fxWrite}
@keyframes fxWrite{0%,100%{transform:rotate(-20deg) translateX(0) scale(1.15)}25%{transform:rotate(-25deg) translateX(-2px)}50%{transform:rotate(-15deg) translateX(2px) scale(1.2)}75%{transform:rotate(-22deg) translateX(-1px)}}
/* globe — spin */
.fx-icon[data-fx="spin"]:hover{animation-name:fxSpin;animation-timing-function:linear}
@keyframes fxSpin{from{transform:rotate(0) scale(1.15)}to{transform:rotate(360deg) scale(1.15)}}

/* nav-bar icons also come alive on hover, and the ACTIVE one gently idles */
nav.tabbar button:hover .ico{animation:fxWiggle .7s ease-in-out infinite}
nav.tabbar button.on .ico{animation:fxIdleBob 2.2s ease-in-out infinite}
@keyframes fxIdleBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* logo quill idles with a subtle charge, zaps on hover */
.logo .zap{animation:fxIdleQuill 3s ease-in-out infinite}
@keyframes fxIdleQuill{0%,92%,100%{transform:rotate(-8deg)}94%{transform:rotate(-8deg) scale(1.15);filter:drop-shadow(0 0 6px #FFD84D)}96%{transform:rotate(-4deg)}}
.logo:hover .zap{animation:fxQuill .6s ease-in-out infinite}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .fx-icon:hover, nav.tabbar button:hover .ico, nav.tabbar button.on .ico, .logo .zap{animation:none !important}
}

/* ===== maths rendering (KaTeX) sizing ===== */
.katex{font-size:1.05em}
#qzTerm .katex{font-size:1.15em}
.opt .katex{font-size:1em}
.face .katex{font-size:1.05em}
[data-theme="dark"] .katex{color:#FFF8EC}

/* ===== SVG diagrams ===== */
.dg-wrap{display:flex;justify-content:center;margin:6px 0 14px}
/* v8.15.0 — visual questions (has_visual/visual_type/visual_payload) */
.q-visual{display:flex;justify-content:center;align-items:center;margin:6px 0 14px}
.q-visual-svg svg{width:min(220px,70%);height:auto;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.q-visual-html{background:var(--card,#fff);border-radius:16px;padding:6px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
/* v8.17.0 — svg_geometry: plain white/gridded frame, no shadow, tighter
   fit than the playful icon card — precision over decoration. */
.q-visual-geometry svg{width:min(240px,78%);height:auto;background:#fff;border:1px solid #E3E3E3;border-radius:8px}
[data-theme="dark"] .q-visual-svg svg{box-shadow:0 2px 10px rgba(0,0,0,.35)}
[data-theme="dark"] .q-visual-html{background:var(--card,#1B2540);box-shadow:0 2px 10px rgba(0,0,0,.35)}
[data-theme="dark"] .q-visual-geometry svg{border-color:#3A3A3A}
.diagram{width:min(280px,80%);height:auto}
.dg-shape{fill:none;stroke:var(--ink,#1B2540);stroke-width:2.5}
.dg-rect-bg{fill:none;stroke:var(--ink,#1B2540);stroke-width:2}
.dg-fill{fill:#FFB84D;stroke:var(--ink,#1B2540);stroke-width:2.5}
.dg-line{stroke:var(--ultraberry,#1B2540);stroke-width:2;stroke-dasharray:5 3}
.dg-dim{stroke:#E85D9B;stroke-width:1.75}
.dg-arrowhead{fill:#E85D9B}
.dg-right-angle{fill:none;stroke:var(--ultraberry,#1B2540);stroke-width:1.5}
.dg-dot{fill:var(--ink,#1B2540)}
.dg-lbl{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:16px;fill:var(--ink,#1B2540);text-anchor:middle;dominant-baseline:middle}
[data-theme="dark"] .dg-shape,[data-theme="dark"] .dg-rect-bg{stroke:#E8E0FF}
[data-theme="dark"] .dg-lbl{fill:#E8E0FF}
[data-theme="dark"] .dg-fill{stroke:#E8E0FF}
[data-theme="dark"] .dg-dim{stroke:#FF9ECB}
[data-theme="dark"] .dg-arrowhead{fill:#FF9ECB}
[data-theme="dark"] .dg-dot{fill:#E8E0FF}
.dg-q{text-align:center}

/* ===== language voice controls ===== */
.lang-controls{flex-direction:column;gap:8px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.25);border-radius:14px;padding:12px;margin:8px 0}
.lc-line{display:flex;align-items:center;gap:10px}
.lc-lbl{font-weight:800;font-size:.82rem;min-width:74px;color:var(--ink-soft)}
.lc-line select{flex:1;padding:7px 10px;border-radius:10px;border:1.5px solid rgba(44,62,112,.25);font-size:.85rem;font-weight:700;background:var(--card);color:var(--ink)}
.lc-line input[type=range]{flex:1;accent-color:var(--sky,#38BDF8)}
#lcRateVal{font-weight:800;font-size:.8rem;min-width:42px;text-align:right;color:var(--sky,#38BDF8)}
.lc-hint{font-size:.74rem;color:var(--ink-soft);line-height:1.4;opacity:.85}

/* ===== What's New update cards ===== */
.update-card{background:var(--card);border:1.5px solid rgba(44,62,112,.12);border-radius:16px;padding:16px;margin-bottom:12px}
.update-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:8px}
.update-tag{font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:99px;white-space:nowrap;
  background:color-mix(in srgb, var(--tagc,#1B2540) 18%, var(--card));
  color:color-mix(in srgb, var(--tagc,#1B2540) 55%, var(--ink))}
.update-ver{font-size:.72rem;font-weight:700;color:var(--ink-soft);opacity:.7}
.update-title{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.05rem;margin-bottom:8px;color:var(--ink)}
.update-points{margin:0;padding-left:18px}
.update-points li{font-size:.85rem;line-height:1.5;color:var(--ink-soft);margin-bottom:5px}

/* =====  perfect score takeover ===== */
.perfect-fx{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(27,37,64,.86) 0%,rgba(10,8,20,.96) 100%);
  opacity:0;transition:opacity .35s ease}
.perfect-fx.on{opacity:1}
#pfCanvas{position:absolute;inset:0;pointer-events:none}
.pf-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.pf-rings span{position:absolute;border:3px solid rgba(255,216,77,.55);border-radius:50%;width:120px;height:120px;
  animation:pfRing 2.4s cubic-bezier(.2,.7,.3,1) infinite}
.pf-rings span:nth-child(2){animation-delay:.7s;border-color:rgba(255,111,76,.5)}
.pf-rings span:nth-child(3){animation-delay:1.4s;border-color:rgba(45,212,167,.5)}
@keyframes pfRing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(6);opacity:0}}
.pf-core{position:relative;text-align:center;color:#fff;padding:20px;max-width:420px}
.pf-badge{font-size:5.2rem;line-height:1;filter:drop-shadow(0 0 28px rgba(255,216,77,.75));
  animation:pfDrop .75s cubic-bezier(.2,1.6,.4,1) both, pfFloat 2.6s 0.8s ease-in-out infinite}
@keyframes pfDrop{0%{transform:translateY(-140px) scale(.3) rotate(-25deg);opacity:0}
  70%{transform:translateY(10px) scale(1.15) rotate(4deg);opacity:1}
  100%{transform:translateY(0) scale(1) rotate(0)}}
@keyframes pfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.pf-100{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:4.4rem;font-weight:800;line-height:1;margin:2px 0 -4px;
  background:linear-gradient(90deg,#FFD84D,#FF8A3D,#FF6F4C,#FFD84D);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:pfShine 2.4s linear infinite,pfPop .5s .35s cubic-bezier(.2,1.8,.4,1) both}
@keyframes pfShine{to{background-position:300% 0}}
@keyframes pfPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.pf-title{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:.06em;
  color:#FFD84D;text-shadow:0 2px 18px rgba(255,216,77,.5);animation:pfPop .5s .5s cubic-bezier(.2,1.8,.4,1) both}
.pf-sub{font-size:.9rem;font-weight:700;color:rgba(255,255,255,.72);margin-top:8px;line-height:1.5;
  animation:pfPop .5s .65s ease both}
.pf-sub i{color:rgba(255,255,255,.5);font-size:.82rem}
.pf-btn{margin-top:20px;background:linear-gradient(135deg,#FFD84D,#FF8A3D);color:#1B2540;border:none;
  animation:pfPop .5s .8s cubic-bezier(.2,1.8,.4,1) both}
@media (prefers-reduced-motion: reduce){
  .pf-badge,.pf-100,.pf-title,.pf-sub,.pf-btn,.pf-rings span{animation:none!important}
  .pf-100{-webkit-text-fill-color:#FFD84D}
}

/* ===== v7.7.0: Brockademy mascot level-up celebration =====
   Only ever created (by mascotLevelUpFx in app.js) when BRAND_KEY is
   'brockademy' — this class simply never gets used on Brockademy. */
.levelup-mascot-fx{position:fixed;inset:0;z-index:125;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(27,37,64,.86) 0%,rgba(10,12,20,.96) 100%);
  opacity:0;transition:opacity .35s ease}
.levelup-mascot-fx.on{opacity:1}
.levelup-mascot-fx svg{width:220px;height:220px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}
.levelup-mascot-fx #mascotBody{transform-origin:256px 290px}
.levelup-mascot-fx #mascotBody.lum-bounce{animation:lumBounceIn .7s cubic-bezier(.2,1.7,.4,1) both}
@keyframes lumBounceIn{0%{transform:scale(.3) translateY(60px);opacity:0}
  60%{transform:scale(1.12) translateY(-10px);opacity:1}100%{transform:scale(1) translateY(0)}}
/* gentler entrance for the welcome moment — a friendly sway instead of a bounce */
.levelup-mascot-fx #mascotBody.lum-wave{animation:lumWaveIn .8s cubic-bezier(.2,1.4,.4,1) both,lumSway 1.8s .8s ease-in-out infinite}
@keyframes lumWaveIn{0%{transform:scale(.5) rotate(-10deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes lumSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
/* v8.1.0 fix — the cap TOSS now comes back and LANDS on the head, instead
   of flying away and vanishing (which left the mascot hatless for the rest
   of the celebration — the scholar hat is the key design element and must
   never be missing). */
.levelup-mascot-fx #mascotCap.lum-cap-fly{animation:lumCapFly 2.1s cubic-bezier(.45,.4,.5,1) both}
@keyframes lumCapFly{0%{transform:translateY(0) rotate(-8deg) scale(1)}
  45%{transform:translateY(-190px) rotate(200deg) scale(1.15);opacity:1}
  70%{transform:translateY(-60px) rotate(320deg) scale(1.05)}
  88%{transform:translateY(6px) rotate(-12deg) scale(1)}
  100%{transform:translateY(0) rotate(-8deg) scale(1);opacity:1}}
.lum-caption{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.5rem;color:#fff;margin-top:6px;
  text-shadow:0 2px 18px rgba(245,166,35,.6);animation:pfPop .5s .5s cubic-bezier(.2,1.8,.4,1) both}
@media (prefers-reduced-motion: reduce){
  .levelup-mascot-fx #mascotBody.lum-bounce,.levelup-mascot-fx #mascotBody.lum-wave,
  .levelup-mascot-fx #mascotCap.lum-cap-fly,.lum-caption{animation:none!important}
}

/* ===== lesson tile: study tick + attempt chips ===== */
.lesson-row.studied-row{background:rgba(45,212,167,.06)}
.btn.small.studied{color:var(--minty,#2DD4A7);font-weight:800}
.retake-chip{font-size:.66rem;font-weight:800;background:rgba(44,62,112,.12);color:var(--ultraberry,#1B2540);
  padding:2px 7px;border-radius:99px;margin-left:4px;white-space:nowrap}

/* =====  floating scientific calculator ===== */
.calc-fab{position:fixed;right:16px;bottom:92px;z-index:70;width:54px;height:54px;border-radius:50%;
  border:none;font-size:1.5rem;cursor:pointer;background:linear-gradient(135deg,#1B2540,#5B8DEF);
  color:#fff;box-shadow:0 6px 20px rgba(44,62,112,.45);transition:transform .15s,opacity .2s}
.calc-fab:active{transform:scale(.92)}
.calc-fab.hidden{opacity:0;pointer-events:none}
.calc-fab.locked{background:linear-gradient(135deg,#9aa0b4,#7b8194);box-shadow:none;opacity:.55;cursor:not-allowed}
.calc-fab.locked::after{content:"";position:absolute;inset:0;display:grid;place-items:center;font-size:1.6rem}
.calc-panel{position:fixed;right:16px;bottom:158px;z-index:90;width:272px;flex-direction:column;
  background:var(--card);border:1.5px solid rgba(44,62,112,.28);border-radius:18px;
  box-shadow:0 18px 48px rgba(23,18,37,.32);overflow:hidden;user-select:none}
.calc-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;cursor:grab;
  background:linear-gradient(135deg,#1B2540,#5B8DEF);color:#fff}
.calc-head:active{cursor:grabbing}
.calc-title{font-weight:800;font-size:.85rem}
.calc-x{background:rgba(255,255,255,.2);border:none;color:#fff;width:24px;height:24px;border-radius:8px;cursor:pointer;font-weight:800}
.calc-screen{padding:10px 12px;background:rgba(44,62,112,.06);text-align:right;min-height:56px}
.calc-expr{font-size:.78rem;color:var(--ink-soft);min-height:16px;word-break:break-all;opacity:.8}
.calc-out{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:1.6rem;font-weight:800;color:var(--ink);word-break:break-all}
.calc-mode{display:flex;gap:6px;padding:8px 10px 0}
.calc-mini{flex:1;padding:6px 0;border-radius:9px;border:1.5px solid rgba(44,62,112,.2);
  background:transparent;color:var(--ink-soft);font-weight:800;font-size:.75rem;cursor:pointer}
.calc-mini.on{background:rgba(44,62,112,.15);color:var(--ultraberry);border-color:var(--ultraberry)}
.calc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:10px}
.ck{padding:11px 0;border-radius:11px;border:none;background:rgba(27,37,64,.05);color:var(--ink);
  font-weight:800;font-size:.9rem;cursor:pointer;transition:transform .1s}
.ck:active{transform:scale(.92)}
.ck.fn{background:rgba(91,141,239,.14);color:#3F6FD8;font-size:.78rem}
.ck.op{background:rgba(44,62,112,.14);color:var(--ultraberry)}
.ck.warn{background:rgba(255,111,76,.16);color:#E8447A}
.ck.eq{background:linear-gradient(135deg,#2DD4A7,#38BDF8);color:#fff}
[data-theme="dark"] .ck{background:rgba(255,255,255,.07);color:#FFF8EC}
@media(max-width:420px){.calc-panel{width:calc(100vw - 24px);right:12px}}

/* ===== inline Ask Brock (stays on the card) ===== */
.ask-inline{margin-top:10px;border-top:1px dashed rgba(44,62,112,.25);padding-top:10px}
.ask-log{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.ask-bubble{padding:8px 11px;border-radius:12px;font-size:.82rem;line-height:1.45;max-width:92%;white-space:pre-wrap}
.ask-bubble.user{align-self:flex-end;background:var(--ultraberry);color:#fff;border-bottom-right-radius:4px}
.ask-bubble.bot{align-self:flex-start;background:rgba(44,62,112,.1);color:var(--ink);border-bottom-left-radius:4px}
.ask-row{display:flex;gap:6px}
.ask-row input{flex:1;padding:9px 12px;border-radius:11px;border:1.5px solid rgba(44,62,112,.25);
  font-size:.85rem;background:var(--card);color:var(--ink)}

/* =====  battlefield podium ===== */
.podium.battlefield{position:relative;padding:52px 4px 0;align-items:end;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,216,77,.14),transparent 68%)}
.podium-spot .p-crown{font-size:1.7rem;line-height:1;margin-bottom:2px;filter:grayscale(.35) opacity(.75)}
.podium-spot.p1 .p-crown{font-size:3rem;filter:none;
  animation:crownFloat 2.6s ease-in-out infinite;text-shadow:0 0 26px rgba(255,216,77,.85)}
.p-crown.crown-silver{filter:grayscale(1) brightness(1.5) opacity(.85)}
.p-crown.crown-bronze{filter:sepia(1) saturate(2.4) hue-rotate(-18deg) opacity(.85)}
@keyframes crownFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.podium-spot.champ .p-name{color:#D4A017;font-size:1rem}
.podium-spot .p-quills{font-size:.7rem;font-weight:800;color:var(--sky,#38BDF8);margin-bottom:5px}
.podium-spot .p-block{position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:6px}
.p-title{font-size:.56rem;font-weight:900;letter-spacing:.1em;color:rgba(27,37,64,.4)}
.podium-spot.p1 .p-title{color:#8A6508}

/* ===== league list: badges + quills + sorting ===== */
.league-head{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.lh-label{font-size:.72rem;font-weight:800;color:var(--ink-soft);opacity:.7;margin-right:2px}
.lh-btn{padding:5px 11px;border-radius:99px;border:1.5px solid rgba(44,62,112,.22);background:transparent;
  color:var(--ink-soft);font-weight:800;font-size:.74rem;cursor:pointer}
.lh-btn.on{background:rgba(44,62,112,.13);color:var(--ultraberry);border-color:var(--ultraberry)}
.l-scores{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.l-badge,.l-quills{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:5px;
  font-weight:800;font-size:.92rem;line-height:1.1;
  border:2px solid rgba(27,37,64,.1);background:#fff;border-radius:12px;padding:5px 10px;min-width:86px;text-align:center}
.l-badge{border-color:color-mix(in srgb, var(--ultraberry,#1B2540) 35%, transparent);background:color-mix(in srgb, var(--ultraberry,#1B2540) 6%, #fff)}
.l-quills{border-color:color-mix(in srgb, #38BDF8 45%, transparent);background:color-mix(in srgb, #38BDF8 8%, #fff)}
.l-badge{color:var(--ultraberry)}
.l-quills{color:var(--sky,#38BDF8)}
.l-badge span,.l-quills span{font-size:.56rem;font-weight:800;opacity:.6;letter-spacing:.05em;text-transform:uppercase}
.league-row.king{background:linear-gradient(90deg,rgba(255,216,77,.14),transparent);
  border-left:3px solid #FFD84D}

/* ===== bigger, legible maths ===== */
.katex{font-size:1.16em}
#qzTerm .katex{font-size:1.28em}
.opt .katex{font-size:1.12em}
.calc-badge{font-size:.66rem;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:99px;
  background:rgba(45,212,167,.14);color:#0F9C79;white-space:nowrap}
.calc-badge:empty{display:none}
.calc-badge.locked{background:rgba(255,111,76,.14);color:#D63C6E}

/* ===== header icon labels (v5.4) ===== */
.stat-pills .labelled{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;line-height:1;border:none;cursor:pointer}
/* the pill's icon + number sit on one row, the label beneath */
.pill.labelled{display:grid;grid-template-areas:'ico num' 'lbl lbl';grid-template-columns:auto auto;
  column-gap:5px;row-gap:2px;align-items:center;justify-items:center}
.pill.labelled .ico{grid-area:ico;margin:0}
.pill.labelled .num{grid-area:num;font-weight:800;font-size:.92rem;line-height:1}
.pill.labelled .pill-label{grid-area:lbl}
.pill.labelled{background:var(--card);border-radius:14px;padding:5px 10px}
.pill-label,.btn-label{font-size:.56rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.75}
.pill.labelled .num{font-weight:800}
.theme-btn.labelled{padding:4px 7px}
.stat-pills .labelled:active{transform:scale(.94)}
@media(max-width:520px){ .pill-label,.btn-label{font-size:.5rem} .theme-btn.labelled{padding:3px 5px} }
/* v6.1 fix: nine header buttons never fit a 390px phone. Give the pill row
   its own full-width line and let it scroll sideways instead of spilling
   off-screen (which pushed the whole page horizontally). */
@media(max-width:560px){
  header{flex-wrap:wrap}
  .logo{flex:1 1 auto}
  .stat-pills{flex:1 0 100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;justify-content:flex-start}
  .stat-pills::-webkit-scrollbar{display:none}
  .stat-pills > *{flex:0 0 auto}
}
html,body{max-width:100%;overflow-x:hidden}

/* ===== v8.2.0 floating AI Help (Parent HQ, bottom-left) ===== */
.help-fab{position:fixed;left:18px;bottom:18px;z-index:120;display:flex;align-items:center;gap:8px;
  border:none;border-radius:999px;padding:12px 18px;font-weight:800;font-size:1rem;cursor:pointer;
  background:linear-gradient(135deg,#1B2540,#5B8DEF);color:#fff;box-shadow:0 8px 24px rgba(44,62,112,.45);
  transition:transform .15s}
.help-fab:hover{transform:translateY(-2px)}
.help-fab-txt{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif}
.help-widget{position:fixed;left:18px;bottom:80px;z-index:121;width:min(370px,calc(100vw - 36px));
  max-height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;
  background:var(--card,#fff);color:var(--ink,#1B2540);border-radius:18px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.28);border:1px solid rgba(27,37,64,.12)}
.help-wid-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
  background:linear-gradient(135deg,#1B2540,#5B8DEF);color:#fff;font-weight:800;font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif}
.help-wid-x{background:rgba(255,255,255,.2);border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-weight:800}
.help-wid-intro{padding:10px 14px;font-size:.82rem;color:var(--ink-soft)}
.help-widget .chip-row{padding:0 14px 8px;display:flex;flex-wrap:wrap;gap:6px}
.help-wid-thread{flex:1;overflow-y:auto;padding:6px 14px;min-height:80px}
.help-msg{margin:6px 0;display:flex}
.help-msg .bubble{max-width:85%;border-radius:12px;padding:8px 12px;font-size:.9rem;line-height:1.35}
.help-msg.you{justify-content:flex-end}
.help-msg.you .bubble{background:var(--ultraberry,#1B2540);color:#fff}
.help-msg.bot .bubble{background:#FFF3D6;color:#4A3B10}
.help-msg.human .bubble{background:#E9FBF3;color:#0F4A34}
.help-wid-input{display:flex;gap:8px;align-items:flex-end;padding:10px 14px;border-top:1px solid rgba(27,37,64,.1)}
.help-wid-input textarea{flex:1;resize:none;font-family:inherit;border-radius:12px;
  border:1.5px solid rgba(27,37,64,.18);padding:9px 12px;font-size:.92rem;max-height:120px;
  background:var(--card,#fff);color:var(--ink,#1B2540)}
.help-widget .form-err{padding:0 14px 10px}
/* dark mode: everything above must stay readable */
[data-theme="dark"] .help-widget{background:#211A38;color:#FFF8EC;border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .help-wid-intro{color:#B9AFD6}
[data-theme="dark"] .help-msg.bot .bubble{background:#3A3168;color:#FFF8EC}
[data-theme="dark"] .help-msg.human .bubble{background:#153B31;color:#C7F5E4}
[data-theme="dark"] .help-wid-input{border-top-color:rgba(255,255,255,.12)}
[data-theme="dark"] .help-wid-input textarea{background:#2A2247;color:#FFF8EC;border-color:rgba(255,255,255,.18)}
@media (max-width:420px){.help-fab-txt{display:none}.help-fab{padding:14px}}

/* ===== child name leads the level banner ===== */
/* v8.0.2 — name, avatar AND age/year/KS now share one row: avatar first,
   name takes the remaining space (ellipsizing rather than wrapping onto
   the meta pill), and the meta pill is pushed to the far right via
   flex:0 0 auto so it always lines up with the name instead of sitting
   on its own line underneath. */
.hero-name-row{display:flex;align-items:center;gap:10px;margin-bottom:4px}
/* v8.2.0 — a small, faded, ALIVE mascot sitting in the gap between the
   child's name and their age/year pill: it breathes and blinks so the card
   feels alive, without competing with the big centred watermark behind. */
.hero-live-mascot{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  min-width:34px;opacity:.42;pointer-events:none}
.hero-live-mascot svg,.hero-live-mascot img{width:44px;height:44px;display:block;
  animation:heroBreathe 3.4s ease-in-out infinite}
/* the eyes blink on their own timer for a "living" feel (fill-box origin so
   the scaleY collapses the pupil in place, not toward the SVG's 0,0) */
.hero-live-mascot #mascotBody circle[cx="193"][cy="280"],
.hero-live-mascot #mascotBody circle[cx="319"][cy="280"]{
  transform-box:fill-box;transform-origin:center;animation:heroBlink 4.6s steps(1,end) infinite}
@keyframes heroBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes heroBlink{0%,90%,100%{transform:scaleY(1)}93%,97%{transform:scaleY(.12)}}
@media (max-width:380px){.hero-live-mascot{width:34px;height:34px}}
@media (prefers-reduced-motion: reduce){
  .hero-live-mascot,.hero-live-mascot #mascotBody,
  .hero-live-mascot #mascotBody circle{animation:none!important}
}
/* v8.2.0 — subject-mastery bars */
.sm-row{margin:10px 0}
.sm-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.95rem}
.sm-pct{font-weight:800;color:var(--ultraberry)}
.sm-bar{height:12px;background:rgba(44,62,112,.14);border-radius:999px;overflow:hidden;margin:4px 0 2px}
.sm-fill{height:100%;background:linear-gradient(90deg,var(--minty,#2DD4A7),var(--ultraberry,#1B2540));
  border-radius:999px;transition:width .7s cubic-bezier(.2,.9,.3,1.1)}
.sm-meta{font-size:.72rem;color:var(--ink-soft);font-weight:700}
[data-theme="dark"] .sm-bar{background:rgba(255,255,255,.14)}
[data-theme="dark"] .sm-pct{color:#8FE3C8}
/* v8.0.1 — this is the CHILD'S own avatar (their uploaded photo, or their
   picked emoji as a fallback) sitting right before their name — NOT the
   mascot. The mascot lives only as the big faded watermark badge behind it. */
.hero-logo{width:40px;height:40px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:rgba(255,255,255,.22);position:relative;z-index:1}
.hero-logo img{width:100%;height:100%;object-fit:cover;display:block}
/* v8.0.2 fix — this card always sits on the level-banner's dark gradient,
   never a plain page background, so its text must ALWAYS be light,
   regardless of the app's light/dark theme toggle. Previously this used
   var(--ink), which is a dark navy in LIGHT mode — nearly invisible on a
   gradient that starts equally dark navy (only readable at all here because
   large bold headline text survives marginal contrast far better than small
   text does — see .hero-meta below, which had the exact same bug and was
   genuinely unreadable). Hardcoded white removes the theme dependency
   entirely, matching the fix already proven correct for .lvl-name below. */
.hero-name{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:2.4rem;line-height:1.05;
  color:#fff;margin-bottom:0;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v8.0.2 fix — was var(--ink) (dark navy in light mode) on this same dark
   gradient card: nearly unreadable. Now hardcoded white, bigger, bolder,
   and styled as a clear pill badge (not plain text) so age/Year/Key Stage
   read as one unmistakable "who this child is" chip, right next to their
   name instead of dim text on the line below it. */
.hero-meta{flex:0 0 auto;margin-left:auto;font-size:1.1rem;font-weight:800;color:#fff;
  background:rgba(255,255,255,.22);padding:7px 14px;border-radius:999px;white-space:nowrap;
  border:1.5px solid rgba(255,255,255,.35)}
@media (max-width:380px){.hero-name{font-size:1.7rem}.hero-meta{font-size:.85rem;padding:4px 9px}}
.level-banner .lvl-name{font-size:.92rem;font-weight:800;color:#fff;opacity:.9}

/* ===== live prize tile ===== */
.prize-tile{width:100%;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  background:linear-gradient(120deg,rgba(255,216,77,.18),rgba(255,138,61,.14));
  border:2px solid rgba(255,184,77,.45);border-radius:16px;padding:12px 14px;margin-bottom:12px;
  transition:transform .15s}
.prize-tile:active{transform:scale(.98)}
.prize-tile.earned{background:linear-gradient(120deg,rgba(45,212,167,.2),rgba(56,189,248,.16));
  border-color:rgba(45,212,167,.6);animation:prizeGlow 2s ease-in-out infinite}
@keyframes prizeGlow{0%,100%{box-shadow:0 0 0 rgba(45,212,167,0)}50%{box-shadow:0 0 18px rgba(45,212,167,.45)}}
.prize-tile.claimed{opacity:.65}

.prize-text{flex:1;display:flex;flex-direction:column;min-width:0}
.prize-text b{font-size:.95rem;color:var(--ink)}
.prize-text span{font-size:.76rem;font-weight:700;color:var(--ink-soft);opacity:.85}
.prize-chev{font-size:1.6rem;color:var(--ink-soft);opacity:.5}

/* prize/tile animations */
@keyframes fxMelt{0%,100%{transform:scaleY(1) translateY(0)}45%{transform:scaleY(.86) translateY(4px)}70%{transform:scaleY(1.04) translateY(-2px)}}
.fx-wobble{animation:fxWob 2.2s ease-in-out infinite}
@keyframes fxWob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.fx-spin{animation:fxSpinSlow 3.4s linear infinite}
@keyframes fxSpinSlow{to{transform:rotate(360deg)}}
.fx-shake{animation:fxShk 1.8s ease-in-out infinite}
@keyframes fxShk{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-2px) rotate(-7deg)}40%{transform:translateX(2px) rotate(7deg)}60%{transform:translateX(-1px) rotate(-4deg)}}

/* ===== screen-time live tile ===== */
.screen-tile{display:flex;align-items:center;gap:12px;border-radius:16px;padding:11px 14px;margin-bottom:12px;
  background:linear-gradient(120deg,rgba(255,138,61,.14),rgba(255,111,76,.1));
  border:1.5px solid rgba(255,138,61,.4)}

.st-text{display:flex;flex-direction:column;min-width:0}
.st-text b{font-size:.9rem;color:var(--ink)}
.st-text span{font-size:.76rem;font-weight:700;color:var(--ink-soft);opacity:.85;line-height:1.4}

/* ===== explainer overlay ===== */
#explainOverlay{position:fixed;inset:0;background:rgba(15,29,56,.55);z-index:110;
  display:none;align-items:center;justify-content:center;padding:18px}
.explain-card{background:var(--card);border-radius:22px;padding:24px;max-width:420px;width:100%;
  position:relative;text-align:center;max-height:88vh;overflow-y:auto}
.explain-icon{margin-bottom:6px}
.explain-big{font-size:3.4rem;display:inline-block}
.explain-card h3{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:1.4rem;margin-bottom:10px;color:var(--ink)}
.explain-card p{font-size:.88rem;color:var(--ink-soft);line-height:1.55;margin-bottom:8px}
.explain-prize{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:1.3rem!important;font-weight:800;color:var(--ultraberry)!important}
.explain-list{text-align:left;margin:10px 0;padding-left:20px}
.explain-list li{font-size:.85rem;color:var(--ink-soft);line-height:1.6;margin-bottom:5px}
.explain-hint{font-weight:800;color:var(--ultraberry)!important;margin-top:10px}

/* ===== rules page ===== */
.rule-card{background:var(--card);border:1.5px solid rgba(44,62,112,.12);border-radius:16px;
  padding:14px 16px;margin-bottom:10px}
.rule-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.rule-icon{font-size:1.5rem}
.rule-head b{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:1.05rem;color:var(--ink)}
.rule-card ul{margin:0;padding-left:20px}
.rule-card li{font-size:.85rem;color:var(--ink-soft);line-height:1.6;margin-bottom:4px}

@media (prefers-reduced-motion: reduce){
  .fx-wobble,.fx-spin,.fx-shake{animation:none!important}
}

/* ============================================================
   ICON SYSTEM + PROFESSIONAL SURFACES (v6)
   ============================================================ */
.ico{display:inline-flex;align-items:center;justify-content:center;width:1.45em;height:1.45em;
  vertical-align:-0.28em;line-height:0}
.ico-svg{width:100%;height:100%;display:block;overflow:visible}
.pill.labelled .ico{width:1.25em;height:1.25em;margin-right:2px}
.theme-btn.labelled .ico{width:1.5em;height:1.5em}
.ico-lg{width:2.4em;height:2.4em}
.ico-xl{width:3.6em;height:3.6em}

/* icons breathe on hover — restrained, spring-eased, never a cartoon wobble */
.stat-pills .labelled .ico{transition:transform .32s cubic-bezier(.34,1.56,.5,1)}
.stat-pills .labelled:hover .ico{transform:translateY(-2px) scale(1.1)}
.stat-pills .labelled:active .ico{transform:scale(.94)}

/* the Quill: a slow charge, then a single crisp discharge. One idea, done well. */
.pill.xp .ico-svg{filter:drop-shadow(0 0 0 rgba(245,158,11,0))}
.pill.xp:hover .ico-svg{animation:quillCharge 1.1s cubic-bezier(.3,0,.2,1) infinite}
@keyframes quillCharge{
  0%,58%{filter:drop-shadow(0 0 0 rgba(245,158,11,0));transform:translateY(0)}
  66%{filter:drop-shadow(0 0 7px rgba(255,216,77,.95));transform:translateY(-1px) scale(1.06)}
  72%{filter:drop-shadow(0 0 2px rgba(255,216,77,.4));transform:translateY(0) scale(.99)}
  80%{filter:drop-shadow(0 0 10px rgba(255,216,77,1));transform:scale(1.03)}
  100%{filter:drop-shadow(0 0 0 rgba(245,158,11,0))}
}
/* the Flame: warm convective flicker, not a shake */
.pill.streak:hover .ico-svg{animation:flameLick 1.5s ease-in-out infinite;transform-origin:50% 92%}
@keyframes flameLick{
  0%,100%{transform:scaleY(1) scaleX(1) skewX(0deg)}
  30%{transform:scaleY(1.07) scaleX(.97) skewX(-2deg)}
  55%{transform:scaleY(.97) scaleX(1.03) skewX(2deg)}
  78%{transform:scaleY(1.04) scaleX(.99) skewX(-1deg)}
}

/* ============================================================
   DIAGRAMS — crisp, colour-coded, exam-grade
   ============================================================ */
.dg-wrap{display:flex;justify-content:center;margin:10px 0 16px}
.diagram{width:min(320px,92%);height:auto;background:#fff;border-radius:16px;
  border:1px solid rgba(27,37,64,.07);box-shadow:0 4px 20px rgba(27,37,64,.09);padding:6px}
.diagram.dg-3d{width:min(330px,94%)}
.diagram.dg-cards{background:transparent;border:none;box-shadow:none;padding:0;width:min(360px,100%)}
.dg-t{font-family:'Nunito','Segoe UI',system-ui,sans-serif;letter-spacing:.005em}
[data-theme="dark"] .diagram{background:#1E1733;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .dg-t{fill:#E8E0FF}
.dg-q{text-align:center}

/* ============================================================
   PRIZE TILE — the signature element. Spend the boldness here.
   ============================================================ */
.prize-tile{position:relative;width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  cursor:pointer;border-radius:20px;padding:15px 16px;margin-bottom:14px;overflow:hidden;
  background:linear-gradient(118deg,#2A1B4D 0%,#3D2568 48%,#1F1638 100%);
  border:1px solid rgba(255,216,77,.28);
  box-shadow:0 8px 30px rgba(27,37,64,.28), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .28s cubic-bezier(.34,1.4,.5,1), box-shadow .28s}
.prize-tile:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(27,37,64,.36), inset 0 1px 0 rgba(255,255,255,.12)}
.prize-tile:active{transform:translateY(0) scale(.99)}
/* a slow sheen travels across the tile — the one flourish */
.prize-tile::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-18deg);animation:sheen 5.5s ease-in-out infinite}
@keyframes sheen{0%,72%{left:-60%}92%,100%{left:130%}}
.prize-visual{position:relative;width:58px;height:58px;flex-shrink:0;display:grid;place-items:center}
.prize-visual svg{width:100%;height:100%;overflow:visible}
.prize-text{flex:1;display:flex;flex-direction:column;min-width:0;z-index:1}
.prize-eyebrow{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#FFD84D;opacity:.9;margin-bottom:2px}
.prize-text b{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:1.12rem;color:#fff;line-height:1.2}
.prize-text span{font-size:.76rem;font-weight:700;color:rgba(255,255,255,.6);margin-top:1px}
.prize-chev{color:rgba(255,216,77,.8);font-size:1.5rem;z-index:1;transition:transform .28s}
.prize-tile:hover .prize-chev{transform:translateX(3px)}
.prize-tile.earned{border-color:rgba(45,212,167,.55);
  background:linear-gradient(118deg,#0F3D33 0%,#12574A 48%,#0A2F28 100%)}
.prize-tile.earned .prize-eyebrow{color:#6EE7C4}
.prize-tile.claimed{opacity:.55;filter:saturate(.6)}

/* screen-time tile — quiet, amber, never alarming */
.screen-tile{display:flex;align-items:center;gap:13px;border-radius:18px;padding:13px 15px;margin-bottom:14px;
  background:linear-gradient(115deg,rgba(255,184,77,.12),rgba(255,138,61,.06));
  border:1px solid rgba(255,168,61,.32)}
.screen-tile .st-visual{width:40px;height:40px;flex-shrink:0}
.screen-tile .st-visual svg{width:100%;height:100%}
.st-text b{font-size:.9rem;color:var(--ink);display:block}
.st-text span{font-size:.76rem;font-weight:700;color:var(--ink-soft);opacity:.85;line-height:1.45}

@media (prefers-reduced-motion: reduce){
  .prize-tile::after,.pill.xp:hover .ico-svg,.pill.streak:hover .ico-svg{animation:none!important}
  .prize-tile,.stat-pills .labelled .ico{transition:none!important}
}

/* ===== prize + tile motion: one honest idea per artwork ===== */
/* the ice cream genuinely melts: drips swell, then fall */
.prize-visual .drip{transform-origin:50% 0%;animation:dripSwell 3.4s cubic-bezier(.5,0,.6,1) infinite}
.prize-visual .drip2{animation-delay:1.5s;animation-duration:4s}
@keyframes dripSwell{
  0%,55%{transform:scaleY(.55);opacity:.9}
  75%{transform:scaleY(1.25);opacity:1}
  88%{transform:scaleY(1.6) translateY(2px);opacity:.75}
  93%{transform:scaleY(.5) translateY(6px);opacity:0}
  94%,100%{transform:scaleY(.55) translateY(0);opacity:.9}
}
/* the hourglass sand really runs */
.st-visual .sand-top{transform-origin:50% 30%;animation:sandDrain 6s linear infinite}
.st-visual .sand-bot{transform-origin:50% 100%;animation:sandFill 6s linear infinite}
.st-visual .sand-fall{stroke-dasharray:1.6 2.4;animation:sandStream .55s linear infinite}
@keyframes sandDrain{0%{transform:scaleY(1)}90%,100%{transform:scaleY(.06)}}
@keyframes sandFill{0%{transform:scaleY(.06)}90%,100%{transform:scaleY(1)}}
@keyframes sandStream{to{stroke-dashoffset:-4}}
/* explainer artwork */
.explain-art{display:inline-block;width:86px;height:86px}
.explain-art svg{width:100%;height:100%;overflow:visible}
.explain-icon .ico{width:3.4em;height:3.4em}

@media (prefers-reduced-motion: reduce){
  .prize-visual .drip,.st-visual .sand-top,.st-visual .sand-bot,.st-visual .sand-fall{animation:none!important}
}

/* ================= My Learning Journey (v6.1) ================= */
.journey-card{
  background: linear-gradient(135deg, var(--purple, #1B2540), #5B8DEF);
  color: #fff; border-radius: 18px; padding: 16px; margin: 0 0 14px;
  cursor: pointer; box-shadow: 0 8px 22px rgba(44,62,112,.28);
}
.journey-card .j-head{ display:flex; justify-content:space-between; align-items:center; }
.journey-card .j-title{ font-weight: 800; font-size: 1rem; }
.journey-card .j-year{ font-size:.72rem; font-weight:700; background:rgba(255,255,255,.2); padding:2px 8px; border-radius:99px; }
.journey-card .j-now{ margin: 8px 0 8px; font-size:.9rem; opacity:.95; }
.j-bar{ height:10px; background:rgba(255,255,255,.25); border-radius:99px; overflow:hidden; }
.j-bar > div{ height:100%; background:#F5A623; border-radius:99px; transition: width .4s; }
.j-bar.small{ background:rgba(27,37,64,.08); margin:8px 0 6px; }
.j-bar.small > div{ background: var(--purple, #1B2540); }
.journey-card .j-meta{ margin-top:6px; font-size:.75rem; font-weight:700; opacity:.9; }
.journey-card .j-btn{ margin-top:10px; background:#fff; color: var(--purple, #1B2540); font-weight:800; }

.term-tabs{ display:flex; gap:8px; margin-bottom:12px; }
.term-tab{ flex:1; padding:9px 4px; border-radius:12px; border:2px solid rgba(27,37,64,.1);
  background:var(--card,#fff); font-weight:800; font-size:.82rem; cursor:pointer; }
.term-tab.on{ border-color: var(--purple,#1B2540); background:rgba(44,62,112,.08); color:var(--purple,#1B2540); }

.j-focus{ font-size:.78rem; font-weight:700; color:var(--ink-soft,#6b6390); margin:2px 2px 10px; }
.j-week{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--card,#fff); border:2px solid rgba(27,37,64,.08); border-radius:14px;
  padding:10px 12px; margin-bottom:8px; cursor:pointer; }
.j-week .j-ico{ font-size:1.15rem; width:28px; text-align:center; flex:none; }
.j-week .j-info{ display:flex; flex-direction:column; min-width:0; flex:1; }
.j-week .j-topic{ font-weight:800; font-size:.88rem; }
.j-week .j-sub{ font-size:.72rem; color:var(--ink-soft,#6b6390); }
.j-week .j-star{ flex:none; }
.j-week.current{ border-color: var(--purple,#1B2540); box-shadow:0 4px 14px rgba(44,62,112,.18); }
.j-week.locked{ opacity:.55; }
.j-week.mastered{ border-color:#F5A623; background: linear-gradient(0deg, rgba(255,201,60,.07), rgba(255,201,60,.07)), var(--card,#fff); }
.j-week.exam{ border-style:dashed; }

.topic-hero{ background:var(--card,#fff); border-radius:18px; padding:16px; margin-bottom:12px;
  border:2px solid rgba(27,37,64,.08); }
.topic-name{ font-weight:900; font-size:1.15rem; margin-bottom:6px; }
.topic-intro{ font-size:.86rem; color:var(--ink-soft,#6b6390); margin-bottom:10px; }
.chip{ display:inline-block; font-size:.72rem; font-weight:800; padding:3px 10px; border-radius:99px; }
.chip.done{ background:rgba(45,212,167,.15); color:#0e9f7a; }
.chip.todo{ background:rgba(44,62,112,.1); color:var(--purple,#1B2540); }
.chip.gold{ background:rgba(255,201,60,.2); color:#a67c00; }
.m-line{ font-size:.82rem; }
.m-line .good{ color:#0e9f7a; }
.m-note{ font-size:.74rem; color:var(--ink-soft,#6b6390); }
.topic-actions .btn{ margin-bottom:10px; }
.btn.gold{ background:#F5A623; color:#1B2540; }

.mastery-row{ display:flex; align-items:center; gap:10px; padding:8px 4px;
  border-bottom:1px solid rgba(27,37,64,.06); }
.mastery-row .m-medal{ font-size:1.2rem; }
.mastery-row .m-meta{ font-size:.72rem; color:var(--ink-soft,#6b6390); }

/* =================  Filing cabinet home (v6.1) ================= */
/* Every colour below is derived from tokens so dark mode stays legible.
   --drawer is the subject's brand colour; the drawer is filled with a soft
   pastel wash of it so the active subject is obvious without reading. */
.cabinet{margin-bottom:16px}
/* v10.6.0 — the old subject-tab / drawer styles lived here. The day view
   that replaced them is at the end of this file; these rules matched no
   markup any more and were deleted rather than left to rot. */

/* dark mode: borders and dashed rules need to be light, not near-black */
[data-theme="dark"] .ct-weeks li{border-bottom-color:rgba(242,238,255,.10)}
[data-theme="dark"] .mastery-row{border-bottom-color:rgba(242,238,255,.10)}
[data-theme="dark"] .journey-card .j-btn{background:var(--card);color:var(--ink)}
[data-theme="dark"] .j-bar.small{background:rgba(242,238,255,.14)}
[data-theme="dark"] .term-tab{background:var(--card);border-color:rgba(242,238,255,.16);color:var(--ink)}
[data-theme="dark"] .term-tab.on{background:color-mix(in srgb, var(--ultraberry) 26%, var(--card));color:var(--ink)}
[data-theme="dark"] .j-week{background:var(--card);border-color:rgba(242,238,255,.16);color:var(--ink)}
[data-theme="dark"] .j-week.mastered{background:color-mix(in srgb, var(--custard) 16%, var(--card))}
[data-theme="dark"] .topic-hero{background:var(--card);border-color:rgba(242,238,255,.16)}
[data-theme="dark"] .opt.chosen{background:color-mix(in srgb, var(--ultraberry) 28%, var(--card));border-color:var(--ultraberry)}
[data-theme="dark"] .chip.done{background:rgba(45,212,167,.22);color:#7CF0CF}
[data-theme="dark"] .chip.todo{background:rgba(44,62,112,.28);color:#D9C6FF}
[data-theme="dark"] .chip.gold{background:rgba(255,201,60,.24);color:#FFD86B}
[data-theme="dark"] .m-line .good{color:#4FE0B5}
[data-theme="dark"] .curric-note{border-color:rgba(242,238,255,.16)}

/* =================  Curriculum page ================= */
.curric-sub{margin-bottom:14px}
.curric-term{margin:10px 0 4px}
.ct-head{font-weight:800;font-size:.86rem;margin-bottom:5px}
.ct-head span{font-weight:700;color:var(--ink-soft);font-size:.78rem}
.ct-weeks{list-style:none;margin:0;padding:0}
.ct-weeks li{display:flex;align-items:center;gap:7px;font-size:.82rem;padding:5px 8px;border-radius:9px;
  border-bottom:1px solid rgba(27,37,64,.05)}
.ct-weeks li .ctw-n{font-weight:800;color:var(--ink-soft);font-size:.7rem;min-width:36px}
.ct-weeks li.revision{background:rgba(44,62,112,.05)}
.ct-weeks li.now{background:color-mix(in srgb, var(--ultraberry, #1B2540) 12%, transparent);border:1.5px solid var(--ultraberry, #1B2540);font-weight:700}
.ct-weeks li .ctw-now{margin-left:auto;font-size:.68rem;font-weight:800;color:var(--ultraberry, #1B2540);white-space:nowrap}
.ct-weeks li.exam{background:rgba(255,201,60,.1);font-weight:700}

/* curriculum extras (v6.1.1) */
.curric-badge{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  background:color-mix(in srgb, var(--ultraberry) 16%, var(--card));color:var(--ultraberry-ink);
  padding:2px 7px;border-radius:99px;vertical-align:middle}
.curric-note{background:var(--card);border:2px dashed rgba(27,37,64,.14);border-radius:14px;padding:12px;margin-bottom:14px}
.curric-note p{font-size:.82rem;color:var(--ink-soft);margin-top:5px;line-height:1.45}
.ct-weeks li .ctw-cards{margin-left:auto;font-size:.68rem;color:var(--ink-soft);font-weight:700}
.ct-weeks li{color:var(--ink)}

/* year picker */
.year-btn .yr-chip{display:block;margin-top:5px;font-size:.66rem;font-weight:800;letter-spacing:.02em;
  color:var(--ultraberry-ink);background:color-mix(in srgb, var(--ultraberry) 14%, var(--card));
  padding:3px 8px;border-radius:99px;width:fit-content}
.year-btn .yr-chip.soon{color:var(--ink-soft);background:rgba(27,37,64,.07)}
[data-theme="dark"] .year-btn .yr-chip.soon{background:rgba(242,238,255,.12);color:var(--ink-soft)}

/* journey card: "coming soon" variant keeps contrast on its gradient */
/* v8.20.0 — the "no map yet" state is now a single button and nothing else,
   so the card shrinks to fit it instead of leaving a big empty purple slab. */
.journey-card.soon{background:linear-gradient(135deg,#5E5580,#3F3960);padding:10px}
.journey-card.soon .j-btn{background:#fff;color:#3F3960;margin-top:0}
[data-theme="dark"] .journey-card.soon .j-btn{background:var(--card);color:var(--ink)}

/* =================  Topic practice (v6.2) ================= */
.practice-banner{border-radius:14px;padding:12px 14px;font-weight:700;font-size:.86rem;margin-bottom:12px;line-height:1.4}
.practice-banner.locked{background:color-mix(in srgb, var(--custard) 22%, var(--card));color:var(--custard-ink);border:2px solid var(--custard)}
.practice-banner.open{background:color-mix(in srgb, var(--minty) 18%, var(--card));color:var(--minty-ink);border:2px solid var(--minty)}
.practice-subtabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.psub{flex:0 1 auto;display:flex;align-items:center;gap:5px;background:var(--card);border:2px solid rgba(27,37,64,.10);
  border-radius:12px;padding:8px 12px;font-weight:800;font-size:.82rem;color:var(--ink-soft);cursor:pointer;transition:all .12s}
.psub.on{color:var(--ink);border-color:var(--tabc,#1B2540);
  background:color-mix(in srgb, var(--tabc,#1B2540) 14%, var(--card))}
[data-theme="dark"] .psub{border-color:rgba(242,238,255,.16)}
.practice-year h3{font-size:.95rem;margin-bottom:8px}
.ptopics{display:flex;flex-direction:column;gap:7px}
.ptopic{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;
  background:var(--canvas);border:2px solid rgba(27,37,64,.08);border-radius:12px;padding:11px 13px;cursor:pointer;
  font-weight:700;color:var(--ink);transition:transform .1s,border-color .12s}
.ptopic:hover{transform:translateX(2px);border-color:var(--ultraberry)}
.ptopic .pt-label{font-size:.9rem}
.ptopic .pt-go{font-size:.74rem;font-weight:800;color:var(--ultraberry-ink);white-space:nowrap}
[data-theme="dark"] .ptopic{border-color:rgba(242,238,255,.14);background:color-mix(in srgb, var(--ultraberry) 8%, var(--card))}
.journey-card.locked{background:linear-gradient(135deg,#6B5B95,#4A3F6B)}
.journey-card.locked .j-btn{background:#fff;color:#4A3F6B}
[data-theme="dark"] .journey-card.locked .j-btn{background:var(--card);color:var(--ink)}
.curric-licence{margin-top:14px;background:rgba(44,62,112,.05);border:1px dashed rgba(44,62,112,.3)}
.curric-licence h3{color:var(--ink-soft)}
.curric-licence p{font-size:.8rem;line-height:1.55;color:var(--ink-soft);margin:6px 0}
.curric-licence a{color:var(--ultraberry);font-weight:700}

/* ===== Issue 2: test answer review modal ===== */
.review-result-modal{max-width:520px;width:100%;max-height:86vh;overflow-y:auto;position:relative;text-align:left}
.rr-close{position:absolute;top:12px;right:14px;border:none;background:rgba(27,37,64,.08);border-radius:50%;width:30px;height:30px;font-size:.9rem;cursor:pointer;color:var(--ink)}
.rr-summary{text-align:center;margin:6px 0 14px}
.rr-score{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:1.8rem;font-weight:800;color:var(--ultraberry)}
.rr-score span{font-size:1rem;color:var(--ink-soft)}
.rr-list{display:flex;flex-direction:column;gap:8px}
.rr-item{border-radius:12px;padding:10px 12px;border-left:4px solid #ccc;background:var(--canvas)}
.rr-item.ok{border-left-color:#3FBF6A;background:rgba(63,191,106,.07)}
.rr-item.no{border-left-color:#E8536B;background:rgba(232,83,107,.07)}
.rr-q{font-size:.9rem;font-weight:700;margin-bottom:4px;line-height:1.4}
.rr-a{font-size:.85rem;color:var(--ink-soft)}
.rr-tick{color:#3FBF6A;font-weight:800}
.rr-cross{color:#E8536B;font-weight:800}
.rr-a s{opacity:.7}
.rr-history{margin-top:16px;border-top:2px dashed rgba(27,37,64,.1);padding-top:12px}
.rr-history h4{font-size:.85rem;color:var(--ink-soft);margin-bottom:8px}
.rr-hrow{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;padding:6px 0;border-bottom:1px solid rgba(27,37,64,.06)}
.rr-hrow b.perfect{color:#E8820C}
.rr-hdate{color:var(--ink-soft);font-size:.75rem}
.print-pick{display:flex;align-items:center;gap:8px;padding:9px 12px;border:2px solid rgba(27,37,64,.1);border-radius:12px;font-weight:700;cursor:pointer}
.print-pick input{width:18px;height:18px}
.l-rankline{font-size:.72rem;font-weight:700;color:var(--ultraberry);margin:1px 0 2px}
.league-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:10px;border-top:2px dashed rgba(27,37,64,.1)}
.league-pager .lp-label{font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.league-pager .lh-btn[disabled]{opacity:.4;cursor:default}
/* collapsible library terms */
.term-group{margin-bottom:6px}
.term-group > summary.term-toggle{cursor:pointer;list-style:none;user-select:none}
.term-group > summary.term-toggle::-webkit-details-marker{display:none}
.term-group[open] > summary .term-progress{opacity:.7}
.term-group > summary:hover{background:rgba(44,62,112,.04);border-radius:10px}
.cab-day.revisit{border-style:dashed}
.cab-revisit-hint{grid-column:1/-1;font-size:.72rem;color:var(--ink-soft);margin-top:6px;text-align:center;line-height:1.4}


/* ===== v7.0.0 THE BIG TARGETS — the one goal you cannot miss ===== */
.bt-panel{background:linear-gradient(135deg,#1B2540,#3A2A66);border-radius:22px;padding:16px 16px 13px;margin:12px 0;color:#fff;
  box-shadow:0 8px 24px rgba(27,37,64,.28)}
.bt-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.bt-title{font-weight:900;font-size:1.02rem;letter-spacing:.04em}
.bt-daykind{font-size:.72rem;font-weight:800;background:rgba(255,216,77,.18);color:#FFD84D;border:1.5px solid rgba(255,216,77,.5);
  border-radius:99px;padding:3px 10px;white-space:nowrap}
.bt-rows{display:flex;flex-direction:column;gap:10px}
.bt-row{display:grid;grid-template-columns:74px 1fr auto;gap:10px;align-items:center}
.bt-label{font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.bt-bar{height:16px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;position:relative}
.bt-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#38BDF8,#7CF5C8);transition:width .6s ease}
.bt-fill.hit{background:linear-gradient(90deg,#FFD84D,#FF9A5C)}
.bt-nums{font-weight:900;font-size:1.06rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.bt-nums small{font-size:.66rem;font-weight:800;opacity:.7;margin-left:2px}
.bt-foot{margin-top:9px;font-size:.72rem;opacity:.75;text-align:center}

/* v7.1.0 dual-currency target rows */
.bt-row2{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:center}
.bt-meters{display:flex;flex-direction:column;gap:5px}
.bt-meter{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center}
.bt-ic{font-size:.85rem;text-align:center}
.bt-bar.troph .bt-fill{background:linear-gradient(90deg,#FFD84D,#FF9A5C)}
.bt-bar.quill .bt-fill{background:linear-gradient(90deg,#38BDF8,#7CF5C8)}
.bt-meter .bt-nums{font-size:.95rem}
.bt-meter .bt-nums small{font-size:.66rem;opacity:.65}

/* v7.1.0 Avatar Workshop + tile avatars */
.avatar-svg{display:block;border-radius:18%}
.av-tile{border-radius:50%;overflow:hidden;border:2px solid rgba(44,62,112,.25);background:#EDE9FE;flex:0 0 auto}
.av-stage{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 16px}
.av-big{filter:drop-shadow(0 8px 18px rgba(27,37,64,.22))}
.av-big .avatar-svg{width:180px;height:180px}
.av-balance{font-weight:900;font-size:1.05rem;color:var(--ultraberry,#1B2540);background:color-mix(in srgb,#38BDF8 12%,#fff);
  border:2px solid color-mix(in srgb,#38BDF8 40%,transparent);border-radius:99px;padding:6px 16px}
.av-slots{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch}
.av-slot{flex:0 0 auto;padding:8px 14px;border-radius:99px;border:2px solid rgba(44,62,112,.18);background:#fff;
  font-weight:800;font-size:.82rem;cursor:pointer;white-space:nowrap}
.av-slot.on{background:var(--ultraberry,#1B2540);color:#fff;border-color:var(--ultraberry,#1B2540)}
.av-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.av-card{border:2px solid rgba(44,62,112,.16);border-radius:16px;padding:10px 8px;background:#fff;text-align:center;cursor:pointer;transition:transform .1s}
.av-card:active{transform:scale(.96)}
.av-card.equipped{border-color:var(--minty,#2DD4A7);background:color-mix(in srgb,#2DD4A7 8%,#fff)}
.av-card .avc-prev{width:64px;height:64px;margin:0 auto 6px;border-radius:14px;overflow:hidden;background:#F3F0FF;display:flex;align-items:center;justify-content:center}
.av-card .avc-name{font-weight:800;font-size:.76rem;line-height:1.1}
.av-card .avc-cost{font-weight:900;font-size:.8rem;margin-top:3px}
.av-card.can .avc-cost{color:#2DD4A7}
.av-card.cant .avc-cost{color:#94A3B8}
.av-card .avc-owned{font-weight:900;font-size:.72rem;color:#2DD4A7}
.tile-av{display:flex;align-items:center;gap:8px}

/* ===== v7.2.0 THE SHOP — badges buy real rewards ===== */
.shop-wallet{display:flex;align-items:center;justify-content:center;gap:16px;background:linear-gradient(135deg,#1B2540,#3A2A66);
  color:#fff;border-radius:20px;padding:14px 16px;margin:6px 0 14px;box-shadow:0 8px 24px rgba(27,37,64,.24)}
.sw-block{text-align:center;flex:1}
.sw-n{font-weight:900;font-size:1.5rem;font-variant-numeric:tabular-nums;line-height:1}
.sw-l{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-top:3px}
.sw-div{width:1px;align-self:stretch;background:rgba(255,255,255,.18)}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shop-card{border:2px solid rgba(44,62,112,.16);border-radius:18px;padding:14px 10px;background:#fff;text-align:center;
  display:flex;flex-direction:column;gap:6px;align-items:center}
.shop-card.can{border-color:var(--minty,#2DD4A7);background:color-mix(in srgb,#2DD4A7 7%,#fff)}
.shop-card .sc-emoji{font-size:2rem;line-height:1}
.shop-card .sc-title{font-weight:800;font-size:.84rem;line-height:1.2}
.shop-card .sc-cost{font-weight:900;font-size:.9rem;color:var(--ultraberry,#1B2540)}
.shop-card .sc-need{font-size:.68rem;font-weight:700;color:#94A3B8}
.shop-card .btn{width:100%}
.so-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(27,37,64,.08)}
.so-row:last-child{border-bottom:0}
.so-status{margin-left:auto;font-weight:800;font-size:.7rem;padding:3px 9px;border-radius:99px;white-space:nowrap}
.so-status.requested{background:rgba(255,184,77,.18);color:#B45309}
.so-status.approved,.so-status.given{background:rgba(45,212,167,.18);color:#0F766E}
.so-status.declined{background:rgba(148,163,184,.18);color:#64748B}

/* v8.18.0 — "always included" subject chips in the setup form */
.subj-locked{display:inline-block;background:rgba(45,212,167,.14);border:1px solid rgba(45,212,167,.45);
  border-radius:99px;padding:4px 12px;font-weight:800;font-size:.82rem;color:var(--deep,#1B2540)}

/* v8.19.0 — Library: the school year term by term */
.term-block{background:var(--card,#fff);border:2px solid rgba(27,37,64,.10);border-radius:var(--radius-l,16px);
  padding:12px 14px;margin-bottom:12px;box-shadow:0 6px 18px rgba(27,37,64,.05)}
.term-block.term-current{border-color:rgba(45,212,167,.55);background:linear-gradient(135deg,rgba(45,212,167,.07),rgba(91,141,239,.05))}
.term-block.term-future{opacity:.92}
.term-block > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.term-block > summary::-webkit-details-marker{display:none}
.term-title{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:800;font-size:1.08rem}
.term-badge{border-radius:99px;padding:3px 10px;font-size:.72rem;font-weight:800;color:#fff}
.term-badge.now{background:#2DD4A7} .term-badge.past{background:#5B8DEF} .term-badge.soon{background:#9aa3bd}
.term-count{margin-left:auto;font-size:.78rem;color:var(--ink-soft,#6b6390);font-weight:700}
.term-body{margin-top:10px}
.term-subject{padding:8px 0;border-top:1px solid rgba(27,37,64,.07)}
.ts-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:.92rem}
.ts-emoji{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.ts-topics{display:flex;flex-wrap:wrap;gap:6px}
.topic-chip{background:rgba(91,141,239,.10);border:1.5px solid rgba(91,141,239,.30);border-radius:99px;
  padding:6px 12px;font-size:.82rem;font-weight:700;color:var(--ink,#1B2540);cursor:pointer}
.topic-chip:hover{background:rgba(91,141,239,.20)}
.term-test{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:10px;
  border-top:2px dashed rgba(27,37,64,.12);font-weight:800}

/* =================  EXAMS (v8.21.0) =================
   An exam should look and feel different from practice the moment it appears:
   calmer, more serious, and completely clear about the rules before the child
   commits to it. */
.exam-brief{background:var(--card);border-radius:22px;padding:20px 18px 18px;
  box-shadow:var(--shadow-card);border:2px solid rgba(27,37,64,.10);max-width:520px;margin:0 auto;text-align:center}
.exam-brief .eb-badge{display:inline-block;background:var(--ultraberry);color:#fff;font-weight:800;
  font-size:.68rem;letter-spacing:.16em;padding:5px 12px;border-radius:99px}
.exam-brief .eb-title{margin:12px 0 4px;font-size:1.45rem;color:var(--ink)}
.eb-facts{display:flex;gap:10px;justify-content:center;margin:16px 0 6px}
.eb-fact{flex:1 1 0;background:color-mix(in srgb,var(--ultraberry) 10%,var(--card));
  border-radius:16px;padding:12px 6px;display:flex;flex-direction:column;gap:2px}
.eb-fact b{font-size:1.5rem;line-height:1;color:var(--ultraberry)}
.eb-fact span{font-size:.7rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.eb-rules{text-align:left;margin:16px 0 10px;background:rgba(27,37,64,.04);border-radius:16px;padding:14px 16px}
.eb-rules h3{margin:0 0 8px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.eb-rules ul{margin:0;padding-left:18px}
.eb-rules li{font-size:.86rem;line-height:1.5;margin-bottom:6px;color:var(--ink)}
.eb-warn{font-size:.78rem;font-weight:700;color:#B4531F;background:rgba(255,143,84,.14);
  border-radius:12px;padding:9px 12px;margin-bottom:14px}
[data-theme="dark"] .eb-warn{color:#FFB98A;background:rgba(255,143,84,.13)}
[data-theme="dark"] .eb-rules{background:rgba(255,255,255,.05)}

/* the clock turns urgent in the last minute — a nudge, not a fright */
#qzTimer.urgent{color:#D6452B;font-weight:800;animation:examPulse 1s ease-in-out infinite}
@keyframes examPulse{0%,100%{opacity:1}50%{opacity:.55}}

.exam-void{background:var(--card);border-radius:22px;padding:26px 20px;text-align:center;
  box-shadow:var(--shadow-card);max-width:480px;margin:40px auto 0;border:2px solid rgba(27,37,64,.10)}
.exam-void .ev-emoji{font-size:3rem;line-height:1}
.exam-void h2{margin:10px 0 6px;color:var(--ink)}
.exam-void .sub{margin-bottom:18px}

/* phones get the facts stacked a little tighter so nothing wraps oddly */
html[data-device="phone"] .eb-facts{gap:6px}
html[data-device="phone"] .eb-fact b{font-size:1.3rem}

/* ================= ← BACK, from anywhere (v8.22.0) =================
   One button, always in the same place, so a child never has to work out
   how to get out of a screen. It sits above the content and below the
   header, and gets a comfortable tap target on touch devices. */
.app-back{position:sticky;top:8px;z-index:60;display:inline-flex;align-items:center;gap:6px;
  margin:0 0 10px;padding:9px 15px;border:2px solid rgba(27,37,64,.12);border-radius:99px;
  background:var(--card);color:var(--ink);font-family:inherit;font-weight:800;font-size:.85rem;
  cursor:pointer;box-shadow:0 2px 8px rgba(27,37,64,.08)}
.app-back:hover{background:color-mix(in srgb,var(--ultraberry) 8%,var(--card))}
.app-back:active{transform:translateY(1px)}
html[data-device="phone"] .app-back{padding:10px 16px;font-size:.88rem}
html[data-device="desktop"] .app-back{top:12px}

/* the arena's subject picker (v8.22.0) */
.ch-pick{background:var(--card);border-radius:0 0 18px 18px;margin-top:-8px;padding:14px 16px 16px;
  border:2px solid rgba(27,37,64,.10);border-top:none;box-shadow:var(--shadow-card)}
.ch-pick label{display:block;font-weight:800;font-size:.8rem;color:var(--ink-soft);margin-bottom:8px}
.ch-pick-row{display:flex;gap:8px;align-items:stretch}
.ch-pick-row select{flex:1 1 auto;min-width:0;font-family:inherit;font-weight:700;font-size:.88rem;
  padding:11px 12px;border-radius:14px;border:2px solid rgba(27,37,64,.14);background:var(--card);color:var(--ink)}
.ch-pick-row .btn{flex:0 0 auto;white-space:nowrap}
html[data-device="phone"] .ch-pick-row{flex-direction:column}
html[data-device="phone"] .ch-pick-row .btn{width:100%}

/* =================  LEAGUE, tidied (v8.22.0) =================
   The League borrowed the filing-cabinet drawer tabs from Home, which was
   never what they were for: on a phone they wrapped into two ragged rows with
   labels cut off mid-word. These are proper segmented controls — one row,
   evenly divided, with a solid active state you can see at a glance. */
.seg{display:grid;gap:6px;margin-bottom:12px;padding:5px;border-radius:18px;
  background:rgba(27,37,64,.06);border:2px solid rgba(27,37,64,.06)}
.seg-2{grid-template-columns:repeat(2,1fr)}
.seg-3{grid-template-columns:repeat(3,1fr)}
.seg-4{grid-template-columns:repeat(4,1fr)}
.seg-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:0;padding:10px 4px;border:none;border-radius:14px;background:transparent;
  font-family:inherit;font-weight:800;font-size:.78rem;line-height:1.15;color:var(--ink-soft);
  cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg-btn .seg-i{font-size:1.05rem;line-height:1}
.seg-btn:hover{color:var(--ink)}
.seg-btn.active{background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(27,37,64,.12)}
[data-theme="dark"] .seg{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.06)}

/* the explainer used to be a wall of small text; give it room to breathe */
.league-explainer{background:color-mix(in srgb,var(--ultraberry) 8%,var(--card));
  border-radius:16px;padding:14px 16px;margin-bottom:14px;font-size:.85rem;line-height:1.55;color:var(--ink)}
.league-explainer p{margin:0 0 8px}
.league-explainer p:last-child{margin-bottom:0}
[data-theme="dark"] .league-explainer{background:rgba(255,255,255,.05)}

/* PHONE — the labels stack under their icon so four fit a narrow screen */
html[data-device="phone"] .seg-btn{font-size:.72rem;padding:9px 2px}
html[data-device="phone"] .seg{gap:4px;padding:4px}
html[data-device="phone"] .league-explainer{font-size:.82rem;padding:12px 14px}

/* TABLET / DESKTOP — room for icon and label side by side, on one line */
html[data-device="tablet"] .seg-btn,
html[data-device="desktop"] .seg-btn{flex-direction:row;gap:7px;font-size:.88rem;padding:12px 10px}
html[data-device="desktop"] .seg{max-width:640px}
html[data-device="desktop"] .league-explainer{max-width:720px}

/* =================  THE REWARD SHELF, in line (v8.23.0) =================
   The old shelf let a long reward name push the price and buttons out of
   alignment row by row. A fixed grid fixes that for good: the name is the only
   flexible column, and it wraps within itself instead of shoving anything. */
.shelf-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;
  padding:12px 4px;border-bottom:1px dashed rgba(27,37,64,.14)}
.shelf-row:last-child{border-bottom:none}
.sh-emoji{font-size:1.35rem;line-height:1;width:1.6em;text-align:center;flex:none}
.sh-title{min-width:0;font-weight:800;font-size:.94rem;color:var(--ink);
  overflow-wrap:anywhere;line-height:1.3}
.sh-cost{white-space:nowrap;font-weight:800;font-size:.92rem;color:var(--ink);
  background:rgba(245,166,35,.16);border-radius:99px;padding:5px 11px}
.sh-actions{display:flex;gap:6px;flex:none}
.sh-actions .btn{white-space:nowrap;padding:7px 11px;font-size:.78rem}
[data-theme="dark"] .shelf-row{border-bottom-color:rgba(255,255,255,.12)}

/* on a phone the buttons drop to their own line rather than squeezing the name */
html[data-device="phone"] .shelf-row{grid-template-columns:auto 1fr auto;row-gap:8px}
html[data-device="phone"] .sh-actions{grid-column:1 / -1;justify-content:flex-end}

.shop-form-row{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:end}
.shop-form-row .field{margin-bottom:0}
.field-hint{font-size:.76rem;font-weight:700;color:var(--ink-soft);min-height:1.1em;margin:6px 0 10px}

/* =================  THE EXAM CELEBRATION (v8.24.0) =================
   Full screen, over a blurred app. The badger is deliberately oversized —
   the face is meant to fill the whole display and run off the edges, not sit
   politely in a card. 80–99% gets the star shower; 100% gets the hat toss,
   where the mortarboard is thrown TOWARDS the child: it rushes at the screen,
   spinning and growing, until it fills the view and bursts away. */
.cheer-overlay{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;
  overflow:hidden;animation:cheerIn .38s ease both}
.cheer-overlay.cheer-out{animation:cheerOut .38s ease both}
@keyframes cheerIn{from{opacity:0}to{opacity:1}}
@keyframes cheerOut{from{opacity:1}to{opacity:0}}
.cheer-blur{position:absolute;inset:0;background:rgba(20,16,40,.55);
  backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1)}

/* the badger, big enough to overflow the screen on every device */
.cheer-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cheer-mascot{width:min(190vh,150vw);height:min(190vh,150vw);
  filter:drop-shadow(0 24px 70px rgba(0,0,0,.45))}
/* the face itself sits high so the words have room underneath */
.cheer-stage{transform:translateY(-6vh)}

/* the mouth opens into a proper cheer, using the id the artwork provides */
.cheer-overlay #mascotMouth{stroke-width:9;animation:cheerMouth 1.6s .25s ease-in-out infinite}
@keyframes cheerMouth{0%,100%{transform:scaleY(1)}45%{transform:scaleY(1.9)}}
.cheer-overlay #mascotMouth{transform-origin:256px 367px;transform-box:fill-box}

/* ---- 80–99%: STAR SHOWER ---- */
.cheer-stars .cheer-mascot{animation:cheerSwell 1s cubic-bezier(.2,1.25,.35,1) both}
@keyframes cheerSwell{0%{transform:scale(.35) rotate(-14deg);opacity:0}
  68%{transform:scale(1.08) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.cheer-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cheer-star,.cheer-ribbon{position:absolute;top:-12%;animation-name:cheerFall;animation-timing-function:linear;animation-fill-mode:both}
.cheer-ribbon{width:10px;border-radius:4px}
@keyframes cheerFall{0%{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:1}100%{transform:translateY(125vh) rotate(420deg);opacity:.15}}

/* ---- 100%: HAT TOSS, thrown AT the child ---- */
.cheer-hat .cheer-mascot{animation:cheerBounce .7s cubic-bezier(.2,1.5,.4,1) both}
@keyframes cheerBounce{0%{transform:translateY(16vh) scale(.7);opacity:0}
  70%{transform:translateY(-1.5vh) scale(1.04);opacity:1}100%{transform:translateY(0) scale(1)}}
/* the throw: a small wind-up, then straight down the barrel of the camera.
   Growing scale + a touch of blur reads as "coming towards you", not "flying off". */
.cheer-hat #mascotCap{transform-origin:256px 115px;
  animation:hatAtYou 2.1s .62s cubic-bezier(.42,0,.72,1) both}
@keyframes hatAtYou{
  0%{transform:rotate(-8deg) scale(1);opacity:1;filter:none}
  14%{transform:rotate(-17deg) translateY(14px) scale(.94)}      /* wind-up */
  30%{transform:rotate(20deg) translateY(-40px) scale(1.5)}      /* launch */
  62%{transform:rotate(190deg) translateY(-40px) scale(5.5);filter:blur(1px)}
  100%{transform:rotate(420deg) translateY(-30px) scale(15);opacity:0;filter:blur(7px)}
}

/* the words, over the top of the badger */
.cheer-words{position:relative;z-index:3;text-align:center;pointer-events:none;
  padding:0 22px;margin-top:34vh;text-shadow:0 3px 18px rgba(0,0,0,.55)}
.cw-thumb{font-size:3.2rem;line-height:1;animation:cwPop .8s .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes cwPop{0%{transform:scale(.2) rotate(-30deg);opacity:0}
  60%{transform:scale(1.3) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.cw-msg{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-weight:800;font-size:2rem;color:#fff;margin-top:6px;letter-spacing:-.01em;
  animation:cwRise .55s .7s ease-out both}
.cw-pct{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-weight:800;font-size:4rem;line-height:1;color:#FFD84C;margin-top:4px;animation:cwRise .55s .82s ease-out both}
.cw-sub{font-weight:700;font-size:1rem;color:rgba(255,255,255,.92);margin:10px auto 0;max-width:22em;
  animation:cwRise .55s .95s ease-out both}
.cw-brand{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-weight:800;font-size:1.25rem;color:#fff;margin-top:16px;opacity:.95;animation:cwRise .55s 1.1s ease-out both}
.cw-brand em{font-style:normal;color:#FFB84C}
@keyframes cwRise{from{transform:translateY(26px);opacity:0}to{transform:translateY(0);opacity:1}}

.cheer-close{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);z-index:4;
  border:none;border-radius:99px;padding:12px 24px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:.9rem;background:rgba(255,255,255,.94);color:#1B2540;
  animation:cwRise .5s 1.4s ease-out both}

/* a phone has less height, so pull the words up and keep the face filling it */
html[data-device="phone"] .cheer-words{margin-top:30vh}
html[data-device="phone"] .cw-msg{font-size:1.65rem}
html[data-device="phone"] .cw-pct{font-size:3.2rem}
html[data-device="phone"] .cheer-mascot{width:min(150vh,175vw);height:min(150vh,175vw)}
html[data-device="desktop"] .cheer-mascot{width:min(160vh,90vw);height:min(160vh,90vw)}

/* a child who prefers less motion still gets the moment, just calmly */
@media (prefers-reduced-motion: reduce){
  .cheer-overlay *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .cheer-hat #mascotCap{opacity:0}
}

/* =================  TERM EXAMS, three across (v8.25.0) =================
   Three full-width rows pushed the day's study below the fold. The same three
   exams now sit side by side in one short strip. A locked tile is not a dead
   end: tapping it — or the ? — explains exactly how it opens. */
.exam-hall{background:var(--card);border-radius:18px;padding:12px 12px 14px;margin-bottom:14px;
  border:2px solid rgba(27,37,64,.08);box-shadow:var(--shadow-card)}
.eh-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-weight:800;font-size:.95rem;color:var(--ink)}
.eh-help{margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(27,37,64,.18);background:var(--card);color:var(--ink-soft);
  font-family:inherit;font-weight:800;font-size:.85rem;line-height:1}
.eh-help:hover{background:var(--ultraberry);border-color:var(--ultraberry);color:#fff}
.term-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.term-tile{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;
  padding:11px 6px 10px;border-radius:14px;cursor:pointer;font-family:inherit;
  border:2px solid rgba(27,37,64,.10);background:rgba(27,37,64,.03);color:var(--ink);
  transition:transform .12s,border-color .15s,background .15s}
.term-tile:hover{transform:translateY(-2px)}
.tt-emoji{font-size:1.2rem;line-height:1}
.tt-name{font-weight:800;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tt-chip{font-size:.68rem;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.tt-go{margin-top:3px;font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:99px;
  background:var(--ultraberry);color:#fff;white-space:nowrap}
.term-tile.pass{border-color:#2DD4A7;background:rgba(45,212,167,.12)}
.term-tile.pass .tt-go{background:#2DD4A7}
.term-tile.ready{border-color:var(--ultraberry);background:color-mix(in srgb,var(--ultraberry) 10%,var(--card))}
.term-tile.locked{opacity:.72}
.term-tile.locked .tt-chip{color:var(--ink-soft)}
[data-theme="dark"] .term-tile{background:rgba(255,255,255,.05)}

/* ---- the fold: a panel that keeps its heading and hides its detail ---- */
.panel.fold{padding-top:10px}
.fold-head{display:flex;align-items:center;gap:10px;width:100%;padding:6px 0 8px;cursor:pointer;
  border:none;background:transparent;font-family:inherit;color:var(--ink);text-align:left}
.fold-title{font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-weight:800;font-size:1.02rem}
.fold-mini{margin-left:auto;font-size:.76rem;font-weight:800;color:var(--ink-soft);
  background:rgba(27,37,64,.06);border-radius:99px;padding:4px 10px;white-space:nowrap}
.fold-mini.all-done{background:rgba(45,212,167,.18);color:#0E7C5A}
.fold-arrow{flex:none;font-size:.9rem;font-weight:800;color:var(--ink-soft);width:1em;text-align:center}
[data-theme="dark"] .fold-mini{background:rgba(255,255,255,.08)}
[data-theme="dark"] .fold-mini.all-done{color:#7CE9C4}

/* ---- the "explain this" sheet ---- */
.info-overlay{position:fixed;inset:0;z-index:8500;display:none;align-items:center;justify-content:center;
  background:rgba(20,16,40,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px}
.info-sheet{position:relative;background:var(--card);color:var(--ink);border-radius:20px;padding:22px 20px;
  max-width:440px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.info-sheet h3{margin:0 0 12px;font-size:1.15rem}
.info-sheet p{font-size:.9rem;line-height:1.6;margin:0 0 10px}
.info-list{margin:12px 0;padding-left:18px}
.info-list li{font-size:.86rem;line-height:1.5;margin-bottom:9px}
.info-foot{font-size:.82rem !important;color:var(--ink-soft);border-top:1px dashed rgba(27,37,64,.15);padding-top:10px}
.info-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:none;background:rgba(27,37,64,.08);color:var(--ink);font-family:inherit;font-weight:800}

/* a phone shows the three tiles a touch tighter, still three across */
html[data-device="phone"] .term-tiles{gap:6px}
html[data-device="phone"] .tt-name{font-size:.72rem}
html[data-device="desktop"] .exam-hall{max-width:640px}

/* ================= v8.26.0 · HOME, SIX SECTIONS IN ORDER =================
   1 targets · 2 "What will I be learning" · 3 subjects · 4 worksheet ·
   5 term exams · 6 missions. Identical at every Key Stage and year group. */

/* --- 1. MY TARGETS: every bar exactly the same length ---
   The numbers used to live in a column that grew with the value, so "0/0" and
   "75/3510" gave bars of different widths and the panel looked crooked. The
   icon and number columns are now FIXED, so only the bar between them flexes,
   and it is the same width on all six rows. */
.bt-meter{display:grid;grid-template-columns:22px 1fr 74px;gap:8px;align-items:center}
.bt-ic{width:22px;text-align:center;font-size:.95rem;line-height:1}
.bt-nums{width:74px;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif}
.bt-nums b{font-weight:800;font-size:1rem}
.bt-nums small{font-weight:700;font-size:.78rem;opacity:.7}
.bt-bar{height:14px;min-width:0}
.bt-row2{grid-template-columns:82px 1fr}
html[data-device="phone"] .bt-meter{grid-template-columns:20px 1fr 64px}
html[data-device="phone"] .bt-nums{width:64px}
html[data-device="phone"] .bt-nums b{font-size:.92rem}
html[data-device="phone"] .bt-row2{grid-template-columns:70px 1fr}

/* --- 2. ONE WHITE BAR, and nothing else --- */
.learn-bar{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:14px;
  padding:16px 18px;border-radius:18px;cursor:pointer;text-align:left;
  background:var(--card);border:2px solid rgba(27,37,64,.10);box-shadow:var(--shadow-card);
  font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-weight:800;font-size:1.02rem;color:var(--ink);transition:transform .12s,border-color .15s}
.learn-bar:hover{transform:translateY(-1px);border-color:var(--ultraberry)}
.learn-bar .lb-ic{font-size:1.3rem;line-height:1;flex:none}
.learn-bar .lb-text{flex:1;min-width:0}
.learn-bar .lb-go{flex:none;font-size:1.4rem;color:var(--ink-soft);line-height:1}

/* the  that closes a full screen, top right where a child expects it */
.screen-x{margin-left:auto;flex:none;width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(27,37,64,.12);background:var(--card);color:var(--ink);
  font-family:inherit;font-weight:800;font-size:1rem;line-height:1}
.screen-x:hover{background:var(--ultraberry);border-color:var(--ultraberry);color:#fff}

/* --- 9. FOLD BUTTONS A CHILD CAN ACTUALLY SEE AND HIT ---
   The old chevrons were hairline arrows. These are proper round buttons with a
   44px touch target, the size Apple and Google both call the minimum. */
.fold-arrow{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;font-size:1.15rem;font-weight:800;
  background:rgba(27,37,64,.07);color:var(--ink);transition:background .15s,transform .15s}
.fold-head:hover .fold-arrow{background:var(--ultraberry);color:#fff}
.panel.fold.closed .fold-arrow{transform:rotate(0)}
[data-theme="dark"] .fold-arrow{background:rgba(255,255,255,.10)}
html[data-device="phone"] .fold-arrow{width:40px;height:40px;font-size:1.25rem}

/* the Library's term chevron, matched to it */
.term-block summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  cursor:pointer;list-style:none;padding:14px 14px;min-height:56px}
.term-block summary::-webkit-details-marker{display:none}
.term-chev{margin-left:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;font-size:1.15rem;font-weight:800;
  background:rgba(27,37,64,.07);color:var(--ink);transition:transform .2s,background .15s}
.term-block[open] .term-chev{transform:rotate(180deg)}
.term-block summary:hover .term-chev{background:var(--ultraberry);color:#fff}
[data-theme="dark"] .term-chev{background:rgba(255,255,255,.10)}
html[data-device="phone"] .term-chev{width:40px;height:40px;font-size:1.25rem}
html[data-device="phone"] .term-block summary{min-height:60px}

/* ============================================================
   v9.2.0 — SVG icon + diagram theming.

   Two separate concerns share this block:

   1. .ic — the inline UI icons from public/icons.js (subject tabs,
      bottom nav, Quills/badge stats). They are drawn with
      stroke="currentColor", so they need no per-theme rules at all:
      they inherit whatever colour the surrounding control already has,
      including its active/selected state. Only sizing lives here.

   2. .dg-* — the diagram tokens from visualEngine.js. Those SVGs carry
      LIGHT-theme colours as presentation attributes so they stay
      correct with no CSS at all (which is the situation inside printed
      PDFs, where svg-to-pdfkit has no stylesheet). Presentation
      attributes are the weakest thing in the cascade, so the dark-mode
      rules below simply override them. Nothing needs a second copy of
      the artwork.
   ============================================================ */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-0.16em;flex:none}
.tabbar .ico .ic{width:22px;height:22px;vertical-align:0}
.ts-emoji .ic{width:16px;height:16px;vertical-align:0}
.bt-ico .ic,.bt-meters .ic{width:15px;height:15px;vertical-align:0}
.bt-foot .ic{width:13px;height:13px;vertical-align:-0.12em}

/* diagrams: dark-theme overrides of the baked-in light attributes */
[data-theme="dark"] .dg-s-ink{stroke:#F8FAFC}
[data-theme="dark"] .dg-f-ink{fill:#F8FAFC}
[data-theme="dark"] .dg-t{fill:#F8FAFC}
[data-theme="dark"] .dg-t-muted{fill:#94A3B8}
[data-theme="dark"] .dg-s-muted{stroke:#94A3B8}
[data-theme="dark"] .dg-s-grid{stroke:#334155}

/* ============================================================
   v10.0.0 — HEADER. Nine controls became three plus an overflow
   sheet; see the comment on #appHeader in index.html for why.
   ============================================================ */
#appHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 2px 14px;position:relative}
#appHeader .logo{display:flex;align-items:center;gap:9px;font-family:'Baloo 2','Nunito',system-ui,sans-serif;
  font-weight:800;font-size:1.22rem;color:var(--navy);letter-spacing:-.01em;cursor:pointer}
#appHeader .logo em{font-style:normal;color:var(--gold)}
#appHeader .logo-mascot{width:34px;height:34px;flex:none}
.hdr-actions{display:flex;align-items:center;gap:6px;position:relative}
.hdr-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--cream-line);background:var(--card);color:var(--navy);
  border-radius:12px;cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.hdr-btn:hover{background:var(--gold-wash);border-color:var(--gold)}
.hdr-btn .ic{width:20px;height:20px}
.hdr-btn img{border-radius:50%}
.hdr-dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);border:2px solid var(--card)}
.hdr-menu{position:absolute;top:46px;right:0;z-index:60;display:flex;flex-direction:column;
  min-width:212px;padding:6px;background:var(--card);border:1px solid var(--cream-line);
  border-radius:14px;box-shadow:var(--shadow-pop)}
.hdr-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  background:none;border:0;border-radius:9px;cursor:pointer;text-align:left;
  font:inherit;font-size:.92rem;font-weight:600;color:var(--ink)}
.hdr-menu button:hover{background:var(--gold-wash)}
.hdr-menu button.danger{color:var(--danger)}
.hdr-menu .ic{width:18px;height:18px;flex:none}
@media (max-width:420px){ #appHeader .logo span{font-size:1.05rem} .hdr-btn{width:37px;height:37px} }

/* ---- v10.0.0 — read-only, parent-owned profile facts ---- */
.locked-block{margin:14px 0 4px;padding:12px 14px;background:var(--gold-wash);
  border:1px solid var(--cream-line);border-radius:14px}
.locked-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px dashed var(--cream-line)}
.locked-row:last-of-type{border-bottom:0}
.lk-label{font-size:.86rem;color:var(--ink-soft);font-weight:600}
.lk-value{font-weight:800;color:var(--navy)}
.locked-note{display:flex;align-items:flex-start;gap:8px;margin-top:10px;
  font-size:.82rem;line-height:1.5;color:var(--ink-soft)}
.locked-note .ic{width:15px;height:15px;flex:none;margin-top:2px;color:var(--gold-deep)}

/* ---- v10.0.0 — avatar picker: Brock in twelve costumes ---- */
#avatarGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:420px){ #avatarGrid{grid-template-columns:repeat(3,1fr)} }
.av-opt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 5px;
  background:var(--card);border:2px solid var(--cream-line);border-radius:14px;cursor:pointer;
  transition:border-color .15s,background .15s}
.av-opt:hover{border-color:var(--gold);background:var(--gold-wash)}
.av-opt.on{border-color:var(--navy);background:var(--gold-wash)}
.av-opt .av-svg{width:100%;height:auto;max-width:64px;display:block}
.av-name{font-size:.72rem;font-weight:700;color:var(--ink-soft)}
.profile-avatar .av-svg{width:88px;height:88px}
.hdr-btn .av-svg{width:26px;height:26px}

/* v10.3.0 — the bookworm illustration on the sign-in screen. Sized in vh as
   well as px so it never pushes the sign-in form below the fold on a short
   phone screen; hidden entirely in landscape where vertical space is scarce. */
.auth-illustration{display:block;width:min(78%,320px);max-height:34vh;height:auto;
  margin:14px auto 0;object-fit:contain}
@media (max-height:680px){ .auth-illustration{max-height:22vh} }
@media (orientation:landscape) and (max-height:520px){ .auth-illustration{display:none} }
.logo-mascot-lg{width:min(46vw,160px);height:auto}

/* v10.4.0 — brand-guide asset roles.
   "Use the full lockup (mascot + wordmark) for headers, worksheets and the
   login screen. Use the mascot mark alone for the app icon, favicon and
   small UI badges." Clear space around the mascot is kept at least equal to
   his ear width, as the guide requires. */
.auth-lockup{display:block;width:min(86%,420px);height:auto;margin:0 auto 10px}
.logo-mascot{width:34px;height:34px;flex:none;padding:2px}   /* clear space ≈ ear width */

/* ============================================================
   v10.5.0 — SIGN-UP FORM
   Single column, labels above fields, grouped into four short numbered
   steps. Backed by form-UX research: single-column forms are completed
   noticeably faster with fewer errors than multi-column ones, and
   top-aligned labels need the fewest eye movements. The old town/postcode
   pair sat in a 2-up row that collapsed untidily on narrow phones — every
   field is now full width at every size, so nothing can misalign.
   ============================================================ */
.signup-panel .field{margin-bottom:14px}
.signup-panel input[type="text"],.signup-panel input[type="email"],
.signup-panel input[type="password"],.signup-panel input:not([type]){width:100%}
.form-step{display:flex;align-items:center;gap:9px;margin:22px 0 12px;
  font-weight:800;font-size:.95rem;color:var(--ink);
  padding-bottom:8px;border-bottom:1px solid var(--cream-line,#EDE2CC)}
.form-step:first-child{margin-top:2px}
.step-n{display:inline-flex;align-items:center;justify-content:center;
  width:23px;height:23px;border-radius:50%;background:var(--ink);color:#FFF8EC;
  font-size:.76rem;font-weight:800;flex:none}
.step-note{margin-left:auto;font-weight:600;font-size:.75rem;color:var(--ink-soft)}
.field-hint{display:block;margin-top:5px;font-size:.78rem;color:var(--ink-soft)}
.privacy-note{display:flex;gap:9px;align-items:flex-start;margin:2px 0 4px;
  padding:11px 13px;background:var(--gold-wash,#FFF3D9);border-radius:11px;
  font-size:.8rem;line-height:1.55;color:var(--ink-soft)}
.privacy-note .ic{width:15px;height:15px;flex:none;margin-top:2px}
.check-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;
  font-weight:400;font-size:.88rem;line-height:1.5;cursor:pointer}
.check-row input{margin-top:2px;width:19px;height:19px;flex:none;accent-color:var(--ink)}
.check-row em{font-style:normal;color:var(--ink-soft)}
.trial-note{margin:16px 0 12px;padding:12px 14px;border-radius:12px;
  background:var(--card);border:1px dashed var(--cream-line,#EDE2CC);
  font-size:.83rem;line-height:1.6;color:var(--ink-soft)}
.trial-note b{color:var(--ink)}
@media (min-width:640px){ .signup-panel{padding:26px 30px} }

/* ============================================================
   v10.5.0 — PARENT HQ: tabs, compact actions, tooltips
   ============================================================ */
.hq-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 18px;
  padding:5px;background:var(--card);border:1px solid var(--cream-line,#EDE2CC);border-radius:15px;
  position:sticky;top:0;z-index:30}
.hq-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:9px 4px;border:0;border-radius:11px;background:none;cursor:pointer;
  font:inherit;font-size:.76rem;font-weight:700;color:var(--ink-soft);
  transition:background .15s,color .15s;min-height:52px}
.hq-tab .ic{width:19px;height:19px}
.hq-tab:hover{background:var(--gold-wash,#FFF3D9)}
.hq-tab.on{background:var(--ink);color:#FFF8EC}
/* v10.6.1 — tabs by visibility, not by moving nodes. Every panel declares
   its tab with data-hq; the container declares the open tab with data-hq-tab.
   Anything that does not belong to the open tab is simply not displayed, so a
   panel is only ever in ONE place in the document and cannot be duplicated.
   #kidView and the grids are transparent to this: the rule matches at any
   depth, so a panel keeps working wherever it happens to be nested. */
#screen-dash[data-hq-tab] [data-hq]{display:none}
#screen-dash[data-hq-tab="home"]    [data-hq~="home"],
#screen-dash[data-hq-tab="perf"]    [data-hq~="perf"],
#screen-dash[data-hq-tab="rewards"] [data-hq~="rewards"],
#screen-dash[data-hq-tab="more"]    [data-hq~="more"]{display:revert}
/* the stat row is a flex row, not a block, so give it its own restore */
#screen-dash[data-hq-tab="home"] .stat-row[data-hq~="home"]{display:flex}
.hq-child{font-style:normal;font-weight:700;color:var(--ink-soft);font-size:.9rem}
@media (min-width:560px){ .hq-tab{flex-direction:row;gap:8px;font-size:.86rem} }

/* compact two-up actions (notifications) */
.panel.compact{padding:12px}
.mini-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:400px){ .mini-actions{grid-template-columns:1fr} }
.mini-action{position:relative;display:flex;align-items:center;gap:9px;
  padding:12px 34px 12px 13px;border-radius:12px;cursor:pointer;text-align:left;
  background:var(--card);border:1.5px solid var(--cream-line,#EDE2CC);
  font:inherit;font-size:.86rem;font-weight:700;color:var(--ink)}
.mini-action:hover{border-color:var(--custard,#F5A623);background:var(--gold-wash,#FFF3D9)}
.mini-action .ic{width:19px;height:19px;flex:none}
.ma-label{flex:1;line-height:1.3}
.ma-info{position:absolute;top:6px;right:6px;width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--ink-soft);background:none;color:var(--ink-soft);
  font:inherit;font-size:.68rem;font-weight:800;line-height:1;cursor:pointer;padding:0}
.ma-info:hover{background:var(--ink);color:#FFF8EC;border-color:var(--ink)}
.info-pop{position:absolute;z-index:120;padding:11px 13px;border-radius:11px;
  background:var(--ink);color:#FFF8EC;font-size:.8rem;line-height:1.55;
  box-shadow:0 10px 30px rgba(27,37,64,.28)}

/* v10.5.0 — parent marking dialog */
.mark-modal{max-width:440px}
.mark-rows{display:flex;flex-direction:column;gap:9px;margin:12px 0 14px}
.mark-row{display:grid;grid-template-columns:1fr 66px auto 66px;align-items:center;gap:8px}
.mk-sub{font-weight:700;font-size:.9rem;color:var(--ink)}
.mk-of{font-size:.78rem;color:var(--ink-soft)}
.mark-row input{width:100%;text-align:center;padding:9px 6px;border-radius:9px;
  border:1.5px solid var(--cream-line,#EDE2CC);background:var(--card);font:inherit;font-weight:700}
.mark-note{font-size:.76rem;color:var(--ink-soft);margin:2px 0 8px}
@media (max-width:380px){ .mark-row{grid-template-columns:1fr 58px auto 58px;gap:6px} .mk-sub{font-size:.82rem} }
/* the league asterisk */
.lg-manual{color:var(--custard,#F5A623);font-weight:800;margin-left:2px}
.league-footnote{margin-top:12px;padding-top:10px;border-top:1px solid var(--cream-line,#EDE2CC);
  font-size:.76rem;line-height:1.55;color:var(--ink-soft)}

/* v10.5.1 — combined Results card (recent quizzes / badges / report card) */
.seg-switch{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;margin:10px 0 14px;
  padding:4px;background:var(--gold-wash,#FFF3D9);border-radius:11px}
.seg-opt{padding:8px 6px;border:0;border-radius:8px;background:none;cursor:pointer;
  font:inherit;font-size:.8rem;font-weight:700;color:var(--ink-soft);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.seg-opt.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(27,37,64,.12)}
.res-sec{padding:0;background:none;border:0;box-shadow:none}
.res-hidden{display:none}
@media (max-width:380px){ .seg-opt{font-size:.74rem;padding:8px 3px} }

/* ============================================================
   v10.6.0 — DESKTOP EVENNESS
   On a computer the Home cards sit in a grid, and the Term-exams card was
   shorter than its neighbours because its content is smaller — leaving a
   ragged bottom edge. Stretching the grid items makes every card in a row
   the same height regardless of how much is inside it.
   ============================================================ */
@media (min-width:768px){
  .hq-grid,.home-grid,.card-grid{align-items:stretch}
  .hq-grid > .panel,.home-grid > .panel,.card-grid > .panel{display:flex;flex-direction:column;height:100%}
  .hq-grid > .panel > :last-child,.home-grid > .panel > :last-child{margin-top:auto}
}
.curric-borrowed{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;
  background:var(--gold-wash,#FFF3D9);border:1px solid var(--custard,#F5A623);
  font-size:.68rem;font-weight:700;color:var(--tangerine-ink,#C77F14);vertical-align:middle}

/* ============================================================
   v10.6.0 — PLATFORM-ADAPTIVE UI
   One codebase, four sets of conventions. <html data-platform> is set at
   boot (see app.js). Only the things a user actually reads as "native"
   are varied — corner radius, type stack, control height, the shape of the
   tab bar and how focus is shown. Colour, layout and content stay
   identical everywhere, so this can never become four apps to maintain.
   ============================================================ */
:root{
  --r-card:18px; --r-control:12px; --r-pill:999px;
  --control-h:46px; --tap:44px;
  --font-ui:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1); --dur:.18s;
}

/* ---- iOS (26/27 conventions) ----
   Generous corner radii, the system type stack, a translucent floating tab
   bar, and springy motion. Safe-area insets are honoured so nothing hides
   under the home indicator or Dynamic Island. */
html[data-platform="ios"]{
  --r-card:22px; --r-control:14px; --control-h:50px;
  --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Nunito',system-ui,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1); --dur:.34s;
}
html[data-platform="ios"] body{font-family:var(--font-ui);letter-spacing:-.01em}
html[data-platform="ios"] nav.tabbar{
  background:color-mix(in srgb, var(--card) 72%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
html[data-platform="ios"] .btn:active{transform:scale(.97)}
html[data-platform="ios"] .screen-title{font-size:1.9rem;font-weight:800;letter-spacing:-.022em}

/* ---- Android (Material 3 / Material You) ----
   Pill-shaped controls, Roboto, and a filled indicator behind the active
   tab rather than a filled tab — the M3 navigation-bar pattern. */
html[data-platform="android"]{
  --r-card:16px; --r-control:var(--r-pill); --control-h:48px;
  --font-ui:Roboto,'Nunito',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,0,0,1); --dur:.25s;
}
html[data-platform="android"] body{font-family:var(--font-ui)}
html[data-platform="android"] .btn{border-radius:var(--r-pill)}
html[data-platform="android"] nav.tabbar button.on{
  background:transparent;color:var(--ink);position:relative}
html[data-platform="android"] nav.tabbar button.on .ico{
  background:var(--gold-wash,#FFF3D9);border-radius:var(--r-pill);
  padding:4px 16px;box-sizing:content-box}

/* ---- macOS ----
   Denser than touch, real hover states, and a smaller minimum target since
   a pointer is precise. */
html[data-platform="mac"]{
  --r-card:12px; --r-control:9px; --control-h:36px; --tap:30px;
  --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Nunito',system-ui,sans-serif;
  --dur:.14s;
}
html[data-platform="mac"] body{font-family:var(--font-ui)}

/* ---- Windows (Fluent) ----
   Squarer corners and an unmistakable focus ring, which Fluent leans on
   far more than the other three. */
html[data-platform="windows"]{
  --r-card:8px; --r-control:6px; --control-h:38px; --tap:32px;
  --font-ui:'Segoe UI Variable Text','Segoe UI','Nunito',system-ui,sans-serif;
  --dur:.15s;
}
html[data-platform="windows"] body{font-family:var(--font-ui)}
html[data-platform="windows"] :focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}

/* ---- shared: honour the tokens ---- */
.panel{border-radius:var(--r-card)}
.btn{border-radius:var(--r-control);min-height:var(--control-h)}
.hdr-btn,.mini-action{border-radius:var(--r-control)}
button,a[role="button"]{min-height:var(--tap)}
/* pointer devices get hover; touch devices must not inherit sticky :hover */
@media (hover:hover) and (pointer:fine){
  .panel:hover{box-shadow:var(--shadow-pop)}
}
/* respect the OS "reduce motion" setting on every platform */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ============================================================
   v10.6.0 — THE DAY VIEW: quiet cards, gold accent
   Replaces the tinted "filing cabinet" drawers. The old version gave every
   subject its own saturated colour, which meant six competing signals on
   one screen and no way to tell "this is Maths" from "this needs doing".
   Here the card is cream on cream with a hairline edge, the subject mark is
   navy, and colour is spent ONLY on state — sage for done, gold for the
   thing to do next, muted for locked. One accent, used sparingly, reads as
   calm; six accents read as noise.
   ============================================================ */

/* ---- week strip ---- */
.wk{margin:14px 0 12px}
.wk-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.wk-head b{font-size:.92rem;font-weight:800;letter-spacing:.01em;color:var(--ink)}
.wk-nav{display:flex;gap:6px}
.wk-arrow{width:32px;height:32px;border-radius:var(--r-pill);border:1px solid var(--cream-line);
  background:var(--card);color:var(--ink-soft);font-size:1rem;line-height:1;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.wk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wk-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;
  min-height:var(--tap);border:1px solid transparent;border-radius:var(--r-control);
  background:transparent;cursor:pointer;transition:all var(--dur) var(--ease)}
.wd-dow{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.wd-num{font-size:.98rem;font-weight:800;color:var(--ink);line-height:1}
.wd-dot{width:6px;height:6px;border-radius:50%;background:var(--cream-line)}
/* state is the ONLY thing colour says here */
.wk-day.green .wd-dot,.wk-day.done .wd-dot{background:var(--minty)}
.wk-day.amber .wd-dot,.wk-day.part .wd-dot{background:var(--gold)}
.wk-day.red .wd-dot,.wk-day.missed .wd-dot{background:var(--danger)}
.wk-day.locked{opacity:.42;cursor:not-allowed}
.wk-day.locked .wd-dot{background:transparent;border:1px solid var(--cream-line)}
.wk-day.today .wd-num{color:var(--gold-deep)}
.wk-day.sel{background:var(--card);border-color:var(--cream-line);box-shadow:var(--shadow-card)}
.wk-day.sel .wd-dow{color:var(--ink)}

/* ---- the day card ---- */
.today{background:var(--card);border:1px solid var(--cream-line);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow-card)}
.td-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 18px 14px;border-bottom:1px solid var(--cream-line)}
.td-eyebrow{font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.td-date{font-size:1.14rem;font-weight:800;color:var(--ink);margin-top:2px}
.td-count{flex:none;font-size:.76rem;font-weight:800;color:var(--ink-soft);
  background:var(--cream);border:1px solid var(--cream-line);border-radius:var(--r-pill);padding:5px 11px}
.td-count.all{color:var(--minty-ink);border-color:var(--minty)}
.td-empty{padding:22px 18px;color:var(--ink-soft);font-size:.92rem;text-align:center}

/* ---- one subject ---- */
.sr{border-bottom:1px solid var(--cream-line)}
.sr:last-child{border-bottom:0}
.sr-main{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px 10px;
  background:none;border:0;text-align:left;cursor:pointer;min-height:var(--tap)}
/* the gold rule: a hairline under the subject mark, not a filled colour block */
.sr-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;color:var(--ink);
  border-bottom:2px solid var(--gold);border-radius:3px}
.sr-ic .ic{width:24px;height:24px}
.sr-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sr-name{font-size:1rem;font-weight:800;color:var(--ink)}
.sr-topic{font-size:.84rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-status{font-size:.76rem;font-weight:700;color:var(--ink-soft)}
.sr-chev{flex:none;color:var(--ink-soft);font-size:.9rem}
.sr.done .sr-ic{border-bottom-color:var(--minty);opacity:.75}
.sr.done .sr-name{color:var(--ink-soft)}
.sr.done .sr-status{color:var(--minty-ink)}
.sr.part .sr-ic{border-bottom-color:var(--gold)}

.sr-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px 68px}
.sr-btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;
  border-radius:var(--r-control);border:1px solid var(--cream-line);background:var(--cream);
  color:var(--ink);font-family:var(--font-ui);font-size:.84rem;font-weight:800;cursor:pointer;
  transition:all var(--dur) var(--ease)}
.sr-btn .ic{width:17px;height:17px}
/* the single loudest thing on the card is the one action to take next */
.sr-btn.go{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.sr-btn.done{color:var(--minty-ink);border-color:var(--minty);background:transparent}

/* ---- folded term plan ---- */
.sr-detail{padding:2px 18px 16px 68px;border-top:1px solid var(--cream-line);margin-top:2px}
.sd-term{font-size:.76rem;font-weight:800;letter-spacing:.02em;color:var(--ink-soft);margin:12px 0 8px}
.sd-note{font-size:.8rem;color:var(--ink-soft);margin-top:8px;line-height:1.45}
.sd-weeks{display:flex;flex-wrap:wrap;gap:6px}
.sd-week{width:32px;height:32px;border-radius:var(--r-control);border:1px solid var(--cream-line);
  background:var(--cream);color:var(--ink-soft);font-family:var(--font-ui);font-size:.8rem;
  font-weight:800;cursor:pointer;transition:all var(--dur) var(--ease)}
.sd-week.completed,.sd-week.mastered{color:var(--minty-ink);border-color:var(--minty)}
.sd-week.locked{opacity:.4;cursor:not-allowed}
.sd-week.now{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.sd-journey{display:block;width:100%;margin-top:10px;padding:10px 14px;border-radius:var(--r-control);
  border:1px solid var(--cream-line);background:var(--cream);color:var(--ink);
  font-family:var(--font-ui);font-size:.84rem;font-weight:800;text-align:left;cursor:pointer}
.sd-tests{margin-top:14px;padding-top:12px;border-top:1px solid var(--cream-line)}
.sd-lab{font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px}
.sd-tests .sr-actions{padding:0}

/* ---- footer ---- */
.day-complete{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  font-size:.9rem;font-weight:800;color:var(--minty-ink)}
.day-complete .ic{width:18px;height:18px}
.day-tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}

/* hover only where there is a real pointer, so touch never sticks */
@media (hover:hover) and (pointer:fine){
  .wk-day:not(.locked):hover{background:var(--cream);border-color:var(--cream-line)}
  .wk-arrow:hover{background:var(--cream);color:var(--ink)}
  .sr-btn:hover{border-color:var(--gold);color:var(--gold-deep)}
  .sr-btn.go:hover{background:var(--gold-2);color:var(--navy-deep)}
  .sd-week:not(.locked):hover{border-color:var(--gold)}
}
/* roomier on a desktop, where there is width to spend */
@media (min-width:760px){
  .td-head{padding:20px 24px 16px}
  .sr-main{padding:16px 24px 12px}
  .sr-actions{padding:0 24px 16px 74px}
  .sr-detail{padding:2px 24px 18px 74px}
  .sr-topic{white-space:normal}
}
/* dark mode keeps the same logic: quiet surface, gold only for the next action */
[data-theme="dark"] .today,[data-theme="dark"] .wk-day.sel{background:var(--card);border-color:var(--cream-line)}
[data-theme="dark"] .sr-btn{background:transparent}


/* ---- Subjects of study: the checkbox row ----
   The two language options were inline-flex labels separated by a right
   margin, so on a narrow phone French and Spanish wrapped unevenly and the
   boxes drifted away from their words. A two-column grid keeps each box
   locked to its own label at every width. */
.sj-langs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:6px}
.sj-opt{display:flex;align-items:center;gap:9px;min-height:var(--tap);padding:9px 12px;
  border:1px solid var(--cream-line);border-radius:var(--r-control);background:var(--cream);
  font-weight:700;font-size:.88rem;cursor:pointer}
.sj-opt input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--gold-deep);cursor:pointer}
.sj-opt:has(input:checked){border-color:var(--gold);background:var(--gold-wash)}
.sj-chip{display:inline-block;background:var(--cream);border:1px solid var(--cream-line);border-radius:var(--r-pill);padding:3px 10px;margin:2px 4px 2px 0;font-size:.78rem;font-weight:700;color:var(--ink)}
.sj-now{font-size:.8rem;color:var(--ink-soft);margin-bottom:10px}