:root{color-scheme:dark;
 --bg:#0b1020;--bg-hero:#141a3a;--surface:#121a2e;--surface-2:#18223a;--surface-3:#222d4a;
 --glass:rgba(18,26,46,.72);--glass-strong:rgba(18,26,46,.86);--glass-blur:saturate(160%) blur(14px);
 --border:#26324d;--border-strong:#5b6b96;
 --text:#e8ecf5;--muted:#9aa6c0;--on-accent:#ffffff;
 --accent:#6d4aff;--accent-hover:#7c5cff;--accent-text:#b4a3ff;--accent-2:#22d3c5;--accent-2-strong:#0f766e;
 --accent-grad:linear-gradient(135deg,#7c5cff 0%,#22d3c5 100%);--btn-grad:linear-gradient(135deg,#6d4aff 0%,#4f46e5 100%);
 --accent-soft:rgba(124,92,255,.16);--accent-soft-strong:rgba(124,92,255,.32);--accent-a80:rgba(124,92,255,.8);
 --info:#7cc4ff;--ok:#34d399;--ok-bg:#0f2e2b;--bad:#fb7185;--bad-bg:#36172a;--warn:#fbbf24;
 --label-bg:rgba(11,16,32,.84);--label-text:#e8ecf5;--text-shadow:rgba(0,0,0,.8);
 --pad-bg:rgba(11,16,32,.55);--joy-bg-1:rgba(124,92,255,.22);--joy-bg-2:rgba(11,16,32,.55);--joy-border:rgba(34,211,197,.6);--knob:rgba(232,236,245,.9);--knob-on:#ffffff;
 --radius-sm:8px;--radius:12px;--radius-lg:16px;--radius-pill:999px;
 --shadow-color:rgba(0,0,0,.28);--shadow-color-strong:rgba(0,0,0,.45);--shadow-glow:rgba(124,92,255,.28);
 --shadow-sm:0 2px 8px var(--shadow-color);--shadow:0 10px 30px var(--shadow-color-strong);
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:system-ui,"Segoe UI","Noto Sans",Roboto,"Helvetica Neue",Arial,"Noto Sans CJK SC","Noto Sans JP","Noto Sans KR",sans-serif;background:var(--bg);color:var(--surface-3);display:flex;flex-direction:column;overflow:hidden}
#bar{flex:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px;background:var(--glass);border-bottom:1px solid var(--border);z-index:5}
#title{margin-right:auto;font-size:15px}
#bar button,#langs button{border:1px solid var(--border-strong);background:var(--surface-2);border-radius:8px;padding:6px 10px;font-size:14px;cursor:pointer}
#langs{display:flex;gap:4px}#langs button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#quizBtn{background:var(--accent-2-strong)!important;color:var(--on-accent);border-color:var(--accent-2-strong)!important}
.tg{font-size:14px;user-select:none}
#layout{flex:1;display:flex;min-height:0}
#stage{position:relative;width:60%;min-width:0}
#app{position:absolute;inset:0;touch-action:none}#app canvas{display:block}
.labels{position:absolute;top:0;left:0;pointer-events:none}
#panel{width:40%;overflow:auto;padding:18px 22px;background:var(--surface);border-left:1px solid var(--border);-webkit-overflow-scrolling:touch}
#hint{position:absolute;bottom:8px;left:10px;right:10px;color:var(--on-accent);font-size:12px;text-shadow:0 1px 3px var(--text-shadow);pointer-events:none}
#quizBox{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--glass-strong);padding:10px 16px;border-radius:12px;font-size:18px;text-align:center;box-shadow:0 4px 16px var(--shadow-color);max-width:92%}
.top{display:flex;justify-content:space-between;align-items:center}.tag{background:var(--accent-soft);border-radius:20px;padding:2px 10px;font-size:13px}
.x{border:0;background:none;font-size:18px;cursor:pointer;color:var(--muted)}
.word{font-size:40px;margin:.25em 0}.pron{color:var(--muted)}.mean{font-size:22px;font-weight:600;color:var(--accent-text)}
#panel h3{margin:1.1em 0 .4em;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2-strong)}
.spk{border:0;background:var(--accent);color:var(--on-accent);border-radius:20px;padding:3px 9px;cursor:pointer;font-size:13px;vertical-align:middle}
.ex{margin:.45em 0;padding:.55em .7em;background:var(--surface-2);border-radius:8px}.ex small{display:block;color:var(--muted)}.ex .tr{color:var(--accent-2-strong)}
.rel{padding-left:18px}.rel li{margin:.3em 0}
.ph{text-align:center;color:var(--muted);padding-top:6vh}.ph .big{font-size:52px}.ph ul{text-align:left;display:inline-block}
.lab{background:var(--label-bg);color:var(--on-accent);padding:2px 7px;border-radius:6px;font-size:13px;white-space:nowrap}
@media (max-width:760px){#layout{flex-direction:column}#stage{width:100%;height:55vh;flex:none}#panel{width:100%;flex:1;border-left:0;border-top:1px solid var(--border)}.word{font-size:32px}#title{width:100%}}

/* ---- scene menu ---- */
.scenepick{position:relative;display:inline-block}
#sceneBtn{font:inherit;font-weight:600;padding:.35em .7em;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface-2);cursor:pointer;white-space:nowrap}
#sceneBtn .car{opacity:.6;font-size:.85em}
#sceneMenu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px var(--shadow-color-strong);padding:0;display:flex;flex-direction:column;width:min(820px,92vw);max-height:75vh;max-height:min(75vh,75dvh);overflow:hidden}
#sceneMenu[hidden]{display:none}
#sceneMenu h4{margin:.6em 0 .2em;font-size:.78em;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
#sceneMenu button[data-s]{display:flex;gap:.5em;align-items:center;width:100%;text-align:left;font:inherit;font-size:.92em;padding:.32em .5em;border:0;border-radius:7px;background:none;cursor:pointer}
#sceneMenu button[data-s]:hover{background:var(--accent-soft)}#sceneMenu button[data-s].on{background:var(--accent-soft-strong);font-weight:600}
#sceneMenu button[data-s] span{width:1.4em;text-align:center}

/* ---- explore mode ---- */
#exploreBtn.on{background:var(--info);color:var(--on-accent);border-color:var(--info)}
#exUI{position:absolute;inset:0;pointer-events:none;z-index:4}
#exUI button{pointer-events:auto}
.exTop{position:absolute;top:8px;left:8px;right:8px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
.exProg{background:var(--glass-strong);border-radius:10px;padding:6px 10px;font-size:13px;font-weight:600;min-width:170px;box-shadow:0 2px 8px var(--shadow-color)}
.exProg .bar{height:7px;background:var(--border);border-radius:4px;margin-top:4px;overflow:hidden}.exProg .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),var(--ok));transition:width .4s}
.exNav{display:flex;gap:6px;align-items:center;background:var(--glass-strong);border-radius:10px;padding:4px 6px;box-shadow:0 2px 8px var(--shadow-color);font-size:13px;font-weight:600}
.exNav button{border:1px solid var(--border-strong);background:var(--surface-2);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:13px}.exNav button:disabled{opacity:.4;cursor:default}
.exPad{position:absolute;right:12px;bottom:36px;display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:5px}
.exPad button{border:0;border-radius:12px;background:var(--pad-bg);color:var(--on-accent);font-size:20px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.exPad button:active{background:var(--accent-a80)}
.exPad [data-k=fwd]{grid-column:2;grid-row:1}.exPad [data-k=left]{grid-column:1;grid-row:2}.exPad [data-k=back]{grid-column:2;grid-row:2}.exPad [data-k=right]{grid-column:3;grid-row:2}
body.exploring #app canvas{cursor:grab}
.dlg .who{color:var(--info);font-size:13px}
.exObj{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--accent-text);cursor:pointer;text-decoration:underline dotted}
@media (max-width:760px){.exPad{grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px)}}

/* ---- explore: touch controls ---- */
body.exploring #stage,body.exploring #exUI,body.exploring #app{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.exploring{overscroll-behavior:none}
.exJoy{position:absolute;left:calc(16px + env(safe-area-inset-left));bottom:calc(34px + env(safe-area-inset-bottom));width:128px;height:128px;border-radius:50%;background:radial-gradient(circle,var(--joy-bg-1),var(--joy-bg-2));border:2px solid var(--joy-border);pointer-events:auto;touch-action:none;display:none;box-shadow:0 2px 12px var(--shadow-color-strong)}
.exJoy i{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--knob);box-shadow:0 2px 8px var(--shadow-color-strong);transition:transform .12s ease-out;pointer-events:none}
.exJoy.on i{transition:none;background:var(--knob-on)}
.exJoy.on{border-color:var(--accent-2)}
#exUI.touch .exJoy{display:block}
#exUI.touch .exPad{display:none}
@media (max-width:760px){body.exploring #stage{height:68vh;height:68dvh}.exNav button{padding:8px 12px}.exProg{min-width:130px}}
@media (max-height:520px) and (orientation:landscape){#stage{width:62%}#panel{width:38%;padding:10px 14px}.word{font-size:28px}.exJoy{width:110px;height:110px;bottom:14px}.exJoy i{width:48px;height:48px;margin:-24px 0 0 -24px}#bar{padding:4px 8px;gap:5px}#bar button{padding:4px 8px}}

/* ---- home / landing ---- */
#homeBtn{text-decoration:none;font-size:18px;padding:2px 4px}
body.home #bar,body.home #layout{display:none}
#home{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:30;background:linear-gradient(180deg,var(--bg-hero) 0,var(--bg) 420px);scroll-behavior:smooth}
#home[hidden]{display:none}
.hwrap{max-width:1120px;margin:0 auto;padding:0 max(18px,env(safe-area-inset-left)) 40px}
.hnav{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.logo{font-size:22px;letter-spacing:-.02em}.logo span{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hbtn{display:inline-block;text-decoration:none;background:var(--accent);color:var(--on-accent);border-radius:10px;padding:8px 16px;font-weight:600;border:2px solid var(--accent)}
.hbtn.ghost{background:transparent;color:var(--accent-text)}.hbtn.big{padding:12px 22px;font-size:17px}
.hero{padding:6vh 0 4vh;max-width:760px}
.hero h1{font-size:clamp(30px,5.4vw,54px);line-height:1.1;margin:0 0 .4em;letter-spacing:-.02em}.hero h1 em{font-style:normal;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:clamp(16px,2vw,19px);color:var(--muted);line-height:1.5;margin:0 0 1.4em}
.hcta{display:flex;gap:10px;flex-wrap:wrap}
#home h2{font-size:24px;margin:1.6em 0 .6em}
.how ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.how li{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.how li span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent-2-strong);color:var(--on-accent);font-weight:700;margin-right:8px}
.how li p{margin:.5em 0 0;color:var(--muted);font-size:15px;line-height:1.45}
.lg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lg div{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;text-align:center;display:flex;flex-direction:column;gap:2px}
.lg span{font-size:34px}.lg small{color:var(--muted)}
.pick h3{margin:1.3em 0 .5em;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.card{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:14px;transition:transform .15s,box-shadow .15s;min-height:118px}
.card:hover,.card:focus-visible{transform:translateY(-2px);box-shadow:0 8px 22px var(--shadow-glow);border-color:var(--accent);outline:none}
.card .em{font-size:36px;line-height:1}.card b{font-size:16px}.card small{color:var(--info);font-size:12.5px;margin-top:auto}
#home footer{text-align:center;color:var(--muted);font-size:13px;margin-top:40px}
@media (max-width:600px){.lg{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.card{padding:12px;min-height:108px}.card .em{font-size:30px}.hero{padding:3vh 0 2vh}.hcta .hbtn{flex:1;text-align:center}}

/* ---- compact top bar (phones) ---- */
.morewrap{display:none;position:relative}
body.compactbar .morewrap{display:inline-block}
body.compactbar #bar{flex-wrap:nowrap;gap:6px;padding:6px 8px;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
body.compactbar #title{display:none}
body.compactbar .scenepick{flex:1;min-width:0}
body.compactbar #sceneBtn{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:14px}
body.compactbar #exploreBtn{white-space:nowrap;flex:none;padding:6px 8px;font-size:13px}
body.compactbar #homeBtn{flex:none}
#moreBtn{font-size:18px;line-height:1;padding:6px 10px;min-width:40px;min-height:36px}
#moreBtn.on{background:var(--surface-3);color:var(--on-accent);border-color:var(--surface-3)}
#moreMenu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px var(--shadow-color-strong);padding:10px 12px;display:flex;flex-direction:column;gap:10px;width:min(280px,calc(100vw - 16px))}
#moreMenu[hidden]{display:none}
#moreMenu .mmRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#moreMenu .mmL{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);width:100%}
#moreMenu #langs button{min-width:48px;min-height:38px}
#moreMenu .tg{font-size:15px;min-height:36px;display:flex;align-items:center;gap:6px}
#moreMenu #quizBtn{width:100%;min-height:40px;font-size:15px}
body.compactbar #sceneMenu{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:52px;width:auto;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px)}
body.compactbar #sceneMenu button[data-s]{min-height:44px;font-size:15px}
/* full scene name on phones: up to 2 lines, slightly smaller, instead of an ellipsis */
body.compactbar #sceneBtn{white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.15;font-size:13px;padding:4px 8px;text-align:left;max-height:40px}
body.compactbar #sceneBtn .car{font-size:.8em}
@media (max-width:360px){body.compactbar #sceneBtn{font-size:12px}}
/* progressive asset loading bar */
#loadBar{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:6;background:var(--glass-strong);border-radius:10px;padding:6px 12px;font-size:12.5px;font-weight:600;box-shadow:0 2px 8px var(--shadow-color);min-width:210px;pointer-events:none}
#loadBar[hidden]{display:none}#loadBar i{display:block;height:5px;margin-top:4px;border-radius:3px;background:linear-gradient(90deg,var(--accent-2),var(--ok));width:0;transition:width .3s}
/* label declutter: hidden/occluded labels fade (opacity only — no layout) */
.lab{transition:opacity .18s ease;will-change:opacity}
.lab.hid{opacity:0}
.lab.dim{opacity:.38}
.lab.hid.dim{opacity:0}
.lab.pin{opacity:1;outline:2px solid var(--accent-2);transition:none}
.lab.now{opacity:1;transition:none}

/* ---- shared scene picker (menu + landing): search, group chips, grouped lists ---- */
.sp-q{width:100%;font:inherit;font-size:16px;padding:9px 12px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface-2);color:inherit;min-height:42px}
.sp-q:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.sp-chips{display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.sp-chip{flex:none;font:inherit;font-size:13px;white-space:nowrap;border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:6px 11px;min-height:34px;cursor:pointer;color:inherit}
.sp-chip small{opacity:.6}.sp-chip.on{background:var(--accent-2-strong);border-color:var(--accent-2-strong);color:var(--on-accent)}
.sp-h small{opacity:.6;font-weight:400}
.sp-empty{text-align:center;color:var(--muted);padding:18px 0;margin:0}
.sp-grp[hidden],.sp [data-s][hidden]{display:none!important}
#sceneMenu .sp-tools{flex:none;padding:10px 12px 6px;border-bottom:1px solid var(--border);background:var(--surface);border-radius:12px 12px 0 0}
#sceneMenu .sp-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 12px 10px}
#sceneMenu .sp-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 14px}
#sceneMenu button[data-s]{min-width:0;overflow-wrap:anywhere}
#pickBox .sp-tools{position:sticky;top:0;z-index:2;background:var(--bg);padding:8px 0 6px;margin:0 -2px}
#pickBox .sp-h{margin:1.3em 0 .5em;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
#pickBox .card{min-width:0}
#sceneMenu .sp-chip:hover{border-color:var(--accent)}
#sceneMenu .sp-chip{border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:6px 11px;font-size:13px}#sceneMenu .sp-chip.on{background:var(--accent-2-strong);border-color:var(--accent-2-strong);color:var(--on-accent)}

/* ---- Lang3D theme layer: text color, glass, buttons, states ---- */
body{color:var(--text);background:var(--bg)}
a{color:var(--info)}
input,button{color:inherit}
#bar,#sceneMenu,#moreMenu,#quizBox,.exProg,.exNav,#loadBar{background:var(--glass-strong)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 #bar,#sceneMenu,#moreMenu,#quizBox,.exProg,.exNav,#loadBar,.lab{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
 #bar,.exProg,.exNav,#loadBar{background:var(--glass)}}
#bar button,#langs button,#sceneBtn,.exNav button,.sp-chip,.sp-q{color:var(--text);transition:background .15s,border-color .15s}
#bar button:hover,#langs button:hover,#sceneBtn:hover,.exNav button:hover{border-color:var(--accent-hover)}
#langs button.on,.sp-chip.on,#sceneMenu .sp-chip.on,#moreBtn.on,#exploreBtn.on{background:var(--btn-grad);border-color:transparent;color:var(--on-accent)}
#quizBtn{background:var(--btn-grad)!important;border-color:transparent!important;color:var(--on-accent)}
.hbtn{background:var(--btn-grad);border-color:var(--accent);box-shadow:0 6px 20px var(--shadow-glow)}
.hbtn.ghost{background:transparent;border-color:var(--border-strong);box-shadow:none}
.spk{background:var(--btn-grad)}
.tag{color:var(--text)}
#panel h3{color:var(--accent-2)}.ex .tr{color:var(--accent-2)}
.how li span{background:var(--accent-grad);color:var(--bg)}
.how li,.lg div,.card{box-shadow:var(--shadow-sm)}
.card small{color:var(--accent-2)}
.card:hover,.card:focus-visible{border-color:var(--accent-hover);box-shadow:0 10px 28px var(--shadow-glow)}
#sceneMenu .sp-tools{background:transparent}
#pickBox .sp-tools{background:var(--bg)}
#sceneMenu button[data-s]{color:var(--text)}#sceneMenu button[data-s].on{color:var(--text)}
.lab{background:var(--label-bg);color:var(--label-text);border:1px solid rgba(124,92,255,.35)}
.lab.pin{outline-color:var(--accent-2)}
#home{background:radial-gradient(1200px 500px at 15% -10%,rgba(124,92,255,.28),transparent 60%),radial-gradient(900px 420px at 95% 0,rgba(34,211,197,.18),transparent 60%),var(--bg)}
.hero .slogan{display:inline-block;margin:0 0 .9em;padding:4px 12px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--accent-soft);color:var(--text);font-size:14px;font-weight:600}
#quizBox{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
#quizBox.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--text)}
#quizBox.bad{border-color:var(--bad);background:var(--bad-bg);color:var(--text)}
#quizBox.ok,#quizBox.bad{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.dlg .who{color:var(--info)}

/* ---- full-screen stage + floating UI (popover / bottom sheet / subtitle / glass bar) ---- */
:root{--bar-h:56px;--sheet-h:0px;--pop-w:340px}
#bar{position:fixed;top:8px;left:8px;right:8px;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);z-index:20}
#layout{position:fixed;inset:0;display:block}
#stage,body.exploring #stage{position:absolute;inset:0;width:100%;height:100%}
#popLine{position:absolute;left:0;top:0;height:2px;transform-origin:0 50%;background:linear-gradient(90deg,var(--accent-2),var(--accent-hover));pointer-events:none;z-index:7;border-radius:2px;box-shadow:0 0 6px var(--shadow-glow)}
#popLine::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 3px rgba(34,211,197,.3)}
#popLine[hidden]{display:none}
#panel{position:absolute;left:0;top:0;width:var(--pop-w);max-width:calc(100vw - 20px);max-height:min(62vh,calc(100vh - var(--bar-h) - 24px));overflow:auto;overscroll-behavior:contain;padding:12px 16px 14px;
 background:var(--glass-strong);border:1px solid var(--border-strong);border-left:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow);z-index:8;color:var(--text)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#panel{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}}
#panel[hidden]{display:none}
#panel .grab{display:none}
#panel .word{font-size:28px;margin:.15em 0}
#panel .mean{font-size:18px;margin:.2em 0 .4em}
#panel .ex{background:var(--surface-2)}
#panel .more{display:none}#panel.expanded .more{display:block}
#panel .moreBtn{display:block;width:100%;margin-top:8px;border:1px solid var(--border-strong);background:var(--accent-soft);color:var(--text);border-radius:var(--radius-sm);padding:7px 10px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
#panel .moreBtn:hover{border-color:var(--accent-hover)}
#panel .moreAct{display:flex;gap:10px;align-items:center;margin-top:12px}
#panel .qzBtn{border:0;background:var(--btn-grad);color:var(--on-accent);border-radius:var(--radius-sm);padding:7px 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
#panel .score{color:var(--muted);font-size:13px}
#panel.offscreen{opacity:.92}
/* explore dialogue: subtitle / speech bubble at the bottom */
#panel[data-mode=dlg]{left:50%;top:auto;bottom:calc(40px + env(safe-area-inset-bottom));transform:translateX(-50%)!important;width:min(720px,calc(100% - 210px));max-height:38vh;border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 6px}
#panel[data-mode=dlg] .word{font-size:20px}
#panel[data-mode=dlg] .dlg{background:var(--surface-2);border-left:3px solid var(--accent-2)}
#hint{z-index:3}
.exTop{top:calc(var(--bar-h) + 6px)}
#quizBox{top:calc(var(--bar-h) + 8px);z-index:9}
/* phones / coarse pointer: bottom sheet */
body.sheetmode #panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;max-height:55vh;max-height:55dvh;transform:none;border-radius:20px 20px 0 0;border-bottom:0;padding:6px 16px calc(14px + env(safe-area-inset-bottom));transition:transform .22s ease}
body.sheetmode #panel.dragging{transition:none}
body.sheetmode #panel .grab{display:block;width:44px;height:5px;border-radius:3px;background:var(--border-strong);margin:4px auto 8px;cursor:grab;touch-action:none}
body.sheetmode #panel .top{touch-action:none}
body.sheetmode #panel[data-mode=dlg]{left:0;transform:none!important;width:auto;max-height:42vh;max-height:42dvh}
body.exploring.sheetmode #panel{max-height:40vh;max-height:40dvh}
body.sheetmode .exJoy{bottom:calc(14px + var(--sheet-h) + env(safe-area-inset-bottom))}
body.sheetmode .exPad{bottom:calc(14px + var(--sheet-h))}
body.sheetmode #hint{display:none}
body.compactbar #sceneMenu{top:calc(var(--bar-h) + 6px);max-height:calc(100dvh - var(--bar-h) - 16px)}
#stage{z-index:0}

/* learning-language picker: 7 languages (flag + code); wraps instead of overflowing */
#langs{flex-wrap:wrap;min-width:0}#langs button{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}#langs .fl{font-size:15px;line-height:1}
#moreMenu .mmRow[data-slot=langs]{flex-wrap:wrap}#moreMenu #langs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}#moreMenu #langs button{min-width:0;justify-content:center;padding:6px 4px}
@media (max-width:600px){#langs{gap:3px}}
.pend{display:inline-block;margin-left:6px;font-size:12px;color:var(--muted,#8a8a8a);font-weight:400}
/* ---- account / premium ---- */
#acct{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}#acct[hidden]{display:none}
#acct .acOff{font-size:12.5px;font-weight:700;color:var(--muted);max-width:11em;line-height:1.25}
#acct .av{width:28px;height:28px;border-radius:50%;object-fit:cover;display:inline-grid;place-items:center;background:var(--accent-soft-strong);color:var(--text);font-weight:700;font-size:13px}
#acct .acName{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--muted)}
.acBtn{border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer;text-decoration:none;font:inherit;font-size:13px}
.acBtn.up{background:var(--btn-grad);border-color:transparent;color:var(--on-accent)}
.prem{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1a1200;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700}
body.compactbar #moreMenu #acct{margin-left:0;width:100%}body.compactbar #moreMenu .acName{max-width:120px}
.lk{margin-left:auto;font-size:11px;padding:1px 6px;border-radius:999px;white-space:nowrap}.lk.free{background:var(--ok-bg);color:var(--ok)}.lk.open{color:var(--ok)}.lk.locked{background:transparent}
.card .lk{position:absolute;top:8px;right:8px}.card{position:relative}
.lockBox{margin:10px 0;padding:12px;border:1px dashed var(--border-strong);border-radius:12px;text-align:center;background:var(--accent-soft)}
.lockBox .blur{filter:blur(5px);user-select:none;color:var(--muted);margin-bottom:6px}.lockBox p{margin:6px 0 10px}
.lockBox .hbtn,.mBox .hbtn{display:inline-block;border:0;border-radius:999px;padding:9px 16px;background:var(--btn-grad);color:#fff;font:inherit;font-weight:600;cursor:pointer}
#vgModal{position:fixed;inset:0;z-index:200;background:rgba(5,8,18,.6);display:grid;place-items:center;padding:12px}#vgModal[hidden]{display:none}
.mBox{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px;width:min(560px,100%);max-height:calc(100vh - 24px);overflow:auto;color:var(--text)}
.mBox h2{margin:0 28px 8px 0;font-size:20px}.mClose{position:absolute;top:10px;right:10px;border:0;background:transparent;color:var(--text);font-size:18px;cursor:pointer}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.plan{display:flex;flex-direction:column;gap:3px;text-align:left;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);border-radius:12px;padding:12px;cursor:pointer;font:inherit}
.plan:hover{border-color:var(--accent-hover)}.plan .amt{font-size:20px;font-weight:700;color:var(--accent-text)}.plan s,.plan small,.mute{color:var(--muted)}
.pay{display:flex;gap:14px;flex-wrap:wrap}.qr img,.qrPh{width:220px;height:220px;border-radius:12px;background:#fff}.qrPh{display:grid;place-items:center;text-align:center;padding:16px;color:#333;background:repeating-linear-gradient(45deg,#f2f2f2 0 10px,#e6e6e6 10px 20px)}
.pay dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0;flex:1;min-width:200px}.pay dt{color:var(--muted)}.pay dd{margin:0;word-break:break-all}.code{color:var(--warn);letter-spacing:.5px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl th,.tbl td{border-bottom:1px solid var(--border);padding:6px;text-align:left}
#vgToast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--surface-3);color:var(--text);padding:10px 16px;border-radius:999px;z-index:300;box-shadow:var(--shadow)}#vgToast[hidden]{display:none}
footer a{color:var(--accent-text)}
.testB{font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;background:#f5b400;color:#000;vertical-align:middle}

/* ===================== UI5: light theme (default), compact header, dropdowns, lesson cards, QR states ===================== */
html[data-theme=light]{color-scheme:light;
 --bg:#f7f7fb;--bg-hero:#eef0fa;--surface:#ffffff;--surface-2:#f1f2f8;--surface-3:#e6e8f2;
 --glass:rgba(255,255,255,.80);--glass-strong:rgba(255,255,255,.94);--glass-blur:saturate(170%) blur(14px);
 --border:#d9dcea;--border-strong:#7c86a8;
 --text:#0f1a3a;--muted:#4a5878;--on-accent:#ffffff;
 --accent:#5b3df5;--accent-hover:#4c2fe0;--accent-text:#4a2fd0;--accent-2:#0f766e;--accent-2-strong:#0f766e;
 --accent-grad:linear-gradient(135deg,#6d4aff 0%,#14b8a6 100%);--btn-grad:linear-gradient(135deg,#5b3df5 0%,#4338ca 100%);
 --accent-soft:rgba(91,61,245,.09);--accent-soft-strong:rgba(91,61,245,.18);--accent-a80:rgba(91,61,245,.8);
 --info:#1d5fb8;--ok:#047857;--ok-bg:#e3f6ee;--bad:#be123c;--bad-bg:#fde8ec;--warn:#9a5800;
 --label-bg:rgba(255,255,255,.92);--label-text:#0f1a3a;--text-shadow:rgba(0,0,0,.75);
 --pad-bg:rgba(255,255,255,.6);--joy-bg-1:rgba(91,61,245,.16);--joy-bg-2:rgba(255,255,255,.6);--joy-border:rgba(15,118,110,.7);--knob:rgba(15,26,58,.75);--knob-on:#0f1a3a;
 --shadow-color:rgba(15,26,58,.08);--shadow-color-strong:rgba(15,26,58,.14);--shadow-glow:rgba(91,61,245,.18)}
html[data-theme=light] #home{background:radial-gradient(1200px 500px at 15% -10%,rgba(124,92,255,.14),transparent 60%),radial-gradient(900px 420px at 95% 0,rgba(20,184,166,.12),transparent 60%),var(--bg)}
html[data-theme=light] .lab{border-color:rgba(91,61,245,.35);box-shadow:0 1px 4px var(--shadow-color-strong)}
html[data-theme=light] .how li span{color:#fff}
html[data-theme=light] #vgModal{background:rgba(15,26,58,.45)}
html[data-theme=light] .prem{color:#1a1200}
html[data-tl=zh-TW] body{font-family:system-ui,"Segoe UI","Noto Sans",Roboto,"Noto Sans TC","Noto Sans CJK TC","PingFang TC","Microsoft JhengHei",sans-serif}
:lang(zh-TW){font-family:"Noto Sans TC","Noto Sans CJK TC","PingFang TC","Microsoft JhengHei",sans-serif}

/* ---- compact one-row header (desktop) ---- */
#bar{flex-wrap:nowrap;gap:8px;min-width:0}
#bar>*{flex:none}
#title{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sceneBtn{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg{display:inline-flex;align-items:stretch;border:1px solid var(--border-strong);border-radius:10px;overflow:hidden;background:var(--surface-2)}
.seg>*{border:0!important;border-radius:0!important;margin:0}
.seg>*+*{border-left:1px solid var(--border)!important}
.seg .tg{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;cursor:pointer;white-space:nowrap}
.seg .tg input{accent-color:var(--accent);margin:0}
.seg .tg:has(input:checked){background:var(--accent-soft-strong)}
.seg button{white-space:nowrap;background:transparent}
.seg button[hidden]{display:none}
#bar .seg #quizBtn{background:var(--btn-grad)!important}
#bar button:focus-visible,.seg .tg:focus-within,.lcard:focus-visible,.langList [data-l]:focus-visible,.acMenu [role=menuitem]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* language dropdown */
.langDD{position:relative;display:inline-flex}
#langs .langBtn{display:inline-flex;align-items:center;gap:6px;max-width:220px;white-space:nowrap}
#langs .langBtn .ln{overflow:hidden;text-overflow:ellipsis;min-width:0}
#langs .car,#acct .car{font-size:.75em;opacity:.8}
.langList{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:280px;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.langList[hidden]{display:none}
#langs .langList button{display:grid;grid-template-columns:1.6em 1fr auto;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:8px 10px;font:inherit;font-size:14px;color:var(--text);cursor:pointer}
#langs .langList button small{color:var(--muted);font-size:12px}
#langs .langList button:hover{background:var(--accent-soft)}
#langs .langList button.on{background:var(--accent-soft-strong);color:var(--text);font-weight:600}
.themeBtn{min-width:38px}
/* account dropdown */
#acct{position:relative;flex-wrap:nowrap;margin-left:0}
.avBtn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 3px!important;border-radius:999px!important}
#acct .prem.mini{padding:1px 5px;font-size:11px}
.acMenu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:240px;display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.acMenu[hidden]{display:none}
.acHead{display:flex;gap:10px;align-items:center;padding:4px 6px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.acHead div{display:flex;flex-direction:column;min-width:0}.acHead small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis}
#acct .acHead .acName{color:var(--text);font-size:14px;max-width:170px}
.acMenu .prem{align-self:flex-start;margin:4px 6px}
.acMenu .acBtn.up{margin:4px 0;text-align:center}
.acItem{display:block;width:100%;text-align:left;border:0!important;background:transparent!important;color:var(--text)!important;border-radius:8px!important;padding:8px 10px!important;font:inherit;font-size:14px!important;text-decoration:none;cursor:pointer}
.acItem:hover{background:var(--accent-soft)!important}
@media (max-width:1180px){#sceneBtn{max-width:200px}#langs .langBtn{max-width:170px}}
@media (max-width:1100px){#title{display:none}#bar .scenepick{margin-right:auto}}
/* compact (☰) mode: everything inside the menu, still one row bar */
body.compactbar .langList,body.compactbar .langList[hidden]{position:static;display:grid;grid-template-columns:1fr 1fr;min-width:0;box-shadow:none;border:0;padding:0;background:transparent;width:100%}
body.compactbar #langs{display:block;width:100%}
body.compactbar #langs .langBtn{display:none}
body.compactbar #langs .langList button{grid-template-columns:1.5em 1fr;padding:8px;font-size:13.5px;min-height:40px;border:1px solid var(--border)}
body.compactbar #langs .langList button small{display:none}
body.compactbar .avBtn{display:none!important}
body.compactbar .acMenu,body.compactbar .acMenu[hidden]{position:static;display:flex;box-shadow:none;border:0;padding:0;min-width:0;width:100%;background:transparent}
body.compactbar #moreMenu .mmModes{flex-wrap:wrap}
body.compactbar #moreMenu .themeBtn{width:100%;min-height:40px;text-align:left}
body.compactbar #moreMenu .themeBtn::after{content:" Giao diện tối"}
html[data-theme=dark] body.compactbar #moreMenu .themeBtn::after{content:" Giao diện sáng"}
body.compactbar .seg .tg{display:none}
#moreMenu .tg{border:1px solid var(--border-strong);border-radius:8px;padding:6px 10px}
#moreMenu{width:min(340px,calc(100vw - 16px));max-height:calc(100dvh - var(--bar-h) - 16px);overflow:auto}

/* ---- lesson card grid (menu + home) ---- */
.sp-items.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
#sceneMenu .sp-items.cgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;padding-bottom:4px}
.lcard,#sceneMenu .lcard{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;width:auto;padding:0!important;text-align:left;text-decoration:none;color:var(--text);font:inherit;
 background:var(--surface);border:1px solid var(--border)!important;border-radius:14px!important;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,border-color .15s}
.lcard:hover,#sceneMenu .lcard:hover{transform:translateY(-2px);border-color:var(--accent-hover)!important;box-shadow:0 10px 24px var(--shadow-glow);background:var(--surface)}
#sceneMenu .lcard.on{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--accent-soft-strong);background:var(--surface)}
.lcard .th{position:relative;display:block;aspect-ratio:16/10;background:linear-gradient(135deg,hsl(var(--h) 70% 62%),hsl(calc(var(--h) + 50) 65% 42%));overflow:hidden}
#sceneMenu .lcard .th span,.lcard .th .em{position:absolute;inset:0;display:grid;place-items:center;width:auto;font-size:40px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.lcard .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lcard .cb{display:flex;flex-direction:column;gap:3px;padding:9px 11px 11px;min-width:0;flex:1}
.lcard .cn{font-size:15px;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.lcard .cg{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcard .cm{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:auto;padding-top:4px;min-height:22px}
.lcard .lkSlot:empty,.lcard .lpSlot:empty{display:none}
.lcard .lk{position:static;margin:0;display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid transparent}
.lcard .lk.free{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.lcard .lk.locked{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}
.lcard .lk.open{background:var(--accent-soft);color:var(--accent-text)}
.lcard.isLocked .th::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28))}
.lcard .lp{position:relative;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.lcard .lp i{display:inline-block;width:38px;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;position:relative}
.lcard .lp i{background:linear-gradient(90deg,var(--accent-2) 0 var(--w,0),var(--surface-3) 0)}
.lcard .lp.done{color:var(--ok);font-weight:600}
@media (max-width:600px){.sp-items.cgrid,#sceneMenu .sp-items.cgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lcard .th .em{font-size:32px}.lcard .cn{font-size:14px}}
@media (max-width:389px){.sp-items.cgrid,#sceneMenu .sp-items.cgrid{grid-template-columns:minmax(0,1fr)}.lcard{flex-direction:row}.lcard .th{width:42%;flex:none;aspect-ratio:16/10}}
body.compactbar #sceneMenu .lcard{min-height:0}

/* ---- QR payment states ---- */
.st{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.st[data-status=pending] .spin,.st .spin{width:20px;height:20px;flex:none;border-radius:50%;border:3px solid var(--accent-soft-strong);border-top-color:var(--accent);animation:vgspin .8s linear infinite}
.st.warn{border-color:var(--warn);color:var(--text)}
@keyframes vgspin{to{transform:rotate(360deg)}}
.paidSt{flex-direction:column;text-align:center;padding:18px;font-size:16px;font-weight:600}
.okAnim svg{width:64px;height:64px;display:block}
.okAnim circle{fill:none;stroke:var(--accent-soft-strong);stroke-width:4;stroke-dasharray:40 105;transform-origin:center;animation:vgspin .8s linear infinite}
.okAnim path{fill:none;stroke:var(--ok);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.paidSt.ok .okAnim circle{animation:none;stroke:var(--ok);stroke-dasharray:none;fill:var(--ok-bg);transition:fill .3s}
.paidSt.ok .okAnim path{animation:vgdraw .45s .1s ease-out forwards}
.paidSt.ok .stT{color:var(--ok)}
@keyframes vgdraw{to{stroke-dashoffset:0}}
.pay.done{opacity:.35;filter:grayscale(1);transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.st .spin,.okAnim circle{animation-duration:2.4s}.paidSt.ok .okAnim path{animation:none;stroke-dashoffset:0}}

/* ---- home 3D hero ---- */
#home{overflow-x:hidden}
.hnr{display:flex;gap:8px;align-items:center}.hnav .themeBtn{padding:8px 11px;min-width:40px}
.hero{position:relative;max-width:none;min-height:min(520px,70vh);display:flex;align-items:center;isolation:isolate}
.heroC{position:relative;z-index:1;max-width:620px}
.hero3d{position:absolute;z-index:0;top:-70px;bottom:-10px;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;pointer-events:none;
 background:radial-gradient(600px 360px at 72% 40%,rgba(124,92,255,.22),transparent 70%),radial-gradient(500px 300px at 88% 70%,rgba(34,211,197,.18),transparent 70%)}
.hero3d::before{content:"";position:absolute;left:-50%;right:-50%;bottom:-10%;height:62%;transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;
 background-image:linear-gradient(var(--grid-line,rgba(124,92,255,.22)) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line,rgba(124,92,255,.22)) 1px,transparent 1px);background-size:46px 46px;
 -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%)}
html[data-theme=light] .hero3d{--grid-line:rgba(91,61,245,.14)}
.hero3d.h3on::before{opacity:0;transition:opacity .6s}
.hero3d::after{content:"";position:absolute;inset:0;background:url(assets/hero3d.webp) right center/auto 100% no-repeat;opacity:.9;transition:opacity .6s}
.hero3d.h3on::after,.hero3d[data-hero=on]::after{opacity:0}
.hero3d .h3c{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity .8s}
.hero3d.h3on .h3c{opacity:1}
.hero3d .h3l{position:absolute;inset:0;pointer-events:none}
.h3w{display:flex;flex-direction:column;align-items:center;padding:4px 10px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--border);box-shadow:var(--shadow-sm);color:var(--text);font-size:15px;line-height:1.1;transition:opacity .2s,transform .2s;white-space:nowrap}
.h3w b{font-weight:700}.h3w small{font-size:9.5px;color:var(--muted);letter-spacing:.06em}
.h3w.sw{opacity:0;transform:translateY(4px)}
.h3tilt{position:absolute;right:12px;bottom:12px;pointer-events:auto;border:1px solid var(--border-strong);background:var(--glass-strong);color:var(--text);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px}
@media (max-width:899px){.hero3d .h3c,.hero3d .h3l{opacity:.55}.hero3d.h3on .h3c{opacity:.55}.hero{min-height:440px}}
/* lesson card 3D tilt (fine pointer) */
.sp.tilt .sp-items{perspective:900px}
.sp.tilt .lcard{transform-style:preserve-3d;will-change:transform}
.sp.tilt .lcard:hover{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px);box-shadow:0 18px 34px var(--shadow-glow),0 4px 10px var(--shadow-color-strong)}
.sp.tilt .lcard .th::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(240px 160px at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .2s}
.sp.tilt .lcard:hover .th::before{opacity:1}
/* card overrides vs. legacy menu-item rules (#sceneMenu button[data-s] span{width:1.4em}) */
#sceneMenu .lcard span{width:auto;text-align:left}
#sceneMenu .lcard .th{display:block;width:100%}
#sceneMenu .lcard .th .em{display:grid;text-align:center}
#sceneMenu .lcard .cb,#sceneMenu .lcard .cm{display:flex}
#sceneMenu .lcard .lk,#sceneMenu .lcard .lp{display:inline-flex}
#sceneMenu{background:var(--surface)}
body.compactbar .langList,body.compactbar .langList[hidden]{grid-template-columns:repeat(2,minmax(0,1fr))}
body.compactbar #langs .langList button{min-width:0}
body.compactbar #langs .langList button .ln{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
body.compactbar #langs .langList [data-l="zh-TW"]{grid-column:1/-1}
#sceneMenu .lcard[data-s] span{width:auto;text-align:left}
#sceneMenu .lcard[data-s] .th .em{text-align:center}

/* ===================== Japan world (/nhat): sakura + wood tones, light & dark ===================== */
html[data-world=jp]{--jp-wood:#7a4a24;--jp-wood-2:#a8703c;--jp-sakura:#f2a7bd;--jp-sakura-ink:#9d2c55;--jp-red:#b3261e;--jp-paper:#fbf6ee;--jp-sun:#d6453d;--jp-fuji:#4a5f86;--jp-snow:#ffffff}
html[data-world=jp][data-theme=light]{--bg:#fbf6ee;--surface:#fffdf9;--surface-2:#f5ede0;--surface-3:#eadcc6;--border:#e3d3bb;--border-strong:#8f7356;--text:#2b1d12;--muted:#5d4a39;
 --accent:#b3261e;--accent-hover:#9c1f18;--accent-text:#9c1f18;--accent-2:#7a4a24;--accent-2-strong:#7a4a24;--btn-grad:linear-gradient(135deg,#b3261e 0%,#8c1d17 100%);--accent-soft:rgba(179,38,30,.08);--accent-soft-strong:rgba(179,38,30,.16);--shadow-glow:rgba(179,38,30,.16);--info:#7a4a24}
html[data-world=jp][data-theme=dark]{--bg:#17110d;--surface:#211812;--surface-2:#2b2018;--surface-3:#3a2b20;--border:#3f3024;--border-strong:#8a6f55;--text:#f6ece0;--muted:#cbb59d;
 --accent:#e0566b;--accent-hover:#ea6c80;--accent-text:#f5a3b5;--accent-2:#e3b07a;--accent-2-strong:#9a5f2c;--btn-grad:linear-gradient(135deg,#c2384d 0%,#8f2333 100%);--accent-soft:rgba(242,167,189,.12);--accent-soft-strong:rgba(242,167,189,.22);--shadow-glow:rgba(242,167,189,.18);--info:#f2c48d;--jp-fuji:#8aa0c8;--jp-snow:#e9eef7;--jp-sun:#e0566b}
body.world-jp #home{background:
 radial-gradient(800px 380px at 85% -5%,color-mix(in srgb,var(--jp-sakura) 35%,transparent),transparent 70%),
 radial-gradient(circle at 50% 100%,transparent 18px,color-mix(in srgb,var(--jp-wood-2) 9%,transparent) 19px 21px,transparent 22px) 0 0/44px 22px,
 var(--bg)}
.jpbg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hwrap.jp{position:relative;z-index:1}
.sakura i{position:absolute;top:-24px;left:var(--x);width:14px;height:11px;border-radius:12px 1px 12px 1px;background:linear-gradient(135deg,#ffd6e2,var(--jp-sakura));opacity:.85;transform:scale(var(--s));animation:jpfall var(--d) linear var(--dl) infinite}
@keyframes jpfall{0%{transform:translate(0,0) rotate(0) scale(var(--s))}50%{transform:translate(40px,55vh) rotate(200deg) scale(var(--s))}100%{transform:translate(-20px,110vh) rotate(420deg) scale(var(--s))}}
@media (prefers-reduced-motion:reduce){.sakura i{animation:none;top:calc(var(--x) * .6)}}
.jpw{font-size:15px;color:var(--text);padding:4px 12px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface)}
.jp .logo{text-decoration:none;color:var(--text);font-weight:800}
.jphero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:center;padding:4vh 0 3vh;min-height:min(460px,64vh)}
.jphero .heroC{order:0}.jpart{order:1}
.jphero h1{font-size:clamp(30px,5vw,52px);line-height:1.1;margin:.2em 0}.jphero h1 span{display:block;font-size:.55em;color:var(--accent-text);letter-spacing:.12em;margin-top:.25em}
.jpsvg{width:100%;height:auto;filter:drop-shadow(0 10px 24px var(--shadow-color-strong))}
.jpsvg .sun{fill:var(--jp-sun);opacity:.9}.jpsvg .fuji{fill:var(--jp-fuji)}.jpsvg .snow{fill:var(--jp-snow)}.jpsvg .torii{fill:var(--jp-red)}
html[data-world=jp][data-theme=dark] .jpsvg .torii{fill:#d2453a}
.jpphr h2,.jp .pick h2{font-size:20px}
.phr{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.phr div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--jp-wood-2);box-shadow:var(--shadow-sm)}
.phr b{font-size:20px}.phr small{color:var(--accent-text)}.phr span{color:var(--muted);font-size:13px}
.jp .lcard{border-top:3px solid var(--jp-wood-2)!important}
.jp .sp-tools{background:var(--bg)}
@media (max-width:700px){.jphero{grid-template-columns:1fr;min-height:0}.jpart{order:-1;max-width:300px;margin:0 auto}}
.hnav .hbtn{white-space:nowrap}
@media (max-width:600px){.hide-s{display:none}.jp .hnav .jpw{display:none}.hnav .hnr{gap:6px}.hnav .hbtn{padding:7px 10px;font-size:13.5px}.hnav .wlink{padding:7px 8px}}
@media (max-width:380px){.hnav .hbtn[href="#pick"]{display:none}}

/* ===================== fix3: pan hint, mobile language list, compact lesson cards ===================== */
#panHint{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:7px 8px 7px 14px;border-radius:999px;background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow);font-size:13.5px;line-height:1.3;animation:phIn .3s ease}
#panHint button{flex:none;width:28px;height:28px;border-radius:50%;border:0;background:var(--surface-2);color:var(--text);font:inherit;cursor:pointer}
@media (hover:none),(pointer:coarse){#panHint .ph-d{display:none}}
body.exploring #panHint,body.sheetmode #panHint{display:none}
@keyframes phIn{from{opacity:0;transform:translate(-50%,8px)}}
/* language list inside ☰ menu: #langs was a 4-col grid, so the whole list sat in one 1/4-width cell → 1 char per line */
#moreMenu #langs,body.compactbar #moreMenu #langs{display:block;width:100%}
body.compactbar .langList,body.compactbar .langList[hidden]{display:flex;flex-direction:column;gap:4px;grid-template-columns:none;width:100%}
body.compactbar #langs .langList button,body.compactbar #langs .langList [data-l="zh-TW"]{grid-column:auto;display:grid;grid-template-columns:1.6em max-content minmax(0,1fr);width:100%;justify-content:stretch;padding:9px 12px;min-height:44px;text-align:left}
body.compactbar #langs .langList button .ln{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal}
body.compactbar #langs .langList button small{display:block;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px}
/* lesson cards: legacy #sceneMenu button[data-s]{align-items:center;padding;min-height} out-specifies .lcard → thumb width 0 / squeezed meta */
#sceneMenu button.lcard[data-s],body.compactbar #sceneMenu button.lcard[data-s]{display:flex;flex-direction:column;align-items:stretch;padding:0;min-height:0;font-size:inherit;text-align:left;overflow-wrap:normal}
.lcard .cm>span,#sceneMenu .lcard[data-s] .cm span{width:auto;white-space:nowrap;flex:none}
.lcard .lk{display:inline-flex;align-items:center;line-height:1.3}
@media (max-width:600px){
 .sp-items.cgrid,#sceneMenu .sp-items.cgrid{grid-template-columns:minmax(0,1fr);gap:8px}
 .lcard,#sceneMenu .lcard,#sceneMenu button.lcard[data-s],body.compactbar #sceneMenu button.lcard[data-s]{flex-direction:row;align-items:stretch;min-height:0}
 .lcard .th,#sceneMenu .lcard .th,#sceneMenu .lcard[data-s] span.th{width:112px;flex:none;aspect-ratio:auto;min-height:66px;align-self:stretch}
 .lcard .th .em{font-size:28px}
 .lcard .cb{padding:8px 10px;gap:2px;justify-content:center}
 .lcard .cn{font-size:14.5px;-webkit-line-clamp:1;line-clamp:1}
 .lcard .cm{margin-top:4px;padding-top:0;min-height:0;gap:6px}
}
/* ===== scene-entry loading overlay (js/loader.js) ===== */
#sceneLoad{--sl-bg:color-mix(in srgb,var(--bg) 88%,var(--accent) 12%);--sl-card:color-mix(in srgb,var(--surface) 92%,transparent);--sl-fill:var(--accent-grad);--sl-track:var(--accent-soft);
 position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
 background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),var(--sl-bg);color:var(--text);opacity:0;transition:opacity .22s ease;overflow:hidden;contain:layout paint}
#sceneLoad[hidden]{display:none}#sceneLoad.in{opacity:1}#sceneLoad.out{opacity:0;transition:opacity .36s ease}
#sceneLoad .sl-card{position:relative;width:min(380px,100%);max-width:100%;background:var(--sl-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px 20px 18px;text-align:center;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
#sceneLoad .sl-em{font-size:44px;line-height:1;animation:slBob 2.4s ease-in-out infinite}
#sceneLoad .sl-jp{display:none}
#sceneLoad .sl-name{margin:.35em 0 .15em;font-size:20px;color:var(--text);overflow-wrap:anywhere}
#sceneLoad .sl-st{margin:0 0 12px;font-size:13.5px;color:var(--muted);min-height:1.3em}
#sceneLoad .sl-bar{position:relative;height:8px;border-radius:var(--radius-pill);background:var(--sl-track);overflow:hidden}
#sceneLoad .sl-bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:var(--sl-fill);border-radius:inherit}
#sceneLoad .sl-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:slShine 1.6s linear infinite}
#sceneLoad .sl-pct{margin-top:6px;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted)}
#sceneLoad .sl-tip{margin-top:14px;padding:10px 12px;border-radius:var(--radius);background:var(--surface-2);display:flex;flex-direction:column;gap:2px;font-size:14px;min-height:92px;justify-content:center}
#sceneLoad .sl-tip small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2-strong)}
#sceneLoad .sl-tip b{font-size:22px;color:var(--text)}#sceneLoad .sl-rd{color:var(--muted);font-size:13px}#sceneLoad .sl-mn{color:var(--accent-text);font-weight:600}
#sceneLoad .sl-err p{margin:12px 0 8px;font-size:14px}#sceneLoad.err .sl-bar i{background:var(--bad)}#sceneLoad.err .sl-bar i::after,#sceneLoad.err .sl-em{animation:none}
#sceneLoad .sl-petals{display:none}
html[data-theme=light] #sceneLoad .sl-tip small{color:var(--accent-2-strong)}
/* Japan world: washi paper + wood frame + sakura bar and petals */
html[data-world=jp] #sceneLoad{--sl-bg:color-mix(in srgb,var(--bg) 90%,var(--jp-sakura) 10%);--sl-fill:linear-gradient(90deg,var(--jp-sakura),var(--jp-sakura-ink));--sl-track:color-mix(in srgb,var(--jp-wood-2) 22%,transparent)}
html[data-world=jp] #sceneLoad .sl-card{border:2px solid var(--jp-wood-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--jp-wood) 18%,transparent),var(--shadow-sm)}
html[data-world=jp] #sceneLoad .sl-jp{display:block;font-size:12px;letter-spacing:.3em;color:var(--jp-sakura-ink);margin-top:6px}
html[data-world=jp][data-theme=dark] #sceneLoad .sl-jp{color:var(--jp-sakura)}
html[data-world=jp] #sceneLoad .sl-tip small{color:var(--jp-wood-2)}html[data-world=jp] #sceneLoad .sl-mn{color:var(--jp-sakura-ink)}html[data-world=jp][data-theme=dark] #sceneLoad .sl-mn{color:var(--jp-sakura)}
html[data-world=jp] #sceneLoad .sl-petals{display:block;position:absolute;inset:0;pointer-events:none}
#sceneLoad .sl-petals i{position:absolute;top:-6%;left:var(--x);width:10px;height:8px;border-radius:80% 0 80% 0;background:var(--jp-sakura);opacity:.55;animation:slFall var(--d) linear var(--dl) infinite}
@keyframes slFall{to{transform:translate(-40px,110vh) rotate(540deg)}}
@keyframes slShine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes slBob{50%{transform:translateY(-4px)}}
/* ===== skeletons + small spinners ===== */
.skel{position:relative;color:transparent!important;background:var(--surface-2)!important;border-radius:6px;overflow:hidden}.skel *{visibility:hidden}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 9%,transparent),transparent);transform:translateX(-100%);animation:skel 1.3s ease-in-out infinite}
@keyframes skel{to{transform:translateX(100%)}}
.lcard .th.ld::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);transform:translateX(-100%);animation:skel 1.4s ease-in-out infinite;z-index:1}
.acSkel{display:inline-block;width:92px;height:30px;border-radius:var(--radius-pill)}
.qrSkel{width:220px;height:220px;max-width:100%;border-radius:var(--radius)}.paySkel dt,.paySkel dd{height:14px;margin:6px 0;min-width:60px}.paySkel dd{width:70%}
.ldRow{display:flex;align-items:center;gap:8px;color:var(--muted)}.ldRow .spin{width:18px;height:18px;flex:none;border-radius:50%;border:3px solid var(--accent-soft-strong);border-top-color:var(--accent);animation:vgspin .8s linear infinite}
.spk.busy{position:relative;color:transparent}.spk.busy::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:vgspin .7s linear infinite}
@media (max-width:600px){#sceneLoad .sl-card{padding:18px 14px 14px}#sceneLoad .sl-em{font-size:38px}#sceneLoad .sl-name{font-size:18px}#sceneLoad .sl-tip b{font-size:20px}}
@media (prefers-reduced-motion:reduce){#sceneLoad,#sceneLoad.out{transition:none}#sceneLoad .sl-em,#sceneLoad .sl-bar i::after,#sceneLoad .sl-petals i,.skel::after,.lcard .th.ld::after{animation:none}#sceneLoad .sl-petals{display:none}.ldRow .spin,.spk.busy::after{animation-duration:2.4s}}
/* ---------- guide mode (js/guide.js): mascot + speech bubble + controls ---------- */
#guideBtn.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#guideUI{position:absolute;inset:0;pointer-events:none;z-index:6;--gm:118px;--gd-skin:#8fd8cf;--gd-skin2:#6cc4ba;--gd-belly:#f4fbf8;--gd-ink:#20334a;--gd-cheek:#ffb4b4;--gd-sprout:#5bb36a;--gd-hand:#ffd9a8}
html[data-theme=dark] #guideUI{--gd-skin:#5fb6ad;--gd-skin2:#3f968d;--gd-belly:#d7efe9;--gd-ink:#10202e;--gd-cheek:#e98f9a;--gd-sprout:#7bd08a;--gd-hand:#e8c08c}
html[data-world=jp] #guideUI{--gd-skin:#f3b6c4;--gd-skin2:#e597aa;--gd-belly:#fff4f2;--gd-sprout:#d9667c}
html[data-world=jp][data-theme=dark] #guideUI{--gd-skin:#d98ea0;--gd-skin2:#bb6e82;--gd-belly:#f6dfe0}
#guideUI>*{pointer-events:auto}
.gd-mascot{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:var(--gm);cursor:pointer;filter:drop-shadow(0 6px 10px var(--shadow-color,rgba(0,0,0,.2)))}
.gm-svg{width:100%;height:auto;display:block;overflow:visible}
.gm-shadow{fill:rgba(0,0,0,.14)}
.gm-skin{fill:var(--gd-skin);stroke:var(--gd-skin2);stroke-width:2}
.gm-belly{fill:var(--gd-belly);opacity:.9}
.gm-eye ellipse{fill:var(--gd-ink)}.gm-glint{fill:#fff}
.gm-cheek{fill:var(--gd-cheek);opacity:.75}
.gm-smile{fill:none;stroke:var(--gd-ink);stroke-width:3;stroke-linecap:round}
.gm-mouth{fill:#7a2d3a;stroke:var(--gd-ink);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.gm-arm{fill:none;stroke:var(--gd-skin2);stroke-width:7;stroke-linecap:round}.gm-hand{fill:var(--gd-hand);stroke:var(--gd-skin2);stroke-width:1.5}
.gm-sprout{fill:var(--gd-sprout);stroke:var(--gd-sprout);stroke-width:3;stroke-linecap:round}
.gm-body,.gm-armL,.gm-armR,.gm-eye,.gm-sprout{transform-box:fill-box}
.gm-body{transform-origin:50% 100%;animation:gmBreath 3.2s ease-in-out infinite}
.gm-sprout{transform-origin:50% 100%;animation:gmSway 4s ease-in-out infinite}
.gm-eye{transform-origin:center;transition:transform .08s}
.gd-mascot.blink .gm-eye{transform:scaleY(.1)}
.gm-armL{transform-origin:100% 0}.gm-armR{transform-origin:0 0;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
[data-state=talking] .gm-smile{opacity:0}[data-state=talking] .gm-mouth{opacity:1;animation:gmTalk .26s ease-in-out infinite alternate}
.gd-mascot.beat .gm-mouth{animation:gmBeat .18s ease-out}
[data-state=smiling] .gm-smile{stroke-width:3.6}[data-state=smiling] .gm-eye{transform:scaleY(.55) translateY(1px)}[data-state=smiling] .gm-body{animation:gmHop 1.6s ease-in-out infinite}
[data-state=waving] .gm-armR{animation:gmWave .5s ease-in-out infinite alternate}
[data-state=pointing] .gm-armL{transform:rotate(68deg)}[data-state=pointing] .gm-body{animation:gmLean 2.4s ease-in-out infinite}
@keyframes gmBreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
@keyframes gmSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(7deg)}}
@keyframes gmTalk{from{transform:scale(1,.25)}to{transform:scale(1,1.05)}}
@keyframes gmBeat{from{transform:scale(1.15,1.2)}to{transform:scale(1,.6)}}
@keyframes gmWave{from{transform:rotate(-65deg)}to{transform:rotate(-105deg)}}
@keyframes gmHop{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px) scale(1.02,.98)}}
@keyframes gmLean{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-4deg) translateX(-1px)}}
.gd-bubble{position:absolute;right:calc(var(--gm) + 22px);bottom:calc(var(--gm) * .55);max-width:min(380px,calc(100% - var(--gm) - 44px));background:var(--glass-strong,#fff);color:var(--text);border:1px solid var(--border);border-radius:18px 18px 4px 18px;padding:10px 14px 12px;box-shadow:var(--shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);animation:gdPop .25s ease-out}
.gd-bubble::after{content:"";position:absolute;right:-9px;bottom:10px;border:9px solid transparent;border-left-color:var(--border);border-right:0}
.gd-step{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.gd-name{font-size:13px;color:var(--accent-text);font-weight:700;margin-top:2px}
.gd-say{font-size:20px;font-weight:800;line-height:1.25;margin-top:2px}
.gd-read,.gd-exr{font-size:12px;color:var(--muted)}
.gd-ex{font-size:15px;margin-top:6px;line-height:1.35}
.gd-vi{font-size:12.5px;color:var(--accent-2-strong,var(--accent-2));margin-top:4px;font-style:italic}
html[data-theme=dark] .gd-vi{color:var(--accent-2)}
#guideUI.noVi .gd-vi{display:none}
.gd-bubble.stopOnly .gd-step{font-size:15px;color:var(--text)}
.gd-prog{height:3px;border-radius:2px;background:var(--surface-3);margin-top:8px;overflow:hidden}.gd-prog i{display:block;height:100%;background:var(--accent);width:0;transition:width .4s}
.gd-ctl{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--bar-h,56px) + 8px);display:flex;gap:4px;padding:4px;background:var(--glass-strong,#fff);border:1px solid var(--border);border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.gd-ctl button{min-width:38px;height:38px;border-radius:var(--radius-pill);border:0;background:transparent;color:var(--text);font-size:16px;cursor:pointer;padding:0 8px}
.gd-ctl button:hover{background:var(--surface-2)}.gd-ctl button:disabled{opacity:.35;cursor:default}
.gd-ctl button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.gd-ctl .gd-play{background:var(--accent);color:var(--on-accent)}.gd-ctl .gd-speed,.gd-ctl .gd-vib{font-size:13px;font-weight:700}.gd-ctl .gd-vib.on{color:var(--accent-text)}
#guideUI.paused .gd-play{animation:gdPulse 1.4s ease-in-out infinite}
@keyframes gdPop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes gdPulse{50%{box-shadow:0 0 0 6px var(--accent-soft-strong,rgba(91,61,245,.2))}}
body.guiding #hint,body.guiding #panHint{display:none}
body.guiding #panel[data-mode=obj]{display:none}
@media (max-width:600px){#guideUI{--gm:66px}
 .gd-bubble{left:max(8px,env(safe-area-inset-left));right:calc(var(--gm) + 16px);bottom:max(10px,env(safe-area-inset-bottom));max-width:none;padding:8px 11px 9px;border-radius:16px 16px 4px 16px}
 .gd-say{font-size:17px}.gd-ex{font-size:13.5px;margin-top:4px}.gd-read,.gd-exr{font-size:11px}.gd-vi{font-size:11.5px}
 .gd-ctl{top:calc(var(--bar-h,56px) + 6px)}.gd-ctl button{min-width:36px;height:36px;font-size:15px}}
@media (prefers-reduced-motion:reduce){#guideUI *,#guideUI *::after{animation:none!important;transition:none!important}}
body.compactbar #guideBtn .gbL{display:none}
body.compactbar #guideBtn{padding-left:8px;padding-right:8px;min-width:0}
/* ---- pricing v2: milk-tea cup, buy modal, lock bar, pricing page (js/pricing.js, js/account.js, bang-gia.html) ---- */
:root{--tea:#c8955f;--tea-2:#a8733f;--foam:#f3dfc3;--boba:#3a2316;--straw:#ff6f9f;--cupGlass:rgba(255,255,255,.65);--cupLine:#8a6a4f;--save:#0f8a5f;--save-bg:#e2f6ec}
html[data-theme=dark]{--cupGlass:rgba(255,255,255,.14);--cupLine:#d9b996;--tea:#d39d66;--foam:#f1d9b6;--save:#4ade9a;--save-bg:rgba(74,222,154,.13)}
.cupSvg{width:56px;height:74px;display:inline-block;overflow:visible}.cupSvg.big{width:96px;height:126px}.cupSvg.mini{width:24px;height:32px}.cupSvg.lb{width:30px;height:40px;flex:none}
.cupSvg .glass{fill:var(--cupGlass);stroke:var(--cupLine);stroke-width:2}.cupSvg .tea{fill:var(--tea)}.cupSvg .foam{fill:var(--foam)}.cupSvg .boba circle{fill:var(--boba)}
.cupSvg .lid{fill:var(--cupGlass);stroke:var(--cupLine);stroke-width:2}.cupSvg .rim{fill:var(--cupLine)}.cupSvg .straw{stroke:var(--straw);stroke-width:5;stroke-linecap:round;fill:none}
.cupSvg .shine{stroke:rgba(255,255,255,.75);stroke-width:2.5;stroke-linecap:round;fill:none}.cupSvg .band{fill:var(--straw);opacity:.85}
.cupRow{display:inline-flex;flex-wrap:wrap;gap:2px;max-width:150px;justify-content:center}
.buyOpt .optArt .cupSvg.big{animation:cupBob 3.2s ease-in-out infinite}@keyframes cupBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
.mBox:has(.buyM){width:min(760px,100%)}.mLead{margin:0 0 12px;color:var(--muted)}
.buyOpts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.buyOpt{position:relative;display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--border-strong);border-radius:16px;padding:14px;background:var(--surface-2);overflow:hidden}
.buyOpt.optPrem{border-color:var(--accent);background:linear-gradient(160deg,var(--accent-soft),var(--surface-2) 60%)}
.buyOpt .optArt{flex:none;display:grid;place-items:center;min-width:96px}.buyOpt .optBody{flex:1;min-width:0}
.buyOpt h3{margin:0 0 2px;font-size:17px}.optScn{margin:0 0 4px;font-weight:600;color:var(--accent-text)}
.bigPrice{margin:4px 0 0;line-height:1}.bigPrice b{font-size:34px;font-weight:800;letter-spacing:-.5px;color:var(--text)}.bigPrice small{color:var(--muted);font-size:14px;margin-left:2px}
.eq{margin:4px 0 6px;font-size:17px;font-weight:700;color:var(--tea-2)}html[data-theme=dark] .eq{color:var(--foam)}
.optList{margin:6px 0;padding-left:18px;font-size:13.5px;color:var(--muted)}.optList li{margin:2px 0}
.optNote{margin:6px 0;font-size:13px;font-weight:600}.optNote.save{display:inline-block;background:var(--save-bg);color:var(--save);padding:3px 9px;border-radius:999px}.optNote.ok{color:var(--ok)}
.ribbon{position:absolute;top:10px;right:-30px;transform:rotate(35deg);background:var(--accent-grad);color:#fff;font-size:11px;font-weight:700;padding:3px 34px}
.buyBtn{display:block;width:100%;margin-top:8px;text-align:center;border:0;border-radius:999px;padding:11px 14px;background:var(--btn-grad);color:#fff;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.buyBtn.ghost{background:transparent;color:var(--accent-text);border:1.5px solid var(--accent)}.buyBtn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.mFoot{margin:10px 0 0;font-size:13px;text-align:center}.mFoot a{color:var(--accent-text)}.loginNote{text-align:center;margin:10px 0 0}
.ordErr{padding:14px;border:1px solid var(--bad);background:var(--bad-bg);color:var(--text);border-radius:12px}.ordErr p{margin:0 0 10px}
.cupPop{display:none}.paidSt.ok .cupPop{display:inline-block;animation:cupPop .7s cubic-bezier(.2,1.6,.4,1) both}.paidSt.ok .cupPop .cupSvg{width:40px;height:52px}
@keyframes cupPop{from{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.lcard .lk.buy{background:color-mix(in srgb,var(--tea) 18%,var(--surface));color:var(--text);border-color:color-mix(in srgb,var(--tea) 55%,transparent)}
.lcard .lk.owned{background:var(--ok-bg);color:var(--ok)}
#lockBar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100% - 20px));padding:8px 10px 8px 12px;border-radius:16px;background:var(--glass);backdrop-filter:var(--glass-blur);border:1px solid var(--border-strong);box-shadow:var(--shadow)}
#lockBar[hidden]{display:none}#lockBar .lbT{display:flex;flex-direction:column;min-width:0;font-size:13px}#lockBar small{color:var(--muted)}
#lockBar .hbtn{flex:none;border:0;border-radius:999px;padding:9px 14px;background:var(--btn-grad);color:#fff;font:inherit;font-weight:700;cursor:pointer}
@media (max-width:600px){.buyOpt{flex-direction:column;align-items:stretch}.buyOpt .optArt{min-width:0}.cupSvg.big{width:76px;height:100px}.bigPrice b{font-size:30px}#lockBar{bottom:74px}}
@media (prefers-reduced-motion:reduce){.buyOpt .optArt .cupSvg.big,.paidSt.ok .cupPop{animation:none}}
/* /nhat: Japanese styling (washi, vermilion, seigaiha) — prices stay VND */
html[data-world=jp] .buyOpt{border-radius:6px;border-color:var(--jp-wood-2);background:var(--surface)}
html[data-world=jp] .buyOpt.optPrem{border:2px solid var(--jp-red);background:radial-gradient(circle at 0 100%,transparent 9px,color-mix(in srgb,var(--jp-sakura) 22%,transparent) 10px,transparent 11px) 0 0/22px 11px,var(--surface)}
html[data-world=jp] .ribbon{background:var(--jp-red)}html[data-world=jp] .buyBtn{background:var(--jp-red);border-radius:6px}html[data-world=jp] .buyBtn.ghost{background:transparent;color:var(--jp-red);border-color:var(--jp-red)}
html[data-world=jp] .mBox:has(.buyM){border-top:5px solid var(--jp-red);border-radius:8px}html[data-world=jp] .buyM h2{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
html[data-world=jp] .jpk{display:inline-block;font-size:12px;color:#fff;background:var(--jp-red);border-radius:3px;padding:1px 5px;vertical-align:middle}
html[data-world=jp] .eq{color:var(--jp-sakura-ink)}html[data-world=jp][data-theme=dark] .eq{color:var(--jp-sakura)}html[data-world=jp] #lockBar{border-color:var(--jp-red);border-radius:8px}html[data-world=jp] #lockBar .hbtn{background:var(--jp-red);border-radius:6px}
html[data-world=jp] .lcard .lk.buy{border-color:var(--jp-red)}
/* pricing page */
body.pp{overflow:auto;display:block;background:var(--bg);color:var(--text)}.pp .hwrap{max-width:1040px;margin:0 auto;padding:0 16px 40px}
.pp .ppHero{text-align:center;padding:26px 0 8px}.pp .ppHero h1{font-size:clamp(26px,5vw,42px);margin:6px 0}.pp .ppHero p{color:var(--muted);max-width:640px;margin:0 auto}
.pp .ppHero .cupRow{max-width:none}.pp .buyOpts{margin:22px 0}.pp .buyOpt{padding:18px}
.ppCmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:8px 0 24px}.ppCmp div{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--surface-2);text-align:center}
.ppCmp b{display:block;font-size:22px}.ppCmp small{color:var(--muted)}
.faq h2{margin:20px 0 8px}.faq details{border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin:8px 0;background:var(--surface)}.faq summary{cursor:pointer;font-weight:700}.faq p{color:var(--muted);margin:8px 0 2px}
.pp footer{text-align:center;color:var(--muted);font-size:13px;margin-top:26px}.pp footer a{color:var(--accent-text)}
.pp .logo{text-decoration:none;font-weight:800;font-size:20px;color:var(--text)}.pp .logo span{color:var(--accent-2)}.pp .ppCmp .best{border-color:var(--accent);background:var(--accent-soft)}
.mBox.buyBox{width:min(780px,100%)}.buyOpt{flex-direction:column;align-items:stretch}.buyOpt .optArt{min-height:126px}.buyOpt .optBody{display:flex;flex-direction:column}.buyOpt .buyBtn{margin-top:auto}.buyOpt .optList{margin-bottom:8px}
@media (max-width:600px){.buyOpt .optArt{min-height:0}}
/* guide camera styles picker (js/guide.js .gd-style): icons; active label on desktop; tooltips via title */
.gd-style{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--bar-h,56px) + 58px);display:flex;gap:2px;padding:3px;background:var(--glass-strong,#fff);border:1px solid var(--border);border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);white-space:nowrap}
.gd-style button{display:inline-flex;align-items:center;gap:5px;height:32px;min-width:34px;justify-content:center;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text);font:600 12.5px/1 inherit;cursor:pointer;padding:0 8px}
.gd-style button:hover{background:var(--surface-2)}.gd-style button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.gd-style button.on{background:var(--accent);color:var(--on-accent)}.gd-style .gsI{font-size:15px}
.gd-style .gsL{display:none}.gd-style button.on .gsL{display:inline}
.gd-style .gs-bob{opacity:.45;border-left:1px solid var(--border);border-radius:0 var(--radius-pill) var(--radius-pill) 0}.gd-style .gs-bob.on{opacity:1;background:transparent;color:var(--text)}
@media (max-width:600px){.gd-style{top:calc(var(--bar-h,56px) + 50px)}.gd-style button{height:30px;min-width:32px;padding:0 6px}.gd-style button.on .gsL{display:none}}
@media (prefers-reduced-motion:reduce){.gd-style .gs-bob{display:none}}

/* fix 2026-10-28: quiz button contrast + transparent speaker button */
#bar #quizBtn,#bar .seg #quizBtn,#moreMenu #quizBtn,#quizBtn{color:#fff!important;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:0 2px 8px var(--shadow-glow,rgba(91,61,245,.3))}
#bar #quizBtn:hover,#moreMenu #quizBtn:hover{filter:brightness(1.1)}
.spk,#panel .spk,#bar .spk{background:transparent!important;border:0!important;box-shadow:none!important;color:inherit;font-size:20px;line-height:1;min-width:36px;min-height:36px;padding:4px 6px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s,background-color .15s}
.spk:hover,.spk:focus-visible{background:var(--accent-soft,rgba(109,74,255,.12))!important;transform:scale(1.08)}
.spk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.spk.busy::after{width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid var(--accent-soft-strong,rgba(109,74,255,.25));border-top-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.spk{transition:none}.spk:hover,.spk:focus-visible{transform:none}}

/* orbit pad 2026-10-28 (js/orbitpad.js): the Explore ▲◀▼▶ pad on every lesson screen for the overview camera; bottom-left, lifted by JS above panel/sheet/guide */
/* qa14: pad above #guideUI (was z 5 < guide 6 → taps at 390 hit the bubble). Buttons stay below #panel (z 8). */
.orbPad{right:auto;left:calc(12px + env(safe-area-inset-left,0px));bottom:36px;z-index:7;pointer-events:none}
.orbPad button{pointer-events:auto}.orbPad[hidden],body.exploring .orbPad{display:none}
.orbPad button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* fix 2026-10-29 QA */
/* 1) 390px: home nav + category chips must not overflow horizontally */
@media (max-width:600px){
 .hnav{flex-wrap:wrap;row-gap:6px;max-width:100%}
 .hnav .hnr{flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
 .hnav .hbtn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
 #homeTheme{min-width:44px}
 .sp-chips,#sceneMenu .sp-chips,#pickBox .sp-chips{max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden}
 .sp-tools{min-width:0;max-width:100%}
 #sceneMenu .sp-chip,.sp-chip{min-height:44px}
}
/* 2) touch targets >= 44x44 (toolbar 🏠 / scene button, panel ✕ / 🔊) */
#homeBtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;box-sizing:border-box}
body.compactbar #sceneBtn{min-height:44px;max-height:none;box-sizing:border-box}
body.compactbar #sceneMenu{top:60px;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px)}
.x,#panel .x{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;box-sizing:border-box}
.spk,#panel .spk,#bar .spk{min-width:44px;min-height:44px;padding:0;box-sizing:border-box}
.spk:hover,.spk:focus-visible,.spk:active{background:transparent!important}
/* 3) pricing modal compact on small screens: Premium visible without scrolling */
@media (max-width:600px){
 .mBox:has(.buyM){padding:12px 12px 10px}
 .buyM h2{font-size:18px;margin:0 0 4px}
 .mLead{margin:0 0 8px;font-size:13px;line-height:1.35}
 .buyOpts{gap:8px}
 .buyOpt{flex-direction:row;align-items:center;gap:10px;padding:10px;border-radius:14px}
 .buyOpt .optArt{min-width:0}
 .cupSvg.big{width:44px;height:58px}.buyOpt .cupRow{max-width:70px}
 .buyOpt h3{font-size:15px}.optScn{font-size:13px;margin:0 0 2px}
 .bigPrice b{font-size:24px}.bigPrice small{font-size:12px}
 .eq{font-size:14px;margin:2px 0 4px}
 .optList{margin:2px 0;font-size:12.5px;line-height:1.3}.optList li{margin:1px 0}
 .optNote{margin:3px 0;font-size:12px}
 .buyBtn{margin-top:6px;padding:10px 12px;min-height:44px}
 .mFoot{margin:6px 0 0;font-size:12px}
}
@media (max-width:600px) and (max-height:700px){
 .optList{display:none}.ribbon{font-size:10px;padding:2px 30px}
}
/* 4) quizBtn: hover/active darken instead of brighten (keeps >=4.5:1 in dark theme) */
#bar #quizBtn:hover,#moreMenu #quizBtn:hover,#quizBtn:hover,#quizBtn:active{filter:brightness(.92)}
#quizBtn:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
/* 5) ⋯ more button touch target */
#moreBtn{min-width:44px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
/* 5) compact toolbar: 🧭 explore + guide buttons hit area >= 44px tall (guide also 44 wide) */
body.compactbar #exploreBtn:not([hidden]),body.compactbar #guideBtn:not([hidden]){min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
body.compactbar #guideBtn{min-width:44px}
/* end fix 2026-10-29 QA */

/* cut7 2026-10-29: background music toggle (js/bgm.js) + corner 3D mascot (js/mascot.js) */
.vg-bgm-btn{position:absolute;top:calc(var(--bar-h,62px) + 4px);right:max(8px,env(safe-area-inset-right));z-index:7;width:44px;height:44px;min-width:44px;min-height:44px;
  padding:0;border:0;background:none;font-size:24px;line-height:44px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.vg-bgm-btn:focus-visible{outline:2px solid #fff;border-radius:50%}
body.home .vg-bgm-btn{display:none}
#vgMascot{position:absolute;right:max(8px,env(safe-area-inset-right));bottom:12px;z-index:7;width:var(--vgm-w,112px);pointer-events:none;transition:bottom .2s ease}
#vgMascot[hidden]{display:none}
#vgMascot .vgm-cv{display:block;pointer-events:none;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 4px 8px var(--shadow-color,rgba(0,0,0,.18)))}
#vgMascot .vgm-pick{position:absolute;left:-30px;bottom:4px;width:44px;height:44px;padding:0;border:0;background:none;font-size:18px;line-height:44px;cursor:pointer;pointer-events:auto;opacity:.85;
  -webkit-tap-highlight-color:transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
#vgMascot .vgm-pick:hover,#vgMascot .vgm-pick[aria-expanded=true]{opacity:1}
#vgMascot .vgm-pick:focus-visible{outline:2px solid var(--accent,#7c5cff);border-radius:50%}
#vgMascot.inGuide .vgm-pick{display:none}
.vgm-menu{position:absolute;right:0;bottom:calc(100% + 6px);width:212px;max-height:min(60vh,420px);overflow:auto;pointer-events:auto;background:var(--glass-strong,#fff);color:var(--text);
  border:1px solid var(--border,#ddd);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.vgm-menu[hidden]{display:none}
.vgm-h{font-weight:700;font-size:13px;padding:4px 8px 6px;opacity:.8}
.vgm-list button{display:grid;grid-template-columns:28px 1fr;align-items:center;column-gap:6px;width:100%;min-height:44px;padding:4px 8px;border:0;border-radius:10px;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit;font-size:14px}
.vgm-list button small{grid-column:2;font-size:11px;opacity:.65}
.vgm-list .vgm-e{grid-row:span 2;font-size:20px;text-align:center}
.vgm-list button:hover,.vgm-list button:focus-visible{background:var(--accent-a15,rgba(124,92,255,.12));outline:none}
.vgm-list button.on{background:var(--accent-a25,rgba(124,92,255,.22));font-weight:700}
body:has(#vgMascot:not([hidden])) .gd-mascot .gm-svg{opacity:0}
@media (max-width:600px){.vgm-menu{width:190px}#vgMascot .vgm-pick{left:-34px}}
#moreMenu [data-slot=mascot] .vgm-more{min-height:44px;border:1px solid var(--border,#ccc);border-radius:10px;background:none;color:inherit;font:inherit;padding:0 10px;cursor:pointer}

/* cut7 (Tony): guide controls in the header (js/guidebar.js), title text removed; ⚙️ settings sheet (js/settingspanel.js) */
#bar #title{display:none}
#bar .scenepick{margin-right:auto}
body.guidebar #bar .scenepick{margin-right:0}
#guideBar{display:flex;align-items:center;gap:6px;min-width:0;margin-right:auto;flex:0 1 auto}
#guideBar[hidden]{display:none}
#guideBar .gd-ctl,#guideBar .gd-style{position:static;transform:none;top:auto;left:auto;box-shadow:none;margin:0;padding:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);display:flex;gap:2px;align-items:center}
#guideBar .gd-ctl button,#guideBar .gd-style button{min-width:44px;height:44px;padding:0 8px;border-radius:var(--radius-pill)}
#guideBar .gd-style button{height:44px;min-width:44px}
#guideBar .gd-style button.on .gsL{display:none}
#guideBar .gd-style button.on{background:var(--accent);color:var(--on-accent)}
#guideBar .gd-ctl .gd-play{background:var(--accent);color:var(--on-accent);font-size:17px}
#guideBar .gd-ctl .gd-vib.on{background:var(--accent-a25,rgba(124,92,255,.22))}
#settingsBtn{min-width:44px;min-height:44px;padding:0;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-2);font-size:19px;cursor:pointer}
#settingsBtn[aria-expanded=true]{background:var(--accent);border-color:var(--accent)}
#settingsBtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:1100px){#guideBar .gd-ctl button{min-width:44px;padding:0 4px}}
/* w40: #settingsSheet base rules moved to the "w40 Settings" block at the end of this file */
#settingsSheet .gd-ctl,#settingsSheet .gd-style{position:static;transform:none;top:auto;left:auto;box-shadow:none;margin:0;display:flex;flex-wrap:wrap;gap:6px;padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px}
#settingsSheet .gd-ctl button,#settingsSheet .gd-style button{min-width:44px;height:44px;border-radius:12px;padding:0 10px;font-size:16px}
#settingsSheet .gd-style button .gsL{display:inline;font-size:12.5px}
#settingsSheet .gd-style button.on{background:var(--accent);color:var(--on-accent)}
#settingsSheet .gd-ctl .gd-vib.on{background:var(--accent-a25,rgba(124,92,255,.22))}
/* explore on phones: one slim row under the bar (progress + ◀ stop ▶), no big floating boxes */
@media (max-width:600px){
 .exTop{flex-wrap:nowrap;gap:6px;left:6px;right:56px;top:calc(var(--bar-h) + 4px)}
 .exProg{min-width:0;flex:0 1 96px;padding:3px 8px;font-size:11px;border-radius:9px}
 .exProg .bar{height:4px;margin-top:2px}
 .exNav{flex:1 1 auto;min-width:0;padding:2px 4px;gap:4px;font-size:11.5px;border-radius:12px}
 .exNav button{min-width:44px;min-height:40px;padding:0 6px;font-size:12px;flex:none}
 #exStop{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}
}

/* hotfix home mobile 2026-10-29 */
/* 1) header: .hero (position:relative + isolation) is painted after the static .hnav and .hero3d starts at top:-70px,
      so the hero's glow/canvas layer was drawn OVER the header buttons (washed out on iOS). Lift the nav above it. */
#home .hnav{position:relative;z-index:5}
@media (max-width:899px){
 /* 2) models/labels must never cover the text: keep the canvas as a faint backdrop behind .heroC, hide the word chips */
 .hero3d{top:0}
 .hero3d .h3c,.hero3d.h3on .h3c{opacity:.18}
 .hero3d .h3l{display:none}
 /* 3) streaks: the CSS perspective grid poster (::before) is hidden on mobile too (GridHelper hidden in hero3d.js) */
 .hero3d::before{display:none}
}
/* end hotfix home mobile 2026-10-29 */

/* padfix (QA prod37, mobile tap targets ≥44px): invisible expanded hit areas, layout unchanged */
.h3tilt::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
footer a{position:relative;display:inline-block;padding:0 2px}
footer a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
@media (max-width:760px){#home footer,.pp footer{line-height:2.2}}
#guideBar{flex:none}
#guideBar .gd-style .gs-bob.on{background:transparent;color:var(--text);opacity:1}
#guideBar .gd-style .gs-bob{border-left:1px solid var(--border)}
/* phones while guiding: room for ▶/⏸ + ⚙️ — scene button shows its emoji only, Explore toggle hides (the guide owns the camera) */
body.compactbar.guidebar #sceneBtn{max-width:54px;overflow:hidden;white-space:nowrap;text-overflow:clip;padding-left:10px;padding-right:6px}
body.compactbar.guidebar #exploreBtn{display:none}
body.compactbar #guideBar{gap:4px}
body.compactbar #guideBar .gd-ctl{padding:0;border:0;background:none}

/* cut7 (Tony): one-row mobile header < 768 px (js/mhead.js) + ☰ drawer. Desktop untouched: these nodes are hidden there. */
.mRight,.mLang,.hnav .mBurger{display:none}
/* logo (mhead.js LOGO): shown on desktop too (Tony 18:10); light/dark outlined files swapped here */
.mLogo{display:flex;align-items:center;min-height:44px;flex:none;text-decoration:none}
.hnav>.logo{display:none}
.mLogo img,.md-logo img{display:block;height:32px;width:auto;aspect-ratio:290/64}
@media (max-width:767px){.mLogo img,.md-logo img{height:28px}}
.lgW.lg-d{display:none!important}html[data-theme=dark] .lgW.lg-l{display:none!important}html[data-theme=dark] .lgW.lg-d{display:block!important}.lgI{display:none}
.mLogo,.md-logo{color:var(--text);height:22px}.md-logo{display:inline-flex}.mLogo svg,.md-logo svg,.md-logo img{height:22px;width:auto;display:block}
body.home #mDrawer [data-sec=lesson],body.home #mDrawer [data-sec=acct]{display:none}
.mBurger,.mLangBtn{min-width:44px;min-height:44px;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);font-size:20px;line-height:1;cursor:pointer}
.mBurger:focus-visible,.mLangBtn:focus-visible,.md-i:focus-visible,.md-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:767px){
 body.mhead #bar{flex-wrap:nowrap;gap:6px;padding:6px 8px;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));align-items:center}
 body.mhead #bar>.mLogo{display:flex;align-items:center;min-height:44px;margin-right:auto;flex:0 1 auto;min-width:0}
 body.mhead #bar>.mRight{display:flex;align-items:center;gap:6px;flex:none}
 body.mhead #homeBtn,body.mhead #bar .morewrap,body.mhead #bar #title{display:none}
 body.mhead #bar .scenepick{position:static;margin:0;width:0;flex:0 0 0;overflow:visible}
 body.mhead #sceneBtn{display:none}
 body.mhead #sceneMenu{position:fixed;left:6px;right:6px;top:calc(var(--bar-h,60px) + 4px);max-height:calc(100dvh - var(--bar-h,60px) - 12px);width:auto;z-index:70}
 body.mhead #langs .ln,body.mhead #langs .langBtn .car{display:none}
 body.mhead #langs .langBtn{min-width:44px;min-height:44px;padding:0;justify-content:center;border-radius:12px}
 body.mhead #langs .langList{right:0;left:auto;position:absolute}
 body.mhead #langs{position:relative}
 body.mhead #themeBtn{min-width:44px;min-height:44px;padding:0;border-radius:12px}
 body.mhead #guideBar{margin-left:0;gap:4px}
 body.mhead #guideBar .gd-ctl{padding:0;border:0;background:none}
 body.mhead.guidebar #bar>.mLogo img{height:18px}
 /* home */
 body.mhead .hnav{flex-wrap:nowrap;padding:8px 0;gap:6px;row-gap:0}
 body.mhead .hnav>.logo{display:none}
 body.mhead .hnav>.mLogo{display:flex;align-items:center;min-height:44px;margin-right:auto}
 body.mhead .hnav .jpw{display:none}
 body.mhead .hnav .hnr{flex-wrap:nowrap;gap:6px}
 body.mhead .hnav .mLang,body.mhead .hnav .mBurger{display:inline-flex;align-items:center;justify-content:center}
 body.mhead .hnav .themeBtn{min-width:44px;min-height:44px;padding:0;border-radius:12px}
 .mLang{position:relative}
 .mLangList{position:absolute;right:0;top:calc(100% + 6px);z-index:80;min-width:220px;background:var(--glass-strong);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
 .mLangList[hidden]{display:none}
 .mLangList button{display:flex;gap:8px;align-items:center;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;font-size:14px;text-align:left;cursor:pointer}
 .mLangList button[aria-selected=true]{background:var(--accent-a25,rgba(124,92,255,.22));font-weight:700}
}
#mDrawerBg{position:fixed;inset:0;z-index:90;background:rgba(5,8,20,.45)}
#mDrawerBg[hidden],#mDrawer[hidden]{display:none}
#mDrawer{position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(320px,86vw);overflow:auto;background:var(--surface,#fff);color:var(--text);border-left:1px solid var(--border);box-shadow:-12px 0 36px rgba(0,0,0,.3);
 padding:8px 12px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
#mDrawer .md-head{display:flex;align-items:center;justify-content:space-between;min-height:52px}
#mDrawer .md-logo{height:22px;width:auto}
#mDrawer .md-x{min-width:44px;min-height:44px;border:0;background:none;color:var(--text);font-size:20px;border-radius:50%;cursor:pointer}
#mDrawer .md-sec{display:flex;flex-direction:column;gap:4px;padding:6px 0;border-top:1px solid var(--border)}
#mDrawer .md-sec:empty{display:none}
#mDrawer .md-l{font-size:12px;font-weight:700;opacity:.7;padding:2px 4px}
#mDrawer .md-i,#mDrawer .md-sec>a.hbtn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:12px;background:none;color:var(--text);font:inherit;font-size:15px;text-align:left;cursor:pointer;text-decoration:none;box-sizing:border-box}
#mDrawer .md-i:hover,#mDrawer .md-sec>a.hbtn:hover{background:var(--surface-2)}
#mDrawer .md-ic{width:24px;text-align:center;font-size:18px}
#mDrawer .md-modes #modeSeg{display:flex;flex-direction:column;align-items:stretch;gap:4px;border:0;background:none;padding:0}
#mDrawer .md-modes #modeSeg>*{min-height:44px;width:100%;text-align:left;justify-content:flex-start;border-radius:12px;box-sizing:border-box}
#mDrawer .md-modes #modeSeg .tg{display:flex;align-items:center;gap:8px;padding:0 10px}
#mDrawer .md-modes #modeSeg button{padding:0 10px}
#mDrawer #acct{display:block}
body.mdOpen{overflow:hidden}
@media (max-width:767px){body.mhead.guidebar #exploreBtn{display:none}}
body:not(.home) #mDrawer [data-sec=home]{display:none}
#mDrawer .md-modes #modeSeg>*{border:0;border-left:0;box-shadow:none}
#mDrawer [data-sec=acct]:not(:has(#acct>*)){display:none}
/* cut7: 3D hero removed — clean gradient hero; static scene thumbnail only on wide screens (never under the text) */
.hero3d{display:none!important}
.hero::before{content:"";position:absolute;z-index:-1;inset:-70px calc(50% - 50vw) 0;pointer-events:none;
 background:radial-gradient(60% 70% at 85% 30%,rgba(124,92,255,.18),transparent 70%),radial-gradient(50% 60% at 10% 80%,rgba(34,195,180,.14),transparent 70%)}
html[data-theme=dark] .hero::before{background:radial-gradient(60% 70% at 85% 30%,rgba(124,92,255,.28),transparent 70%),radial-gradient(50% 60% at 10% 80%,rgba(34,195,180,.18),transparent 70%)}
.heroArt{display:none}
@media (min-width:1000px){.heroArt{display:block;position:absolute;z-index:0;right:0;top:50%;transform:translateY(-50%) rotate(2deg);width:min(38%,420px);pointer-events:none}
 .heroArt img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 24px 60px rgba(30,20,90,.25);border:1px solid var(--border)}
 .heroC{max-width:min(620px,58%)}}

/* ===================== cut7w39: Lang3D brand v2 (/workspace/lang3d-brand-v2/brand-guidelines.md) ===================== */
:root{--font-display:'Baloo 2','Be Vietnam Pro',system-ui,sans-serif;--font-ui:'Be Vietnam Pro','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html:not([data-world=jp]){
 --bg:#0B1020;--bg-hero:#151B33;--surface:#151B33;--surface-2:#1A2140;--surface-3:#232B52;--border:#323B66;--border-strong:#5B6696;
 --text:#F1F3FA;--muted:#B4BDD6;--accent:#6D4AFF;--accent-hover:#5B3DF0;--accent-text:#8B6CFF;--accent-2:#2DD4BF;--accent-2-strong:#0F766E;
 --accent-grad:linear-gradient(135deg,#8B6CFF 0%,#2DD4BF 100%);--btn-grad:linear-gradient(135deg,#6D4AFF 0%,#5B3DF0 100%);
 --info:#38BDF8;--ok:#34D399;--bad:#FF5C8A;--warn:#FFC93C;--label-text:#F1F3FA}
html[data-theme=light]:not([data-world=jp]){
 --bg:#F7F5FF;--bg-hero:#EFEBFF;--surface:#FFFFFF;--surface-2:#F3F1FC;--surface-3:#E9E6F7;--border:#E3E5F0;--border-strong:#7C86A8;
 --text:#0F1A3A;--muted:#4A5878;--accent:#6D4AFF;--accent-hover:#5B3DF0;--accent-text:#5B3DF0;--accent-2:#0F766E;--accent-2-strong:#0F766E;
 --accent-grad:linear-gradient(135deg,#6D4AFF 0%,#14B8A6 100%);--btn-grad:linear-gradient(135deg,#6D4AFF 0%,#5B3DF0 100%);
 --info:#1D5FB8;--ok:#047857;--bad:#BE123C;--warn:#9A5800;--label-text:#0F1A3A}
body{font-family:var(--font-ui)}
h1,h2,h3,.hero h1,.logo,.mWord{font-family:var(--font-display)}
:lang(zh),:lang(zh-CN),html[data-tl=zh] .tl{font-family:'Be Vietnam Pro','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif}
:lang(zh-TW){font-family:'Be Vietnam Pro','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif}
:lang(ja){font-family:'Be Vietnam Pro','Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif}
:lang(ko){font-family:'Be Vietnam Pro','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif}
/* header logo: W1 wordmark (PNG @4x, font baked in) light/dark; icon-only mark when the mobile one-row header is cramped */
.mLogo .lgW,.md-logo .lgW{display:block;height:32px;width:auto}
.mLogo .lgI{display:none;height:32px;width:32px}
html[data-theme=dark] .lgW.lg-l,html:not([data-theme=dark]) .lgW.lg-d,html[data-theme=dark] .lgI.lg-l,html:not([data-theme=dark]) .lgI.lg-d{display:none!important}
@media (max-width:767px){.mLogo .lgW,.md-logo .lgW{height:28px}}
@media (max-width:374px){body.mhead .mLogo .lgW{display:none!important} body.mhead .mLogo .lgI{display:block!important}}
@media (max-width:767px){body.mhead.guidebar #bar>.mLogo .lgW{display:none!important} body.mhead.guidebar #bar>.mLogo .lgI{display:block!important;height:28px;width:28px}}
html[data-theme=dark] .mLogo .lgI.lg-l,html:not([data-theme=dark]) .mLogo .lgI.lg-d{display:none!important}
/* cut7w39: labels toggle inside the ☰ drawer — whole label row is the ≥44px tap target */
#mDrawer label:has(> #lbl),#mDrawer label[for=lbl]{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
/* cut7w39: corner mascot must never take pointer events over the explore pad (mascot.js adds .vgm-yield if it cannot clear it) */
#vgMascot.vgm-yield .vgm-cv,#vgMascot.vgm-yield .vgm-pick{pointer-events:none!important}
#vgMascot.vgm-yield{opacity:.35}
#vgMascot{transition:bottom .2s ease,opacity .2s}
/* p18: mascot canvas is click-through; only the character (hit-tested in mascot.js) shows the hand cursor */
html.vgm-hov #stage,html.vgm-hov #stage canvas{cursor:pointer!important}
/* cut7w39 fix (390 guide): the guide bubble (#guideUI z 6, text grows per step) could cover the orbit pad between its 250 ms
   re-lifts, so a press landed on .gd-say/.gd-ex and never reached the pad → the guide did not pause. While guiding (not exploring)
   the only interactive thing in #exUI is the orbit pad, so lift #exUI above #guideUI (pointer-events stay limited to its buttons). */
body.guiding:not(.exploring) #exUI{z-index:7}

/* cut7w39: first paint on the home URL never shows the empty lesson bar/stage (removed by home.js route()) */
html.bootHome #bar,html.bootHome #layout{display:none!important}

/* cut7w39: interactive 3D hero box (poster → live canvas). Mobile: shown under the hero text; desktop ≥1000px: right side as before */
.hero3dBox{position:relative;display:block;margin:18px 0 0;aspect-ratio:16/10;border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:0 18px 50px rgba(30,20,90,.18);background:linear-gradient(135deg,#efeaff,#e3f7f4);pointer-events:auto;transform:none}
@media (min-width:1000px){.hero3dBox.heroArt{position:absolute;top:50%;right:0;transform:translateY(-50%);width:min(40%,460px);margin:0}}
.hero3dBox .h3poster{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;box-shadow:none}
.hero3dBox .h3live{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity .4s}
.hero3dBox.h3on .h3live{opacity:1}.hero3dBox.h3hold .h3live{cursor:grabbing}
.hero3dBox .h3tip{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(15,26,58,.62);color:#fff;font-size:12px;pointer-events:none;opacity:0;transition:opacity .4s}
.hero3dBox.h3on .h3tip{opacity:1}
.hero3dBox .h3zoom{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:6px}
.hero3dBox .h3zoom button{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--glass-strong,#fff);color:var(--text);font-size:20px;cursor:pointer}
.hero3dBox .h3lab{position:absolute;transform:translate(-50%,-110%);display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 10px;border-radius:12px;background:var(--glass-strong,#fff);color:var(--text);box-shadow:var(--shadow-sm);font-size:13px;white-space:nowrap;pointer-events:none}
.hero3dBox .h3lab b{font-size:14px}.hero3dBox .h3lab small{opacity:.7}
html[data-theme=dark] .hero3dBox{background:linear-gradient(135deg,#1a2140,#10283a)}

/* cut7w39b: explore on desktop — #exNav (Prev/Next) sits top-right where the 🔊 music button was (1280: #bgmBtn 1228–1272 × 74–118 covered #exNext 1206–1266 × 81–110).
   Move #bgmBtn one row lower while exploring; still 44×44. Mobile 390 had no overlap (bgm 338–382, exNext 281–330) and is unchanged. */
@media (min-width:761px){body.exploring .vg-bgm-btn{top:calc(var(--bar-h,62px) + 60px)}}

/* ===== w40 Settings (js/settingspanel.js + settingsui.js): desktop tabbed modal, ≤768 bottom sheet (≤68 % height), 44 px targets ===== */
.vgGear{min-width:44px;min-height:44px;padding:0;border:1px solid var(--border);border-radius:var(--radius-pill,999px);background:var(--surface-2);color:var(--text);font-size:19px;line-height:1;cursor:pointer}
.vgGear[aria-expanded=true]{background:var(--accent-soft-strong);border-color:var(--accent)}
.vgGear:focus-visible,#settingsSheet :focus-visible{outline:2px solid var(--accent-2,#14B8A6);outline-offset:2px}
.hnav .vgGear{padding:8px 11px;min-width:44px}
body.mhead .vgGear{display:none}
#settingsDim{position:fixed;inset:0;z-index:59;background:rgba(15,26,58,.32)}
#settingsDim[hidden]{display:none}
#settingsSheet{--ss-v:#6D4AFF;--ss-t:#14B8A6;position:fixed;z-index:60;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,94vw);max-height:84vh;max-height:84dvh;display:flex;flex-direction:column;overflow:hidden;
 background:var(--surface,#fff);color:var(--text);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow,0 12px 36px rgba(0,0,0,.28));padding:0;font-family:var(--font-ui);font-size:15px}
html[data-theme=dark] #settingsSheet{--ss-v:#8B6CFF;--ss-t:#2DD4BF}
#settingsSheet[hidden]{display:none}
#settingsSheet .ss-grab{display:none;width:40px;height:5px;border-radius:3px;background:var(--border-strong,#999);margin:8px auto 0;flex:none}
#settingsSheet .ss-head{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 18px;border-bottom:1px solid var(--border);flex:none}
#settingsSheet .ss-head h2{margin:0;font:700 18px/1.2 var(--font-ui);flex:1}
#settingsSheet .ss-x{min-width:44px;min-height:44px;border:0;background:none;color:var(--muted);font-size:20px;cursor:pointer;border-radius:50%}
#settingsSheet .ss-x:hover{background:var(--surface-2)}
#settingsSheet .ss-main{display:flex;min-height:0;flex:1}
#settingsSheet .ss-tabs{display:flex;flex-direction:column;gap:2px;padding:10px;border-right:1px solid var(--border);background:var(--surface-2);min-width:184px;flex:none;overflow:auto}
#settingsSheet .ss-tabs button{min-height:44px;text-align:left;border:0;background:none;border-radius:10px;padding:0 12px;font:600 14px var(--font-ui);color:var(--text);cursor:pointer;white-space:nowrap}
#settingsSheet .ss-tabs button:hover{background:var(--accent-soft)}
#settingsSheet .ss-tabs button.on{background:var(--accent-soft-strong);color:var(--accent-text);box-shadow:inset 3px 0 0 var(--ss-v)}
#settingsSheet .ss-body{flex:1;min-width:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 20px 12px}
#settingsSheet .ss-pane[hidden]{display:none}
#settingsSheet .ss-live{padding:10px 0 6px;border-bottom:1px solid var(--border)}
#settingsSheet .ss-live[hidden]{display:none}
#settingsSheet h3{font:600 13px var(--font-ui);margin:4px 0 8px;color:var(--muted)}
#settingsSheet .ss-c{display:flex;flex-direction:column;gap:8px}
#settingsSheet .ss-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--border)}
#settingsSheet .ss-row:last-child{border-bottom:0}
#settingsSheet .ss-l{flex:1;min-width:0}
#settingsSheet .ss-l b{display:block;font-weight:600;font-size:15px}
#settingsSheet .ss-l small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
#settingsSheet .ss-ctl{flex:none;display:flex;align-items:center;max-width:62%}
#settingsSheet .ss-sw{position:relative;width:56px;min-height:44px;border:0;background:none;padding:0;cursor:pointer;flex:none}
#settingsSheet .ss-sw i{position:absolute;left:4px;top:8px;width:48px;height:28px;border-radius:14px;background:var(--surface-3);border:1px solid var(--border-strong);transition:background .15s}
#settingsSheet .ss-sw i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
#settingsSheet .ss-sw[aria-checked=true] i{background:var(--ss-v);border-color:var(--ss-v)}
#settingsSheet .ss-sw[aria-checked=true] i::after{left:23px}
#settingsSheet .ss-seg{display:flex;flex-wrap:wrap;border:1px solid var(--border-strong);border-radius:10px;overflow:hidden}
#settingsSheet .ss-seg button{min-height:44px;min-width:44px;padding:0 12px;border:0;border-left:1px solid var(--border);background:var(--surface);color:var(--text);font:500 13.5px var(--font-ui);cursor:pointer}
#settingsSheet .ss-seg button:first-child{border-left:0}
#settingsSheet .ss-seg button[aria-checked=true]{background:var(--ss-v);color:#fff;font-weight:700}
#settingsSheet .ss-rg{display:flex;align-items:center;gap:8px}
#settingsSheet .ss-rg input{width:160px;min-height:44px;accent-color:var(--ss-v);margin:0}
#settingsSheet .ss-rg output{min-width:44px;text-align:right;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
#settingsSheet select{min-height:44px;max-width:230px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--text);font:500 14px var(--font-ui);padding:0 10px}
#settingsSheet .ss-foot{position:relative;display:flex;gap:10px;align-items:center;padding:10px 18px;border-top:1px solid var(--border);flex:none;background:var(--surface)}
#settingsSheet .ss-foot button{min-height:44px;border-radius:10px;padding:0 16px;font:600 14px var(--font-ui);cursor:pointer}
#settingsSheet .ss-reset{border:1px solid var(--border-strong);background:none;color:var(--text)}
#settingsSheet .ss-note{margin-left:auto;font-size:12.5px;color:var(--muted)}
#settingsSheet .ss-ok{border:0;background:var(--btn-grad,var(--ss-v));color:#fff}
#settingsSheet .ss-confirm{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:8px 18px;background:var(--surface);border-radius:0 0 16px 16px}
#settingsSheet .ss-confirm[hidden]{display:none}
#settingsSheet .ss-confirm p{margin:0;flex:1;font-weight:600}
#settingsSheet .ss-cf-no{border:1px solid var(--border-strong);background:none;color:var(--text)}
#settingsSheet .ss-cf-yes{border:0;background:var(--bad,#be123c);color:#fff}
/* phones / small tablets: bottom sheet */
#settingsSheet.sheet{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:68vh;max-height:68dvh;border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);transition:transform .2s ease}
#settingsSheet.sheet.dragging{transition:none}
#settingsSheet.sheet .ss-grab{display:block;touch-action:none}
#settingsSheet.sheet .ss-head{padding:4px 6px 4px 16px;touch-action:none}
#settingsSheet.sheet .ss-main{flex-direction:column}
#settingsSheet.sheet .ss-tabs{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--border);padding:6px 8px;min-width:0;scrollbar-width:none}
#settingsSheet.sheet .ss-tabs::-webkit-scrollbar{display:none}
#settingsSheet.sheet .ss-tabs button{flex:none;padding:0 12px}
#settingsSheet.sheet .ss-tabs button.on{box-shadow:inset 0 -3px 0 var(--ss-v)}
#settingsSheet.sheet .ss-body{padding:2px 16px 8px}
#settingsSheet.sheet .ss-row{flex-wrap:wrap}
#settingsSheet.sheet .ss-seg button{padding:0 10px}
#settingsSheet.sheet .ss-rg input{width:120px}
#settingsSheet.sheet .ss-ctl{max-width:100%}
#settingsSheet.sheet .ss-row.ss-k-seg .ss-ctl,#settingsSheet.sheet .ss-row.ss-k-select .ss-ctl{flex-basis:100%;justify-content:flex-start}
#settingsSheet.sheet .ss-note{display:none}
#settingsSheet.sheet .ss-ok{margin-left:auto}
#settingsSheet.sheet .ss-confirm{border-radius:0;flex-wrap:wrap}
#settingsSheet.sheet .ss-confirm p{flex-basis:100%;font-size:14px}
@media (prefers-reduced-motion:reduce){#settingsSheet,#settingsSheet *{transition:none!important}}
/* setting effects that are pure CSS (attributes set on <html> by js/settings.js) */
html[data-hide-ipa] #panel .pron,html[data-hide-ipa] .gd-read,html[data-hide-ipa] #quizBox .qRead{display:none!important}
html[data-hide-meaning] #panel .mean,html[data-hide-meaning] #panel .more h3:has(+ .mean),html[data-hide-meaning] #quizBox .qMean,html[data-hide-meaning] #quizBox .qHint{display:none!important}
html[data-hide-examples] #panel .ex,html[data-hide-examples] #panel .exH,html[data-hide-examples] .gd-ex,html[data-hide-examples] .gd-exr{display:none!important}
html[data-hide-rom] #panel .rom,html[data-hide-rom] .gd-exr{display:none!important}
html[data-hide-progress] .exProg{display:none!important}
html[data-no-mascot] #vgMascot,html[data-no-mascot] .gd-mascot{display:none!important}
html[data-no-mascot-anim] .gd-mascot,html[data-no-mascot-anim] .gd-mascot *{animation:none!important}
html[data-pad=hide] .orbPad,html[data-pad=hide] #exUI .exPad{display:none!important}
html[data-pad=show] #exUI.touch .exPad{display:grid}
html[data-reduce-motion] *,html[data-reduce-motion] *::before,html[data-reduce-motion] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
#panel>*,.gd-bubble>*{zoom:var(--fs-scale,1)}
#quizBox{font-size:calc(18px * var(--fs-scale,1))}
.labels .lab{font-size:calc(13px * var(--fs-scale,1))}
/* cut8: live 3D model of the tapped object (vocab popup / bottom sheet / guide word card). One shared canvas moves between boxes. */
.m3d{position:relative;height:200px;margin:2px 0 6px;border-radius:var(--radius-sm,10px);background:radial-gradient(ellipse at 50% 60%,var(--accent-soft,rgba(124,196,255,.14)),transparent 72%);overflow:hidden;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.m3d[hidden]{display:none}.m3d:active{cursor:grabbing}
.m3d>canvas.m3dCanvas{display:block;width:100%!important;height:100%!important;touch-action:none;outline:none}
body.sheetmode #panel .m3d{height:160px}
.gd-bubble .gd-model{height:140px;margin:0 0 6px}
@media (max-width:600px){.gd-bubble .gd-model{float:right;width:84px;height:84px;margin:0 0 2px 8px}} /* phones: beside the text, so the bubble barely grows (orbit pad / mascot layout unchanged) */
@media (min-width:601px) and (max-height:700px){#panel .m3d{height:180px}}
/* 09b: model still streaming in (asset-queue proxy only) → soft spinner + text over the box, never a near-empty box */
.m3d .m3dLoad{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;color:var(--muted,#888);font-size:13px;font-weight:600;background:radial-gradient(ellipse at 50% 55%,var(--surface,rgba(255,255,255,.6)) 0,transparent 70%)}
.m3d .m3dLoad i{width:26px;height:26px;border-radius:50%;border:3px solid var(--accent-soft-strong,rgba(124,92,255,.3));border-top-color:var(--accent,#7c5cff);animation:m3dspin 1s linear infinite}
@keyframes m3dspin{to{transform:rotate(360deg)}}
html[data-reduce-motion] .m3d .m3dLoad i{animation:none;border-top-color:var(--accent-soft-strong,rgba(124,92,255,.3))}
.gd-bubble .m3d .m3dLoad span{display:none}
/* quest: 🎯 Nhiệm vụ badge on scene cards + mode button (js/quest/list.js, entry.js); overlay styles are lazy in js/quest/quest.css */
.lcard .qbadge{display:inline-block;font-size:.72em;font-weight:700;line-height:1.5;padding:0 6px;margin-right:4px;border-radius:8px;background:#fff1c2;color:#7a4b00;white-space:nowrap}
#questBtn.on{background:#ffd54a;color:#223}
/* qa14: <1000px the hero box was a shrunken flex item next to the headline (84×53 at 390). Full-width 16:10 card BELOW the text/CTA
   (order:2), so the headline + CTA stay first above the fold and the poster (LCP candidate) keeps its reserved box (aspect-ratio). */
@media (max-width:999px){.hero{flex-wrap:wrap;align-items:flex-start}.hero>*{min-width:0}
 .hero3dBox.heroArt{order:2;flex:1 0 100%;width:100%;max-width:560px;margin:14px auto 0;aspect-ratio:16/10}
 .hero3dBox .h3live{touch-action:pan-y}}


/* p16: corner mascot speech bubble */
#vgMascot .vgm-say{position:absolute;right:calc(100% + 6px);bottom:calc(var(--vgm-w,112px) * .55);max-width:min(220px,42vw);padding:8px 10px;border-radius:14px 14px 4px 14px;
 background:var(--glass-strong,#fff);color:var(--text);border:1px solid var(--border,#ccc);box-shadow:var(--shadow,0 4px 14px rgba(0,0,0,.15));
 font-size:13px;font-weight:700;line-height:1.3;pointer-events:auto;cursor:pointer;z-index:1;
 -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
#vgMascot .vgm-say[hidden]{display:none!important}
#vgMascot.inGuide .vgm-say,#vgMascot.vgm-yield .vgm-say{display:none!important}
@media (max-width:600px){#vgMascot .vgm-say{max-width:min(160px,48vw);font-size:12px;padding:6px 8px}}

/* p16: shared typewriter (quest / guide / explore) */
.tw-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.tw-caret{display:inline-block;width:2px;height:1.05em;background:currentColor;margin-left:1px;vertical-align:-3px;animation:twBlink .75s steps(1) infinite}
@keyframes twBlink{50%{opacity:0}}
.tw-pend{display:none!important}
.typing{cursor:pointer}