:root{--olive:#5f6b34;--olive-dark:#3d4521;--khaki:#d8cc9c;--sand:#efe6c4;--ink:#1d2012;--panel:#1d2012e0;--accent:#f2c94c;--hider:#5fe1ff;--seeker:#ff8a5c;--danger:#e5533d;color:var(--sand);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{background:#1d2012;height:100%;margin:0;overflow:hidden}canvas#game{width:100vw;height:100vh;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#ui *{pointer-events:auto}.hud,.hud *{pointer-events:none}.hud .pause,.hud .pause *,.hud .chat.open,.hud .chat.open *{pointer-events:auto}button{font:inherit;letter-spacing:.04em;text-transform:uppercase;border:2px solid var(--khaki);color:var(--sand);cursor:pointer;background:0 0;border-radius:6px;padding:.7em 1.2em;font-weight:700}button:hover:not(:disabled){background:#d8cc9c26}button.primary{background:var(--accent);border-color:var(--accent);color:var(--ink)}button.primary:hover:not(:disabled){background:#ffd966}button:disabled{opacity:.4;cursor:default}button.small{padding:.3em .7em;font-size:.85em}input{font:inherit;color:var(--sand);background:#00000059;border:2px solid #d8cc9c80;border-radius:6px;outline:none;padding:.6em .8em}input:focus{border-color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent);padding:0}.screen{justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.screen.menu{background:radial-gradient(#1d201226,#1d2012b3)}.screen.lobby{background:#1d201259}.panel{background:var(--panel);border:1px solid #d8cc9c40;border-radius:12px;flex-direction:column;gap:14px;width:min(440px,100%);max-height:100%;padding:28px;display:flex;overflow:auto;box-shadow:0 20px 60px #00000080}.panel.wide{width:min(560px,100%)}.logo{letter-spacing:.12em;color:var(--accent);text-shadow:3px 3px 0 var(--olive-dark);margin:0;font-size:64px;font-weight:900;line-height:1}.logo span{letter-spacing:.5em;color:var(--khaki);text-shadow:none;text-transform:uppercase;margin-top:6px;font-size:14px;display:block}.tagline{color:var(--khaki);margin:0;line-height:1.4}h2{text-transform:uppercase;letter-spacing:.06em;margin:0}h3{text-transform:uppercase;letter-spacing:.08em;color:var(--khaki);margin:0 0 6px;font-size:14px}.muted{color:#efe6c4a6;margin:0;font-size:.92em}.error{color:#ffb3a6;margin:0}.field{text-transform:uppercase;letter-spacing:.06em;color:var(--khaki);flex-direction:column;gap:6px;font-size:.85em;display:flex}.field input{text-transform:none;letter-spacing:0;font-size:1.15em}.buttons{flex-wrap:wrap;gap:10px;display:flex}.buttons button{flex:1}.join{gap:10px;display:flex}.join input{text-align:center;letter-spacing:.3em;text-transform:uppercase;width:110px;font-weight:700}.join button{flex:1}.loading{color:var(--khaki);flex-direction:column;gap:6px;font-size:.85em;display:flex}.bar{background:#0006;border-radius:3px;height:6px;overflow:hidden}.bar div{background:var(--accent);height:100%;transition:width .2s}.controls{color:var(--khaki);font-size:.88em}.controls summary{cursor:pointer;text-transform:uppercase;letter-spacing:.06em}.controls table{border-collapse:collapse;width:100%;margin-top:8px}.controls td{border-bottom:1px solid #d8cc9c1f;padding:3px 6px}.controls td:first-child{white-space:nowrap;color:var(--sand);font-weight:700}.controls ul{margin:8px 0 0;padding-left:18px;line-height:1.5}.lobby-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.code-box{flex-direction:column;align-items:flex-end;gap:6px;display:flex}.code{letter-spacing:.2em;color:var(--accent);font-size:40px;font-weight:900;line-height:1}.players{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:0;padding:0;list-style:none;display:grid}.players li{background:#ffffff0f;border-radius:6px;align-items:center;gap:6px;padding:8px 10px;display:flex}.players li.me{outline:2px solid var(--accent)}.tag{text-transform:uppercase;letter-spacing:.06em;background:#d8cc9c33;border-radius:4px;margin-left:6px;padding:1px 6px;font-size:.7em}.tag.host{background:var(--accent);color:var(--ink)}.bots{align-items:center;gap:10px;display:flex}.bots span{text-transform:uppercase;letter-spacing:.06em;color:var(--khaki);margin-right:auto;font-size:.85em}.bots b{text-align:center;min-width:2ch;font-size:1.2em}.hud{position:absolute;inset:0}.topbar{background:var(--panel);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;border-radius:8px;align-items:center;gap:18px;padding:8px 18px;font-size:14px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}.topbar .time{color:var(--accent);font-variant-numeric:tabular-nums;font-size:22px;font-weight:900}.role{text-transform:uppercase;letter-spacing:.2em;font-size:13px;font-weight:900;position:absolute;top:68px;left:50%;transform:translate(-50%)}.role.hider{color:var(--hider)}.role.seeker{color:var(--seeker)}.crosshair{width:22px;height:22px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.crosshair:before,.crosshair:after{content:"";background:#ffffffe6;position:absolute;box-shadow:0 0 2px #000}.crosshair:before{width:2px;height:22px;top:0;left:10px}.crosshair:after{width:22px;height:2px;top:10px;left:0}.crosshair.small{width:6px;height:6px}.crosshair.small:before{width:2px;height:6px;top:0;left:2px}.crosshair.small:after{width:6px;height:2px;top:2px;left:0}.crosshair.hit{transform:translate(-50%,-50%)rotate(45deg)scale(1.3)}.crosshair.hit:before,.crosshair.hit:after{background:#fff}.crosshair.kill:before,.crosshair.kill:after{background:var(--danger)}.ammo{background:var(--panel);border-radius:8px;align-items:baseline;gap:8px;padding:10px 16px;display:flex;position:absolute;bottom:24px;right:24px}.ammo b{color:var(--accent);font-variant-numeric:tabular-nums;font-size:36px}.ammo span{text-transform:uppercase;letter-spacing:.08em;color:var(--khaki);font-size:12px}.hider-panel{background:var(--panel);border-radius:8px;flex-direction:column;gap:8px;width:270px;padding:12px 16px;display:flex;position:absolute;bottom:24px;right:24px}.prop-name{text-transform:capitalize;color:var(--hider);font-size:18px;font-weight:800}.hp{background:#00000073;border-radius:4px;height:20px;position:relative;overflow:hidden}.hp div{background:linear-gradient(90deg,#6bbf59,#9ad16b);height:100%;transition:width .2s}.hp span{text-align:center;text-shadow:0 1px 2px #000;font-size:12px;font-weight:700;line-height:20px;position:absolute;inset:0}.keys{text-transform:uppercase;letter-spacing:.04em;flex-wrap:wrap;gap:6px;font-size:11px;display:flex}.keys span{background:#ffffff14;border-radius:4px;padding:3px 7px}.keys span.on{background:var(--hider);color:var(--ink)}.prompt{background:var(--panel);color:var(--accent);white-space:nowrap;border-radius:6px;padding:6px 12px;font-weight:700;position:absolute;top:calc(50% + 34px);left:50%;transform:translate(-50%)}.damage{position:absolute;inset:0;box-shadow:inset 0 0 120px 30px #e5533d99}.blind{text-align:center;background:#000;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;display:flex;position:absolute;inset:0}.blind.red{background:#5a0a00bf}.blind .big{color:var(--accent);font-variant-numeric:tabular-nums;font-size:96px;font-weight:900}.blind p{max-width:460px;margin:0}.roundend{background:var(--panel);text-align:center;border-radius:12px;flex-direction:column;gap:10px;width:min(520px,100% - 32px);padding:24px 28px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.scoreboard table{border-collapse:collapse;width:100%;font-size:14px}.scoreboard th{text-transform:uppercase;letter-spacing:.06em;color:var(--khaki);text-align:right;padding:4px 6px;font-size:11px}.scoreboard th:first-child,.scoreboard td:first-child{text-align:left}.scoreboard td{text-align:right;font-variant-numeric:tabular-nums;border-top:1px solid #d8cc9c1f;padding:5px 6px}.scoreboard tr.me td{color:var(--accent);font-weight:700}.pause{background:#00000080;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.chat{flex-direction:column;gap:3px;width:min(420px,100% - 32px);font-size:14px;display:flex;position:absolute;bottom:16px;left:16px}.chat .line{overflow-wrap:anywhere;background:#00000073;border-radius:4px;align-self:flex-start;max-width:100%;padding:3px 8px}.chat .line.system{color:var(--accent)}.chat input{margin-top:4px}.lobby .chat{pointer-events:auto}@media (width<=640px){.logo{font-size:48px}.topbar{gap:10px;padding:6px 10px;font-size:12px}.hider-panel,.ammo{bottom:12px;right:12px}}