/* Layout: a sea-chart quest. Units are islands on a winding route; each quiz is a level with stars, coins and a daily chest. One committed daylight look. */
:root {
  color-scheme:light;
  --bg:#DDF4F1; --surface:#FFFFFF; --ink:#113A44; --muted:#42646C; --rule:#A7D2D0; --base:#E2798A;
  --accent:#FFC531; --accent-edge:#D79400; --on-accent:#3A2A00; --soft:#C6ECE7; --soft-edge:#97CFC9;
  --sea:#0E7C8A; --sea-deep:#0A5F6C; --on-sea:#FFFFFF; --on-sea-soft:#CDEEEE; --sand:#FFE9B8; --sand-edge:#D9A95C; --lock:#7FA8AD; --lock-edge:#5F8A90;
  --good:#117A4A; --good-bg:#D8F5E3; --good-edge:#3CB371; --bad:#B8324A; --bad-bg:#FDE3E6; --bad-edge:#E4788A; --mark:#FFE89A;
  --en:"Andika","Comic Sans MS","Trebuchet MS",sans-serif;
  --zh:"Huninn","PingFang TC","Microsoft JhengHei",sans-serif;
}
* { box-sizing:border-box }
body { background:var(--bg); color:var(--ink); font-family:var(--zh); font-size:18px; line-height:1.55; }
#app { max-width:860px; margin:0 auto; padding-block:16px 40px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); display:grid; gap:20px }
.en { font-family:var(--en); }
h1,h2,h3 { margin:0; line-height:1.25; text-wrap:balance }
h2 { font-size:22px } h3 { font-size:18px }
p { margin:0 }
button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; touch-action:manipulation }
button:focus-visible, select:focus-visible { outline:3px solid var(--ink); outline-offset:2px }
.muted { color:var(--muted); font-size:16px }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.brand { font-size:21px; font-weight:700 }
.link { min-height:44px; padding:6px 12px; border-radius:10px; background:var(--soft); font-size:16px }
.staff { position:relative; padding:0 8px; background-image:
  linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--base),var(--base)),linear-gradient(var(--rule),var(--rule));
  background-size:100% 1px,100% 1px,100% 2px,100% 1px; background-repeat:no-repeat;
  background-position:0 12%,0 37%,0 64%,0 88%; }
.hero { background:var(--surface); border-radius:18px; padding:20px; display:grid; gap:14px }
.hero .staff { font-family:var(--en); font-size:34px; line-height:66px; min-height:66px; font-weight:700 }
.primary { min-height:62px; padding:12px 24px; border-radius:18px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:21px; width:100%; border-bottom:6px solid var(--accent-edge) }
.primary:active:not(:disabled) { transform:translateY(4px); border-bottom-width:2px }
.primary:disabled { opacity:.45; cursor:default }
.second { min-height:52px; padding:10px 18px; border-radius:12px; background:var(--soft); font-size:17px }
.kids { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.kids button { min-height:68px; padding:8px 12px; border-radius:14px; background:var(--surface); border:3px solid transparent; display:grid; gap:0; justify-items:center }
.kids button b { font-size:22px } .kids button span { font-size:14px; color:var(--muted) }
.kids button[aria-pressed="true"] { border-color:var(--accent); background:var(--soft) }
.units { display:grid; gap:10px }
.unit { display:grid; grid-template-columns:1fr auto; gap:4px 14px; align-items:center; text-align:left; background:var(--surface); border-radius:14px; padding:14px 16px; min-height:72px; width:100% }
.unit b { font-family:var(--en); font-size:18px }
.unit .pct { font-size:16px; color:var(--muted); font-variant-numeric:tabular-nums; grid-row:1 / span 2; grid-column:2 }
.unit.later { opacity:.62 }
.meter { height:8px; border-radius:4px; background:var(--soft); overflow:hidden; grid-column:1 / -1 }
.meter i { display:block; height:100%; background:var(--good) }
.chips { display:flex; flex-wrap:wrap; gap:8px }
.chips button { min-height:48px; padding:8px 16px; border-radius:24px; background:var(--surface); font-size:16px }
.bar { position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--bg); display:flex; align-items:center; gap:12px; padding-block:6px }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg) }
.bar .meter { flex:1; min-width:0; height:16px; border-radius:8px; background:var(--soft) } .bar .meter i { background:var(--accent); border-radius:8px; transition:width .25s }
.bar span { font-variant-numeric:tabular-nums; font-size:16px; color:var(--muted) }
.q { display:grid; gap:16px }
.q.split { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start }
@media (max-width:720px){ .q.split { grid-template-columns:minmax(0,1fr) } }
.tag { display:inline-block; font-size:15px; color:var(--muted); }
.prompt { font-size:21px; font-weight:700 }
.panel { background:var(--surface); border-radius:16px; padding:16px; display:grid; gap:12px; min-width:0 }
.dialog { display:grid; gap:6px; font-family:var(--en); font-size:19px }
.dialog div { border-radius:8px; padding:4px 8px }
.dialog .who { font-weight:700 } .dialog .blank { color:var(--muted) }
.dialog .note { color:var(--muted); font-style:italic }
.dialog .ev { background:var(--mark) }
.gloss { font-size:15px; color:var(--muted); border-top:1px dashed var(--rule); padding-top:8px }
.opts { display:grid; gap:10px }
.opt { min-height:62px; padding:10px 16px; border-radius:16px; background:var(--surface); border:2px solid var(--rule); border-bottom-width:5px; text-align:left; font-family:var(--en); font-size:20px; width:100% }
.opt.good { background:var(--good-bg); border-color:var(--good-edge); color:var(--good) }
.opt.bad { background:var(--bad-bg); border-color:var(--bad-edge); color:var(--bad) }
.opt.big { text-align:center; font-size:34px }
.speak { display:inline-flex; align-items:center; gap:8px; min-height:54px; padding:8px 18px; border-radius:27px; background:var(--soft); border-bottom:4px solid var(--soft-edge); font-size:17px }
.speak svg { width:22px; height:22px; fill:currentColor }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.tray { min-height:72px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-family:var(--en); font-size:28px; }
.tray button { min-height:52px; min-width:32px; padding:0 8px; font-family:var(--en); font-size:28px; border-radius:8px; background:color-mix(in srgb, var(--accent) 22%, transparent) }
.tray .hint { font-family:var(--zh); font-size:16px; color:var(--muted) }
.slot { display:inline-block; min-width:64px; min-height:40px; border-bottom:3px solid var(--ink); margin:0 6px; vertical-align:middle }
.fillline { display:block; line-height:60px; font-size:24px; background-image:none } .fillline button { font-size:24px; margin:0 4px }
.tiles { display:flex; flex-wrap:wrap; gap:10px }
.tile { min-width:58px; min-height:60px; padding:6px 14px; border-radius:14px; background:var(--sand); border:2px solid var(--sand-edge); border-bottom-width:5px; color:var(--on-accent); font-family:var(--en); font-size:24px }
.tile:disabled { opacity:.25 }
.fb { padding:14px 16px; border-radius:18px; display:grid; gap:10px }
.fb.good { background:var(--good-bg) } .fb.bad { background:var(--bad-bg) }
.fb .head { font-size:22px; font-weight:700; display:flex; flex-wrap:wrap; align-items:center; gap:10px } .fb.good .head { color:var(--good) } .fb.bad .head { color:var(--bad) }
.fb .ans { font-family:var(--en); font-size:20px }
.done { display:grid; gap:16px; background:var(--surface); border-radius:22px; padding:24px; justify-items:center; text-align:center }
.done .primary { width:100% }
.done ul { text-align:left }
.score { font-family:var(--en); font-size:44px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums }
.tablewrap { overflow-x:auto }
table { border-collapse:collapse; width:100%; font-size:16px }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--rule); vertical-align:top }
th { font-weight:700; color:var(--muted); white-space:nowrap }
td.num { font-variant-numeric:tabular-nums; white-space:nowrap }
select { font:inherit; min-height:48px; padding:6px 10px; border-radius:10px; background:var(--surface); color:var(--ink); border:2px solid var(--rule); max-width:100% }
.bank { display:grid; gap:8px }
.item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--rule); font-size:16px }
.item .en { font-size:17px } .item .a { color:var(--good) }
.item.off { opacity:.5 } .item.off .en { text-decoration:line-through }
.small { min-height:44px; padding:6px 12px; border-radius:10px; background:var(--soft); font-size:15px; white-space:nowrap }
.danger { color:var(--bad) }
.status { font-size:15px; color:var(--muted) }
.mini { display:block; width:56px; height:56px } .mini svg { width:100%; height:100% }
.party { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px }
.pal { background:var(--surface); border-radius:16px; padding:10px 6px; display:grid; justify-items:center; gap:2px; text-align:center; border-bottom:4px solid var(--soft-edge) }
.pal > svg { width:64px; height:64px } .pal small { font-size:12px; color:var(--muted); line-height:1.25 } .pal.off { opacity:.8; cursor:default } .pal .stars svg { width:14px; height:14px }
.hatch { display:grid; justify-items:center; gap:6px } .hatch svg { width:110px; height:110px }
.isle-big { position:absolute; width:150px; transform:translateX(-50%); display:grid; justify-items:center; gap:2px; color:var(--on-sea); text-align:center }
.isle-big .blob { width:112px; height:96px; border-radius:48% 52% 46% 54% / 56% 50% 50% 44%; border:4px solid var(--sand); border-bottom-width:10px; display:grid; place-items:center; font-size:44px; font-weight:700; color:#113A44 }
.isle-big b { font-size:18px } .isle-big small { font-size:13px; color:var(--on-sea-soft) }
.isle-big.soon .blob { color:#fff }
.fr { display:inline-grid; vertical-align:middle; text-align:center; margin:0 3px; line-height:1.1; font-style:normal } .fr i { font-style:normal; padding:0 4px } .fr i:first-child { border-bottom:2px solid currentColor }
.prompt.math { font-size:22px; font-variant-numeric:tabular-nums; line-height:1.6 }
.fig { width:100%; max-width:340px; display:block; margin:0 auto }
.figwrap { overflow-x:auto }
.ansbox { min-height:64px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; border:3px dashed var(--rule); border-radius:14px; padding:6px 12px; overflow-wrap:anywhere }
.ansbox small { font-size:17px; color:var(--muted) } .ansbox.good { border-color:var(--good-edge); background:var(--good-bg) } .ansbox.bad { border-color:var(--bad-edge); background:var(--bad-bg) }
.ans.math { font-family:var(--zh) }
.pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px } .pad .tile { width:100%; font-size:24px }
.steps { display:flex; align-items:center; gap:6px; flex-wrap:wrap } .steps span { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--soft); font-weight:700; font-size:15px } .steps span.on { background:var(--accent); color:var(--on-accent) } .steps span.past { background:var(--good-edge); color:#fff } .steps small { font-size:15px; color:var(--muted); margin-left:4px }
.hearline { font-size:26px; font-weight:700 }
.opts.pics { grid-template-columns:repeat(3,minmax(0,1fr)) } .opts.pics .opt { display:grid; place-items:center; padding:8px; text-align:center; min-height:96px } .opts.pics svg { width:100%; max-width:90px } .picnum { font-family:var(--en); font-size:36px; font-weight:700 }
.hud { display:flex; flex-wrap:wrap; gap:8px }
.pill { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:4px 14px; border-radius:20px; background:var(--surface); font-size:16px; font-variant-numeric:tabular-nums; font-weight:700 }
.pill svg { width:20px; height:20px }
.quest { background:var(--sea-deep); color:var(--on-sea); border-radius:22px; padding:18px; display:grid; gap:12px; grid-template-columns:minmax(0,1fr) auto; align-items:center }
.quest h1 { font-size:25px } .quest p { color:var(--on-sea-soft); font-size:16px } .quest .primary { grid-column:1 / -1 }
.chest { width:64px; height:64px }
.map { position:relative; background-color:var(--sea); border-radius:22px; overflow:hidden; background-image:radial-gradient(circle at 20px 20px, rgba(255,255,255,.09) 2px, transparent 3px); background-size:44px 44px }
.map svg.route { position:absolute; inset:0; width:100%; height:100% }
.node { position:absolute; width:150px; transform:translateX(-50%); display:grid; justify-items:center; gap:3px; color:var(--on-sea); text-align:center }
.isle { width:74px; height:74px; border-radius:50%; background:var(--sand); border:3px solid var(--sand-edge); border-bottom-width:8px; color:var(--on-accent); font-family:var(--en); font-size:24px; font-weight:700; display:grid; place-items:center }
.node.review .isle { background:var(--bad-edge); border-color:var(--bad); color:#fff }
.node.fest .isle { background:var(--good-edge); border-color:var(--good); color:#fff }
.node.lock .isle { background:var(--lock); border-color:var(--lock-edge); color:#fff }
.node.now .isle { outline:4px solid var(--accent); outline-offset:3px }
.node .nm { font-family:var(--en); font-weight:700; font-size:15px; line-height:1.2 }
.node .sub { font-size:13px; color:var(--on-sea-soft); line-height:1.25 }
.stars { display:inline-flex; gap:2px } .stars svg { width:18px; height:18px }
.stars.big svg { width:56px; height:56px }
.flag { position:absolute; top:-2px; left:50%; margin-left:30px; background:var(--accent); color:var(--on-accent); font-size:12px; border-radius:8px; padding:1px 6px; z-index:1; white-space:nowrap }
.toast { background:var(--sea-deep); color:var(--on-sea); border-radius:12px; padding:8px 12px; font-size:15px }
.badges { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px }
.badge { background:var(--surface); border-radius:16px; padding:10px 6px; display:grid; justify-items:center; gap:2px; text-align:center; font-size:14px }
.badge svg { width:42px; height:42px } .badge.off { color:var(--muted) } .badge small { font-size:12px; color:var(--muted); line-height:1.25 }
.gain { font-size:16px; font-weight:700; background:var(--accent); color:var(--on-accent); border-radius:12px; padding:1px 10px }
.combo { font-weight:700; color:var(--bad); font-size:16px; white-space:nowrap }
.reward { display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
@media (prefers-reduced-motion:no-preference){
  .fb { animation:rise .18s ease-out } @keyframes rise { from { transform:translateY(12px); opacity:.4 } }
  .node.now .isle { animation:bob 1.6s ease-in-out infinite } @keyframes bob { 50% { transform:translateY(-5px) } }
  .fb.good .gain, .stars.big svg { animation:pop .35s cubic-bezier(.3,1.6,.6,1) backwards } .stars.big svg:nth-child(2){animation-delay:.12s} .stars.big svg:nth-child(3){animation-delay:.24s} @keyframes pop { from { transform:scale(.3); opacity:0 } }
}

.login { display:grid; gap:18px; max-width:380px; margin:24px auto 0; width:100% }
.who { display:grid; gap:14px }
.dots { min-height:36px; display:flex; justify-content:center; align-items:center; gap:12px }
.dots i { width:18px; height:18px; border-radius:50%; background:var(--ink) }
.pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.pad .tile { width:100%; font-size:24px }
.err { color:var(--bad); text-align:center; font-weight:700 }