/* v4.8 item7: learner font (SIL Andika, OFL, bundled offline): capital I has serifs, lowercase l has a tail */
@font-face{font-family:Andika;src:url(fonts/Andika-Regular.ttf) format("truetype");font-weight:400 600;font-display:swap}
@font-face{font-family:Andika;src:url(fonts/Andika-Bold.ttf) format("truetype");font-weight:700 900;font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#1b2a3a;overflow:hidden;user-select:none;font-family:Andika,"Arial Rounded MT Bold","Microsoft JhengHei","PingFang TC",sans-serif;touch-action:none}
#cv{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);image-rendering:pixelated;background:#5cc2ff}
#select{position:fixed;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#5cc2ff,#c9f0ff 70%,#4cc94c 70%,#4cc94c 73%,#b8693a 73%);z-index:40}
#select.on{display:flex}
h1{font-size:clamp(34px,6vw,72px);color:#fff;text-shadow:0 5px 0 #e2462e,0 8px 12px #0005;margin:.1em;text-align:center;line-height:1.05}h1 span{font-size:.6em}
.hero-pick{display:flex;gap:30px;margin:10px}
.hero{background:#fff;border-radius:24px;padding:14px 26px;text-align:center;cursor:pointer;border:6px solid transparent;box-shadow:0 8px 0 #0002;transition:.15s}
.hero.sel{border-color:#ffcc00;transform:scale(1.08)}.hero canvas{image-rendering:pixelated;width:96px;height:120px;display:block;margin:auto}
.hero b{display:block;font-size:24px}.hero small{color:#777}
.keys{background:#fffc;padding:6px 14px;border-radius:12px;font-size:15px}
.btn{font:inherit;font-size:22px;font-weight:bold;border:none;border-radius:16px;padding:12px 24px;margin:6px;cursor:pointer;color:#fff;background:#ff7a1a;box-shadow:0 6px 0 #b84f00}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #b84f00}.btn.green{background:#2fbf4a;box-shadow:0 6px 0 #1b7a2c}.btn.blue{background:#2f8cff;box-shadow:0 6px 0 #1a56a8}.btn.sm{font-size:17px;padding:8px 14px}
.bar{position:fixed;top:40px;right:10px;display:none;gap:6px;z-index:20;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}.bar.on{display:flex}
.ibtn{font-size:24px;background:#fff;border:none;border-radius:50%;width:48px;height:48px;cursor:pointer;box-shadow:0 4px 0 #0003;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
#nodeinfo{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);background:#fffe;border-radius:18px;padding:8px 20px;font-size:20px;text-align:center;box-shadow:0 5px 0 #0003;max-width:92vw}#nodeinfo span{color:#777;font-size:16px}#nodeinfo small{color:#e2462e}
#touch{display:none}
body.touch #touch{display:block}
#touch button{position:fixed;bottom:18px;width:84px;height:84px;border-radius:50%;border:4px solid #fff9;background:#0005;color:#fff;font-size:34px;z-index:30;touch-action:none}
#touch .lr button:first-child{left:18px}#touch .lr button:last-child{left:116px}
#touch .ud .dn{width:70px;height:70px;font-size:24px;bottom:116px;left:67px;line-height:1}#touch .ud .dn small{display:block;font-size:10px}
#touch .jb{right:24px;width:110px;height:110px;background:#ff5a5aaa;font-size:36px;line-height:1}#touch .jb small{font-size:14px}
#touch button.down{background:#fff8;transform:scale(.94)}
#ov{position:fixed;top:0;right:0;bottom:0;left:0;background:#0008;display:none;align-items:center;justify-content:center;z-index:60}#ov.on{display:flex}
#ov .box{background:#fff;border-radius:28px;padding:18px 28px;text-align:center;width:min(820px,94vw);max-height:94vh;overflow:auto;animation:pop .35s;box-shadow:0 10px 0 #0003}
@keyframes pop{from{transform:scale(.4)}}
.tag{display:inline-block;background:#ffe08a;border-radius:20px;padding:4px 14px;font-weight:bold}
.big-emoji{font-size:96px;line-height:1.1;cursor:pointer}.word{font-size:52px;font-weight:bold;color:#2b59c3}.word small{font-size:20px;color:#999}
.zh{font-size:22px;color:#555;margin:4px}.sent{font-size:24px;margin:6px}
.item{font-size:110px;animation:spin .8s}@keyframes spin{from{transform:rotate(-40deg) scale(.2)}}
.slots{display:flex;justify-content:center;gap:8px;margin:12px;min-height:70px}.slots.win .slot{color:#2fbf4a;border-color:#2fbf4a}
.slot{min-width:56px;height:66px;border-bottom:6px solid #2b59c3;font-size:40px;font-weight:bold;display:flex;align-items:center;justify-content:center;padding:0 6px}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tile{font:inherit;font-size:36px;font-weight:bold;min-width:70px;height:72px;padding:0 12px;border:none;border-radius:12px;background:#3fb6c8;color:#fff;box-shadow:0 6px 0 #1f7a8a;cursor:pointer}
.tile.used{visibility:hidden}.tile.glow{background:#7dff8a;color:#1b5e20;animation:gl .6s infinite alternate}@keyframes gl{to{transform:scale(1.1)}}
.shake{animation:shake .4s}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.q{font-size:30px;margin:12px 0}.blank{display:inline-block;min-width:110px;border-bottom:4px solid #333;color:#2fbf4a}
.opts{display:flex;justify-content:center;gap:24px;margin-top:16px}
.opt{font:inherit;font-size:34px;font-weight:bold;padding:16px 30px;border:none;border-radius:14px;background:#ffb52e;color:#5a2d00;box-shadow:0 7px 0 #c47a00;cursor:pointer}.opt.right{background:#2fbf4a;color:#fff}.opt.off{opacity:.35}
.progress{display:flex;gap:6px;justify-content:center;margin-bottom:6px}.progress i{width:16px;height:16px;border-radius:50%;background:#ddd}.progress i.d{background:#2fbf4a}.progress i.c{background:#ffcc00}
.grid{display:grid;grid-template-columns:repeat(auto-fill,100px);gap:10px;justify-content:center;margin:12px 0}
.cell{background:#fff6d6;border-radius:14px;height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:46px;box-shadow:0 4px 0 #0002}.cell small{font-size:13px}.cell.lock{opacity:.35;filter:grayscale(1)}
.conf{position:fixed;width:12px;height:16px;z-index:99;pointer-events:none;top:-20px;animation:fall linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.diffs{display:flex;gap:10px;align-items:center;background:#fffc;padding:8px 14px;border-radius:16px;margin:6px}
.diff{font:inherit;font-size:18px;font-weight:bold;border:4px solid transparent;border-radius:14px;padding:6px 14px;background:#fff;cursor:pointer;box-shadow:0 4px 0 #0002}.diff small{font-weight:normal;color:#777;font-size:12px}.diff.sel{border-color:#ff7a1a;background:#fff3e0}
.ibtn.wide{width:auto;border-radius:24px;padding:0 12px;font-size:17px;font-weight:bold}
.spacehint{margin-top:8px;font-size:13px;color:#999}.nav{margin-top:6px}
.def{font-size:20px;color:#2b59c3;background:#eef4ff;border-radius:12px;padding:6px 10px;margin:6px auto;max-width:640px}
.fam,.cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}.chip{font:inherit;font-size:24px;border:none;border-radius:12px;background:#ffe08a;padding:8px 14px;cursor:pointer;box-shadow:0 4px 0 #c9a000}.chip.big{font-size:22px}.chip b{color:#e2462e}
.catbox{background:#f4f8ff;border-radius:14px;padding:8px;min-width:150px;display:flex;flex-direction:column;gap:6px;font-size:18px}.catbox p{margin:2px;font-size:17px;cursor:pointer}
.hl{color:#e2462e;text-decoration:underline}.sent[data-say]{cursor:pointer}.story{font-size:28px}
.wtile{display:inline-block;background:#e3f2fd;border-radius:8px;padding:4px 10px;margin:2px;font-size:24px}.wtile.fixed{background:#ddd}
.sentline{min-height:56px;margin:12px;font-size:24px;border-bottom:4px dashed #2b59c3;padding:6px}.sentline.win .wtile{background:#b9f6ca}.dot{font-size:30px}
.tile.wt{font-size:26px;height:58px;min-width:60px}
.opts.row{flex-wrap:wrap;gap:10px}.opt.big{font-size:56px;padding:10px 26px}.opt.sm{font-size:19px;padding:12px 16px;max-width:300px;text-align:left}.opts{flex-wrap:wrap}
.opt.wordopt{font-size:26px;padding:10px 16px;background:#e3f2fd;color:#1a3a6a;box-shadow:0 5px 0 #90b4e0}.opt.glow{animation:gl .6s infinite alternate;outline:4px solid #7dff8a}
.mini{font-size:16px;opacity:.8}.bank{display:flex;gap:8px;justify-content:center;border:3px solid #333;border-radius:8px;padding:6px;margin:6px auto;max-width:600px}.bank span{font-size:20px;padding:2px 10px}
.storybox{text-align:left;background:#f6fff0;border-radius:12px;padding:6px 12px;margin:6px 0}.storybox p{margin:4px;font-size:17px}
.match{display:flex;justify-content:center;align-items:stretch;gap:0;margin:10px 0}.match .col{display:flex;flex-direction:column;gap:10px;justify-content:space-around}#lines{width:120px;min-height:200px}
.mL,.mR{font:inherit;font-size:20px;border:none;border-radius:12px;padding:10px 14px;background:#ffe08a;cursor:pointer;box-shadow:0 4px 0 #c9a000;text-align:left}.mR{background:#e3f2fd;box-shadow:0 4px 0 #90b4e0;max-width:330px;font-size:16px}.mL.sel{outline:4px solid #ff7a1a}.mL.right,.mR.right{background:#b9f6ca;box-shadow:0 4px 0 #2fbf4a}
.big-emoji.sm{font-size:70px}
/* ===== v4 additions ===== */
#nodeinfo{display:none}
.ptitle{font-size:22px;font-weight:bold;color:#fff;text-shadow:0 2px 0 #0005;margin:4px}
.plist{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:92vw;margin:4px}
.pcard{font:inherit;display:flex;flex-direction:column;align-items:center;min-width:110px;padding:8px 12px;border-radius:16px;border:4px solid transparent;background:#fff;cursor:pointer;box-shadow:0 4px 0 #0002}
.pcard.sel{border-color:#ff7a1a;background:#fff3e0}.pcard b{font-size:18px}.pcard small{color:#777}.pav{font-size:34px}.pcard.add{background:#e9ffe9}
.newp{display:none;gap:8px;align-items:center;background:#fffc;padding:8px 12px;border-radius:16px;margin:4px}.newp.on{display:flex}
.newp input{font:inherit;font-size:20px;padding:6px 10px;border-radius:10px;border:3px solid #ccc;width:170px}
.gpick{font:inherit;font-size:18px;border:3px solid transparent;border-radius:12px;padding:6px 10px;background:#fff;cursor:pointer}.gpick.sel{border-color:#2f8cff;background:#e6f0ff}
#goBtn:disabled{opacity:.5}
.btn.orange{background:#ff7a1a}.nav.col{flex-direction:column;align-items:stretch}
b.neg,.neg{background:#ff4757;color:#fff;border-radius:6px;padding:0 4px;text-decoration:underline wavy #fff3}
.vw{display:inline-block;min-width:1.2em;border-bottom:4px solid #ff7a1a;color:#ff7a1a;font-weight:bold}
.pair{display:flex;gap:16px;justify-content:center;font-size:26px;margin:6px}.pair>*{background:#fff6d8;border-radius:12px;padding:4px 14px}
.evbox{display:none;background:#fff8d6;border-left:6px solid #ffb400;border-radius:10px;padding:8px 12px;margin:8px 0;font-size:18px;text-align:left}
.abcbox{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.framebox{background:#f3f9ff;border:3px dashed #8bbcff;border-radius:14px;padding:10px;margin:8px 0;font-size:22px;line-height:1.8}
.checklist{font-size:15px;color:#333;background:#f6f6f6;border-radius:10px;padding:6px 10px;margin:6px 0}
.tips{font-size:15px;color:#555;background:#eefbe9;border-radius:10px;padding:6px 10px;margin:6px 0}
.tryrow{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0;font-size:16px}
.bank{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:8px 0}.bank.big .bw{font-size:22px}
.bw{font:inherit;font-size:18px;padding:6px 12px;border-radius:10px;border:3px solid #8bbcff;background:#fff;cursor:pointer}.bw.sel{background:#dfeeff;border-color:#2f8cff}.bw.used{opacity:1;background:#eef7ee;border-color:#a8d5a8;color:#4b6b4b;position:relative}.bw.used::after{content:"✓";font-size:.75em;color:#3a9a3a;margin-left:4px}
.opt.chk.sel{background:#dfffe4;border-color:#2fbf4a}.opts.col{flex-direction:column;align-items:stretch}
.opt.fo{font-size:18px}.opt.tfb{min-width:140px;font-size:22px}
.chip.sortit{cursor:grab}.catbox{min-height:70px;border:3px dashed #aaa;border-radius:14px;padding:8px;margin:6px;flex:1}.catbox.one{border-color:#2f8cff}.catbox.many{border-color:#ff7a1a}.catbox.drop{background:#fffbe6}.got{display:inline-block;background:#dfffe4;border-radius:8px;padding:2px 8px;margin:2px}
img.scene,.scene{display:block;width:100%;max-width:640px;height:auto;border-radius:14px;margin:4px auto 8px;box-shadow:0 4px 0 #0002}
.pic{font-size:60px;line-height:1.1}
.lbwrap{display:flex;gap:14px;justify-content:center;margin:8px 0;font-size:15px;text-align:left}.lbwrap>div{background:#f6f6ff;border-radius:12px;padding:6px 14px}.lbwrap ol{margin:4px 0;padding-left:0;list-style:none}.lbwrap li.me{color:#e2462e;font-weight:bold}
.res{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:20px;font-weight:bold;margin:6px 0}.res>div{background:#fff6d8;border-radius:10px;padding:4px 10px}
.wd{margin:6px 0;text-align:left}.wd .opts{display:flex;flex-wrap:wrap;gap:6px}
.sw{font:inherit;font-size:15px;border:3px solid transparent;border-radius:12px;padding:5px 8px;background:#f4f4f4;cursor:pointer;display:flex;flex-direction:column;align-items:center}.sw.sel{border-color:#2fbf4a;background:#e9ffe9}.sw small{color:#777;font-size:11px}
.sw .dot{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--c,#ccc)}
#dressPv{display:block;margin:0 auto;image-rendering:pixelated}
.slot.fixed,.wtile.fixed{background:#e8e8e8;color:#333;border-style:solid}
.blank.wline{display:inline-block;min-width:80px;border-bottom:3px solid #333}.blank.done{color:#2fbf4a;font-weight:bold}
.tile.long{font-size:18px}.sentline.col,.tiles.col{flex-direction:column}
.zh.sm{font-size:14px;color:#777}
.bag{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.bi{display:flex;flex-direction:column;align-items:center;background:#fff6d8;border-radius:12px;padding:6px 10px}.bi span{font-size:34px}
.storybox{text-align:left;background:#f9f6ef;border-radius:10px;padding:4px 10px;margin:6px 0}

/* ===== item 14: touch / phone / tablet ===== */
body[data-mode=select] #touch,body[data-mode=quiz] #touch,body.ovon #touch{display:none!important}
body[data-mode=map] #touch .dn{display:none}
#cv{touch-action:none}
#rotate{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#1e2a4a;color:#fff;font-size:28px;text-align:center;padding-top:30vh}
@media (orientation:portrait) and (max-width:600px){body.touch #rotate{display:block}}
body.touch .btn,body.touch .opt,body.touch .tile,body.touch .bw,body.touch .chip{min-height:48px}
@media (max-height:500px){#ov .box{padding:10px 16px;border-radius:18px}.opt{font-size:24px;padding:10px 18px}.tile{font-size:28px;height:58px;min-width:56px}.story{font-size:22px}
 #select h1{font-size:28px;margin:4px}.ptitle{font-size:17px}.pcard{min-width:90px;padding:4px 8px}.pav{font-size:24px}.diff{font-size:15px;padding:4px 10px}.btn{font-size:18px;padding:8px 16px}.keys{display:none}
 #touch button{width:70px;height:70px;font-size:28px;bottom:12px}#touch .lr button:last-child{left:100px}#touch .jb{width:92px;height:92px}#touch .ud .dn{bottom:92px;left:59px;width:58px;height:58px}
 img.scene{max-height:34vh;width:auto}.ibtn{width:40px;height:40px;font-size:20px}}
@media (max-height:500px){#nodeinfo{font-size:14px;padding:4px 12px;max-width:50vw;bottom:6px}}

/* v4.1 item1: two-step start */
.steps{display:flex;gap:8px;align-items:center;margin:2px 0 6px;font-weight:bold}.steps i{color:#fff;font-style:normal;font-size:22px;text-shadow:0 2px 0 #0004}
.steps .st{background:#ffffffaa;color:#555;padding:4px 14px;border-radius:999px;font-size:15px}.steps .st.on{background:#fff;color:#1a1a1a;box-shadow:0 3px 0 #0003;outline:3px solid #ff7a1a}
.step{display:none;flex-direction:column;align-items:center}.step.on{display:flex}
.plist.hide{display:none}
.newp{flex-direction:column;background:#fff;padding:14px 20px;border-radius:20px;box-shadow:0 6px 0 #0002;color:#1a1a1a}
.npt{font-size:20px;font-weight:bold}.npl{font-size:15px;font-weight:bold;color:#333}
.chars,.hats,.nprow{display:flex;gap:10px;justify-content:center;align-items:center}
.gpick{display:flex;flex-direction:column;align-items:center;min-width:120px;min-height:48px;color:#1a1a1a;box-shadow:0 4px 0 #0002}.gpick canvas{width:64px;height:80px;image-rendering:pixelated}
.hpick{font:inherit;font-size:16px;min-height:48px;border:3px solid #ddd;border-radius:12px;padding:6px 12px;background:#fff;cursor:pointer;color:#1a1a1a}.hpick.sel{border-color:#2f8cff;background:#e6f0ff}
.nprow{margin-top:8px}
.btn.gray{background:#fff;color:#1a1a1a;box-shadow:0 5px 0 #9aa3ad;border:2px solid #c9d0d8}
.diff small{color:#444}.ptitle{color:#fff;text-shadow:0 2px 0 #0007,0 0 6px #0005}

/* v4.1 item2 */
.selmute{position:absolute;top:12px;right:12px}
.tapsnd{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:#1a1a1a;color:#fff;font-weight:bold;padding:6px 14px;border-radius:999px;font-size:15px;animation:pulse 1.2s infinite;pointer-events:none}
body.audioon .tapsnd{display:none}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.07)}}
.tapsnd{left:14px;top:18px;transform:none;animation:pulse2 1.2s infinite}@keyframes pulse2{50%{transform:scale(1.07)}}

/* ===== v4.1 item7: button system — primary / secondary / audio / tertiary, >=48px, press states ===== */
.btn,.abtn,.hbtn,.opt,.chip,.tile,.bw,.sw,.diff,.pcard,.gpick,.hpick,.ibtn{min-height:48px;-webkit-tap-highlight-color:transparent;transition:transform .06s,box-shadow .06s,filter .1s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.15}
.btn:hover,.opt:hover,.chip:hover,.abtn:hover,.ibtn:hover,.diff:hover,.pcard:hover,.sw:hover{filter:brightness(1.06)}
.btn:focus-visible,.abtn:focus-visible,.opt:focus-visible,.chip:focus-visible,.ibtn:focus-visible,.hbtn:focus-visible{outline:4px solid #ffcf3a;outline-offset:3px}
.btn:disabled{filter:grayscale(.6);opacity:.55;cursor:not-allowed;transform:none!important}
/* PRIMARY: one per screen, green, big, keyboard hint */
.btn.green{background:linear-gradient(#3fd65c,#25b043);color:#fff;font-size:24px;min-height:58px;padding:10px 28px;border-radius:18px;box-shadow:0 6px 0 #167a2a,0 8px 14px #0003;text-shadow:0 2px 0 #0003}
.btn.green:active{transform:translateY(5px);box-shadow:0 1px 0 #167a2a}
.btn.next::after{content:'Space';font-size:12px;font-weight:800;letter-spacing:.5px;color:#14662a;background:#ffffffd9;border-radius:6px;padding:3px 7px;margin-left:4px;box-shadow:0 2px 0 #0003;text-shadow:none}
@media (pointer:coarse){.btn.next::after{display:none}}
/* SECONDARY: outlined white */
.btn.blue,.btn.orange,.btn:not(.green):not(.gray){background:#fff;color:#1a5fd0;border:3px solid #2f8cff;box-shadow:0 5px 0 #9bbbe8;font-size:19px;padding:8px 18px;text-shadow:none}
.btn.orange{color:#c25400;border-color:#ff8a2a;box-shadow:0 5px 0 #f0b98a}
.btn.blue:active,.btn.orange:active,.btn:not(.green):not(.gray):active{transform:translateY(4px);box-shadow:0 1px 0 #9bbbe8}
/* TERTIARY */
.btn.gray{background:#fff;color:#333;border:2px solid #c9d0d8;box-shadow:0 4px 0 #b4bcc6;font-size:17px}
.btn.gray:active{transform:translateY(3px);box-shadow:0 1px 0 #b4bcc6}
/* AUDIO controls: grouped tray, pill shape, light blue — clearly not "Next" */
.agroup{display:inline-flex;align-items:center;gap:8px;background:#eaf4ff;border:2px dashed #9cc7ff;border-radius:999px;padding:5px 8px 5px 12px;margin:6px}
.aglabel{font-size:14px;font-weight:800;color:#1a4f9c;white-space:nowrap}
.abtn{font:inherit;display:inline-flex;align-items:center;gap:6px;background:#fff;color:#1a4f9c;border:2px solid #7fb3ff;border-radius:999px;padding:4px 14px 4px 8px;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 #b9d4f5}
.abtn b{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#2f8cff;color:#fff;font-size:18px}
.abtn[data-slow] b{background:#3fae6a}
.abtn:active{transform:translateY(3px);box-shadow:0 0 0 #b9d4f5}
.hbtn{font:inherit;background:#fff8d6;color:#6b4e00;border:2px solid #f0c63a;border-radius:999px;padding:6px 14px;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 #e2c766;margin:6px}
.hbtn:active{transform:translateY(3px);box-shadow:none}
.nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.nav.split{justify-content:space-between;gap:24px;margin-top:12px;padding-top:12px;border-top:2px solid #eef0f3}
.nav.split .next{margin-left:auto}
@media (max-width:640px){.nav.split{justify-content:center}.nav.split .next{margin-left:0;width:100%}}
.nav.col{flex-direction:column;align-items:stretch}.nav.col .btn{width:100%}
/* other targets: press states */
.opt:active,.chip:active,.tile:active,.bw:active,.sw:active,.diff:active,.pcard:active,.gpick:active,.hpick:active{transform:translateY(3px) scale(.98)}
.ibtn:active{transform:translateY(3px);box-shadow:0 1px 0 #0003}
@media (max-height:500px){.ibtn{width:48px!important;height:48px!important}}
/* item3/5: no gray instruction text */
.zh{color:#1f2933}.zh.sm{color:#2d3640}.spacehint{color:#2d3640;font-size:14px;font-weight:600}.tips{color:#1f2933}.word small,.hero small,.pcard small{color:#3a4450}
#ov .box>.nav{position:sticky;bottom:-18px;background:#fff;z-index:2;padding-bottom:8px;margin-bottom:-8px}
@media (max-height:500px){#ov .box>.nav{bottom:-10px;box-shadow:0 -6px 10px -6px #0003}.btn.green{min-height:50px;font-size:20px;padding:6px 20px}.agroup{margin:2px}.nav.split{margin-top:6px;padding-top:6px}.spacehint{display:none}}

/* v4.1 item3: coach bubble — black, high-contrast, narrated */
#coach{position:fixed;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:12px;background:#fff;color:#111;border:3px solid #1a1a1a;border-radius:20px;padding:10px 14px 10px 10px;box-shadow:0 6px 0 #0004;z-index:35;max-width:min(760px,94vw);font-size:22px;font-weight:800;line-height:1.35}
#coach.on{display:flex}#coach.pop{animation:pop .35s}
#coach .cicon{font-size:34px;width:54px;height:54px;flex:none;display:flex;align-items:center;justify-content:center;background:#ffe14d;border-radius:50%;border:3px solid #1a1a1a}
#coach .cstep{font-size:13px;font-weight:800;color:#8a4b00;letter-spacing:.3px}
#coach .ctext{color:#111}
#coach .cbtns{display:flex;gap:6px;align-items:center;margin-left:6px}
#coach .abtn.sm{padding:4px;min-width:48px;justify-content:center}#coach .btn.sm{font-size:14px;padding:6px 10px;min-height:48px;margin:0}
kbd{display:inline-block;min-width:30px;text-align:center;font:inherit;font-size:.85em;font-weight:900;color:#111;background:#f3f4f6;border:2px solid #1a1a1a;border-bottom-width:5px;border-radius:8px;padding:0 7px;margin:0 2px}
.tbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#333;color:#fff;font-size:16px;border:2px solid #fff;box-shadow:0 0 0 2px #333}.tbtn.red{background:#e84a4a}
.qb{display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;background:#ffcf3a;border:2px solid #8a5a00;border-radius:4px;color:#8a5a00;font-weight:900}
@media (max-height:500px){#coach{font-size:16px;padding:6px 10px 6px 6px}#coach .cicon{width:40px;height:40px;font-size:24px}}
body.ovon #coach{display:none}
.tsteps{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}.tstep{background:#eafbe9;border:2px solid #7fd08a;border-radius:999px;padding:4px 12px;font-weight:800;color:#1a1a1a}.tstep.no{background:#f3f4f6;border-color:#c9d0d8}
/* v4.1 item5: clean pre-level card */
.lvcard{display:flex;flex-direction:column;align-items:center;gap:6px;color:#111}
.lvicon{font-size:64px;line-height:1}
.lvhead{display:flex;align-items:center;gap:10px}.lvhead h2{margin:0;font-size:34px;color:#111}
.lvid{background:#1a1a1a;color:#fff;font-weight:900;border-radius:10px;padding:4px 12px;font-size:22px}
.lvtheme{font-size:20px;font-weight:700;color:#1f2933}
.lvpills{display:flex;gap:8px}.lvpills span{background:#f1f5f9;border:2px solid #cbd5e1;border-radius:999px;padding:4px 14px;font-weight:800;font-size:18px;color:#111}
.lvgoal{font-size:20px;font-weight:800;background:#fff7d6;border:2px solid #f0c63a;border-radius:14px;padding:8px 16px;color:#111;max-width:640px}

/* v4.1 item11: node info card */
#nodeinfo{border:3px solid #1a1a1a;color:#111;font-weight:700}#nodeinfo b{color:#111}#nodeinfo small{color:#333}
#nodeinfo .nid{background:#1a1a1a;color:#fff;border-radius:8px;padding:1px 8px;margin-right:4px}
#nodeinfo .nkeys{font-size:14px;font-weight:700;color:#222;margin-top:4px}#nodeinfo kbd{font-size:12px;min-width:22px;padding:0 5px}
/* v4.1 item1 fix: short landscape phones — keep the whole new-player form inside the viewport */
#select{overflow-y:auto;justify-content:safe center}
@media (max-height:500px){
 #select{padding:4px 0}#select h1{font-size:22px;margin:2px}.steps{margin:0 0 2px}.steps .st{padding:2px 10px;font-size:13px}
 .newp{padding:6px 14px;gap:4px}.npt{font-size:16px}.npl{display:none}.newp input{font-size:17px;padding:4px 8px}
 .gpick{flex-direction:row;gap:6px;min-width:0;padding:2px 10px}.gpick canvas{width:32px;height:40px}
 .chars,.hats,.nprow{gap:8px}.nprow{margin-top:2px}
}
/* v4.2 item5 */
.noCoin{margin-top:6px;background:#fff3d6;border:2px solid #ffb21a;color:#5a3a00;border-radius:12px;padding:4px 10px;font-weight:800;font-size:15px}
/* v4.2 item6: wrong-answer coin loss */
.coinLoss{position:fixed;z-index:200;transform:translate(-50%,-10px);font:900 30px Andika,"Segoe UI","Noto Sans TC",sans-serif;color:#ff3b3b;text-shadow:0 2px 0 #fff,0 0 8px #fff;pointer-events:none;animation:closs 1.25s ease-out forwards}
.coinLoss.zero{color:#777;font-size:22px}
@keyframes closs{0%{opacity:0;transform:translate(-50%,0) scale(.6)}15%{opacity:1;transform:translate(-50%,-24px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-80px) scale(1)}}
/* v4.2 item4: read-before-next gate */
.btn.green.gated{position:relative;flex-direction:column;gap:4px;min-width:220px;filter:none;opacity:1;background:#9fb3a5;box-shadow:0 5px 0 #6f8576;cursor:wait}
.btn.green.gated .rgtxt{font-size:16px}
.btn.green.gated::after{display:none}
.rgbar{display:block;width:100%;height:8px;border-radius:6px;background:#ffffff66;overflow:hidden}
.rgbar i{display:block;height:100%;width:0;background:#fff;border-radius:6px;animation:rgfill linear forwards}
@keyframes rgfill{to{width:100%}}
.btn.green.unlock{animation:unl .35s ease-out}@keyframes unl{50%{transform:scale(1.08)}}
/* v4.2 item7: free-build spelling board */
button.slot{font:inherit;cursor:pointer;color:#1a1a1a;-webkit-tap-highlight-color:transparent}
button.slot.fixed{cursor:default}
.slot.filled{background:#fff;border-color:#2f8cff}
.slot.pop{animation:slpop .18s ease-out}@keyframes slpop{50%{transform:scale(1.15)}}
.slot.bad{background:#ffe1e1!important;border-color:#e53935!important;color:#c62828!important;animation:slshake .35s}
@keyframes slshake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.slot.swap{animation:slflip .36s ease-in-out}@keyframes slflip{50%{transform:rotateY(90deg)}}
.slot.fixedok{background:#dcffe2!important;border-color:#2fbf4a!important;color:#1b7a32!important}
.spellbar{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:10px;flex-wrap:wrap}
button.slot{background:transparent;border:none;border-bottom:6px solid #2b59c3;border-radius:0}
button.slot.fixed{background:#e8e8e8}
button.slot{font-size:40px;font-weight:bold;font-family:inherit}
/* v4.3 百寶袋 */
#bagUse{position:fixed;right:12px;top:118px;z-index:30;width:56px;height:56px;font-size:28px;display:none}
body.inlevel:not(.ovon) #bagUse{display:block}
.bagTabs{display:flex;gap:8px;justify-content:center;margin:6px 0 10px}
.bagTab{min-height:50px;min-width:96px;padding:8px 14px;border-radius:14px;border:3px solid #c9b48a;background:#fff8e6;font-family:inherit;font-weight:800;font-size:18px;cursor:pointer}
.bagTab.on{background:#ffd23a;border-color:#b8860b}
.bagBody{max-height:52vh;overflow:auto;text-align:left}
#bagBody canvas{display:block;margin:0 auto 6px;image-rendering:pixelated}
.sw.lock{opacity:.6}
.bagGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.bagCard,.bagBuy{border:3px solid #ddd;border-radius:14px;padding:10px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-height:56px;font:inherit;cursor:pointer}
.bagCard{cursor:default}.bagCard .btn{min-height:48px}
.bagBuy[disabled]{opacity:.5}
.be{font-size:34px}.r2{border-color:#7fb6ff}.r3{border-color:#c47bff}.r4{border-color:#ffb300}
.rar{color:#777}
.colCh{border:2px dashed #d8c9a5;border-radius:12px;padding:8px;margin:8px 0;background:#fffdf5}
.colHead{display:flex;align-items:center;gap:8px}.colHead small{margin-left:auto;color:#776}
.stk{font-size:28px}.ci{font-size:28px;display:inline-block;width:42px;text-align:center}.ci.no{opacity:.35}
.colRow.words{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.wcard{min-height:48px;padding:6px 12px;border-radius:10px;border:2px solid #8fc58f;background:#effbef;font-family:inherit;font-weight:700;font-size:16px;cursor:pointer}
.bagUseRow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bagUseIt{width:190px;min-height:120px;border:3px solid #9cd;border-radius:16px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;font:inherit;cursor:pointer}
.bagUseIt span{font-size:40px}.bagUseIt.dis{opacity:.5}
.bagHint{display:block;margin:4px auto 8px}.bagHint.dis{opacity:.55}
.opt.bagOff{opacity:.35;filter:grayscale(1);pointer-events:none}
.bagToast{position:fixed;left:50%;top:18%;transform:translateX(-50%);background:#333d;color:#fff;padding:10px 18px;border-radius:12px;z-index:99;font:800 18px sans-serif}
/* v4.5 item3: word-bank words are real buttons everywhere (teach card, word-bank choose, bank cloze, remedial rooms) */
.bank .bw{min-width:48px;min-height:48px;font-weight:700;color:#1d3d73;box-shadow:0 4px 0 #5a8fd6;touch-action:manipulation;user-select:none}
.bank .bw:active,.bank .bw.pressed{transform:translateY(3px);box-shadow:0 1px 0 #5a8fd6}
.bank .bw:focus-visible{outline:4px solid #ffb21a;outline-offset:2px}
.bank .bw.sel{background:#dfeeff;border-color:#2f8cff}
.bank .bankw.used{text-decoration:none;opacity:1;background:#eef7ee;border-color:#a8d5a8;color:#4b6b4b}.bank .bankw.used::after{content:"✓";font-size:.75em;color:#3a9a3a;margin-left:4px}
.bank .bankw.used.sel{opacity:1;background:#dfeeff}
.blank.filled{color:#2f6bff;font-weight:800}
/* v4.5 item4: purchase confirm dialog */
#buyDlg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45)}
#buyDlg .bd{background:#fffbe8;border:4px solid #333;border-radius:18px;padding:18px 22px;min-width:300px;max-width:90vw;text-align:center;font-size:20px;box-shadow:0 8px 0 #0004}
#buyDlg .bdi{font-size:56px;line-height:1.1}#buyDlg .bdq{font-size:24px;font-weight:800;margin:8px 0}#buyDlg .bdc{font-size:17px;color:#555;margin-bottom:12px}
#buyDlg .bdc.short{color:#c0392b;font-weight:800}#buyDlg .bdb{display:flex;gap:14px;justify-content:center}#buyDlg .bdb .btn{min-width:110px}
/* v4.6 item2: English immersion — Chinese translations hidden unless Chinese help is on */
body.lang-en:not(.zhhelp) .zhx{display:none!important}
.zhhelp-tag{display:inline-block;background:#fff3c4;border-radius:10px;padding:2px 8px;font-size:13px;margin:4px 0}
/* v4.6 item1/5 */
.povstrip{display:flex;justify-content:center;gap:18px;font-weight:900;font-size:20px;margin:6px 0}
.povstrip span{background:#eef6ff;border-radius:12px;padding:4px 12px}
.hcheck .opts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.hcheck .hopt{font-size:26px;min-width:110px;padding:14px 18px}
.hcheck .hopt.wait{opacity:.55}
.listen-first{color:#d33;font-weight:900}
body.zhhelp .zhx.zhshow,body.zhhelp #qzh{display:block!important;visibility:visible!important}
body.lang-en:not(.zhhelp) #hz{display:none!important}
/* v4.7 item2: Listen -> Your turn */
.yt{margin:8px auto 4px;padding:8px 12px;border-radius:14px;background:#fff7e0;border:2px dashed #ffb300;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;max-width:92%}
.yt .yth{font-weight:800;color:#a15c00}.yt .ytl{font-size:20px}.yt .ytstep{display:inline-block;padding:2px 10px;border-radius:10px;background:#e3f0ff;color:#1b4f9c;font-weight:700}
.yt .ytstep.me{background:#ffe0ec;color:#b0004a}.yt .ytstep.ok{background:#e4f8e4;color:#227a22}
.yt.mic .ytstep.me{animation:ytp .7s infinite alternate}@keyframes ytp{to{transform:scale(1.15)}}
/* v4.7 item3: spelling cursor slot */
.slot.cur{outline:4px solid #ffb300;outline-offset:2px;box-shadow:0 0 12px #ffcf4d}
/* v4.7 item5: reward help + HUD tooltips */
.rwlist{text-align:left;max-width:560px;margin:6px auto;display:flex;flex-direction:column;gap:6px}
.rwrow{display:flex;gap:10px;align-items:flex-start;background:#f4f8ff;border-radius:12px;padding:6px 10px}
.rwic{font-size:30px;line-height:1.1}.rwen{font-size:15px;color:#234}
#hudtip{position:fixed;z-index:60;max-width:300px;background:#fffbe6;border:2px solid #ffb300;border-radius:12px;padding:8px 10px;font-size:14px;color:#333;box-shadow:0 4px 14px #0004;display:none;flex-direction:column;gap:3px}
#hudtip.on{display:flex}#hudtip i{font-size:12px;color:#777}
body.lang-en:not(.zhhelp) #hudtip .zh{display:none}
button,input,select,textarea{font-family:inherit}
/* v4.8 item6: tap a placed letter -> it is selected for swapping; the tiles invite the replacement */
.slot.swap{background:#fff3c4;animation:swp .6s infinite alternate}.slot.swap::after{content:"↻";position:absolute;top:-10px;right:-8px;font-size:16px;background:#ffb300;color:#fff;border-radius:50%;width:22px;height:22px;line-height:22px}
button.slot{position:relative}@keyframes swp{to{transform:translateY(-3px)}}
.swapping .tile:not(:disabled){box-shadow:0 0 0 3px #ffcf4d}
.tshelf{display:flex;gap:8px;align-items:center;text-align:left;padding:6px 8px;margin:4px 0;border-radius:10px;background:#0002;opacity:.6}.tshelf.on{opacity:1;background:#ffd23a33}.tshelf .te{font-size:28px;width:36px;text-align:center}.tshelf b{min-width:78px}
.tlist{max-height:46vh;overflow:auto}.tbar{height:12px;background:#0003;border-radius:6px;overflow:hidden;margin:6px 0}.tbar i{display:block;height:100%;background:linear-gradient(90deg,#ffd23a,#ff9800)}.ttitle{font-weight:700;color:#ffd23a;font-size:20px}.tnew{background:#ffd23a33;border-radius:10px;padding:6px;margin:6px 0;font-weight:700}
#titleBg{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}#select{isolation:isolate}

/* ===== v4.9: environment-adaptive input ===== */
html,body{touch-action:manipulation;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-text-size-adjust:100%}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
#cv,#touch,#touch *{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,.btn,.opt,.tile,.slot,.bw,.chip,.pcard,.ibtn,a{touch-action:manipulation}
body.touch div,body.touch span,body.touch img,body.touch li,body.touch canvas{cursor:pointer}/* iOS only dispatches click on 'clickable' elements */
body.kbd #touch{display:none!important}
#touch .lr button:first-child{left:calc(18px + env(safe-area-inset-left))}#touch .lr button:last-child{left:calc(116px + env(safe-area-inset-left))}
#touch button{bottom:calc(18px + env(safe-area-inset-bottom))}#touch .jb{right:calc(24px + env(safe-area-inset-right))}
#touch .ud .dn{bottom:calc(116px + env(safe-area-inset-bottom));left:calc(67px + env(safe-area-inset-left))}
.bar{right:calc(10px + env(safe-area-inset-right))}
#select,.bagBody,.tlist,#ov .box{touch-action:pan-y;-webkit-overflow-scrolling:touch}
.selinmode{position:absolute;top:12px;right:68px}
#inToast{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:#000c;color:#fff;padding:8px 16px;border-radius:14px;font-size:18px;z-index:400;opacity:0;pointer-events:none;transition:opacity .2s}#inToast.on{opacity:1}
@media (max-height:500px){#touch button{bottom:calc(12px + env(safe-area-inset-bottom))}#touch .lr button:last-child{left:calc(100px + env(safe-area-inset-left))}#touch .ud .dn{bottom:calc(92px + env(safe-area-inset-bottom));left:calc(59px + env(safe-area-inset-left))}}
/* v4.13: delete player */
#ov .btn.red,.btn.red{background:#e84a4a;color:#fff;box-shadow:0 5px 0 #a82828}
.pcard.add.del{background:#fff0f0}.pcard.add.del.on{background:#ffe08a}
#plist.delmode .pcard[data-id]{outline:3px dashed #e84a4a;outline-offset:2px}
#plist.delmode .pcard[data-id]::after{content:'🗑️';position:absolute;top:-8px;right:-8px;font-size:20px}
#plist.delmode .pcard[data-id]{position:relative}
/* ===== v4.14 mobile UI/UX: safe areas, thumb-zone controls, compact ☰ menus, fullscreen prompt, rotate screen ===== */
:root{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
/* dialogs / learn cards / quizzes / bag / trophy shelf: fit the REAL visible height (iOS 100vh includes the toolbar) and stay inside the notch */
#ov{padding:var(--st) var(--sr) var(--sb) var(--sl);box-sizing:border-box}
#ov .box{max-height:calc(var(--vh,100vh) - var(--st) - var(--sb) - 12px);max-width:calc(100vw - var(--sl) - var(--sr) - 12px);box-sizing:border-box}
#select{padding-left:var(--sl);padding-right:var(--sr);padding-top:var(--st);padding-bottom:var(--sb);box-sizing:border-box;height:var(--vh,100vh);bottom:auto}
.selmute,.selinmode{margin-top:var(--st)}
.bar{top:calc(40px + var(--st))}
.bar .more{display:contents}.bar .menubtn{display:none}
/* touch: every control in the bottom thumb zones (d-pad bottom-left, JUMP + item button bottom-right) */
body.touch{--b:clamp(58px,15vmin,88px);--d:calc(var(--b) * .82);--j:clamp(80px,22vmin,118px);--g:10px;--m:12px}
body.touch #touch button{width:var(--b);height:var(--b);bottom:calc(var(--m) + var(--sb));font-size:calc(var(--b) * .4);border-width:3px}
body.touch #touch .lr button:first-child{left:calc(var(--m) + var(--sl))}
body.touch #touch .lr button:last-child{left:calc(var(--m) + var(--sl) + var(--b) + var(--g))}
body.touch #touch .ud .dn{width:var(--d);height:var(--d);font-size:calc(var(--d) * .34);left:calc(var(--m) + var(--sl) + (var(--b) * 2 + var(--g) - var(--d)) / 2);bottom:calc(var(--m) + var(--sb) + var(--b) + 6px)}
body.touch #touch .ud .dn small{font-size:10px}
body.touch #touch .jb{width:var(--j);height:var(--j);right:calc(var(--m) + var(--sr));bottom:calc(var(--m) + var(--sb));font-size:calc(var(--j) * .32)}
body.touch #touch .jb small{font-size:13px}
body.touch #bagUse{top:auto;right:calc(var(--m) + var(--sr) + var(--j) + 12px);bottom:calc(var(--m) + var(--sb));width:58px;height:58px}
/* compact screens (phones): essentials visible, the rest in the ☰ panel */
body.compact .bar{top:calc(6px + var(--st));right:calc(6px + var(--sr));flex-wrap:nowrap;gap:6px}
body.compact .bar>.ibtn,body.compact .bar .more .ibtn{width:44px!important;height:44px!important;min-height:44px;font-size:21px}
body.compact .bar .menubtn{display:inline-flex;order:99;background:#ffd23a}
body.compact .bar .more{display:none;position:absolute;top:52px;right:0;background:rgba(14,22,48,.92);border:2px solid #fff8;border-radius:16px;padding:8px;gap:8px;grid-template-columns:repeat(3,auto);max-height:calc(var(--vh,100vh) - 70px);overflow:auto;box-shadow:0 8px 20px #0006}
body.compact .bar.open .more{display:grid}
body.compact .bar .more .ibtn.wide{width:auto!important;min-width:44px;border-radius:22px;padding:0 10px;font-size:14px}
/* map hint: compact, between the thumb controls, taps fall through to the map; flips to the top if it would cover a level */
body.touch #nodeinfo{pointer-events:none}
body.compact #nodeinfo{bottom:calc(6px + var(--sb));max-width:calc(100vw - 2 * (var(--j) + 30px) - var(--sl) - var(--sr));font-size:14px;padding:4px 12px;border-radius:14px;opacity:.94}
body.compact #nodeinfo span,body.compact #nodeinfo .nkeys{font-size:12px}
#nodeinfo.up{bottom:auto!important;top:calc(56px + var(--st))}
body.compact #nodeinfo.up{top:calc(54px + var(--st))}
/* rotate screen: icon + short EN + short ZH, vanishes on rotation (pure CSS), never traps the player */
#rotate{display:none;align-items:center;justify-content:center;padding:var(--st) var(--sr) var(--sb) var(--sl);box-sizing:border-box}
@media (orientation:portrait) and (max-width:600px){body.touch #rotate{display:flex}body.touch.rotok #rotate{display:none}}
.rotbox{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px}
.rotic{font-size:84px;line-height:1;animation:rotph 1.8s ease-in-out infinite}@keyframes rotph{0%,25%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
.roten{font-size:26px;font-weight:900}.rotzh{font-size:24px;font-weight:700;color:#ffd23a}.rothint{font-size:14px;color:#c9d3f0;max-width:300px}
#rotAny{margin-top:14px;font-size:18px}
/* fullscreen prompt + iPhone Add-to-Home-Screen hint */
#fsTip,#a2hs{position:fixed;left:50%;top:calc(8px + var(--st));transform:translateX(-50%);z-index:500;display:flex;align-items:center;gap:6px;max-width:calc(100vw - 24px - var(--sl) - var(--sr))}
#fsGo{background:#ff7a1a;color:#fff;border:3px solid #fff;border-radius:22px;padding:6px 18px;font:900 18px Andika,"Segoe UI","Noto Sans TC",sans-serif;box-shadow:0 5px 0 #0004;display:flex;flex-direction:column;align-items:center}
#fsGo small{font-size:13px;font-weight:700}
#fsSkip,#a2hsX{background:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:18px;box-shadow:0 3px 0 #0004;flex:none}
#a2hs{background:#0e1630ee;color:#fff;border:2px solid #fff8;border-radius:16px;padding:8px 10px 8px 14px;font-size:15px}
#a2hs small{display:block;font-size:13px;color:#ffd23a}
@media (orientation:portrait) and (max-width:600px){body.touch:not(.rotok) #fsTip,body.touch:not(.rotok) #a2hs{display:none}}
body.compact .bar .more .ibtn.wide{white-space:nowrap;flex-direction:row;gap:2px}body.compact .bar .more .ibtn.wide br{display:none}
body.compact.portrait #nodeinfo:not(.up){bottom:calc(var(--m) + var(--sb) + var(--b) * 2 + 24px);max-width:calc(100vw - 24px)}
/* ===== v4.15: d-pad is ONE bottom row ◀ ▼ ▶ (same size, same baseline, ▼ between the arrows) ===== */
body.touch #touch .lr button:last-child{left:calc(var(--m) + var(--sl) + (var(--b) + var(--g)) * 2)}
body.touch #touch .ud .dn{width:var(--b);height:var(--b);font-size:calc(var(--b) * .34);left:calc(var(--m) + var(--sl) + var(--b) + var(--g));bottom:calc(var(--m) + var(--sb))}
body.touch[data-mode=map] #touch .lr button:last-child{left:calc(var(--m) + var(--sl) + var(--b) + var(--g))}
body.compact #nodeinfo{max-width:calc(100vw - (var(--b) * 3 + var(--g) * 2 + var(--m) + 12px) - (var(--j) + var(--m) + 12px) - var(--sl) - var(--sr));left:calc(var(--sl) + var(--m) + var(--b) * 3 + var(--g) * 2 + 8px + (100vw - var(--sl) - var(--sr) - var(--m) * 2 - var(--b) * 3 - var(--g) * 2 - var(--j) - 16px) / 2)}
body.touch[data-mode=map].compact #nodeinfo{max-width:calc(100vw - 2 * (var(--j) + 30px) - var(--sl) - var(--sr));left:50%}
body.compact.portrait #nodeinfo:not(.up){bottom:calc(var(--m) + var(--sb) + var(--j) + 14px);max-width:calc(100vw - 24px);left:50%}
/* ===== v4.16: cross D-pad (▲◀▶▼ on a round base), bottom-left; diagonals = invisible corner cells ===== */
body.touch{--p:clamp(156px,42vmin,228px)}
body.touch #touch .dpad{position:fixed;left:calc(var(--m) + var(--sl));bottom:calc(var(--m) + var(--sb));width:var(--p);height:var(--p);z-index:30;touch-action:none}
body.touch #touch .dbase{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 40%,#ffffff55,#ffffff22 70%);border:3px solid #fff9;box-sizing:border-box;box-shadow:0 2px 8px #0006;pointer-events:none}
body.touch #touch .dcross{position:absolute;left:33.4%;top:9%;width:33.2%;height:82%;background:#2f7fe0b3;border-radius:12%;pointer-events:none;box-shadow:inset 0 -3px 0 #0003}
body.touch #touch .dcross:after{content:"";position:absolute;left:-74.4%;top:29.3%;width:248.8%;height:41.4%;background:#2f7fe0b3;border-radius:12%/30%;box-shadow:inset 0 -3px 0 #0003}
body.touch #touch .dpad button{position:absolute;width:33.333%;height:33.333%;bottom:auto;left:auto;right:auto;border:0;border-radius:0;background:transparent;color:#fff;font-size:calc(var(--p) * .13);line-height:1;padding:0;margin:0;text-shadow:0 1px 2px #0008;transform:none}
body.touch #touch .dpad .g1{left:0;top:0}body.touch #touch .dpad .du{left:33.333%;top:0}body.touch #touch .dpad .g3{left:66.667%;top:0}
body.touch #touch .dpad .dl{left:0;top:33.333%}body.touch #touch .dpad .dr{left:66.667%;top:33.333%}
body.touch #touch .dpad .g7{left:0;top:66.667%}body.touch #touch .dpad .dd{left:33.333%;top:66.667%}body.touch #touch .dpad .g9{left:66.667%;top:66.667%}
body.touch #touch .dpad button.down{background:#ffffff40;transform:none}
body.touch #touch .dpad .dg.down{background:transparent}
body.touch #touch .dpad .du.down,body.touch #touch .dpad .dd.down,body.touch #touch .dpad .dl.down,body.touch #touch .dpad .dr.down{border-radius:20%}
body.touch[data-mode=map] #touch .dpad .dn{display:block;opacity:.45}
body.touch[data-mode=map]{--p:clamp(116px,30vmin,170px)}
body.touch.portrait #nodeinfo:not(.up){bottom:calc(var(--m) + var(--sb) + var(--p) + 10px)}