/*
 * Copyright (c) 2026 漢威榜顧問有限公司 (Han Wei Consulting Co., Ltd.)
 * Unified Business Number: 24754963
 * Project: OC Grand Prix (ocgrandprix.com)
 * All rights reserved.
 *
 * Unauthorized copying, distribution, modification, or commercial use of this
 * file, in whole or in part, is strictly prohibited without prior written
 * permission from 漢威榜顧問有限公司.
 */

/* ═══════════════════════════════════════════════════════════
   OC GRAND PRIX — Stylesheet
   Aesthetic: Industrial telemetry / racing dash / underground
   ═══════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────
    1. Variables & reset .......................... L6
    2. Atmosphere (scanlines, noise) .............. L40
    3. Page layout (scrollable pages) ............. L62
    4. Screens (lobby.html app) ................... L71
    5. Site header & logo ......................... L89
    6. Shared nav ................................. L172
    7. Connection status dot ...................... L201
    8. Section labels ............................. L221
    9. Stat tiles ................................. L255
   10. Race cards ................................. L285
   11. Benchmark record cards ..................... L293
   12. Data tables (leaderboard, account) ......... L304
   13. Game header (race screens) ................. L338
   14. Lobby / Create & Join panels ............... L405
   15. Waiting Room ............................... L520
   16. Countdown .................................. L558
   17. Race Screen (layout, HP bar, telemetry) .... L597
   18. Round Results .............................. L790
   19. Game Over .................................. L893
   20. Utilities & scrollbar ...................... L946
   21. Spectator link row ......................... L954
   22. Agent ready badges ......................... L997
   23. Game over — superlatives ................... L1031
   24. Auth modal ................................. L1069
   25. Agent token hint panel ..................... L1078
   26. Select element ............................. L1087
   27. Award card share button .................... L1106
   28. Empty / loading states ..................... L1124
   29. Workload mode toggle ....................... L1134
   30. Workload queue builder ..................... L1160
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg:          #080a0c;
  --bg2:         #0d1117;
  --bg3:         #131920;
  --border:      #1e2d3d;
  --border-hot:  #c8400a;

  --amber:       #e8910a;
  --amber-dim:   #7a4c05;
  --red:         #e83a0a;
  --red-dim:     #5c1805;
  --green:       #0ae86a;
  --green-dim:   #065c2a;
  --blue:        #0ab4e8;
  --white:       #d4dde8;
  --muted:       #4a5a6a;

  --font-mono:   'Share Tech Mono', monospace;
  --font-display:'Bebas Neue', sans-serif;
  --font-cond:   'Barlow Condensed', sans-serif;
  --font-body:   'Barlow Condensed', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  overflow-x: hidden;
}

/* ── Atmosphere ─────────────────────────────────────────── */

#scanlines {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.07) 2px,
    rgba(0,0,0,0.07) 4px
  );
}

#noise {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 9998;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
}

/* ── Page layout (scrollable pages: index, leaderboard, races) ── */

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 32px;
  min-height: 100vh;
}

/* ── Screens (lobby.html full-screen app) ───────────────── */

#app { width: 100vw; height: 100vh; position: relative; overflow: hidden; }

.screen {
  display: none;
  position: absolute; inset: 0;
  flex-direction: column;
  animation: screenIn 0.2s ease;
  overflow: hidden;
}
.screen.active { display: flex; }

@keyframes screenIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Shared site header (used on all pages) ─────────────── */

.site-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Styled header bar — shared by lobby (#app) and scrollable pages (body > .site-header) */
body > .site-header,
#app .site-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}

/* All page headers: 3-column grid — logo left · nav centered · status/auth right */
body > .site-header,
#app .site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* Scrollable pages: header sits directly in <body>, spans full width naturally */
body > .site-header {
  width: 100%;
  margin-bottom: 0;
}

/* Lobby: no bottom margin, no scroll */
#app .site-header {
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Nav always centered in the middle column */
body > .site-header .site-nav,
#app .site-header .site-nav {
  margin-left: 0;
  justify-content: center;
}

/* Right-side items (WS status, auth button) align to the right */
#app .site-header .header-status {
  justify-self: end;
}

/* Logo variants */
.logo {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--amber);
  letter-spacing: 4px;
  line-height: 1;
}
.logo span { color: var(--white); }

/* Lobby uses larger logo with sub-label */
.logo-oc {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--amber);
  line-height: 1;
  letter-spacing: 2px;
}
.logo-gp {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--white);
  line-height: 1;
  letter-spacing: 2px;
}
.logo-sub {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 4px;
  margin-top: -4px;
}

/* ── Shared nav (box-style, used on all pages) ──────────── */

.site-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
  flex-wrap: wrap;
}
.site-nav a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--border);
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.site-nav a:hover {
  color: var(--amber);
  border-color: var(--amber);
}
.site-nav a.active {
  color: var(--amber);
  border-color: var(--amber);
}

/* ── Connection status (lobby) ──────────────────────────── */

.header-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2px;
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
  transition: background 0.3s;
}
.status-dot.connected { background: var(--green); box-shadow: 0 0 8px var(--green); }
.status-dot.error     { background: var(--red);   box-shadow: 0 0 8px var(--red); }

/* ── Section labels (shared across pages) ───────────────── */

.section {
  margin-bottom: 40px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--amber);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.section-header {
  margin-bottom: 24px;
}
.section-header h1 {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--amber);
  letter-spacing: 3px;
  line-height: 1;
}
.section-header p {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 2px;
  margin-top: 6px;
}

/* ── Stat tiles (shared across pages: leaderboard, account) ── */

.pstat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.pstat-tile {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 12px 14px;
}
.pstat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 3px;
  margin-bottom: 4px;
}
.pstat-value {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--amber);
  line-height: 1;
}
.pstat-value.blue  { color: var(--blue); }
.pstat-value.green { color: var(--green); }
.pstat-value.muted { color: var(--muted); font-family: var(--font-cond); font-size: 16px; }

/* ── Race cards (shared: leaderboard, account, overview) ──── */

.race-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.race-card { background: var(--bg2); border: 1px solid var(--border); padding: 12px 14px; }
.race-card .race-id { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 3px; margin-bottom: 4px; }
.race-card .race-winner { font-family: var(--font-display); font-size: 18px; color: var(--amber); }
.race-card .race-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 4px; }

/* ── Benchmark record cards (shared: leaderboard, account) ─── */

.records-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.record-card {
  background: var(--bg2); border: 1px solid var(--border); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.record-wl { font-family: var(--font-mono); font-size: 9px; color: var(--blue); letter-spacing: 3px; }
.record-score { font-family: var(--font-display); font-size: 28px; color: var(--amber); line-height: 1; }
.record-holder { font-family: var(--font-cond); font-size: 14px; color: var(--muted); }

/* ── Data tables (shared: leaderboard, account) ──────────────
   Generic ranked/numeric table styling. .rank-cell is for an
   explicit position column; .name-cell for a pilot/entity name;
   .num-cell for any right-aligned numeric stat. */

.lb-table { width: 100%; border-collapse: collapse; }
.lb-table th {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 3px;
  color: var(--muted); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.lb-table th.right, .lb-table td.right { text-align: right; }
.lb-table tbody tr { border-bottom: 1px solid var(--bg3); transition: background .15s; }
.lb-table tbody tr:hover { background: var(--bg2); }
.lb-table td { padding: 10px 12px; font-size: 14px; }

.rank-cell { font-family: var(--font-display); font-size: 22px; color: var(--muted); width: 40px; }
.rank-cell.r1 { color: var(--amber); }
.rank-cell.r2 { color: var(--white); }
.rank-cell.r3 { color: #cd7f32; }

.name-cell { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; }
.name-cell a { color: inherit; text-decoration: none; }
.name-cell a:hover { color: var(--amber); }

.num-cell { font-family: var(--font-mono); font-size: 12px; }
.num-cell.highlight { color: var(--amber); }
.num-cell.green { color: var(--green); }
.num-cell.blue  { color: var(--blue); }

.empty {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  letter-spacing: 3px; padding: 24px 0; text-align: center;
}

/* ── Game header (lobby race screens) ───────────────────── */

.game-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
}
.game-header-left   { text-align: left; display: flex; justify-content: flex-start; align-items: center; }
.game-header-center { text-align: center; }
.game-header-right  { text-align: right; display: flex; justify-content: flex-end; align-items: center; }

.logo-small {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--amber);
}

.round-indicator {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-mono);
}
.round-label { font-size: 10px; color: var(--muted); letter-spacing: 3px; }
.round-value { font-size: 28px; color: var(--amber); font-family: var(--font-display); }
.round-sep   { font-size: 12px; color: var(--muted); }
.round-total { font-size: 14px; color: var(--white); }

.room-code-display { display: flex; align-items: baseline; gap: 8px; }
.room-code-label   { font-size: 10px; color: var(--muted); letter-spacing: 3px; font-family: var(--font-mono); }
.room-code-value   {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--amber);
  letter-spacing: 6px;
}

.workload-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--blue);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.race-timer {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--white);
  letter-spacing: 2px;
}
.race-timer.danger { color: var(--red); animation: pulse 0.5s infinite; }

.stat-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 4px 10px;
}

/* ── Lobby ──────────────────────────────────────────────── */

.lobby-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 40px 48px;
  flex: 1;
  overflow-y: auto;
}

.lobby-left, .lobby-right { flex: 1; max-width: 380px; }

.lobby-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 40px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 3px;
  padding-top: 60px;
}
.divider-line { width: 1px; height: 60px; background: var(--border); }

.panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.panel-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--amber);
  letter-spacing: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 3px;
}
.optional { color: var(--muted); }

.field-row { display: flex; gap: 12px; }
.field-group.half { flex: 1; }

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"] {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus { border-color: var(--amber); }
input::placeholder { color: var(--muted); }

.code-input {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  letter-spacing: 8px;
  text-transform: uppercase;
  text-align: center;
  padding: 12px !important;
}

.btn-primary, .btn-secondary {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}
.btn-primary {
  background: var(--amber);
  color: var(--bg);
}
.btn-primary:hover { background: #f5a020; box-shadow: 0 0 20px rgba(232,145,10,0.4); }

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--white); }

.btn-large { font-size: 24px; padding: 16px 32px; }

.join-buttons { display: flex; flex-direction: column; gap: 10px; }

/* ── Waiting Room ───────────────────────────────────────── */

.waiting-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 40px;
}

.waiting-status {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 4px;
}
.waiting-label { color: inherit; }
.waiting-blink {
  color: var(--amber);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.player-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 800px;
}

.roster-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  animation: cardIn 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
@keyframes cardIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.roster-card.host { border-color: var(--amber); color: var(--amber); }

.host-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.host-note {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--amber);
  letter-spacing: 4px;
}

/* ── Countdown ──────────────────────────────────────────── */

.countdown-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.countdown-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 5px;
}
.countdown-number {
  font-family: var(--font-display);
  font-size: 200px;
  color: var(--amber);
  line-height: 1;
  animation: countPulse 1s ease;
  text-shadow: 0 0 60px rgba(232,145,10,0.5);
}
@keyframes countPulse {
  from { transform: scale(1.3); opacity: 0.5; }
  to   { transform: scale(1);   opacity: 1; }
}
.countdown-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 4px;
}

/* ── Race Screen ────────────────────────────────────────── */

.race-layout {
  display: grid;
  grid-template-columns: 280px 1fr 260px;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

.race-left, .race-center, .race-right {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.race-right { border-right: none; }

.race-left   .panel-label,
.race-center .panel-label,
.race-right  .panel-label {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* HP Leaderboard */
.hp-leaderboard {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.hp-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
.hp-entry:hover { background: var(--bg3); }
.hp-entry.eliminated { opacity: 0.35; }

.hp-entry-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hp-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.hp-value {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--amber);
}
.hp-value.low  { color: var(--red); }
.hp-value.dead { color: var(--muted); }

.hp-bar-track {
  height: 3px;
  background: var(--bg3);
  position: relative;
}
.hp-bar-fill {
  height: 100%;
  background: var(--amber);
  transition: width 0.6s ease;
}
.hp-bar-fill.low  { background: var(--red); }
.hp-bar-fill.dead { background: var(--muted); }

/* Telemetry Feed */
.telemetry-feed {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 11px;
}

.telem-entry {
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  animation: feedIn 0.15s ease;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
@keyframes feedIn {
  from { opacity: 0; background: rgba(232,145,10,0.1); }
  to   { opacity: 1; background: transparent; }
}

/* Hardware info telemetry (cpu_info plugin) */
.telem-hw {
  background: var(--bg2);
  border-left: 2px solid var(--blue);
  grid-template-columns: auto 1fr;
}
.telem-hw .telem-hw-info {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--blue);
  letter-spacing: 1px;
}

.telem-player  { color: var(--amber); white-space: nowrap; font-size: 10px; }
.telem-sector  { color: var(--muted); }
.telem-score   { color: var(--green); text-align: right; white-space: nowrap; }
.telem-score.gflops { color: var(--blue); }

.agent-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 2px;
  flex-shrink: 0;
}
.agent-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.agent-dot.running { background: var(--green); animation: pulse 1s infinite; box-shadow: 0 0 6px var(--green); }
.agent-dot.done    { background: var(--amber); }

@keyframes pulse { 50% { opacity: 0.4; } }

/* Stream Grid */
.stream-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stream-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  position: relative;
}
.stream-card iframe,
.stream-card video {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  border: none;
}
.stream-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 2px;
  padding: 4px 8px;
  border-top: 1px solid var(--border);
}
.stream-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* ── Round Results ──────────────────────────────────────── */

.results-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  gap: 24px;
  overflow-y: auto;
}

.results-table {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.result-row {
  display: grid;
  grid-template-columns: 40px 1fr 140px 100px 80px;
  gap: 0;
  align-items: center;
  padding: 10px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  animation: resultIn 0.3s ease both;
}
.result-row:nth-child(1) { animation-delay: 0.05s; }
.result-row:nth-child(2) { animation-delay: 0.10s; }
.result-row:nth-child(3) { animation-delay: 0.15s; }
.result-row:nth-child(4) { animation-delay: 0.20s; }
.result-row:nth-child(n+5) { animation-delay: 0.25s; }
.result-row.first-place { border-color: var(--amber); background: rgba(232,145,10,0.05); }
.result-row.eliminated  { border-color: var(--red); background: rgba(232,58,10,0.05); }

@keyframes resultIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.result-rank {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--muted);
}
.result-row.first-place .result-rank { color: var(--amber); }

.result-name {
  font-family: var(--font-mono);
  font-size: 13px;
}

.result-score {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--blue);
  text-align: right;
}

.result-damage {
  font-family: var(--font-display);
  font-size: 18px;
  text-align: right;
}
.result-damage.none   { color: var(--green); }
.result-damage.hurt   { color: var(--amber); }
.result-damage.heavy  { color: var(--red); }

.result-hp {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--white);
  text-align: right;
}
.result-hp.dead { color: var(--muted); }

.eliminated-banner {
  background: var(--bg2);
  border: 1px solid var(--red);
  padding: 16px 32px;
  text-align: center;
  max-width: 700px;
  width: 100%;
  animation: resultIn 0.3s ease 0.4s both;
}
.elim-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--red);
  letter-spacing: 4px;
  margin-bottom: 8px;
}
.elim-names {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--red);
  letter-spacing: 2px;
}

/* ── Game Over ──────────────────────────────────────────── */

.gameover-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  overflow-y: auto;
}
.gameover-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 6px;
}
.winner-name {
  font-family: var(--font-display);
  font-size: 80px;
  color: var(--amber);
  letter-spacing: 4px;
  text-shadow: 0 0 40px rgba(232,145,10,0.5);
  line-height: 1;
}
.winner-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 4px;
}
.final-standings {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0;
  width: 100%;
  max-width: 400px;
}
.final-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
}
.final-row .f-rank { color: var(--muted); font-family: var(--font-display); font-size: 18px; }
.final-row .f-name { color: var(--white); }
.final-row .f-hp   { color: var(--amber); }

/* ── Utilities ──────────────────────────────────────────── */
.hidden { display: none !important; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Spectator link row (waiting room) ───────────────────── */
.spectator-link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 10px 16px;
  max-width: 600px;
  width: 100%;
}
.spec-link-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--amber);
  letter-spacing: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.spec-link-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.btn-copy {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2px;
  padding: 6px 14px;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s;
}
.btn-copy:hover { border-color: var(--amber); color: var(--amber); }
.btn-copy.copied { border-color: var(--green); color: var(--green); }

/* ── Agent ready badges (waiting room) ───────────────────── */
.roster-name { flex: 1; }

.roster-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 2px;
  padding: 3px 7px;
  border: 1px solid;
  flex-shrink: 0;
}
.badge-ready {
  color: var(--green);
  border-color: var(--green);
  background: rgba(10,232,106,0.07);
}
.badge-seated {
  color: var(--amber);
  border-color: var(--amber-dim);
}
.roster-card.agent-ready {
  border-color: var(--green-dim);
}
.roster-card.host.agent-ready {
  border-color: var(--amber);
}

.ready-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 3px;
}

/* ── Game over — superlatives ────────────────────────────── */
.go-section-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--amber);
  letter-spacing: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 12px;
  text-align: left;
}

.superlatives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.award-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 14px;
  text-align: left;
  animation: awardIn .4s ease both;
}
@keyframes awardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.award-emoji  { font-size: 24px; line-height: 1; margin-bottom: 6px; }
.award-label  {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--amber); letter-spacing: 3px; margin-bottom: 2px;
}
.award-player { font-family: var(--font-display); font-size: 18px; letter-spacing: 1px; }
.award-value  { font-family: var(--font-mono); font-size: 10px; color: var(--blue); margin-top: 3px; }
.award-flavour { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.4; }

/* ── Auth modal focus rings ──────────────────────────────── */
#auth-modal input:focus {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 1px var(--amber-dim);
}
#auth-modal button:hover {
  opacity: 0.85;
}

/* ── Agent token hint panel (lobby) ─────────────────────── */
.agent-token-hint {
  display: none;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 16px;
  margin-top: 10px;
}

/* ── Select (room visibility) ────────────────────────────── */
select {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a5a6a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
select:focus { border-color: var(--amber); }

/* ── Award card share button ─────────────────────────────── */
.award-share-btn {
  margin-top: 8px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 2px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.award-share-btn:hover {
  color: var(--blue);
  border-color: var(--blue);
}

/* ── Empty / loading states ──────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 32px 24px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
}

/* ── Light theme overrides ───────────────────────────────── */
[data-theme="light"] {
  --bg:          #f0f2f5;
  --bg2:         #ffffff;
  --bg3:         #e8ecf0;
  --border:      #c8d0da;
  --border-hot:  #c8400a;

  --amber:       #b86a00;
  --amber-dim:   #f5d9a8;
  --red:         #c0280a;
  --red-dim:     #fad4cc;
  --green:       #0a7a3a;
  --green-dim:   #c0f0d4;
  --blue:        #0878a8;
  --white:       #1a2230;
  --muted:       #6a7a8a;
}

/* Hide CRT effects in light mode — they look wrong on white */
[data-theme="light"] #scanlines,
[data-theme="light"] #noise { display: none; }

/* ── Workload mode toggle (CREATE ROOM) ──────────────────── */
.workload-mode-toggle {
  display: flex;
  gap: 16px;
}

.wl-radio-label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--muted);
  transition: color 0.15s;
}
.wl-radio-label:hover { color: var(--white); }
.wl-radio-label input[type="radio"] {
  accent-color: var(--amber);
  width: 13px;
  height: 13px;
  cursor: pointer;
}
.wl-radio-label:has(input:checked) { color: var(--amber); }

/* ── Workload queue builder ───────────────────────────────── */
.workload-queue-builder {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workload-queue-builder.hidden { display: none; }

.wq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wq-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

.btn-wq-add {
  background: none;
  border: 1px solid var(--border);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.btn-wq-add:hover {
  border-color: var(--amber);
  background: rgba(232,145,10,0.08);
}

.wq-slots {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 200px;
  overflow-y: auto;
}

.wq-slot {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wq-round-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
  min-width: 22px;
  text-align: right;
}

.wq-workload-select,
.wq-variant-select {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 5px 8px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%234a5a6a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}
.wq-workload-select { flex: 1.6; }
.wq-variant-select  { flex: 1; }
.wq-workload-select:focus,
.wq-variant-select:focus { border-color: var(--amber); }

.btn-wq-remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
}
.btn-wq-remove:hover { color: var(--red); }

.wq-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
  opacity: 0.7;
}

/* ── Hardware grid (shared: result, solo-spectator) ──────── */

.hardware-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.hw-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 16px;
}
.hw-card-name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--amber);
  margin-bottom: 12px;
}
.hw-plugin {
  margin-bottom: 10px;
}
.hw-plugin-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--muted);
  margin-bottom: 4px;
}
.hw-kv {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 0;
  border-bottom: 1px solid var(--bg3);
}
.hw-kv-key { color: var(--muted); }
.hw-kv-val { color: var(--white); text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — hamburger nav toggle
   ══════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  justify-self: end;
  transition: color 0.2s, border-color 0.2s;
  /* Also works when injected into spectator's flex #header */
  flex-shrink: 0;
  margin-left: auto;
}
.nav-hamburger:hover { color: var(--amber); border-color: var(--amber); }

/* Mobile nav drawer */
.site-nav.mobile-open {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  background: var(--bg2);
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 24px;
}
.site-nav.mobile-open a {
  font-size: 14px;
  padding: 12px 24px;
  width: 100%;
  max-width: 280px;
  text-align: center;
}
/* Close button inside open mobile nav */
.nav-close-btn {
  display: none;
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 20px;
  padding: 6px 12px;
  cursor: pointer;
}
.site-nav.mobile-open .nav-close-btn { display: block; }

/* ── Alpha / early-access banner ─────────────────────── */
#alpha-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 24px;
  background: rgba(232,145,10,0.10);
  border-bottom: 1px solid var(--amber-dim, #7a4c05);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--amber, #e8910a);
  line-height: 1.5;
}
#alpha-banner a {
  color: var(--amber, #e8910a);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#alpha-banner a:hover { color: var(--white, #d4dde8); }
.alpha-banner-close {
  background: none;
  border: 1px solid var(--amber-dim, #7a4c05);
  color: var(--muted, #4a5a6a);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.alpha-banner-close:hover {
  color: var(--amber, #e8910a);
  border-color: var(--amber, #e8910a);
}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — @media breakpoints
   Breakpoints:
     768px  — tablet / large phone landscape
     480px  — phone portrait
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Page padding ──────────────────────────────────────── */
  .page {
    padding: 16px 12px 24px;
  }

  /* ── Site header: collapse to logo + hamburger ─────────── */
  body > .site-header,
  #app .site-header {
    grid-template-columns: 1fr auto;
    padding: 12px 16px;
  }

  /* Hide the nav by default on mobile; show hamburger instead */
  body > .site-header .site-nav,
  #app .site-header .site-nav {
    display: none;
  }

  /* Hide LOBBY link in mobile nav — lobby is desktop-only */
  .site-nav.mobile-open a[href="/lobby.html"] {
    display: none;
  }

  .nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Logo smaller on mobile */
  .logo {
    font-size: 32px;
    letter-spacing: 2px;
  }

  /* ── Alpha banner ──────────────────────────────────────── */
  #alpha-banner {
    padding: 8px 12px;
    font-size: 9px;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Overview grid: single column ─────────────────────── */
  .overview-grid {
    grid-template-columns: 1fr;
  }

  /* ── Leaderboard table: horizontal scroll wrapper ──────── */
  .lb-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Hide less important columns on mobile leaderboard */
  .lb-table th:nth-child(5),
  .lb-table td:nth-child(5),
  .lb-table th:nth-child(6),
  .lb-table td:nth-child(6),
  .lb-table th:nth-child(7),
  .lb-table td:nth-child(7) {
    display: none;
  }

  /* ── Stat tiles: 2 columns minimum ────────────────────── */
  .pstat-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  /* ── Records grid: single column ──────────────────────── */
  .records-grid {
    grid-template-columns: 1fr;
  }

  /* ── Race grid: single column ──────────────────────────── */
  .race-grid {
    grid-template-columns: 1fr;
  }

  /* ── Superlatives grid: single column ──────────────────── */
  .superlatives-grid {
    grid-template-columns: 1fr;
  }

  /* ── Section label: allow wrapping ────────────────────── */
  .section-label {
    white-space: normal;
    line-height: 1.6;
  }

  /* ── Stats bar ─────────────────────────────────────────── */
  .stats-bar {
    gap: 8px;
    padding: 12px;
    flex-wrap: wrap;
  }
  .stats-bar .stat {
    min-width: 60px;
  }
  .stats-bar .stat-value {
    font-size: 22px;
  }

  /* ── How-to-play hero ──────────────────────────────────── */
  .htp-hero {
    padding: 20px 16px;
  }
  .htp-hero h1 {
    font-size: 36px !important;
  }
  .htp-hero p {
    font-size: 15px !important;
  }

  /* ── How-to-play grid: single column ───────────────────── */
  .htp-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── How-to-play step: tighter ─────────────────────────── */
  .htp-step {
    padding: 14px 16px;
    gap: 12px;
  }
  .htp-step-num {
    font-size: 36px;
    width: 36px;
  }

  /* ── How-to-play CTA row: stack ────────────────────────── */
  .htp-cta-row {
    flex-direction: column;
  }
  .htp-cta-row a {
    width: 100%;
  }

  /* ── Account identity block ────────────────────────────── */
  .acct-identity {
    flex-direction: column;
    align-items: flex-start;
  }
  .acct-name {
    font-size: 28px !important;
  }

  /* ── Solo benchmark grid ───────────────────────────────── */
  .solo-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Search row ────────────────────────────────────────── */
  .search-row {
    flex-direction: column;
  }
  .search-row button {
    width: 100%;
  }

  /* ── Spectator link row: stack ─────────────────────────── */
  .spectator-link-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .spec-link-url {
    width: 100%;
    flex: none;
  }

}

@media (max-width: 480px) {

  /* ── Logo even smaller ─────────────────────────────────── */
  .logo {
    font-size: 26px;
    letter-spacing: 1px;
  }

  /* ── Page padding tighter ──────────────────────────────── */
  .page {
    padding: 12px 10px 20px;
  }

  /* ── Stat tiles: 2 per row ─────────────────────────────── */
  .pstat-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Leaderboard table: hide rank column too ───────────── */
  .lb-table th:nth-child(3),
  .lb-table td:nth-child(3) {
    display: none;
  }

  /* ── Account personal bests table: hide attempts ──────── */
  .lb-table th:nth-child(4),
  .lb-table td:nth-child(4) {
    display: none;
  }

  /* ── Alpha banner: hide text, keep dismiss ─────────────── */
  #alpha-banner span {
    font-size: 8px;
    letter-spacing: 1px;
  }

}