:root {
  --bg: #050810; --panel: rgba(6, 12, 24, 0.92); --amber: #ffb000; --amber-dim: #8a5f00;
  --cyan: #35f0ff; --red: #ff3b4b; --green: #5cff6a; --text: #e8e2c8; --dim: #6d7a8c;
  --font: 'Press Start 2P', 'Courier New', monospace; --font2: 'VT323', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; user-select: none; }
#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; }
#game canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.hidden { display: none !important; }
button, input, select { font-family: inherit; }

/* ---------- CRT overlay ---------- */
#crt { position: absolute; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 160px rgba(0,0,0,0.75); mix-blend-mode: multiply; }
#crt::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); }
body.no-crt #crt { display: none; }

/* ---------- screens ---------- */
#screens { position: absolute; inset: 0; z-index: 20; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: safe center; gap: 24px; padding: 24px; overflow-y: auto;
  background: var(--bg) linear-gradient(rgba(53,240,255,0.06) 1px, transparent 1px) 0 0 / 100% 40px,
              linear-gradient(90deg, rgba(53,240,255,0.06) 1px, transparent 1px) 0 0 / 40px 100%;
  animation: gridscroll 6s linear infinite; }
.screen.active { display: flex; }
.screen.transparent { background: rgba(5,8,16,0.72); animation: none; }
@keyframes gridscroll { to { background-position: 0 40px, 40px 0; } }
.logo { font-size: clamp(36px, 8vw, 84px); letter-spacing: 4px; color: var(--amber); line-height: 1;
  text-shadow: 3px 3px 0 #7a3b00, 6px 6px 0 #2a1200, 0 0 24px rgba(255,176,0,0.5); animation: flicker 4s infinite; }
.logo .alt { color: var(--cyan); text-shadow: 3px 3px 0 #0a5c66, 6px 6px 0 #04262b, 0 0 24px rgba(53,240,255,0.5); }
.logo.small { font-size: clamp(24px, 4vw, 40px); }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.82; } 95% { opacity: 1; } 97% { opacity: 0.9; } }
.tag { color: var(--dim); font-size: 11px; letter-spacing: 2px; }
.blink { color: var(--text); font-size: 14px; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.footer { position: absolute; bottom: 20px; color: var(--dim); font-size: 9px; letter-spacing: 1px; text-align: center; }

.panel { background: var(--panel); border: 3px solid var(--amber-dim); outline: 3px solid #000; box-shadow: 0 0 0 5px var(--amber-dim), 0 0 40px rgba(0,0,0,0.8); padding: 22px 26px; min-width: 340px; }
.panel.menu { display: flex; flex-direction: column; gap: 12px; width: 420px; }
.panel.wide { width: min(880px, 94vw); flex-shrink: 0; }
.title { color: var(--amber); font-size: 18px; margin-bottom: 16px; letter-spacing: 2px; text-shadow: 2px 2px 0 #000; }
.sub { color: var(--cyan); font-size: 11px; margin: 10px 0 8px; letter-spacing: 1px; }
.dim { color: var(--dim); }
.btn { display: block; width: 100%; background: transparent; color: var(--text); border: 2px solid var(--dim); padding: 12px 14px; font-size: 13px; text-align: left; cursor: pointer; position: relative; transition: none; text-transform: uppercase; }
.btn::before { content: '>'; position: absolute; left: 6px; opacity: 0; color: var(--amber); }
.btn:hover, .btn:focus-visible { background: var(--amber); color: #000; border-color: var(--amber); outline: none; padding-left: 26px; }
.btn:hover::before { opacity: 1; color: #000; }
.btn.primary { border-color: var(--amber); color: var(--amber); }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.danger:hover { background: var(--red); border-color: var(--red); color: #000; }
.btn.sm { padding: 6px 10px; font-size: 10px; width: auto; display: inline-block; margin-right: 6px; }
.btn small { font-size: 9px; color: inherit; opacity: 0.7; margin-left: 8px; text-transform: lowercase; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn:disabled:hover { background: transparent; color: var(--text); padding-left: 14px; }
.btnrow { display: flex; gap: 10px; margin-top: 16px; }
.btnrow .btn { width: auto; flex: 1; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 10px; color: var(--cyan); margin-bottom: 8px; }
.field input[type=text], .field input:not([type]), .field select { background: #000; color: var(--amber); border: 2px solid var(--dim); padding: 10px; font-size: 14px; letter-spacing: 1px; outline: none; text-transform: uppercase; }
.field input:focus, .field select:focus { border-color: var(--amber); }
.field.range input { accent-color: var(--amber); }
.field.check { flex-direction: row; align-items: center; color: var(--text); font-size: 11px; }
.field.check input { width: 18px; height: 18px; accent-color: var(--amber); }
.status { color: var(--dim); font-size: 10px; margin-top: 8px; min-height: 14px; }
.status.ok { color: var(--green); } .status.err { color: var(--red); }
table.list { width: 100%; border-collapse: collapse; font-size: 11px; }
table.list th { text-align: left; color: var(--cyan); padding: 6px 8px; border-bottom: 2px solid var(--amber-dim); font-weight: normal; }
table.list td { padding: 8px; border-bottom: 1px solid #1a2333; }
table.list tr:hover td { background: rgba(255,176,0,0.08); }
.lobby-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
#lobby-players { list-style: none; margin: 0; padding: 0; font-size: 12px; }
#lobby-players li { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid #1a2333; }
#lobby-players .swatch { width: 14px; height: 14px; border: 2px solid #000; box-shadow: 0 0 0 1px #fff3; }
#lobby-players .ready { margin-left: auto; color: var(--dim); font-size: 10px; }
#lobby-players .ready.on { color: var(--green); }
#lobby-players .host { color: var(--amber); font-size: 9px; }
#lobby-players .bot { color: var(--dim); font-size: 9px; }
.kv { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--cyan); margin-bottom: 8px; }
.kv select { background: #000; color: var(--amber); border: 2px solid var(--dim); padding: 6px; font-size: 11px; }
.kv select:disabled { color: var(--text); opacity: 0.8; }
.map-preview { height: 150px; border: 2px solid var(--dim); background: #000; margin: 10px 0; display: flex; align-items: center; justify-content: center; }
.map-preview canvas { image-rendering: pixelated; height: 100%; }
.chatbox { height: 90px; overflow-y: auto; border: 2px solid #1a2333; background: #000; padding: 8px; font-family: var(--font2); font-size: 20px; line-height: 1.1; margin-top: 12px; }
.chatline { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--font2); font-size: 20px; }
.chatline input { flex: 1; background: #000; color: var(--text); border: 2px solid #1a2333; font-family: var(--font2); font-size: 20px; padding: 4px 8px; outline: none; }
.prompt { color: var(--amber); }
.winner { color: var(--amber); font-size: 22px; margin: 12px 0 18px; text-shadow: 2px 2px 0 #000; }
.loading { font-size: 20px; color: var(--amber); }
.dots::after { content: ''; animation: dots 1s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
#update-banner { display: none; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 60; font-size: 12px; padding: 8px 14px 8px 26px; background: var(--panel); border: 2px solid var(--green); color: var(--green); text-shadow: 2px 2px 0 #000; box-shadow: 0 0 0 4px #000, 0 0 18px rgba(92,255,106,0.4); cursor: pointer; animation: banner-pulse 1.2s ease-in-out infinite; }
#update-banner.show { display: block; }
#update-banner b { color: #fff; }
@keyframes banner-pulse { 0%, 100% { box-shadow: 0 0 0 4px #000, 0 0 10px rgba(92,255,106,0.3); } 50% { box-shadow: 0 0 0 4px #000, 0 0 26px rgba(92,255,106,0.8); } }
#toast { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; color: var(--red); font-size: 12px; pointer-events: none; text-shadow: 2px 2px 0 #000; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; font-size: 12px; }
#hud .panel { padding: 10px 14px; min-width: 0; border-width: 2px; box-shadow: 0 0 0 4px var(--amber-dim); outline-width: 2px; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --gap: 6px; --xh: var(--cyan); --xh-scale: 1; transform: scale(var(--xh-scale)); }
#crosshair.nodot b { display: none; }
#crosshair i { position: absolute; background: var(--xh); box-shadow: 0 0 0 1px #000; }
#crosshair i:nth-child(1) { width: 2px; height: 7px; left: -1px; top: calc(-7px - var(--gap)); }
#crosshair i:nth-child(2) { width: 2px; height: 7px; left: -1px; top: var(--gap); }
#crosshair i:nth-child(3) { width: 7px; height: 2px; top: -1px; left: calc(-7px - var(--gap)); }
#crosshair i:nth-child(4) { width: 7px; height: 2px; top: -1px; left: var(--gap); }
#cd-ring { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; transform: rotate(-90deg); overflow: visible; }
#cd-ring circle { fill: none; stroke: var(--xh); stroke-width: 2.5; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; opacity: 0.85; filter: drop-shadow(1px 1px 0 #000); }
#crosshair b { position: absolute; width: 2px; height: 2px; left: -1px; top: -1px; background: var(--xh); }
#scope { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0, transparent 34vmin, rgba(0,0,0,0.93) 36vmin); }
#scope::before { content: ''; position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%); border: 3px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000, 0 0 24px rgba(53,240,255,0.35); }
#scope i { position: absolute; background: var(--cyan); opacity: 0.75; box-shadow: 0 0 0 1px #000; }
#scope i:nth-child(1) { left: 50%; top: calc(50% - 35vmin); width: 2px; height: 70vmin; margin-left: -1px; }
#scope i:nth-child(2) { top: 50%; left: calc(50% - 35vmin); height: 2px; width: 70vmin; margin-top: -1px; }
#scope span { position: absolute; left: 50%; top: calc(50% + 37vmin); transform: translateX(-50%); color: var(--cyan); font-size: 12px; letter-spacing: 3px; text-shadow: 2px 2px 0 #000; }
#shield-ind { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); font-size: 10px; letter-spacing: 2px; color: var(--cyan); text-shadow: 2px 2px 0 #000, 0 0 12px rgba(53,240,255,0.7); animation: shieldblink 0.8s steps(2) infinite; }
@keyframes shieldblink { 50% { opacity: 0.35; } }
#hitmarker { position: absolute; left: 50%; top: 50%; opacity: 0; }
#hitmarker i { position: absolute; width: 2px; height: 9px; background: #fff; box-shadow: 0 0 0 1px #000; }
#hitmarker i:nth-child(1) { transform: translate(-9px,-14px) rotate(45deg); }
#hitmarker i:nth-child(2) { transform: translate(7px,-14px) rotate(-45deg); }
#hitmarker i:nth-child(3) { transform: translate(-9px,5px) rotate(-45deg); }
#hitmarker i:nth-child(4) { transform: translate(7px,5px) rotate(45deg); }
#hitmarker.show { animation: hm 0.25s ease-out; }
#hitmarker.kill i { background: var(--red); }
@keyframes hm { 0% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1); } }
#damage-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(255,30,30,0.7)); opacity: 0; transition: opacity 0.4s; }
#pickup-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(53,240,255,0.35)); opacity: 0; transition: opacity 0.5s; }
#dmg-dir { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px; opacity: 0; border-radius: 50%; }
#dmg-dir.show { opacity: 1; transition: opacity 0.05s; }
#match-info { position: absolute; top: 18px; left: 18px; }
#match-info .row { display: flex; gap: 8px; align-items: baseline; margin: 3px 0; }
#match-info .lbl { color: var(--cyan); font-size: 9px; width: 52px; }
#match-info span:not(.lbl) { color: var(--amber); }
#killfeed { position: absolute; top: 18px; right: 18px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 10px; }
#killfeed .kf { background: rgba(0,0,0,0.7); padding: 6px 10px; border-left: 3px solid var(--amber); animation: kfin 0.2s ease-out; }
#killfeed .kf.me { border-left-color: var(--red); }
#killfeed .kf.mine { border-left-color: var(--green); }
#killfeed .kf .w { color: var(--dim); margin: 0 6px; }
@keyframes kfin { from { transform: translateX(40px); opacity: 0; } }
#console { position: absolute; left: 18px; bottom: 150px; font-family: var(--font2); font-size: 22px; line-height: 1.05; max-width: 44vw; text-shadow: 2px 2px 0 #000; }
#console .line { opacity: 1; transition: opacity 1s; }
#console .line.fade { opacity: 0; }
#console .from { color: var(--amber); }
#chat-wrap { position: absolute; left: 18px; bottom: 120px; display: flex; gap: 8px; font-family: var(--font2); font-size: 24px; pointer-events: auto; }
#chat-wrap input { width: 420px; background: rgba(0,0,0,0.8); color: #fff; border: 2px solid var(--amber); font-family: var(--font2); font-size: 24px; padding: 2px 8px; outline: none; }
#announce { position: absolute; top: 22%; left: 0; right: 0; text-align: center; font-size: 26px; color: var(--amber); text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255,176,0,0.6); opacity: 0; }
#announce.show { animation: ann 1.8s ease-out; }
@keyframes ann { 0% { opacity: 0; transform: scale(2); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
#pickup-prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); background: rgba(0,0,0,0.8); border: 2px solid var(--cyan); padding: 8px 14px; font-size: 11px; color: var(--cyan); }
#pickup-prompt kbd { background: var(--cyan); color: #000; padding: 2px 6px; margin-right: 6px; }
#vitals { position: absolute; left: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.vital { display: flex; align-items: center; gap: 10px; }
.vital .lbl { color: var(--cyan); font-size: 9px; width: 22px; }
.vital .num { color: var(--amber); font-size: 26px; width: 84px; text-align: right; text-shadow: 2px 2px 0 #000; }
.vital .num.low { color: var(--red); animation: blink 0.6s steps(2) infinite; }
.segbar { display: flex; gap: 2px; width: 200px; height: 14px; }
.segbar i { flex: 1; background: #1a2333; border: 1px solid #000; }
.segbar i.on { background: var(--green); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3); }
.segbar i.over { background: var(--cyan); }
.segbar.armor i.on { background: var(--amber); }
#weapon-panel { position: absolute; right: 18px; bottom: 18px; text-align: right; min-width: 260px; }
#ammo-num { color: var(--amber); font-size: 40px; text-shadow: 3px 3px 0 #000; line-height: 1; }
#ammo-num.low { color: var(--red); }
#weapon-name { color: var(--cyan); font-size: 10px; margin: 6px 0 10px; letter-spacing: 1px; }
#slots { display: flex; flex-direction: column; gap: 4px; font-size: 9px; }
.slot { display: flex; gap: 10px; align-items: center; padding: 5px 8px; background: rgba(0,0,0,0.5); border: 1px solid #1a2333; color: var(--dim); }
.slot .key { background: #1a2333; color: var(--text); padding: 2px 5px; }
.slot .wn { flex: 1; text-align: left; }
.slot.active { border-color: var(--amber); color: var(--text); }
.slot.active .key { background: var(--amber); color: #000; }
.slot.empty { opacity: 0.5; }
#death-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(60,0,0,0.35); }
#death-screen .big { font-size: 30px; color: var(--red); text-shadow: 3px 3px 0 #000; }
#death-by { font-size: 14px; color: var(--text); }
#death-timer { font-size: 11px; color: var(--dim); }
#scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 560px; }
#scoreboard table { width: 100%; border-collapse: collapse; font-size: 11px; }
#scoreboard th { text-align: left; color: var(--cyan); padding: 6px 8px; border-bottom: 2px solid var(--amber-dim); font-weight: normal; }
#scoreboard td { padding: 6px 8px; border-bottom: 1px solid #1a2333; }
#scoreboard tr.me td { color: var(--amber); }
#scoreboard tr.dead td { opacity: 0.6; }
.sb-title { color: var(--amber); font-size: 12px; margin-bottom: 10px; }
.sb-hint { color: var(--dim); font-size: 9px; margin-top: 10px; }
.swatch { display: inline-block; width: 12px; height: 12px; border: 2px solid #000; vertical-align: middle; }
#pause-menu { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: auto; display: flex; flex-direction: column; gap: 10px; width: 320px; }
#pause-menu .title { margin-bottom: 6px; }
kbd { font-family: inherit; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: var(--amber-dim); }

/* accounts (2026-09-14): optional claimed callsign + stats */
.field-head { display: flex; justify-content: space-between; align-items: baseline; }
.link { background: none; border: 0; padding: 0; margin-left: 14px; color: var(--dim); font: inherit; font-size: 9px; letter-spacing: 1px; cursor: pointer; text-transform: uppercase; }
.link:hover, .link:focus-visible { color: var(--amber); outline: none; }
.field input:disabled { color: var(--green); border-color: var(--dim); opacity: 1; }
.field input[type=password] { background: #000; color: var(--amber); border: 2px solid var(--dim); padding: 10px; font-size: 14px; letter-spacing: 3px; outline: none; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 18px; margin-bottom: 12px; }
.stats-grid .kv b { color: var(--amber); font-size: 13px; font-weight: normal; }
table.list tr.me td { color: var(--amber); }