*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--font,"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif);background:var(--bg);color:var(--ink);font-size:16px;line-height:1.65;overflow:hidden;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:760px;margin:0 auto;position:relative}
#top{display:flex;align-items:center;gap:6px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));background:var(--top);border-bottom:1px solid var(--line);z-index:5}
.ib{width:38px;height:38px;border-radius:12px;font-size:19px;background:var(--chip);flex:none}
.ttl{flex:1;min-width:0;line-height:1.2}.ttl b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ttl small{font-size:11px;color:var(--mut)}
#hud{font-size:11px;flex:none;text-align:right;line-height:1.25}
.ltab{font-size:12px;padding:6px 9px;border-radius:10px;background:var(--chip);color:var(--mut);font-weight:700;flex:none}.ltab.on{background:var(--acc);color:var(--onacc)}
#steps{display:flex;gap:5px;padding:7px 10px;overflow-x:auto;scrollbar-width:none;background:var(--top)}#steps::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:12.5px;padding:5px 11px;border-radius:20px;background:var(--chip);color:var(--mut);font-weight:700}.chip.on{background:var(--acc);color:var(--onacc)}.chip.ok:not(.on){color:var(--ok)}
#prog{height:3px;background:var(--line)}#prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .4s}
#main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 12px 18px;overscroll-behavior:contain}
#teacher{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px}
#avatar{width:104px;height:122px;flex:none;position:relative;transition:width .35s,height .35s}
#main.storymode #avatar{width:138px;height:162px}
#avatar svg{width:100%;height:100%;overflow:visible}
#bubble{flex:1;min-width:0;background:var(--bubble);border:1.5px solid var(--bline);border-radius:18px;border-top-left-radius:4px;padding:9px 12px 7px;position:relative;box-shadow:var(--shadow)}
#bubble.pop{animation:bpop .35s ease}
@keyframes bpop{0%{transform:scale(.97);opacity:.6}100%{transform:none;opacity:1}}
.nm{font-size:11.5px;font-weight:800;color:var(--acc);letter-spacing:.5px}
#say{font-size:15px;line-height:1.7;max-height:34vh;overflow-y:auto}
#say .sen{transition:background .2s,color .2s;border-radius:4px}#say .sen.on{background:var(--hl);color:var(--hlink)}
.bt{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.mini{font-size:12px;padding:3px 10px;border-radius:14px;background:var(--chip);font-weight:700}
.pichip{font-size:10.5px;padding:2px 8px;border-radius:10px;border:1px solid var(--line);color:var(--mut);white-space:nowrap}
#content{padding-bottom:6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow);animation:cin .35s ease}
@keyframes cin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.card.center{text-align:center}
.card h2{font-size:19px;line-height:1.35;margin:6px 0 10px}.card h3{font-size:16px;margin:6px 0 8px}.card h4{font-size:14px;margin:12px 0 4px;color:var(--acc)}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pill{font-size:11.5px;padding:3px 10px;border-radius:12px;background:var(--chip);font-weight:700}.pill.t2{color:var(--acc)}.pill.t3{color:var(--ok)}.pill.gold{background:var(--gold);color:#3a2600}
.fic{font-size:10.5px;padding:2px 8px;border-radius:10px;border:1px dashed var(--mut);color:var(--mut)}
.ill{margin:6px 0;color:var(--mut)}.ill svg{width:100%;height:auto;max-height:200px;display:block}
.dots{display:flex;gap:6px;justify-content:center;margin-top:6px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--acc);transform:scale(1.3)}.dots i.ok{background:var(--acc2)}
.goals{padding-left:20px;font-size:14.5px}.goals li{margin:3px 0}
.flow{display:flex;flex-wrap:wrap;gap:5px}.flow span{font-size:12.5px;padding:3px 9px;border-radius:10px;background:var(--chip)}
.kv{background:var(--soft);border-left:3px solid var(--acc);border-radius:10px;padding:8px 10px;margin:8px 0;font-size:14px}.kv b{display:block;font-size:12.5px;color:var(--acc);margin-bottom:2px}
.kv.next{border-left-color:var(--gold)}
.quote{font-weight:800;font-size:16px;text-align:center;padding:12px;border-radius:14px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--onacc);margin:8px 0}
.src{font-size:11px;color:var(--mut);margin-top:8px}
.body{font-size:14.5px}
.tb{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0}.tb th,.tb td{border:1px solid var(--line);padding:5px 6px;vertical-align:top;text-align:left}.tb th{background:var(--soft);font-size:12px}
.tb.sch th.s1{color:#14b8a6}.tb.sch th.s2{color:#a78bfa}.tb.sch th.s3{color:#fb7185}
.pyr{display:flex;flex-direction:column;gap:4px;align-items:center;margin:6px 0}
.pl{width:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;border-radius:9px;padding:6px 10px;color:#fff;font-size:12.5px}
.pl b{font-size:13.5px}.pl span{grid-column:1;opacity:.92}.pl i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-weight:700;font-size:12px;background:rgba(0,0,0,.2);padding:2px 8px;border-radius:8px}
.pl.l4{width:72%;background:#1e40af}.pl.l3{width:79%;background:#2563eb}.pl.l2{width:86%;background:#3b82f6}.pl.l1{width:93%;background:#4f8ff7}.pl.l0{background:#6aa1f8}
.ladder{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.fr{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:7px 10px;border-radius:9px;color:#fff;font-size:12.5px}
.fr b{font-size:13.5px;white-space:nowrap}.fr i{font-style:normal;font-size:11px;background:rgba(0,0,0,.22);padding:1px 7px;border-radius:7px}
.f1{background:#d97706}.f2{background:#ea7a0c}.f3{background:#ec6a12}.f4{background:#e85a16}.f5{background:#d9480f}.f6{background:#b8360a}
.cL{font-style:normal;font-weight:800;color:#fff;background:#2563eb;padding:0 6px;border-radius:6px;font-size:12px}.cF{font-style:normal;font-weight:800;color:#fff;background:#ea580c;padding:0 7px;border-radius:6px;font-size:12px;margin-right:6px}
.chipL,.chipF,.chipP{font-size:11px;padding:2px 8px;border-radius:10px;color:#fff;font-weight:700}.chipL{background:#2563eb}.chipF{background:#ea580c}.chipP{background:linear-gradient(90deg,#0d9488,#7c3aed,#e11d48)}
.evo{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}.evo span{font-size:12.5px;padding:5px 9px;border-radius:10px;background:var(--soft);border:1px solid var(--line);font-weight:700;position:relative}.evo span small{display:block;font-weight:400;font-size:10.5px;color:var(--mut)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0}
.cardlet{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:8px 9px;font-size:12.5px}.cardlet b{font-size:14px}.cardlet p{color:var(--mut);font-size:11.5px;margin:2px 0}.cardlet ul{padding-left:15px}
.f1c{border-top:4px solid #d97706}.f2c{border-top:4px solid #ea7a0c}.f3c{border-top:4px solid #ec6a12}.f4c{border-top:4px solid #e85a16}.f5c{border-top:4px solid #d9480f}.f6c{border-top:4px solid #b8360a}
.rule6{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}.rule6 div{background:var(--soft);border-radius:10px;padding:7px 8px;font-size:13px}
.three-q{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}.three-q span{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:8px 6px;text-align:center;font-weight:800;font-size:13px}.three-q small{display:block;font-weight:400;color:var(--mut);font-size:11px}
.four{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}.four div{background:var(--soft);border-radius:10px;padding:7px 8px;font-size:12.5px}.four b{color:var(--acc);font-size:14px}.four code{font-size:11px}
.tabs{display:flex;gap:4px;margin:8px 0 0}.tabs button{flex:1;padding:7px 4px;border-radius:10px 10px 0 0;background:var(--chip);font-size:13px;font-weight:700;color:var(--mut)}.tabs button.on{background:#0f172a;color:#7dd3fc}
.code{background:#0f172a;color:#e2e8f0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.55;padding:10px;border-radius:0 0 12px 12px;overflow-x:auto;white-space:pre}.code.sm{border-radius:12px;white-space:pre-wrap;font-size:12.5px}.code.hide{display:none}
.exbox{margin-top:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 16px;border-radius:14px;background:var(--chip);font-weight:800;font-size:15px;transition:transform .12s;min-height:44px}
.btn:active{transform:scale(.96)}.btn.gold{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--onacc);box-shadow:0 4px 14px var(--glow)}.btn.ghost{background:transparent;border:1.5px solid var(--line)}.btn.big{font-size:17px;padding:14px 22px}.btn.dice{background:var(--soft);border:1.5px dashed var(--acc);color:var(--acc);font-size:14px}
.exout .ex{margin-top:8px;background:var(--hl);color:var(--hlink);border-radius:12px;padding:9px 11px;font-size:14px}
.pop{animation:bpop .35s}
.col{display:flex;flex-direction:column;gap:8px;margin-top:12px}
#bar{display:flex;gap:8px;padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:var(--top);border-top:1px solid var(--line);z-index:5}
.nav{flex:1;padding:11px 6px;border-radius:14px;background:var(--chip);font-weight:800;font-size:15px;min-height:46px}.nav.sq{flex:0 0 52px;font-size:19px}.nav.pri{flex:1.4;background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--onacc)}
.nav:active{transform:scale(.97)}
/* 練習 */
.deal{text-align:center;padding:14px 10px;margin:10px 0;border-radius:16px;background:var(--soft);border:2px solid var(--acc)}.deal small{display:block;color:var(--mut);font-size:12px}.deal b{font-size:19px}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:7px}.slots.three{grid-template-columns:1fr}
.slot{padding:11px 6px;border-radius:12px;background:var(--chip);font-weight:800;font-size:14.5px;border:2px solid transparent;min-height:46px}
.slots.L .slot{border-color:#3b82f655}.slots.F .slot{border-color:#ea580c55}
.slot.s1{border-color:#14b8a6}.slot.s2{border-color:#a78bfa}.slot.s3{border-color:#fb7185}
.slot.right,.opt.right{background:var(--ok)!important;color:#fff!important;border-color:var(--ok)!important;animation:bpop .4s}
.slot.bad,.opt.bad{background:var(--no)!important;color:#fff!important;border-color:var(--no)!important;animation:shake .4s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake .4s}
.fb{margin-top:10px;border-radius:12px;padding:9px 11px;font-weight:800;font-size:15px}.fb small{display:block;font-weight:400;font-size:13.5px;margin-top:4px;line-height:1.6}.fb.g{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}.fb.r{background:color-mix(in srgb,var(--no) 14%,transparent);color:var(--no)}
.fb small,.fb .ex3{color:var(--ink)}
.ex3{margin-top:8px;font-weight:400;font-size:13.5px}.ex3 b{display:block;font-size:13px}.ex3 span{display:block}
#pfb .btn,#ofb .btn,#qfb .btn{width:100%;margin-top:8px}
.scorepair{display:flex;gap:10px;justify-content:center;margin:10px 0}.scorepair div{background:var(--soft);border-radius:14px;padding:10px 16px}.scorepair b{font-size:24px;display:block}
.ostep{display:flex;gap:4px;margin-bottom:8px}.ostep span{flex:1;text-align:center;font-size:11.5px;padding:4px 2px;border-radius:9px;background:var(--chip);color:var(--mut);font-weight:700}.ostep span.on{background:var(--acc);color:var(--onacc)}.ostep span.ok{color:var(--ok)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.tchip{padding:8px 12px;border-radius:20px;background:var(--chip);font-weight:700;font-size:14px;border:2px solid transparent}.tchip.sel{border-color:var(--acc);background:var(--soft);color:var(--acc)}.tchip.okc{border-color:var(--ok)}.tchip.noc.sel{border-color:var(--no);color:var(--no)}.tchip.used{opacity:.3}
.chainbox{min-height:54px;background:var(--soft);border-radius:12px;padding:8px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:13px}.chainbox .node{background:var(--acc);color:var(--onacc);padding:4px 9px;border-radius:9px;font-weight:700;animation:bpop .3s}.chainbox .rel{color:var(--acc2);font-weight:800;font-size:12px}.ph{color:var(--mut)}
.afield{margin:8px 0}.afield b{display:block;font-size:13px;color:var(--acc);margin-bottom:4px}
/* 測驗 */
.lvbar{display:flex;gap:4px;margin-bottom:8px}.lvbar span{flex:1;text-align:center;font-size:11px;font-weight:800;padding:4px 0;border-radius:8px;background:var(--chip);color:var(--mut)}.lvbar span.now{background:var(--acc);color:var(--onacc);transform:scale(1.08)}.lvbar span.g{background:var(--ok);color:#fff}.lvbar span.r{background:var(--no);color:#fff}
.sampbar{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:800;margin-bottom:8px;position:relative;background:var(--chip);border-radius:10px;padding:5px 10px;overflow:hidden}.sampbar i{position:absolute;left:0;top:0;bottom:0;background:var(--hl);z-index:0}.sampbar span,.sampbar b{position:relative;z-index:1}
.combo{font-size:13px;font-weight:900;color:#ff6b3d;animation:bpop .4s}
.stem{font-size:16.5px;line-height:1.55}
.scene{background:var(--soft);border:1.5px dashed var(--acc);border-radius:12px;padding:10px 11px;font-size:15px;font-weight:700;margin:6px 0 10px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:9px;align-items:center;text-align:left;padding:11px 12px;border-radius:14px;background:var(--chip);border:2px solid transparent;font-size:15px;font-weight:600;min-height:48px;line-height:1.45}.opt em{flex:none;width:26px;height:26px;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-style:normal;font-weight:900;font-size:13px;color:var(--acc)}
.opt.sm{font-size:13.5px;padding:8px 10px;min-height:40px;width:100%;margin:3px 0}.opt.sel{border-color:var(--acc);background:var(--soft)}
.opt:disabled{opacity:1}
.phases{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0;text-align:left}.phases div{background:var(--soft);border-radius:12px;padding:9px}.phases b{color:var(--acc);display:block}.phases span{font-weight:800;display:block}.phases small{font-size:11.5px;color:var(--mut)}
.ladder6{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}.ladder6 span{padding:7px 4px;border-radius:10px;font-weight:900;color:#fff;font-size:13px}.ladder6 span small{display:block;font-weight:400;font-size:10.5px}.ladder6 .g{background:var(--ok)}.ladder6 .r{background:var(--no)}
.ring{--p:0;width:130px;height:130px;border-radius:50%;margin:6px auto;display:grid;place-items:center;align-content:center;background:conic-gradient(var(--acc) calc(var(--p)*1%),var(--chip) 0);position:relative}.ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--card)}.ring b,.ring small{position:relative}.ring b{font-size:38px;line-height:1}
.wrongs{text-align:left;margin:8px 0;background:var(--soft);border-radius:12px;padding:8px 10px}.wrongs summary{font-weight:800;cursor:pointer}.wq{border-top:1px solid var(--line);padding:6px 0;font-size:13px}.wq b,.wq i,.wq span{display:block}.wq i{color:var(--mut);font-style:normal}.wq span{color:var(--ok);font-weight:700}
.pts{padding-left:20px;font-size:14.5px}.pts li{margin:4px 0}
textarea{width:100%;min-height:80px;border-radius:12px;border:1.5px solid var(--line);background:var(--soft);color:var(--ink);padding:9px;font:inherit;font-size:14.5px}
.flip{position:relative;min-height:170px;margin:12px 0;perspective:900px;cursor:pointer}.flip>div{position:absolute;inset:0;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s}
.fr0{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--onacc)}.fr0 b{font-size:21px}.fr0 small{opacity:.8}.fr1{background:var(--soft);border:2px solid var(--acc);transform:rotateY(180deg)}.fr1 b{font-size:16px;line-height:1.6}
.flip.on .fr0{transform:rotateY(180deg)}.flip.on .fr1{transform:rotateY(360deg)}
.self{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.end{text-align:center}.bigemo{font-size:56px}.note{background:var(--soft);border-radius:12px;padding:10px;margin:10px 0}
/* 浮層 */
#splash{position:fixed;inset:0;z-index:40;display:none;background:var(--splash);overflow-y:auto}#splash.on{display:block}
.spin{max-width:520px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 22px 30px;text-align:center;position:relative}
.savatar{width:210px;height:246px;margin:0 auto;animation:float 4s ease-in-out infinite}.savatar svg{width:100%;height:100%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.spin h1{font-size:22px;line-height:1.35;margin:8px 0 4px}.sub{color:var(--mut);font-size:14px}.hint{font-size:12px;color:var(--mut);margin-top:14px}.ver{display:block;font-size:11px;color:var(--mut);margin-top:6px}
#drawer{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.45);display:none}#drawer.on{display:block}
.dpanel{position:absolute;left:0;top:0;bottom:0;width:min(88vw,380px);background:var(--card);overflow-y:auto;padding:12px;padding-top:max(12px,env(safe-area-inset-top));animation:slin .25s}
@keyframes slin{from{transform:translateX(-100%)}to{transform:none}}
.dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.dl{border-top:1px solid var(--line);padding:10px 0}.dl>b{display:block;font-size:13.5px;margin-bottom:5px}
.dstep{display:inline-block;margin:3px 3px 0 0;padding:6px 10px;border-radius:10px;background:var(--chip);font-size:13px;font-weight:700}.dstep.on{background:var(--acc);color:var(--onacc)}.dstep.warn{color:var(--no)}
.dl label{display:block;font-size:13px;margin:6px 0}.dl select,.dl input[type=range]{width:100%;margin-top:3px}.dl select{padding:7px;border-radius:9px;background:var(--soft);color:var(--ink);border:1px solid var(--line)}.tg{display:flex!important;gap:6px;align-items:center}.tip{font-size:11.5px;color:var(--mut);margin-top:8px;line-height:1.6}.stat{font-size:12px;color:var(--mut);margin-top:4px}
.gl{font-size:12.5px;margin:3px 0}.gl em{font-style:normal;font-weight:800;color:var(--acc);margin-right:6px}
#modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;padding:16px}#modal.on{display:flex}
.mbox{background:var(--card);border-radius:22px;padding:18px;max-width:420px;width:100%;max-height:88vh;overflow-y:auto;text-align:center;animation:mpop .45s cubic-bezier(.2,1.4,.4,1);border:2px solid var(--acc)}
@keyframes mpop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.mbox h3{font-size:19px;margin:6px 0}.mbox p{font-size:14px;color:var(--mut)}.mbox .pts{text-align:left}.mbtns{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.reward .rk{font-size:12px;font-weight:800;color:var(--acc);letter-spacing:1px}.rart{margin:6px auto;width:220px;height:220px;animation:spinin 1s ease}.rart svg{width:100%;height:100%}
@keyframes spinin{0%{transform:scale(.3) rotate(-25deg);opacity:0}60%{transform:scale(1.08) rotate(4deg);opacity:1}100%{transform:none}}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.gi{background:var(--soft);border-radius:12px;padding:6px}.gi svg{width:100%;height:auto;aspect-ratio:1}.gi small{font-size:10.5px;display:block;line-height:1.3}.gi.lock{opacity:.5}.lk{font-size:30px;aspect-ratio:1;display:grid;place-items:center}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
.floaty{position:fixed;left:50%;top:40%;transform:translate(-50%,0);font-size:24px;font-weight:900;color:var(--gold);text-shadow:0 2px 10px rgba(0,0,0,.4);z-index:61;pointer-events:none;animation:fup 1.3s forwards}
@keyframes fup{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}20%{opacity:1;transform:translate(-50%,0) scale(1.15)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}
/* 角色動畫 */
#avatar .eyes,.savatar .eyes{transform-origin:50% 44%;animation:blink 4.6s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
.mouth-o{opacity:0}.talk .mouth-o{animation:talkm .2s infinite alternate}.talk .mouth-c{opacity:0}
@keyframes talkm{from{opacity:1;transform:scaleY(.35)}to{opacity:1;transform:scaleY(1)}}
.mouth-o{transform-box:fill-box;transform-origin:center}
.happy-eyes{opacity:0}.happy .eyes,.wink .eye-r{opacity:0}.happy .happy-eyes{opacity:1}.wink .happy-eyes .he-l{opacity:0}.wink .happy-eyes{opacity:1}
.wow .mouth-c{opacity:0}.wow .mouth-o{opacity:1;animation:none;transform:scale(.8)}
#avatar svg .body-all{animation:breathe 3.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012) translateY(-1px)}}
#avatar.happy svg,#avatar.wink svg{animation:hop .5s ease}
@keyframes hop{30%{transform:translateY(-8px)}}
@media (min-width:700px){#avatar{width:130px;height:152px}#main.storymode #avatar{width:170px;height:200px}#say{font-size:16px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}

.card.still{animation:none}

.vctl{display:flex;gap:4px;flex-wrap:wrap}.mini.spd{color:var(--acc);min-width:58px}
.seg{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:6px 0}.seg span{font-size:13px;width:100%}.seg button{flex:1;padding:8px 4px;border-radius:10px;background:var(--chip);font-weight:800;font-size:13px}.seg button.on{background:var(--acc);color:var(--onacc)}
.pron{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-top:8px}.pr{display:flex;flex-direction:column;align-items:flex-start;padding:6px 8px;border-radius:9px;background:var(--soft);text-align:left}.pr b{font-size:14px}.pr span{font-size:11.5px;color:var(--mut)}.pr::after{content:'▶';position:absolute}
.pr{position:relative}.pr::after{right:8px;top:8px;color:var(--acc);font-size:11px}

.revbar{background:var(--hl);color:var(--hlink);border-radius:10px;padding:5px 10px;font-size:12.5px;font-weight:800;margin-bottom:8px}
.lvbar span.now.g,.lvbar span.now.r{outline:2px solid var(--acc);outline-offset:1px}

#demobar{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12.5px;font-weight:800;padding:5px 8px;background:linear-gradient(90deg,#ff4d6d,#ff9f43);color:#fff}#demobar button{background:rgba(0,0,0,.25);color:#fff;border-radius:9px;padding:3px 9px;font-weight:800;font-size:12px}
.finger{position:fixed;z-index:70;font-size:30px;pointer-events:none;animation:press .7s ease}@keyframes press{0%{transform:translate(18px,26px) scale(1.2);opacity:0}40%{opacity:1;transform:none}60%{transform:scale(.85)}100%{transform:scale(1);opacity:0}}
.demonote{margin-top:12px;font-size:13px;background:var(--soft);border:1.5px dashed var(--acc);border-radius:12px;padding:9px;text-align:left}
.safe{margin-top:10px;font-size:12.5px;font-weight:800;color:#0f7a43;background:#d9f7e7;border:1.5px solid #2fbf71;border-radius:20px;padding:5px 14px}
.expnote{margin-top:8px;font-size:12.5px;font-weight:800;color:var(--acc)}
#expchip{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(70px + env(safe-area-inset-bottom));z-index:8;font-size:11px;font-weight:800;background:rgba(0,0,0,.65);color:#ffd27a;padding:3px 10px;border-radius:12px;pointer-events:none;white-space:nowrap}
.legal{min-height:100vh;padding:max(20px,env(safe-area-inset-top)) 16px 30px;background:var(--bg);overflow-y:auto;height:100%}.lbox{max-width:620px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;font-size:14.5px;line-height:1.7}.lbox h2{font-size:20px;margin-bottom:8px}.lbox h4{margin:12px 0 4px;color:var(--acc)}.terms{padding-left:20px}.terms li{margin:6px 0}.agree{display:flex;gap:8px;align-items:center;margin:14px 0;font-weight:800}.lbox .btn{width:100%}.lbox .btn:disabled{opacity:.45}
body:has(.legal){overflow:auto}
.safelist{text-align:left;font-size:14px}