:root{--bg: #1c1f26;--panel: #1c1f26;--panel-2: #2a2e38;--edge: #3a404d;--drop: #0c0e12;--text: #f4f1ec;--muted: #a3a9b6;--brand: #ff8a2a;--brand-2: #ff9a42;--brand-d: #d4600c;--stop: #ff5d5d;--ok: #3ee07f;--safe-b: max(16px, env(safe-area-inset-bottom))}*{box-sizing:border-box;touch-action:none}html{-webkit-text-size-adjust:100%;touch-action:none;overscroll-behavior:none}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text)}body{font-family:Mitr,Noto Sans Thai,system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none}#stage{position:fixed;left:0;top:0;width:100vw;height:100vh;overflow:hidden;--sw: 100vw;--sh: 100vh}#stage.rot{transform-origin:top left;transform:rotate(90deg) translateY(-100%)}#game{position:absolute;top:0;right:0;bottom:0;left:0}.chip.on{background:var(--brand);border-color:var(--brand)}.tip{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;background:#080a0e99;display:grid;place-items:center;padding:20px}.tip-card{width:min(100%,380px);background:var(--panel);border:2px solid var(--brand);border-radius:20px;padding:18px;box-shadow:0 6px 0 var(--drop);display:grid;gap:10px}.tip-title{font-size:18px;font-weight:600;color:var(--brand-2)}.tip-body{font-size:15px;line-height:1.55}.tip-ok{justify-self:end;border:0;border-radius:12px;padding:8px 22px;background:var(--brand);color:#fff;font-weight:600}#game canvas{display:block;width:100%;height:100%}button{font:inherit;color:inherit;cursor:pointer}.loading{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:14px;background:radial-gradient(circle at 50% 40%,#2a2e38,#15171c 70%);transition:opacity .4s}.loading.done{opacity:0;pointer-events:none}.loading-logo{width:72px;height:72px;border-radius:50%;background:var(--brand);display:grid;place-items:center;font-size:26px;font-weight:600;box-shadow:inset 0 -5px 0 var(--brand-d),0 0 40px #ff8a2a73;animation:bob .9s ease-in-out infinite alternate}.loading-text{color:var(--muted);font-size:15px}@keyframes bob{to{transform:translateY(-8px)}}.topbar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:max(12px,env(safe-area-inset-top)) 16px 10px;pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);min-width:0;background:var(--panel);border:2px solid var(--brand);border-radius:999px;padding:4px 16px 4px 4px;font-weight:600;font-size:16px;box-shadow:0 4px 0 var(--drop),0 8px 20px #00000059;white-space:nowrap}.logo{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand);font-size:12px;font-weight:600;box-shadow:inset 0 -3px 0 var(--brand-d)}.actions{display:flex;gap:8px}.chip{background:var(--panel);border:2px solid var(--edge);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:500;white-space:nowrap;box-shadow:0 4px 0 var(--drop),0 8px 20px #0000004d}.chip:active{transform:translateY(2px)}.toast{position:fixed;z-index:12;left:50%;bottom:calc(var(--safe-b) + 150px);transform:translate(-50%,10px);opacity:0;max-width:min(calc(var(--sw) * .92),480px);padding:10px 18px;border-radius:18px;background:var(--panel);border:2px solid var(--brand);box-shadow:0 4px 0 var(--drop),0 10px 24px #00000059;font-size:15px;font-weight:500;text-align:center;line-height:1.45;transition:opacity .2s,transform .2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%)}.stick{position:fixed;z-index:8;left:calc(20px + env(safe-area-inset-left));bottom:calc(var(--safe-b) + 10px);width:150px;height:150px;border-radius:50%;touch-action:none;background:radial-gradient(circle,#ffffff14 55%,#ffffff29 56%,#ffffff29 62%,#ffffff14 63%);border:3px solid rgba(255,255,255,.45);box-shadow:0 6px 18px #0000004d}.stick:before,.stick:after{content:"▲";position:absolute;left:50%;transform:translate(-50%);color:#ffffff73;font-size:13px}.stick:before{top:8px}.stick:after{bottom:8px;transform:translate(-50%) rotate(180deg)}.stick.on{background-color:#ffffff1a;border-color:#ffffffb3}.stick-knob{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#d9dde5);box-shadow:0 5px #00000059,inset 0 -4px #0000001f;transition:transform .08s;pointer-events:none}.stick.on .stick-knob{transition:none}.act{position:fixed;z-index:8;right:calc(22px + env(safe-area-inset-right));bottom:calc(var(--safe-b) + 22px);width:112px;height:112px;border-radius:50%;border:4px solid #ffd0a3;background:radial-gradient(circle at 40% 30%,#ffa95a,var(--brand) 60%,var(--brand-d));box-shadow:0 7px #a84a08,0 14px 30px #a0460a73;display:grid;place-items:center;touch-action:none;transition:filter .2s}.act-icon{font-size:44px;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}.act.idle{filter:grayscale(.85) brightness(.7)}.act.hit{animation:press .16s ease-out}@keyframes press{40%{transform:translateY(6px) scale(.94);box-shadow:0 1px #a84a08}}.act-tag{position:fixed;z-index:8;right:calc(22px + env(safe-area-inset-right));bottom:calc(var(--safe-b) + 146px);max-width:min(calc(var(--sw) * .6),260px);background:var(--panel);border:2px solid var(--brand);border-radius:14px;padding:5px 12px;font-size:14px;font-weight:500;box-shadow:0 3px 0 var(--drop);text-align:center;pointer-events:none;animation:pop .16s ease-out}.hud{position:fixed;z-index:9;left:50%;transform:translate(-50%);top:calc(max(12px,env(safe-area-inset-top)) + 58px);width:min(calc(calc(var(--sw) * 1) - 32px),440px);background:var(--panel);border:2px solid var(--edge);border-radius:22px;padding:12px 14px;box-shadow:0 6px 0 var(--drop),0 16px 34px #0006;animation:pop .18s ease-out}.hud-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.hud-title{font-weight:600;font-size:16px;color:var(--brand-2)}.hud-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px}.stat{background:var(--panel-2);border-radius:14px;padding:6px 10px}.stat b{display:block;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}.stat span{font-size:12px;color:var(--muted)}.hud-hint{margin-top:8px;font-size:13px;color:var(--muted);text-align:center}.stop{flex:none;border-radius:12px;border:0;background:var(--stop);color:#fff;font-weight:600;font-size:14px;padding:7px 14px;box-shadow:0 3px #b83a3a}.stop:active{transform:translateY(2px)}.dlg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;pointer-events:none}.dlg>*{pointer-events:auto}.dlg-box{position:absolute;left:50%;transform:translate(-50%);bottom:var(--safe-b);width:min(calc(var(--sw) - 24px),1180px);height:clamp(230px,calc(var(--sh) * .5),470px);display:flex;gap:16px;align-items:stretch;background:linear-gradient(180deg,#23314d,#172033);border:3px solid #9fb6dd;border-radius:20px;box-shadow:0 0 0 3px #172033,0 12px 34px #0000008c;padding:18px 18px 14px;cursor:pointer;animation:rise .2s ease-out}.dlg-box.has-portrait{padding-left:clamp(150px,calc(var(--sw) * .2),280px)}.dlg-portrait{position:absolute;left:-4px;bottom:4px;width:clamp(160px,calc(var(--sw) * .22),300px);height:auto;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55));animation:slidein .25s ease-out}.dlg-icon{position:absolute;left:18px;top:-38px;width:70px;height:70px;border-radius:50%;background:var(--brand);display:grid;place-items:center;font-size:36px;border:3px solid #fff;box-shadow:0 4px 0 var(--drop)}.dlg-body{flex:1 1 0;min-width:0;display:flex;flex-direction:column}.dlg-box:not(.has-portrait) .dlg-name{margin-left:74px}.dlg-name{color:#ffd38a;font-weight:600;font-size:clamp(16px,calc(var(--sh) * .026),22px);margin-bottom:8px}.dlg-name:before{content:"-[ ";color:#9fb6dd}.dlg-name:after{content:" ]-";color:#9fb6dd}.dlg-text{flex:1;overflow-y:auto;font-size:clamp(17px,calc(var(--sh) * .032),26px);line-height:1.6;color:#fff}.dlg-box:not(.typed) .dlg-text:after{content:"▌";color:#ffd38a;animation:blink .6s steps(1) infinite}.dlg-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:8px}.dlg-dots{display:flex;gap:6px}.dlg-dots span{width:9px;height:9px;border-radius:50%;background:#ffffff47}.dlg-dots span.on{background:#ffd38a;width:22px;border-radius:6px}.dlg-nav{width:46px;height:40px;border-radius:12px;border:2px solid #9fb6dd;background:#2c3d5e;color:#fff;font-size:16px}.dlg-nav.next{background:var(--brand);border-color:#ffd0a3}.dlg-box.typed .dlg-nav.next{animation:nudge 1s ease-in-out infinite}.dlg-pic{flex:0 0 44%;min-width:0;display:flex;align-items:center;justify-content:center}.dlg-pic img{max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;background:#fff;border:4px solid #fff;box-shadow:0 6px #0000004d}@keyframes blink{50%{opacity:0}}@keyframes nudge{50%{transform:translate(3px)}}@keyframes rise{0%{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%)}}@keyframes slidein{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:none}}.trk{position:absolute;z-index:7;right:calc(14px + env(safe-area-inset-right));top:calc(max(12px,env(safe-area-inset-top)) + 54px);width:min(270px,calc(var(--sw) * .4));background:#1c1f26e6;border:2px solid var(--edge);border-radius:16px;box-shadow:0 4px 0 var(--drop);overflow:hidden}.trk.all{border-color:var(--ok)}.trk-head{width:100%;text-align:left;background:none;border:0;padding:8px 12px;font-size:14px;font-weight:600;color:var(--brand-2)}.trk.closed .trk-list{display:none}.trk-list{display:grid;gap:3px;padding:0 8px 8px;max-height:calc(var(--sh) - 260px);overflow-y:auto}.trk-row{display:flex;align-items:flex-start;gap:8px;background:none;border:0;padding:4px;border-radius:8px;text-align:left;font-size:13px;line-height:1.35;color:var(--muted)}.trk-row.next{color:var(--text);background:#ff8a2a1f}.trk-row.ok{color:#b9f0c7;cursor:pointer}.trk-row.ok .trk-text{text-decoration:line-through;text-decoration-color:#b9f0c780}.trk-check{flex:none;width:17px;height:17px;margin-top:1px;border-radius:5px;border:2px solid #5a6170;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff}.trk-row.ok .trk-check{background:#2fbf5a;border-color:#2fbf5a}.trk-row.next .trk-check{border-color:var(--brand)}.trk-cta{margin-top:6px;background:var(--brand);border-radius:12px;padding:10px;font-size:13px;text-align:center;display:grid;gap:8px}.trk-cta-btn{justify-self:center;background:#fff;color:var(--brand-d);border:0;border-radius:10px;padding:6px 14px;font-weight:600}.trk-reset{justify-self:end;margin-top:4px;background:none;border:0;color:var(--muted);font-size:12px;text-decoration:underline}@keyframes pop{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.hud{animation-name:hudpop}@keyframes hudpop{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}#stage.narrow #map-label,#stage.narrow #title{display:none}#stage.narrow .brand{padding-right:4px}#stage.narrow .stick{width:128px;height:128px;left:14px}#stage.narrow .stick-knob{width:58px;height:58px;margin:-29px 0 0 -29px}#stage.narrow .act{width:96px;height:96px;right:16px}#stage.narrow .act-icon{font-size:38px}#stage.narrow .act-tag{right:14px;bottom:calc(var(--safe-b) + 128px)}#stage.narrow .toast{bottom:calc(var(--safe-b) + 196px)}#stage.short .stick{width:116px;height:116px;bottom:8px}#stage.short .stick-knob{width:54px;height:54px;margin:-27px 0 0 -27px}#stage.short .act{width:90px;height:90px;bottom:12px}#stage.short .act-icon{font-size:36px}#stage.short .act-tag{bottom:110px}#stage.short .toast{bottom:120px}#stage.short .topbar{padding-top:8px}#stage.short .hud{top:52px;padding:8px 12px}#stage.short .hud-head{margin-bottom:6px}#stage.short .hud-hint{display:none}#stage.narrow .dlg-box{flex-direction:column-reverse;height:calc(var(--sh) * .6);padding:14px;gap:10px}#stage.narrow .dlg-box.has-portrait{padding-left:14px}#stage.narrow .dlg-portrait{width:120px;left:6px;top:-92px;bottom:auto}#stage.narrow .dlg-box.has-portrait .dlg-name{margin-left:112px}#stage.narrow .dlg-pic{flex:1 1 0;min-height:0}#stage.narrow .dlg-pic img{max-height:100%}#stage.narrow .dlg-text{flex:none;max-height:9em}#stage.short .dlg-box{height:calc(var(--sh) * .58);padding-top:12px}#stage.short .dlg-text{font-size:16px}#stage.short .trk{top:50px}