:root {
  --ink: #e8e6df; --gold: #d8b25a; --red: #ff5a5f; --blue: #5a8cff; --panel: rgba(8, 10, 14, 0.86); --line: rgba(216, 178, 90, 0.35);
}
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--ink); font: 14px/1.4 "Trebuchet MS", "Segoe UI", sans-serif; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.small { font-size: 12px; opacity: 0.75; }

#menu { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(20,20,30,0.55), rgba(0,0,0,0.9)); z-index: 20; }
#menu .panel { width: min(500px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--line); padding: 22px 26px; box-sizing: border-box; }
#menu h1 { margin: 0 0 16px; font-size: 30px; letter-spacing: 6px; color: var(--gold); text-align: center; }
#menu h1 span { display: block; font-size: 13px; letter-spacing: 8px; color: var(--ink); opacity: 0.8; }
#menu label { display: block; margin: 10px 0; }
#menu input:not([type=checkbox]):not([type=range]), #menu select { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px; background: #11141a; color: var(--ink); border: 1px solid #333; font: inherit; }
#menu input[type=range] { width: 100%; }
#menu button { display: block; width: 100%; margin-top: 12px; padding: 10px; background: var(--gold); color: #111; border: 0; font: bold 15px inherit; letter-spacing: 2px; cursor: pointer; text-transform: uppercase; }
#menu button:hover { filter: brightness(1.1); }
#menu details { margin-top: 14px; border-top: 1px solid #222; padding-top: 8px; }
#menu summary { cursor: pointer; color: var(--gold); }
#status { margin-top: 10px; min-height: 1.2em; color: #f88; }
table.keys td { padding: 2px 10px 2px 0; }
.credit { margin-top: 18px; text-align: center; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background: linear-gradient(#fff,#fff) center/2px 6px no-repeat, linear-gradient(#fff,#fff) center/6px 2px no-repeat; opacity: 0.85; }
#crosshair::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.6); border-radius: 50%; }
/* original PS2 scope overlays (assets/hud, tools/export_hud.py): 512x448 HUD space shown at 4:3, centred */
.scope { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scope img { position: absolute; left: 50%; top: 0; height: 100%; width: calc(100vh * 4 / 3); transform: translateX(-50%); }
#scope img { box-shadow: 0 0 0 100vmax #000; }   /* sniper mask: black beyond the 4:3 area too */
#scope_aims .tint { position: absolute; inset: 0; background: #f00; mix-blend-mode: multiply; }
#scope_aims img, #scope_samurai img { mix-blend-mode: plus-lighter; }
#vitals { position: absolute; left: 24px; bottom: 22px; font-weight: bold; text-shadow: 0 1px 2px #000; }
#vitals .bar { width: 180px; height: 10px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.3); display: inline-block; vertical-align: middle; margin: 4px 6px 4px 0; }
#vitals .bar div { height: 100%; width: 0; background: #7fb0ff; transition: width .15s; }
#vitals .bar.hp div { background: var(--gold); }
#vitals small { opacity: 0.7; font-size: 10px; letter-spacing: 1px; }
#vitals > span + small + .bar, #vitals br { display: block; }
#weapon { position: absolute; right: 26px; bottom: 22px; text-align: right; text-shadow: 0 1px 2px #000; }
#wname { font-weight: bold; font-size: 15px; color: var(--gold); }
#wmode { font-size: 12px; opacity: 0.8; }
#ammo #clip { font-size: 34px; font-weight: bold; }
#ammo #reserve { font-size: 18px; opacity: 0.75; }
#timer { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 22px; font-weight: bold; text-shadow: 0 1px 3px #000; }
#teamscores { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: bold; text-align: center; text-shadow: 0 1px 3px #000; }
#killfeed { position: absolute; top: 12px; right: 16px; text-align: right; font-size: 13px; text-shadow: 0 1px 2px #000; }
#killfeed div { margin-bottom: 3px; }
#center { position: absolute; top: 28%; width: 100%; text-align: center; font-size: 22px; font-weight: bold; color: var(--gold); text-shadow: 0 2px 4px #000; transition: opacity .4s; opacity: 0; }
#deadmsg { display: none; position: absolute; top: 60%; width: 100%; text-align: center; font-size: 20px; text-shadow: 0 2px 4px #000; }
#radar { position: absolute; left: 16px; top: 16px; }
#chatlog { position: absolute; left: 20px; bottom: 90px; width: 44vw; font-size: 13px; text-shadow: 0 1px 2px #000; }
#chatlog div { transition: opacity 1s; } #chatlog div.old { opacity: 0.25; }
#chatlog b { color: var(--gold); }
#chatin { display: none; position: absolute; left: 20px; bottom: 60px; width: 40vw; pointer-events: auto; background: rgba(0,0,0,0.7); color: #fff; border: 1px solid var(--line); padding: 5px 8px; font: inherit; }
#scoreboard, #endscreen { display: none; position: absolute; left: 50%; top: 12%; transform: translateX(-50%); min-width: min(560px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); padding: 14px 20px; }
#scoreboard table, #endscreen table { width: 100%; border-collapse: collapse; }
#scoreboard th, #endscreen th { text-align: left; color: var(--gold); font-weight: normal; border-bottom: 1px solid #333; }
#scoreboard td, #endscreen td { padding: 3px 4px; }
#scoreboard h2, #endscreen h1 { margin: 0 0 8px; color: var(--gold); }
#netinfo { position: absolute; right: 8px; bottom: 4px; font-size: 11px; opacity: 0.5; }
#dmgflash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(180,0,0,0.9)); opacity: 0; }
#stunflash { position: absolute; inset: 0; background: #fff; opacity: 0; }
#markers .mk { position: absolute; transform: translate(-50%, -100%); font: bold 12px sans-serif; text-shadow: 0 1px 2px #000; white-space: nowrap; }
@media (max-width: 700px) { #radar { width: 90px; height: 90px; } #vitals .bar { width: 110px; } }

#menu .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
#menu .grid2 label { margin: 6px 0; }
#menu label:has(> input[type=checkbox]) { margin: 6px 0; }
#nowplaying { margin-top: 12px; text-align: center; color: var(--gold); }
@media (max-width: 420px) { #menu .grid2 { grid-template-columns: 1fr; } }

/* votes */
#votebar { display: none; position: absolute; top: 64px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--gold);
  padding: 6px 14px; font-size: 14px; text-align: center; max-width: calc(100vw - 32px); }
#votebar b { color: var(--gold); }
#votebar .mine { color: #8f8; }
.mapvote { margin-top: 10px; border-top: 1px solid #333; padding-top: 8px; }
.mapvote div { padding: 3px 6px; cursor: pointer; }
.mapvote div.mine { background: rgba(255, 200, 80, 0.15); outline: 1px solid var(--gold); }
.mapvote .count { float: right; color: var(--gold); }
#a_players td { padding: 2px 6px; }
#a_players button { padding: 2px 8px; margin: 0 2px; }
.adminbtns button { margin: 2px 0; }
#endscreen { pointer-events: auto; }

/* game list (rooms) */
.roomshead { margin-top: 14px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.8; }
.roomshead span { float: right; letter-spacing: 0; text-transform: none; }
#rooms { margin-top: 6px; display: grid; gap: 6px; }
#rooms .room { display: block; width: 100%; box-sizing: border-box; text-align: left; margin: 0; padding: 8px 10px; background: #11141a; color: var(--ink);
  border: 1px solid #333; font: 14px inherit; letter-spacing: 0; text-transform: none; cursor: pointer; }
#rooms .room b { color: var(--gold); }
#rooms .room small { display: block; opacity: 0.75; margin-top: 2px; }
#rooms .room.sel { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
#rooms .room.new { border-style: dashed; }
#rooms .room:disabled { opacity: 0.45; cursor: default; }