:root {
  color-scheme: dark;
  --bg: #07111d;
  --panel: rgba(7, 16, 30, 0.95);
  --line: rgba(255, 255, 255, 0.15);
  --blue: #4a9eff;
  --red: #ff5a5a;
  --gold: #ffcc2e; /* Neutral Flag's single flag, matches client.js's COLORS.neutral */
  --text: #e8eaee;
}
* { box-sizing: border-box; }
/* .hud/.footer/etc. set `display` explicitly, which otherwise beats the
   browser's default `[hidden] { display: none }` UA-stylesheet rule (author
   CSS always wins over UA styles) — without this override, toggling the
   `hidden` attribute in JS would silently do nothing on those elements. */
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background: radial-gradient(circle at top, #14314f 0%, var(--bg) 55%, #050913 100%);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.frame {
  width: min(1040px, 100%);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  background: var(--panel);
}

/* Fixed to the viewport (not `.frame`) so it stays in the same spot
   regardless of which screen is showing, including the borderless
   fullscreen game view (see .frame.gameMode). */
.audioControls {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(7, 16, 30, 0.72);
  backdrop-filter: blur(6px);
}
.audioBtn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
  line-height: 1;
}
.audioBtn:hover { background: rgba(255, 255, 255, 0.12); }
.audioBtn.muted { opacity: 0.4; }
.audioTrackLabel {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  transition: max-width 0.4s ease, margin-left 0.4s ease;
}
.audioTrackLabel.show { max-width: 160px; margin-left: 4px; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
}
.title { font-size: 1.04rem; font-weight: 700; }
.topbarRight { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.accountBar { display: flex; align-items: center; }
.accountBar button.secondary { width: auto; margin-top: 0; padding: 7px 12px; font-size: 0.85rem; }
.accountSignedIn { display: flex; align-items: center; gap: 8px; }
.accountAvatar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); }
#accountName { font-size: 0.9rem; font-weight: 600; }
.hud { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pill {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.95rem;
}
.pill.blue strong { color: var(--blue); }
.pill.red strong { color: var(--red); }
.pill.you-blue { border-color: rgba(74, 158, 255, 0.55); color: var(--blue); }
.pill.you-red { border-color: rgba(255, 90, 90, 0.55); color: var(--red); }
.pill.you-spectate { opacity: 0.75; }
button.reset {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
}
button.reset:hover { background: rgba(255, 255, 255, 0.13); }
.stage { position: relative; }
canvas { display: block; width: 100%; height: auto; background: #12151a; }

/* Fullscreen-style in-game view (see showScreen() in client.js) — canvas
   fills essentially the whole browser window, with only a thin transparent
   overlay strip top-left (leave/status pills, flipped there via
   flex-direction so the SAME .topbar/.hud markup used everywhere else
   doesn't need duplicating) and the fixed #audioControls owning the true
   top-right corner. Real TagPro's layout (exit/status top-left, mute/
   settings top-right, playing field filling everything else) is the model.
   The game's logical camera viewport stays a fixed 1360x800 (shared/camera.js/
   server fog-of-war depend on that number matching) — this only changes
   how large that fixed-resolution canvas is DRAWN on screen, scaled up via
   object-fit rather than the map itself becoming resolution-dependent. */
.frame.gameMode {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.frame.gameMode .topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  /* .title below is display:none, leaving .hud as the only flex item —
     flex-start pins it to the LEFT edge (the whole point: leave the true
     top-right corner free for #audioControls). */
  justify-content: flex-start;
  border-bottom: none;
  background: linear-gradient(rgba(5, 9, 19, 0.75), transparent);
  padding: 10px 14px;
}
.frame.gameMode .topbar > div:first-of-type { display: none; } /* .title */
.frame.gameMode .accountBar { display: none; }
.frame.gameMode .hud { gap: 8px; }
.frame.gameMode .footer { display: none; }
.frame.gameMode .stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.frame.gameMode canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  font-family: inherit;
  font-size: 0.85em;
}
/* Perf readout (FPS/ping), top-left of the playing field itself — same
   spot/style real TagPro uses (plain small text overlaying the canvas, not
   a pill), positioned just below the topbar's leave/status pill cluster in
   gameMode so the two don't overlap. */
.perfStats {
  position: absolute;
  top: 46px;
  left: 14px;
  z-index: 15;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* --- top wide message HUD (Tribes-1-style ticker): system events, match
   countdown, and VGS chat lines, replacing the old floating speech bubbles
   drawn over the ball (they overlapped play) --- */
.hudTicker {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(94%, 640px);
  max-height: 118px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(7, 16, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  font-size: 0.82rem;
  line-height: 1.35;
}
.hudTicker .tickerLine {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: tickerIn 0.18s ease-out;
}
.hudTicker .tickerLine .tickerName { font-weight: 700; }
.hudTicker .tickerLine.chat.blue .tickerName { color: var(--blue); }
.hudTicker .tickerLine.chat.red .tickerName { color: var(--red); }
.hudTicker .tickerLine.system { color: #ffd24a; }
.hudTicker .tickerLine.capture { color: #7cff9e; font-weight: 600; }
.hudTicker .tickerLine.tag { color: rgba(255, 255, 255, 0.75); }
.hudTicker .tickerLine.powerup { color: #b388ff; }
.hudTicker .tickerLine.countdown { color: #fff; font-weight: 700; text-align: center; }
@keyframes tickerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* --- bottom scoreboard/timer bar --- */
.matchBar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  font-weight: 700;
  user-select: none;
}
.matchPill { display: flex; align-items: center; gap: 8px; padding: 8px 16px; }
.matchPill.blue { background: linear-gradient(90deg, #2f6fd6, var(--blue)); border-radius: 999px 0 0 999px; padding-right: 20px; }
.matchPill.red { background: linear-gradient(90deg, var(--red), #c23a3a); border-radius: 0 999px 999px 0; padding-left: 20px; flex-direction: row-reverse; }
.matchTeamLabel { font-size: 0.8rem; letter-spacing: 0.06em; }
.matchScoreBox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: #12151a;
  font-size: 1.05rem;
}
.matchDots { display: flex; gap: 4px; }
.matchDots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.matchDots .dot.filled { background: rgba(255, 255, 255, 0.95); }
.matchTime {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  background: #12151a;
}
.matchTimeLabel { font-size: 0.62rem; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); }
.matchTimeValue { font-variant-numeric: tabular-nums; font-size: 1.15rem; color: #ffd24a; }
/* Regulation clock inside its last 30s (see updateMatchTime in client.js) —
   also reused for the whole of overtime/Clutch Time, both genuinely urgent. */
.matchTimeValue.urgent { color: var(--red); }
/* Pre-match freeze ("Match starting in N…") — deliberately NOT .urgent's
   red, which reads as "time's about to run out"; this is the opposite. */
.matchTimeValue.starting { color: #7cc4ff; }

/* Neutral Flag only ("Flag: open / held by BLUE / held by RED") — hidden
   on classic-CTF rooms, which already show flag status via the two home
   markers on the field itself. Sits centered just below the scoreboard, its
   own small pill so it doesn't compete with the score/clock for attention. */
.flagStatusPill {
  position: absolute;
  left: 50%;
  bottom: 66px;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(7, 16, 30, 0.85);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.flagStatusPill.held-blue { color: var(--blue); }
.flagStatusPill.held-red { color: var(--red); }

.vgsMenu {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(7, 16, 30, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  font-size: 0.88rem;
  min-width: 180px;
}
.vgsMenu .vgsTitle {
  font-weight: 700;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vgsMenu .vgsRow { display: flex; gap: 8px; padding: 2px 0; align-items: baseline; }
.vgsMenu .vgsKey {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 700;
  text-align: center;
}
.footer {
  padding: 12px 18px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.92rem;
  flex-wrap: wrap;
}

/* --- lobby screen --- */
.lobby { padding: 18px; }
.lobbyActions { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.lobbyHint { color: rgba(255, 255, 255, 0.6); font-size: 0.88rem; }
button.primary, button.secondary {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
button.primary { background: linear-gradient(135deg, var(--blue), #2f6fd6); border-color: transparent; }
button.primary:hover { filter: brightness(1.1); }
button.secondary { background: rgba(255, 255, 255, 0.07); width: 100%; margin-top: 4px; }
button.secondary:hover { background: rgba(255, 255, 255, 0.13); }
.lobbyColumns { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.lobbyList h3, .lobbyForms h3 {
  margin: 0 0 10px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
}
.roomList { display: flex; flex-direction: column; gap: 8px; }
.roomListEmpty { color: rgba(255, 255, 255, 0.45); font-size: 0.9rem; padding: 10px 0; }
.roomRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
}
.roomRow:hover { background: rgba(255, 255, 255, 0.09); }
.roomRow .roomName { font-weight: 600; }
.roomRow .roomMeta { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; }
.lobbyForms { display: flex; flex-direction: column; gap: 18px; }
.lobbyForms form {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
}
.lobbyForms input[type="text"], .lobbyForms input:not([type]), .lobbyForms input[type="checkbox"] + label, select.teamSizeSelect,
.lobbyForms input, .lobbyForms select {
  font-family: inherit;
  font-size: 0.92rem;
}
.lobbyForms input, .lobbyForms select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  margin-top: 4px;
}
.lobbyForms .fieldRow { display: block; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); margin-top: 8px; }
.lobbyForms .checkRow { display: flex; align-items: center; gap: 6px; }
.lobbyForms .checkRow input { width: auto; margin: 0; }
.codeInput { text-transform: uppercase; letter-spacing: 0.12em; text-align: center; }
.lobbyError {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 90, 90, 0.4);
  background: rgba(255, 90, 90, 0.12);
  color: #ffb3b3;
  font-size: 0.88rem;
}
/* --- waiting room + draft screen --- */
.waitingRoom, .draftScreen { padding: 18px; }
.waitingHeader { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.waitingTitle { font-size: 1.05rem; font-weight: 700; }
.waitingMeta { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; margin-top: 3px; }
.waitingMeta strong { color: var(--text); letter-spacing: 0.1em; }
.waitingActions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
button.primary:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.draftTimer {
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 800;
  min-width: 2.2ch;
  text-align: center;
  color: var(--text);
}
.draftTimer.urgent { color: var(--red); }

.rosterColumns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rosterTeam h3 { margin: 0 0 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.rosterTeam.blue h3 { color: var(--blue); }
.rosterTeam.red h3 { color: var(--red); }
.rosterList { display: flex; flex-direction: column; gap: 8px; }
.rosterRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.9rem;
}
.rosterRow.me { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.09); }
.rosterRow .rosterClass { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; }
.rosterRow .rosterClass.picked { color: var(--text); font-weight: 600; }
.rosterEmpty { color: rgba(255, 255, 255, 0.35); font-style: italic; }

.classGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 20px; }
.classCard {
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.classCard:hover { background: rgba(255, 255, 255, 0.09); }
.classCard.selected { border-color: var(--blue); background: rgba(74, 158, 255, 0.14); }
.classCard:disabled { opacity: 0.45; cursor: not-allowed; }
.classCard .className { font-weight: 700; margin-bottom: 4px; }
.classCard .classBlurb { font-size: 0.82rem; color: rgba(255, 255, 255, 0.65); line-height: 1.35; }

.mapVoteScreen { padding: 18px; }
.mapVoteOptions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.mapVoteCard {
  text-align: center;
  padding: 24px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.mapVoteCard:hover { background: rgba(255, 255, 255, 0.09); }
.mapVoteCard.selected { border-color: var(--blue); background: rgba(74, 158, 255, 0.14); }
.mapVoteCard .mapVoteName { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.mapVoteCard .mapVoteCount { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }
.mapVoteCard .mapVoteCount strong { color: var(--text); font-size: 1.3rem; display: block; }

/* --- coins, daily tasks, Cappit Shop --- */
.coinBalance {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 210, 74, 0.14);
  border: 1px solid rgba(255, 210, 74, 0.35);
  color: #ffd24a;
  font-size: 0.85rem;
  font-weight: 700;
}

.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 16, 0.72);
  padding: 20px;
}
.modalCard {
  width: min(680px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  padding: 18px 20px 22px;
}
.modalHeader { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.modalHeader h3 { margin: 0; flex: 1; font-size: 1.1rem; }
.modalClose {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.modalClose:hover { background: rgba(255, 255, 255, 0.16); }

.taskRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 8px;
}
.taskRow.completed { border-color: rgba(124, 255, 158, 0.4); background: rgba(124, 255, 158, 0.08); }
.taskRow .taskInfo { flex: 1; }
.taskRow .taskLabel { font-weight: 600; }
.taskRow .taskMeta { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }
.taskRow .taskDifficulty {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.taskRow .taskReward { color: #ffd24a; font-weight: 700; white-space: nowrap; }
.streakInfo {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
}

.shopSection h4 { margin: 16px 0 10px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.55); }
.shopSection:first-child h4 { margin-top: 0; }
.shopGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.shopItem {
  text-align: center;
  padding: 14px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
}
.shopItem:hover { background: rgba(255, 255, 255, 0.08); }
.shopItem.owned { border-color: rgba(124, 255, 158, 0.4); }
.shopItem.equipped { border-color: var(--blue); background: rgba(74, 158, 255, 0.14); }
.shopItem .shopItemIcon { font-size: 1.6rem; margin-bottom: 6px; }
.shopItem .shopItemSwatch { width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 6px; border: 2px solid rgba(255, 255, 255, 0.3); }
.shopItem .shopItemName { font-size: 0.85rem; font-weight: 600; }
.shopItem .shopItemPrice { font-size: 0.78rem; color: #ffd24a; margin-top: 3px; }
.shopItem .shopItemStatus { font-size: 0.72rem; color: rgba(124, 255, 158, 0.85); margin-top: 3px; }

/* --- replays --- */
.replayBar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(7, 16, 30, 0.85);
  backdrop-filter: blur(6px);
  max-width: 94%;
}
.replayBar .audioBtn { flex: none; }
.replayScrub { width: 220px; }
.replayTimeLabel { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.75); white-space: nowrap; }
.replaySpeed {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-size: 0.78rem;
  padding: 3px 4px;
}
.replayClipLabel { font-size: 0.78rem; color: rgba(255, 255, 255, 0.65); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.replayClipLabel input {
  width: 44px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  color: var(--text);
  padding: 2px 4px;
  font-size: 0.78rem;
}

.replayRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
  margin-bottom: 8px;
}
.replayRow:hover { background: rgba(255, 255, 255, 0.09); }
.replayRow .replayScore { font-weight: 700; }
.replayRow .replayScore .blue { color: var(--blue); }
.replayRow .replayScore .red { color: var(--red); }
.replayRow .replayMeta { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; margin-top: 2px; }

@media (max-width: 760px) {
  .topbar, .footer { flex-direction: column; align-items: flex-start; }
  .lobbyColumns, .rosterColumns { grid-template-columns: 1fr; }
}