:root{--bg: #0a0d12;--accent: #4fd1c5;--danger: #ff5252;--safe: #66bb6a;--panel: rgba(10, 13, 18, .92)}[hidden]{display:none!important}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000;font-family:Noto Sans Thai,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#eef2f6;touch-action:none;overscroll-behavior:none}#app-canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}.ui-root{position:fixed;inset:0;pointer-events:none;z-index:10}.crosshair{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#ffffffd9;box-shadow:0 0 0 2px #00000059;opacity:0;transition:opacity .2s}.ui-root.playing .crosshair{opacity:1}.notifications{position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;transform:translate(-50%);width:min(92vw,460px);display:flex;flex-direction:column;gap:8px;align-items:center}.note{pointer-events:none;width:100%;background:var(--panel);border-left:3px solid var(--accent);border-radius:8px;padding:8px 12px;font-size:14px;line-height:1.35;box-shadow:0 4px 16px #0006;animation:slideIn .25s ease-out}.note .note-src{display:block;font-size:11px;opacity:.6;margin-bottom:2px}.note.alert{border-left-color:var(--danger)}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.note.fade{opacity:0;transition:opacity .6s}.status{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));font-size:12px;opacity:.55;letter-spacing:.5px}.action-btn{pointer-events:auto;position:absolute;right:max(24px,env(safe-area-inset-right));bottom:28%;background:var(--accent);color:#06231f;border:none;border-radius:12px;padding:16px 22px;font-size:16px;font-weight:700;letter-spacing:.5px;box-shadow:0 6px 20px #00000080;animation:pulse 1.4s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.joystick{pointer-events:auto;position:absolute;left:max(28px,env(safe-area-inset-left));bottom:max(40px,env(safe-area-inset-bottom));width:140px;height:140px;border-radius:50%;background:#ffffff14;border:2px solid rgba(255,255,255,.18);touch-action:none}.joystick-knob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:#4fd1c559;border:2px solid var(--accent);pointer-events:none}.sprint-btn{pointer-events:auto;position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(48px,env(safe-area-inset-bottom));width:88px;height:88px;border-radius:50%;background:#ffffff1a;border:2px solid rgba(255,255,255,.22);color:#eef2f6;font-size:15px;font-weight:800;touch-action:none}.sprint-btn.active{background:#4fd1c559;border-color:var(--accent)}.fullscreen-panel{pointer-events:auto;position:absolute;inset:0;background:var(--panel);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;gap:9px;overflow-y:auto}.controls-card{max-width:460px;width:100%;background:#4fd1c514;border:1px solid rgba(79,209,197,.35);border-radius:10px;padding:9px 14px;text-align:left;font-size:13.5px;line-height:1.5}.controls-card-title{font-weight:800;font-size:14px;margin-bottom:3px}.controls-card b{color:var(--accent)}.fullscreen-panel h1{margin:0;font-size:clamp(22px,6vw,34px);letter-spacing:1px}.subtitle{margin:0;max-width:480px;opacity:.8;font-size:15px}.brief{text-align:left;max-width:460px;font-size:15px;line-height:1.5;opacity:.9;padding-left:4px;list-style:none;margin:4px 0}.brief li{margin-bottom:4px}.legend{text-align:left;max-width:460px;width:100%;background:#ffffff0d;border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.7}.legend-title{font-size:12px;opacity:.6;margin-bottom:4px}.legend-item{display:flex;align-items:center;gap:8px}.sw{display:inline-block;width:16px;height:16px;border-radius:5px;flex:0 0 auto;border:1px solid rgba(255,255,255,.2)}.sw-attacker{background:#e61f1f}.sw-target{background:#d9bf4d}.sw-crowd{background:#8c99b3}.sw-exit{background:#40d966}.pick-role{margin:6px 0 2px;font-size:15px;font-weight:700;opacity:.9}.role-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.role-row .primary-btn{padding:16px 26px;font-size:16px}.primary-btn:disabled{opacity:.4;filter:grayscale(.5)}.primary-btn{pointer-events:auto;margin-top:8px;background:var(--accent);color:#06231f;border:none;border-radius:12px;padding:16px 40px;font-size:18px;font-weight:800;letter-spacing:1px;box-shadow:0 6px 20px #00000080}.controls-hint{font-size:12px;opacity:.5;max-width:420px}.ghost-btn{pointer-events:auto;background:transparent;border:1px solid rgba(255,255,255,.25);color:#cfe9e6;border-radius:10px;padding:9px 18px;font-size:14px;margin-top:4px}#help-screen{z-index:2}.help-grid{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-width:760px}.help-card{flex:1 1 320px;max-width:360px;text-align:left;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px}.help-card.current{border-color:var(--accent);background:#4fd1c51a}.help-card-title{font-size:16px;font-weight:800;margin-bottom:8px}.help-card ul{margin:0;padding-left:18px;font-size:15px;line-height:1.45}.help-card li{margin-bottom:8px}.help-card li span{opacity:.55;font-size:12px}.help-goal{font-size:15px;opacity:.9;max-width:620px}.help-optout{pointer-events:auto;display:flex;align-items:center;gap:8px;font-size:14px;opacity:.85;cursor:pointer}.help-optout input{width:18px;height:18px;accent-color:var(--accent)}.result-explain{max-width:520px;font-size:16px;line-height:1.55;opacity:.92;white-space:pre-line;text-align:left}#result-title.win{color:var(--safe)}#result-title.lose{color:var(--danger)}.damage-flash{position:fixed;inset:0;background:radial-gradient(circle,#f000 40%,#b40000bf);opacity:0;pointer-events:none;z-index:20}.damage-flash.show{opacity:1;transition:opacity .08s}