/* GRID RIDER — neon Tron theme. */
:root {
  --cy: #00f0ff;
  --cy2: #7df9ff;
  --or: #ff8c00;
  --bg: #02050a;
  --panel: rgba(4, 10, 20, 0.92);
  --muted: #7fb2d9;
  --txt: #eafcff;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--txt);
  font-family: 'Orbitron', monospace, sans-serif;
  overflow: hidden;
}

#gameCanvas { display: block; width: 100%; height: 100%; }

/* ── HUD ──────────────────────────────────────────────────────────── */
#hud {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 12px 18px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; z-index: 5;
}
.hud-top { display: flex; justify-content: space-between; align-items: flex-start; }
.hud-left, .hud-right { display: flex; gap: 10px; }
.tr-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(2,10,20,0.82), rgba(1,5,12,0.72));
  border: 1px solid rgba(0,240,255,0.55);
  box-shadow: 0 0 18px rgba(0,240,255,0.18), inset 0 0 14px rgba(0,240,255,0.06);
  padding: 8px 16px 9px; color: var(--cy); text-shadow: 0 0 6px rgba(0,240,255,0.8);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  min-width: 92px;
}
.tr-label { font-size: 9px; text-transform: uppercase; letter-spacing: 3px; color: #4fa8ff; }
.tr-value { font-size: 22px; font-weight: 900; letter-spacing: 1px; line-height: 1.15; }
.tr-sub { font-size: 10px; color: #ff8c00; letter-spacing: 2px; }

.progress-wrap { width: min(46vw, 540px); align-self: center; }
.progress-track {
  height: 6px; background: rgba(0,240,255,0.15); border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 8px rgba(0,240,255,0.25);
}
.progress-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg, #00f0ff, #7df9ff);
  box-shadow: 0 0 12px #00f0ff; transition: width 0.12s linear;
}

.hud-bottom { display: flex; justify-content: center; }
.item-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(2,8,16,0.8); padding: 6px 14px;
  border: 1px solid rgba(139,92,255,0.5); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.item-box { color: #25ffd0; font-weight: 700; letter-spacing: 1px; min-height: 18px; }
.item-chip {
  display: inline-block; margin-right: 6px; padding: 2px 8px;
  color: #180d00; background: #25ffd0; border-radius: 4px; font-size: 11px; font-weight: 900;
}
.stun-badge { color: #ff5566; text-shadow: 0 0 8px #ff5566; font-weight: 700; }
.controls-hint {
  align-self: center; font-size: 10px; letter-spacing: 2px; color: #4fa8ff;
  background: rgba(2,8,16,0.6); padding: 4px 12px; border-radius: 4px;
}
.hud-audio { pointer-events: auto; align-self: flex-end; }

.spectator-flag {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(4,10,20,.9); color: var(--cy);
  border: 1px solid var(--cy); border-radius: 20px;
  padding: 6px 18px; font-size: 13px; letter-spacing: .14em;
  z-index: 25; pointer-events: none; text-shadow: 0 0 8px var(--cy);
}

/* ── Overlay / cards ──────────────────────────────────────────────── */
#lobbyOverlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(3,12,24,0.88), rgba(0,2,6,0.97));
  z-index: 20;
}
.card {
  background: var(--panel); border: 1px solid rgba(0,240,255,0.4);
  border-radius: 12px; padding: 32px 38px; max-width: min(92vw, 640px); width: 92%;
  max-height: 92vh; overflow-y: auto;
  text-align: center; box-shadow: 0 0 50px rgba(0,240,255,0.18);
}
.neon-title {
  font-size: 34px; font-weight: 900; letter-spacing: 8px; color: var(--txt);
  text-shadow: 0 0 14px #00f0ff, 0 0 40px #0060ff;
  margin: 0 0 8px;
}
h2 { color: var(--cy); letter-spacing: 3px; }
.tagline { color: var(--muted); margin: 8px 0 18px; line-height: 1.6; font-size: 12px; }
.muted { color: var(--muted); }
#nameInput {
  display: block; width: 100%; padding: 13px 14px; margin: 4px 0 14px;
  font: inherit; font-size: 16px; background: #02050a; color: var(--txt);
  border: 1px solid rgba(0,240,255,0.5); border-radius: 6px;
}
button.primary {
  display: inline-block; margin: 6px 0; padding: 13px 34px;
  font: inherit; font-weight: 700; letter-spacing: 3px; font-size: 15px;
  background: rgba(0,240,255,0.06); color: var(--cy);
  border: 1px solid var(--cy); border-radius: 4px; cursor: pointer;
  text-shadow: 0 0 6px var(--cy); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
button.primary:hover { background: var(--cy); color: #001018; }
.back-link { display: block; margin-top: 16px; color: var(--muted); text-decoration: none; font-size: 12px; letter-spacing: 1px; }
.back-link:hover { color: var(--txt); }
.instructions {
  margin-top: 14px; color: #7fb2d9; font-size: 11px; line-height: 1.8;
  background: rgba(2,8,16,0.6); padding: 10px 14px;
  border: 1px solid rgba(26,111,255,0.35);
}
.instructions b { color: var(--cy); }

.player-list { margin: 14px 0; text-align: left; }
.player-row { padding: 8px 10px; border-bottom: 1px solid rgba(0,240,255,0.15); color: var(--cy); }
.squad-count { color: var(--muted); margin-bottom: 6px; }
.briefing { text-align: left; margin: 16px 0; color: var(--muted); font-size: 12px; }
.briefing summary { cursor: pointer; color: var(--cy); }
.briefing ul { padding-left: 18px; line-height: 1.8; }

.load-bar { width: 100%; height: 12px; background: #0a1420; border-radius: 8px; overflow: hidden; margin: 18px 0 8px; border: 1px solid rgba(0,240,255,0.3); }
#loadBar { height: 100%; width: 0; background: linear-gradient(90deg, var(--cy), #0060ff); transition: width .3s; }
.peers { margin-top: 10px; min-height: 18px; }

.countdown {
  font-size: 84px; font-weight: 900; color: var(--cy);
  text-shadow: 0 0 24px var(--cy), 0 0 50px #0060ff;
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

#resultsPane h1 { margin-bottom: 18px; }

/* Results look: keep the whole results pane inside the visible monitor and
   let the wide stats table scroll inside its own box instead of blowing the
   card past the screen edge. This is what the fun_stats table needs (it is
   appended directly into #resultTable, not an overflow wrapper). */
#resultTable {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 46vh;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,240,255,.6) rgba(0,240,255,.12);
}
#resultTable::-webkit-scrollbar { height: 6px; width: 6px; }
#resultTable::-webkit-scrollbar-track { background: rgba(0,240,255,.1); border-radius: 3px; }
#resultTable::-webkit-scrollbar-thumb { background: rgba(0,240,255,.6); border-radius: 3px; }
#resultTable .fs-table { width: max-content; min-width: 100%; font-size: 0.86rem; }
#resultTable .fs-table th, #resultTable .fs-table td { padding: 6px 9px; }
#resultAwards { max-width: 100%; }
#resultsPane .primary { margin-top: 8px; }
@media (max-height: 640px) {
  #resultTable { max-height: 38vh; }
  #resultsPane .card { padding: 20px 26px; }
  #resultTable .fs-table { font-size: 0.78rem; }
}

/* ── audio controls strips ────────────────────────────────────────────
 * Two of them, built by shared/site_audio.js: one in the lobby card and one
 * in the HUD. They are NOT the same node moved around — the old code moved
 * its only strip into the hidden #hud at boot, which left the lobby with no
 * audio controls at all. Base look comes from shared/site_audio.css; this
 * only paints them in Grid Rider's neon. */
#lobbyAudio .mps-audio,
#hudAudio .mps-audio {
  background: rgba(4,10,20,.9); border: 1px solid rgba(0,240,255,0.4);
  border-radius: 20px; padding: 6px 12px; font-size: 12px;
}
#lobbyAudio .mps-audio-btn,
#hudAudio .mps-audio-btn {
  background: transparent; color: var(--muted); border: none;
  font: inherit; padding: 4px 6px;
}
#lobbyAudio .mps-audio-btn.muted,
#hudAudio .mps-audio-btn.muted { color: var(--or); }
#lobbyAudio .mps-audio-slider,
#hudAudio .mps-audio-slider { width: 70px; accent-color: var(--cy, #0ff); }