@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Noto+Serif+Thai:wght@400;600;700&display=swap');
@media(max-width:768px){#hud #joystick{display:block}#hud .control-hint{display:none}#hud .bottomline{justify-content:flex-end}}
:root{color-scheme:dark;--paper:#f2eddf;--muted:#b3c1bf;--gold:#d4ad6c;--edge:#bcc7ba40;font-family:'Noto Sans Thai',sans-serif;color:var(--paper);background:#0c1519}*{box-sizing:border-box}html,body,main{margin:0;width:100%;height:100%;overflow:hidden}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button,a,summary,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #eed69e;outline-offset:5px}button{border:1px solid var(--edge);color:inherit;background:#14201fc9;border-radius:3px;padding:12px 18px}button:hover{background:#243733;border-color:#c1b28d}button[aria-pressed=true]{border-color:var(--gold);color:#ffdf9c}[hidden]{display:none!important}#viewport{position:fixed;inset:0;background:#152124 url('assets/entrance-reference.webp') center/cover}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse,transparent 45%,#0208098a 100%)}.screen{position:absolute;inset:0;background:linear-gradient(90deg,#081114f5 0%,#0a1418cf 30%,#07131530 68%,#06111422 100%);overflow:auto;padding:34px 5vw 22px;display:flex;flex-direction:column}.brand{font-size:15px;font-weight:700;letter-spacing:.23em;display:block;align-self:flex-start}.brand span{display:block;font-size:8px;letter-spacing:.45em;color:var(--gold);margin-top:4px}.intro{margin:auto 0;max-width:560px;padding:30px 0}.eyebrow{letter-spacing:.16em;color:var(--gold);font-size:12px;font-weight:600;display:flex;align-items:center;gap:10px}.eyebrow span{width:23px;height:1px;background:var(--gold)}h1{font-family:'Noto Serif Thai',serif;font-weight:600;font-size:clamp(56px,7.5vw,108px);letter-spacing:-.045em;line-height:1.1;margin:22px 0 15px;text-shadow:0 8px 40px #0005}h1 span{display:block}.tagline{font-family:'Noto Serif Thai',serif;font-size:21px;color:#ddd0ad;letter-spacing:.015em}.description{color:var(--muted);line-height:1.9;font-size:14px;margin:24px 0}.start-actions{display:flex;gap:10px;flex-wrap:wrap}.primary{background:#d6b476;color:#17201c;border-color:#d6b476;font-weight:700;min-height:49px;padding:13px 25px}.primary:hover{background:#efd39b;color:#17201c}.secondary{background:#101d1dcc;min-height:49px}.status{font-size:12px;color:#c3cabc;min-height:18px}.small{color:#a1b0b1;font-size:11px;line-height:1.9}.preferences{display:flex;gap:22px;margin-top:20px;font-size:12px;color:#d5dace}label{cursor:pointer}input{accent-color:#d6b476;vertical-align:middle;margin-right:7px}.help{font-size:12px;line-height:1.8;max-width:450px;color:var(--muted);margin-top:16px}.help summary{cursor:pointer;color:#e3ddce}.intro-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px;color:#bbc3b8;border-top:1px solid var(--edge);padding-top:16px}.intro-footer span{color:#98a8a5}.intro-footer i{font-style:normal;margin:0 12px;color:var(--gold)}#hud{position:absolute;inset:0;pointer-events:none}.topline{display:flex;justify-content:space-between;gap:20px;padding:max(24px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) 0 max(28px,env(safe-area-inset-left));background:linear-gradient(#03101580,transparent)}.location{text-shadow:0 2px 12px #000}.location p{margin:0;font-size:11px;letter-spacing:.08em;color:#d6c8a8}.location p span{color:#b6c6c8}.location h2{font-family:'Noto Serif Thai',serif;margin:7px 0 12px;font-size:22px;font-weight:500}.route{display:flex;gap:16px;font-size:10px}.route b{font-weight:400;color:#8fa2a1;padding-top:8px;border-top:1px solid #9eafa544}.route b.visited{color:#e4c899;border-color:#d4ad6c}.icon-button{pointer-events:auto;align-self:flex-start;font-size:20px;background:#111b1d9c;padding:8px 15px}.icon-button span{font-size:12px;margin-left:6px}.reticle{position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:#f2ead2aa;box-shadow:0 0 5px #000}.bottomline{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:end;gap:15px}.control-hint{font-size:11px;color:#c8d0c9;text-shadow:0 2px 4px #000}.control-hint i{padding:0 8px}.tools{display:flex;gap:8px;pointer-events:auto}.tools button{font-size:11px;padding:10px 13px;background:#0d191cce}.notice{width:max-content;position:absolute;bottom:22%;left:50%;transform:translateX(-50%);text-align:center;font-family:'Noto Serif Thai',serif;font-size:20px;line-height:1.6;text-shadow:0 2px 10px #000;max-width:85%;padding:9px 19px;background:#0713159c;border-left:2px solid #b99a64;opacity:0;transition:opacity .35s}.notice.show{opacity:1}.overlay{position:absolute;inset:0;background:#030c10a8;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}.panel{width:min(420px,100%);background:#111d20e8;border:1px solid #91a49c33;padding:35px;box-shadow:0 20px 100px #0007}.panel h2{font-family:'Noto Serif Thai',serif;font-size:35px;line-height:1.4;margin:10px 0}.panel p{color:#bdc6bc;font-size:13px}.panel>button{display:block;width:100%;margin:12px 0}.panel a{font-size:12px;color:#d9b880}.setting{display:flex;align-items:center;gap:7px;font-size:12px;margin:18px 0}.setting select{margin-left:auto;padding:5px;background:#20302e;border:1px solid #68786b;border-radius:2px}#joystick{display:none;position:absolute;bottom:105px;left:25px;width:112px;height:112px;border-radius:50%;border:1px solid #d9e4d849;background:#0b1a1a66;pointer-events:auto;touch-action:none}#stick{position:absolute;top:34px;left:34px;width:42px;height:42px;border-radius:50%;background:#d7dcc55e;border:1px solid #e1dfbd99;pointer-events:none}#joystick>span{position:absolute;bottom:9px;width:100%;text-align:center;font-size:10px;color:#cfdbcc;pointer-events:none}@media(pointer:coarse){#joystick{display:block}.control-hint{display:none}.bottomline{justify-content:flex-end}.tools button{padding:12px 9px}.notice{bottom:35%}}@media(max-width:650px){.screen{padding:24px 25px 18px;background:linear-gradient(90deg,#071014ed,#08151aa1 75%,#08151a66)}.brand{font-size:12px}.intro{padding:25px 0}h1{font-size:67px;margin-top:20px}.tagline{font-size:18px}.description{font-size:13px;margin:17px 0}.intro-footer{font-size:10px;gap:10px}.intro-footer span{display:none}.topline{padding:20px 18px 0}.location h2{font-size:19px}.route{gap:10px;font-size:9px}.bottomline{left:15px;right:15px;bottom:18px}.tools{gap:5px}.tools button{font-size:10px}.notice{font-size:17px}.panel{padding:25px}}@media(max-height:600px){.intro{padding:16px 0}h1{font-size:52px;line-height:1.05}h1 span{display:inline}.tagline{font-size:16px;margin:9px 0}.description{margin:10px 0;font-size:12px}.preferences{margin-top:10px}.intro-footer{padding-top:10px}.screen{padding-top:18px}.help{margin-top:8px}.panel{padding:20px}.panel h2{font-size:25px}}@media(prefers-reduced-motion:reduce){.notice{transition:none}}
/* Headset connection remains available before play and after leaving VR. */
.vr-connect{margin:18px 0;padding:15px 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.vr-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.vr-retry{font-size:12px;padding:12px;background:#0b171b;min-height:45px}.vr-connect .small{margin:10px 0 0;color:#c1cccb}.vr-connect .help{margin-top:10px}.vr-connect .help p{font-size:12px;line-height:1.8}.vr-connect button:disabled{cursor:default}.panel{margin:auto;max-width:100%}.panel .vr-actions>button{flex:1 1 auto;font-size:12px;padding:11px 12px}.overlay{align-items:flex-start}.panel .vr-connect .small{font-size:11px}.preferences{flex-wrap:wrap}