/* Layout: one centered learning column; app-like screens swapped in place, feedback bar pinned under the exercise */
:root{
  --bg:#F3F5F7; --surface:#FFFFFF; --ink:#0B1F3A; --muted:#6A6261; --line:#DCE2E8; --chip:#EDF0F3;
  --accent:#143A51; --accent-deep:#0B1F3A; --accent-soft:#E1EAF0; --on-accent:#FFFFFF;
  --ok:#1A7A47; --ok-soft:#E2F3E9; --ok-ink:#14603A;
  --bad:#B42318; --bad-soft:#FDECEA; --bad-ink:#8E1B12;
  --gold:#FFD66D; --gold-deep:#C49A68; --gold-soft:#FFF4D6; --gold-ink:#7A5A2E; --on-gold:#0B1F3A;
  --font:'Times New Roman', Tinos, Times, serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#081627; --surface:#0F2638; --ink:#F2F4F6; --muted:#B9B1AF; --line:#24425A; --chip:#163049;
  --accent:#FFD66D; --accent-deep:#C49A68; --accent-soft:#1D3A52; --on-accent:#0B1F3A;
  --ok:#2E9A63; --ok-soft:#12301F; --ok-ink:#8EE0B4;
  --bad:#E0574B; --bad-soft:#3A1715; --bad-ink:#F7B4AD;
  --gold:#FFD66D; --gold-deep:#C49A68; --gold-soft:#3A3018; --gold-ink:#FFD66D; --on-gold:#0B1F3A;
  color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#081627; --surface:#0F2638; --ink:#F2F4F6; --muted:#B9B1AF; --line:#24425A; --chip:#163049;
  --accent:#FFD66D; --accent-deep:#C49A68; --accent-soft:#1D3A52; --on-accent:#0B1F3A;
  --ok:#2E9A63; --ok-soft:#12301F; --ok-ink:#8EE0B4;
  --bad:#E0574B; --bad-soft:#3A1715; --bad-ink:#F7B4AD;
  --gold:#FFD66D; --gold-deep:#C49A68; --gold-soft:#3A3018; --gold-ink:#FFD66D; --on-gold:#0B1F3A;
  color-scheme:dark }
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;margin:0}
button{font-family:inherit;color:inherit}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1000px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}
.top{background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:42px;display:block}
.hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero .mwrap{margin:0}
.bubble{position:relative;flex:1 1 260px;min-width:0;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.mwrap{position:relative;display:block;margin:0 auto;flex:none;filter:drop-shadow(0 10px 8px rgba(11,31,58,.16));transform-origin:50% 70%}
.mwrap img{display:block;width:100%;height:auto}
.mwrap .body{position:absolute;inset:0}
.mwrap .cape.fly{transform-origin:53% 49%}.mwrap .cape.shield{transform-origin:48% 52%}
@keyframes flutter{0%,100%{transform:rotate(0) skewX(0) scale(1)}30%{transform:rotate(2.5deg) skewX(-3deg) scale(1.02,.99)}65%{transform:rotate(-1.5deg) skewX(2deg) scale(.99,1.01)}}
.mwrap.pop{animation:pop .35s ease}
.brand b{display:block;font-size:17px;font-weight:800;line-height:1.2}
.brand small{display:block;font-size:13px;color:var(--muted)}
.stepper{display:flex;flex-wrap:wrap;gap:10px 22px;padding-block:22px 0}
.st{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted);font-weight:600}
.st i{font-style:normal;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;background:var(--chip);color:var(--muted)}
.st.on{color:var(--ink);font-weight:800}.st.on i{background:var(--accent);color:var(--on-accent)}
.st.past i{background:var(--accent-soft);color:var(--accent-deep)}
main{padding-block:26px 48px;display:flex;flex-direction:column;gap:22px}
h1{margin:0;font-size:clamp(24px,4vw,32px);line-height:1.2;font-weight:800;text-wrap:balance}
.lead{margin:0;color:var(--muted);font-size:17px}
.press{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,filter .18s ease;cursor:pointer}
@media (hover:hover){
  .press:hover:not([disabled]){transform:translateY(-3px);box-shadow:0 10px 22px rgba(11,31,58,.16)}
  .btn:hover:not([disabled]){filter:brightness(1.1)}
  .lesson:hover:not([disabled]){border-color:var(--accent)}
  .lesson:hover:not([disabled]) .badge{transform:rotate(-8deg) scale(1.08)}
  .opt:not(.ok):not(.bad):not(.dim):hover,.mb:not(.ok):not(.bad):hover,.gopt:hover{border-color:var(--accent);background:var(--accent-soft)}
  .x:hover{color:var(--ink);background:var(--chip)}
  .mwrap:hover{animation:wave .6s ease-in-out 2}
}
.press:active:not([disabled]){transform:translateY(1px);box-shadow:none}
.badge{transition:transform .25s ease}
@keyframes fly{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes wave{0%,100%{transform:rotate(0) scale(1.06)}25%{transform:rotate(-8deg) scale(1.1)}75%{transform:rotate(8deg) scale(1.1)}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 26px;border-radius:14px;border:none;border-bottom:4px solid var(--accent-deep);background:var(--accent);color:var(--on-accent);font-size:16px;font-weight:800}
.btn[disabled]{background:var(--chip);border-bottom-color:var(--line);color:var(--muted);cursor:not-allowed}
.btn.green{background:var(--ok);border-bottom-color:#11552F;color:#FFFFFF}.btn.red{background:var(--bad);border-bottom-color:#7F170F;color:#FFFFFF}
.btn.gold{background:var(--gold);color:var(--on-gold);border-bottom-color:var(--gold-deep)}
.btn.ghost{background:var(--surface);color:var(--ink);border:2px solid var(--line);border-bottom-width:4px;font-weight:700}
.btn.big{min-height:60px;padding:16px 40px;font-size:19px}
.lessons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.lesson{display:flex;align-items:center;gap:16px;padding:18px;min-height:108px;width:100%;border-radius:18px;border:2px solid var(--line);border-bottom-width:5px;background:var(--surface);text-align:left}
.lesson[disabled]{opacity:.6;cursor:not-allowed}
.badge{width:56px;height:56px;flex:none;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;background:var(--accent);color:var(--on-accent)}
.lesson[disabled] .badge{background:var(--chip);color:var(--muted)}
.lesson .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lesson .nm{font-size:19px;font-weight:800}.lesson .ds{font-size:14px;color:var(--muted);line-height:1.45}
.pill{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap;flex:none;background:var(--accent-soft);color:var(--accent-deep)}
.lesson[disabled] .pill{background:var(--chip);color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:20px;width:100%;max-width:440px;align-self:center}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{background:var(--bg);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:4px}
.stat span{font-size:14px;font-weight:700;color:var(--muted)}.stat b{font-size:38px;font-weight:800;line-height:1.1;color:var(--accent-deep);font-variant-numeric:tabular-nums}
.learn{min-height:100vh;display:flex;flex-direction:column;background:var(--surface)}
.lbar{display:flex;align-items:center;gap:14px;padding-block:18px 0}
.x{width:44px;height:44px;flex:none;border-radius:12px;border:none;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center}
.parts{flex:1;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;min-width:0}
.pt{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:999px;font-size:15px;font-weight:800;white-space:nowrap}
.pt{border:none;font-family:inherit}
.pt.now{background:var(--accent);color:var(--on-accent);cursor:default}
@media (hover:hover){.pt.todo:hover{background:var(--accent);color:var(--on-accent)}.pt.done:hover{filter:brightness(1.1)}}
.pt.done{background:var(--ok);color:#FFFFFF}
.pt.todo{background:var(--accent-soft);color:var(--accent)}
@media (max-width:520px){.pt{padding:6px 11px;font-size:14px}.parts{gap:6px;flex-wrap:nowrap}.ptw{display:none}}
.prog div{height:100%;border-radius:999px;background:var(--accent);transition:width .3s ease}
.shields{display:flex;align-items:center;gap:6px;font-weight:800;font-size:15px;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.lmain{flex:1;padding-block:22px 28px;display:flex;flex-direction:column;gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{padding:6px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-deep);font-size:13px;font-weight:800}
.chip.soft{background:transparent;color:var(--muted);padding:0;font-weight:700}
h2{margin:0;font-size:clamp(21px,3.4vw,26px);line-height:1.25;font-weight:800;text-wrap:balance}
.pic{display:flex;justify-content:center}
.pic img{width:100%;max-width:400px;aspect-ratio:16/10;border-radius:18px;object-fit:cover;border:2px solid var(--line);display:block}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;min-height:60px;border-radius:14px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);font-size:17px;font-weight:600;text-align:left}
.opt .k{width:28px;height:28px;flex:none;border-radius:8px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--muted)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.opt.ok{border-color:var(--ok);background:var(--ok-soft);color:var(--ok-ink)}
.opt.bad{border-color:var(--bad);background:var(--bad-soft);color:var(--bad-ink)}
.opt.dim{opacity:.5;cursor:default}
.sent{border-radius:18px;border:2px solid var(--line);border-bottom-width:5px;padding:22px;font-size:clamp(18px,3vw,22px);line-height:1.65;font-weight:600}
.blank{display:inline-block;min-width:110px;padding:0 10px;margin:0 4px;border-radius:8px;text-align:center;background:var(--bg);color:var(--muted);border-bottom:3px solid var(--line)}
.blank.sel{background:var(--accent-soft);color:var(--accent-deep);border-bottom-color:var(--accent)}
.blank.ok{background:var(--ok-soft);color:var(--ok-ink);border-bottom-color:var(--ok)}
.blank.bad{background:var(--bad-soft);color:var(--bad-ink);border-bottom-color:var(--bad)}
.mhead{display:grid;grid-template-columns:1fr 1.06fr 1fr}
.mbox{position:relative;display:grid;grid-template-columns:1fr 1.06fr 1fr}
.mcol{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.mb{display:flex;align-items:center;justify-content:center;width:100%;padding:6px 10px;min-height:54px;border-radius:12px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);font-size:16px;font-weight:600;text-align:center;line-height:1.3}
.mb.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.mb.ok{border-color:var(--ok);background:var(--ok-soft);color:var(--ok-ink);cursor:default}
.mb.bad{border-color:var(--bad);background:var(--bad-soft);color:var(--bad-ink)}
#mlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.fb{border-top:2px solid var(--line);padding-block:16px;background:var(--surface)}
/* race layout + hurry effect */
.rtop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.flash-slot{display:flex;justify-content:flex-start}.flash-slot.right{justify-content:flex-end}
.clock.big{font-size:clamp(30px,6vw,42px);padding:10px 24px;border-radius:18px}
.clock.big.low{animation:beat .5s ease-in-out infinite}
.gopt.gbad{background:var(--bad-soft)!important;color:var(--bad-ink)!important;border-color:var(--bad)!important;opacity:.7;text-decoration:line-through}
.lboard{list-style:none;margin:4px 0;padding:0;width:100%;max-width:420px;display:flex;flex-direction:column;gap:6px}
.lboard li{display:flex;align-items:center;gap:10px;padding:8px 14px;border:2px solid var(--ink);border-radius:12px;background:#FFFFFF;text-align:left}
.lboard li.me{background:var(--gold);font-weight:800}
.lboard .rk{font-weight:800;width:32px}.lboard .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmeta{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.hurry{font-size:20px;font-weight:800;display:inline-block;animation:hurry .9s linear infinite,beat .45s ease-in-out infinite}
@keyframes hurry{0%{color:var(--bad)}25%{color:#D9480F}50%{color:var(--accent)}75%{color:var(--gold-deep)}100%{color:var(--bad)}}
.introbg{min-height:100vh;background-color:var(--accent-deep);background-image:linear-gradient(rgba(11,31,58,.42),rgba(11,31,58,.42)),url("../assets/img/intro-bg.jpg");background-size:cover;background-position:center}
.introbg .st{color:rgba(255,255,255,.78)}.introbg .st.on{color:#FFFFFF}
.introbg .st i{background:rgba(255,255,255,.18);color:#FFFFFF}.introbg .st.on i{background:var(--gold);color:var(--on-gold)}
.introbg .card{border:none;box-shadow:0 24px 60px rgba(0,0,0,.35)}
/* comic intro card */
.card.comic{position:relative;background-color:#FFF9E6;background-image:radial-gradient(rgba(196,154,104,.45) 1.5px,transparent 1.8px);background-size:14px 14px;border:4px solid #0B1F3A;border-radius:20px;box-shadow:10px 10px 0 #FFD66D,10px 10px 0 4px #0B1F3A;color:#0B1F3A;max-width:460px}
.card.comic h1{color:#0B1F3A;text-transform:uppercase;letter-spacing:.02em;text-shadow:3px 3px 0 #FFD66D;transform:rotate(-1.5deg)}
.burstwrap{position:relative;display:flex;justify-content:center;align-items:center;min-height:190px}
.burst{position:absolute;left:50%;top:50%;clip-path:polygon(50.0% 0.0%,58.0% 14.9%,71.7% 5.0%,72.4% 21.9%,89.1% 18.8%,82.4% 34.4%,98.7% 38.9%,86.0% 50.0%,98.7% 61.1%,82.4% 65.6%,89.1% 81.2%,72.4% 78.1%,71.7% 95.0%,58.0% 85.1%,50.0% 100.0%,42.0% 85.1%,28.3% 95.0%,27.6% 78.1%,10.9% 81.2%,17.6% 65.6%,1.3% 61.1%,14.0% 50.0%,1.3% 38.9%,17.6% 34.4%,10.9% 18.8%,27.6% 21.9%,28.3% 5.0%,42.0% 14.9%)}
.burst.b1{width:230px;height:200px;transform:translate(-50%,-50%) rotate(8deg);background:#0B1F3A}
.burst.b2{width:216px;height:186px;transform:translate(-50%,-50%) rotate(8deg);background:#FFD66D}
.burstwrap .mwrap{position:relative;z-index:1}
.bubble{position:absolute;z-index:2;right:2px;top:6px;background:#FFFFFF;color:#0B1F3A;border:3px solid #0B1F3A;border-radius:16px;padding:6px 12px;font-weight:800;font-size:15px;transform:rotate(6deg);box-shadow:3px 3px 0 #0B1F3A}
.bubble::after{content:"";position:absolute;left:14px;bottom:-12px;width:16px;height:16px;background:#FFFFFF;border-right:3px solid #0B1F3A;border-bottom:3px solid #0B1F3A;transform:rotate(45deg) skew(10deg,10deg)}
.card.comic .stat{background:#FFFFFF;border:3px solid #0B1F3A;border-radius:14px;box-shadow:4px 4px 0 #0B1F3A}
.card.comic .stat:first-child{transform:rotate(-1.5deg)}.card.comic .stat:last-child{transform:rotate(1.5deg)}
.card.comic .stat span{color:#3A4A5A}.card.comic .stat b{color:#0B1F3A}
.comicbtn{width:100%;min-height:60px;font-size:20px;text-transform:uppercase;letter-spacing:.04em;border:3px solid #0B1F3A!important;box-shadow:5px 5px 0 #0B1F3A;color:#FFFFFF}
@media (hover:hover){.comicbtn:hover:not([disabled]){transform:translate(-2px,-3px);box-shadow:8px 8px 0 #0B1F3A}}
.comicbtn:active:not([disabled]){transform:translate(3px,3px);box-shadow:1px 1px 0 #0B1F3A}
@media (max-width:520px){.bubble{font-size:13px;right:0}.burst.b1{width:200px;height:174px}.burst.b2{width:188px;height:162px}}
.namefield{display:flex;flex-direction:column;gap:6px;text-align:left}
.namefield span{font-size:15px;font-weight:800;color:#0B1F3A}
.namefield input{font-family:inherit;font-size:18px;font-weight:700;color:#0B1F3A;background:#FFFFFF;border:3px solid #0B1F3A;border-radius:12px;padding:12px 14px;box-shadow:4px 4px 0 #0B1F3A;outline:none;width:100%}
.namefield input:focus{box-shadow:4px 4px 0 #FFD66D,4px 4px 0 3px #0B1F3A}
.namefield.err input{border-color:#B42318;animation:shake .35s ease}
.namefield em{font-size:14px;color:#B42318;font-style:normal;font-weight:700}
.share{background:#FFFFFF;border:4px solid var(--ink);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px;text-align:center;box-shadow:8px 8px 0 var(--gold),8px 8px 0 3px var(--ink)}
.share h2{margin:0}
.shbtns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.shbtns .btn{text-decoration:none}
.shfb{background:#1877F2;color:#FFFFFF}
.shzalo{background:#0068FF;color:#FFFFFF}
.namefield input::placeholder{color:#6A6261;font-weight:600}
.comicbtn{animation:cta 1.6s ease-in-out infinite}
@keyframes cta{0%,100%{box-shadow:5px 5px 0 #0B1F3A,0 0 0 0 rgba(255,214,109,0)}50%{box-shadow:5px 5px 0 #0B1F3A,0 0 0 8px rgba(255,214,109,.9);filter:brightness(1.12)}}
.mwrap{animation:nudge 5s ease-in-out infinite}
@keyframes nudge{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-7deg)}92%{transform:rotate(6deg)}95%{transform:rotate(-4deg)}98%{transform:rotate(2deg)}}
/* Part 6 race car */
.carhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.road{position:relative;height:440px;max-width:560px;width:100%;margin:0 auto;border:4px solid #0B1F3A;border-radius:14px;overflow:hidden;background-color:#3A4A5A;box-shadow:6px 6px 0 #0B1F3A}
.lanes{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr}
.lanes span{border-right:4px dashed rgba(255,255,255,.55);animation:roadmove .5s linear infinite}
.lanes span:first-child{grid-column:1}.lanes span:last-child{grid-column:2}
@keyframes roadmove{from{background-position:0 40px}to{background-position:0 0}}
.road::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.06) 0 20px,transparent 20px 40px);animation:roadmove .4s linear infinite;background-size:100% 40px}
.gates{position:absolute;left:0;right:0;bottom:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-inline:8px;z-index:1}
.gate{min-height:64px;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;border:3px solid #0B1F3A;border-radius:10px;font-weight:800;font-size:16px;line-height:1.2;box-shadow:3px 3px 0 #0B1F3A;color:#0B1F3A}
.gate.g0{background:#9CC9E6}.gate.g1{background:#FFD66D}.gate.g2{background:#B9E4A0}
.gate.ok{background:#1A7A47;color:#FFFFFF}.gate.bad{background:#B42318;color:#FFFFFF;animation:shake .35s ease}
.car{position:absolute;top:14px;width:33.333%;display:flex;justify-content:center;transition:left .14s ease-out;z-index:2}
.car{flex-direction:column;align-items:center;gap:4px}
.prompt .qimg{width:100%;max-width:260px;aspect-ratio:4/3;object-fit:cover;border:3px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--gold);margin-bottom:4px}
.carlabel .cimg{display:block;width:96px;aspect-ratio:4/3;object-fit:cover;border:2px solid #0B1F3A;border-radius:8px;margin:0 auto 4px}
@media (max-width:520px){.carlabel .cimg{width:64px}.prompt .qimg{max-width:180px}}
.carlabel{background:#FFFFFF;color:#0B1F3A;border:3px solid #0B1F3A;border-radius:12px;padding:4px 10px;font-weight:800;font-size:16px;line-height:1.2;text-align:center;box-shadow:3px 3px 0 #0B1F3A;max-width:100%}
.racer{width:96%;height:auto;aspect-ratio:503/298;display:block;filter:drop-shadow(3px 4px 0 rgba(11,31,58,.5));animation:rumble .25s ease-in-out infinite}
@keyframes rumble{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.car.crash .racer{animation:shake .4s ease 2}
.lanehit{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));z-index:3}
.lanehit button{border:none;background:transparent;cursor:pointer;padding:0;font:inherit}
@media (hover:hover){.lanehit button:hover{background:rgba(255,214,109,.16)}}
.lanehit button:focus-visible{outline:4px solid #FFD66D;outline-offset:-6px}
.pauseov{position:absolute;inset:0;z-index:4;background:rgba(11,31,58,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#FFFFFF;text-align:center}
.pauseov span{font-size:40px;font-weight:900;letter-spacing:.06em;text-shadow:3px 3px 0 #0B1F3A;color:#FFD66D}
.pauseov em{font-style:normal;font-size:15px;opacity:.85}
.carhead{flex-wrap:wrap}
.carctl{display:flex;justify-content:center}
.pausebtn{min-height:52px;min-width:160px;padding:8px 22px;font-size:18px}
.learn[data-part="5"] .sfx{background:#FFD66D;transform:rotate(8deg)}
.learn[data-part="6"] .sfx{background:#E0574B;color:#FFFFFF;transform:rotate(-6deg)}
@media (max-width:520px){.road{height:380px}.gate{font-size:13px;min-height:56px}.carlabel{font-size:13px;padding:3px 6px}}
@media (prefers-reduced-motion: reduce){.lanes span,.road::before,.racer{animation:none}}
/* tower as a house, on the left */
.blk.floor{justify-content:space-between;gap:6px;padding:0 8px;height:40px}
.blk.floor span{flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win{width:14px;height:18px;flex:none;background:#FFF4D6;border:2px solid #0B1F3A;border-radius:2px;box-shadow:inset 0 -6px 0 rgba(196,154,104,.45)}
.roof{height:44px;flex:none;margin:0 -10px -2px;background:#B42318;clip-path:polygon(50% 0,100% 100%,0 100%);position:relative}
.learn[data-part="5"] .roof{filter:none}
@media (min-width:640px){.tright{order:-1}}
.tover{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.tover .tright{order:0}
@media (max-width:640px){.tover{grid-template-columns:1fr}}
.tdone{justify-content:center;gap:24px}
.tmsg{margin:0;font-size:clamp(24px,3.4vw,32px);font-weight:800;line-height:1.3;color:var(--ink);text-wrap:balance}
.finish{position:relative;min-height:320px;border:4px solid #0B1F3A;border-radius:14px;background-color:#3A4A5A;box-shadow:6px 6px 0 #0B1F3A;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding:18px}
.flagline{position:absolute;left:0;right:0;top:0;height:44px;background-image:conic-gradient(#0B1F3A 25%,#FFFFFF 0 50%,#0B1F3A 0 75%,#FFFFFF 0);background-size:22px 22px;border-bottom:4px solid #0B1F3A}
.finish .tag{position:relative;z-index:1;background:#FFD66D;color:#0B1F3A;border:3px solid #0B1F3A;font-size:18px}
.finish .racer{width:min(100%,320px);animation:none}
/* ===== COMIC STYLE for practice + results ===== */
.comicscope{--bg:#FFF9E6;--surface:#FFFFFF;--ink:#0B1F3A;--muted:#5C5452;--line:#0B1F3A;--chip:#F1E7CC;
  --accent:#143A51;--accent-deep:#0B1F3A;--accent-soft:#DCE8F0;--on-accent:#FFFFFF;
  --ok:#1A7A47;--ok-soft:#D9F2E3;--ok-ink:#0F5132;--bad:#B42318;--bad-soft:#FBE3E0;--bad-ink:#8E1polygon(50.0% 0.0%,60.4% 11.4%,75.0% 6.7%,78.3% 21.7%,93.3% 25.0%,88.6% 39.6%,100.0% 50.0%,88.6% 60.4%,93.3% 75.0%,78.3% 78.3%,75.0% 93.3%,60.4% 88.6%,50.0% 100.0%,39.6% 88.6%,25.0% 93.3%,21.7% 78.3%,6.7% 75.0%,11.4% 60.4%,0.0% 50.0%,11.4% 39.6%,6.7% 25.0%,21.7% 21.7%,25.0% 6.7%,39.6% 11.4%)2;
  --gold:#FFD66D;--gold-deep:#C49A68;--gold-soft:#FFF0C2;--gold-ink:#6B4A1E;--on-gold:#0B1F3A;color-scheme:light;color:var(--ink)}
.learn.comicscope,.donebg{background-color:#FFF9E6;background-image:radial-gradient(rgba(196,154,104,.35) 1.4px,transparent 1.7px);background-size:16px 16px}
.donebg{min-height:100vh}
.comicscope h2,.comicscope h1{text-transform:uppercase;letter-spacing:.01em;text-shadow:2px 2px 0 var(--gold)}
.ttl{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;gap:16px;flex-wrap:wrap;padding-inline:118px}
.ttl .sfxw{position:absolute;right:0;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.ttl{padding-inline:0;flex-direction:column;gap:6px}.ttl .sfxw{position:static;transform:none;order:-1}.ttl .sfx{width:92px;height:62px;font-size:14px}}
.learn.comicscope .ttl h2{text-transform:none;font-size:clamp(20px,3vw,25px)}
@media (min-width:860px){.learn.comicscope .ttl{flex-wrap:nowrap}.learn.comicscope .ttl h2{white-space:nowrap}}
.sfxw{filter:drop-shadow(3px 3px 0 #0B1F3A);flex:none}
.sfx{display:inline-flex;align-items:center;justify-content:center;width:112px;height:76px;clip-path:polygon(50.0% 0.0%,60.4% 11.4%,75.0% 6.7%,78.3% 21.7%,93.3% 25.0%,88.6% 39.6%,100.0% 50.0%,88.6% 60.4%,93.3% 75.0%,78.3% 78.3%,75.0% 93.3%,60.4% 88.6%,50.0% 100.0%,39.6% 88.6%,25.0% 93.3%,21.7% 78.3%,6.7% 75.0%,11.4% 60.4%,0.0% 50.0%,11.4% 39.6%,6.7% 25.0%,21.7% 21.7%,25.0% 6.7%,39.6% 11.4%);background:var(--gold);color:#0B1F3A;font-weight:900;font-size:17px;letter-spacing:.03em;transform:rotate(-10deg)}
.learn[data-part="2"] .sfx{background:#C49A68}
.learn[data-part="3"] .sfx{background:#9CC9E6}
.learn[data-part="4"] .sfx{background:#E0574B;color:#FFFFFF}
/* comic surfaces */
.comicscope .opt,.comicscope .mb,.comicscope .gopt,.comicscope .lesson{border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink)}
.comicscope .btn{border:3px solid var(--ink)!important;box-shadow:4px 4px 0 var(--ink)}
.comicscope .btn[disabled]{box-shadow:none;opacity:.55}
.comicscope .pt{border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.comicscope .pt.now{transform:rotate(-3deg)}
@media (hover:hover){.comicscope .press:hover:not([disabled]){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}}
.comicscope .press:active:not([disabled]){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.comicscope .x{border:3px solid var(--ink);background:#FFFFFF;box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
.comicscope .fb{border-top:4px solid var(--ink);background:#FFFFFF}
.comicscope .fb.ok{background:var(--ok-soft)}.comicscope .fb.bad{background:var(--bad-soft)}
.comicscope .ic{border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.comicscope .panel,.comicscope .results,.comicscope .dstats div{background:#FFFFFF;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--gold),8px 8px 0 3px var(--ink)}
.comicscope .record{border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg)}
.comicscope .tag{border:2px solid var(--ink)}
.comicscope .score{background:var(--ink);color:var(--gold);border:2px solid var(--ink)}
.comicscope .tbar{border:3px solid var(--ink);height:16px;background:#FFFFFF}
/* Part 1: caption boxes + tilted panels */
.learn[data-part="1"] .mhead .eyebrow{justify-self:start;background:var(--gold);color:#0B1F3A;border:3px solid var(--ink);padding:4px 10px;letter-spacing:.06em;box-shadow:3px 3px 0 var(--ink)}
.learn[data-part="1"] .mcol .mb:nth-child(odd){transform:rotate(-.7deg)}
.learn[data-part="1"] .mcol .mb:nth-child(even){transform:rotate(.7deg)}
.learn[data-part="1"] .mb.ok{transform:none}
/* Part 2: framed comic panel */
.learn[data-part="2"] .pic img,.learn[data-part="3"] .pic img{border:4px solid var(--ink);border-radius:6px;box-shadow:8px 8px 0 var(--gold),8px 8px 0 3px var(--ink);transform:rotate(-1deg)}
.learn[data-part="2"] .opt .k{border-radius:50%;background:var(--gold);color:#0B1F3A;border:2px solid var(--ink)}
/* Part 3: sentence as speech bubble */
.learn[data-part="3"] .pic img{transform:rotate(1deg)}
.learn[data-part="3"] .sent{position:relative;background:#FFFFFF;border:3px solid var(--ink);border-radius:26px;box-shadow:5px 5px 0 var(--ink);margin-top:10px}
.learn[data-part="3"] .sent::before{content:"";position:absolute;left:50%;top:-17px;width:26px;height:26px;background:#FFFFFF;border-left:3px solid var(--ink);border-top:3px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.learn[data-part="3"] .blank{border:2px dashed var(--ink);border-bottom-width:2px}
/* Part 4: starburst clock */
.clockwrap{filter:drop-shadow(4px 4px 0 #0B1F3A)}
.learn[data-part="4"] .clock.big{clip-path:polygon(50.0% 0.0%,58.2% 8.8%,69.1% 3.8%,73.3% 15.1%,85.4% 14.6%,84.9% 26.7%,96.2% 30.9%,91.2% 41.8%,100.0% 50.0%,91.2% 58.2%,96.2% 69.1%,84.9% 73.3%,85.4% 85.4%,73.3% 84.9%,69.1% 96.2%,58.2% 91.2%,50.0% 100.0%,41.8% 91.2%,30.9% 96.2%,26.7% 84.9%,14.6% 85.4%,15.1% 73.3%,3.8% 69.1%,8.8% 58.2%,0.0% 50.0%,8.8% 41.8%,3.8% 30.9%,15.1% 26.7%,14.6% 14.6%,26.7% 15.1%,30.9% 3.8%,41.8% 8.8%);background:var(--gold);color:#0B1F3A;padding:34px 44px;border-radius:0}
.learn[data-part="4"] .clock.big.low{background:#E0574B;color:#FFFFFF}
.learn[data-part="4"] .flash{font-size:30px;font-weight:900;text-shadow:2px 2px 0 #0B1F3A;-webkit-text-stroke:1px #0B1F3A}
.learn[data-part="4"] .gopts{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.learn[data-part="4"] .gopt{font-size:17px;min-height:58px;padding:10px 8px}
.learn[data-part="4"] .pic img{max-height:280px;width:auto;max-width:100%;margin:0 auto;display:block}
@media (max-width:640px){.learn[data-part="4"] .gopts{grid-template-columns:repeat(2,minmax(0,1fr))}.learn[data-part="4"] .gopt{font-size:15px;min-height:50px}.learn[data-part="4"] .pic img{max-height:200px}}
/* Part 5: speech-bubble prompt + brick tower */
.learn[data-part="5"] .prompt{position:relative;background:#FFFFFF;border:3px solid var(--ink);border-radius:26px;box-shadow:5px 5px 0 var(--ink)}
.learn[data-part="5"] .prompt::after{content:"";position:absolute;left:36px;bottom:-17px;width:26px;height:26px;background:#FFFFFF;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
.learn[data-part="5"] .tright{background-color:#DCE8F0;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.learn[data-part="5"] .blk{border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.learn[data-part="5"] .ground{background:var(--ink);height:14px}
.learn[data-part="5"] .ghead span[style*="display:flex;color"]{filter:drop-shadow(1px 1px 0 #0B1F3A) drop-shadow(-1px -1px 0 #0B1F3A)}
.fb.ok{background:var(--ok-soft);border-top-color:var(--ok)}.fb.bad{background:var(--bad-soft);border-top-color:var(--bad)}
.fb .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.fbl{display:flex;align-items:center;gap:14px;min-height:52px;flex:1 1 260px;min-width:0}
.ic{width:44px;height:44px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFFFFF}
.ic.ok{background:var(--ok)}.ic.bad{background:var(--bad)}
.fbt{display:flex;flex-direction:column;gap:2px;min-width:0}
.fbt b{font-size:18px;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.fb.ok .fbt{color:var(--ok-ink)}.fb.bad .fbt{color:var(--bad-ink)}
.sent .sv{display:block;margin-top:8px;font-size:15px;font-weight:400;font-style:italic;opacity:.8;line-height:1.4}
.gostart{width:auto;min-width:280px;padding:0 34px}
.fbt span{font-size:15px}.fbt em{font-size:14px;line-height:1.45;font-style:italic;opacity:.9}
.hint{font-size:15px;color:var(--muted)}
.panel{border:2px solid var(--line);border-bottom-width:5px;border-radius:22px;padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.panel ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.45;color:var(--muted);max-width:460px}
.bigic{width:84px;height:84px;border-radius:26px;display:flex;align-items:center;justify-content:center}
.huge{font-size:76px;font-weight:800;line-height:1;color:var(--accent-deep);font-variant-numeric:tabular-nums}
.record{padding:10px 20px;border-radius:999px;background:var(--gold);color:var(--on-gold);font-size:18px;font-weight:800}
.ghead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.clock{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;background:var(--accent-soft);color:var(--accent-deep)}
.clock.low{background:var(--bad-soft);color:var(--bad)}
.tag{padding:8px 12px;border-radius:12px;font-size:15px;font-weight:800;background:var(--chip);color:var(--muted);font-variant-numeric:tabular-nums}
.tag.hot{background:var(--gold-soft);color:var(--gold-ink)}
.score{padding:8px 14px;border-radius:12px;background:var(--ink);color:var(--surface);font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.tbar{height:10px;border-radius:999px;background:var(--chip);overflow:hidden}
.tbar div{height:100%;border-radius:999px;background:var(--accent)}
.flash{min-width:90px;text-align:center;font-size:22px;font-weight:800}
.gopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gopt{width:100%;padding:14px 12px;min-height:64px;border-radius:14px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);font-size:17px;font-weight:700}
.tower{display:flex;flex-wrap:wrap;gap:18px;align-items:stretch}
.tleft{flex:999 1 300px;min-width:0;display:flex;flex-direction:column;gap:14px}
.tright{flex:1 1 200px;min-width:0;min-height:420px;border-radius:18px;background:var(--bg);border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:6px}
.blk{height:36px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:14px;font-weight:700}
.ground{height:12px;flex:none;border-radius:6px;background:var(--muted)}
.prompt{border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.prompt b{font-size:30px;line-height:1.2;color:var(--accent-deep)}
.results{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:6px 18px}
.res{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.res:last-child{border-bottom:none}
.dstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.dstats div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:4px}
.dstats span{font-size:13px;font-weight:700;color:var(--muted)}.dstats b{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
.shake{animation:shake .35s ease}.pop{animation:pop .35s ease}
@media (prefers-reduced-motion: reduce){.hurry,.clock.big.low{animation:none}.shake,.pop,.mwrap,.mwrap .cape,.comicbtn{animation:none!important}.prog div,.press{transition:none}}
@media (max-width:520px){.opt{font-size:15px;padding:12px;gap:8px}.opt .k{width:24px;height:24px}.mb{font-size:14px;min-height:50px}.mhead,.mbox{grid-template-columns:1fr 44px 1fr}.card{padding:20px}.sent{padding:16px}}