:root{--paper:#F1F4EE;--surface:#fff;--sunken:#E7EBE2;--ink:#16211A;--body:#36423A;--muted:#5E6B62;--faint:#8C978E;--rule:#D3DBCD;
  --leaf:#2E6F4E;--leaf-s:#DFEDE3;--sun:#A87418;--sun-s:#F8EFD9;--plum:#6D4877;--plum-s:#EFE5F1;--sky:#2A5570;--sky-s:#E1EAF1;--red:#9B3B33;
  --shadow:0 1px 2px rgba(22,33,26,.05),0 10px 26px -14px rgba(22,33,26,.26);
  --fb:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;--fm:ui-monospace,Menlo,"IBM Plex Mono",monospace}
/* 跟老系统同一套配色（纸色底、深绿主色）。深色只留给「时间裂隙」那几屏（.dark） */
.dark{--paper:#0f1412;--surface:#182019;--sunken:#101613;--ink:#EAF0EA;--body:#C6CFC7;--muted:#93A097;--faint:#66736B;--rule:#2A332C;--leaf:#6FBE91;--leaf-s:#1A2A20;--sun:#DBAF5C;--sun-s:#2C2415;--plum:#BE96CB;--plum-s:#281F2C;--sky:#8AB2CC;--sky-s:#16232C;background:var(--paper);color:var(--ink)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
#top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgba(241,244,238,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);font-family:var(--fm);font-size:12px;color:var(--muted)}
#top a{color:var(--muted);text-decoration:none}
#topMid{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--faint)}
#stars{background:var(--sun-s);color:var(--sun);border:1px solid #E5D3A6;border-radius:20px;padding:3px 10px;font-weight:700}
#stars b{font-size:14px}
#stage{max-width:720px;margin:0 auto;padding:16px 16px 96px;min-height:70vh}
#nav[hidden]{display:none}
#top[hidden]{display:none}
#nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:rgba(255,255,255,.96);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
#nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0 6px;color:var(--muted);text-decoration:none;font-size:12px;font-family:var(--fm)}
#nav a span{font-size:22px;line-height:1.1}
#nav a.on{color:var(--leaf)}
/* 红点：开发者回复了留言还没看（2026-09-25） */
#nav a{position:relative}
#nav a.rdot::after{content:'';position:absolute;top:6px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:#E0282E;box-shadow:0 0 0 2px #fff}
.rd{display:inline-block;width:8px;height:8px;border-radius:50%;background:#E0282E;margin-left:6px;vertical-align:middle}
.scene{animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:16px 18px;margin:0 0 12px;box-shadow:var(--shadow)}
.card.gold{border-color:var(--sun)}
.card h3{margin:0 0 6px;font-size:18px}
h1{font-size:22px;margin:4px 0 8px}
h2{font-size:17px;margin:16px 0 6px}
.tiny{font-family:var(--fm);font-size:12px;color:var(--faint)}
.muted{color:var(--muted)}
.star{color:var(--sun);font-weight:700}
.txt p{margin:0 0 12px}.txt b{color:var(--ink)}
.cred{font-family:Georgia,"Songti SC",serif;font-size:19px;line-height:2;color:var(--ink)}
.pic{width:100%;aspect-ratio:4/3;background:linear-gradient(160deg,#E7EBE2,#D9E2D2);border:1px solid var(--rule);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-family:var(--fm);font-size:12px;letter-spacing:.1em;margin-bottom:14px;overflow:hidden;position:relative}
.pic.black{background:#1a1f1c;color:#c6cfc7}
.pic img{width:100%;height:100%;object-fit:cover}
.pic:has(img){aspect-ratio:16/9;background:none}
.say{display:flex;gap:10px;margin:10px 0;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--rule)}
.say .who{flex:none;font-family:var(--fm);font-size:11px;color:var(--faint);padding-top:5px;min-width:64px}
.say.goose{border-color:#B8C7BA;background:#F3F7F2}.say.gramps{border-color:#9FB6C8;background:var(--sky-s)}.say.zero{border-color:#BFA9C9;background:var(--plum-s)}.say.sci{border-color:#D8C48F;background:var(--sun-s)}
.rap{font-family:var(--fm);font-size:15px;line-height:1.9;padding:12px 14px;border-left:3px solid var(--plum);background:var(--surface);border-radius:0 10px 10px 0;margin:10px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--leaf);color:#fff;border:0;border-radius:10px;padding:11px 20px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;min-height:44px;text-decoration:none}
.btn.sec{background:var(--surface);color:var(--ink);border:1px solid var(--rule);font-weight:500}
.btn.sm{padding:7px 12px;min-height:36px;font-size:14px}
.btn:disabled{opacity:.4;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.dots{display:flex;gap:6px;justify-content:center;margin:4px 0 12px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--rule)}.dots i.on{background:var(--sun)}
input.in,select.in{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--sunken);color:var(--ink);width:100%}
.opts{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.opt{text-align:left;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;line-height:1.5}
.opt:hover{border-color:var(--sky)}
.opt.good{border-color:var(--leaf);background:var(--leaf-s)}.opt.bad{border-color:var(--plum);background:var(--plum-s)}
.opt .goose{font-family:var(--fm);font-size:11px;color:var(--plum);margin-right:6px}
.fb{margin-top:8px;font-size:15px}.fb.ok{color:var(--leaf)}.fb.no{color:var(--plum)}
.q{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:12px 14px;margin:10px 0}
.q .qt{margin-bottom:6px}
.q input{font:inherit;font-size:16px;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--sunken);color:var(--ink);width:120px;margin-right:6px}
.q input.ok{border-color:var(--leaf)}.q input.no{border-color:var(--plum)}
.q .frac-in{display:inline-flex;align-items:center;gap:4px;margin-right:6px;vertical-align:middle}.q .frac-in input{width:64px;margin-right:0;text-align:center}.q .frac-sep{font-size:20px;font-weight:600;color:var(--ink)}
.veil{position:fixed;inset:0;z-index:30;background:rgba(22,33,26,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.veil .card{max-width:520px;width:100%}
.mon{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);margin-bottom:12px}
.mon .av{width:48px;height:48px;border-radius:10px;background:var(--plum-s);display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
.mon .nm{font-weight:700}.mon .ln{color:var(--muted);font-size:14px}
.mon.down{opacity:.45}.mon.down .nm{text-decoration:line-through}.mon.fled{border-color:var(--plum)}
.hp{display:flex;gap:4px;margin:6px 0 12px}.hp i{flex:1;height:8px;border-radius:4px;background:var(--rule)}.hp i.ok{background:var(--leaf)}.hp i.no{background:var(--plum)}
.page{background:#F4EFDF;color:#2b2419;border:1px solid #E2D6B8;border-radius:10px;padding:16px 18px;font-family:Georgia,"Songti SC",serif;box-shadow:var(--shadow)}
.page .t{font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:#8a7350}
.page h4{margin:4px 0 8px;font-size:20px}
.page .said{border-top:1px dashed #b9ab8c;margin-top:10px;padding-top:8px;font-style:italic}
.kard{border:1px solid var(--sun);border-radius:12px;padding:14px 16px;background:var(--sun-s)}
.kard .k{font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--sun)}
.widget{background:#fff;color:#16211A;border:1px solid var(--rule);border-radius:12px;padding:14px;margin:10px 0;overflow:hidden}
.widget svg{width:100%;height:auto;display:block}
.widget .ctl{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.widget .ctl button{font:inherit;font-size:14px;padding:8px 12px;border-radius:8px;border:1px solid #c9d1c4;background:#fff;color:#16211A;cursor:pointer;min-height:38px}
.widget .ctl button.on{background:#2E6F4E;color:#fff;border-color:#2E6F4E}
.widget .read{margin-top:8px;font-size:15px;color:#36423A}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.grades button{font:inherit;font-size:15px;padding:14px 8px;border-radius:12px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer}
.grades button.on{border-color:var(--sun);background:var(--sun-s)}
.lawn{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:12px 0}
.plot{aspect-ratio:1;border:1px dashed var(--rule);border-radius:10px;background:#DFEDE3;display:flex;align-items:end;justify-content:center;overflow:hidden}
.plot img{height:78%}
.raid{position:relative;height:140px;border:1px solid var(--rule);border-radius:12px;background:linear-gradient(#2b3a33,#4c6b4f);overflow:hidden;margin:10px 0}
.raid .z{position:absolute;bottom:6px;width:56px;text-align:center;font-size:11px;font-family:var(--fm);color:var(--plum);animation:walk 5s linear forwards}
.raid .z img{height:70px;display:block;margin:0 auto}
.raid .p{position:absolute;bottom:6px;left:14px;display:flex;gap:8px}.raid .p img{height:60px}
@keyframes walk{from{right:-60px}to{right:calc(100% - 300px)}}
.raid.done .z{animation:none;right:calc(100% - 300px);transform:rotate(80deg);opacity:.5;transition:all .6s}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.cmp div{border:1px solid var(--rule);border-radius:12px;padding:8px;text-align:center;background:var(--surface)}.cmp img{width:100%;aspect-ratio:1;object-fit:contain}
.leaf{cursor:pointer}.leaf circle{stroke:#0f1412;stroke-width:1.5}
.leaf.open circle{fill:var(--leaf-s);stroke:var(--leaf)}.leaf.lock circle{fill:#EEF1EA;stroke:#C8D0C4}.leaf.lit circle{fill:var(--leaf)}.leaf.gold circle{fill:var(--sun)}.leaf.fog circle{fill:#DDE3D8;stroke:none;opacity:.8}
.leaf text{font-size:9px;fill:var(--body);font-family:var(--fm);pointer-events:none}.leaf circle{stroke:#fff}
.br text{font-size:11px;fill:var(--muted);font-family:var(--fm)}.gr text{font-size:10px;fill:var(--faint);font-family:var(--fm)}
.blk{fill:none;stroke:#2A332C;stroke-dasharray:4 4}.blk.done{stroke:var(--sun);stroke-dasharray:none}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--rule);border-radius:16px 16px 0 0;padding:16px 18px 80px;max-height:82vh;overflow:auto;transform:translateY(100%);transition:transform .25s}
.sheet.on{transform:none}
.shade{position:fixed;inset:0;background:#0009;z-index:24;display:none}.shade.on{display:block}
.bar{height:6px;background:var(--rule);border-radius:3px;margin-top:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--leaf)}
.msg{font-size:14px;color:var(--red);min-height:1.4em}
.fly{position:fixed;z-index:40;font-size:22px;pointer-events:none;transition:all .8s cubic-bezier(.2,.7,.3,1)}
/* ---- 安全屋草坪板 ---- */

.seg{border:1px solid var(--rule);border-radius:12px;background:var(--surface);margin:0 0 10px;overflow:hidden}
.seg summary{cursor:pointer;padding:12px 14px;font-weight:700;list-style:none;display:flex;align-items:center;gap:8px}
.seg summary::-webkit-details-marker{display:none}
.seg summary .n{margin-left:auto;font-family:var(--fm);font-size:12px;color:var(--muted);font-weight:500}
.seg .lv{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px dashed var(--rule);font-size:15px}
.seg .lv .dot{width:12px;height:12px;border-radius:50%;flex:none;border:1.5px solid var(--faint);background:#fff}
.seg .lv.lit .dot{background:var(--leaf);border-color:var(--leaf)}.seg .lv.gold .dot{background:var(--sun);border-color:var(--sun)}.seg .lv.open .dot{border-color:var(--leaf);background:var(--leaf-s)}.seg .lv.fog{color:var(--faint)}.seg .lv.fog .dot{border-style:dashed}
.seg .lv > span:nth-child(2){flex:1;min-width:0;line-height:1.35}
.seg .lv .g{margin-left:auto;font-family:var(--fm);font-size:11px;color:var(--faint);white-space:nowrap}


/* 教程气泡 */
.coach{position:fixed;left:12px;right:12px;bottom:72px;z-index:9000;background:#fff;border:2px solid var(--leaf);border-radius:14px;padding:12px 14px;box-shadow:0 12px 30px -10px rgba(0,0,0,.35);display:none;max-width:560px;margin:0 auto}
.coach.on{display:block}
.coach .who{font-family:var(--fm);font-size:11px;letter-spacing:.12em;color:var(--leaf);margin-bottom:2px}
.coach .who.gramps{color:var(--sun)}
.coach .txt{font-size:15.5px;line-height:1.6}
.coach .btn{margin-top:8px}
.coach-hl{outline:3px solid var(--leaf);outline-offset:4px;border-radius:12px;animation:coachPulse 1.2s ease-in-out infinite}
@keyframes coachPulse{0%,100%{outline-color:var(--leaf)}50%{outline-color:#F5C842}}

/* 遗忘者来袭：草坪一条，排着队 */
.rq{position:relative;height:150px;border-radius:12px;background:url(../art/garden/lawn.jpg) center/cover,#4c6b4f;overflow:hidden;margin:0 0 10px;border:1px solid var(--rule)}
.rq .rift{position:absolute;right:-30px;top:20px;width:90px;height:110px;border-radius:50%;background:radial-gradient(circle,#2b0b3a 0%,#5b2a86 45%,rgba(91,42,134,0) 72%);filter:blur(2px);animation:riftGlow 2.4s ease-in-out infinite}
@keyframes riftGlow{0%,100%{opacity:.7}50%{opacity:1}}
.rq .zq{position:absolute;bottom:4px;width:60px;text-align:center;transition:left .8s ease,transform .6s ease,opacity .6s ease;animation:zqIn 1.6s ease-out both}
@keyframes zqIn{from{transform:translateX(120px);opacity:0}to{transform:translateX(0);opacity:1}}
.rq .zq img{height:78px;display:block;margin:0 auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.rq .zq.wait img{filter:grayscale(.3) brightness(.85) drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.rq .zq .nm{font-family:var(--fm);font-size:10px;color:#fff;text-shadow:0 1px 2px #000;white-space:nowrap}
.rq .zq .bub{position:absolute;left:50%;bottom:100%;transform:translateX(-30%);min-width:0;max-width:200px;width:max-content;background:#fff;color:var(--ink);font-size:12px;line-height:1.35;padding:5px 8px;border-radius:10px;border:1.5px solid var(--plum);margin-bottom:6px;text-align:left;visibility:hidden;z-index:30}
.rq .zq.front .bub{visibility:visible}
.rq .zq .bub::after{content:"";position:absolute;left:30%;bottom:-7px;border:6px solid transparent;border-top-color:var(--plum);border-bottom:0}
.rq .zq.front img{animation:zqStep .7s ease-in-out infinite alternate}
@keyframes zqStep{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.rq .zq.down{animation:zqDown 1.4s ease-in forwards}
@keyframes zqDown{0%{transform:none;opacity:1}45%{transform:rotate(80deg) translate(10px,-10px);opacity:.7}100%{transform:rotate(80deg) translate(10px,-10px);opacity:0}}
.rq .zq.down img{animation:none}
.rq .zq.fled{left:calc(100% + 20px) !important;opacity:0;animation:none}

/* 知识手册：封面是插画，翻开一页一个年级 */
.bk-cover{position:relative;cursor:pointer;border-radius:16px;overflow:hidden;box-shadow:0 14px 30px -14px rgba(0,0,0,.55);max-width:360px;margin:0 auto}
.bk-cover img{display:block;width:100%}
.bk-plate{position:absolute;left:12%;right:12%;bottom:15%;background:rgba(20,26,34,.72);border:1.5px solid #C9D2DB;border-radius:12px;padding:8px 10px;text-align:center;color:#F3EBD3;backdrop-filter:blur(2px)}
.bk-title{font-family:var(--fd);font-size:22px;font-weight:700;letter-spacing:.14em}
.bk-sub{font-family:var(--fm);font-size:11px;letter-spacing:.12em;color:#DCE3EA}
.bk-cnt{display:inline-block;margin-top:4px;font-family:var(--fm);font-size:12px;background:rgba(245,200,66,.18);color:#F5C842;border-radius:99px;padding:2px 10px}
.bk-open{position:absolute;right:10px;top:10px;background:var(--leaf);color:#fff;font-size:13px;font-weight:600;border-radius:99px;padding:5px 12px}
.bk-book{border:3px solid #2B3239;border-radius:14px;background:#5C6673;padding:6px;box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}
.bk-tabs{display:flex;gap:4px;padding:2px 4px 6px}
.bk-tab{flex:1;font:inherit;font-size:13px;font-weight:600;padding:6px 0;border-radius:8px 8px 0 0;border:1px solid #2B3239;background:#A9B2BC;color:#2B3239;cursor:pointer}
.bk-tab.on{background:#FBF7EC;color:var(--leaf)}
.bk-page{background:#FBF7EC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='28'%3E%3Cline x1='0' y1='27.5' x2='100%25' y2='27.5' stroke='%23E7DFCB' stroke-width='1'/%3E%3C/svg%3E") repeat-y;background-size:100% 28px;border-radius:8px;padding:12px 14px;min-height:300px;box-shadow:inset 8px 0 14px -10px rgba(0,0,0,.35)}
.bk-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #C9B98E;padding-bottom:4px;margin-bottom:8px}
.bk-g{font-family:var(--fd);font-size:20px;font-weight:700;color:#5B4A1E}
.bk-sec{margin:8px 0 10px}
.bk-sn{font-size:13.5px;font-weight:700;color:#6B5A2E;margin-bottom:4px}
.bk-leaves{display:flex;flex-wrap:wrap;gap:6px}
.bk-leaf{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;line-height:1.2;padding:5px 9px;border-radius:99px;border:1px solid #D3D3CC;background:#F1F1EC;color:#9A9A90;cursor:pointer;max-width:100%}
.bk-leaf i{width:9px;height:9px;border-radius:50%;background:#E4E4DE;border:1.5px solid #C4C4BC;flex:none}
.bk-leaf.lit{border-color:var(--leaf);background:var(--leaf-s);color:var(--ink);font-weight:600}.bk-leaf.lit i{background:var(--leaf);border-color:var(--leaf);box-shadow:0 0 6px rgba(46,111,78,.6);animation:bkGlow 2.2s ease-in-out infinite}
.bk-leaf.gold{border-color:#C9942C;background:#FAEFD4;color:var(--ink);font-weight:600}.bk-leaf.gold i{background:#F5C842;border-color:#C9942C;box-shadow:0 0 8px rgba(245,200,66,.9);animation:bkGlowGold 2.2s ease-in-out infinite}
@keyframes bkGlow{0%,100%{box-shadow:0 0 4px rgba(46,111,78,.5)}50%{box-shadow:0 0 12px rgba(46,111,78,.95)}}
@keyframes bkGlowGold{0%,100%{box-shadow:0 0 5px rgba(245,200,66,.7)}50%{box-shadow:0 0 14px rgba(245,200,66,1)}}
.bk-leaf.fog{opacity:.55;border-style:dashed}
.bk-none{font-size:12.5px;color:#B0A483}
.bk-nav{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 4px 2px;color:#DCE3EA}
.bk-nav .chip{font:inherit;font-size:13px;padding:6px 10px;border-radius:99px;border:1px solid #DCE3EA;background:transparent;color:#fff;cursor:pointer}
.bk-nav .chip:disabled{opacity:.35;cursor:default}

/* 片头 */
.title-screen{position:relative;min-height:calc(100vh - 60px);margin:-14px -14px 0;background:radial-gradient(ellipse at 50% 110%,#2a1548 0%,#0f1730 45%,#070b18 100%);color:#F3EBD3;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.ts-sky{position:absolute;inset:0}
.ts-sky i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:tsTwinkle 2.6s ease-in-out infinite}
@keyframes tsTwinkle{0%,100%{opacity:.25}50%{opacity:1}}
.ts-rift{position:absolute;right:-90px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#0b0412 0%,#3a145e 40%,#7b3fb8 58%,rgba(123,63,184,0) 72%);filter:blur(3px);animation:tsRift 5s ease-in-out infinite}
@keyframes tsRift{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(8deg)}}
.ts-body{position:relative;padding:34px 18px 28px;max-width:520px;width:100%}
.ts-eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:.32em;color:#9FB3C8;margin-bottom:10px;animation:tsIn .8s ease-out both}
.ts-title{font-family:var(--fd);font-size:56px;line-height:1.05;margin:0;letter-spacing:.06em;color:#FFF3C4;text-shadow:0 0 18px rgba(245,200,66,.55),0 4px 0 #6B4A00,0 8px 24px rgba(0,0,0,.6);animation:tsIn .9s .15s ease-out both}
.ts-title span{color:#F5C842;font-size:.9em;letter-spacing:.02em}
.ts-sub{display:inline-block;margin:12px auto 0;font-family:var(--fd);font-size:26px;font-weight:700;letter-spacing:.18em;color:#0f1730;background:linear-gradient(#FFE58A,#F5C842);padding:4px 18px 5px;border-radius:10px;transform:rotate(-2deg);box-shadow:0 6px 18px -6px rgba(245,200,66,.8),0 2px 0 #B8860B;animation:tsIn .9s .35s ease-out both}
.ts-slogan{margin:14px auto 22px;font-size:20px;font-weight:700;letter-spacing:.08em;min-height:1.6em;color:#E8EFF7;animation:tsIn .9s .5s ease-out both}
.ts-cursor{color:#F5C842;animation:tsBlink .8s steps(1) infinite;font-weight:400}
@keyframes tsBlink{50%{opacity:0}}
.ts-panda{position:relative;height:190px;margin:0 auto 12px;width:200px;animation:tsIn 1s .9s ease-out both}
.ts-panda img:first-child{height:190px;display:block;margin:0 auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6));animation:tsFloat 3s ease-in-out infinite}
.ts-panda .ts-book{position:absolute;right:-6px;bottom:6px;width:64px;border-radius:6px;box-shadow:0 0 18px rgba(245,200,66,.55);animation:tsFloat 3s .4s ease-in-out infinite}
@keyframes tsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes tsIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.ts-start{font:inherit;font-size:20px;font-weight:800;letter-spacing:.14em;padding:14px 34px;border-radius:14px;border:2px solid #F5C842;background:linear-gradient(#F9D66A,#D9A426);color:#3B2A00;cursor:pointer;box-shadow:0 0 0 4px rgba(245,200,66,.18),0 10px 24px -8px rgba(245,200,66,.7);animation:tsPulse 1.4s ease-in-out infinite}
@keyframes tsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05);box-shadow:0 0 0 8px rgba(245,200,66,.12),0 10px 30px -6px rgba(245,200,66,.9)}}
.ts-foot{margin-top:18px;font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:#7F93A8}

.login-hero{display:flex;align-items:center;gap:14px;margin:6px 0 14px}
.login-hero img{height:96px}

/* 图示引导 */
.gd-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.gd-tab{font:inherit;font-size:14px;font-weight:600;padding:7px 12px;border-radius:99px;border:1px solid var(--rule);background:var(--surface);color:var(--muted);cursor:pointer}
.gd-tab.on{background:var(--leaf);border-color:var(--leaf);color:#fff}
.gd-step{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed var(--rule)}.gd-step:last-child{border-bottom:0}
.gd-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--leaf);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.gd-body{flex:1;min-width:0;font-size:15px}.gd-body>b{display:block;margin-bottom:6px}
.gd-fig{margin:6px 0 8px}.gd-tip{font-size:12.5px;color:var(--muted);text-align:center;margin-top:4px}
.gd-mock{display:grid;gap:6px;margin:6px 0 8px}
.m-card{border:1px solid var(--rule);border-radius:10px;padding:8px 10px;background:var(--sunken);font-size:13px}.m-card b{display:block;margin-bottom:2px}
.m-row{display:flex;justify-content:space-between;gap:8px;padding:2px 0;color:var(--body)}.m-row span{color:var(--leaf);font-size:12px}

.acct{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--rule);font-size:15px}.acct span{font-size:12.5px;color:var(--muted);text-align:right}

/* 序章：零号 / 知识手册 图文卡 */
.intro-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #E3DCC8;border-radius:14px;padding:12px;margin:10px 0}
.intro-card img{width:38%;max-width:220px;border-radius:10px;flex:none;object-fit:cover}
.intro-card .t{font-size:12px;color:var(--muted);letter-spacing:.08em}
.intro-card h3{margin:2px 0 6px;font-size:20px}
.intro-card p{margin:6px 0;font-size:14px;line-height:1.55}
@media (max-width:520px){.intro-card{flex-direction:column}.intro-card img{width:100%;max-width:none}}
/* 配音：正在说的气泡点亮；跳过语音按钮靠右 */
.say.speaking{box-shadow:0 0 0 2px var(--leaf) inset}
/* 咕咕嘎嘎爱抢答、遗忘者专门喊错答案 —— 不逐句点名（它俩也有说真话的时候），
   在会遇到它们的那一屏顶上说一次（用户 2026-09-23 裁定）。 */
.warnbar{background:var(--sun-s);border:1px solid #E3D2A8;border-radius:10px;padding:8px 10px;color:var(--body)}
.warnbar b{color:var(--sun)}
.mon .ln.speaking{color:var(--plum);font-weight:700}
.vo-skip{margin-left:auto}

/* 落页三段合一：段间虚线 */
.scroll-more{border-top:1px dashed var(--rule);margin-top:6px;padding-top:4px}

/* 并入其它关的知识点 */
.lv.shared{opacity:.75}.lv.shared .tiny{margin-top:2px}

/* 盲盒宝箱：两张图（闭/开）+ 光束/闪光/彩屑 */
.chest-card{display:flex;flex-direction:column;align-items:center;padding:6px 0 4px}
.chest-stage{position:relative;width:280px;height:270px}
.chest-stage .rays{position:absolute;left:50%;top:52%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,225,110,.6) 0 9deg,rgba(255,225,110,0) 9deg 24deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);opacity:0;transform:scale(.3);transition:opacity .5s,transform .7s cubic-bezier(.2,1.2,.4,1);animation:raysSpin 9s linear infinite;pointer-events:none}
.chest-stage.lit .rays{opacity:1;transform:scale(1)}
@keyframes raysSpin{to{transform:scale(1) rotate(360deg)}}
.chest-stage .flash{position:absolute;inset:-20px;border-radius:50%;background:radial-gradient(circle,rgba(255,250,210,.95),rgba(255,250,210,0) 60%);opacity:0;pointer-events:none}
.chest-stage.lit .flash{animation:chestFlash .7s ease-out}
@keyframes chestFlash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
.chest{position:absolute;left:20px;top:15px;width:240px;height:240px;cursor:pointer;transform-origin:50% 100%;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 10px 8px rgba(0,0,0,.28))}
.chest img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;display:block;-webkit-user-select:none;user-select:none}
.chest .closed{transform-origin:50% 100%;transition:transform .3s ease-in,opacity .25s}
.chest .opened{opacity:0;transform:scale(.6) translateY(20px);transform-origin:50% 100%;transition:transform .55s .22s cubic-bezier(.2,1.6,.5,1),opacity .2s .22s}
.chest.shake{animation:chestShake .75s ease-in-out}
@keyframes chestShake{0%{transform:rotate(0) scale(1)}12%{transform:rotate(-5deg) scale(1.02)}24%{transform:rotate(5deg) scale(1.02)}36%{transform:rotate(-6deg) translateY(-3px)}48%{transform:rotate(6deg) translateY(-3px)}60%{transform:rotate(-4deg)}72%{transform:rotate(4deg)}84%{transform:scale(1.06,.94)}100%{transform:scale(1)}}
.chest.open .closed{transform:scale(1.08,.7);opacity:0}
.chest.open .opened{opacity:1;transform:scale(1) translateY(0)}
.chest.open{animation:chestBounce .6s .25s cubic-bezier(.2,1.6,.5,1)}
@keyframes chestBounce{0%{transform:scale(1.06,.94)}40%{transform:scale(.96,1.06)}100%{transform:scale(1)}}
.burst{position:absolute;left:50%;top:45%;width:0;height:0;pointer-events:none;z-index:5}
.burst .bit{position:absolute;left:0;top:0;line-height:1;color:#f5c842;text-shadow:0 1px 0 #8a6a1a;animation:bitFly 1.6s cubic-bezier(.15,.8,.3,1) both;will-change:transform,opacity}
.burst .conf{position:absolute;left:0;top:0;border-radius:2px;opacity:0;animation:confFly 1.9s cubic-bezier(.2,.7,.4,1) both;will-change:transform,opacity}
@keyframes confFly{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}45%{opacity:1;transform:translate(calc(var(--dx)*.7),var(--h)) rotate(calc(var(--r)*.5))}100%{opacity:0;transform:translate(var(--dx),80px) rotate(var(--r))}}
@keyframes bitFly{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 60px)) scale(1) rotate(var(--r))}}
.chest-out{height:44px;font-size:30px;margin-top:2px;opacity:0;transform:scale(.3);text-shadow:0 2px 0 #fff,0 0 18px rgba(255,220,90,.9)}
.chest-out.pop{animation:chestPop .7s cubic-bezier(.2,1.7,.4,1) forwards}
@keyframes chestPop{0%{opacity:0;transform:scale(.2) translateY(-30px)}60%{opacity:1;transform:scale(1.25) translateY(4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.chest-hint{margin-top:2px}
.bk-badge{margin-top:6px;font-size:13px;font-weight:700;color:#7a4a00;background:#ffe9a8;border:1.5px solid #e2b444;border-radius:999px;padding:2px 10px;display:inline-block}
.bk-chests{margin:0 0 10px;padding:8px 10px 4px;background:#fff8e3;border:1.5px dashed #e2b444;border-radius:12px}
.bk-chest{display:flex;flex-direction:column;align-items:center}.bk-chest .chest-card{padding-top:8px}.bk-chest-nm{font-weight:700;margin-top:6px}

.mute-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:6px 0 4px;flex-wrap:wrap}

/* 关卡页：主线按年级 */
.seg .lv .idx{display:inline-block;min-width:22px;font-family:var(--fm);font-size:11px;color:var(--faint);margin-right:4px}
.seg .lv.now{background:#FBF6E4}.seg .lv .lock{color:var(--faint);font-size:14px}.seg .lv .sub{margin-top:2px}
.seg summary .tag{font-size:11px;font-weight:600;color:#7a6a3a;background:#F3EAD0;border-radius:999px;padding:1px 8px}.seg summary .tag.now{color:#2E6F4E;background:#DFEDE3}
.seg.warm{border-style:dashed}

/* 联络员端的任务行：.tk 的样式原本只写在 legacy.css 的 .legacy 里，
   这一页不在那层，图标会按原图大小铺开，整页结构就看不清了（2026-09-23 用户反馈）。
   ⚠️ 别写成场景里的 <style>：textContent 会把 CSS 也算进去，自测拿文字做断言会被污染。 */
.scene .tk{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--rule);border-radius:12px;padding:9px 11px;margin-bottom:7px}
.scene .tk img{width:28px;height:28px;object-fit:contain;flex:none}
.scene .tk b{font-size:14.5px;color:var(--ink)}
.scene .tk .tiny{margin-top:1px}
.scene .tk .in{font-size:14px;padding:6px 9px;height:auto}
.scene .tk .btn.sm{padding:5px 10px;font-size:12.5px}
.scene #ed .tk{gap:8px;flex-wrap:wrap}          /* 手机上放不下就换行 */
.scene #ed .tk .in{min-width:0}                  /* 输入框可以被压窄，不然整页被撑宽 */
.scene #ed .tk .nm{flex:1 1 110px}
.scene #ed .tk .pl{flex:0 1 auto;max-width:44%}
/* 兜底：任何一处算错宽度都不该让整页横向滚动 —— 底部导航是按文档宽画的，
   页面一宽，三个标签就看着"歪"了（2026-09-23 用户在手机上发现） */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}   /* hidden 会让 body 变成滚动容器，贴底的操作条（.actbar 的 sticky）就失效了；clip 只裁不滚（2026-10-13） */

/* 登录/注册失败的提示：原来跟普通小字一个颜色，手机上根本看不见 */
.msg.no{color:var(--red);font-weight:700}

/* ───── 真题副本（2026-10-07）：石 / 铁 / 钻石 / 末影龙 四种方块色 ───── */
.mk h1{margin:6px 0 12px}
.mk-bar{height:10px;border-radius:5px;background:var(--sunken);border:1px solid var(--rule);overflow:hidden;margin:6px 0 2px}.mk-bar i{display:block;height:100%;background:linear-gradient(90deg,#7ec850,#3f9b2f)}
.mk-papers{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mk-paper{display:flex;flex-direction:column;gap:2px;min-width:150px;padding:10px 12px;border:2px solid #8a8a8a;border-radius:4px;background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:inset -3px -3px 0 rgba(0,0,0,.12)}
.mk-paper span{font-size:13px;color:var(--muted)}.mk-paper.done{border-color:#4fb0a5}
.mk-grp{padding:10px 0;border-top:1px dashed var(--rule)}.mk-grp.locked{opacity:.5}
.mk-facts{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0;font-size:15px}
.mk-layers{display:flex;flex-wrap:wrap;gap:6px}
.mk-chip,.mk-lay{display:inline-block;padding:3px 9px;border-radius:3px;font-size:13px;font-weight:600;color:#fff;box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.mk-chip.stone,.mk-lay.stone{background:#7d7d7d}.mk-chip.iron,.mk-lay.iron{background:#a9a9a9;color:#222}.mk-chip.diamond,.mk-lay.diamond{background:#3fbfb2}.mk-chip.dragon,.mk-lay.dragon{background:#5b2a7a}
.mk-ul{margin:6px 0 0;padding-left:20px;line-height:1.75}.mk-ul li{margin-bottom:6px}
.mk-demo{margin:6px 0 12px;padding:8px 10px;border:1px dashed var(--rule);border-radius:8px;background:var(--sunken)}
.mk-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:8px 10px;margin:0 -4px 8px;background:#3b3b3b;color:#fff;border-radius:6px;box-shadow:inset -3px -3px 0 rgba(0,0,0,.35)}
.mk-top .mk-title{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-clock{font-family:var(--fm);font-size:17px;font-weight:700}.mk-clock.warn{color:#ff7b6b}
.mk-nav{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:10px}
.mk-no{min-width:34px;height:32px;border:2px solid #8a8a8a;border-radius:3px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.mk-no.ok{background:#d9f1d0;border-color:#5aa64a}.mk-no.cur{outline:3px solid var(--sky);outline-offset:1px}
.mk-lay{margin-left:6px}
.mk-q .mk-qh{font-size:18px;margin:4px 0}.mk-stem{font-size:17px;line-height:1.7;margin-bottom:8px}
.mk-img{display:block;max-width:100%;max-height:300px;margin:8px 0;border-radius:4px;background:#fff}
.mk-tb{border-collapse:collapse;margin:8px 0;font-size:15px}.mk-tb td{border:1px solid var(--rule);padding:5px 9px;text-align:center}
.xp{margin:12px 0;padding-top:10px;border-top:1px dashed var(--rule)}.xp:first-child{border-top:0}
.xp-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.xp-l{font-size:16px;line-height:1.6}
.xp-in{font:inherit;font-size:16px;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--sunken);color:var(--ink);width:150px}.xp-in.sm{width:70px}
.xp-ta{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:10px;border:1px solid var(--rule);border-radius:8px;background:var(--sunken);color:var(--ink)}
.xp .opt.on{border-color:var(--leaf);background:var(--leaf-s)}
.segs{display:inline-flex;flex-wrap:wrap;gap:6px}.seg{min-width:44px;min-height:38px;padding:4px 12px;border:2px solid #8a8a8a;border-radius:4px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;cursor:pointer}.seg.on{background:#d9f1d0;border-color:#3f9b2f;font-weight:700}
.xp-svg{display:block;width:100%;height:auto;touch-action:none;background:#fff;border-radius:6px;margin:6px 0;cursor:crosshair}
.abx{display:flex;gap:6px;flex-wrap:wrap}.abx span{display:inline-flex;gap:2px}
.mk-ov{position:fixed;inset:0;z-index:50;background:rgba(30,30,30,.92);display:flex;align-items:center;justify-content:center;padding:16px}.mk-ov[hidden]{display:none}.mk-ov .card{max-width:520px;width:100%}
.mk-score .mk-big{font-size:46px;font-weight:800;line-height:1}.mk-score .mk-big small{font-size:20px;color:var(--muted)}
.mk-up{color:#2f8a2f}.mk-down{color:#c0392b}
.mk-pet{margin-top:8px;padding:8px 10px;border-radius:6px;background:#fff6d6;border:2px solid #e2b23a}
.mk-rq{border-top:1px dashed var(--rule);padding:8px 0}.mk-rq summary{cursor:pointer;font-size:15px}.mk-rq.ok summary b{color:#2f8a2f}
.mk-pr{margin:8px 0;padding:8px 10px;border-radius:6px;background:var(--sunken);font-size:15px}.mk-pr.ok{border-left:4px solid #5aa64a}.mk-pr.half{border-left:4px solid #e2b23a}.mk-pr.no{border-left:4px solid #c0392b}
.mk-why{margin-top:8px;padding:8px 10px;border-radius:6px;background:#eef6ff;font-size:15px;line-height:1.6}
.mk-petgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:12px}
.mk-petcell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;border:2px solid #8a8a8a;border-radius:4px;background:var(--surface);text-align:center}
.mk-petcell .ic img{width:96px;height:96px;object-fit:contain;filter:brightness(0) opacity(.28);user-select:none}.mk-petcell.own .ic img{filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.mk-buddy{width:40px;height:40px;object-fit:contain;vertical-align:middle;margin-right:6px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.25))}.mk-petcell.on{border-color:#3f9b2f;background:#eef8ea}
.opts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.opts-grid .opt{text-align:center}.xp .opt img{max-width:100%;max-height:160px;display:block;margin:4px auto 0}
.mk-inl{height:2.2em;vertical-align:middle;display:inline-block}

/* 方块图鉴（vip 家的知识手册，2026-10-08）：知识点 = 一块像素方块，材质就是掌握程度 木→石→铁→金→钻石 */
.bk-blk{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.2;padding:4px 9px 4px 5px;border-radius:6px;border:1px solid #D3D3CC;background:#F6F4EE;color:var(--ink);cursor:pointer;max-width:100%}
.bk-blk i{width:18px;height:18px;flex:none;image-rendering:pixelated;border:2px solid rgba(0,0,0,.35);box-shadow:inset -3px -3px 0 rgba(0,0,0,.18),inset 3px 3px 0 rgba(255,255,255,.25)}
.bk-blk.none{color:#9A9A90}.bk-blk.none i{border:2px dashed #C4C4BC;background:transparent;box-shadow:none}
.bk-blk.wood i{background:repeating-linear-gradient(90deg,#A0703A 0 4px,#8A5D2E 4px 6px,#B07D45 6px 10px)}
.bk-blk.stone i{background:conic-gradient(from 45deg,#8E8E8E 25%,#7A7A7A 0 50%,#9C9C9C 0 75%,#858585 0) 0 0/6px 6px}
.bk-blk.iron i{background:linear-gradient(#E6E6E6 0 30%,#CFCFCF 30% 36%,#E0E0E0 36% 66%,#C8C8C8 66% 72%,#DADADA 72%)}
.bk-blk.gold i{background:linear-gradient(135deg,#FCE57A 0 25%,#F2C230 25% 60%,#D9A21B 60% 80%,#FFF1A8 80%);border-color:#A9780F}
.bk-blk.diamond i{background:linear-gradient(135deg,#B9FFF6 0 22%,#4FE3D8 22% 58%,#2BB6AE 58% 80%,#D8FFFB 80%);border-color:#1B7F7A}
.bk-blk.gold,.bk-blk.diamond{font-weight:600}
.bk-blk.fog{opacity:.55;border-style:dashed}
.bk-blk.up i{animation:blkUp 1.1s ease-in-out 3}
@keyframes blkUp{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.35);filter:brightness(1.6) drop-shadow(0 0 6px #fff)}}
.bk-legend{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;padding-top:8px;border-top:1px dashed #E2D9C3}
.bk-legend .bk-blk{cursor:default;padding:2px 7px 2px 3px}.bk-legend .bk-blk i{width:12px;height:12px;border-width:1.5px}
.bk-detail{margin-top:10px;padding:10px 12px;border-radius:10px;background:#F2EEE2;border:1px solid #E2D9C3;font-size:14px;line-height:1.7}
.bk-dt{display:flex;align-items:center;gap:8px;margin-bottom:4px}.bk-dt .bk-blk{padding:0;border:0;background:none}.bk-dt .bk-blk i{width:24px;height:24px}
.mc-toast{position:fixed;top:14px;right:14px;z-index:9999;display:flex;flex-direction:column;gap:2px;max-width:min(320px,calc(100vw - 28px));padding:10px 14px;background:#212121;border:3px solid #555;border-radius:4px;color:#fff;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.4);animation:mcIn .35s ease-out}
.mc-toast b{color:#F5D33C}
@keyframes mcIn{from{transform:translateY(-120%);opacity:0}to{transform:none;opacity:1}}

/* ===== 一屏内能操作（2026-10-13 内测家长：Mac 全屏也要往下滑才看到选项；要像网课那样一屏能操作，换什么设备都不出新问题） =====
   ① 配图、示意图按屏幕「高度」缩，宽度跟着比例缩——横屏矮屏、竖屏手机都留得出地方给文字和按钮；
   ② 往下走的按钮放进贴底的操作条（.actbar），内容再长也永远看得见；
   ③ 动手做一步一屏（engine/steps.js），做过的收进「回看」。验收：node scripts/flows-app-fit.js（6 种屏幕逐屏量） */
:root{--vh:1vh;--pich:40;--figh:32}
@supports (height:1dvh){:root{--vh:1dvh}}
@media (max-height:760px){:root{--pich:34;--figh:28}}
@media (max-height:600px){:root{--pich:28;--figh:24}}
.scene .pic:has(img){width:min(100%,calc(var(--vh)*var(--pich)*16/9));margin-left:auto;margin-right:auto}
.scene .fig svg{max-height:calc(var(--vh)*var(--figh))}   /* 宽度仍是 100%，高度到顶后图形自己等比缩在中间（svg 默认 meet） */
.widget svg{max-height:calc(var(--vh)*44)}
.actbar{position:sticky;bottom:0;z-index:6;margin:12px -16px 0;padding:14px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,rgba(241,244,238,0),var(--paper) 12px)}
.dark .actbar{background:linear-gradient(to bottom,rgba(15,20,18,0),var(--paper) 12px)}
.hist{margin:0 0 8px;font-size:14px;color:var(--muted)}
.hist summary{cursor:pointer;font-family:var(--fm);font-size:12px;padding:4px 0}
.hist .hist-b{border-left:3px solid var(--rule);padding-left:10px;margin-top:6px;opacity:.8}
.hist .hist-b .stp{border-bottom:1px dashed var(--rule);padding-bottom:6px;margin-bottom:8px}
@media (max-height:760px){.scene .say{margin:6px 0;padding:8px 10px}.q{padding:10px 12px;margin:8px 0}.opts{gap:6px;margin:8px 0}.opt{padding:9px 12px}}
/* 屏幕数字小键盘（engine/keypad.js）：一排 7–8 个键、两排，手指好按；当前要填的格子描亮框 */
.kp{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin:10px 0;max-width:520px}
.kp-k{font:inherit;font-size:20px;font-weight:600;min-height:44px;border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.kp-k:active{background:var(--leaf-s);border-color:var(--leaf)}
.kp-k.kp-del{grid-column:span 2;font-size:18px}
.kp-k:disabled{opacity:.4}
.q input.kp-on{border-color:var(--sky);box-shadow:0 0 0 2px var(--sky-s)}
@media (max-width:420px){.kp{grid-template-columns:repeat(6,1fr)}.kp-k{font-size:18px;min-height:42px}}
/* 新填法第一次出现的小提示（engine/quiz.js 的 tip） */
.tipnew{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 8px;padding:8px 12px;border-radius:10px;background:var(--sun-s);border:1px solid #E5D3A6;font-size:15px;color:var(--ink)}
.tipnew span{flex:1 1 220px}
/* 低年级「说给我听」的词语卡片（engine/carve.js 的 wordBank） */
.wbank{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.wbank .tiny{flex-basis:100%}
.wb{font:inherit;font-size:18px;min-height:44px;padding:6px 16px;border:1px solid var(--rule);border-radius:99px;background:var(--surface);color:var(--ink);cursor:pointer;touch-action:manipulation}
.wb.used{opacity:.35;cursor:default}
.wb:active{background:var(--leaf-s)}
.bl.kp-on{border-color:var(--sky)!important;box-shadow:0 0 0 2px var(--sky-s)}
/* 自动分页的页码小点（engine/player.js 的 paginate） */
.actbar .pgdots{display:flex;gap:6px;justify-content:center;flex-basis:100%;margin:0 0 6px}
.actbar .pgdots i{width:7px;height:7px;border-radius:50%;background:var(--rule)}.actbar .pgdots i.on{background:var(--sun)}
.kpdock{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kpdock .kp{flex:1 1 300px;margin:0}
.kpdock #ck{flex:0 0 auto}
/* 打遗忘者那页在矮屏上收紧：草坪、怪物卡、血条都压一点，让四个选项和「看做法」不被挤出屏 */
@media (max-height:880px){.rq{height:118px}.rq .zq img{height:62px}.mon{padding:8px 10px;margin-bottom:8px;gap:10px}.mon .av{width:40px;height:40px;font-size:22px}.hp{margin:4px 0 8px}.mute-row{margin:4px 0 2px}}
@media (max-height:760px){.rq{height:92px}.rq .zq img{height:50px}.rq .rift{top:6px;height:80px}.mon{padding:6px 10px;margin-bottom:6px}.mon .av{width:34px;height:34px;font-size:19px}.mon .ln{font-size:13px}.mute-row{font-size:12px}}
@media (max-height:700px){.rq{display:none}.mute-row{margin:2px 0}}
/* 手写演算（engine/ink.js）：考场每题下面的演算区 + 战报回放 */
.ink{margin-top:12px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);overflow:hidden}
.ink-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--rule);background:var(--bg)}
.ink-t{font-weight:700;font-size:14px;margin-right:4px}
.ink-b{font:inherit;font-size:13px;padding:5px 10px;border-radius:9px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer}
.ink-b.on{border-color:var(--leaf);background:var(--leaf-s);font-weight:700}
.ink-paper{background-color:#fffdf7;background-image:linear-gradient(rgba(31,42,68,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(31,42,68,.06) 1px,transparent 1px);background-size:24px 24px}
.ink-paper canvas{display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ink-view .ink-paper canvas{touch-action:auto}
.ink-now{margin-left:auto}
/* 最矮的手机（≤700px 高，如 375×667）：动手做那一步的配图、选项再收一点（2026-10-13 全量量屏：有 4 题的选项差 50 来像素才进屏） */
@media (max-height:700px){:root{--figh:22}.opt{padding:7px 11px;line-height:1.35}.opts{gap:5px;margin:6px 0}.q{padding:8px 10px;margin:6px 0}.scene .say{margin:4px 0;padding:6px 9px}.stp h2{font-size:19px;margin:0 0 6px!important}}
/* 矮笔记本（≤760px 高，如 1280×720）：动手做的配图和选项也收一点（全量量屏：第 62、65 关差 18–51 像素） */
@media (max-height:760px){:root{--figh:24}.opt{padding:8px 12px;line-height:1.4}.opts{gap:6px}}
@media (max-height:700px){:root{--figh:22}}
/* 代码题（2026-10-31 Python 一级进副本）：题面、选项、小问里的 <pre> / <code> 等宽、保留缩进，长行横向滑动不撑破屏幕 */
.mk-stem pre,.xp pre,.opt pre{font-family:var(--fm);font-size:15px;line-height:1.55;white-space:pre;overflow-x:auto;background:#f6f5ef;border:1px solid var(--rule);border-radius:8px;padding:8px 10px;margin:6px 0;text-align:left;max-width:100%}
.mk-stem code,.xp code,.opt code{font-family:var(--fm);background:#f3f1ea;border-radius:4px;padding:0 3px}
.opt pre{margin:2px 0;background:transparent;border:0;padding:0}