/* Ready for P1: iPad-first layout on top of kids-apps.css. Colours pass 4.5:1 for text in light and dark. */
:root{--zh:#B42318;--zhbg:#FFE8E3;--en:#1D5FA8;--enbg:#E3F0FF;--ma:#6B3FA0;--mabg:#F1E8FF;--pz:#1F7A4D;--pzbg:#E3F6EA;--life:#B23A6E;--lifebg:#FFE6F0;
  --sky1:#FFF4EA;--sky2:#FFE3CC;--paper:#FFFDF8;--shadow:0 10px 30px rgba(120,60,20,.14);--kai:"Kaiti SC","STKaiti","KaiTi","楷体","PingFang SC","Noto Sans SC",serif;--mix:"Comic Neue","Nunito","Trebuchet MS",system-ui,"PingFang SC","Microsoft YaHei",sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--zh:#FFA08F;--zhbg:#3D211C;--en:#9CC8FF;--enbg:#1B2A3D;--ma:#D2B6FF;--mabg:#2D2140;--pz:#8FE0B3;--pzbg:#1C3427;--life:#FFB3CF;--lifebg:#3A1E2B;
  --sky1:#241A14;--sky2:#2E2119;--paper:#30231B;--shadow:0 10px 30px rgba(0,0,0,.4)}}
:root[data-theme=dark]{--zh:#FFA08F;--zhbg:#3D211C;--en:#9CC8FF;--enbg:#1B2A3D;--ma:#D2B6FF;--mabg:#2D2140;--pz:#8FE0B3;--pzbg:#1C3427;--life:#FFB3CF;--lifebg:#3A1E2B;
  --sky1:#241A14;--sky2:#2E2119;--paper:#30231B;--shadow:0 10px 30px rgba(0,0,0,.4)}
body{background:radial-gradient(1200px 600px at 85% -10%,var(--sky2),transparent 60%),var(--bg);-webkit-tap-highlight-color:transparent;padding-inline:max(16px,env(safe-area-inset-left))}
header.top,main,footer,.suite{max-width:1240px}
main{padding-bottom:40px}
button{touch-action:manipulation}
.kicker{margin:0;font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.muted{color:var(--mute)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.ghost{border:2px solid var(--line);background:var(--card);border-radius:18px;padding:12px 18px;font-weight:800;font-size:1.05rem}
.big.go{font-size:1.25rem;padding:16px 30px}
.back{width:52px;height:52px;flex:none;border-radius:50%;border:2px solid var(--line);background:var(--card);font-size:1.5rem;font-weight:900}
img.art{width:1em;height:1em;vertical-align:-.12em;object-fit:contain}
[lang|=zh]{font-family:var(--mix)}
.zi,.zigrid,.choices.zh button,.zcard .c,.slots span,.passage[lang|=zh],.strokes,.quest.zh b span{font-family:var(--kai)}
[tabindex="-1"]:focus{outline:none}

/* ---- home ---- */
.hero-band{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;background:linear-gradient(135deg,var(--paper),var(--soft));border:2px solid var(--line);border-radius:32px;padding:28px 30px;box-shadow:var(--shadow);margin-top:6px}
.hero-band h1{font-size:clamp(2.6rem,6vw,4.4rem);margin:.1em 0 .15em}
.hero-band .p1{color:var(--zh)}
.lede{font-size:1.15rem;max-width:36em}
.hb-cta{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px}
.hb-cta .ghost b{display:inline-block;min-width:1.6em;margin-left:4px;padding:0 6px;border-radius:10px;background:var(--zhbg);color:var(--zh)}
.tally{margin:.4em 0 0}
.hb-crew{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;align-items:end}
.crew{text-align:center;font-size:.78rem;font-weight:800;color:var(--mute);line-height:1.2}
.crew img{width:100%;max-width:150px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}
.crew:first-child img{transform:scale(1.18);transform-origin:bottom center}
.crew b{display:block;font-size:.85rem;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.crew img{animation:bob 3.2s ease-in-out infinite}.crew:nth-child(2) img{animation-delay:.4s}.crew:nth-child(3) img{animation-delay:.8s}.crew:nth-child(4) img{animation-delay:1.2s}.crew:nth-child(5) img{animation-delay:1.6s}
  @keyframes bob{50%{translate:0 -6px}}}
.sec{font-size:1.7rem;margin:28px 0 10px}
.weeks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wk{position:relative;background:var(--card);border:2px solid var(--line);border-radius:24px;padding:14px 16px 14px;box-shadow:0 4px 0 var(--line)}
.wk.now{border-color:var(--zh);box-shadow:0 4px 0 var(--zh)}
.wk-top{display:flex;gap:12px;align-items:center}
.wk-top img{width:58px;height:58px;flex:none}
.wk-top h3{margin:0;font-family:var(--display);font-weight:400;font-size:1.2rem;line-height:1.15}
.wk-top small{display:block;font-weight:800;color:var(--mute);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase}
.wk ul{list-style:none;padding:0;margin:10px 0;font-size:.84rem;line-height:1.35;color:var(--mute)}
.wk li{display:flex;gap:6px;margin:3px 0}.wk li b{flex:none;width:2.6em;color:var(--ink)}
.stones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.stones button{position:relative;border:2px solid var(--line);background:var(--bg);border-radius:16px;min-height:54px;font-family:var(--display);font-size:1.25rem;line-height:1}
.stones button small{display:block;font-family:inherit;font-size:.7rem;color:var(--mute);margin-top:2px}
.stones button.some{border-color:var(--zh)}
.stones button.full{background:var(--pzbg);border-color:var(--pz)}
.stones button.next{outline:3px dashed var(--zh);outline-offset:2px}
.plan{margin-top:24px;background:var(--card);border:2px solid var(--line);border-radius:20px;padding:12px 16px}
.plan summary{font-weight:800;cursor:pointer}
.plan table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:10px}
.plan th,.plan td{border-top:1px solid var(--line);padding:6px;text-align:left;vertical-align:top}
.plan .tblwrap{overflow-x:auto}

/* ---- day ---- */
.dayhead{display:flex;gap:14px;align-items:center;margin:6px 0 14px}
.dh-art{width:72px;height:72px;object-fit:contain}
.dayhead h1{font-size:clamp(1.6rem,3.6vw,2.4rem);margin:0}
.quests{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.quest{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:4px;text-align:left;border:3px solid var(--line);background:var(--card);border-radius:26px;padding:14px 16px 16px;overflow:hidden;min-height:210px;box-shadow:0 5px 0 var(--line)}
.quest:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.quest img{position:absolute;right:-8px;bottom:-6px;width:46%;max-width:150px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.15));pointer-events:none}
.quest b{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.1}
.quest .who{font-size:.85rem;font-weight:800;color:var(--mute)}
.quest .st{font-weight:800;font-size:.9rem;align-self:end;max-width:55%}
.quest.zh{grid-column:span 2;grid-row:span 2;min-height:300px;background:linear-gradient(160deg,var(--zhbg),var(--card) 70%);border-color:var(--zh)}
.quest.zh b{font-size:2.3rem;color:var(--zh)}
.quest.zh img{width:52%;max-width:300px}
.quest.zh .games{font-size:.95rem;max-width:52%;color:var(--ink)}
.quest.en{background:linear-gradient(160deg,var(--enbg),var(--card) 70%)}.quest.en b{color:var(--en)}
.quest.ma{background:linear-gradient(160deg,var(--mabg),var(--card) 70%)}.quest.ma b{color:var(--ma)}
.quest.pz{background:linear-gradient(160deg,var(--pzbg),var(--card) 70%)}.quest.pz b{color:var(--pz)}
.quest.life{background:linear-gradient(160deg,var(--lifebg),var(--card) 70%)}.quest.life b{color:var(--life)}
.quest.got::after{content:"⭐";position:absolute;top:10px;right:12px;font-size:1.8rem}
.daydone{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;background:var(--pzbg);border:2px solid var(--pz);border-radius:24px;padding:14px 18px}
.daydone .trophy{width:80px;height:80px}
.daydone b{font-family:var(--display);font-weight:400;font-size:1.6rem}
.daydone p{margin:0}
.daydone .big{margin-left:auto}
.tip{background:var(--soft);border-radius:20px;padding:14px 18px;margin-top:16px}

/* ---- intro + play ---- */
.introcard{display:grid;grid-template-columns:minmax(220px,38%) 1fr;gap:24px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:32px;padding:24px;box-shadow:var(--shadow);margin-top:10px}
.teacher-big{width:100%;max-height:60vh;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(0,0,0,.2))}
.introtext h1{margin:.1em 0 .3em}
.bubble{position:relative;background:var(--paper);border:3px solid var(--line);border-radius:24px;padding:14px 18px;font-size:1.1rem;line-height:1.5;min-height:3.2em}
.big-bubble{font-size:1.25rem}
.bubble.good{border-color:var(--pz);background:var(--pzbg)}
.bubble.try{border-color:var(--zh);background:var(--zhbg)}
.bubble .lead{display:block;font-family:var(--display);font-size:1.4rem;margin-bottom:2px}
.playbar{display:flex;align-items:center;gap:12px;margin:4px 0 12px}
.playbar .progress{flex:1;margin:0}
.progress i{height:14px}
.streak{font-weight:900;color:var(--zh);min-width:4.5em;text-align:right}
.playgrid{display:grid;grid-template-columns:minmax(230px,30%) 1fr;gap:20px;align-items:start}
.teacher{position:sticky;top:12px;display:grid;gap:8px;justify-items:center}
.t-img{width:100%;max-width:280px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.18));transition:transform .25s}
.t-img.cheer{animation:cheer .6s ease}
.t-img.think{animation:think .5s ease}
@keyframes cheer{30%{transform:translateY(-18px) rotate(-4deg)}60%{transform:translateY(0) rotate(3deg)}}
@keyframes think{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.t-name{margin:0;font-family:var(--display);font-size:1.2rem}
.teacher .bubble{width:100%}
.teacher .bubble::before{content:"";position:absolute;top:-14px;left:50%;margin-left:-12px;border:12px solid transparent;border-top:0;border-bottom:14px solid var(--line)}
.qcard{background:var(--card);border:2px solid var(--line);border-radius:30px;padding:20px 22px 22px;box-shadow:var(--shadow);min-height:60vh;display:flex;flex-direction:column}
.qhead{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.q{font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:800;margin:0;line-height:1.35}
.hear{flex:none;width:58px;height:58px;border-radius:50%;border:2px solid var(--line);background:var(--soft);font-size:1.6rem}
.stage{display:grid;place-items:center;gap:8px;margin:14px 0;min-height:120px;text-align:center}
.stage .pic{width:min(190px,34vw);height:min(190px,34vw);object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.15))}
.stage .pics{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:640px;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.2}
.stage .pics br{flex-basis:100%;content:""}
.stage .bigtext{font-size:clamp(2rem,5vw,3rem);font-weight:800;word-break:break-word}
.zigrid{display:grid;place-items:center;width:min(200px,40vw);aspect-ratio:1;border:3px solid var(--zh);border-radius:10px;background:
  linear-gradient(#E9A99F,#E9A99F) center/100% 2px no-repeat,linear-gradient(#E9A99F,#E9A99F) center/2px 100% no-repeat,#FFFDF7;font-size:min(150px,30vw);line-height:1;color:#2A1A10}
.zigrid.sm{width:min(150px,30vw);font-size:min(110px,22vw)}
.withpic{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}
.passage{background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:14px 18px;font-size:1.25rem;line-height:1.7;text-align:left;max-width:720px}
.passage[lang|=zh]{font-size:1.5rem;line-height:1.9}
.choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:auto;padding-top:10px}
.choices.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.choices.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.choices.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
.choices button{min-height:96px;border:3px solid var(--line);background:var(--card);border-radius:22px;font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.3rem);padding:8px;box-shadow:0 5px 0 var(--line);transition:transform .1s}
.choices button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.choices.wide button{font-family:inherit;font-weight:800;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.3}
.choices.zh button{font-family:var(--kai);font-size:clamp(2.2rem,4.5vw,3.2rem)}
.choices.py button{font-family:"Nunito","Trebuchet MS",system-ui,sans-serif;font-weight:800;font-size:clamp(1.6rem,3.4vw,2.3rem)}
.choices button img.art{width:min(96px,16vw);height:min(96px,16vw)}
.choices button.right{border-color:var(--pz);background:var(--pzbg);box-shadow:0 5px 0 var(--pz)}
.choices button.tried{opacity:.38}
.choices button:hover:not(:disabled),.choices button:focus-visible{border-color:var(--acc)}
.after{display:flex;justify-content:flex-end;margin-top:16px;min-height:62px}
@media (prefers-reduced-motion:no-preference){.choices button.no{animation:shake .4s}@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}}
  .choices button.right{animation:pop .4s ease}}

/* balloons */
.choices.balloons{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:end;min-height:240px}
.choices.balloons button{position:relative;border:0;box-shadow:none;background:none;min-height:0;padding:0;font-family:"Nunito","Trebuchet MS",system-ui,sans-serif;font-weight:900;font-size:clamp(1.4rem,3vw,2.1rem);color:#3D2A1C}
.choices.balloons button .bl{display:grid;place-items:center;width:100%;max-width:160px;aspect-ratio:.82;margin:0 auto;border-radius:50% 50% 48% 48%/55% 55% 45% 45%;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.75) 0 8%,transparent 9%),var(--bc);box-shadow:inset -10px -14px 0 rgba(0,0,0,.08)}
.choices.balloons button .str{display:block;width:2px;height:46px;margin:0 auto;background:var(--mute)}
.choices.balloons button:nth-child(1){--bc:#FF9C8A}.choices.balloons button:nth-child(2){--bc:#8EC9FF}.choices.balloons button:nth-child(3){--bc:#FFD66B}.choices.balloons button:nth-child(4){--bc:#9BE3B8}
.choices.balloons button.tried{opacity:.25}
.choices.balloons button.right .bl{outline:5px solid var(--pz);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){.choices.balloons button{animation:float 3.4s ease-in-out infinite}.choices.balloons button:nth-child(2){animation-delay:.6s}.choices.balloons button:nth-child(3){animation-delay:1.2s}.choices.balloons button:nth-child(4){animation-delay:1.8s}
  @keyframes float{50%{transform:translateY(-14px)}}
  .choices.balloons button.right{animation:popup .5s ease forwards}@keyframes popup{60%{transform:scale(1.25) translateY(-20px)}100%{transform:scale(1.1) translateY(-26px)}}}

/* tone coaster */
.choices.tones button{display:grid;gap:4px;justify-items:center;font-family:"Nunito",system-ui,sans-serif;font-weight:900}
.choices.tones svg{width:80%;max-width:120px;height:56px}
.choices.tones small{font-size:.9rem;color:var(--mute);font-family:var(--kai)}

/* trace */
.tracebox{display:grid;justify-items:center;gap:10px}
.tracepad{width:min(380px,70vw);aspect-ratio:1;border:4px solid var(--zh);border-radius:16px;background:#FFFDF7;position:relative;touch-action:none}
.tracepad svg.grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tracepad .hw{position:absolute;inset:0}
.strokes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-family:var(--kai);font-size:1.05rem}
.strokes span{padding:2px 10px;border-radius:12px;background:var(--soft)}
.strokes span.done{background:var(--pzbg);color:var(--pz);font-weight:800}

/* order tiles */
.slots{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:86px;padding:10px;border:3px dashed var(--line);border-radius:22px;width:100%}
.slots span{display:grid;place-items:center;padding:8px 18px;border-radius:18px;background:var(--pzbg);font-family:var(--kai);font-size:2rem}
.choices.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}

/* puzzle grids */
.pgrid{display:grid;gap:6px;padding:8px;background:var(--soft);border-radius:18px}
.pgrid span{display:grid;place-items:center;width:min(76px,14vw);aspect-ratio:1;background:var(--card);border-radius:12px;font-size:2rem}
.pgrid span img.art{width:78%;height:78%}
.pgrid span.hole{border:3px dashed var(--zh);color:var(--zh);font-family:var(--display)}
.pgrid span.bot{background:var(--enbg)}
.pgraph{display:grid;gap:6px;text-align:left;background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:12px 16px}
.pg-row{display:flex;gap:10px;align-items:center}
.pg-k{font-size:2rem;width:1.3em}.pg-k img.art{width:44px;height:44px}
.pg-v{display:flex;gap:4px}.pg-dot{font-style:normal;font-size:1.6rem}.pg-dot img.art{width:34px;height:34px}
.pg-cap{margin:4px 0 0;font-size:.85rem;color:var(--mute)}
.stage svg{max-width:100%;height:auto;color:var(--ink)}

/* life */
.lifecard{display:grid;justify-items:center;gap:14px;text-align:center}
.lifecard p{font-size:1.5rem;font-weight:800;max-width:30em}

/* album */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.zcard{position:relative;display:grid;justify-items:center;gap:2px;padding:12px 8px 10px;border-radius:20px;border:3px solid var(--zh);background:linear-gradient(170deg,var(--zhbg),var(--card) 65%);box-shadow:0 5px 0 var(--zh)}
.zcard img{width:64px;height:64px}
.zcard .c{font-family:var(--kai);font-size:3rem;line-height:1.1}
.zcard .p{font-weight:800;color:var(--mute)}
.zcard .n{position:absolute;top:6px;right:9px;font-size:.75rem;font-weight:900;color:var(--zh)}
.zcard.locked{border-color:var(--line);background:var(--soft);box-shadow:0 5px 0 var(--line);filter:grayscale(1)}
.zcard.locked .c{color:var(--mute);opacity:.5}

/* fx */
.fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.fx i{position:absolute;width:12px;height:16px;border-radius:3px;opacity:.95}
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:60;display:flex;gap:12px;align-items:center;background:var(--card);border:3px solid var(--zh);border-radius:22px;padding:10px 18px;box-shadow:var(--shadow);font-weight:800}
.toast .zi{font-size:2.4rem}

/* tablets in portrait and phones */
@media (max-width:1000px){.weeks{grid-template-columns:repeat(2,minmax(0,1fr))}.quests{grid-template-columns:repeat(2,minmax(0,1fr))}.quest.zh{grid-row:auto}}
@media (max-width:820px){.playgrid{grid-template-columns:1fr}.teacher{position:static;grid-template-columns:96px 1fr;justify-items:start;align-items:center;order:2}.t-img{max-width:96px}.t-name{display:none}.teacher .bubble::before{display:none}
  .hero-band{grid-template-columns:1fr}.introcard{grid-template-columns:1fr}.teacher-big{max-height:34vh}}
@media (max-width:600px){.weeks{grid-template-columns:1fr}.choices,.choices.balloons{grid-template-columns:repeat(2,minmax(0,1fr))}.choices.c6{grid-template-columns:repeat(3,minmax(0,1fr))}.choices.tiles{grid-template-columns:1fr 1fr}
  .quest.zh{grid-column:span 2}.quest{min-height:170px}.qcard{padding:14px;min-height:0}.hb-crew{grid-template-columns:repeat(5,minmax(0,1fr))}}

.choices.zh.wide button{font-size:clamp(1.5rem,2.8vw,2rem);line-height:1.25}
/* 翻翻乐 */
.choices.memory{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.choices.memory button{position:relative;min-height:0;aspect-ratio:1/1.05;padding:0;border:3px solid var(--zh);border-radius:22px;overflow:hidden;
  background:repeating-linear-gradient(45deg,#D9472F 0 12px,#E8664F 12px 24px);box-shadow:0 5px 0 #8E2A1A}
.choices.memory .back{display:grid;place-items:center;width:100%;height:100%;font-size:clamp(2.2rem,5vw,3.4rem)}
.choices.memory .face{display:none;place-items:center;width:100%;height:100%;background:#FFFDF7;color:#2A1A10;font-family:var(--kai);font-size:clamp(2.6rem,6vw,4.4rem)}
.choices.memory .face img.art{width:70%;height:70%}
.choices.memory button.up .back{display:none}
.choices.memory button.up .face{display:grid}
.choices.memory button.got{border-color:var(--pz);box-shadow:0 0 0 4px var(--pz)}
.choices.memory button.got .face{background:#E3F6EA}
@media (prefers-reduced-motion:no-preference){.choices.memory button.up{animation:flip .3s ease}@keyframes flip{0%{transform:scaleX(.1)}100%{transform:scaleX(1)}}}
.choices.tones small{font-family:"Nunito",system-ui,sans-serif;font-size:1.3rem;color:var(--ink)}

/* 拼音 over characters */
.pytog{padding:6px 14px;font-size:.95rem;justify-self:end}
.pytog[aria-pressed=true]{background:var(--zhbg);border-color:var(--zh);color:var(--zh)}
.passage.withpy{line-height:1.3;font-size:clamp(1.6rem,3vw,2.1rem)}
.pyc{display:inline-flex;flex-direction:column;align-items:center;margin:0 .08em .35em;vertical-align:bottom}
.pyc small{font-family:"Nunito","Trebuchet MS",system-ui,sans-serif;font-size:.5em;line-height:1.2;color:var(--mute);white-space:nowrap}
.q .pyc small{font-size:.55em}
.svgrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.svgrow svg{flex:none}

/* ======================================================================================
   Wildlands theme: the golden-hour valley of the 3D teachers (ready-world.js) behind everything,
   carved-stone panels with gold edges, glowing teal runes, Marcellus headings. One look in both
   light and dark settings, so the tokens live on body and win over the theme blocks above.
   ====================================================================================== */
@font-face{font-family:"Marcellus";src:url(/assets/fonts/Marcellus-Regular.woff2) format("woff2"),url(/assets/fonts/Marcellus-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
body{
  --bg:#1b1814;--card:#2a251e;--paper:#312b23;--soft:#3a3228;--ink:#f6eedb;--mute:#cfc1a2;--line:#5a4b31;
  --acc:#ecc874;--acc-ink:#22180a;--acc2:#62f0dc;--good:#8fe0b3;--goodbg:#1d3a2b;--rune:#62f0dc;
  --zh:#ffa08f;--zhbg:#3d221c;--en:#9cc8ff;--enbg:#1b2a3d;--ma:#d2b6ff;--mabg:#2d2140;--pz:#8fe0b3;--pzbg:#1c3427;--life:#ffb3cf;--lifebg:#3a1e2b;
  --red:#ff9e7a;--blue:#9cc8ff;--gold:#f4c95d;--green:#8fe0b3;
  --shadow:0 12px 34px rgba(0,0,0,.42);
  --display:"Marcellus","Palatino Linotype",Georgia,serif;
  color-scheme:dark;
  background:linear-gradient(180deg,rgba(22,18,13,.3) 0,rgba(22,18,13,.74) 240px,rgba(22,18,13,.9) 560px),url(/assets/ready3d/valley.webp) center top/cover no-repeat fixed,#1b1814;
  color:var(--ink);
}
h1,h2,h3,.display{font-family:var(--display);font-weight:400;letter-spacing:.03em}
header.top a{color:var(--ink);text-shadow:0 1px 6px rgba(0,0,0,.5)}
header.top nav a{color:var(--mute)}
a{color:var(--acc2)}
.kicker{color:var(--acc);letter-spacing:.2em}
/* carved stone panels */
.hero-band{background:linear-gradient(180deg,rgba(30,26,21,.55),rgba(30,26,21,.88));border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow),inset 0 1px 0 rgba(236,200,116,.18);padding:22px 24px;backdrop-filter:blur(4px)}
.hero-band h1{text-shadow:0 2px 16px rgba(0,0,0,.5)}
.hero-band .p1{color:var(--acc)}
.wk,.introcard,.qcard,.plan,.tip,.daydone,.card{background-color:rgba(37,32,26,.93);border-color:var(--line)}
.wk,.introcard,.qcard,.plan,.tip,.daydone{border-radius:16px;box-shadow:var(--shadow),inset 0 1px 0 rgba(236,200,116,.14)}
.wk{box-shadow:0 3px 0 var(--line),var(--shadow)}
.wk.now{border-color:var(--acc);box-shadow:0 3px 0 var(--acc),0 0 22px rgba(236,200,116,.25)}
.wk-top h3{font-size:1.15rem}
.stones button{background:var(--soft);color:var(--ink);border-color:var(--line)}
.stones button.next{outline-color:var(--rune);box-shadow:0 0 14px rgba(98,240,220,.45)}
.stones button.full{background:var(--goodbg);border-color:var(--good)}
.sec{text-shadow:0 2px 12px rgba(0,0,0,.6)}
.ghost,.back,.hear{background:var(--card);border-color:var(--line);color:var(--ink)}
/* the live 3D valley in the hero band */
.hero-band{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.world{position:relative;min-width:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#9cc3e6 url(/assets/ready3d/valley.webp) center/cover;aspect-ratio:16/9;max-width:100%;box-shadow:inset 0 0 0 1px rgba(236,200,116,.15)}
.world canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;opacity:0;transition:opacity .6s}
.world.live canvas{opacity:1}
.world .hb-crew{position:absolute;inset:auto 0 26px 0;padding:0 8px}
.world.live .hb-crew{display:none}
.world-hint{position:absolute;left:0;right:0;bottom:0;margin:0;padding:6px 10px;font-size:.78rem;font-weight:700;color:#fff6e2;text-align:center;background:linear-gradient(0deg,rgba(20,16,12,.75),rgba(20,16,12,0));text-shadow:0 1px 3px rgba(0,0,0,.6)}
.world:not(.live) .world-hint{display:none}
.crew{color:#fff6e2;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.crew b{color:#fff}
@media (max-width:820px){.hero-band{grid-template-columns:1fr}}
/* day quests: tinted stone tablets */
.quest{border-width:1px;border-color:var(--line);border-radius:18px;box-shadow:0 4px 0 var(--line),var(--shadow)}
.quest.zh{background:linear-gradient(160deg,var(--zhbg),rgba(37,32,26,.94) 70%);border-color:var(--zh);box-shadow:0 4px 0 var(--zh),0 0 26px rgba(255,160,143,.18),var(--shadow)}
.quest.en{background:linear-gradient(160deg,var(--enbg),rgba(37,32,26,.94) 70%)}
.quest.ma{background:linear-gradient(160deg,var(--mabg),rgba(37,32,26,.94) 70%)}
.quest.pz{background:linear-gradient(160deg,var(--pzbg),rgba(37,32,26,.94) 70%)}
.quest.life{background:linear-gradient(160deg,var(--lifebg),rgba(37,32,26,.94) 70%)}
.quest .st,.quest .games{color:var(--ink)}
.quest img{filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
/* lesson and play screens */
.bubble{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:inset 0 1px 0 rgba(236,200,116,.12)}
.bubble.good{background:var(--goodbg);border-color:var(--good)}
.bubble.try{background:var(--zhbg);border-color:var(--zh)}
.teacher .bubble::before{border-bottom-color:var(--line)}
.qcard{border-width:1px}
.passage{background:var(--paper);border-color:var(--line)}
.choices button{background:var(--card);border-width:1px;border-color:var(--line);box-shadow:0 4px 0 var(--line);color:var(--ink)}
.choices button.right{background:var(--goodbg);border-color:var(--good);box-shadow:0 4px 0 var(--good),0 0 18px rgba(143,224,179,.3)}
.choices.balloons button{background:none;box-shadow:none;border:0}
.choices.memory button{background:repeating-linear-gradient(45deg,#3a2f22 0 12px,#45382a 12px 24px);border:1px solid var(--acc);box-shadow:0 4px 0 #6b552e}
.choices.memory button.got{border-color:var(--good);box-shadow:0 0 0 3px var(--good)}
.choices.memory .back img.art{filter:drop-shadow(0 0 8px rgba(98,240,220,.6))}
.progress i{background:var(--soft)}
.progress i.done{background:var(--acc)}
.progress i.now{background:var(--rune);box-shadow:0 0 10px rgba(98,240,220,.6)}
.streak{color:var(--acc)}
.t-img{filter:drop-shadow(0 12px 14px rgba(0,0,0,.5))}
.t-name{color:var(--acc)}
.teacher-big{filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
.zigrid,.tracepad{box-shadow:0 0 0 3px rgba(98,240,220,.25),0 10px 24px rgba(0,0,0,.4)}
.slots{border-color:var(--line)}
.slots span{background:var(--goodbg);color:var(--ink)}
.pgrid{background:var(--soft)}
.pgrid span{background:var(--card)}
.pgraph{background:var(--paper);border-color:var(--line)}
.zcard{background:linear-gradient(170deg,var(--zhbg),rgba(37,32,26,.94) 65%);border-width:1px;box-shadow:0 4px 0 var(--zh)}
.zcard.locked{background:var(--soft);box-shadow:0 4px 0 var(--line);filter:none;opacity:.75}
.toast{background:var(--card);color:var(--ink)}
.note,.suite,footer{color:var(--mute)}
.note{border-top-color:var(--line)}
.plan th,.plan td{border-top-color:var(--line)}
.big{box-shadow:0 4px 0 #9b7a35,0 0 18px rgba(236,200,116,.25)}
.ghost:hover,.ghost:focus-visible,.back:hover,.back:focus-visible{border-color:var(--acc)}
:focus-visible{outline-color:var(--rune)}
header.top{background:rgba(22,18,13,.62);border:1px solid var(--line);border-radius:14px;padding:8px 14px;margin-top:8px;backdrop-filter:blur(6px)}
header.top nav a[aria-current]{color:var(--acc)}
.choices.talk{grid-template-columns:minmax(0,420px);justify-content:center}
.choices.talk button{font-size:1.6rem}

/* levels: K2 -> P1 | Primary 1 ... Primary 6 */
.levels{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:6px 0 16px}
@media (max-width:1000px){.levels{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.levels{grid-template-columns:repeat(2,minmax(0,1fr))}}
.levels button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;min-width:0;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.levels button b{font-family:var(--display);font-size:1.15rem;white-space:nowrap}
.levels button small{color:var(--mute);font-size:.9rem}
.levels button[aria-selected="true"]{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 35%,transparent)}
.p2head h1{margin:.1em 0 .2em}
.p2subjects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:14px 0}
@media (max-width:900px){.p2subjects{grid-template-columns:1fr}}
.p2subj{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:14px}
.p2subj header{display:flex;gap:12px;align-items:center}
.p2subj header img{width:72px;height:72px;object-fit:contain}
.p2subj h2{margin:0;font-family:var(--display)}
.p2subj h3{margin:14px 0 6px;font-size:.95rem;color:var(--mute);font-weight:700}
.p2units{display:flex;flex-direction:column;gap:6px}
.p2unit{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:48px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--soft);color:var(--ink);font:inherit;font-size:1rem;text-align:left;cursor:pointer}
.p2unit.got{border-color:var(--good)}
.p2unit b{font-size:.85rem;white-space:nowrap}
/* Clock School */
.ckskip{margin-left:auto}
.ckwrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:8px}
@media (max-width:760px){.ckwrap{grid-template-columns:1fr}}
#ckClock{width:min(100%,470px);display:block;margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none}
#ckClock.live{cursor:grab}
#ckClock .mlabel{opacity:0;transition:opacity .3s}
#ckClock.labels .mlabel{opacity:1}
#ckClock .halo{stroke:#FFB020;stroke-linecap:round;opacity:0;transition:opacity .3s}
#ckClock .halo.h{stroke-width:24}
#ckClock .halo.m{stroke-width:17}
#ckClock.glow-h .halo.h,#ckClock.glow-m .halo.m{opacity:.8}
.ckread{text-align:center;font-family:var(--display);font-size:2.6rem;font-weight:700;margin-top:4px}
.cknudge{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.cknudge button{min-height:52px;padding:0 16px;font-size:1.05rem}
.ckteach{display:flex;gap:14px;align-items:flex-start}
.ckteach img{width:118px;flex:none}
.ckteach .ckname{display:block;font-family:var(--display);margin-bottom:6px}
.ckteach .bubble{font-size:1.15rem;line-height:1.5}
.ckopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.ckopts button{font-size:2.2rem;min-height:84px}
.ckrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.ckrow .go{margin-left:auto}
/* no Chinese voice in this browser */
.voicewarn{margin:10px auto 0;max-width:1180px;padding:10px 14px;border-radius:12px;border:1px solid var(--acc);background:var(--card);color:var(--ink);font-size:.95rem;line-height:1.45}
/* download for offline */
.offline{margin:18px 0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.offline #offlineBtn{margin-right:10px}
.offline progress{width:min(320px,60vw);vertical-align:middle;margin-right:8px}
/* v3: building words from tiles, typing numbers */
.slots .slot{display:inline-block;width:56px;height:62px;border-radius:14px;border:2px dashed var(--line)}
.slots.letters span,.choices.letters button{font-family:var(--display);text-transform:lowercase}
.choices.letters{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
.choices.letters button{font-size:2.1rem;min-height:80px}
.numbox{min-width:180px;min-height:64px;margin-top:8px;padding:6px 18px;border-radius:16px;border:2px solid var(--line);background:var(--paper);font-family:var(--display);font-size:2.6rem;text-align:center}
.numbox.ok{border-color:var(--good);background:var(--goodbg)}
.numbox.no{border-color:var(--zh)}
@media (prefers-reduced-motion:no-preference){.numbox.no{animation:shake .4s}}
.choices.numpad{grid-template-columns:repeat(4,minmax(0,104px));justify-content:center;gap:10px}
.choices.numpad button{min-height:64px;font-size:2rem}
.choices.numpad button.go{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.pgrid span.hole2{border:2px dashed var(--line);background:transparent}