*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#050507;--fg:#f2f2ee;--dim:#8a8a85;--red:#d42b2b;--font:"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif}html,body,#root{background:var(--bg);touch-action:none;width:100%;height:100%;font-family:var(--font);color:var(--fg);-webkit-user-select:none;user-select:none;overflow:hidden}h1,h2,h3,button,input,.big{font-family:var(--font);text-transform:uppercase;letter-spacing:.06em;font-weight:900}.layer{z-index:20;flex-direction:column;justify-content:center;align-items:center;gap:28px;display:flex;position:fixed;inset:0}.layer.dimmed{background:#030305e0}.menu-bg{opacity:.45;z-index:-1;background-position:50%;background-size:cover;position:absolute;inset:0}.title{letter-spacing:.18em;text-align:center;margin-right:-.18em;font-size:clamp(64px,12vw,150px);font-weight:900;line-height:.9}.subtitle{letter-spacing:.5em;color:var(--dim);text-transform:uppercase;margin-right:-.5em;font-size:clamp(18px,2.4vw,26px);font-weight:800}button{background:var(--fg);color:#000;cursor:pointer;border:none;padding:18px 56px;font-size:clamp(22px,3vw,32px);transition:transform 60ms,background .12s}button:hover{background:var(--red);color:var(--fg);transform:scale(1.03)}button:disabled{color:#777;cursor:default;background:#333;transform:none}button.ghost{color:var(--fg);border:4px solid var(--fg);background:0 0}button.ghost:hover{border-color:var(--red);color:var(--red);background:0 0}button.ghost.on{background:var(--fg);color:#000}input[type=text]{border:none;border-bottom:5px solid var(--fg);color:var(--fg);text-align:center;background:0 0;outline:none;width:min(420px,80vw);padding:8px 16px;font-size:clamp(26px,3.6vw,40px)}input[type=text]::placeholder{color:#444}.error{color:var(--red);text-transform:uppercase;font-size:20px;font-weight:800}.roster{flex-direction:column;gap:10px;min-width:min(560px,90vw);display:flex}.roster-row{text-transform:uppercase;letter-spacing:.08em;border:3px solid #2c2c30;justify-content:space-between;align-items:center;padding:10px 20px;font-size:clamp(20px,2.6vw,30px);font-weight:900;display:flex}.roster-row .status{color:var(--dim)}.roster-row .status.ready{color:var(--fg)}.roster-row.me{border-color:var(--fg)}.hud-top{z-index:15;pointer-events:none;text-shadow:0 2px 12px #000;justify-content:center;align-items:baseline;gap:48px;display:flex;position:fixed;top:22px;left:0;right:0}.hud-pages{letter-spacing:.1em;font-size:clamp(34px,5vw,56px);font-weight:900}.hud-timer{color:var(--dim);font-variant-numeric:tabular-nums;font-size:clamp(26px,3.6vw,40px);font-weight:900}.hud-timer.low{color:var(--red)}.bars{z-index:15;pointer-events:none;flex-direction:column;gap:14px;display:flex;position:fixed;bottom:26px;left:30px}.bar{width:min(320px,34vw)}.bar label{letter-spacing:.25em;text-transform:uppercase;text-shadow:0 1px 6px #000;margin-bottom:5px;font-size:15px;font-weight:900;display:block}.bar .track{background:#ffffff24;height:16px}.bar .fill{background:var(--fg);height:100%;transition:width .12s linear}.bar.warn .fill{background:var(--red)}.prompt{text-align:center;text-transform:uppercase;letter-spacing:.12em;z-index:15;pointer-events:none;text-shadow:0 2px 14px #000;font-size:clamp(24px,3.4vw,38px);font-weight:900;position:fixed;bottom:18vh;left:0;right:0}.prompt .key{border:3px solid var(--fg);margin:0 6px;padding:0 14px;display:inline-block}.warning{text-align:center;color:var(--red);text-transform:uppercase;letter-spacing:.1em;z-index:15;pointer-events:none;text-shadow:0 2px 14px #000;font-size:clamp(26px,4vw,44px);font-weight:900;animation:.8s steps(2,end) infinite blink;position:fixed;top:22vh;left:0;right:0}@keyframes blink{50%{opacity:.25}}.startmsg{text-align:center;z-index:16;pointer-events:none;flex-direction:column;gap:12px;display:flex;position:fixed;top:30vh;left:0;right:0}.startmsg .l1{text-transform:uppercase;letter-spacing:.08em;text-shadow:0 2px 18px #000;font-size:clamp(30px,4.6vw,52px);font-weight:900}.startmsg .l2{color:var(--dim);text-transform:uppercase;letter-spacing:.14em;font-size:clamp(20px,2.8vw,30px);font-weight:800}.countdown{z-index:18;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:20px;display:flex;position:fixed;inset:0}.countdown .num{text-shadow:0 4px 40px #000;font-size:clamp(120px,24vw,280px);font-weight:900;line-height:1}.countdown .role{letter-spacing:.2em;text-transform:uppercase;font-size:clamp(28px,4.4vw,50px);font-weight:900}.countdown .role.slender{color:var(--red)}.crosshair{z-index:14;pointer-events:none;background:#ffffffd9;border-radius:50%;width:6px;height:6px;margin:-3px 0 0 -3px;position:fixed;top:50%;left:50%}.toasts{z-index:15;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;top:110px;left:0;right:0}.toast{text-transform:uppercase;letter-spacing:.14em;background:#000000a6;padding:8px 22px;font-size:clamp(16px,2vw,22px);font-weight:900}.toast.red{color:var(--red)}.cooldown{z-index:15;pointer-events:none;justify-content:center;display:flex;position:fixed;bottom:26px;left:0;right:0}.cooldown .inner{letter-spacing:.18em;text-transform:uppercase;border:3px solid var(--fg);text-shadow:0 2px 10px #000;background:#0006;padding:12px 34px;font-size:clamp(20px,2.6vw,28px);font-weight:900}.cooldown .inner.charging{color:#666;border-color:#444}.spectate{z-index:15;pointer-events:none;flex-direction:column;align-items:center;gap:10px;display:flex;position:fixed;bottom:40px;left:0;right:0}.spectate .who{letter-spacing:.14em;text-transform:uppercase;font-size:clamp(22px,3vw,32px);font-weight:900}.spectate .hint{color:var(--dim);letter-spacing:.2em;text-transform:uppercase;font-size:16px;font-weight:800}.endscreen{background:#000000eb}.endscreen .msg{text-transform:uppercase;letter-spacing:.1em;text-align:center;max-width:90vw;font-size:clamp(38px,6.4vw,84px);font-weight:900;line-height:1.15}.endscreen .msg.red{color:var(--red)}.endscreen .sub{color:var(--dim);letter-spacing:.3em;text-transform:uppercase;font-size:clamp(18px,2.4vw,24px);font-weight:800}.ctrl-hint{text-align:center;z-index:15;letter-spacing:.14em;text-transform:uppercase;opacity:.5;pointer-events:none;text-shadow:0 1px 6px #000;font-size:clamp(11px,1.3vw,14px);font-weight:700;position:fixed;bottom:12px;left:0;right:0}.static-canvas{z-index:17;pointer-events:none;width:100%;height:100%;image-rendering:pixelated;position:fixed;inset:0}.click-to-play{z-index:19;letter-spacing:.2em;text-transform:uppercase;pointer-events:none;background:#0303058c;justify-content:center;align-items:center;font-size:clamp(28px,4.4vw,48px);font-weight:900;display:flex;position:fixed;inset:0}.jumpscare{z-index:18;pointer-events:none;background:#000;justify-content:center;align-items:center;animation:1s ease-out forwards jumpscare;display:flex;position:fixed;inset:0}.jumpscare svg{filter:drop-shadow(0 0 40px #fff6);width:min(120vh,96vw);height:100%;animation:1s ease-out forwards jumpscare-face}@keyframes jumpscare{0%{opacity:0}6%{opacity:1}70%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes jumpscare-face{0%{transform:scale(2.4)}6%{transform:scale(1.02)}40%{transform:scale(1)translate(1%,-1%)}55%{transform:scale(1.03)translate(-1.5%,1%)}70%{transform:scale(1)translate(0)}to{transform:scale(1.15)}}