/* =====================================================================
   MATHS QUEST – styles
   Colours come from the theme variables (set by applyLook() in core.js).
   Reading-friendly options add classes to <body>:
     tsize-large / tsize-xl  → bigger reading text (--ts)
     spaced                  → extra letter, word and line spacing
     tint-cream … tint-pink  → soft page tint (separate from shop themes)
   No italics and no all-caps anywhere, on purpose.
   ===================================================================== */
:root{
  --brand:#3b82f6; --brand2:#06b6d4; --bg1:#dbeafe; --bg2:#f0f9ff;
  --ink:#0f172a; --muted:#5b6b80; --card:#ffffff; --soft:#e0efff; --pat:rgba(59,130,246,.10);
  --good:#16a34a; --goodbg:#dcfce7; --near:#c2410c; --nearbg:#ffedd5; --gold:#f59e0b;
  --line:rgba(15,23,42,.08); --shadow:0 4px 0 rgba(15,23,42,.07), 0 10px 22px rgba(15,23,42,.07);
  --r:20px; --ts:1; --hl:#fde047;
}
body.dark{ --line:rgba(255,255,255,.1); --shadow:0 4px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.3); --goodbg:#14532d; --nearbg:#431407; --good:#4ade80; --near:#fb923c; --hl:#a16207; }
body.tsize-large{--ts:1.15} body.tsize-xl{--ts:1.32}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;font-style:normal}
em,i,cite,var,dfn{font-style:normal}
html,body{margin:0;min-height:100%}
body{
  font-family:"Nunito","Varela Round",ui-rounded,"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--ink); background-color:var(--bg2); background-attachment:fixed;
  overscroll-behavior:none; user-select:none; -webkit-user-select:none; touch-action:manipulation;
  text-align:left;
}
button,select{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
select{background:var(--soft);border-radius:12px;padding:10px;font-weight:800;width:100%}
#app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* ---- reading text: these scale with the text-size setting ---- */
p,.bubble,.tip,.hint,.wordq,.muted,small,h3,.step-txt,.lvl-desc,.modal p,.guide-prompt,.nudge,.sline{font-size:calc(var(--fsz,15px) * var(--ts))}
small{--fsz:13px} h3{--fsz:17px}
body.spaced p, body.spaced .bubble, body.spaced .tip, body.spaced .hint, body.spaced .wordq, body.spaced small,
body.spaced .step-txt, body.spaced .lvl-desc, body.spaced .modal p, body.spaced .guide-prompt, body.spaced h3, body.spaced .nudge, body.spaced b{
  letter-spacing:.06em; word-spacing:.18em; line-height:1.65}

/* ---- soft tints (override page background, soften cards) ---- */
body[class*="tint-"]:not(.dark){background-image:none!important}
body.tint-cream:not(.dark){background-color:#fbf3dc!important;--card:#fffaf0;--bg2:#fbf3dc}
body.tint-blue:not(.dark){background-color:#dcebf7!important;--card:#f5faff;--bg2:#dcebf7}
body.tint-yellow:not(.dark){background-color:#fbf6c6!important;--card:#fffde8;--bg2:#fbf6c6}
body.tint-green:not(.dark){background-color:#dcf0dc!important;--card:#f6fcf5;--bg2:#dcf0dc}
body.tint-pink:not(.dark){background-color:#f9e1ea!important;--card:#fff7fa;--bg2:#f9e1ea}

/* ---- read-aloud ---- */
.sayb{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft);font-size:17px;flex:none;
  vertical-align:middle;cursor:pointer;line-height:1;box-shadow:inset 0 -2px 0 var(--line)}
.sayb:active{transform:translateY(1px)}
.sayb.sm{width:28px;height:28px;font-size:14px}
.sayb.corner{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.85);color:#0f172a}
.no-speech .sayb{display:none!important}
.w{border-radius:6px;transition:background .1s}
.w.on{background:var(--hl);box-shadow:0 0 0 2px var(--hl)}
.reading{background:color-mix(in srgb,var(--hl) 55%,transparent);border-radius:8px}
.saying .sayb[data-active]{background:var(--hl)}

/* ---- maths display ---- */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;margin:0 .08em;font-size:.72em}
.fr>span{padding:0 .12em}
.fr>span:first-child{border-bottom:.09em solid currentColor;padding-bottom:.06em}
.fr>span:last-child{padding-top:.06em}
.mixw{margin-right:.04em}
.punc{margin:0 .3em 0 .06em}

/* ---- top bar ---- */
.topbar{display:flex;align-items:center;gap:6px;padding:10px 12px 6px;position:sticky;top:0;z-index:5}
.topbar h2{flex:1;margin:0;font-size:19px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:42px;height:42px;border-radius:14px;background:var(--card);box-shadow:var(--shadow);font-size:19px;display:grid;place-items:center;flex:none;font-weight:900}
.icon-btn:active{transform:translateY(2px)}
.icon-btn.hide{visibility:hidden}
.star-pill{display:flex;align-items:center;gap:5px;background:var(--card);box-shadow:var(--shadow);border-radius:999px;padding:8px 12px;font-weight:900;font-size:17px;flex:none}
.star-pill.pop{animation:pop .35s}
@keyframes pop{50%{transform:scale(1.25)}}

.screen{flex:1;padding:6px 14px 22px;display:flex;flex-direction:column;gap:14px;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
h1{margin:0;font-size:27px;font-weight:900;line-height:1.1}
h3{margin:4px 0 0;font-weight:900}
p{margin:0;line-height:1.4}
.muted{color:var(--muted);--fsz:14px}
.btn{display:block;width:100%;padding:15px;border-radius:18px;font-weight:900;font-size:18px;color:#fff;text-align:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),var(--shadow)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.btn.ghost{background:var(--card);color:var(--ink)}
.btn.warn{background:linear-gradient(135deg,#f97316,#ef4444)}
.btn.small{padding:11px;font-size:16px;border-radius:14px}
.btn[disabled]{opacity:.45;pointer-events:none}
.row{display:flex;gap:10px}.row>*{flex:1}
.row>.sayb,.row>h3+.sayb{flex:none}

/* ---- home ---- */
.hero{display:flex;align-items:center;gap:12px;padding:14px}
.hero .nova-wrap{flex:none}
.bubble{margin-top:8px;background:var(--soft);padding:10px 12px;border-radius:14px 14px 14px 4px;font-weight:700;line-height:1.35;display:flex;gap:8px;align-items:flex-start}
.bubble>span:first-child{flex:1}
.chips{display:flex;gap:10px}
.chip{flex:1;background:var(--card);box-shadow:var(--shadow);border-radius:16px;padding:10px 8px;font-weight:800;font-size:15px;text-align:center}
.chip b{font-size:20px}
.daily{display:flex;flex-direction:column;gap:6px}
.daily .lbl{font-size:14px;font-weight:900;color:var(--brand)}
.daily.done{background:linear-gradient(135deg,var(--goodbg),var(--card))}
.daily .dtop{display:flex;gap:8px;align-items:center}
.daily .dtop b{flex:1}
.bar{height:12px;border-radius:99px;background:var(--soft);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width .4s}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode{border-radius:22px;padding:16px 12px;text-align:left;color:#fff;display:flex;flex-direction:column;gap:2px;min-height:124px;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),var(--shadow);position:relative;overflow:hidden}
.mode:active{transform:translateY(2px)}
.mode .e{font-size:36px;line-height:1;margin-bottom:auto}
.mode b{font-size:18px;font-weight:900;line-height:1.15}
.mode small{opacity:.95;font-weight:700}
.mode.wide{grid-column:1 / -1;min-height:96px}
.m-practice{background:linear-gradient(135deg,#22c55e,#0ea5e9)}
.m-clock{background:linear-gradient(135deg,#f97316,#eab308)}
.m-check{background:linear-gradient(135deg,#8b5cf6,#3b82f6)}
.m-boss{background:linear-gradient(135deg,#ec4899,#f43f5e)}
.m-times{background:linear-gradient(135deg,#3b82f6,#06b6d4)}
.m-arith{background:linear-gradient(135deg,#10b981,#0d9488)}
.m-mock{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.m-forest{background:linear-gradient(135deg,#16a34a,#65a30d)}
.m-map{background:linear-gradient(135deg,#0ea5e9,#22c55e)}
.dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dock button{background:var(--card);box-shadow:var(--shadow);border-radius:18px;padding:10px 4px;font-weight:800;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
.dock button span.e{font-size:26px}
.dock button:active{transform:translateY(2px)}
.dock .sayb{position:absolute;top:3px;right:3px;width:22px;height:22px;font-size:11px}

/* ---- world map (top level) ---- */
.wlist{display:flex;flex-direction:column;gap:12px}
.wcard{display:flex;align-items:center;gap:12px;border-radius:22px;padding:14px;color:#fff;text-align:left;width:100%;position:relative;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),var(--shadow)}
.wcard .we{font-size:40px;flex:none}
.wcard .wi{flex:1}
.wcard b{font-size:19px}
.wcard .bar{background:rgba(255,255,255,.35);margin-top:6px;height:9px}
.wcard .bar>i{background:#fff}
.wcard.soon{background:var(--card)!important;color:var(--muted);box-shadow:var(--shadow);opacity:.8}

/* ---- practice picker ---- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tbtn{background:var(--card);box-shadow:var(--shadow);border-radius:20px;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.tbtn:active{transform:translateY(2px)}
.tbtn b{font-size:30px;font-weight:900;line-height:1}
.tbtn .bar{width:80%;height:8px}
.tbtn small{font-weight:800;color:var(--muted)}

/* ---- level list (arithmetic world) ---- */
.lvl{display:flex;align-items:center;gap:12px;background:var(--card);box-shadow:var(--shadow);border-radius:20px;padding:12px;text-align:left;width:100%}
.lvl:active{transform:translateY(2px)}
.lvl .ln{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:var(--soft)}
.lvl .li{flex:1;min-width:0}
.lvl .li b{display:block;font-size:16px;line-height:1.2}
.lvl .bar{height:8px;margin-top:6px}
.lvl .tag{font-size:12px;font-weight:900;border-radius:99px;padding:4px 8px;background:var(--soft);white-space:nowrap}
.lvl .tag.secure{background:var(--goodbg);color:var(--good)}
.lvl .tag.learning{background:#fef3c7;color:#78350f}
.lvl.locked{opacity:.55}
.lvl.next{box-shadow:0 0 0 3px var(--brand),var(--shadow)}
.vchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vchip{border-radius:12px;padding:6px 10px;font-weight:800;font-size:14px;background:var(--soft)}
.vchip.secure{background:var(--goodbg)} .vchip.learning{background:#fef3c7;color:#78350f}
body.dark .lvl .tag.learning, body.dark .vchip.learning{background:#422006;color:#fde68a}

/* ---- quiz ---- */
.quiz{display:flex;flex-direction:column;gap:9px;flex:1;position:relative}
.qtop{display:flex;align-items:center;gap:8px;min-height:50px}
.qstat{background:var(--card);box-shadow:var(--shadow);border-radius:14px;padding:8px 12px;font-weight:900;font-size:16px;white-space:nowrap}
.qstat.hot{background:linear-gradient(135deg,#fde68a,#fb923c);color:#7c2d12}
.companion{margin-left:auto;position:relative;font-size:40px;line-height:1;display:grid;place-items:center;width:50px;height:50px}
.companion.hop{animation:hop .5s}
@keyframes hop{30%{transform:translateY(-14px) rotate(-8deg)}60%{transform:translateY(0) rotate(4deg)}}
.companion.wobble{animation:wob .6s}
@keyframes wob{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.say{position:absolute;right:54px;top:6px;background:var(--card);box-shadow:var(--shadow);border-radius:12px;padding:5px 9px;font-size:14px;font-weight:900;white-space:nowrap;opacity:0;transform:scale(.6);transition:.2s;pointer-events:none}
.say.show{opacity:1;transform:scale(1)}
.tbar{height:10px;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;flex:none}
.tbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width .3s}
.tbar.low>i{background:linear-gradient(90deg,#f97316,#ef4444)}
.qcard{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:14px 12px 12px;transition:background .2s, transform .2s;position:relative}
.qcard.good{background:var(--goodbg)}
.qcard.near{background:var(--nearbg)}
.qcard.in{animation:qin .25s ease}
@keyframes qin{from{transform:scale(.94);opacity:.3}}
.qcard>.sayb{position:absolute;top:10px;left:10px}
.qcard .qtag{display:block;text-align:center;font-size:13px;font-weight:900;color:var(--muted);margin:0 38px;min-height:16px;line-height:1.2}
.qtext{overflow-wrap:anywhere;font-size:clamp(42px,12.5vw,62px);font-weight:900;letter-spacing:.01em;line-height:1.15;text-align:center;padding:4px 30px 0}
.qtext.mid{font-size:clamp(32px,9vw,44px)}
.qtext.long{font-size:clamp(26px,7.4vw,36px)}
.qtext .wordq{display:block;font-size:calc(17px * var(--ts));font-weight:800;text-align:left;margin-bottom:4px;line-height:1.3}
.ansrow{display:flex;justify-content:center;align-items:center}
.ans{margin:6px auto 0;min-width:140px;display:inline-flex;align-items:center;justify-content:center;font-size:clamp(38px,11vw,52px);font-weight:900;color:var(--brand);
  border-bottom:5px solid var(--soft);padding:0 14px;min-height:62px}
.caret{width:4px;height:42px;background:var(--brand);border-radius:2px;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* fraction answer boxes */
.fans{display:inline-flex;align-items:center;gap:8px;margin-top:6px;color:var(--brand);font-weight:900}
.fans .col{display:flex;flex-direction:column;align-items:center;gap:4px}
.fbox{min-width:62px;height:50px;border-radius:12px;border:3px dashed var(--line);display:grid;place-items:center;font-size:32px;font-weight:900;padding:0 6px;background:var(--bg2)}
.fbox.whole{height:64px;min-width:58px;font-size:38px}
.fbox.focus{border:3px solid var(--brand);background:var(--card)}
.fline{width:100%;height:5px;border-radius:3px;background:var(--ink);opacity:.8}
.fbox .ph{color:var(--muted);font-size:14px;font-weight:800;opacity:.7}
.praise{min-height:26px;margin-top:4px;font-weight:900;font-size:18px;text-align:center}
.praise.good{color:var(--good)} .praise.near{color:var(--near)}
.padwrap{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tool{background:var(--card);box-shadow:var(--shadow);border-radius:14px;padding:8px 12px;font-weight:900;font-size:15px;flex:none}
.tool.faded{opacity:.6}
.tool:active{transform:translateY(2px)}
.hintbox{display:flex;gap:8px;align-items:flex-start;background:var(--soft);border-radius:14px;padding:8px 10px}
.hintbox.hidden{display:none}
.hint{font-weight:800;line-height:1.35;flex:1}
.pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pad.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pad button{height:clamp(52px,8.4vh,72px);border-radius:18px;background:var(--card);box-shadow:inset 0 -5px 0 var(--line),var(--shadow);font-size:30px;font-weight:900}
.pad button:active{transform:translateY(3px);box-shadow:inset 0 -2px 0 var(--line)}
.pad .k-ok{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),var(--shadow)}
.pad .k-del{background:var(--soft);font-size:26px}
.pad .k-x{background:var(--soft);font-size:20px}
.pad.four .k-ok{grid-row:span 2;height:auto}
.pad.four .k-zero{grid-column:span 3}
.boss-area{display:flex;flex-direction:column;align-items:center;gap:6px}
.boss{transition:transform .2s;position:relative}
.boss.hit{animation:hit .4s}
@keyframes hit{20%{transform:translateX(-10px) rotate(-6deg);filter:brightness(1.6)}50%{transform:translateX(9px) rotate(5deg)}80%{transform:translateX(-4px)}}
.boss.idle svg{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.boss.laugh{animation:laugh .5s}
@keyframes laugh{30%{transform:scale(1.08,.94)}60%{transform:scale(.96,1.05)}}
.hpwrap{width:78%;display:flex;align-items:center;gap:8px;font-weight:900;font-size:14px}
.hp{flex:1;height:14px;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.hp>i{display:block;height:100%;background:linear-gradient(90deg,#ef4444,#f97316);transition:width .3s}
.hearts{font-size:19px;letter-spacing:2px}
.dmg{position:absolute;left:50%;top:10px;font-weight:900;font-size:24px;color:#ef4444;text-shadow:0 2px 0 #fff;animation:dmg .8s forwards;pointer-events:none;white-space:nowrap}
@keyframes dmg{to{transform:translate(-50%,-50px);opacity:0}}
.count{position:absolute;inset:0;display:grid;place-items:center;font-size:110px;font-weight:900;color:var(--brand);z-index:4;background:color-mix(in srgb,var(--bg2) 80%,transparent);border-radius:20px}
.count span{animation:cnt .8s ease}
@keyframes cnt{from{transform:scale(2);opacity:0}30%{transform:scale(1);opacity:1}}

/* ---- bottom sheets ---- */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet.hidden{display:none}
.sheet-in{background:var(--card);width:100%;max-width:560px;border-radius:28px 28px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom));
  max-height:90vh;overflow:auto;animation:up .3s ease;display:flex;flex-direction:column;gap:10px}
.sheet-in.tall{height:94vh;max-height:94vh}
@keyframes up{from{transform:translateY(60%)}}
.sheet-head{display:flex;align-items:center;gap:8px}
.sheet-head .t{flex:1;font-size:21px;font-weight:900}
.near-title{font-size:22px;font-weight:900;color:var(--near)}
.big-eq{font-size:36px;font-weight:900;text-align:center;line-height:1.25}
.big-eq b{color:var(--good)}
.tip{font-weight:700;line-height:1.4;background:var(--soft);border-radius:14px;padding:10px 12px;display:flex;gap:8px;align-items:flex-start}
.tip>span:first-child{flex:1}
.dots{display:flex;flex-direction:column;align-items:center;gap:3px;margin:2px auto}
.drow{display:flex;gap:3px}
.drow i{width:var(--d);height:var(--d);border-radius:50%;background:var(--brand)}
.drow:nth-child(even) i{background:var(--brand2)}
.dcap{font-size:13px;font-weight:800;color:var(--muted);margin-top:4px}

/* ---- method cards ---- */
.steps{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.step{display:flex;gap:10px;align-items:flex-start;background:var(--soft);border-radius:16px;padding:10px}
.step .num{flex:none;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:900;display:grid;place-items:center}
.step-txt{flex:1;font-weight:700;line-height:1.4}
.example{background:var(--bg2);border-radius:16px;padding:12px;display:flex;justify-content:center}
.nudge{background:var(--goodbg);border-radius:14px;padding:10px 12px;font-weight:800;display:flex;gap:8px;align-items:flex-start}
.nudge>span:first-child{flex:1}

/* ---- working grids (method examples + guided working) ---- */
.wgrid{display:inline-grid;gap:2px 0;font-weight:900;font-size:24px;font-variant-numeric:tabular-nums;font-family:ui-monospace,"Roboto Mono",Menlo,monospace}
.wgrid .c{width:1.15em;height:1.45em;display:grid;place-items:center;border-radius:6px}
.wgrid .c.op{color:var(--muted)}
.wgrid .c.ul{border-bottom:3px solid var(--ink)}
.wgrid .c.ol{border-top:3px solid var(--ink)}
.wgrid .c.bl{border-left:3px solid var(--ink)}
.wgrid .c.small{font-size:.55em;color:var(--brand);align-self:start}
.wgrid .c.hi{background:#fef08a;color:#0f172a}
.wgrid .c.act{background:var(--soft);color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.wgrid .c.bad{background:var(--nearbg)}
.wgrid .c.good{color:var(--good)}
.wgrid .c.q{color:var(--brand)}
.gwrap{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.gscroll{overflow:auto;background:var(--bg2);border-radius:16px;padding:10px;display:flex;justify-content:center;flex:1 1 auto;min-height:120px}
.guide-prompt{font-weight:800;line-height:1.35;background:var(--soft);border-radius:14px;padding:10px 12px;display:flex;gap:8px;align-items:flex-start;--fsz:16px}
.guide-prompt>span:first-child{flex:1}
.guide-prompt.slip{background:var(--nearbg)}
.guide-prompt.yay{background:var(--goodbg)}
.ginput{display:flex;align-items:center;justify-content:center;gap:10px}
.ginput .ans{min-height:52px;font-size:38px;margin:0}
.multiples{display:flex;flex-wrap:wrap;gap:6px;font-weight:800;font-size:14px}
.multiples span{background:var(--card);border-radius:8px;padding:3px 7px;box-shadow:inset 0 0 0 1px var(--line)}
.gpad .pad button{height:48px;font-size:26px}

/* ---- results ---- */
.result-hero{text-align:center;padding:22px 16px}
.result-hero .big{font-size:70px;line-height:1}
.result-hero h1{margin-top:8px}
.result-hero .score{font-size:44px;font-weight:900;color:var(--brand);margin-top:6px}
.newbest{display:inline-block;margin-top:8px;background:linear-gradient(135deg,#fde68a,#f59e0b);color:#78350f;border-radius:99px;padding:6px 14px;font-weight:900;animation:pop .6s 2}
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{background:var(--card);box-shadow:var(--shadow);border-radius:16px;padding:10px 6px;text-align:center}
.stat b{display:block;font-size:22px;font-weight:900}
.stat small{font-weight:800;color:var(--muted)}
.factchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.factchip{background:var(--nearbg);color:var(--ink);border-radius:12px;padding:6px 10px;font-weight:900}
.linklist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.linklist button{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:14px;padding:10px 12px;font-weight:900;text-align:left}
.linklist button span{flex:1}
.review{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.review div{display:flex;gap:8px;align-items:center;background:var(--soft);border-radius:12px;padding:8px 10px;font-weight:800;font-size:15px;flex-wrap:wrap}
.review div .qq{flex:1;min-width:120px}

/* ---- times map ---- */
.mapwrap{background:linear-gradient(180deg,#7dd3fc,#38bdf8);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;position:relative}
body.dark .mapwrap{background:linear-gradient(180deg,#1e3a8a,#0c4a6e)}
.mapwrap svg{display:block;width:100%;height:auto}
.island{cursor:pointer}
.island .glow{animation:glow 2s ease-in-out infinite}
@keyframes glow{50%{opacity:.35}}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13px;font-weight:800;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:4px;vertical-align:-1px}

/* ---- table detail ---- */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ftile{border-radius:14px;padding:10px 4px;text-align:center;font-weight:900;font-size:17px;background:var(--soft)}
.ftile small{display:block;font-size:12px;font-weight:800;opacity:.8}
.f-new{background:var(--soft);color:var(--muted)}
.f-shaky{background:var(--nearbg)}
.f-learn{background:#fef3c7;color:#78350f}
.f-master{background:var(--goodbg)}
body.dark .f-learn{background:#422006;color:#fde68a}

/* ---- badges ---- */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.badge{background:var(--card);box-shadow:var(--shadow);border-radius:18px;padding:12px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.badge .bicon{font-size:38px;line-height:1.1;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff7d6,#fcd34d);box-shadow:0 0 0 3px #f59e0b inset}
.badge .bicon.num{font-size:20px;font-weight:900;color:#78350f}
.badge b{font-size:13px;line-height:1.15}
.badge small{font-size:11px;color:var(--muted);font-weight:700;line-height:1.2}
.badge.locked .bicon{filter:grayscale(1);opacity:.35;background:var(--soft);box-shadow:0 0 0 3px var(--line) inset}
.badge.locked b{opacity:.55}

/* ---- shop ---- */
.tabs{display:flex;gap:6px;background:var(--card);box-shadow:var(--shadow);border-radius:16px;padding:5px}
.tabs button{flex:1;padding:10px 4px;border-radius:12px;font-weight:900;font-size:14px}
.tabs button.on{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.item{background:var(--card);box-shadow:var(--shadow);border-radius:20px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.item .prev{height:84px;width:100%;border-radius:14px;display:grid;place-items:center;font-size:48px;background:var(--soft);overflow:hidden}
.item b{font-size:16px}
.item .act{width:100%;padding:9px;border-radius:12px;font-weight:900;font-size:15px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.item .act.equipped{background:var(--goodbg);color:var(--good)}
.item .act.equip{background:var(--soft);color:var(--ink)}
.item .act.cant{background:var(--soft);color:var(--muted)}
.swatch{display:flex;gap:6px}.swatch i{width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 2px #fff}

/* ---- bosses list ---- */
.blist{display:flex;flex-direction:column;gap:12px}
.bcard{display:flex;align-items:center;gap:12px;background:var(--card);box-shadow:var(--shadow);border-radius:20px;padding:10px 14px;text-align:left;width:100%}
.bcard .info{flex:1}
.bcard .tag{font-weight:900;font-size:13px;border-radius:99px;padding:5px 10px;background:var(--soft)}
.bcard .tag.ready{background:linear-gradient(135deg,#ec4899,#f43f5e);color:#fff}
.bcard .tag.won{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#78350f}
.bcard.locked .bmini{filter:grayscale(1) brightness(.4);opacity:.6}

/* ---- mock paper ---- */
.mtop{display:flex;align-items:center;gap:8px}
.mtime{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;color:var(--muted)}
.mtime #mHide{white-space:nowrap;letter-spacing:0;word-spacing:0;flex:none}
.mtime .tbar[style*="hidden"]{flex:0 1 0;min-width:0}
.mtime .tbar{flex:1}
.mtime .tbar>i{background:linear-gradient(90deg,#a5b4fc,#c4b5fd)}
.mnav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.mnav button{height:44px;border-radius:12px;font-weight:900;background:var(--soft)}
.mnav button.done{background:var(--goodbg);color:var(--good)}
.mnav button.skip{background:#fef3c7;color:#78350f}
.mnav button.cur{box-shadow:0 0 0 3px var(--brand)}
.mbtns{display:flex;gap:8px;flex-wrap:wrap}
.mbtns .tool{flex:1 1 auto;min-width:0;text-align:center;padding:8px 8px}
body.font-dyslexic .mbtns .tool,body.font-clear .mbtns .tool{font-size:14px;letter-spacing:0}
.marks{font-size:13px;font-weight:900;color:var(--muted)}

/* ---- grown-ups ---- */
.pin-dots{display:flex;gap:14px;justify-content:center;margin:12px 0}
.pin-dots i{width:20px;height:20px;border-radius:50%;background:var(--soft);box-shadow:inset 0 0 0 2px var(--line)}
.pin-dots i.on{background:var(--brand)}
.shake{animation:shk .4s}
@keyframes shk{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.accrow{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;margin:6px 0}
.accrow .lab{width:34px}
.accrow .lab.wide{width:auto;flex:0 0 46%;font-size:13px;line-height:1.2}
.accrow .bar{flex:1;height:14px}
.accrow .pct{width:96px;text-align:right;color:var(--muted);font-size:13px;white-space:nowrap}
.status{font-size:12px;font-weight:900;border-radius:99px;padding:3px 8px;white-space:nowrap}
.status.secure{background:var(--goodbg);color:var(--good)}
.status.learning{background:#fef3c7;color:#78350f}
.status.new{background:var(--soft);color:var(--muted)}
.sess{display:flex;align-items:flex-end;gap:5px;height:110px;margin-top:10px}
.sess div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;font-size:11px;font-weight:800;color:var(--muted)}
.sess div i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--brand2),var(--brand));min-height:3px}
.hard{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.hard span{background:var(--nearbg);border-radius:12px;padding:6px 10px;font-weight:900;font-size:15px}
.hard span small{font-weight:700;color:var(--muted)}
.toggles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:8px}
.toggles button{padding:10px 0;border-radius:12px;font-weight:900;background:var(--soft);color:var(--muted)}
.toggles button.on{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.seg{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.seg button{flex:1;padding:10px 4px;border-radius:12px;font-weight:900;background:var(--soft);font-size:14px;min-width:60px;overflow-wrap:break-word;line-height:1.2}
.seg button.on{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.seg.tint button{min-width:44px;height:44px;border:3px solid transparent}
.seg.tint button.on{border-color:var(--ink);color:var(--ink)}
.set-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.set-row button{flex:1;min-width:120px;padding:12px;border-radius:14px;font-weight:900;background:var(--soft)}
.setlbl{margin-top:16px;display:flex;align-items:center;gap:8px}
.setlbl h3{flex:1;margin:0}
.countdown{display:flex;align-items:center;gap:12px}
.countdown b.n{font-size:40px;font-weight:900;color:var(--brand);line-height:1}
.mockbars{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:10px}
.mockbars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px;font-size:11px;font-weight:800;color:var(--muted)}
.mockbars div i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#a78bfa,#6366f1)}

/* ---- overlays ---- */
.overlay{position:fixed;inset:0;z-index:30;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:18px}
.overlay.hidden{display:none}
.modal{background:var(--card);border-radius:28px;padding:22px 18px 16px;width:100%;max-width:370px;max-height:92vh;overflow:auto;display:flex;flex-direction:column;gap:10px;animation:mpop .35s cubic-bezier(.3,1.6,.6,1);position:relative}
@keyframes mpop{from{transform:scale(.6);opacity:0}}
.modal .micon{font-size:72px;line-height:1;animation:spin-in .7s ease;text-align:center}
.modal .micon .bicon{margin:0 auto;width:92px;height:92px;font-size:54px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7d6,#fcd34d);box-shadow:0 0 0 3px #f59e0b inset}
.modal .micon .bicon.num{font-size:34px;font-weight:900;color:#78350f}
@keyframes spin-in{from{transform:rotate(-200deg) scale(0)}}
.modal h2{margin:0;font-size:23px;font-weight:900;text-align:center}
.modal .mtext{display:flex;gap:8px;align-items:flex-start}
.modal p{font-weight:700;color:var(--muted);line-height:1.4;flex:1;text-align:left}
.modal .kicker{font-size:14px;font-weight:900;color:var(--brand);text-align:center}
.modal>.sayb{position:absolute;top:12px;right:12px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:40;width:100%;height:100%}
.toast{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));transform:translate(-50%,-220%);z-index:35;background:var(--card);box-shadow:var(--shadow);
  border-radius:16px;padding:10px 16px;font-weight:900;transition:transform .3s, visibility .3s;max-width:92vw;text-align:center;visibility:hidden}
.toast.show{transform:translate(-50%,0);visibility:visible}
.fly{position:fixed;z-index:36;font-size:26px;pointer-events:none}
.install{background:var(--card);box-shadow:var(--shadow);border-radius:16px;padding:12px;font-weight:900;text-align:center}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}
@media (min-height:820px){.qtext{font-size:66px}}
.quiz.is-boss{gap:6px}
.quiz.is-boss .qcard{padding:8px 12px 6px}
.quiz.is-boss .qtext:not(.mid):not(.long){font-size:clamp(36px,10.5vw,50px)}
.quiz.is-boss .ans{min-height:50px;font-size:clamp(32px,10vw,44px)}
.quiz.is-boss .caret{height:34px}
.quiz.is-boss .praise{min-height:22px;font-size:16px;margin-top:2px}
.quiz.is-boss .qtop{min-height:44px}
@media (max-height:720px){.quiz.is-boss .boss svg{width:64px;height:64px}.quiz.is-boss .boss-area{gap:2px}.quiz.is-boss .hearts{font-size:15px}}
@media (max-height:760px){.pad button{height:50px}.qcard{padding:10px 12px 8px}.ans{min-height:52px}.fbox{height:44px}.fbox.whole{height:56px}.qtop{min-height:44px}.companion{width:44px;height:44px;font-size:34px}}
@media (max-height:680px){.qcard .qtag{display:none}.qcard{padding:6px 10px 6px}.qcard>.sayb{top:6px;left:6px}.qtop{min-height:40px}.qstat{padding:6px 10px;font-size:15px}
  .fbox{height:38px;min-width:54px;font-size:26px}.fbox.whole{height:48px;font-size:30px}.fans{margin-top:2px;gap:6px}.fans .col{gap:3px}
  .ans{min-height:46px;margin-top:2px}.caret{height:34px}.praise{min-height:20px;font-size:15px;margin-top:2px}
  .qtext.mid{font-size:30px}.qtext.long{font-size:24px}.qtext .wordq{font-size:calc(15px * var(--ts))}.padwrap{gap:6px}.quiz{gap:7px}.pad button{height:46px;font-size:26px}.pad.four{gap:6px}.pad{gap:8px}.tools .tool{padding:6px 10px;font-size:14px}}

/* ---- Fraction Forest: pictures inside questions, fact tables ---- */
.qvis{display:flex;justify-content:center;margin:2px 0 4px}
.qvis svg,.example svg{max-width:340px;width:100%;height:auto}
.qvis svg{max-height:min(150px,19vh)}
.quiz:has(.qvis) .pad button{height:clamp(46px,6.6vh,62px)}
.qtext .qvis{margin:0 -22px}
.nl-line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.nl-tick{stroke:var(--ink);stroke-width:2.5}
.nl-lab{fill:var(--ink);font-weight:900;font-size:21px;font-family:sans-serif}
.nl-arrow{fill:var(--brand)}
.nl-ans{fill:var(--good);font-weight:900;font-size:16px;font-family:sans-serif}
.ftable{border-collapse:separate;border-spacing:4px;font-weight:900;font-size:18px;text-align:center}
.ftable th{font-size:13px;color:var(--muted);font-weight:900}
.ftable td{background:var(--card);border-radius:8px;padding:6px 10px}
@media (max-height:680px){.qvis svg{max-height:98px}.qtext .wordq{margin-bottom:0}}

/* ---- Reasoning Reef: word problems ---- */
.m-reef{background:linear-gradient(135deg,#0891b2,#6366f1)}
.qtext.has-story{text-align:left;padding:2px 4px 0 38px}
.story{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.sline{--fsz:17px;font-weight:700;line-height:1.35;margin:0}
.qtext .wordq.ask{font-weight:900;color:var(--brand);margin-top:4px}
.qtext.has-story + .ansrow{justify-content:center}
.bd-step{font-weight:900;color:var(--muted);font-size:14px}
.chips2{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0}
.chips2 button{min-width:64px;padding:10px 14px;border-radius:14px;background:var(--soft);font-weight:900;font-size:22px;box-shadow:inset 0 -3px 0 var(--line)}
.chips2 button.yes{background:var(--goodbg);color:var(--good);box-shadow:0 0 0 3px var(--good)}
.chips2 button.no{background:var(--nearbg);opacity:.6}
.opbtns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.opbtns button{height:60px;border-radius:16px;background:var(--card);box-shadow:inset 0 -4px 0 var(--line),var(--shadow);font-size:32px;font-weight:900}
.opbtns button.yes{background:var(--goodbg);color:var(--good)}
.opbtns button.no{background:var(--nearbg);opacity:.6}
.bd-story{background:var(--bg2);border-radius:14px;padding:10px 12px}
.quiz:has(.has-story) .pad button{height:clamp(48px,7vh,64px)}
.tabs.wrap{flex-wrap:wrap}.tabs.wrap button{flex:1 0 30%;font-size:13px}
@media (max-height:680px){.sline{--fsz:15px;line-height:1.28}.qtext .wordq.ask{margin-top:2px}}

/* ---- Measure Mountains: shapes and scales ---- */
.m-mount{background:linear-gradient(135deg,#78716c,#0ea5e9)}
.sh-fill{fill:var(--soft);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.sh-face2{fill:color-mix(in srgb,var(--soft) 70%,var(--ink) 12%);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.sh-face3{fill:color-mix(in srgb,var(--soft) 55%,var(--ink) 20%);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.sh-dash{stroke:var(--brand);stroke-width:2;stroke-dasharray:5 4}
.sh-lab{fill:var(--ink);font-weight:900;font-size:19px;font-family:sans-serif}
.sh-lab.q{fill:var(--brand)}

/* ---- tap-to-choose answers and coordinate answers ---- */
.choicewrap{display:flex;flex-direction:column;gap:8px}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.choices button{min-height:58px;border-radius:16px;background:var(--card);box-shadow:inset 0 -4px 0 var(--line),var(--shadow);font-weight:900;font-size:calc(17px * var(--ts));padding:8px 10px;line-height:1.2}
.choices button.on{background:var(--soft);box-shadow:0 0 0 4px var(--brand),var(--shadow);color:var(--brand)}
.choicebar{display:flex;gap:8px;align-items:center}
.choicebar .sayb{width:52px;height:52px;font-size:22px}
.choicebar .k-ok{flex:1;height:56px;border-radius:18px;font-weight:900;font-size:19px;color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),var(--shadow)}
.choicebar .k-ok[disabled]{opacity:.4}
.coordans{font-size:40px;gap:6px}
.coordans .fbox{min-width:66px}
.pad.four.coord .k-zero{grid-column:span 2}
.m-shore{background:linear-gradient(135deg,#f59e0b,#0ea5e9)}
.sh-ray{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.sh-arc{fill:none;stroke:var(--brand);stroke-width:2.5}
.sh-axis{stroke:var(--ink);stroke-width:2.5}
.sh-axis.mirror{stroke:var(--brand);stroke-width:4}
.sh-poly{fill:color-mix(in srgb,var(--brand) 25%,transparent);stroke:var(--brand);stroke-width:2.5}
.sh-pt{fill:var(--brand);stroke:#fff;stroke-width:1.5}
.qvis.big svg{max-height:min(230px,27vh)}
@media (max-height:680px){.qvis.big svg{max-height:136px}}
.quiz:has(.coordans) .pad button{height:clamp(42px,5.9vh,58px)}
.quiz:has(.coordans) .pad.four{gap:6px}
.quiz:has(.qvis.big) .tools .tool{padding:5px 10px;font-size:14px}

/* ---- Data Desert: charts and tables ---- */
.m-desert{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.d-bar{fill:var(--brand);opacity:.85}
.d-line{fill:none;stroke:var(--brand);stroke-width:3;stroke-linejoin:round}
.d-slice{stroke:#fff;stroke-width:2.5}
.d-slab{fill:#0f172a;font-weight:900;font-size:14px;font-family:sans-serif}
.dtable{font-size:calc(15px * var(--ts));border-spacing:3px}
.dtable th,.dtable td{padding:5px 8px}
.dtable th{color:var(--ink)}
.qvis .dtable{margin:2px auto}
@media (max-height:680px){.dtable{font-size:14px;border-spacing:2px}.dtable th,.dtable td{padding:2px 6px}}
@media (max-height:680px){.quiz:has(.qvis) .fbox{height:34px}.quiz:has(.qvis) .fans .col{gap:2px}.quiz:has(.qvis) .ans{min-height:42px}}
.choices .fr{font-size:1.35em}

/* =====================================================================
   STEADY SUMS – reading choices from setup (fonts, highlight, digits, ruler, gentle mode)
   ===================================================================== */
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:"OpenDyslexic";src:url("fonts/opendyslexic-latin-400-normal.woff2") format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"OpenDyslexic";src:url("fonts/opendyslexic-latin-700-normal.woff2") format("woff2");font-weight:600 900;font-display:swap}
body.font-clear{font-family:"Atkinson Hyperlegible",ui-rounded,"Segoe UI",Roboto,system-ui,sans-serif}
body.font-dyslexic{font-family:"OpenDyslexic","Atkinson Hyperlegible",system-ui,sans-serif}
body.font-dyslexic .qtext{font-size:clamp(34px,10vw,52px)}
body.font-dyslexic .qtext.mid{font-size:clamp(26px,7.4vw,36px)}
body.font-dyslexic .qtext.long{font-size:clamp(21px,6vw,29px)}
.ff-rounded{font-family:"Nunito","Varela Round",ui-rounded,"Segoe UI",Roboto,system-ui,sans-serif}
.ff-clear{font-family:"Atkinson Hyperlegible",system-ui,sans-serif}
.ff-dyslexic{font-family:"OpenDyslexic",system-ui,sans-serif}

/* digits: a little more space between them, and optional place-value colours */
body.digit-gap .num{letter-spacing:.09em}
.pv0{color:#2563eb}.pv1{color:#16a34a}.pv2{color:#dc2626}.pv3{color:#9333ea}.pv4{color:#0891b2}.pv5{color:#c2410c}.pv6{color:#2563eb}
.pvd1{color:#db2777}.pvd2{color:#a16207}.pvd3{color:#4f46e5}
body.dark .pv0,body.dark .pv6{color:#93c5fd} body.dark .pv1{color:#86efac} body.dark .pv2{color:#fca5a5} body.dark .pv3{color:#d8b4fe}
body.dark .pv4{color:#67e8f9} body.dark .pv5{color:#fdba74} body.dark .pvd1{color:#f9a8d4} body.dark .pvd2{color:#fde047} body.dark .pvd3{color:#a5b4fc}

/* reading ruler: one line in focus, the rest softened. Tap a line to move it. */
.ruler-on .rl{opacity:.4;transition:opacity .15s,background .15s;border-radius:8px;cursor:pointer}
.ruler-on .rl.rfocus{opacity:1;background:color-mix(in srgb,var(--hl) 35%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--hl) 35%,transparent)}

/* line highlight mode: the whole sentence lights, not word by word */
body.hl-none .w.reading,body.hl-none .w.on{background:none;box-shadow:none}

/* gentle mode: no hearts or streak counter */
body.gentle #hearts,body.gentle #qStreak{display:none}

/* setup screens */
.su{display:flex;flex-direction:column;gap:12px}
.su-top{display:flex;align-items:center;gap:8px}
.su-dots{flex:1;display:flex;gap:4px;flex-wrap:wrap}
.su-dots i{flex:1;min-width:6px;height:6px;border-radius:3px;background:var(--soft)}
.su-dots i.on{background:var(--brand)}
.su-q{display:flex;gap:10px;align-items:flex-start}
.su-q h2{margin:0;font-size:calc(22px * var(--ts));line-height:1.25;flex:1}
.su-why{font-weight:700;color:var(--muted);line-height:1.4;display:flex;gap:8px;align-items:flex-start}
.su-why span:first-child{flex:1}
.su-opts{display:grid;gap:10px}
.su-opts.two{grid-template-columns:1fr 1fr}
.su-opts.three{grid-template-columns:1fr 1fr 1fr}
.su-opt{background:var(--card);box-shadow:var(--shadow);border-radius:18px;padding:14px 12px;font-weight:800;text-align:left;display:flex;flex-direction:column;gap:6px;border:3px solid transparent;position:relative}
.su-opt.on{border-color:var(--brand);background:var(--soft)}
.su-opt.on::after{content:"✓";position:absolute;top:6px;right:10px;color:var(--brand);font-weight:900}
.su-opt .face{font-size:40px;line-height:1;text-align:center}
.su-opt small{font-weight:700;color:var(--muted)}
.su-opt.center{text-align:center;align-items:center}
.su-sample{line-height:1.45;font-weight:700}
.su-nav{display:flex;gap:10px;margin-top:auto;padding-top:6px}
.su-nav .btn{flex:1}
.su-input{width:100%;font:inherit;font-size:22px;font-weight:800;padding:12px 14px;border-radius:14px;border:3px solid var(--soft);background:var(--card);color:var(--ink)}
.su-input:focus{outline:none;border-color:var(--brand)}
.su-check{display:flex;gap:10px;align-items:center;background:var(--card);box-shadow:var(--shadow);border-radius:16px;padding:12px;font-weight:800;text-align:left;width:100%}
.su-check .box{width:28px;height:28px;border-radius:8px;border:3px solid var(--muted);display:grid;place-items:center;flex:none;font-weight:900}
.su-check.on .box{background:var(--brand);border-color:var(--brand);color:#fff}
.mini-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%}
.mini-pad span{background:var(--soft);border-radius:6px;text-align:center;font-weight:900;padding:4px 0}
.notsure{background:none;box-shadow:none;color:var(--muted);font-weight:800;text-decoration:underline;padding:6px}
.passport{background:#fff;color:#0f172a;border-radius:20px;padding:20px;box-shadow:var(--shadow);font-family:"Atkinson Hyperlegible",system-ui,sans-serif}
.passport h2{margin:0 0 4px;font-size:24px}
.passport h4{margin:14px 0 4px;font-size:16px;color:#3b82f6}
.passport ul{margin:0;padding-left:20px;line-height:1.5}
.passport .foot{margin-top:14px;font-size:13px;color:#5b6b80}
.checkin{display:flex;flex-direction:column;gap:8px}
.faces{display:flex;gap:10px;justify-content:center}
.faces button{font-size:40px;background:var(--soft);border-radius:16px;padding:6px 14px}
.tool.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.tool.pulse{animation:pulse 1.6s ease-in-out 3}
@keyframes pulse{50%{transform:scale(1.07)}}
.suggest-tag{position:absolute;top:8px;left:10px;background:#fff;color:#0f172a;border-radius:99px;padding:2px 8px;font-size:12px;font-weight:900}
.conf-row{display:flex;align-items:flex-end;gap:5px;height:90px;margin-top:8px}
.conf-row div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:16px;gap:2px}
.conf-row i{display:block;width:100%;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#86efac,#22c55e)}
@media print{
  body *{visibility:hidden} .passport,.passport *{visibility:visible}
  .passport{position:absolute;left:0;top:0;width:100%;box-shadow:none} body{background:#fff!important}
}

/* Wide fonts (Dyslexia style, extra-large text): long words wrap inside their box instead of pushing past the screen edge */
.stat,.badge,.chip,.wcard,.tile,.su-opt,.choice{min-width:0;overflow-wrap:break-word}
#screen button{overflow-wrap:break-word}
body.font-dyslexic .badge b{font-size:12px;letter-spacing:0}
.w{max-width:100%;overflow-wrap:break-word}
body.font-dyslexic .badge small,body.font-dyslexic .stat small{font-size:11px;letter-spacing:0}
body.font-dyslexic .stat b{font-size:19px}
body.font-dyslexic .choices button{font-size:calc(15px * var(--ts));letter-spacing:0}
.su-opts.three .su-opt{padding:12px 4px;letter-spacing:0;word-spacing:0}
body.font-dyslexic .su-opts.three .su-opt{font-size:13px}
.su-opts.three .su-opt.center{font-size:14px !important;letter-spacing:0 !important;word-spacing:0 !important}
.su-opts.three{gap:6px}
.su-opts.three .su-opt.center{padding:12px 2px}
body.font-dyslexic .su-opts.three .su-opt.center{font-size:12.5px !important}
.su-opts.three .su-opt small{font-size:12px;letter-spacing:0;word-spacing:0;line-height:1.25}
body.font-dyslexic .su-opts.three .su-opt small{font-size:10.5px}

/* ---------- Years 3 and 4 ---------- */
.lgroup{margin:14px 2px 6px;font-size:16px;font-weight:900;color:var(--muted)}
.found-recap{margin-top:14px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px}
.found-recap>summary{font-weight:900;cursor:pointer;min-height:44px;display:flex;align-items:center}
.found-recap .wlist{margin-top:6px}
.m-mtc{background:linear-gradient(135deg,#0e7490,#2563eb)}
/* MTC practice: a calm bar that fills over 6 seconds (no numbers, no ticking) */
.mtc .mtop{margin-bottom:8px}
.mtc-bar{height:14px}
.mtc-bar>i{background:linear-gradient(90deg,#93c5fd,#a5b4fc);transition:width .1s linear}
.mtc-gap{margin-top:10px}
.mtc-tip{font-size:15px;font-weight:800;color:var(--muted);margin-top:6px;letter-spacing:0}