:root{font-family:ui-rounded,'PingFang TC','Microsoft JhengHei',system-ui,sans-serif;color:#294a43;--green:#286f60;--cream:#fffaf0}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#b7dbdf}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible,a:focus-visible{outline:4px solid #e6a239;outline-offset:3px}button:disabled{opacity:.6;cursor:default}#world{display:block;width:100vw;height:100dvh;touch-action:none}.hud{position:fixed;top:max(16px,env(safe-area-inset-top));left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:10px}.pill{background:#fffaf0ee;backdrop-filter:blur(8px);border:1px solid #fff9;border-radius:18px;padding:12px 18px;font-size:19px;font-weight:800;text-decoration:none;color:inherit;box-shadow:0 4px 20px #325e5410}.brand{display:flex;gap:10px;align-items:center}.hud-right{display:flex;gap:8px}.quest{position:fixed;top:max(87px,calc(env(safe-area-inset-top) + 74px));left:20px;width:340px;padding:20px 22px;background:#fffaf0f2;border:1px solid #fff;border-radius:24px;box-shadow:0 10px 30px #2c5e5010}.quest-top{display:flex;justify-content:space-between;gap:8px;font-size:12px;letter-spacing:1px;font-weight:800;color:#6f8a70}h1{font-size:24px;line-height:1.4;margin:12px 0 8px}p{font-size:18px;line-height:1.7;margin:10px 0}.quest p{font-size:17px;margin:8px 0}.quest-actions{display:flex;gap:7px;margin-top:14px}.quest-actions button{padding:10px 9px;background:#e8eee0;border-radius:12px;font-size:16px;min-height:44px}#hintText{color:#8c612c;background:#fff0cf;border-radius:12px;padding:10px}.location{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:800;letter-spacing:2px;color:#3f7263;pointer-events:none}.bottom{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:22px;right:22px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.dpad{display:grid;grid-template-columns:52px 52px 52px;grid-template-rows:52px 52px 52px;gap:5px;pointer-events:auto;touch-action:none}.dpad button{background:#fffaf0dd;border:1px solid white;border-radius:17px;font-size:23px;touch-action:none;user-select:none;box-shadow:0 3px 0 #779b8b33}.dpad button:active{background:#e5efc9}.dpad [data-dir=up]{grid-column:2}.dpad [data-dir=left]{grid-row:2;grid-column:1}.dpad [data-dir=right]{grid-row:2;grid-column:3}.dpad [data-dir=down]{grid-row:3;grid-column:2}.dpad span{grid-row:2;grid-column:2;display:grid;place-items:center;font-size:14px;color:#406a5e}.context{text-align:right;pointer-events:auto;display:grid;gap:8px}.context span{font-size:16px;background:#fffaf0db;border-radius:12px;padding:8px 12px}.context button{background:var(--green);color:white;font-weight:800;padding:18px 25px;font-size:21px;border-radius:20px;box-shadow:0 5px 0 #1b5147;min-width:180px}.inventory{position:fixed;right:22px;top:90px;padding:13px 18px;border-radius:18px;background:#fff2cddd;font-size:20px;font-weight:800}.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;max-width:80vw;background:#fffaf0f5;box-shadow:0 8px 40px #24483b28;border-radius:20px;font-size:21px;font-weight:700;padding:18px 25px;opacity:0;transition:opacity .2s}.toast.show{opacity:1}dialog{border:0;border-radius:30px;padding:35px;color:#294a43;background:var(--cream);width:min(510px,calc(100vw - 32px));max-height:90dvh;overflow:auto;box-shadow:0 20px 100px #193d4444;text-align:center}dialog::backdrop{background:#284d4c66;backdrop-filter:blur(5px)}dialog h2{font-size:30px;margin:15px 0}.eyebrow{font-size:13px;letter-spacing:2px;color:#638873;font-weight:800}.dialog-icon{font-size:66px;margin:14px 0}.tips{display:grid;gap:8px;background:#eef0df;border-radius:18px;text-align:left;padding:18px;font-size:18px;margin:20px 0}fieldset{border:1px solid #d4dfc9;border-radius:17px;padding:12px;text-align:left;margin:18px 0}legend{font-size:16px}label{display:block;font-size:17px;padding:9px 0}input{accent-color:var(--green);width:19px;height:19px;vertical-align:middle}.primary{width:100%;padding:17px 20px;background:var(--green);color:white;border-radius:16px;font-size:21px;font-weight:800}.secondary{width:100%;padding:15px;background:#e9ecde;margin-top:12px;border-radius:16px;font-size:19px}.practice{display:block;margin-top:20px;font-size:17px;color:#557768}.english{font-size:27px;font-weight:800;line-height:1.4;color:#286f60}#fallback{position:fixed;inset:0;background:#fffaf0;z-index:100;align-content:center;text-align:center;padding:30px}#fallback a{color:#286f60;font-size:22px}#fallback[hidden]{display:none}@media(max-width:650px){.hud{left:12px;right:12px;top:max(10px,env(safe-area-inset-top))}.pill{font-size:17px;padding:10px 13px;border-radius:14px}.quest{left:12px;top:max(68px,calc(env(safe-area-inset-top) + 58px));width:min(310px,calc(100vw - 24px));padding:15px 17px;border-radius:20px}.quest h1{font-size:21px;margin:8px 0}.quest p{font-size:16px}.quest-top{font-size:11px}.quest-actions{margin-top:10px}.quest-actions button{font-size:15px;padding:9px}.bottom{left:12px;right:12px;bottom:max(20px,env(safe-area-inset-bottom))}.dpad{grid-template-columns:45px 45px 45px;grid-template-rows:45px 45px 45px;gap:4px}.context button{font-size:18px;padding:16px;min-width:160px}.context span{font-size:14px;max-width:175px}.inventory{top:auto;bottom:185px;right:12px;font-size:18px;padding:10px 13px}.location{bottom:180px;font-size:11px;white-space:nowrap}dialog{padding:25px}dialog h2{font-size:26px}}@media(max-height:550px) and (orientation:landscape){.quest{top:72px;width:280px;padding:13px 17px}.quest h1{font-size:20px}.quest p{font-size:15px}.dpad{grid-template-columns:42px 42px 42px;grid-template-rows:42px 42px 42px}.quest-actions{margin-top:8px}.quest-actions button{padding:8px;font-size:14px}.location{bottom:20px}.inventory{top:75px}dialog{max-height:94dvh;padding:22px}#welcome .dialog-icon{display:none}.tips{margin:10px 0}fieldset{margin:10px 0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Keep the playfield open: details are opt-in, controls stay touch sized. */
.quest{padding:11px 14px;width:350px;border-radius:19px;background:#fffaf0eb}
.quest-summary{display:flex;align-items:center;gap:6px}
.quest-heading{flex:1;min-width:0}
.quest-summary #chapter{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;letter-spacing:1px;color:#6f8a70;font-weight:800}
.quest-summary h1{font-size:20px;margin:4px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quest-summary button{flex:0 0 44px;height:44px;background:transparent;border-radius:12px;font-size:22px}
.quest-summary button:hover{background:#e8eee0}
.quest-details{border-top:1px solid #dfe5d5;margin-top:12px;padding-top:12px}
.quest-details[hidden]{display:none}
.quest-details #phase{font-size:14px;color:#6f8a70;font-weight:800}
.context button[hidden]{display:none}
.context span{font-size:14px;max-width:210px;padding:7px 11px;line-height:1.35}
.context button{font-size:19px;min-width:140px;padding:15px 20px}
.location{display:none}
@media(max-width:650px){
.hud{gap:6px}.hud .brand{font-size:15px;padding:10px 12px;gap:5px}.hud-right{gap:6px}.hud-right .pill{padding:10px 12px;min-height:44px;font-size:16px}
.quest{width:calc(100vw - 24px);padding:10px 12px;top:max(66px,calc(env(safe-area-inset-top) + 56px))}
.quest-summary h1{font-size:19px;margin:3px 0 0}.quest-summary #chapter{font-size:10px}.quest-summary button{font-size:20px}
.bottom{left:12px;right:12px}.dpad{grid-template-columns:44px 44px 44px;grid-template-rows:44px 44px 44px;gap:3px}.dpad button{font-size:20px;border-radius:15px;background:#fffaf0c9}.dpad span{font-size:12px;opacity:.7}
.context span{max-width:165px;font-size:14px}.context button{font-size:18px;padding:14px 16px;min-width:140px}.inventory{bottom:165px;font-size:16px}
}
@media(max-width:360px){.hud .brand{font-size:14px;padding:10px 9px}.hud-right .pill{padding:10px}.quest-summary h1{font-size:18px}}
@media(max-height:550px) and (orientation:landscape){.quest{width:320px;top:70px;padding:9px 12px}.quest-summary h1{font-size:18px}.quest-details{max-height:calc(100dvh - 180px);overflow:auto}.quest-summary button{height:44px}.dpad{grid-template-columns:44px 44px 44px;grid-template-rows:44px 44px 44px}.context span{max-width:200px}}

.app-logo{display:block;object-fit:cover;border-radius:9px;flex-shrink:0}
@media(max-width:650px){.hud .app-logo{width:26px;height:26px;border-radius:7px}.hud .brand{padding-top:7px;padding-bottom:7px}}