:root{color:#1b1b1b;background:#f6e7c8;font-family:Fredoka,Trebuchet MS,sans-serif;--ink: #1a1a1a;--cream: #fff6e4;--yellow: #ffd23b;--red: #ff4d4d;--blue: #3b7bff;--green: #2fce62}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}button,input,select{font:inherit;color:inherit}button{cursor:pointer}#view{position:fixed;inset:0;width:100%;height:100%;display:block}#vignette,#flash,#scope,#damage-ring,#hitmarker,#crosshair,#hud{pointer-events:none}#vignette{position:fixed;inset:0;background:radial-gradient(circle at center,transparent 42%,rgba(160,0,20,.72) 100%);opacity:0}#flash{position:fixed;inset:0;background:#ff282847;opacity:0}.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 12% 18%,rgba(255,77,77,.35),transparent 28%),radial-gradient(circle at 88% 12%,rgba(59,123,255,.32),transparent 26%),radial-gradient(circle at 70% 88%,rgba(47,206,98,.28),transparent 24%),#ffecccc7;pointer-events:auto;overflow:auto}.hidden{display:none!important}.card{width:min(520px,100%);background:var(--cream);border:4px solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--ink);padding:28px 28px 22px}h1,h2{margin:0;letter-spacing:-.04em;line-height:.95}h1{font-size:clamp(48px,8vw,76px)}h2{font-size:40px}.eyebrow{margin:0 0 8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#c2410c}.lede{margin:12px 0 18px;font-size:18px}.hint,.error{margin:10px 0 0;font-size:14px}.error{color:#b42318;min-height:1.2em;font-weight:700}.field{display:flex;flex-direction:column;gap:6px;font-weight:700;margin-bottom:12px}input[type=text],input:not([type]),select,#player-name,#room-code{border:3px solid var(--ink);border-radius:14px;padding:10px 12px;background:#fff}#room-code{text-transform:uppercase;letter-spacing:.18em;font-weight:700;width:100%}input[type=range]{width:100%;accent-color:var(--red)}.grid,.split,.settings-grid{display:grid;gap:10px}.grid{grid-template-columns:1fr auto;align-items:end;margin-bottom:8px}.grid .field:last-child{grid-column:1 / -1}.split{grid-template-columns:1fr 1fr;margin-top:10px}.settings{margin-top:14px}.settings summary{cursor:pointer;font-weight:700}.settings-grid{margin-top:10px}.chip{display:inline-grid;place-items:center;min-width:54px;height:42px;padding:0 10px;border:3px solid var(--ink);border-radius:14px;background:var(--yellow);font-weight:700;box-shadow:3px 3px 0 var(--ink)}button{border:3px solid var(--ink);border-radius:16px;background:#fff;padding:12px 14px;font-weight:700;box-shadow:4px 4px 0 var(--ink)}button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}button.primary{background:var(--red);color:#fff;font-size:22px;width:100%;margin-top:6px}#quick-join{background:var(--blue);color:#fff}#create-room{background:var(--green)}#host-p2p{background:#d45bff;color:#fff}#join-p2p{background:var(--yellow)}#hud{position:fixed;inset:0}.hud-top,.hud-bottom{position:absolute;left:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.hud-top{top:16px}.hud-bottom{bottom:16px;align-items:flex-end}.center-stack{text-align:center}#timer,#health,#ammo,#weapon-name,#scoreline,#powerup,#room-label,#ping-label{-webkit-text-stroke:0;text-shadow:3px 3px 0 #161616,-1px 0 #161616,0 1px #161616;color:#fff;font-weight:700}#timer{font-size:42px;color:var(--yellow)}#scoreline{font-size:18px}#powerup{margin-top:6px;background:var(--yellow);color:var(--ink);text-shadow:none;border:3px solid var(--ink);border-radius:999px;padding:4px 12px;display:inline-block}#ping-label{margin-top:6px;font-size:14px}#health{font-size:72px;line-height:.85;color:#ffe66b;display:block}#health.pop{animation:bounce .28s ease}#weapon-block{text-align:right}#weapon-name{font-size:28px}#ammo{font-size:36px;color:#b8f5ff}#reload-label{color:var(--yellow);font-weight:700;text-shadow:2px 2px 0 #161616}#announce{position:absolute;left:50%;top:28%;transform:translate(-50%);font-size:28px;font-weight:700;color:#fff;text-shadow:3px 3px 0 #161616}#respawn{position:absolute;left:50%;top:42%;transform:translate(-50%);font-size:40px;font-weight:700;color:#fff;text-shadow:4px 4px 0 #161616}#killfeed{list-style:none;margin:0;padding:0;min-width:180px;text-align:right}#killfeed li{color:#fff;font-weight:700;text-shadow:2px 2px 0 #161616;margin-bottom:4px}#crosshair{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%)}#crosshair i{position:absolute;background:#fff;box-shadow:0 0 0 2px #161616}#crosshair i:first-child{left:9px;top:0;width:4px;height:22px}#crosshair i:last-child{left:0;top:9px;width:22px;height:4px}#hitmarker{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%) rotate(45deg) scale(.6);border:3px solid transparent;opacity:0}#hitmarker.on{animation:hit .18s ease;border-color:#fff}#hitmarker.head{border-color:#ffd23b}#damage-ring{position:absolute;left:50%;top:50%;width:240px;height:240px;transform:translate(-50%,-50%);border-radius:50%;border:10px solid transparent;border-top-color:#ff3232f2;opacity:0}#scope{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0 18vmin,#07070b 18.3vmin)}.scope-v,.scope-h{position:absolute;background:#ffffffbf}.scope-v{left:50%;top:0;bottom:0;width:2px}.scope-h{top:50%;left:0;right:0;height:2px}#scoreboard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff6e4f0;border:4px solid #161616;border-radius:20px;padding:16px 18px;min-width:min(420px,90vw);box-shadow:8px 8px #161616}#scoreboard h2{font-size:28px;margin-bottom:8px}#scoreboard table{width:100%;border-collapse:collapse}#scoreboard th,#scoreboard td{text-align:left;padding:4px 8px}#scoreboard th:nth-child(n+2),#scoreboard td:nth-child(n+2){text-align:right}#scoreboard tr.me td{background:#ffd23b}#result-list{margin:0 0 16px;padding-left:22px;font-size:18px}label.inline{font-weight:700;display:grid;gap:4px}@keyframes bounce{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes hit{0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.5)}to{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(1.3)}}@media(max-width:720px){.card{padding:18px}#health{font-size:52px}#timer{font-size:32px}}