/* Mandarin Learning. Layout: one phone-width study column; bottom tab bar on phones, top pill bar on wide screens.
   Characters sit in 田字格 practice squares with zhuyin running down their right side, like a Taiwanese 國語 textbook.
   Lessons open full-screen over the app on #stage. */
:root{
  --bg:#EDF2F8; --surface:#FFFFFF; --sunken:#E3EAF3; --ink:#122036; --muted:#4F5F77; --line:#CFD9E6; --line-strong:#B7C5D8;
  --blue:#1E55B0; --blue-deep:#163F86; --blue-soft:#DCE7F9; --on-blue:#FFFFFF;
  --red:#CF3A2B; --red-deep:#9E2A1F; --yolk:#F2B420; --yolk-deep:#B9860A; --yolk-ink:#3A2A00; --grid:#E2A79F;
  --ok:#197F52; --ok-deep:#11603D; --ok-soft:#DDF2E7; --bad:#C2342A; --bad-soft:#FBE3E0; --perch:#DCE7F9; --lock:#C9D3E0;
  --f-brand:"Outfit","DM Sans",system-ui,sans-serif;
  --f-ui:"DM Sans","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --f-kai:"LXGW WenKai TC","BiauKai","DFKai-SB","Kaiti TC","Noto Sans TC",serif;
  --r:16px; --tabs-h:68px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0C1422; --surface:#152035; --sunken:#0F192B; --ink:#E9EFF8; --muted:#A3B3C9; --line:#293955; --line-strong:#3A4E70;
  --blue:#86B4FF; --blue-deep:#5A8EE0; --blue-soft:#1C2E4F; --on-blue:#0C1422;
  --red:#FF8170; --red-deep:#C9584A; --yolk:#F6C644; --yolk-deep:#C49A22; --yolk-ink:#2A1E00; --grid:#6A4347;
  --ok:#5FD39B; --ok-deep:#3BA572; --ok-soft:#153526; --bad:#FF8A7D; --bad-soft:#40201E; --perch:#22365A; --lock:#2B3A55; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0C1422; --surface:#152035; --sunken:#0F192B; --ink:#E9EFF8; --muted:#A3B3C9; --line:#293955; --line-strong:#3A4E70;
  --blue:#86B4FF; --blue-deep:#5A8EE0; --blue-soft:#1C2E4F; --on-blue:#0C1422;
  --red:#FF8170; --red-deep:#C9584A; --yolk:#F6C644; --yolk-deep:#C49A22; --yolk-ink:#2A1E00; --grid:#6A4347;
  --ok:#5FD39B; --ok-deep:#3BA572; --ok-soft:#153526; --bad:#FF8A7D; --bad-soft:#40201E; --perch:#22365A; --lock:#2B3A55; color-scheme:dark }

*{box-sizing:border-box}
html,body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:17px;line-height:1.55;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--yolk);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3{margin:0;line-height:1.25;text-wrap:balance}
h1{font-size:1.6rem} h2{font-size:1.3rem} h3{font-size:1.08rem}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:.9rem}
.kai{font-family:var(--f-kai)}

.app{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 calc(var(--tabs-h) + 28px)}
.view{display:flex;flex-direction:column;gap:18px}

/* top bar */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:15;background:var(--bg);display:flex;align-items:center;gap:10px;padding-block:12px 10px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:16;background:var(--bg)}
.brand{display:flex;align-items:center;gap:8px;margin-right:auto;text-decoration:none;color:inherit;min-width:0}
.brand svg{width:32px;height:32px;flex:none}
.wm{font-family:var(--f-brand);font-weight:700;letter-spacing:-.02em;font-size:1.2rem;white-space:nowrap}
.wm b{color:var(--ink);font-weight:700}.wm span{color:var(--blue)}
.brand-h1{line-height:1.1}.brand-h1 .wm{font-size:2.3rem}
@media (max-width:380px){.wm{font-size:1rem}}
.stat{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-variant-numeric:tabular-nums;padding:6px 10px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);min-height:38px;text-decoration:none;color:inherit}
.stat svg{width:20px;height:20px}
.stat.streak{color:var(--red)} .stat.streak.off{color:var(--muted)}
.ring{--p:0;width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--yolk) calc(var(--p)*1%),var(--sunken) 0);display:grid;place-items:center}
.ring::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--surface)}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1.5px solid var(--line);display:flex;justify-content:center;
  padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
.tabs a{flex:1;max-width:130px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;text-decoration:none;color:var(--muted);font-size:.8rem;font-weight:700}
.tabs a svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabs a[aria-current="page"]{color:var(--blue);background:var(--blue-soft)}
@media (min-width:820px){
  .app{padding-block:0 48px}
  .tabs{position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);border:1.5px solid var(--line);border-radius:999px;padding:5px;margin:0 0 18px}
  .tabs a{flex-direction:row;justify-content:center;gap:8px;max-width:none;font-size:.95rem;border-radius:999px;padding:8px}
  .tabs a svg{width:20px;height:20px}
  .app{display:flex;flex-direction:column}
  .topbar{order:0}.tabs{order:1}.view{order:2}
}

/* phonetics */
.zc{display:inline-flex;align-items:center;margin-right:.1em}
.zy{display:inline-flex;align-items:center;font-family:var(--f-kai);font-size:.42em;line-height:1;margin-left:.1em;color:var(--blue);font-weight:700}
.zs{display:flex;flex-direction:column;align-items:center}
.zs i{font-style:normal;display:block;line-height:1.02}
.zs i.zd{line-height:.5;height:.5em}
.zt{margin-left:-.08em;align-self:center;font-size:1.15em}
ruby{ruby-position:over;margin-right:.06em}
rt{font-family:var(--f-ui);font-size:.38em;color:var(--blue);font-weight:700}
.han{font-family:var(--f-kai);font-weight:700;overflow-wrap:anywhere}
.tians{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;align-items:center}
.tian{display:inline-flex;align-items:center}
.tian .box{width:var(--b,96px);height:var(--b,96px);display:grid;place-items:center;border:2px solid var(--grid);border-radius:6px;
  background:linear-gradient(var(--grid),var(--grid)) center/1px 100% no-repeat,linear-gradient(var(--grid),var(--grid)) center/100% 1px no-repeat,var(--surface);
  font-family:var(--f-kai);font-weight:700;font-size:calc(var(--b,96px)*.74);line-height:1;color:var(--ink)}
.tian .zy{font-size:calc(var(--b,96px)*.24);margin-left:5px}
.tian .py{display:block;text-align:center;font-weight:700;color:var(--blue);font-size:calc(var(--b,96px)*.2 + 4px);margin-top:4px}
.tian.pyv{flex-direction:column}
.symbig{font-family:var(--f-kai);font-weight:700;font-size:7rem;line-height:1;color:var(--blue)}

/* surfaces & controls */
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:18px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.center{text-align:center;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--line-strong);background:var(--surface);border-radius:14px;padding:10px 18px;font-weight:800;min-height:48px;font-size:1rem;text-decoration:none;color:var(--ink);box-shadow:0 3px 0 var(--line-strong);transition:transform .06s}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line-strong)}
.btn.pri{background:var(--blue);border-color:var(--blue-deep);color:var(--on-blue);box-shadow:0 3px 0 var(--blue-deep)}
.btn.ok{background:var(--ok);border-color:var(--ok-deep);color:#fff;box-shadow:0 3px 0 var(--ok-deep)}
.btn.bad{background:var(--bad);border-color:var(--red-deep);color:#fff;box-shadow:0 3px 0 var(--red-deep)}
.btn.ghost{box-shadow:none;border-color:transparent;background:transparent;color:var(--blue)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.tag{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue);white-space:nowrap}
.tag.yolk{background:var(--yolk);color:var(--yolk-ink)}
.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:.92rem}
.field input,.field select,.field textarea{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:12px;padding:11px 14px;min-height:48px;width:100%}
.field textarea{min-height:150px;font-size:.95rem;resize:vertical}
.err{color:var(--bad);font-weight:700;font-size:.92rem}
.seg{display:inline-flex;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--surface);overflow:hidden}
.seg button{border:0;background:transparent;padding:7px 14px;font-weight:700;min-height:42px}
.seg button[aria-pressed="true"]{background:var(--blue);color:var(--on-blue)}
.bar{height:12px;border-radius:99px;background:var(--sunken);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .3s}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.list li{border-bottom:1.5px solid var(--line)} .list li:last-child{border-bottom:0}
.item{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:4px 14px;align-items:center;width:100%;text-align:left;border:0;background:transparent;padding:12px 4px;color:inherit}
.item:hover{background:var(--sunken)}
.item .w{font-family:var(--f-kai);font-size:1.6rem;font-weight:700;line-height:1.2;white-space:nowrap}
.item .p{color:var(--blue);font-weight:700;font-size:.92rem;font-family:var(--f-kai)}
.item .e{min-width:0;color:var(--muted);font-size:.98rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.chip{flex:none;border:1.5px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:.92rem;font-weight:700;min-height:40px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* mascot */
.jj{display:flex;gap:12px;align-items:flex-end}
.jj .perch{flex:none;width:64px;height:64px;border-radius:18px;background:transparent;display:grid;place-items:center;border:0;padding:0}
.jj .perch svg{width:64px;height:64px}
.bubble{background:var(--surface);border:1.5px solid var(--line);border-radius:18px 18px 18px 4px;padding:10px 14px;min-width:0;margin-bottom:12px}
.bubble .zhline{font-family:var(--f-kai);font-size:1.4rem;font-weight:700;line-height:1.75}
.jjs .eye-happy,.jjs .eye-sad{display:none}
.jjs.happy .eye-open,.jjs.sad .eye-open{display:none}
.jjs.happy .eye-happy,.jjs.sad .eye-sad{display:block}
.jjs .wing{transform-origin:62px 66px;transition:transform .25s}
.jjs.happy .wing{transform:rotate(-38deg)}
@media (prefers-reduced-motion:no-preference){
  .jjs .bird{animation:bob 2.6s ease-in-out infinite}
  .jjs.happy .bird{animation:hop .45s ease-out 2}
  @keyframes bob{50%{transform:translateY(-2.5px)}}
  @keyframes hop{50%{transform:translateY(-12px)}}
}

/* learn path */
.daily{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;text-align:left;width:100%;cursor:pointer;color:inherit}
.daily .dw{font-family:var(--f-kai);font-size:2.4rem;font-weight:700;line-height:1}
.section{--sec:var(--blue);--sec-deep:var(--blue-deep)}
.section[data-sec="zy"]{--sec:var(--red);--sec-deep:var(--red-deep)}
.section[data-sec="kids"]{--sec:var(--yolk-deep);--sec-deep:#8a6407}
.sechead{display:flex;gap:14px;align-items:center;border-radius:var(--r);padding:16px;background:var(--surface);border:1.5px solid var(--line);width:100%;text-align:left;color:inherit}
.sechead .num{flex:none;width:48px;height:48px;border-radius:14px;background:var(--sec);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.1rem}
.sechead .t{min-width:0;flex:1}
.sechead .count{font-variant-numeric:tabular-nums;font-weight:800;color:var(--muted);white-space:nowrap}
.unit{display:flex;flex-direction:column;gap:6px}
.unitbar{background:var(--sec);color:#fff;border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 0 var(--sec-deep)}
.unitbar .t{flex:1;min-width:0}
.unitbar .eyebrow{color:rgba(255,255,255,.85)}
.unitbar h3{font-size:1.15rem}
.unitbar .sub{font-family:var(--f-kai);font-size:1.05rem;opacity:.95;overflow-wrap:anywhere}
.path{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 0 10px}
.node{position:relative;width:74px;height:70px;border-radius:50%;border:0;background:var(--sec);color:#fff;box-shadow:0 7px 0 var(--sec-deep);display:grid;place-items:center;transform:translateX(var(--x,0))}
.node svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.node:active{transform:translateX(var(--x,0)) translateY(4px);box-shadow:0 3px 0 var(--sec-deep)}
.node.done{background:var(--yolk);box-shadow:0 7px 0 var(--yolk-deep);color:var(--yolk-ink)}
.node.locked{background:var(--lock);box-shadow:0 7px 0 var(--line-strong);color:var(--muted);cursor:default}
.node.current{outline:6px solid color-mix(in srgb,var(--sec) 28%,transparent);outline-offset:4px;margin-top:40px}
.node .start{position:absolute;top:-46px;left:50%;transform:translateX(-50%);background:var(--surface);color:var(--sec);border:2px solid var(--line);font-weight:800;font-size:.85rem;letter-spacing:.06em;padding:5px 12px;border-radius:12px;white-space:nowrap}
.node .start::after{content:"";position:absolute;left:50%;bottom:-8px;width:12px;height:12px;background:var(--surface);border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:translateX(-50%) rotate(45deg)}
@media (prefers-reduced-motion:no-preference){.node .start{animation:float 1.6s ease-in-out infinite}@keyframes float{50%{margin-top:-5px}}}

/* stage (lesson / onboarding) */
.stage{position:fixed;inset:0;z-index:40;background:var(--bg);overflow:auto;display:flex;flex-direction:column}
.stage-in{width:100%;max-width:640px;margin:0 auto;flex:1;display:flex;flex-direction:column;gap:18px;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.lhead{display:flex;align-items:center;gap:12px}
.lhead .x{width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;color:var(--muted)}
.lhead .x svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.lhead .bar{flex:1}
.qbody{flex:1;display:flex;flex-direction:column;gap:18px;padding-bottom:20px}
.qtitle{font-size:1.4rem;font-weight:800;text-wrap:balance}
.prompt{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:6px 0}
.prompt .big{font-family:var(--f-kai);font-weight:700;font-size:3.4rem;line-height:1.35}
.prompt .en{font-size:1.5rem;font-weight:800}
.speak{width:64px;height:64px;border-radius:18px;border:0;background:var(--blue);color:var(--on-blue);box-shadow:0 4px 0 var(--blue-deep);display:grid;place-items:center}
.speak svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.speak.sm{width:44px;height:44px;border-radius:12px}
.speak.sm svg{width:22px;height:22px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts.one{grid-template-columns:1fr}
.opt{border:2px solid var(--line-strong);background:var(--surface);border-radius:16px;padding:12px;min-height:76px;font-weight:700;font-size:1.05rem;box-shadow:0 3px 0 var(--line-strong);overflow-wrap:anywhere;color:var(--ink)}
.opt.hz{font-family:var(--f-kai);font-size:1.8rem;line-height:1.5}
.opt.sym{font-family:var(--f-kai);font-size:2.6rem;line-height:1.2}
.opt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 3px 0 var(--blue)}
.opt.right{border-color:var(--ok);background:var(--ok-soft);box-shadow:0 3px 0 var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft);box-shadow:0 3px 0 var(--bad)}
.opt.gone{visibility:hidden}
.opt[disabled]{cursor:default}
@media (max-width:420px){.opts.text{grid-template-columns:1fr}.opt{min-height:64px}}
.match{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.match .col{display:flex;flex-direction:column;gap:12px}
.answer{min-height:76px;border-bottom:2px solid var(--line-strong);display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:8px 0}
.bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding-top:8px}
.tile{border:2px solid var(--line-strong);background:var(--surface);border-radius:12px;padding:6px 14px;min-height:54px;min-width:54px;font-family:var(--f-kai);font-weight:700;font-size:1.6rem;box-shadow:0 3px 0 var(--line-strong);color:var(--ink)}
.tile.used{background:var(--sunken);color:transparent;box-shadow:none;border-color:var(--sunken)}
.foot{position:sticky;bottom:0;margin:0 calc(-1*max(16px,env(safe-area-inset-right,0px))) 0 calc(-1*max(16px,env(safe-area-inset-left,0px)));
  padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--bg);border-top:1.5px solid var(--line)}
.foot.good{background:var(--ok-soft);border-color:var(--ok)}
.foot.bad{background:var(--bad-soft);border-color:var(--bad)}
.foot .fb{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.foot .fb b{font-size:1.25rem}
.foot.good .fb b{color:var(--ok)} .foot.bad .fb b{color:var(--bad)}
.foot .fb .ans{font-family:var(--f-kai);font-size:1.25rem;font-weight:700}
.choice{display:flex;align-items:center;gap:14px;text-align:left;width:100%;border:2px solid var(--line-strong);background:var(--surface);border-radius:16px;padding:14px 16px;box-shadow:0 3px 0 var(--line-strong);font-weight:700;color:var(--ink)}
.choice .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:800;font-family:var(--f-kai);font-size:1.3rem}
.choice small{display:block;font-weight:500;color:var(--muted)}
.choice[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 3px 0 var(--blue)}
.big-num{font-size:3rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.statgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.statgrid .card{padding:14px;text-align:center}
.statgrid b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:90px}
.week i{display:block;background:var(--blue);border-radius:6px 6px 2px 2px;min-height:3px}
.week span{font-size:.75rem;color:var(--muted);text-align:center}

/* sheet & toast */
dialog{border:0;padding:0;background:transparent;max-width:min(560px,100vw - 24px);width:100%;color:var(--ink)}
dialog::backdrop{background:rgba(8,14,26,.55)}
.sheet{background:var(--surface);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 48px);overflow:auto}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabs-h) + 20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:700;z-index:60;max-width:calc(100vw - 32px);text-align:center}

/* studio */
.reel{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px;align-items:start}
.reel canvas{width:100%;aspect-ratio:9/16;max-width:100%;border-radius:18px;border:1.5px solid var(--line);background:var(--sunken)}
@media (max-width:640px){.reel{grid-template-columns:1fr}.reel canvas{max-width:280px;margin:0 auto;display:block}}
footer.credit{color:var(--muted);font-size:.84rem;line-height:1.5;padding-top:8px}
footer.credit a{color:inherit}