*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:system-ui,"Segoe UI","Noto Sans",sans-serif;background:#f6f1ea;color:#2b2622;display:flex;flex-direction:column;overflow:hidden}
#bar{flex:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px;background:#fffaf3;border-bottom:1px solid #e6dccd;z-index:5}
#title{margin-right:auto;font-size:15px}
#bar button,#langs button{border:1px solid #cbbba5;background:#fff;border-radius:8px;padding:6px 10px;font-size:14px;cursor:pointer}
#langs{display:flex;gap:4px}#langs button.on{background:#c2703d;color:#fff;border-color:#c2703d}
#quizBtn{background:#2d4a3e!important;color:#fff;border-color:#2d4a3e!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:#fffdf9;border-left:1px solid #e6dccd;-webkit-overflow-scrolling:touch}
#hint{position:absolute;bottom:8px;left:10px;right:10px;color:#fff;font-size:12px;text-shadow:0 1px 3px #000c;pointer-events:none}
#quizBox{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#fffdf9ee;padding:10px 16px;border-radius:12px;font-size:18px;text-align:center;box-shadow:0 4px 16px #0003;max-width:92%}
.top{display:flex;justify-content:space-between;align-items:center}.tag{background:#f0e4d4;border-radius:20px;padding:2px 10px;font-size:13px}
.x{border:0;background:none;font-size:18px;cursor:pointer;color:#888}
.word{font-size:40px;margin:.25em 0}.pron{color:#6a5d50}.mean{font-size:22px;font-weight:600;color:#c2703d}
#panel h3{margin:1.1em 0 .4em;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#2d4a3e}
.spk{border:0;background:#c2703d;color:#fff;border-radius:20px;padding:3px 9px;cursor:pointer;font-size:13px;vertical-align:middle}
.ex{margin:.45em 0;padding:.55em .7em;background:#f6efe5;border-radius:8px}.ex small{display:block;color:#7a6c5e}.ex .tr{color:#2d4a3e}
.rel{padding-left:18px}.rel li{margin:.3em 0}
.ph{text-align:center;color:#6a5d50;padding-top:6vh}.ph .big{font-size:52px}.ph ul{text-align:left;display:inline-block}
.lab{background:#2b2622cc;color:#fff;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 #e6dccd}.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 #c9bfae;background:#fff;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:#fffdf8;border:1px solid #d8cfbf;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:10px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 14px;width:min(820px,92vw);max-height:75vh;overflow:auto}
#sceneMenu[hidden]{display:none}
#sceneMenu h4{margin:.5em 0 .25em;font-size:.78em;text-transform:uppercase;letter-spacing:.04em;color:#8a6a4a}
#sceneMenu button{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:hover{background:#f1e8d8}#sceneMenu button.on{background:#ffe2b0;font-weight:600}
#sceneMenu button span{width:1.4em;text-align:center}

/* ---- explore mode ---- */
#exploreBtn.on{background:#2d6cdf;color:#fff;border-color:#2d6cdf}
#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:rgba(255,253,248,.92);border-radius:10px;padding:6px 10px;font-size:13px;font-weight:600;min-width:170px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.exProg .bar{height:7px;background:#e6dccd;border-radius:4px;margin-top:4px;overflow:hidden}.exProg .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4fb8ff,#2ecc71);transition:width .4s}
.exNav{display:flex;gap:6px;align-items:center;background:rgba(255,253,248,.92);border-radius:10px;padding:4px 6px;box-shadow:0 2px 8px rgba(0,0,0,.12);font-size:13px;font-weight:600}
.exNav button{border:1px solid #cbbba5;background:#fff;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:rgba(30,30,30,.45);color:#fff;font-size:20px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.exPad button:active{background:rgba(45,108,223,.8)}
.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:#2d6cdf;font-size:13px}
.exObj{border:0;background:none;padding:0;font:inherit;font-weight:700;color:#8a3d12;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,rgba(255,255,255,.18),rgba(30,30,30,.38));border:2px solid rgba(255,255,255,.55);pointer-events:auto;touch-action:none;display:none;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.exJoy i{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .12s ease-out;pointer-events:none}
.exJoy.on i{transition:none;background:#fff}
.exJoy.on{border-color:#4fb8ff}
#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,#fff7ea 0,#f6f1ea 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{color:#c2703d}
.hbtn{display:inline-block;text-decoration:none;background:#c2703d;color:#fff;border-radius:10px;padding:8px 16px;font-weight:600;border:2px solid #c2703d}
.hbtn.ghost{background:transparent;color:#c2703d}.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;color:#c2703d}
.hero p{font-size:clamp(16px,2vw,19px);color:#5d5146;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:#fffdf9;border:1px solid #eadfce;border-radius:14px;padding:14px 16px}
.how li span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#2d4a3e;color:#fff;font-weight:700;margin-right:8px}
.how li p{margin:.5em 0 0;color:#6a5d50;font-size:15px;line-height:1.45}
.lg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lg div{background:#fffdf9;border:1px solid #eadfce;border-radius:14px;padding:14px;text-align:center;display:flex;flex-direction:column;gap:2px}
.lg span{font-size:34px}.lg small{color:#7a6c5e}
.pick h3{margin:1.3em 0 .5em;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#8a6a4a}
.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:#fff;border:1px solid #e6dccd;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 rgba(80,50,20,.14);border-color:#c2703d;outline:none}
.card .em{font-size:36px;line-height:1}.card b{font-size:16px}.card small{color:#2d6cdf;font-size:12.5px;margin-top:auto}
#home footer{text-align:center;color:#8a7a6a;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}}