:root { --bg: #010308; --ink: #d8f6ff; --muted: #4f7b8a; --neon: #00f6ff; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 13px/1.4 ui-monospace, Consolas, monospace; overflow: hidden; }
canvas { display: block; width: 100vw; height: 100vh; }
[hidden] { display: none !important; }
.label { color: var(--muted); letter-spacing: 2px; font-size: 11px; }
#hud { position: fixed; inset: 0; pointer-events: none; }
.score { position: absolute; top: 20px; left: 24px; display: flex; flex-direction: column; }
.score b { font-size: 44px; font-weight: 300; color: var(--neon); text-shadow: 0 0 12px var(--neon); }
.stats { position: absolute; top: 20px; right: 24px; text-align: right; display: grid; gap: 4px; }
#ranking, #feed { position: absolute; list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
#ranking { top: 110px; left: 24px; color: var(--muted); }
#ranking li:first-child { color: var(--ink); }
#feed { bottom: 56px; right: 24px; text-align: right; }
#dead { position: absolute; top: 40%; width: 100%; text-align: center; font-size: 42px; letter-spacing: 10px; color: #ff2bd6; text-shadow: 0 0 18px #ff2bd6; }
#dead small { display: block; font-size: 14px; letter-spacing: 3px; color: var(--ink); margin-top: 8px; }
.help { position: absolute; bottom: 20px; width: 100%; text-align: center; color: var(--muted); letter-spacing: 2px; font-size: 11px; }

.panel { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; overflow-y: auto; background: radial-gradient(circle, #04131bcc, #010308f0 70%); }
.panel h1 { margin: 0 0 12px; font-weight: 300; letter-spacing: 12px; color: var(--neon); text-shadow: 0 0 20px var(--neon); }
.panel h2 { margin: 14px 0 4px; font-weight: 300; letter-spacing: 6px; color: var(--neon); font-size: 15px; }
.panel input, .panel select, .panel button { padding: 10px 14px; font: inherit; letter-spacing: 2px; color: var(--ink); background: #02131a; border: 1px solid #12404d; }
.panel button { background: var(--neon); color: #001418; border: 0; cursor: pointer; font-weight: bold; }
.panel button:disabled { opacity: 0.35; cursor: default; }
.panel input:focus, .panel select:focus, .panel button:focus-visible { outline: 1px solid var(--neon); }
.panel form { display: flex; gap: 8px; }
.list { list-style: none; margin: 0; padding: 0; min-width: 320px; max-width: 560px; display: grid; gap: 4px; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 10px; border: 1px solid #0d2f3a; }
.list li button { padding: 4px 10px; }
.allstars li { border: 0; padding: 2px 10px; color: var(--muted); }
.allstars li:nth-child(-n+3) { color: var(--ink); }
.settings { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; min-width: 320px; max-width: 640px; }
.settings label { display: grid; gap: 4px; font-size: 11px; letter-spacing: 2px; color: var(--muted); }
#lobbyBanner { color: #ff9a1f; letter-spacing: 3px; }
.hint, #status { color: var(--muted); letter-spacing: 2px; font-size: 11px; min-height: 1.4em; }
table { border-collapse: collapse; min-width: 320px; }
th, td { padding: 4px 10px; text-align: left; border-bottom: 1px solid #0d2f3a; }
th { color: var(--muted); font-weight: normal; font-size: 11px; letter-spacing: 2px; }
tr.me td { color: var(--neon); }
#dialog { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #000a; z-index: 10; }
#dialog .box { padding: 24px 28px; background: #02131a; border: 1px solid var(--neon); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
#dialog p { width: 100%; text-align: center; margin: 0 0 8px; letter-spacing: 2px; }
#dialog button { padding: 10px 18px; font: inherit; letter-spacing: 2px; border: 0; cursor: pointer; }
#dialogYes { background: var(--neon); color: #001418; }
#dialogNo { background: #12404d; color: var(--ink); }
#notice { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); padding: 10px 18px; background: #ff2bd6; color: #14000f; letter-spacing: 2px; z-index: 11; }
#spectator { position: absolute; top: 40%; width: 100%; text-align: center; font-size: 28px; letter-spacing: 10px; color: #ff9a1f; }

/* ?demo&hud=0: the bare game for landing-page hero shots */
body.nohud #hud, body.nohud .topbar, body.nohud .panel, body.nohud .hint, body.nohud #tutorial,
body.nohud #dialog, body.nohud #notice { display: none !important; }
.topbar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; z-index: 9; }
.topbar .home { color: var(--muted); letter-spacing: 2px; font-size: 11px; text-decoration: none; }
.topbar .home:hover { color: var(--neon); }
button.ghost { background: transparent; color: var(--muted); border: 1px solid #12404d; padding: 6px 10px; font: inherit; font-size: 11px; letter-spacing: 2px; cursor: pointer; }
button.ghost:hover { color: var(--ink); border-color: var(--neon); }
.langpicker { position: relative; }
.langpicker > button { display: flex; gap: 6px; align-items: center; background: #02131a; color: var(--ink); border: 1px solid #12404d; padding: 5px 8px; font: inherit; font-size: 11px; letter-spacing: 1px; cursor: pointer; }
.langpicker ul { position: absolute; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; background: #02131a; border: 1px solid #12404d; min-width: 150px; }
.langpicker li button { display: flex; gap: 8px; align-items: center; width: 100%; background: none; border: 0; color: var(--ink); padding: 6px 8px; font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.langpicker li button:hover, .langpicker li button[aria-current="true"] { background: #0d2f3a; }
.tagline { color: var(--muted); letter-spacing: 3px; margin: -8px 0 8px; }
.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #000b; z-index: 12; }
.modal .box { max-width: 480px; padding: 26px 30px; background: #02131a; border: 1px solid var(--neon); box-shadow: 0 0 30px #00f6ff33; }
.modal h2 { margin: 6px 0 10px; font-weight: 300; letter-spacing: 4px; color: var(--neon); }
.modal p { line-height: 1.6; }
.modal .actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.modal .actions button:not(.ghost) { background: var(--neon); color: #001418; border: 0; padding: 10px 18px; font: inherit; font-weight: bold; letter-spacing: 2px; cursor: pointer; }
#areaRow[hidden] { display: none; }

.audio { display: flex; gap: 6px; align-items: center; }
.audio input[type=range] { width: 70px; accent-color: var(--neon); }
.audio button[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }
.topbar .version { color: var(--muted); font-size: 10px; letter-spacing: 1px; opacity: 0.7; }

#roomPanel { position: absolute; top: 200px; right: 24px; text-align: right; display: grid; align-content: start; gap: 3px; max-height: max(120px, calc(100vh - 420px)); overflow: hidden; }
#roomMembers { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; color: var(--muted); }
#roomMembers li.me { color: var(--ink); }
#roomList li .players { display: block; color: var(--muted); font-size: 11px; letter-spacing: 1px; }