*{box-sizing:border-box}html,body{color:#f2f2f2;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;background:#000;width:100%;height:100%;margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,PingFang SC,Microsoft YaHei,sans-serif;overflow:hidden}#game-canvas{width:100vw;height:100vh;touch-action:none;width:100lvw;height:100lvh;display:block;position:fixed;top:0;left:0}.hidden{display:none!important}.screen{z-index:10;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(#2f4a35 0%,#1b2a1f 70%);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#join-form{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#00000059;border-radius:16px;flex-direction:column;gap:12px;width:min(360px,90vw);padding:24px;display:flex}.form-head{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}#join-form h1{letter-spacing:.05em;margin:0;font-size:2rem}#lang-btn{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff59;border-radius:999px;padding:6px 12px;font-size:.85rem}#lang-btn:hover{background:#fff3}#join-form label{opacity:.9;flex-direction:column;gap:4px;font-size:.9rem;display:flex}#join-form input,#join-form select{color:#fff;background:#ffffff14;border:1px solid #ffffff40;border-radius:8px;outline:none;padding:10px 12px;font-size:1rem}#join-form input:focus,#join-form select:focus{border-color:#9ad27f}#join-form select option{color:#000}#join-btn{color:#10210f;cursor:pointer;background:#6cbf5a;border:none;border-radius:10px;margin-top:8px;padding:12px;font-size:1.1rem;font-weight:600}#join-btn:disabled{opacity:.6;cursor:default}.status{color:#ffd27f;text-align:center;min-height:1.2em;margin:0;font-size:.85rem}.hint{opacity:.6;text-align:center;margin:0;font-size:.75rem}#loading-text{font-size:1.2rem}#confirm{z-index:20;background:#0000008c}.dialog{text-align:center;background:#24352a;border-radius:14px;min-width:260px;padding:22px 26px;box-shadow:0 8px 30px #00000080}.dialog p{margin:0 0 16px;font-size:1.1rem}.dialog-actions{justify-content:center;gap:10px;display:flex}.dialog-actions button{color:#fff;cursor:pointer;background:#ffffff1f;border:1px solid #ffffff4d;border-radius:8px;flex:1;padding:10px 14px;font-size:1rem}.dialog-actions button.danger{background:#c83232b3;border-color:#0000}#settings,#players-panel{z-index:20;background:#0000008c}.dialog.settings{text-align:left;min-width:300px;max-width:92vw;max-height:92vh;padding:16px 20px 18px;overflow-y:auto}.settings-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.settings-head h2{margin:0;font-size:1.15rem}#settings-close{color:#fff;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:1.6rem;line-height:1}.settings .row{grid-template-columns:1fr 130px 48px;align-items:center;gap:10px;margin:9px 0;font-size:.95rem;display:grid}.settings .row output{text-align:right;font-variant-numeric:tabular-nums;opacity:.8;white-space:nowrap;font-size:.85rem}.settings .row input[type=range]{accent-color:#7cc47f;width:100%}.settings .row select{color:#fff;background:#ffffff1f;border:1px solid #ffffff4d;border-radius:8px;grid-column:2/4;padding:6px 8px;font-size:.95rem}.settings .row select option{color:#000;background:#fff}.settings .row .note{opacity:.65;grid-column:1/4;margin:-4px 0 0;font-size:.78rem}.settings .row.buttons{grid-template-columns:1fr 1fr;margin-top:12px}.settings button.wide,.settings .row.buttons button{color:#fff;cursor:pointer;background:#ffffff1f;border:1px solid #ffffff4d;border-radius:8px;padding:10px 12px;font-size:.95rem}.settings button.wide{width:100%;margin-top:16px;display:block}.settings button.sub{text-align:left;margin-top:6px}.settings button.sub:after{content:"›";float:right;opacity:.7}#settings-fullscreen:after{content:"⛶"}.settings .back{color:#fff;cursor:pointer;background:0 0;border:none;padding:0 8px 0 0;font-size:1.8rem;line-height:1}.settings .hint{opacity:.7;margin:0 0 8px;font-size:.82rem}#players-list .row{grid-template-columns:14px 1fr 130px 48px}#players-list .dot{border:1px solid #ffffff80;border-radius:50%;width:12px;height:12px}#players-list .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#players-list input[type=range].muted-player{accent-color:#c8503c}.settings button.danger{background:#c83232b3;border-color:#0000}@media (max-height:420px){.dialog.settings{padding:10px 16px 12px}.settings .row{margin:5px 0;font-size:.85rem}.settings button.wide{margin-top:8px;padding:7px}}#hud{pointer-events:none;z-index:5;position:fixed;inset:0}.hud-btn,#menu-btn,#mute-btn,#react-btn,#crouch-btn,#jump-btn{pointer-events:auto;color:#fff;cursor:pointer;touch-action:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000061;border:2px solid #ffffff73;border-radius:50%;justify-content:center;align-items:center;display:flex}#menu-btn:hover{background:#ffffff40}#hud-top{top:calc(8px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));text-shadow:0 1px 2px #000;z-index:6;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;font-size:.8rem;display:grid;position:absolute}.hud-group{align-items:center;gap:10px;min-width:0;display:flex}.hud-left{justify-content:flex-start}.hud-center{justify-content:center}.hud-right{opacity:.7;justify-content:flex-end}#hud-room,#hud-info{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#menu-btn{flex:none;width:38px;height:38px}body.fullscreen.touch #hud-top{left:calc(96px + env(safe-area-inset-left))}#mute-btn{background:#3cb4508c;flex:none;width:44px;height:44px}#mute-btn .slash{display:none}#mute-btn.muted{background:#c8323299}#mute-btn.muted .slash{display:block}#mute-btn.whisper{background:#e6b43c99}#hud-clock{font-variant-numeric:tabular-nums;background:#00000059;border-radius:999px;padding:3px 8px}#minimap{top:calc(56px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));opacity:.9;border-radius:10px;position:absolute;box-shadow:0 2px 8px #0006}#hud-voice{top:calc(60px + env(safe-area-inset-top));text-align:center;color:#ffd27f;text-shadow:0 1px 3px #000;max-width:70vw;font-size:.85rem;position:absolute;left:50%;transform:translate(-50%)}#hud-net{text-align:center;color:#ffd27f;text-shadow:0 1px 3px #000;font-size:1.1rem;position:absolute;top:40%;left:0;right:0}#hud-help{bottom:calc(8px + env(safe-area-inset-bottom));text-align:center;opacity:.6;text-shadow:0 1px 2px #000;font-size:.75rem;position:absolute;left:130px;right:120px}#joystick-zone,#look-zone{top:0;bottom:calc(28px + env(safe-area-inset-bottom,0px));width:50%;display:none;position:absolute}#joystick-zone{left:0}#look-zone{right:0}body.touch #joystick-zone,body.touch #look-zone{pointer-events:auto;touch-action:none;display:block}body.touch .desktop-only{display:none}.touch-only{display:none!important}body.touch .touch-only{display:flex!important}#actions{right:calc(22px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:6;flex-direction:column;align-items:center;gap:12px;display:flex;position:absolute}#react-btn{width:52px;height:52px;font-size:1.6rem;line-height:1}#crouch-btn{width:60px;height:60px}#crouch-btn.active{background:#e6b43c99}#jump-btn{background:#ffffff2e;width:72px;height:72px;font-size:2rem;line-height:1}#jump-btn:active,#crouch-btn:active,#react-btn:active{background:#ffffff73}#react-panel{right:calc(88px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;z-index:7;background:#0009;border-radius:14px;width:min(320px,70vw);padding:10px;position:absolute}#react-emojis{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}#react-emojis button{cursor:pointer;background:#ffffff1a;border:none;border-radius:8px;padding:6px 0;font-size:1.5rem}#react-emojis button:hover{background:#ffffff40}#react-emotes{gap:6px;margin-top:8px;display:flex}#react-emotes button{color:#fff;cursor:pointer;background:#ffffff1f;border:1px solid #ffffff4d;border-radius:8px;flex:1;padding:8px 4px;font-size:.85rem}#g-crosshair{background:#ffffffe6;border-radius:50%;width:6px;height:6px;margin:-3px 0 0 -3px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1.5px #00000080,0 0 0 9px #ffffff1f}#g-context{text-shadow:0 1px 3px #000;opacity:.9;white-space:nowrap;font-size:.8rem;position:absolute;top:calc(50% + 22px);left:50%;transform:translate(-50%)}#g-context.danger{color:#ff6b6b;font-weight:600}#g-hp{left:calc(18px + env(safe-area-inset-left));bottom:calc(52px + env(safe-area-inset-bottom));background:#28190cb3;border:2px solid #5a3c1ee6;border-radius:8px;flex-direction:column-reverse;width:22px;height:190px;display:flex;position:absolute;overflow:hidden}#g-hp-fill{background:linear-gradient(#7fe06a,#3aa83a);width:100%;height:100%;transition:height .4s linear}#g-hp-fill.mid{background:linear-gradient(#fc5,#e08a1e)}#g-hp-fill.low{background:linear-gradient(#ff6a5a,#c62828);animation:1s infinite hp-pulse}@keyframes hp-pulse{50%{filter:brightness(1.5)}}#g-hp-text{left:calc(12px + env(safe-area-inset-left));bottom:calc(30px + env(safe-area-inset-bottom));text-align:center;text-shadow:0 1px 2px #000;width:34px;font-size:.72rem;position:absolute}#g-role-tag{left:calc(12px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));color:#8fd3ff;text-shadow:0 1px 3px #000;font-size:.85rem;font-weight:700;position:absolute}#g-role-tag.wolf{color:#ff6b6b}body.touch #g-hp{height:130px;bottom:calc(48px + env(safe-area-inset-bottom))}#g-inv{left:calc(52px + env(safe-area-inset-left));bottom:calc(52px + env(safe-area-inset-bottom));background:#00000073;border:2px solid #d9a441b3;border-radius:10px;align-items:center;gap:8px;padding:6px 10px;font-size:.8rem;display:flex;position:absolute}#g-inv-icon{font-size:1.4rem;line-height:1}#g-inv-hint{opacity:.6;font-size:.7rem}body.touch #g-inv{bottom:calc(48px + env(safe-area-inset-bottom));left:calc(48px + env(safe-area-inset-left))}#g-item-btns{gap:8px;display:flex}#use-btn.lock{background:#28823cd9}#use-btn,#drop-btn{pointer-events:auto;color:#fff;touch-action:none;background:#966e1ecc;border:2px solid #ffffff80;border-radius:999px;padding:10px 14px;font-size:.9rem;font-weight:600}#drop-btn{background:#505050cc}#g-ammo{left:calc(52px + env(safe-area-inset-left));bottom:calc(100px + env(safe-area-inset-bottom));background:#00000073;border:2px solid #a0a0aa99;border-radius:10px;padding:5px 10px;font-size:.85rem;font-weight:600;position:absolute}#g-ammo.reloading{color:#ffd27f}#g-potions{left:calc(52px + env(safe-area-inset-left));bottom:calc(150px + env(safe-area-inset-bottom));background:#00000080;border:2px solid #c878ff99;border-radius:10px;padding:6px 10px;font-size:.8rem;line-height:1.5;position:absolute}#g-potions .title{opacity:.7;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem}#g-potions .bad{color:#ff8a8a}#g-potions .good{color:#9be89b}#g-effects{left:50%;top:calc(96px + env(safe-area-inset-top));pointer-events:none;gap:8px;font-size:.8rem;display:flex;position:absolute;transform:translate(-50%)}#g-effects span{background:#00000080;border:1px solid #ffffff4d;border-radius:999px;padding:3px 10px}#g-effects span.bad{color:#ffb0b0;border-color:#ff5a5ab3}#g-blind{pointer-events:none;z-index:9;background:#000;position:absolute;inset:0}body.aiming #g-crosshair{background:0 0;border:2px solid #ffffffe6;width:26px;height:26px;margin:-13px 0 0 -13px;box-shadow:0 0 0 1px #0009}body.aiming #g-crosshair:after{content:"";background:#ff5a5a;border-radius:50%;width:4px;height:4px;margin:-2px 0 0 -2px;position:absolute;top:50%;left:50%}#aim-btn{pointer-events:auto;color:#fff;touch-action:none;background:#3c3c50cc;border:2px solid #ffffff80;border-radius:999px;padding:12px 18px;font-size:1rem;font-weight:600}#aim-btn.active{background:#c83c3cd9}body.touch #g-ammo{bottom:calc(96px + env(safe-area-inset-bottom));left:calc(48px + env(safe-area-inset-left))}body.touch #g-potions{bottom:calc(140px + env(safe-area-inset-bottom));left:calc(48px + env(safe-area-inset-left));font-size:.72rem}#g-players{right:calc(10px + env(safe-area-inset-right));top:calc(215px + env(safe-area-inset-top));pointer-events:none;flex-direction:column;gap:3px;max-height:calc(100% - 260px);font-size:.82rem;display:flex;position:absolute;overflow-y:auto}body.touch #g-players{top:calc(150px + env(safe-area-inset-top));gap:2px;max-height:calc(100% - 170px);font-size:.74rem}body.touch .g-player{min-width:110px;padding:2px 6px}.g-player{background:#0000006b;border-left:3px solid #ffffff59;border-radius:6px;align-items:center;gap:6px;min-width:130px;padding:3px 8px;display:flex}.g-player.me{border-left-color:#8fd3ff}.g-player.wolf{border-left-color:#ff5a5a}.g-player.dead{opacity:.55}.g-player.dead .name{text-decoration:line-through}.g-player.offline .name{opacity:.5;font-style:italic}.g-player .name{white-space:nowrap;text-overflow:ellipsis;flex:1;max-width:120px;overflow:hidden}.g-player .tag{opacity:.85;background:#ffffff1f;border-radius:4px;padding:1px 5px;font-size:.7rem}.g-player.wolf .tag{background:#c8282880}.g-player .votes{text-align:center;color:#ffd27f;min-width:20px;font-weight:700}.g-player .votes.has{background:#ffd27f2e;border-radius:10px}#g-players.council .g-player.votable{pointer-events:auto;cursor:pointer;background:#0009}#g-players.council .g-player.votable:hover{background:#ffffff2e}#g-players.council .g-player.voted{background:#785a1499;outline:2px solid #ffd27f}.g-player.pass{border-left-color:#aaa;margin-top:6px}#g-banner{text-align:center;letter-spacing:.03em;text-shadow:0 2px 8px #000,0 0 24px #000c;max-width:80vw;font-size:clamp(1.2rem,3.2vw,2rem);font-weight:700;animation:.4s ease-out banner-in;position:absolute;top:22%;left:50%;transform:translate(-50%)}#g-banner.wolf,#g-banner.danger{color:#ff6b6b}#g-banner.night{color:#9db8ff}#g-banner.day{color:#ffe08a}@keyframes banner-in{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}#g-vignette{opacity:0;pointer-events:none;background:radial-gradient(#0000 45%,#7800008c 80%,#3c0000e6 100%);transition:opacity .3s;animation:.9s infinite vignette-pulse;position:absolute;inset:0}@keyframes vignette-pulse{50%{transform:scale(1.04)}}body.wolf-vision #game-canvas{filter:sepia()saturate(5)hue-rotate(-38deg)brightness(1.35)contrast(1.15)}#g-dead{left:50%;top:calc(58px + env(safe-area-inset-top));pointer-events:auto;z-index:6;background:#0000008c;border-radius:999px;align-items:center;gap:12px;padding:6px 14px;font-size:.9rem;display:flex;position:absolute;transform:translate(-50%)}#g-dead-channel{color:#fff;cursor:pointer;background:#ffffff1f;border:1px solid #fff6;border-radius:999px;padding:5px 10px;font-size:.8rem}#g-actions{right:calc(110px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:6;flex-direction:column;align-items:flex-end;gap:10px;display:flex;position:absolute}@media (max-height:460px){#react-btn{width:44px;height:44px;font-size:1.3rem}#crouch-btn{width:52px;height:52px}#jump-btn{width:60px;height:60px;font-size:1.6rem}#actions{gap:8px}}#action-btn,#transform-btn{pointer-events:auto;color:#fff;cursor:pointer;touch-action:none;white-space:nowrap;background:#28783cbf;border:2px solid #ffffff80;border-radius:999px;padding:12px 18px;font-size:1rem;font-weight:600}#action-btn.danger{background:#b41e1ecc}#transform-btn{background:#781428cc}#transform-btn:disabled{opacity:.45}body:not(.touch) #action-btn{display:none!important}#hud-clock.night{color:#bcd0ff;background:#141e5099}#hud-clock.council{color:#ffe08a;background:#785a14b3}#hud-clock.day{background:#00000059}#g-harvest{color:#ffe08a;opacity:1;background:#00000059;border-radius:999px;padding:3px 8px;font-weight:600}#g-lobby{pointer-events:none;z-index:8;justify-content:flex-start;align-items:center;padding:60px 16px 16px;display:flex;position:fixed;inset:0}.g-panel{pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#141e16db;border-radius:14px;width:min(380px,92vw);max-height:calc(100vh - 80px);padding:14px 18px;overflow-y:auto;box-shadow:0 8px 30px #00000080}.g-panel h2{margin:0 0 4px;font-size:1.1rem}.g-sub{opacity:.8;margin:0 0 4px;font-size:.85rem}#g-settings-grid{flex-direction:column;gap:4px;margin:10px 0;display:flex}.g-setting{grid-template-columns:1fr 80px;align-items:center;gap:8px;font-size:.85rem;display:grid}.g-setting small{opacity:.6;grid-column:1/3;min-height:0;margin-top:-2px;font-size:.72rem}.g-setting small:empty{display:none}.g-setting input[type=number]{color:#fff;background:#ffffff1a;border:1px solid #ffffff4d;border-radius:6px;width:80px;padding:4px 6px;font-size:.9rem}.g-setting input[type=checkbox]{accent-color:#7cc47f;justify-self:end;width:20px;height:20px}.g-setting input:disabled{opacity:.6}#g-start{color:#10210f;cursor:pointer;background:#6cbf5a;border:none;border-radius:10px;width:100%;padding:12px;font-size:1.05rem;font-weight:700}#g-start:disabled{color:#ccc;cursor:default;background:#ffffff26}@media (max-height:520px){#g-lobby{padding-top:50px}.g-panel{padding:8px 14px}#g-settings-grid{gap:1px}}#g-role{z-index:18;background:#0a100ceb}#g-role.wolf{background:#280608f0}.g-role-card{text-align:center;max-width:520px;padding:20px}.g-kicker{opacity:.7;letter-spacing:.15em;text-transform:uppercase;margin:0;font-size:.85rem}#g-role-name{color:#8fd3ff;margin:6px 0 12px;font-size:clamp(2rem,7vw,3.6rem)}#g-role.wolf #g-role-name{color:#ff5a5a}#g-role-desc{margin:0 0 8px;font-size:1.05rem;line-height:1.5}#g-role-extra{color:#ff9c9c;font-weight:600}#g-end{z-index:18;background:#000000b3}.g-endbox{max-width:min(560px,94vw);max-height:92vh;overflow-y:auto}#g-end-title{color:#8fd3ff;margin:0;font-size:2rem}#g-end-title.wolf{color:#ff5a5a}#g-end-reason{opacity:.85;margin:4px 0 12px}#g-end-table{text-align:left;flex-direction:column;gap:3px;display:flex}.g-end-row{background:#ffffff0f;border-radius:6px;grid-template-columns:1fr auto 1.2fr;align-items:center;gap:8px;padding:4px 8px;font-size:.9rem;display:grid}.g-end-row.wolf{background:#c828282e}.g-end-row.dead .name{opacity:.7;text-decoration:line-through}.g-end-row .tag{background:#ffffff1f;border-radius:4px;padding:1px 6px;font-size:.75rem}.g-end-row .fate{opacity:.8;text-align:right;font-size:.8rem}#g-end-history{opacity:.75;text-align:left;margin-top:10px;font-size:.8rem}#g-end-close{color:#fff;cursor:pointer;background:#ffffff1f;border:1px solid #ffffff4d;border-radius:8px;margin-top:12px;padding:8px 16px}