:root{font-family:Noto Sans Thai,Leelawadee UI,Tahoma,sans-serif;color:#25233a;background:#9ddcff;font-synthesis:none;--violet: #5b4bd6;--violet-dark: #4135a8;--mint: #65cf9f;--yellow: #ffd968;--danger: #b9364d;--panel: rgba(255, 255, 255, .96)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{touch-action:manipulation}button,input,select{font:inherit}button{min-height:48px;border:0;border-radius:14px;padding:11px 18px;cursor:pointer;background:#eceafe;color:#302a72;font-weight:800;box-shadow:0 4px #c9c5ee}button:hover{filter:brightness(1.04)}button:active{transform:translateY(2px);box-shadow:0 2px #c9c5ee}button:focus-visible{outline:4px solid #ffc83d;outline-offset:3px}button:disabled{opacity:.55;cursor:wait}button.primary{color:#fff;background:var(--violet);box-shadow:0 4px 0 var(--violet-dark)}button.danger{color:#fff;background:var(--danger);box-shadow:0 4px #812237}.hidden{display:none!important}.screen{position:fixed;inset:0;display:none;place-items:center;padding:18px;z-index:50;background:linear-gradient(#8dd9ff,#dff8ff 65%,#b8ed9a)}.screen.active{display:grid}.panel{width:min(540px,100%);padding:26px;border-radius:26px;background:var(--panel);box-shadow:0 18px 55px #2e2a5b40;text-align:center}.panel h1{margin:8px 0 10px;line-height:1.25;color:#3e3599}.brand-cube{font-size:64px}.title-badge{display:inline-block;padding:5px 12px;border-radius:999px;background:#e9e5ff;color:#4a3bb7;font-weight:800}.alias{font-weight:800;color:#187852}.button-stack{display:grid;gap:12px;max-width:330px;margin:22px auto}.privacy-note{font-size:.85rem;color:#68657b}.progress-track{height:14px;border-radius:999px;overflow:hidden;background:#e1dff4}.progress-fill{width:8%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--violet),#8f7fff);transition:width .25s}#game-shell,#game-canvas{width:100%;height:100%;display:block}#game-shell{position:fixed;inset:0;background:#8dd9ff;touch-action:none}#game-canvas{outline:none}#hud{position:absolute;inset:max(10px,env(safe-area-inset-top)) 12px auto;display:flex;gap:10px;align-items:flex-start;pointer-events:none}.hud-card{background:#ffffffed;border:2px solid rgba(85,73,176,.16);border-radius:15px;padding:8px 12px;box-shadow:0 5px 16px #241f5429}.mission-card{display:grid;min-width:260px;max-width:min(480px,52vw)}.mission-card strong{color:#403799}.mission-card span:last-child{font-size:.88rem}.hud-label{font-size:.72rem;color:#69657c;font-weight:800;text-transform:uppercase}.score-card{white-space:nowrap;font-size:1.15rem}.sync-card{white-space:nowrap;font-size:.84rem}.sync-card[data-state=pending]{background:#fff0b9;color:#795d00}.sync-card[data-state=error]{background:#ffe0e5;color:#8c2638}.icon-button{min-width:48px;padding:8px;pointer-events:auto}.interaction-hint{position:absolute;left:50%;bottom:18%;transform:translate(-50%);padding:10px 16px;border-radius:14px;background:#201c40e0;color:#fff;font-weight:800}.orientation-hint{position:absolute;inset:auto 16px 18px;z-index:15;border-radius:14px;padding:10px;background:#fff4bd;text-align:center;font-weight:700}.unstuck-button{position:absolute;right:14px;bottom:15px;z-index:12;min-height:44px}#mobile-controls{display:none;position:absolute;inset:0;pointer-events:none}.joystick-zone{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:128px;height:128px;border-radius:50%;background:#ffffff40;border:3px solid rgba(255,255,255,.5);pointer-events:auto;touch-action:none}.joystick-knob{position:absolute;width:56px;height:56px;left:33px;top:33px;border-radius:50%;background:#5345c5c7;box-shadow:0 3px 10px #0003}.look-zone{position:absolute;right:0;top:75px;bottom:0;width:54%;pointer-events:auto;touch-action:none}.action-button{position:absolute;width:76px;height:76px;border-radius:50%;padding:7px;color:#302a72;background:#ffffffe6;pointer-events:auto;touch-action:none}.action-button span{display:block;font-size:.68rem}.jump-button{right:max(24px,env(safe-area-inset-right));bottom:max(32px,env(safe-area-inset-bottom))}.interact-button{right:max(112px,calc(env(safe-area-inset-right) + 88px));bottom:max(86px,calc(env(safe-area-inset-bottom) + 54px))}.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:#1c18379e}.modal{width:min(620px,100%);max-height:min(86vh,720px);overflow:auto;border-radius:24px;padding:24px;background:#fff;box-shadow:0 22px 60px #00000052}.modal h2{margin-top:0;color:#403799}.modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:20px}.choice-list{display:grid;gap:10px}.choice-button{min-height:54px;text-align:left;box-shadow:0 3px #cbc7ec}.choice-button.correct{background:#d7f8e8;color:#126440}.choice-button.incorrect{background:#ffe2e6;color:#8b2739}.result-box{margin-top:14px;padding:13px;border-radius:14px;background:#f2f0ff}.settings-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;text-align:left}.settings-grid input[type=range]{width:180px}.toast-region{position:fixed;right:14px;top:84px;z-index:150;display:grid;gap:8px;pointer-events:none}.toast{max-width:340px;padding:11px 14px;border-radius:13px;color:#fff;background:#302a72;box-shadow:0 6px 20px #0003;animation:toast-in .2s ease-out}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}}@media(pointer:coarse),(max-width:900px){#mobile-controls{display:block}.mission-card{min-width:0;max-width:58vw}.sync-card{position:absolute;top:70px;right:0}.unstuck-button{bottom:8px;left:50%;right:auto;transform:translate(-50%);font-size:.78rem}}@media(orientation:portrait)and (pointer:coarse){.orientation-hint{display:block!important}}@media(max-height:520px){.hud-card{padding:5px 8px}.mission-card span:last-child{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}