/* ============================================================================
   Somali English Academy — design system (loads last; every screen uses these)
   Tokens: one spacing scale, one type scale, one radius set, one shadow set,
   one palette (+ one fixed colour per learning stage). No one-off values.
   ============================================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* spacing 4/8/12/16/24/32/48 */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;
  /* type scale (16px base) */
  --t-xs:.75rem;--t-sm:.875rem;--t-md:1rem;--t-lg:1.125rem;--t-xl:1.375rem;--t-2xl:1.75rem;--t-3xl:2.25rem;
  --lh-tight:1.15;--lh-snug:1.3;--lh-body:1.6;
  --font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-text:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* radii */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-full:999px;
  /* shadow: one soft level (+ none) */
  --sh-0:none;--sh-1:0 1px 2px rgba(27,26,23,.06),0 6px 20px -8px rgba(27,26,23,.14);
  /* palette: warm paper, deep ink, one vivid accent */
  --paper:#faf7f1;--surface:#ffffff;--ink:#1b1a17;--ink-2:#605c54;--ink-3:#8b867c;
  --line:#e6e0d5;--line-2:#d6cfc2;--soft:#f2ede4;
  --accent:#0e7c66;--accent-ink:#ffffff;--accent-hover:#0a6352;--accent-soft:#e1f1ec;--gold:#e9b44c;--gold-soft:#fbf1d9;--gold-ink:#7a5606;
  --ok:#1f7a4d;--ok-soft:#e3f3ea;--warn:#8a5a00;--warn-soft:#fbf1dc;--bad:#b3261e;--bad-soft:#fbe4e2;
  /* fixed stage colours (12 learning stages) */
  --st1:#c8552b;--st2:#b7791f;--st3:#6b8e23;--st4:#2e8b57;--st5:#0f766e;--st6:#1d6fa5;
  --st7:#3b5bdb;--st8:#6d4fc2;--st9:#9d3f8a;--st10:#b83260;--st11:#8a5a3c;--st12:#1f2937;
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);--dur-1:150ms;--dur-2:220ms;
  /* legacy aliases → system tokens so every older screen inherits the system */
  --teal:var(--accent);--teal2:var(--accent-hover);--amber:var(--warn);--amber2:var(--warn);
  --muted:var(--ink-2);--bg:var(--paper);--card:var(--surface);--tint:var(--soft);--simple-neutral:var(--soft);
  --good:var(--ok);--radius:var(--r-lg);--shadow:var(--sh-1);
  --l-bg:var(--paper);--l-surface:var(--surface);--l-border:var(--line);--l-text:var(--ink);--l-muted:var(--ink-2);--l-teal:var(--accent);--l-blue:var(--accent);--l-gold:var(--warn);
}
:root[data-theme="light"]{--paper:#faf7f1;--surface:#ffffff;--ink:#1b1a17;--ink-2:#605c54;--ink-3:#8b867c;--line:#e6e0d5;--line-2:#d6cfc2;--soft:#f2ede4;--accent:#0e7c66;--accent-hover:#0a6352;--accent-soft:#e1f1ec;--gold:#e9b44c;--gold-soft:#fbf1d9;--gold-ink:#7a5606;--teal:var(--accent);--teal2:var(--accent-hover);--muted:var(--ink-2);--bg:var(--paper);--card:var(--surface);--tint:var(--soft);--simple-neutral:var(--soft)}
:root[data-theme="dark"]{
  --paper:#161511;--surface:#201e19;--ink:#f3efe7;--ink-2:#b5afa3;--ink-3:#8e887c;--line:#35322b;--line-2:#45413a;--soft:#292721;
  --accent:#5fcdb2;--accent-ink:#0c1f1b;--accent-hover:#7fdcc4;--accent-soft:#17332d;--gold:#f0c366;--gold-soft:#3a2f14;--gold-ink:#f6d995;
  --ok:#5ccf8f;--ok-soft:#1d3328;--warn:#e8b84a;--warn-soft:#352b14;--bad:#ff8a80;--bad-soft:#3b1f1d;
  --sh-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.6);
  --teal:var(--accent);--teal2:var(--accent-hover);--muted:var(--ink-2);--bg:var(--paper);--card:var(--surface);--tint:var(--soft);--simple-neutral:var(--soft);--good:var(--ok);--shadow:var(--sh-1);
  --l-bg:var(--paper);--l-surface:var(--surface);--l-border:var(--line);--l-text:var(--ink);--l-muted:var(--ink-2);--l-teal:var(--accent);--l-blue:var(--accent);--l-gold:var(--warn);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#161511;--surface:#201e19;--ink:#f3efe7;--ink-2:#b5afa3;--ink-3:#8e887c;--line:#35322b;--line-2:#45413a;--soft:#292721;
    --accent:#5fcdb2;--accent-ink:#0c1f1b;--accent-hover:#7fdcc4;--accent-soft:#17332d;--gold:#f0c366;--gold-soft:#3a2f14;--gold-ink:#f6d995;
    --ok:#5ccf8f;--ok-soft:#1d3328;--warn:#e8b84a;--warn-soft:#352b14;--bad:#ff8a80;--bad-soft:#3b1f1d;
    --sh-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.6);
    --teal:var(--accent);--teal2:var(--accent-hover);--muted:var(--ink-2);--bg:var(--paper);--card:var(--surface);--tint:var(--soft);--simple-neutral:var(--soft);--good:var(--ok);--shadow:var(--sh-1);
  }
}

/* ---------- 2. BASE ---------- */
html{background:var(--paper)}
body,body.view-home,body.view-profile,body.view-practice,body.inLesson{background:var(--paper);color:var(--ink);font-family:var(--font-text);font-size:var(--t-md);line-height:var(--lh-body);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
body.view-profile,body.view-practice{--card:var(--surface);--ink:var(--ink);--muted:var(--ink-2);--line:var(--line);--soft:var(--soft)}
h1,h2,h3,.brand,.simple-next h2,.live-entry h2,.wsheet-en{font-family:var(--font-display);font-weight:700;color:var(--ink)}
h1,#app>h1,.simple-home-content>h1,.simple-welcome h1{font-size:var(--t-3xl);line-height:var(--lh-tight);letter-spacing:-.03em;margin:0 0 var(--s-4)}
h2,.simple-next h2{font-size:var(--t-xl);line-height:var(--lh-snug);letter-spacing:-.02em}
h3{font-size:var(--t-lg);line-height:var(--lh-snug);letter-spacing:-.01em}
p{margin:0 0 var(--s-3)}p:last-child{margin-bottom:0}
.muted,.simple-intro,.simple-device-note,.simple-progress-caption{color:var(--ink-2)}
.small{font-size:var(--t-sm)}
[lang="so"],.wline-so,.conversation-translation,.so{line-height:var(--lh-body)}
.tnum,.num,#xpPill,.pill,.badge,.kpi b,.simple-lesson-index,.simple-progress-caption,.coach-stat strong,.simple-progress-stat strong,.wcount,.navind{font-variant-numeric:tabular-nums}
a{color:var(--accent);text-underline-offset:3px}
button,input,textarea,select{font-family:inherit}
button{transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
button:active:not(:disabled){transform:translateY(1px)}
:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--accent-soft)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- 3. SHELL: top bar + bottom nav ---------- */
.topbar,body.view-home .topbar,body.view-profile .topbar,body.view-practice .topbar{background:var(--paper);border:0;min-height:72px;padding:var(--s-4) var(--s-5);max-width:640px}
.brand,body.view-home .brand,body.view-profile .brand,body.view-practice .brand{font-size:var(--t-lg);font-weight:700;letter-spacing:-.02em}
.brand span{color:var(--accent)}
.simple-language{width:44px;height:44px;min-width:44px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-family:var(--font-text);font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;border-radius:var(--r-full)}
.simple-language:hover{border-color:var(--line-2)}
#xpPill{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);padding:var(--s-1) var(--s-3);font-weight:600;font-size:var(--t-sm)}
.nav{background:var(--surface);border-top:1px solid var(--line);min-height:72px;padding:var(--s-2) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom));box-shadow:var(--sh-0)}
.nav button{min-height:56px;gap:var(--s-1);border-radius:var(--r-md);color:var(--ink-2);font-size:var(--t-xs);font-weight:500;letter-spacing:.01em}
.nav button.active{color:var(--accent);font-weight:600}
.nav button:hover{background:var(--soft)}
.nav button:active{background:var(--soft)}
.nav .simple-icon{width:24px;height:24px}
.wrap,.wrap.wide,body.view-home .wrap,body.view-profile .wrap,body.view-practice .wrap{max-width:640px;padding:var(--s-5) var(--s-5) var(--s-5)}
@media(min-width:1024px){.topbar,body.view-home .topbar{max-width:920px}.wrap,.wrap.wide{padding-top:var(--s-6)}}
@media(max-width:600px){.topbar,body.view-home .topbar,body.view-profile .topbar,body.view-practice .topbar{min-height:64px;padding:var(--s-3) var(--s-4)}.wrap,.wrap.wide,body.view-home .wrap,body.view-profile .wrap,body.view-practice .wrap{padding:var(--s-4) var(--s-4) var(--s-5)}}
@media(max-width:360px){.topbar,.wrap,body.view-home .topbar,body.view-home .wrap,body.view-profile .wrap,body.view-practice .wrap{padding-left:var(--s-4);padding-right:var(--s-4)}}

/* ---------- 4. PRIMITIVES ---------- */
.simple-icon,.ic{stroke-width:1.75}
.card,.f-group,.f-pass,.f-acadcard,.lesnav-in,details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card{padding:var(--s-4)}
.card h2,.card h3{margin:0 0 var(--s-2)}
.card+.card{margin-top:var(--s-3)}
details{padding:var(--s-3) var(--s-4)}summary{font-weight:600;font-family:var(--font-text)}
.hero{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--sh-1)}
.hero h1{font-size:var(--t-2xl)}.hero p{opacity:1;color:var(--ink-2)}
.hero .progress{background:var(--soft)}
.progress,.simple-progress{height:8px;background:var(--soft);border-radius:var(--r-full)}
.progress i,.simple-progress i{background:var(--accent);border-radius:var(--r-full);transition:width var(--dur-2) var(--ease)}
.kpi div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-2) var(--s-3)}
.kpi b{font-family:var(--font-display);font-size:var(--t-xl)}
/* buttons */
.btn,body.view-profile .btn,body.view-practice .btn,.lesnav .btn,.simple-primary,.dictionary-search button,#academyTutor button{background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink);border-radius:var(--r-md);min-height:48px;padding:var(--s-3) var(--s-4);font-family:var(--font-text);font-weight:600;font-size:var(--t-md);box-shadow:var(--sh-0);letter-spacing:-.005em}
.btn:hover,.simple-primary:hover,.dictionary-search button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.secondary,body.view-profile .btn.secondary,body.view-practice .btn.secondary,.lesnav .btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-0)}
.btn.secondary:hover{background:var(--soft);border-color:var(--line-2)}
.btn.ghost,body.view-profile .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.amber,:root[data-theme="dark"] .btn.amber{background:var(--surface);border-color:var(--warn);color:var(--warn)}
:root[data-theme="dark"] .btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
:root[data-theme="dark"] .btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
:root[data-theme="dark"] .btn.ghost,:root[data-theme="dark"] .btn.amber{background:transparent;color:var(--ink);border-color:var(--line)}
.btn:disabled,.simple-primary:disabled{opacity:.5}
.iconbtn,.simple-icon-button{min-width:44px;min-height:44px;width:44px;height:44px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:var(--t-md)}
.iconbtn:hover,.simple-icon-button:hover{background:var(--soft);border-color:var(--line-2)}
.iconbtn .ic,.iconbtn svg{width:22px;height:22px}
.simple-back,.simple-text-button{color:var(--accent);font-weight:600;font-size:var(--t-sm)}
.simple-row{min-height:64px;padding:var(--s-3) 0;border-bottom:1px solid var(--line);font-weight:500}
.simple-row>small{font-size:var(--t-sm);color:var(--ink-2)}
.simple-row .simple-icon{color:var(--ink-3)}
.simple-row:hover{color:var(--accent)}
.simple-row:hover .simple-icon:last-child{color:var(--accent)}
.simple-row:active{background:transparent}
/* chips, pills, badges */
.pill,.badge,.chipbtn{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);font-weight:600;font-size:var(--t-sm);color:var(--ink);padding:var(--s-1) var(--s-3);line-height:1.4}
.pill{display:inline-flex;align-items:center;gap:var(--s-1);min-height:32px;background:var(--soft);border-color:transparent}
.badge{display:inline-block;margin:0 var(--s-1) var(--s-1) 0;background:var(--soft);border-color:transparent}
.chipbtn{min-height:44px;padding:var(--s-2) var(--s-4);cursor:pointer}
.chipbtn:hover{border-color:var(--line-2);background:var(--soft)}
.chipbtn.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* inputs */
input[type=text],input[type=search],textarea,select,#academyUnit,.simple-welcome input,.wsearch input[type=search],.coach-plan select{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-md);min-height:48px;padding:var(--s-3);font-size:var(--t-md);font-family:var(--font-text);box-shadow:var(--sh-0)}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
label,.simple-label{font-weight:600;font-size:var(--t-sm);color:var(--ink-2);margin:var(--s-4) 0 var(--s-2)}
.dictionary-search{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);padding:var(--s-1) var(--s-1) var(--s-1) var(--s-3)}
.dictionary-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dictionary-search button{min-height:40px;border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);font-size:var(--t-sm)}
/* quiz options + feedback */
.opt{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-md);min-height:52px;padding:var(--s-3) var(--s-4);font-weight:500}
.opt:hover{border-color:var(--ink-3)}
.opt.correct{border-color:var(--ok);background:var(--ok-soft);color:var(--ink)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--ink)}
.feedback{border-radius:var(--r-md);padding:var(--s-3) var(--s-4);border:1px solid transparent}
.feedback.good{background:var(--ok-soft);color:var(--ink);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.feedback.bad{background:var(--warn-soft);color:var(--ink);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.dialogue{background:var(--soft);border-radius:var(--r-md);padding:var(--s-4)}
.vitem{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3);background:var(--surface)}
.vitem b{font-family:var(--font-display);font-size:var(--t-lg)}
.lessonrow{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);min-height:64px;padding:var(--s-3)}
.num{background:var(--soft);font-family:var(--font-display);font-weight:700}
.done .num{background:var(--ok);color:#fff}
.stepbar span{font-size:var(--t-xs);border-radius:var(--r-full);background:var(--soft);border:1px solid transparent;padding:var(--s-1) var(--s-2)}
.stepbar span.on{background:var(--ink);color:var(--paper)}
.lesnav-in{border-width:1px;border-radius:var(--r-lg);padding:var(--s-2);gap:var(--s-2)}
.lesnav .navind{font-weight:600;font-size:var(--t-xs)}
.lessonfoot{border-radius:var(--r-md);box-shadow:var(--sh-1)}
#academyTutor textarea{border-radius:var(--r-md);border-color:var(--line-2)}
.simple-details{border-color:var(--line)}
.simple-details summary{font-weight:500;color:var(--ink)}.simple-details[open]>summary{color:var(--accent)}
.simple-details>.simple-text-button{padding:var(--s-2) 0}
.simple-avatar{background:var(--soft);color:var(--accent);font-family:var(--font-display);font-weight:700}
.simple-person h2{font-size:var(--t-xl)}
.coach-today{background:var(--soft);border-radius:var(--r-lg);padding:var(--s-5);margin-top:var(--s-5)}
.coach-today h2{font-size:var(--t-lg);margin:0 0 var(--s-2)}
.coach-stat strong,.simple-progress-stat strong{color:var(--accent);font-family:var(--font-display)}
.coach-milestone{color:var(--ok)}
.conversation-translation{border-left:3px solid var(--accent)}
/* legacy hard overrides from academy-ui.css are re-pointed at the system */
#app .f-group,#app .f-pass,#app .f-acadcard{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
#app .f-row,#app .f-lab,#app .f-lab .en,#app .f-lab .so{color:var(--ink)!important}
#app .f-val,#app .f-chev{color:var(--ink-2)!important}
.f-ic{background:var(--soft);color:var(--accent)}
.f-stagebar{background:var(--line)}
.chip,.wordchips span{border-radius:var(--r-full)}

/* ---------- 5. HOME ---------- */
.simple-home-content>h1{font-size:var(--t-2xl);max-width:none;margin-bottom:var(--s-1)}
.simple-intro{font-size:var(--t-md);margin:0 0 var(--s-5)}
.simple-device-note{font-size:var(--t-xs);margin-top:var(--s-6)}
#homeAiTutor{display:flex;align-items:center}
/* continue hero */
.simple-next{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);margin:0 0 var(--s-4);box-shadow:var(--sh-1);position:relative;overflow:hidden}
.simple-next::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--stage,var(--accent))}
.hero-top{display:flex;gap:var(--s-4);align-items:flex-start;justify-content:space-between}
.hero-meta{min-width:0;flex:1}
.hero-eyebrow{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 var(--s-2)}
.hero-eyebrow i{width:10px;height:10px;border-radius:var(--r-full);background:var(--stage,var(--accent));flex:0 0 auto}
.simple-lesson-number{font-size:var(--t-sm);color:var(--ink-2);margin:0 0 var(--s-1);font-weight:500}
.simple-next h2{margin:0 0 var(--s-4);font-size:var(--t-xl)}
.ring{width:72px;height:72px;flex:0 0 auto;position:relative}
.ring svg{width:72px;height:72px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.ring .ring-bg{stroke:var(--soft)}
.ring .ring-fg{stroke:var(--stage,var(--accent));transition:stroke-dashoffset var(--dur-2) var(--ease)}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--t-sm);font-weight:700;font-variant-numeric:tabular-nums}
.hero-stats{display:flex;gap:var(--s-4);margin:0 0 var(--s-4);font-size:var(--t-sm);color:var(--ink-2)}
.hero-stats b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.simple-primary{border-radius:var(--r-md);min-height:52px;padding:var(--s-3) var(--s-4);font-size:var(--t-md);font-weight:600;width:100%}
.simple-primary .simple-icon{width:22px;height:22px}
.simple-progress{margin:var(--s-4) 0 var(--s-2)}
.simple-progress-caption{font-size:var(--t-xs)}
/* journey map */
.journey{margin:var(--s-5) 0 0}
.journey-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin:0 0 var(--s-3)}
.journey-head h2{font-size:var(--t-lg);margin:0}
.journey-head span{font-size:var(--t-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}
.journey ol{list-style:none;margin:0;padding:0;position:relative}
.journey ol::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:var(--line)}
.journey li{position:relative}
.jy-node{display:flex;align-items:center;gap:var(--s-3);width:100%;text-align:left;background:transparent;border:0;padding:var(--s-2) 0;min-height:52px;cursor:pointer;color:var(--ink);border-radius:var(--r-md)}
.jy-node:hover .jy-title{color:var(--accent)}
.jy-dot{width:40px;height:40px;border-radius:var(--r-full);border:2px solid var(--stage);background:var(--surface);color:var(--stage);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:var(--t-sm);flex:0 0 auto;position:relative;z-index:1;font-variant-numeric:tabular-nums}
.jy-node.j-done .jy-dot{background:var(--stage);color:#fff}
.jy-node.j-cur .jy-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--stage) 22%,transparent)}
.jy-node.j-locked .jy-dot{border-color:var(--line-2);color:var(--ink-3);border-style:dashed}
.jy-node.j-locked{color:var(--ink-2)}
.jy-body{flex:1;min-width:0}
.jy-title{display:block;font-weight:600;font-size:var(--t-md);line-height:var(--lh-snug)}
.jy-sub{display:block;font-size:var(--t-sm);color:var(--ink-2);line-height:var(--lh-snug);margin-top:2px}
.jy-bar{height:4px;border-radius:var(--r-full);background:var(--soft);margin-top:var(--s-2);overflow:hidden;max-width:220px}
.jy-bar i{display:block;height:100%;background:var(--stage);width:0}
.jy-count{font-size:var(--t-xs);color:var(--ink-2);font-variant-numeric:tabular-nums;flex:0 0 auto}

/* ---------- 6. LESSONS LIST ---------- */
.stage-head{position:sticky;top:0;z-index:5;background:var(--paper);padding:var(--s-3) 0;margin:0 0 var(--s-2);border-bottom:1px solid var(--line)}
.stage-head-row{display:flex;align-items:center;gap:var(--s-3)}
.stage-head-row i{width:12px;height:12px;border-radius:var(--r-full);background:var(--stage);flex:0 0 auto}
.stage-head-row b{font-family:var(--font-display);font-size:var(--t-md);font-weight:700;flex:1;min-width:0}
.stage-head-row span{font-size:var(--t-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}
.stage-head .progress{margin-top:var(--s-2);height:6px}
.stage-head .progress i{background:var(--stage)}
#academyUnit{margin:0 0 var(--s-4)}
.simple-lesson-list{margin-top:var(--s-2)}
.simple-lesson{min-height:64px;padding:var(--s-3) 0;gap:var(--s-3);font-weight:500}
.simple-lesson-index{min-width:36px;height:36px;border-radius:var(--r-full);border:1.5px solid var(--stage,var(--line-2));color:var(--stage,var(--ink-2));font-weight:600;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.simple-lesson.is-done .simple-lesson-index{background:var(--stage);border-color:var(--stage);color:#fff}
.simple-lesson:disabled .simple-lesson-index{border-style:dashed;border-color:var(--line-2);color:var(--ink-3)}
.simple-lesson:not(:disabled):hover{color:var(--accent)}

/* ---------- 7. WATCH ---------- */
.wchannel{margin-top:var(--s-4)}
.wch-logo{background:var(--ink);color:var(--paper);font-family:var(--font-display);width:52px;height:52px}
.wlatest{background:var(--soft);border:1px solid transparent;border-radius:var(--r-md);padding:var(--s-3) var(--s-4);min-height:72px;gap:var(--s-3)}
.wlatest:hover{border-color:var(--line-2)}
.wlatest-play{background:var(--accent);color:var(--accent-ink);width:44px;height:44px;padding:0}
.wlatest-play svg{width:22px;height:22px;margin-left:2px}
.wframe{border-radius:var(--r-md);background:var(--ink)}
.wframe.skel{background:linear-gradient(90deg,var(--soft) 25%,var(--line) 37%,var(--soft) 63%);background-size:400% 100%;animation:shimmer 1.4s var(--ease) infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.wsearch label{margin:var(--s-5) 0 var(--s-2)}
.wchips{padding:var(--s-3) 0 var(--s-1);gap:var(--s-2)}
.wchips .chipbtn{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm)}
.wchips .chipbtn i{width:10px;height:10px;border-radius:var(--r-full);background:var(--stage,var(--ink-3))}
.wchips .chipbtn.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wgroup{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line)}
.wgroup>h2{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;font-size:var(--t-xl);margin:0 0 var(--s-1)}
.wgroup>h2 i{width:12px;height:12px;border-radius:var(--r-full);background:var(--stage,var(--ink-3));flex:0 0 auto}
.wgroup>h2 .muted{font-weight:500;font-family:var(--font-text);font-size:var(--t-md)}
.wgroup>h2 .pill{margin-left:auto;font-size:var(--t-xs);min-height:28px}
.wgroup>.small{margin:0 0 var(--s-3)}
.wgroup .card{padding:var(--s-3)}
.wgroup .card h2{font-size:var(--t-lg)}
.wgroup .card .pill{background:var(--surface);border:1px solid var(--line)}
.wgroup .card .pill i{width:8px;height:8px;border-radius:var(--r-full);background:var(--stage,var(--ink-3))}
.wpanel h3{display:flex;align-items:center;gap:var(--s-2)}
.wline{padding:var(--s-3) 0;border-top:1px solid var(--line)}
.wline-en{font-size:var(--t-lg);font-weight:500;line-height:1.8}
.wline-so{font-size:var(--t-md);color:var(--ink-2);line-height:var(--lh-body)}
.wword{border-bottom:2px dotted var(--line-2);border-radius:var(--r-sm);transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.wword:hover,.wword:focus-visible{background:var(--soft);border-bottom-color:var(--accent)}
.wword.on{background:var(--accent);color:var(--accent-ink);border-bottom-color:var(--accent)}
.wsheet{bottom:calc(80px + env(safe-area-inset-bottom))}
.wsheet-in{border-radius:var(--r-lg);box-shadow:var(--sh-1),0 16px 40px -12px rgba(27,26,23,.35);padding:var(--s-4);animation:rise var(--dur-2) var(--ease)}
.wsheet-en{font-size:var(--t-xl)}.wsheet-so{font-size:var(--t-lg)}
.wsheet .btn{min-height:48px;font-size:var(--t-sm)}
.wplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.wplay span{width:56px;height:56px;border-radius:var(--r-full);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--sh-1);transition:transform var(--dur-1) var(--ease)}
.wplay span svg{width:26px;height:26px;margin-left:3px}
button:hover .wplay span{transform:scale(1.04)}
.wempty{text-align:center;padding:var(--s-6) var(--s-4)}
.wempty svg{width:40px;height:40px;color:var(--ink-3);margin:0 auto var(--s-3);display:block}

/* lesson bottom bar: on-system (overrides the older navy/teal bar) */
body .lesnav .lesnav-in,body.inLesson .lesnav .lesnav-in{background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--sh-1)}
body .lesnav .navind,body .lesnav .navind span{color:var(--ink)}body .lesnav .navind span{color:var(--ink-2)}
body .lesnav .btn.navnext,body .lesnav .btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:var(--sh-0)}
body .lesnav .btn.secondary,body .lesnav .btn.secondary.navback{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
body .lessonfoot{background:var(--surface);border-color:var(--line)}

/* ---------- 8. MOTION ---------- */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#app>*{animation:rise var(--dur-2) var(--ease) both}
#app.lesson-result>div>h2:first-of-type,#app.lesson-result .feedback.good{animation:rise var(--dur-2) var(--ease) both}
.lesson-done-mark{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--r-full);background:var(--ok-soft);color:var(--ok);margin:0 0 var(--s-3)}
.lesson-done-mark svg{width:28px;height:28px}
.lesson-done-mark path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw var(--dur-2) var(--ease) 120ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ui-ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:-4px}
h1 .ui-ic,h2 .ui-ic{width:24px;height:24px;vertical-align:-3px;color:var(--ink-2)}
.btn .ui-ic,.simple-primary .ui-ic{width:20px;height:20px}
/* empty states */
.empty{text-align:center;padding:var(--s-6) var(--s-4);color:var(--ink-2)}
.empty .ui-ic{width:36px;height:36px;color:var(--ink-3);display:block;margin:0 auto var(--s-3)}
.empty h2{font-size:var(--t-lg);color:var(--ink);margin:0 0 var(--s-1)}
/* print */
@media print{.nav,.topbar,.wsheet{display:none}}

/* ---------- 9. CITIZENSHIP / JINSIYADDA ---------- */
.cz{display:flex;flex-direction:column}
.cz>h1{margin-bottom:var(--s-2)}
.cz .hero-eyebrow .ui-ic{width:16px;height:16px;color:var(--accent)}
.cz-h{font-size:var(--t-lg);margin:var(--s-6) 0 var(--s-3)}
.cz-source{font-size:var(--t-xs);color:var(--ink-2);margin:var(--s-6) 0 0;line-height:var(--lh-body)}
.cz-count{display:flex;gap:var(--s-4);align-items:center;background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:var(--r-lg);padding:var(--s-5);margin:0 0 var(--s-4)}
.cz-count h2{font-size:var(--t-lg);margin:0 0 var(--s-1);display:flex;gap:var(--s-2);align-items:center}
.cz-count h2 .ui-ic{color:var(--gold-ink)}
.cz-count p{font-size:var(--t-sm);color:var(--ink-2);margin:0 0 var(--s-3)}
.cz-count-body{flex:1;min-width:0}
.cz-count-num{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:88px;flex:0 0 auto}
.cz-count-num b{font-family:var(--font-display);font-size:var(--t-3xl);line-height:1;color:var(--gold-ink);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cz-count-num span{font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin-top:var(--s-1)}
.cz-date{display:flex;gap:var(--s-2);flex-wrap:wrap}
.cz-date input{flex:1;min-width:150px;min-height:48px;border:1px solid var(--line-2);border-radius:var(--r-md);padding:0 var(--s-3);background:var(--surface);color:var(--ink);font:inherit}
.cz-ready{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s-5);margin:0 0 var(--s-4)}
.cz-ready-top{display:flex;gap:var(--s-4);align-items:center}
.cz-ready-top h2{font-size:var(--t-lg);margin:0 0 var(--s-1)}.cz-ready-top p{margin:0;color:var(--ink-2)}
.cz-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2);margin:var(--s-4) 0 0;padding-top:var(--s-4);border-top:1px solid var(--line)}
.cz-stats div{min-width:0}.cz-stats dt{font-size:var(--t-xs);color:var(--ink-2);overflow-wrap:anywhere;line-height:var(--lh-snug)}.cz-stats dd{margin:var(--s-1) 0 0;font-family:var(--font-display);font-weight:700;font-size:var(--t-lg);font-variant-numeric:tabular-nums}
.cz-ed{padding:var(--s-5) 0 0}
.cz-ed h2{font-size:var(--t-lg);margin:0 0 var(--s-3)}
.cz-seg{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin:0 0 var(--s-3)}
.cz-seg button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;padding:var(--s-3) var(--s-4);border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);cursor:pointer;text-align:left}
.cz-seg button b{font-family:var(--font-display);font-size:var(--t-xl);line-height:1}.cz-seg button span{font-size:var(--t-sm);color:var(--ink-2)}
.cz-seg button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.cz-seg button[aria-pressed="true"] b{color:var(--accent)}
.cz-toggle{display:flex;gap:var(--s-3);align-items:flex-start;font-weight:400;font-size:var(--t-sm);color:var(--ink);margin:var(--s-4) 0 0;padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;line-height:var(--lh-body)}
.cz-toggle input{width:24px;height:24px;min-height:0;flex:0 0 auto;accent-color:var(--accent);margin-top:2px}
.cz-rows{border-top:1px solid var(--line)}
.cz-row,.cz-home{display:flex;align-items:center;gap:var(--s-4);width:100%;min-height:72px;padding:var(--s-3) 0;background:transparent;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;color:var(--ink)}
.cz-row>.ui-ic:last-child,.cz-home>.ui-ic:last-child{color:var(--ink-3);width:18px;height:18px}
.cz-row:hover .cz-row-t b,.cz-home:hover .cz-row-t b{color:var(--accent)}
.cz-row-ic{width:44px;height:44px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.cz-row-ic .ui-ic{width:22px;height:22px}
.cz-row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cz-row-t b{font-weight:600;font-size:var(--t-md);line-height:var(--lh-snug)}.cz-row-t small{font-size:var(--t-sm);color:var(--ink-2);line-height:var(--lh-snug);font-variant-numeric:tabular-nums}
.cz-row-t .cz-bar{margin-top:var(--s-2);height:4px;max-width:240px}
.cz-topic .cz-num{background:transparent;border:1.5px solid var(--stage);color:var(--stage);border-radius:var(--r-full);font-family:var(--font-display);font-weight:700}
.cz-topic .cz-bar i{background:var(--stage)}
.cz-home{border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);background:var(--gold-soft);border-radius:var(--r-lg);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-2)}
.cz-home .cz-row-ic{background:var(--surface);color:var(--gold-ink)}
.cz-home .cz-bar{background:color-mix(in srgb,var(--gold) 30%,var(--surface))}.cz-home .cz-bar i{background:var(--gold-ink)}
.cz-meter{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-2);margin:0 0 var(--s-4);font-variant-numeric:tabular-nums}
.cz-meter .cz-bar{flex:1 1 100%;height:6px}
.cz-tally{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--ok);font-weight:600;margin-left:auto}
.cz-chips{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:0 0 var(--s-4)}
.cz-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s-5);animation:rise var(--dur-2) var(--ease) both}
.cz-officer{border-top:4px solid var(--accent)}
.cz-qrow{display:flex;gap:var(--s-3);align-items:flex-start;justify-content:space-between;margin:0 0 var(--s-4)}
.cz-q{font-size:var(--t-xl);line-height:var(--lh-snug);margin:0;flex:1;min-width:0;overflow-wrap:anywhere}
.cz-wide{width:100%;min-height:56px;font-size:var(--t-lg);margin-top:var(--s-4)}
.cz-reveal{animation:rise var(--dur-2) var(--ease) both}
.cz-ans{list-style:none;margin:0 0 var(--s-4);padding:0;border-top:1px solid var(--line)}
.cz-ans li{padding:var(--s-3) 0 var(--s-3) var(--s-5);border-bottom:1px solid var(--line);font-size:var(--t-lg);font-weight:500;line-height:var(--lh-snug);position:relative}
.cz-ans li::before{content:"";position:absolute;left:var(--s-1);top:calc(var(--s-3) + .55em);width:8px;height:8px;border-radius:var(--r-full);background:var(--accent)}
.cz-so{font-size:var(--t-md);line-height:var(--lh-body);color:var(--ink);background:var(--soft);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-4)}
.cz-check{display:flex;gap:var(--s-2);align-items:flex-start;font-size:var(--t-sm);background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:var(--r-md);padding:var(--s-3);margin:0 0 var(--s-3);color:var(--ink)}
.cz-check .ui-ic{color:var(--gold-ink);margin-top:2px}.cz-check a{color:var(--gold-ink);font-weight:600;overflow-wrap:anywhere}
.cz-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-4)}
.cz-two .btn{min-height:56px;width:100%;line-height:var(--lh-snug)}
.cz-ask{font-weight:600;margin:var(--s-4) 0 0}
.cz-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-4);font-size:var(--t-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}
.cz-pager button:disabled{opacity:.35}
.cz-brief{background:var(--soft);border-radius:var(--r-lg);padding:var(--s-5);margin:0 0 var(--s-4)}
.cz-brief h2{font-size:var(--t-lg);margin:0 0 var(--s-2)}
.cz-say{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);font-weight:600;font-size:var(--t-lg);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);margin:var(--s-2) 0 0}
.cz-say .muted{font-weight:400;font-size:var(--t-sm)}
.cz-legal{display:flex;gap:var(--s-3);align-items:flex-start;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-left:4px solid var(--gold);background:var(--gold-soft);border-radius:var(--r-md);padding:var(--s-4);margin:0 0 var(--s-4)}
.cz-legal .ui-ic{color:var(--gold-ink);width:24px;height:24px;margin-top:2px}.cz-legal p{font-size:var(--t-sm);margin:0 0 var(--s-2)}
.cz-n4 summary{display:flex;gap:var(--s-3);align-items:flex-start;justify-content:space-between;list-style:none;font-weight:500;line-height:var(--lh-snug);min-height:56px;padding:var(--s-4) 0}
.cz-n4 summary::-webkit-details-marker{display:none}
.cz-n4 summary .ui-ic{color:var(--ok)}
.cz-n4-body{padding:0 0 var(--s-5)}
.cz-n4-body h3{font-size:var(--t-xs);font-family:var(--font-text);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:var(--s-4) 0 var(--s-2)}
.cz-words{list-style:none;margin:0;padding:0}.cz-words li{display:flex;flex-direction:column;padding:var(--s-2) 0;border-bottom:1px solid var(--line)}.cz-words b{font-weight:600}.cz-words span{color:var(--ink-2)}
.cz-n4-body .btn{margin-top:var(--s-4);width:100%}
.cz-sentence{font-family:var(--font-display);font-weight:700;font-size:var(--t-2xl);line-height:1.45;letter-spacing:-.02em;margin:0 0 var(--s-3)}
.cz-sentence.small{font-size:var(--t-lg);margin:var(--s-2) 0 0}
.cz-w{font:inherit;color:inherit;background:none;border:0;border-bottom:2px dotted var(--line-2);border-radius:var(--r-sm);padding:2px 2px;margin:0;cursor:pointer;letter-spacing:inherit}
.cz-w:hover{background:var(--soft)}.cz-w.on{background:var(--accent);color:var(--accent-ink);border-bottom-color:var(--accent)}
.cz-gloss{min-height:56px;display:flex;flex-direction:column;justify-content:center;background:var(--soft);border-radius:var(--r-md);padding:var(--s-2) var(--s-4);margin:0 0 var(--s-4);font-size:var(--t-md)}
.cz-gloss b{font-weight:600}.cz-gloss span{color:var(--ink-2)}
.cz-actions{display:flex;gap:var(--s-2);flex-wrap:wrap}
.cz-actions .btn{flex:1 1 140px;min-height:52px}
.cz-heard{font-size:var(--t-sm);color:var(--ink-2);margin:var(--s-3) 0 0}.cz-heard.ok{color:var(--ok);font-weight:600}
.cz-input{font-size:var(--t-lg)!important;min-height:56px!important;width:100%}
.cz-card .feedback{margin-top:var(--s-4)}
.cz-result{text-align:center;display:flex;flex-direction:column;align-items:center;padding:var(--s-5) 0 0}
.cz-result h1{margin:var(--s-5) 0 var(--s-2)}.cz-result .simple-intro{max-width:34em}
.cz-result .cz-h,.cz-result .cz-missed,.cz-result .small{align-self:stretch;text-align:left}
.cz-result .cz-two,.cz-result .cz-wide{align-self:stretch}
.cz-seal{position:relative;width:168px;height:168px;animation:rise 320ms var(--ease) both}
.cz-seal svg{width:168px;height:168px;transform:rotate(-90deg)}
.cz-seal circle{fill:none;stroke-width:8;stroke-linecap:round}
.cz-seal-bg{stroke:var(--soft)}.cz-seal-fg{stroke:var(--ink-3);animation:sealdraw 900ms var(--ease) 120ms both}
.cz-seal.ok .cz-seal-fg{stroke:var(--gold)}.cz-seal.ok{filter:drop-shadow(0 8px 24px color-mix(in srgb,var(--gold) 35%,transparent))}
@keyframes sealdraw{from{stroke-dashoffset:327}}
.cz-seal>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cz-seal b{font-family:var(--font-display);font-size:var(--t-3xl);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}.cz-seal b span{font-size:var(--t-lg);color:var(--ink-2);font-weight:500}
.cz-seal small{font-size:var(--t-xs);color:var(--ink-2);margin-top:var(--s-1);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.cz-steps{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-1);margin:0 0 var(--s-5);padding:0}
.cz-steps li{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);min-width:0;position:relative}
.cz-steps li span{width:32px;height:32px;border-radius:var(--r-full);border:1.5px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-sm);font-weight:600;color:var(--ink-3);background:var(--paper);font-variant-numeric:tabular-nums}
.cz-steps li span .ui-ic{width:16px;height:16px}
.cz-steps li small{font-size:11px;color:var(--ink-3);text-align:center;line-height:1.2;overflow-wrap:anywhere}
.cz-steps li.done span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cz-steps li.now span{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.cz-steps li.now small{color:var(--ink);font-weight:600}
.cz-plan{margin:0 0 var(--s-4);padding:0;list-style:none;counter-reset:czp;border-top:1px solid var(--line)}
.cz-plan li{counter-increment:czp;display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) 0;border-bottom:1px solid var(--line);font-weight:500}
.cz-plan li::before{content:counter(czp);width:28px;height:28px;border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-sm);font-weight:700;flex:0 0 auto}
.cz-cert{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);padding:var(--s-2);box-shadow:var(--sh-1);margin:0 0 var(--s-4)}
.cz-cert.fresh{animation:rise 420ms var(--ease) both}
.cz-cert-in{border:1.5px solid var(--gold);border-radius:var(--r-md);padding:var(--s-6) var(--s-5);text-align:center;display:flex;flex-direction:column;align-items:center}
.cz-cert-in .hero-eyebrow{justify-content:center;text-align:center}
.cz-cert-mark{width:64px;height:64px;border-radius:var(--r-full);background:var(--gold-soft);color:var(--gold-ink);display:inline-flex;align-items:center;justify-content:center;margin:var(--s-3) 0}
.cz-cert-mark .ui-ic{width:32px;height:32px}
.cz-cert h2{font-size:var(--t-2xl);margin:0 0 var(--s-2);overflow-wrap:anywhere}
.cz-cert-line{color:var(--ink-2);max-width:30em;margin:0 0 var(--s-4)}
.cz-cert-parts{list-style:none;margin:0;padding:0;align-self:stretch;text-align:left;border-top:1px solid var(--line)}
.cz-cert-parts li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.cz-cert-parts li span{width:28px;height:28px;border-radius:var(--r-full);background:var(--warn-soft);color:var(--warn);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.cz-cert-parts li.ok span{background:var(--ok-soft);color:var(--ok)}.cz-cert-parts li span .ui-ic{width:16px;height:16px}
.cz-cert-parts b{flex:1;font-weight:600}.cz-cert-parts small{color:var(--ink-2);font-size:var(--t-sm);font-variant-numeric:tabular-nums;text-align:right}
.cz-cert-foot{font-size:var(--t-sm);color:var(--ink-2);margin:var(--s-4) 0 0}.cz-cert-foot span{font-size:var(--t-xs)}
.cz-hist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cz-hist li{display:flex;justify-content:space-between;padding:var(--s-3) 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;color:var(--ink-2)}.cz-hist b{color:var(--ink)}.cz-hist li.ok b{color:var(--ok)}
.cz-done .ui-ic{color:var(--gold-ink)}
.cz-skel{height:120px;border-radius:var(--r-lg);margin:0 0 var(--s-3);background:linear-gradient(90deg,var(--soft) 25%,var(--line) 37%,var(--soft) 63%);background-size:400% 100%;animation:shimmer 1.4s var(--ease) infinite}.cz-skel.short{height:64px}
.about-ded{border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-left:4px solid var(--gold);background:var(--gold-soft);border-radius:var(--r-md);padding:var(--s-5);margin:0 0 var(--s-6)}
.about-ded p{font-family:var(--font-display);font-weight:700;font-size:var(--t-xl);line-height:var(--lh-snug);letter-spacing:-.02em;margin:0 0 var(--s-2);color:var(--ink)}
.about-ded p+p{font-family:var(--font-text);font-weight:500;font-size:var(--t-md);letter-spacing:0;color:var(--ink-2);margin:0}
.nav button{max-width:150px}.nav{padding-left:var(--s-2);padding-right:var(--s-2)}
@media(max-width:400px){.cz-stats{grid-template-columns:repeat(2,1fr);gap:var(--s-3)}.cz-count{flex-direction:column;align-items:flex-start}.cz-count-num{flex-direction:row;align-items:baseline;gap:var(--s-2);min-width:0}.cz-sentence{font-size:var(--t-xl)}.cz-two{grid-template-columns:1fr}.cz-two .btn.secondary{order:2}}
@media print{body.cz-printing *{visibility:hidden}body.cz-printing #czCert,body.cz-printing #czCert *{visibility:visible}body.cz-printing #czCert{position:absolute;left:0;top:0;width:100%;box-shadow:none}}

/* ---------- 10. CITIZENSHIP: five more ways to learn ---------- */
.cz-mine{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;background:var(--accent-soft);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-3)}
.cz-mine .ui-ic{color:var(--accent)}.cz-mine span{font-size:var(--t-sm);color:var(--ink-2)}.cz-mine b{font-size:var(--t-lg);font-weight:600;flex:1 1 100%;overflow-wrap:anywhere}
.cz-form select,.cz-form input{width:100%}.cz-form .small{margin:var(--s-1) 0 0}.cz-form a{display:inline-flex;align-items:center;gap:var(--s-1)}
.cz-ear{display:flex;align-items:center;gap:var(--s-4);margin:0 0 var(--s-4)}
.cz-ear b{display:block;font-size:var(--t-lg)}
.cz-earbtn{width:88px;height:88px;border-radius:var(--r-full);border:0;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;box-shadow:0 0 0 8px var(--accent-soft)}
.cz-earbtn .ui-ic{width:36px;height:36px}.cz-earbtn:hover{background:var(--accent-hover)}
.cz-card .opts .opt{font-size:var(--t-lg);min-height:60px;width:100%;line-height:var(--lh-snug)}
.cz-loop .cz-q{margin:0 0 var(--s-4)}
.cz-loop.wait{border-top:4px solid var(--gold)}.cz-loop.q,.cz-loop.a{border-top:4px solid var(--accent)}
.cz-wait{height:8px;border-radius:var(--r-full);background:var(--gold-soft);overflow:hidden;margin:0 0 var(--s-4)}
.cz-wait i{display:block;height:100%;background:var(--gold);border-radius:var(--r-full);animation:czwait var(--wait) linear both}
@keyframes czwait{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.cz-wait i{width:100%}}
.cz-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:var(--s-1);margin:0 0 var(--s-4)}
.cz-sq{aspect-ratio:1;min-height:40px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);font-size:var(--t-xs);font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.cz-sq.s{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.cz-sq.k{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cz-legend{display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-2)}
.cz-legend span{display:inline-flex;align-items:center;gap:var(--s-2)}.cz-legend .cz-sq{width:16px;height:16px;min-height:0;cursor:default}

/* ---------- 11. PLAY & LEARN ---------- */
.gm-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
body.gm-playing .topbar,body.gm-playing .nav{display:none}
body.gm-playing,body.gm-playing.view-play{padding-bottom:0}
body.gm-playing .wrap{padding-top:var(--s-3);padding-bottom:var(--s-3)}
.gmh,.gm,.gm-result{display:flex;flex-direction:column}
.gmh .hero-eyebrow .ui-ic{width:16px;height:16px;color:var(--accent)}
.gm-sound{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:56px;padding:var(--s-3) var(--s-4);border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);font-weight:600;font-size:var(--t-md);cursor:pointer;margin:0 0 var(--s-5)}
.gm-sound .ui-ic{width:26px;height:26px;color:var(--ink-3)}.gm-sound.on{border-color:var(--accent);background:var(--accent-soft)}.gm-sound.on .ui-ic{color:var(--accent)}
.gm-map{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s-5)}
.gm-map .journey-head span{display:inline-flex;align-items:center;gap:var(--s-1)}.gm-map .journey-head .ui-ic{width:16px;height:16px;color:var(--gold-ink);fill:var(--gold)}
.gm-map ol{list-style:none;margin:0;padding:0;position:relative}
.gm-map ol::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:var(--line)}
.gm-map li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-1) 0;position:relative;min-height:44px}
.gm-stop{width:36px;height:36px;border-radius:var(--r-full);border:2px dashed var(--line-2);background:var(--surface);color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:var(--t-sm);flex:0 0 auto;position:relative;z-index:1;font-variant-numeric:tabular-nums}
.gm-map li.here .gm-stop{border-style:solid;border-color:var(--accent);color:var(--accent)}
.gm-map li.done .gm-stop{border-style:solid;border-color:var(--gold);background:var(--gold);color:var(--gold-ink)}
.gm-map li.glow .gm-stop{animation:gmglow 1.8s var(--ease) infinite}
.gm-place{flex:1;min-width:0;display:flex;flex-direction:column;line-height:var(--lh-snug)}.gm-place b{font-weight:600}.gm-place small{font-size:var(--t-xs);color:var(--ink-2)}
.gm-map li:not(.here):not(.done) .gm-place b{color:var(--ink-2);font-weight:500}
.gm-here{display:flex;gap:var(--s-1);flex-wrap:wrap;justify-content:flex-end}
.gm-here i{width:28px;height:28px;border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center}.gm-here .ui-ic{width:16px;height:16px}
.gm-list{display:flex;flex-direction:column;gap:var(--s-3)}
.gm-tile{display:flex;align-items:center;gap:var(--s-4);width:100%;min-height:96px;padding:var(--s-4);text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);cursor:pointer;color:var(--ink)}
.gm-tile:hover{border-color:var(--accent)}
.gm-tile-ic{width:52px;height:52px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.gm-tile-ic .ui-ic{width:28px;height:28px}
.gm-tile-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.gm-tile-t b{font-family:var(--font-display);font-size:var(--t-lg);line-height:var(--lh-snug)}.gm-tile-t small{font-size:var(--t-sm);color:var(--ink-2);line-height:var(--lh-snug)}
.gm-dots{display:flex;gap:4px;margin-top:var(--s-2)}.gm-dots i{width:10px;height:10px;border-radius:var(--r-full);background:var(--soft);border:1px solid var(--line-2)}
.gm-dots i.on{background:var(--gold);border-color:var(--gold)}.gm-dots i.next{background:var(--accent);border-color:var(--accent);animation:gmglow 1.8s var(--ease) infinite}
.gm-tile-lv{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;min-width:44px}.gm-tile-lv b{font-family:var(--font-display);font-size:var(--t-2xl);line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}.gm-tile-lv small{font-size:var(--t-xs);color:var(--ink-2)}
@keyframes gmglow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 70%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--gold) 0%,transparent)}}
.gm-glow{animation:gmglow 1.8s var(--ease) infinite}
.gm-diff{margin:0 0 var(--s-5)}
.gm-levels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.gm-level{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:68px;padding:var(--s-3) var(--s-4);text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer;color:var(--ink)}
.gm-level:disabled{background:transparent;border-style:dashed;color:var(--ink-3);cursor:not-allowed}
.gm-level.next{border-color:var(--gold);background:var(--gold-soft)}
.gm-level-n{width:40px;height:40px;border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;flex:0 0 auto;font-variant-numeric:tabular-nums}
.gm-level.done .gm-level-n{background:var(--accent);color:var(--accent-ink)}.gm-level:disabled .gm-level-n{background:var(--soft);color:var(--ink-3)}.gm-level-n .ui-ic{width:18px;height:18px}
.gm-level-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:var(--lh-snug)}.gm-level-t b{font-weight:600}.gm-level-t small{font-size:var(--t-sm);color:var(--ink-2)}
.gm-level-s{display:flex;gap:2px;flex:0 0 auto}.gm-level-s .ui-ic{width:18px;height:18px;color:var(--line-2)}.gm-level-s i.on .ui-ic{color:var(--gold-ink);fill:var(--gold)}
/* in a round */
.gm{gap:var(--s-2);min-height:calc(100dvh - 24px)}
.gm-hud{display:flex;align-items:center;gap:var(--s-2)}
.gm-lv{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}.gm-lv b{font-family:var(--font-display);font-size:var(--t-md)}.gm-lv span{font-size:var(--t-xs);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-lives{display:flex;gap:2px}.gm-lives .ui-ic{width:20px;height:20px;color:var(--line-2)}.gm-lives .on .ui-ic{color:var(--bad);fill:var(--bad)}
.gm-score{display:flex;align-items:baseline;gap:var(--s-1);min-width:64px;justify-content:flex-end}.gm-score b{font-family:var(--font-display);font-size:var(--t-xl);font-variant-numeric:tabular-nums}
.gm-score span{font-weight:700;font-size:var(--t-sm);color:var(--gold-ink);background:var(--gold-soft);border-radius:var(--r-full);padding:0 var(--s-2);opacity:0}.gm-score span.on{opacity:1;animation:rise var(--dur-2) var(--ease)}
.gm-prog{height:6px;border-radius:var(--r-full);background:var(--soft);overflow:hidden}.gm-prog i{display:block;height:100%;width:0;background:var(--accent);border-radius:var(--r-full);transition:width var(--dur-2) var(--ease)}
.gm-target{display:flex;align-items:center;gap:var(--s-3);min-height:84px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-2) var(--s-3)}
.gm-pic{width:68px;height:68px;border-radius:var(--r-md);background:var(--soft);display:grid;place-items:center;flex:0 0 auto;font-size:40px;line-height:1;overflow:hidden}.gm-pic svg{width:54px;height:54px}.gm-pic .visEm{font-size:40px}
.gm-tt{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}.gm-tso{font-size:var(--t-lg);font-weight:600;line-height:var(--lh-snug);overflow-wrap:anywhere}
.gm-spell{display:flex;gap:3px;flex-wrap:wrap}.gm-spell i{width:22px;height:28px;border-bottom:2px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:var(--t-md)}.gm-spell i.on{border-color:var(--accent);color:var(--accent)}.gm-spell i.now{border-color:var(--gold)}
.gm-stage{position:relative;flex:1;min-height:340px;touch-action:none;user-select:none;-webkit-user-select:none}
.gm-toast{min-height:48px;display:flex;justify-content:center;align-items:center;order:3;pointer-events:none}
.gm-word{display:inline-flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;justify-content:center;background:var(--ink);color:var(--paper);border-radius:var(--r-full);padding:var(--s-2) var(--s-4);animation:rise var(--dur-2) var(--ease)}
.gm-word b{font-family:var(--font-display);font-size:var(--t-lg)}.gm-word span{font-size:var(--t-sm);opacity:.85}.gm-word em{font-style:normal;font-weight:700;font-size:var(--t-sm);color:var(--gold)}
@keyframes gmshake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.gm-shake{animation:gmshake 220ms var(--ease)}
body.gm-last .gm-stage{outline:3px solid var(--gold);outline-offset:2px;border-radius:var(--r-lg)}
.gm-snake{display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}.gm-snake canvas{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.gm-pad{display:grid;grid-template-areas:". u ." "l d r";gap:var(--s-2)}
.gm-pad button{width:64px;height:56px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.gm-pad button:active{background:var(--accent-soft)}
.gm-pad .ui-ic{width:24px;height:24px}.gm-pad [style*="u"] .ui-ic{transform:rotate(-90deg)}.gm-pad [style*=":d"] .ui-ic{transform:rotate(90deg)}.gm-pad [style*=":l"] .ui-ic{transform:rotate(180deg)}
.gm-catch,.gm-slice{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;min-height:min(56dvh,460px)}
.gm-slice canvas{display:block}
.gm-fall{position:absolute;left:0;top:0;padding:var(--s-2) var(--s-4);background:var(--paper);border:1.5px solid var(--line-2);border-radius:var(--r-md);font-weight:700;font-size:var(--t-lg);white-space:nowrap;will-change:transform;box-shadow:var(--sh-1)}
.gm-basket{position:absolute;left:0;bottom:4px;width:104px;height:56px;will-change:transform}.gm-basket svg{width:104px;height:56px;display:block;transform-origin:50% 100%}
@keyframes gmwig{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg) scale(1.06)}60%{transform:rotate(7deg)}}.gm-basket.wig svg{animation:gmwig 380ms var(--ease)}
.gm-ladder{display:grid;grid-template-columns:52px 1fr;gap:var(--s-4);align-items:start}
.gm-rungs{list-style:none;margin:0;padding:var(--s-2) 0;display:flex;flex-direction:column;gap:var(--s-1);align-items:center;border-left:3px solid var(--line);border-right:3px solid var(--line);border-radius:var(--r-sm)}
.gm-rungs span{width:32px;height:32px;border-radius:var(--r-full);border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-xs);font-weight:700;font-variant-numeric:tabular-nums}.gm-rungs .ui-ic{width:16px;height:16px}
.gm-rungs li.on span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.gm-rungs li.safe span{box-shadow:0 0 0 3px var(--gold)}.gm-rungs li.next span{border-color:var(--gold);color:var(--gold-ink);animation:gmglow 1.8s var(--ease) infinite}
.gm-ladq .opts,.gm-duel .opts{margin-top:0}.gm .opt{min-height:60px;font-size:var(--t-lg);font-weight:600;width:100%}
.gm-pot{font-size:var(--t-sm);color:var(--ink-2);margin:0 0 var(--s-2)}.gm-pot b{font-family:var(--font-display);font-size:var(--t-lg);color:var(--gold-ink);font-variant-numeric:tabular-nums}
.gm-bank{width:100%;min-height:56px;margin:var(--s-3) 0 var(--s-2);border-color:var(--gold)!important;background:var(--gold-soft)!important;color:var(--gold-ink)!important}.gm-bank:disabled{opacity:.45}
.gm-timer{height:6px;border-radius:var(--r-full);background:var(--soft);overflow:hidden;margin:0 0 var(--s-3)}.gm-timer i{display:block;height:100%;width:100%;background:var(--gold)}
.gm-match{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:var(--s-2);align-content:start}
.gm-mc{aspect-ratio:3/4;padding:0;border:0;background:none;cursor:pointer;perspective:600px;min-width:0}
.gm-mc-in{position:relative;display:block;width:100%;height:100%;transition:transform 240ms var(--ease);transform-style:preserve-3d}
.gm-mc.open .gm-mc-in,.gm-mc.done .gm-mc-in{transform:rotateY(180deg)}
.gm-mc-b,.gm-mc-f{position:absolute;inset:0;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:var(--s-1);text-align:center;overflow:hidden}
.gm-mc-b{background:var(--accent);color:var(--accent-ink)}.gm-mc-b .ui-ic{width:24px;height:24px;opacity:.7}
.gm-mc-f{background:var(--surface);border:1.5px solid var(--line-2);transform:rotateY(180deg);font-size:var(--t-sm);font-weight:700;line-height:1.15;overflow-wrap:anywhere;color:var(--ink)}.gm-mc-f svg{width:70%;height:auto;max-height:80%}.gm-mc-f .visEm{font-size:34px}
.gm-mc.done .gm-mc-f{border-color:var(--gold);background:var(--gold-soft)}
.gm-track{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-3) var(--s-6) var(--s-3) var(--s-3);display:flex;flex-direction:column;gap:var(--s-2)}
.gm-lane{position:relative;height:48px;border-bottom:2px dashed var(--line)}.gm-lane:last-of-type{border-bottom:0}
.gm-run{position:absolute;left:0;top:2px;width:44px;height:44px;border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;transition:left 320ms var(--ease)}
.gm-run.me{background:var(--accent);color:var(--accent-ink)}.gm-run.rv{background:var(--gold);color:var(--gold-ink);transition:none}
@keyframes gmhop{50%{transform:translateY(-10px) scale(1.08)}}.gm-run.hop{animation:gmhop 300ms var(--ease)}
.gm-finish{position:absolute;right:var(--s-3);top:var(--s-2);bottom:var(--s-2);width:8px;border-radius:2px;background:repeating-linear-gradient(180deg,var(--ink) 0 8px,var(--surface) 8px 16px)}
.gm-duel.near .gm-track{outline:3px solid var(--gold);outline-offset:2px}.gm-vs{margin:var(--s-2) 0 var(--s-3)}
/* result ceremony */
.gm-result{align-items:center;text-align:center;padding-top:var(--s-5)}.gm-result .hero-eyebrow{justify-content:center}
.gm-result h1{margin:var(--s-4) 0 var(--s-2)}.gm-result .cz-h,.gm-words{align-self:stretch;text-align:left}
.gm-stars{display:flex;gap:var(--s-2);align-items:flex-end}.gm-stars span{display:inline-flex}.gm-stars .ui-ic{width:56px;height:56px;color:var(--line-2);stroke-width:1.5}.gm-stars span:nth-child(2) .ui-ic{width:72px;height:72px}
@keyframes gmstar{0%{transform:scale(.2) rotate(-30deg);opacity:0}70%{transform:scale(1.18)}100%{transform:none;opacity:1}}
.gm-stars span.on .ui-ic{color:var(--gold-ink);fill:var(--gold);animation:gmstar 420ms var(--ease) var(--d) both}
.gm-hero-word{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);margin:var(--s-2) 0 var(--s-4)}.gm-hero-word b{font-family:var(--font-display);font-size:var(--t-2xl);line-height:1.1}.gm-hero-word>span:last-child{color:var(--ink-2);font-size:var(--t-lg)}
.gm-unlock{display:flex;align-items:center;gap:var(--s-3);align-self:stretch;text-align:left;background:var(--gold-soft);border:1px solid var(--gold);border-radius:var(--r-lg);padding:var(--s-4);margin:0 0 var(--s-4);animation:rise 420ms var(--ease) .5s both}
.gm-unlock .ui-ic{width:28px;height:28px;color:var(--gold-ink)}.gm-unlock b{display:block;font-family:var(--font-display);font-size:var(--t-lg)}.gm-unlock span{color:var(--ink-2);font-size:var(--t-sm)}
.gm-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);align-self:stretch}.gm-two .btn{min-height:56px;width:100%}
.gm-words{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.gm-words li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) 0;border-bottom:1px solid var(--line)}
.gm-words b{display:block;font-weight:600;font-size:var(--t-lg)}.gm-words small{color:var(--ink-2);font-size:var(--t-sm)}.gm-words li.miss b{color:var(--warn)}
@media(max-width:400px){.gm-two{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.gm-glow,.gm-dots i.next,.gm-map li.glow .gm-stop,.gm-rungs li.next span{animation:none;box-shadow:0 0 0 3px var(--gold)}}
body.gm-playing #app~section,body.gm-playing #app~footer{display:none}
body.gm-playing{overscroll-behavior:none}

/* ---------- 12. PLAY & LEARN: quests, rivalry, About page ---------- */
.gm-diff{grid-template-columns:repeat(3,1fr)}.gm-diff button{align-items:center;min-height:52px;padding:var(--s-2)}.gm-diff button b{font-size:var(--t-md);font-family:var(--font-text);font-weight:600}
.gm-quest{background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:var(--r-lg);padding:var(--s-5);margin:0 0 var(--s-4)}
.gm-quest ul{list-style:none;margin:0;padding:0}.gm-quest li,.gm-chest{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) 0;min-height:56px}
.gm-quest li+li{border-top:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.gm-qc{width:28px;height:28px;border-radius:var(--r-full);border:2px solid var(--gold-ink);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--accent-ink)}.gm-qc .ui-ic{width:16px;height:16px}
.gm-quest li.done .gm-qc{background:var(--accent);border-color:var(--accent)}.gm-quest li.done b{text-decoration:line-through;text-decoration-color:var(--ink-3);color:var(--ink-2)}
.gm-qt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:var(--lh-snug)}.gm-qt b{font-weight:600}.gm-qt small{font-size:var(--t-sm);color:var(--ink-2);display:inline-flex;align-items:center;gap:var(--s-1)}.gm-qt small .ui-ic{width:14px;height:14px}
.gm-quest .btn{min-height:44px;padding:var(--s-2) var(--s-3);font-size:var(--t-sm);flex:0 0 auto}
.gm-chest{margin-top:var(--s-2);padding-top:var(--s-3);border-top:2px dashed var(--gold)}
.gm-chest-ic{width:44px;height:44px;border-radius:var(--r-md);background:var(--surface);color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.gm-chest.ready .gm-chest-ic,.gm-chest.open .gm-chest-ic{background:var(--gold);color:var(--gold-ink)}
.gm-chest-big{width:96px;height:96px;border-radius:var(--r-full);background:var(--gold);color:var(--gold-ink);display:inline-flex;align-items:center;justify-content:center;margin:var(--s-3) 0;animation:gmstar 480ms var(--ease) both}.gm-chest-big .ui-ic{width:48px;height:48px}
.gm-homeq{display:flex;align-items:center;gap:var(--s-4);width:100%;min-height:72px;padding:var(--s-3) var(--s-4);margin:0 0 var(--s-2);text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer;color:var(--ink)}
.gm-homeq>.ui-ic:last-child{color:var(--ink-3);width:18px;height:18px}.gm-homeq.done{border-color:var(--gold)}.gm-homeq.done .cz-row-ic{background:var(--gold);color:var(--gold-ink)}
.gm-q3{display:flex;gap:var(--s-1);margin-top:var(--s-2)}.gm-q3 i{width:28px;height:6px;border-radius:var(--r-full);background:var(--soft)}.gm-q3 i.on{background:var(--accent)}
.gm-ws{display:flex;flex-direction:column;align-items:stretch}.gm-ws .gm-pic{width:120px;height:120px;font-size:72px;align-self:center;margin:0 0 var(--s-4)}.gm-ws .gm-pic svg{width:96px;height:96px}.gm-ws .gm-pic .visEm{font-size:72px}
.gm-ws .cz-q{font-size:var(--t-2xl)}.gm-ws-so{font-size:var(--t-xl);color:var(--ink-2);margin:0 0 var(--s-4)}
.gm-modes{display:flex;flex-direction:column;gap:var(--s-2);margin:0 0 var(--s-2)}.gm-modes .gm-tile{min-height:76px}.gm-modes .gm-tile>.ui-ic:last-child{color:var(--ink-3);width:18px;height:18px}
.gm-life{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:0 0 var(--s-2)}.gm-life .chipbtn{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--t-sm)}.gm-life .chipbtn:disabled{opacity:.4}
.gm .opt.gone{visibility:hidden}
.gm-far,.gm-near{position:absolute;left:-12%;right:-12%;bottom:0;pointer-events:none;will-change:transform}
.gm-far{height:46%;background:radial-gradient(ellipse 34% 100% at 22% 100%,var(--accent-soft) 99%,transparent 100%),radial-gradient(ellipse 40% 78% at 72% 100%,var(--accent-soft) 99%,transparent 100%)}
.gm-near{height:26%;background:radial-gradient(ellipse 44% 100% at 40% 100%,var(--soft) 99%,transparent 100%),radial-gradient(ellipse 30% 70% at 88% 100%,var(--soft) 99%,transparent 100%)}
.gm-dr .opts{margin:0}.gm-clock{display:flex;align-items:center;gap:var(--s-3)}.gm-clock-bar{flex:1;height:10px;border-radius:var(--r-full);background:var(--soft);overflow:hidden}.gm-clock-bar i{display:block;height:100%;width:100%;background:var(--accent);border-radius:var(--r-full)}
.gm-clock b{font-family:var(--font-display);font-size:var(--t-xl);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}.gm-clock em{font-style:normal;font-weight:600;font-size:var(--t-sm);color:var(--gold-ink);background:var(--gold-soft);border-radius:var(--r-full);padding:2px var(--s-3);order:3;white-space:nowrap}
.gm-clock.low .gm-clock-bar i{background:var(--gold)}.gm-clock.low b{color:var(--gold-ink)}
.gm-hand{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:var(--s-5)}.gm-hand .hero-eyebrow{justify-content:center}.gm-hand h1{margin:var(--s-4) 0 var(--s-2)}
.gm-run.big{position:static;width:96px;height:96px;font-size:var(--t-3xl)}
.gm-tot{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);align-self:stretch;margin:var(--s-2) 0 var(--s-4)}
.gm-tot span{display:flex;flex-direction:column;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-3);font-weight:600;overflow-wrap:anywhere}.gm-tot b{font-family:var(--font-display);font-size:var(--t-2xl);font-variant-numeric:tabular-nums}
.gm-tot span.win{border-color:var(--gold);background:var(--gold-soft)}
.gm-code{align-self:stretch;border:2px dashed var(--gold);border-radius:var(--r-lg);background:var(--gold-soft);padding:var(--s-4);margin:0 0 var(--s-4);text-align:center}.gm-code b{font-family:var(--font-display);font-size:var(--t-2xl);letter-spacing:.06em;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.gm-result a.btn{text-decoration:none}
.gm-board{list-style:none;margin:0 0 var(--s-4);padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.gm-board li{display:flex;align-items:center;gap:var(--s-3);min-height:72px;padding:var(--s-3) var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.gm-board li.me{border-color:var(--accent)}.gm-board li.top{background:var(--gold-soft);border-color:var(--gold)}
.gm-rank{font-family:var(--font-display);font-weight:700;font-size:var(--t-xl);min-width:24px;text-align:center;color:var(--ink-2);font-variant-numeric:tabular-nums}.gm-board li.top .gm-rank{color:var(--gold-ink)}
.gm-av{width:44px;height:44px;border-radius:var(--r-full);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;flex:0 0 auto}
.gm-bxp{display:flex;flex-direction:column;align-items:flex-end}.gm-bxp b{font-family:var(--font-display);font-size:var(--t-xl);font-variant-numeric:tabular-nums}.gm-bxp small{font-size:var(--t-xs);color:var(--ink-2)}
.about-page h2{font-size:var(--t-xl);margin:var(--s-6) 0 var(--s-3)}.about-page h3{font-size:var(--t-lg);margin:var(--s-5) 0 var(--s-2);padding-top:var(--s-4);border-top:1px solid var(--line)}
.about-page p{line-height:var(--lh-body);margin:0 0 var(--s-3)}.about-page p>strong:first-child{color:var(--accent)}.about-page .about-ded p>strong:first-child{color:inherit}
.about-standalone{margin:0;padding:0 0 var(--s-7)}.about-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;max-width:680px;margin:0 auto;padding:var(--s-4)}
.about-top a:first-child{font-family:var(--font-display);font-weight:700;font-size:var(--t-lg);color:var(--ink);text-decoration:none}.about-top .btn{text-decoration:none;min-height:44px;padding:var(--s-2) var(--s-4);font-size:var(--t-sm)}
.about-standalone .about-page{max-width:680px;margin:0 auto;padding:var(--s-4)}
.gm-run3d{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;min-height:min(60dvh,500px);background:var(--surface)}.gm-run3d canvas{display:block}

/* ---------- 13. WORD TOWN 3D ---------- */
.gm-town{min-height:min(66dvh,580px);background:var(--soft)}
.gm[data-game="run"] .gm-target{align-items:flex-start}.gm[data-game="run"] .gm-tt{flex:1}
.tw-en{font-family:var(--font-display);font-weight:700;font-size:var(--t-lg);line-height:var(--lh-snug)}.tw-so{font-size:var(--t-sm);color:var(--ink-2);line-height:var(--lh-snug)}
.tw-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tw-labels span{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:1px var(--s-2);font-size:var(--t-xs);line-height:1.25;white-space:nowrap;box-shadow:var(--sh-1)}
.tw-labels b{font-weight:700}.tw-labels i{font-style:normal;color:var(--ink-2);font-size:11px}
.tw-labels .tw-item{background:var(--gold);border-color:var(--gold-ink);color:var(--gold-ink);font-size:var(--t-md);padding:2px var(--s-3)}
.tw-labels .tw-npc{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.tw-compass{position:absolute;top:var(--s-2);right:var(--s-2);display:flex;align-items:center;gap:var(--s-2);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-full);padding:var(--s-1) var(--s-3) var(--s-1) var(--s-1);box-shadow:var(--sh-1)}
.tw-compass i{width:28px;height:28px;border-radius:var(--r-full);background:var(--gold-soft);position:relative;display:block}
.tw-compass i::after{content:"";position:absolute;left:50%;top:4px;margin-left:-6px;border:6px solid transparent;border-bottom:12px solid var(--gold-ink);border-top:0}
.tw-compass b{font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.tw-stick{position:absolute;left:var(--s-3);bottom:var(--s-3);width:112px;height:112px;border-radius:var(--r-full);background:color-mix(in srgb,var(--surface) 72%,transparent);border:2px solid var(--line-2);touch-action:none}
.tw-stick i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:var(--r-full);background:var(--accent);box-shadow:var(--sh-1);pointer-events:none}
.tw-acts{position:absolute;right:var(--s-3);bottom:var(--s-3);display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-end}
.tw-btn{display:inline-flex;align-items:center;gap:var(--s-2);min-height:56px;min-width:112px;justify-content:center;padding:0 var(--s-4);border-radius:var(--r-full);border:0;background:var(--gold);color:var(--gold-ink);font-weight:700;font-size:var(--t-md);box-shadow:var(--sh-1);cursor:pointer}
.tw-btn[hidden]{display:none}.tw-btn#twTalk{background:var(--accent);color:var(--accent-ink)}
.tw-say{position:absolute;left:var(--s-3);right:var(--s-3);top:48px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:var(--s-3) var(--s-4);box-shadow:var(--sh-1);animation:rise var(--dur-2) var(--ease)}
.tw-say[hidden],.tw-dlg[hidden]{display:none}.tw-say b{font-size:var(--t-xs);color:var(--accent);text-transform:uppercase;letter-spacing:.06em}.tw-say span{font-weight:600;font-size:var(--t-lg);line-height:var(--lh-snug)}.tw-say small{color:var(--ink-2);font-size:var(--t-sm)}
.tw-dlg{position:absolute;left:0;right:0;bottom:0;max-height:100%;overflow:auto;background:var(--surface);border-top:4px solid var(--accent);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--s-4);box-shadow:0 -8px 30px rgba(0,0,0,.2);animation:rise var(--dur-2) var(--ease)}
.tw-line{font-family:var(--font-display);font-weight:700;font-size:var(--t-lg);line-height:var(--lh-snug);margin:0;flex:1}.tw-dlg .tw-so{margin:0 0 var(--s-3)}.tw-dlg .cz-qrow{margin:0 0 var(--s-1)}
.tw-dlg .opt{min-height:52px;font-size:var(--t-md);text-align:left}.tw-why{font-size:var(--t-sm);color:var(--ink-2);min-height:1.5em;margin:var(--s-2) 0 0}
.gm-town.tw-hurt{outline:3px solid var(--bad);outline-offset:-3px}