/* ============================================
   BattleCrypt
   Main Stylesheet
   ============================================ */

/* ---- Typography ----
   Fonts are vendored under public/lib/fonts so the game has no external
   dependencies at all: the Tauri/Steam builds and any offline LAN party work
   without a network round-trip, and there is no third-party request on load.

   Two faces, two jobs:
     --font-display  Cinzel. Carved Roman capitals; the crypt/fantasy register.
                     Headers, buttons, announcements. NOTE: Cinzel renders
                     lowercase as small caps, so it must never be used for
                     player names, chat or anything a user types.
     --font-ui       Inter. Clean grotesk with real tabular figures, which is
                     what HUD numbers, timers and stat tables need in order to
                     stop shifting as digits change.

   This replaces 'Press Start 2P'. An 8-bit pixel font caps how premium the
   game can read no matter how good the rendering gets, and it was the loudest
   remaining prototype signal in the product.
   ============================================ */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../lib/fonts/cinzel-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../lib/fonts/cinzel-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../lib/fonts/cinzel-latin-900-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../lib/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../lib/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../lib/fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root {
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Display type is set in capitals with open tracking — Cinzel is a capitals
   face and needs the air. Sized up slightly because the pixel font it replaces
   occupied far more width per character. */
.game-title, .game-subtitle, .options-title, .lobby-title, .room-title,
.settings-title, .pause-title, .admin-title, .ch-title, .hmo-title,
.instr-detail-title, .rt-title, .big-announcement, .countdown-overlay,
.killcam-label, .overlay h1, .menu-btn, .opt-tab-btn, .mutators-header,
.howto-section h3, .class-card h3, .sb-rank, .go-award, .rt-award,
.mutator-cat-label, .icard-name, .ach-name, .pu-name, .spectate-label,
#hud-arena, #hud-round {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* HUD and table numerals must not jitter as digits change. */
.hud-timer, .hud-fps, .hud-kd, .hud-alive, .hud-streak, .gs-value, .sb-stat,
.go-stats-table, .rt-stats-table, .stat-bar-label, .opt-val, .hpc-stats {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

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

body {
  background: #0a0a0a;
  color: #e0d5c0;
  font-family: var(--font-ui);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

/* ---- SCREENS ---- */
.screen {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
  z-index: 1;
}
.screen.active { display: flex; align-items: center; justify-content: center; overflow-y: auto; }

/* ---- TITLE SCREEN ---- */
#title-screen {
  background: radial-gradient(ellipse at center, #1a0a00 0%, #000 70%);
  flex-direction: column;
}
.title-container { text-align: center; }
.game-title {
  font-family: var(--font-display);
  font-size: 72px;
  color: #ff6600;
  text-shadow: 0 0 20px #ff3300, 0 0 40px #ff0000, 0 0 80px #cc0000, 0 4px 0 #331100;
  animation: titlePulse 2s ease-in-out infinite;
  letter-spacing: 8px;
}
.game-subtitle {
  font-family: var(--font-display);
  font-size: 18px;
  color: #ffcc00;
  text-shadow: 0 0 10px #ff9900;
  margin-top: 10px;
  letter-spacing: 4px;
}
@keyframes titlePulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 20px #ff3300, 0 0 40px #ff0000, 0 0 80px #cc0000; }
  50% { transform: scale(1.02); text-shadow: 0 0 30px #ff6600, 0 0 60px #ff3300, 0 0 100px #ff0000; }
}

.menu-buttons { margin-top: 60px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.menu-btn {
  font-family: var(--font-display);
  font-size: 16px;
  padding: 16px 40px;
  background: linear-gradient(180deg, #4a3520 0%, #2a1a10 100%);
  color: #ffcc00;
  border: 2px solid #ff9900;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
  min-width: 280px;
}
.menu-btn:hover {
  background: linear-gradient(180deg, #6a4530 0%, #4a2a15 100%);
  border-color: #ffcc00;
  text-shadow: 0 0 10px #ffcc00;
  transform: scale(1.05);
}
.menu-btn.small { font-size: 11px; padding: 10px 20px; min-width: auto; }
.menu-btn.back { background: linear-gradient(180deg, #3a2020 0%, #1a0a0a 100%); border-color: #993333; color: #ff6666; }
.menu-btn.back:hover { border-color: #ff6666; }
.menu-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.menu-btn.btn-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  border-color: #555;
  color: #777;
  text-shadow: none;
  animation: none;
}
.menu-btn.btn-disabled:hover { transform: none; border-color: #555; }
.menu-btn.btn-go {
  background: linear-gradient(180deg, #1a5a1a 0%, #0a3a0a 100%);
  border-color: #44ff44;
  color: #44ff44;
  text-shadow: 0 0 10px #44ff44;
  animation: btnGoPulse 1.2s ease-in-out infinite;
}
.menu-btn.btn-go:hover {
  background: linear-gradient(180deg, #2a7a2a 0%, #1a5a1a 100%);
  border-color: #88ff88;
  text-shadow: 0 0 15px #88ff88;
}
@keyframes btnGoPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(68,255,68,0.3); }
  50% { box-shadow: 0 0 20px rgba(68,255,68,0.6); }
}
.menu-btn.btn-unready {
  background: linear-gradient(180deg, #5a3a1a 0%, #3a2a0a 100%);
  border-color: #ffaa44;
  color: #ffaa44;
}

.version-text {
  margin-top: 40px;
  font-family: var(--font-ui);
  font-size: 10px;
  color: #665533;
}

/* ---- LOBBY SCREEN ---- */
#lobby-screen {
  background: radial-gradient(ellipse at center, #0f0a05 0%, #000 70%);
}
.lobby-container { width: 90%; max-width: 900px; max-height: 100vh; margin: auto; }
.lobby-title {
  font-family: var(--font-display);
  font-size: 28px;
  color: #ffcc00;
  text-shadow: 0 0 10px #ff9900;
  text-align: center;
  margin-bottom: 30px;
}
.lobby-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  gap: 20px;
}
.player-info-panel label {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #aa8855;
  display: block;
  margin-bottom: 6px;
}
.player-info-panel input {
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 8px 12px;
  background: #1a1008;
  border: 2px solid #554422;
  color: #ffcc00;
  outline: none;
  width: 200px;
}
.player-info-panel input:focus { border-color: #ff9900; }
.lobby-actions { display: flex; gap: 10px; }
.lobby-list {
  background: #0d0800;
  border: 2px solid #332200;
  border-radius: 4px;
  min-height: 300px;
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
}
.lobby-list .empty-msg {
  text-align: center;
  color: #554422;
  padding: 40px;
  font-family: var(--font-ui);
  font-size: 11px;
}
.lobby-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #1a1008;
  border: 1px solid #332200;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.lobby-item:hover { background: #2a1a10; border-color: #ff9900; }
.lobby-item .lobby-name { font-family: var(--font-ui); font-size: 12px; color: #ffcc00; }
.lobby-item .lobby-players { font-family: var(--font-ui); font-size: 10px; color: #aa8855; }
.lobby-item .lobby-bots { font-size: 8px; color: #888; }
.connection-status {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  color: #666;
  text-align: center;
}
.connection-status.connected { color: #33ff33; }
.connection-status.error { color: #ff3333; }

/* ---- ROOM / CHARACTER SELECT ---- */
#room-screen {
  background: radial-gradient(ellipse at center, #0a0510 0%, #000 70%);
  align-items: flex-start !important;
  padding-top: 20px;
}
.room-container { width: 95%; max-width: 1100px; text-align: center; }
.room-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: #cc99ff;
  text-shadow: 0 0 10px #9933ff;
  margin-bottom: 16px;
}
.class-select { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.class-card {
  width: 150px;
  padding: 14px 12px;
  background: #1a1020;
  border: 2px solid #443366;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}
.class-card:hover { border-color: #9966ff; transform: translateY(-4px); }
.class-card.selected { border-color: #ffcc00; background: #2a1a30; box-shadow: 0 0 20px rgba(255, 204, 0, 0.3); }
.class-icon {
  width: 48px; height: 48px;
  margin: 0 auto 8px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  background: radial-gradient(circle, #2a1a30, #1a1020);
  border: 2px solid #443366;
}
/* Class icons are inline SVG, not emoji codepoints. The old glyphs rendered
   inconsistently — U+1F9D9 (wizard) came through as a full-colour emoji while
   the other three fell back to monochrome, so one card never matched the rest. */
.class-card h3 {
  font-family: var(--font-display);
  font-size: 10px;
  color: #ffcc00;
  margin-bottom: 6px;
}
.class-card p { font-size: 11px; color: #ccbbdd; margin-bottom: 6px; line-height: 1.3; }
.class-card .stats { font-size: 9px; color: #aa99bb; display: none; flex-direction: column; gap: 4px; }
.class-card:hover .stats, .class-card.selected .stats { display: flex; }
.class-special { font-family: var(--font-ui); font-size: 9px; color: #ffcc00; margin-bottom: 10px; }

/* Color Picker */
.color-picker-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; margin-top: 2px; }
.color-picker-label { font-family: var(--font-ui); font-size: 9px; color: #aa88cc; letter-spacing: 1px; }
.color-swatches { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.color-swatch {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 3px solid rgba(255,255,255,0.15); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.color-swatch:hover:not(.disabled) { transform: scale(1.25); border-color: rgba(255,255,255,0.6); box-shadow: 0 0 14px rgba(255,255,255,0.3); }
.color-swatch.selected { border-color: #fff; box-shadow: 0 0 16px rgba(255,255,255,0.7), 0 0 30px currentColor; transform: scale(1.2); }
.color-swatch.disabled { opacity: 0.2; cursor: not-allowed; transform: scale(0.8); border-color: rgba(255,255,255,0.05); pointer-events: auto; }

.room-players {
  display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap;
}
.room-player {
  padding: 8px 14px;
  background: #1a1020;
  border: 2px solid #443366;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  min-width: 160px;
  position: relative;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.room-player .rp-color {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  box-shadow: 0 0 8px currentColor;
}
.room-player.ready { border-width: 2px; }
.room-player .rp-name { color: #ffcc00; margin-bottom: 4px; font-size: 10px; }
.room-player .rp-class { color: #aa88cc; font-size: 8px; }
.room-player .rp-status { color: #666; font-size: 8px; margin-top: 6px; }
.room-player.ready .rp-status { color: #33ff33; text-shadow: 0 0 6px #33ff3366; }

/* Bot controls */
.bot-controls {
  margin-bottom: 16px;
  text-align: center;
}
.bot-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.bot-select {
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 8px 14px;
  background: #1a1020;
  border: 2px solid #443366;
  color: #ffcc00;
  cursor: pointer;
  outline: none;
}
.bot-select:focus { border-color: #ffcc00; }

/* Settings + Chat 2-column grid */
.room-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  text-align: left;
}
@media (max-width: 800px) {
  .room-bottom-grid { grid-template-columns: 1fr; }
}
.room-bottom-left, .room-bottom-right {
  min-width: 0;
}
.room-bottom-right {
  display: flex;
  flex-direction: column;
}
.room-bottom-right .lobby-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.room-bottom-right .chat-messages {
  flex: 1;
  height: auto;
  min-height: 180px;
}

/* Host game settings */
.host-settings {
  background: rgba(20, 10, 30, 0.8);
  border: 2px solid #443366;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  text-align: left;
}
.settings-title {
  font-family: var(--font-display);
  font-size: 10px;
  color: #ffcc00;
  margin: 0 0 10px 0;
  text-align: center;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
}
.settings-row label {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #ccc;
  white-space: nowrap;
}
.settings-row label[title],
.settings-row .gs-label[title] {
  cursor: help;
  border-bottom: 1px dotted #666;
}
.setting-select {
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 8px 12px;
  background: #1a1020;
  border: 2px solid #443366;
  color: #ffcc00;
  cursor: pointer;
  outline: none;
  min-width: 200px;
  max-width: 260px;
  text-overflow: ellipsis;
}
.setting-select:focus { border-color: #ffcc00; }
.setting-select option {
  font-family: var(--font-ui);
  font-size: 9px;
  background: #1a1020;
  color: #ffcc00;
  padding: 4px;
}

/* Non-host game settings display (read-only) */
.game-settings-display {
  background: rgba(20, 10, 30, 0.8);
  border: 2px solid #443366;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  text-align: left;
}
.gs-label {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #ccc;
  white-space: nowrap;
}
.gs-value {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #ffcc00;
}
.game-settings-display.settings-flash,
.host-settings.settings-flash {
  animation: settingsFlash 0.6s ease-out;
}
@keyframes settingsFlash {
  0% { border-color: #ff4444; box-shadow: 0 0 15px rgba(255, 68, 68, 0.6); }
  50% { border-color: #ffcc00; box-shadow: 0 0 10px rgba(255, 204, 0, 0.4); }
  100% { border-color: #443366; box-shadow: none; }
}

/* Mutators section */
.mutators-section {
  margin-top: 12px;
  border-top: 1px solid #333;
  padding-top: 10px;
}
.mutators-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 10px;
  color: #ff8844;
  user-select: none;
  padding: 4px 0;
}
.mutators-arrow {
  font-size: 8px;
  transition: transform 0.2s;
  display: inline-block;
}
.mutators-arrow.open {
  transform: rotate(90deg);
}
.mutators-badge {
  background: #ff4444;
  color: #fff;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.mutators-reset-btn {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 7px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #666;
  color: #888;
  cursor: pointer;
  transition: all 0.2s;
}
.mutators-reset-btn:hover {
  border-color: #ff4444;
  color: #ff4444;
}
.mutators-body {
  padding: 8px 0;
  max-height: 45vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #444 #111;
}
.mutators-body::-webkit-scrollbar { width: 6px; }
.mutators-body::-webkit-scrollbar-track { background: #111; border-radius: 3px; }
.mutators-body::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
.mutators-body::-webkit-scrollbar-thumb:hover { background: #666; }
/* Mutator preset buttons */
.mutator-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #222;
  flex-wrap: wrap;
}
.mutator-preset-btn {
  font-family: var(--font-display);
  font-size: 7px;
  padding: 5px 10px;
  border: 1px solid #444;
  background: #181828;
  color: #aaa;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 3px;
}
.mutator-preset-btn:hover {
  border-color: #ffcc00;
  color: #ffcc00;
  background: rgba(255,204,0,0.08);
}
.mutator-preset-btn.preset-chaos {
  border-color: #ff4444;
  color: #ff6666;
}
.mutator-preset-btn.preset-chaos:hover {
  background: rgba(255,68,68,0.15);
  border-color: #ff6666;
  color: #ff8888;
}
.mutator-cat-label {
  font-family: var(--font-display);
  font-size: 8px;
  color: #666;
  margin: 10px 0 6px 0;
  text-transform: uppercase;
}
.mutator-cat-label:first-child {
  margin-top: 4px;
}
.mutator-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 4px 0;
}
.mutator-label {
  font-family: var(--font-ui);
  font-size: 8px;
  color: #ccc;
  min-width: 120px;
  white-space: nowrap;
  cursor: help;
  border-bottom: 1px dotted #555;
}
.mutator-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #222;
  border-radius: 3px;
  outline: none;
  min-width: 80px;
}
.mutator-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffcc00;
  cursor: pointer;
  border: 2px solid #886600;
}
.mutator-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffcc00;
  cursor: pointer;
  border: 2px solid #886600;
}
.mutator-slider.modified::-webkit-slider-thumb {
  background: #ff8844;
  border-color: #884400;
}
.mutator-slider.modified::-moz-range-thumb {
  background: #ff8844;
  border-color: #884400;
}
/* Mutator boolean toggle switch */
.mutator-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 18px;
  flex-shrink: 0;
}
.mutator-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.mutator-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #333;
  border-radius: 9px;
  transition: background 0.2s;
}
.mutator-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  background: #888;
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.mutator-toggle input:checked + .mutator-toggle-slider {
  background: #884400;
}
.mutator-toggle input:checked + .mutator-toggle-slider::before {
  transform: translateX(18px);
  background: #ff8844;
}
.mutator-value {
  font-family: var(--font-ui);
  font-size: 8px;
  color: #ffcc00;
  min-width: 50px;
  text-align: right;
}
.mutator-value.modified {
  color: #ff8844;
}
/* Non-host mutators display */
.mutators-display {
  margin-top: 12px;
  border-top: 1px solid #333;
  padding-top: 10px;
}
.mutators-display-list {
  padding: 4px 0;
}
.mutator-display-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding: 2px 0;
}
.mutator-display-label {
  font-family: var(--font-ui);
  font-size: 8px;
  color: #ccc;
}
.mutator-display-value {
  font-family: var(--font-ui);
  font-size: 8px;
  color: #ff8844;
  font-weight: bold;
}

/* Lobby password */
.lobby-create-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.lobby-password-input {
  font-family: var(--font-ui);
  font-size: 8px;
  padding: 6px 10px;
  background: #1a1020;
  border: 2px solid #443366;
  color: #ffcc00;
  outline: none;
  width: 130px;
}
.lobby-password-input:focus { border-color: #ffcc00; }
.lobby-password-input::placeholder { color: #555; }
.lobby-item .lobby-lock {
  color: #ff6644;
  font-size: 10px;
  margin-right: 6px;
}
.password-prompt {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.password-prompt.hidden { display: none; }
.password-prompt-inner {
  background: rgba(20, 10, 30, 0.95);
  border: 2px solid #ffcc00;
  border-radius: 8px;
  padding: 20px 24px;
  text-align: center;
  min-width: 250px;
}

/* Lobby chat */
.lobby-chat {
  background: rgba(10, 5, 20, 0.8);
  border: 2px solid #443366;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.lobby-chat .settings-title {
  padding: 10px 12px 8px;
  margin: 0;
  border-bottom: 1px solid #333;
}
.chat-messages {
  height: 200px;
  overflow-y: auto;
  padding: 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 2;
  color: #ccc;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: #443366; border-radius: 2px; }
.chat-msg { margin-bottom: 2px; }
.chat-msg .chat-name { color: #ffcc00; }
.chat-msg .chat-system { color: #888; font-style: italic; }
.chat-input-row {
  display: flex;
  border-top: 1px solid #333;
}
.chat-input {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 10px;
  background: #0a0510;
  border: none;
  color: #fff;
  outline: none;
}
.chat-input::placeholder { color: #555; }
.room-player.bot { border-color: #ff8800; background: #201510; }
.room-player.bot .rp-name { color: #ff8800; }
.rp-bot-tag {
  font-size: 7px;
  background: #ff8800;
  color: #000;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 4px;
}

.room-actions { display: flex; gap: 12px; justify-content: center; }

/* ---- GAME SCREEN ---- */
#game-screen { background: #000; overflow: hidden; }
#game-canvas { width: 100%; height: 100%; display: block; }

/* HUD */
:root { --hud-scale: 1; }
#hud {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* ---- LEFT SIDEBAR ---- */
#hud-sidebar {
  position: absolute;
  top: 0; left: 0;
  width: min(280px, 22vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.8);
  border-right: 2px solid #444;
  padding: 10px;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
  transform: scale(var(--hud-scale));
  transform-origin: top left;
}
@media (max-width: 1400px) {
  #hud-sidebar { width: min(220px, 20vw); padding: 6px; gap: 5px; }
  #hud-sidebar .hpc-name { font-size: 9px; max-width: 120px; }
  #hud-sidebar .hpc-class { font-size: 7px; }
  #hud-arena { font-size: 10px; }
  #hud-round { font-size: 8px; }
}
@media (max-width: 1000px) {
  #hud-sidebar { width: min(180px, 18vw); padding: 4px; gap: 4px; }
  #hud-sidebar .hpc-name { font-size: 8px; max-width: 100px; }
  #hud-sidebar .hpc-class { font-size: 6px; }
  #hud-arena { font-size: 8px; }
  #hud-round { font-size: 7px; }
  #hud-minimap { max-height: 120px; }
  #hud-minimap canvas { max-height: 110px; }
}
@media (max-width: 700px) {
  #hud-sidebar { width: min(130px, 25vw); padding: 3px; gap: 3px; }
  #hud-sidebar .hpc-name { font-size: 7px; max-width: 80px; }
  #hud-sidebar .hpc-class { font-size: 5px; }
  #hud-sidebar .hpc-stats { font-size: 5px; }
  #hud-arena { font-size: 7px; }
  #hud-round { font-size: 6px; }
  #hud-minimap { max-height: 90px; }
  #hud-minimap canvas { max-height: 80px; }
}
@media (max-width: 500px) {
  #hud-sidebar { width: min(100px, 25vw); padding: 2px; gap: 2px; }
  #hud-sidebar .hpc-name { font-size: 6px; max-width: 60px; }
  #hud-sidebar .hpc-class { display: none; }
  #hud-sidebar .hpc-stats { font-size: 4px; }
  #hud-arena { font-size: 6px; }
  #hud-round { font-size: 5px; }
  #hud-minimap { max-height: 70px; }
  #hud-minimap canvas { max-height: 60px; }
}
#hud-sidebar::-webkit-scrollbar { width: 4px; }
#hud-sidebar::-webkit-scrollbar-thumb { background: #444; }

/* Game Info Block */
#hud-game-info {
  background: rgba(20,15,10,0.9);
  border: 1px solid #555;
  padding: 10px;
  flex-shrink: 0;
}
#hud-arena {
  font-family: var(--font-display);
  font-size: 13px;
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255,204,0,0.5);
  margin-bottom: 6px;
}
#hud-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
#hud-round {
  font-family: var(--font-display);
  font-size: 10px;
  color: #ff4444;
}

/* Player Cards */
#hud-players {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.hud-player-card {
  background: rgba(20,15,10,0.9);
  border: 1px solid #444;
  padding: 8px 10px;
}
.hud-player-card.dead {
  opacity: 0.4;
}
.hud-player-card.local {
  border-color: #aaa;
  border-width: 2px;
}
.hpc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.hpc-name {
  font-family: var(--font-ui);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.hpc-class {
  font-family: var(--font-ui);
  font-size: 8px;
  opacity: 0.6;
}
.hpc-health {
  position: relative;
  width: 100%;
  height: 11px;
  background: #2a0808;
  margin-bottom: 5px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* Damage chip. Sits behind the fill and drains on a delay, so a hit leaves a
   pale band for a beat showing exactly how much was just lost. The fill snaps
   down immediately; the chip follows. Only ever animates downward — healing
   snaps it up in JS so it never lags behind a rising bar. */
.hpc-health-chip {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: linear-gradient(90deg, #ffd0c4, #fff0e8);
  opacity: 0.75;
  border-radius: 2px;
  transition: width 620ms cubic-bezier(0.4, 0, 0.2, 1) 240ms;
}
.hpc-health-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: linear-gradient(90deg, #c40d1c, #ff4444);
  transition: width 110ms linear;
  border-radius: 2px;
}
.hpc-health-fill.high { background: linear-gradient(90deg, #00aa00, #33ff33); }
.hpc-health-fill.mid { background: linear-gradient(90deg, #aaaa00, #ffff33); }
.hpc-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 10px;
  color: #888;
  margin-bottom: 3px;
}
.hpc-wins { color: #ffcc00; }
.hpc-kills { color: #66cc66; }
.hpc-deaths { color: #cc6666; }
.hpc-status {
  font-size: 8px;
  color: #ff3333;
  margin-left: auto;
  animation: blink 0.5s infinite;
}
.hpc-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}
.hpc-item {
  font-size: 15px;
  line-height: 1;
  opacity: 0.9;
}
.hpc-item.hpc-potion { color: #00ccff; }
.hpc-item.hpc-powerup { color: #ffcc00; }
.hpc-item.faded { opacity: 0.3; }
/* Relic slots row */
.hpc-relics {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 4px;
}
.hpc-relic-slot {
  width: 18px; height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  opacity: 0.2;
  transition: opacity 0.3s, border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.hpc-relic-slot.owned {
  opacity: 1;
  background: rgba(255,200,50,0.15);
  border-color: rgba(255,200,50,0.7);
  box-shadow: 0 0 6px rgba(255,200,50,0.4);
}
/* Per-relic-type colors when owned */
.hpc-relic-slot.owned.relic_damage    { background: rgba(255,50,50,0.2); border-color: rgba(255,80,80,0.8); box-shadow: 0 0 6px rgba(255,50,50,0.4); }
.hpc-relic-slot.owned.relic_defense   { background: rgba(50,130,255,0.2); border-color: rgba(80,150,255,0.8); box-shadow: 0 0 6px rgba(50,130,255,0.4); }
.hpc-relic-slot.owned.relic_swiftness { background: rgba(50,220,50,0.2); border-color: rgba(80,255,80,0.8); box-shadow: 0 0 6px rgba(50,220,50,0.4); }
.hpc-relic-slot.owned.relic_vitality  { background: rgba(255,50,200,0.2); border-color: rgba(255,80,220,0.8); box-shadow: 0 0 6px rgba(255,50,200,0.4); }
.hpc-relic-slot.owned.relic_force     { background: rgba(255,136,0,0.2); border-color: rgba(255,170,68,0.8); box-shadow: 0 0 6px rgba(255,136,0,0.4); }
.hpc-relic-slot.owned.relic_magnetism { background: rgba(153,68,255,0.2); border-color: rgba(170,100,255,0.8); box-shadow: 0 0 6px rgba(153,68,255,0.4); }
.hpc-relic-slot.owned.relic_thorns    { background: rgba(68,187,68,0.2); border-color: rgba(100,220,100,0.8); box-shadow: 0 0 6px rgba(68,187,68,0.4); }
.hpc-relic-slot.owned.relic_phase     { background: rgba(136,200,255,0.2); border-color: rgba(160,220,255,0.8); box-shadow: 0 0 6px rgba(136,200,255,0.4); }
.hpc-relic-slot.owned.relic_precision { background: rgba(255,220,0,0.2); border-color: rgba(255,230,50,0.8); box-shadow: 0 0 6px rgba(255,220,0,0.4); }
.hpc-relic-slot.owned.relic_lifesteal { background: rgba(200,0,68,0.2); border-color: rgba(230,50,100,0.8); box-shadow: 0 0 6px rgba(200,0,68,0.4); }
/* Relic stack count badge (player card) */
.hpc-relic-count {
  font-size: 6px;
  color: #ffcc00;
  position: absolute;
  bottom: -1px;
  right: -1px;
  background: rgba(0,0,0,0.7);
  border-radius: 3px;
  padding: 0 2px;
  line-height: 1;
}
.hpc-relic-slot { position: relative; }
/* Relic stack count badge (HUD overlay) */
.relic-count {
  font-size: 8px;
  color: #ffcc00;
  margin-left: 2px;
  font-weight: bold;
}
/* Fly-to-card pickup animation */
.pickup-fly {
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
  will-change: left, top, font-size, opacity;
}
/* Card flash on item arrival */
@keyframes cardFlash {
  0% { box-shadow: 0 0 0 0 var(--card-flash-color, rgba(255,255,100,0.8)); }
  50% { box-shadow: 0 0 24px 6px var(--card-flash-color, rgba(255,255,100,0.5)); }
  100% { box-shadow: none; }
}
.hud-player-card.card-flash {
  animation: cardFlash 0.4s ease-out;
}

/* Minimap */
#hud-minimap {
  background: rgba(0,0,0,0.8);
  border: 1px solid #444;
  padding: 4px;
  flex-shrink: 0;
}
#minimap-canvas { display: block; image-rendering: pixelated; width: 100%; height: auto; }

/* ---- INSTRUCTIONS: Hub + Detail View ---- */
.instr-panel {
  width: 90%;
  max-width: 800px;
  text-align: center;
}
.instr-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.instr-cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 10px;
  background: rgba(20, 20, 40, 0.85);
  border: 2px solid #444;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.instr-cat-btn:hover {
  background: rgba(40, 35, 20, 0.9);
  border-color: #ffcc00;
  transform: scale(1.04);
}
.instr-cat-btn.active {
  background: rgba(50, 40, 10, 0.95);
  border-color: #ffcc00;
  box-shadow: 0 0 12px rgba(255,204,0,0.35);
}
.instr-cat-btn.active .icb-label {
  color: #fff;
  text-shadow: 0 0 10px rgba(255,204,0,0.8);
}
svg.icb-icon {
  color: #ffcc00;
  filter: drop-shadow(0 0 6px rgba(255, 204, 0, 0.35));
  transition: color 180ms ease, transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.instr-cat-btn:hover svg.icb-icon { transform: translateY(-2px) scale(1.06); }
.instr-cat-btn.active svg.icb-icon {
  color: #fff;
  filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.8));
}
.icb-label {
  font-family: var(--font-display);
  font-size: 11px;
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255,204,0,0.4);
}

/* Detail view */
.instr-detail-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: #ffcc00;
  text-shadow: 0 0 15px rgba(255,204,0,0.5);
  margin-bottom: 16px;
}
.instr-detail-body {
  max-height: 58vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
  padding: 0 4px 8px 4px;
  margin-bottom: 16px;
  text-align: left;
}
.instr-detail-note {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #888;
  margin-bottom: 14px;
  line-height: 1.7;
  font-style: italic;
  text-align: center;
}

/* Visual item cards (powerups, relics, tiles) */
.icard {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: rgba(15, 15, 30, 0.9);
  border: 1px solid #333;
  border-left: 4px solid #555;
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.icard:hover {
  background: rgba(25, 25, 45, 0.95);
  border-color: #666;
}
.icard-icon {
  font-size: 28px;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.icard-tile-swatch {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.icard-tile-canvas {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  image-rendering: pixelated;
}
.icard-text { flex: 1; }
.icard-name {
  font-family: var(--font-display);
  font-size: 12px;
  margin-bottom: 6px;
  line-height: 1.4;
}
.icard-desc {
  font-family: var(--font-ui);
  font-size: 9px;
  color: #aaa;
  line-height: 1.8;
}
.icard-visual {
  font-family: var(--font-ui);
  font-size: 8px;
  color: #777;
  line-height: 1.7;
  margin-top: 4px;
  padding-left: 4px;
  border-left: 2px solid rgba(255,255,255,0.08);
}
.icard-visual-label {
  color: #99cc99;
  font-size: 7px;
  margin-right: 4px;
}
.icard-hoverable {
  cursor: crosshair;
  transition: border-left-width 0.1s, background 0.1s;
}
.icard-hoverable:hover {
  border-left-width: 6px;
  background: rgba(255,255,255,0.04) !important;
}

/* Controls section (key rows in detail view) */
.icard-key-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.icard-key-row:last-child { border-bottom: none; }
.icard-key {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #33ff33;
  min-width: 160px;
  padding: 4px 10px;
  background: rgba(0,80,0,0.2);
  border: 1px solid rgba(51,255,51,0.2);
  border-radius: 4px;
  text-align: center;
  margin-right: 14px;
}
.icard-key-desc {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #ccc;
}

/* Tips section */
.icard-tip {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #ccc;
  padding: 10px 14px;
  margin-bottom: 6px;
  background: rgba(15, 15, 30, 0.9);
  border-left: 3px solid #ffcc00;
  border-radius: 4px;
  line-height: 1.8;
}
.icard-tip::before {
  content: '> ';
  color: #ffcc00;
}

/* Messages (in sidebar, below minimap) */
#hud-messages {
  flex-shrink: 1;
  overflow: hidden;
  max-height: 140px;
  z-index: 10;
}
.hud-msg {
  font-family: var(--font-ui);
  font-size: 9px;
  padding: 4px 6px;
  margin-top: 2px;
  background: rgba(0,0,0,0.6);
  border-radius: 3px;
  text-shadow: 0 0 6px currentColor, 0 1px 2px #000;
  animation: msgFade 3.5s forwards;
  text-align: left;
  word-break: break-word;
}
@keyframes msgFade {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Overlays */
.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: all;
  /* Scale overlay content with HUD scale so round/game-over/pause screens respect font size option */
  transform: scale(var(--hud-scale, 1));
  transform-origin: center center;
}
.overlay.hidden { display: none; }
.overlay h1 {
  font-family: var(--font-display);
  font-size: 56px;
  color: #ff3333;
  text-shadow: 0 0 20px #ff0000;
  margin-bottom: 24px;
}
.overlay p {
  font-family: var(--font-ui);
  font-size: 16px;
  color: #ffcc00;
  margin-bottom: 30px;
}

/* Controls Help */
.controls-help {
  position: absolute;
  bottom: 10px;
  left: 180px;
  background: rgba(0,0,0,0.85);
  border: 1px solid #444;
  padding: 10px 14px;
  pointer-events: none;
  z-index: 15;
  transition: opacity 0.3s;
}
.controls-help.hidden { opacity: 0; }
.ch-title {
  font-family: var(--font-display);
  font-size: 9px;
  color: #ffcc00;
  margin-bottom: 6px;
}
.ch-row {
  font-family: var(--font-ui);
  font-size: 8px;
  color: #aaa;
  margin-bottom: 3px;
}
.ch-key {
  display: inline-block;
  min-width: 50px;
  color: #33ff33;
}

/* ---- BATTLE MODE HUD ---- */

/* Round wins tracker (top right area) */
#hud-round-wins {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 20;
}
.round-win-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rw-name {
  font-family: var(--font-ui);
  font-size: 8px;
  min-width: 60px;
}
.win-star {
  font-size: 12px;
  opacity: 0.25;
}
.win-star.filled {
  opacity: 1;
  text-shadow: 0 0 6px currentColor;
}

/* Countdown overlay — also scales with HUD */
.countdown-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--hud-scale, 1));
  font-family: var(--font-display);
  font-size: 72px;
  color: #ff4444;
  text-shadow: 0 0 30px rgba(255,68,68,0.8), 0 0 60px rgba(255,68,68,0.4);
  z-index: 100;
  pointer-events: none;
  animation: countdownPulse 0.5s ease-in-out infinite alternate;
}
.countdown-overlay.hidden { display: none; }
@keyframes countdownPulse {
  0% { transform: translate(-50%, -50%) scale(calc(var(--hud-scale, 1) * 1.3)); opacity: 1; text-shadow: 0 0 40px rgba(255,68,68,1), 0 0 80px rgba(255,68,68,0.6); }
  80% { transform: translate(-50%, -50%) scale(var(--hud-scale, 1)); opacity: 0.9; text-shadow: 0 0 20px rgba(255,68,68,0.6), 0 0 40px rgba(255,68,68,0.3); }
  100% { transform: translate(-50%, -50%) scale(calc(var(--hud-scale, 1) * 0.95)); opacity: 0.7; }
}

/* Player bars - battle mode (legacy compat) */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ---- SECONDARY BUTTON ---- */
.menu-btn.secondary {
  background: linear-gradient(180deg, #2a2a3a 0%, #151520 100%);
  border-color: #6666aa;
  color: #aaaaff;
}
.menu-btn.secondary:hover {
  background: linear-gradient(180deg, #3a3a4a 0%, #252530 100%);
  border-color: #aaaaff;
  text-shadow: 0 0 10px #aaaaff;
}

/* ---- OPTIONS SCREEN ---- */
#options-screen {
  background: radial-gradient(ellipse at center, #0a0a15 0%, #000 70%);
}
.options-container {
  width: 90%;
  max-width: 860px;
  margin: 0 auto;
}
.options-title {
  font-family: var(--font-display);
  font-size: 24px;
  color: #aaaaff;
  text-shadow: 0 0 10px #6666ff;
  text-align: center;
  margin-bottom: 20px;
}

/* Tabbed layout: left nav + right panel */
.options-tabbed {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  min-height: 0;
}
.opt-tab-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 210px;
  flex-shrink: 0;
  padding-right: 12px;
  border-right: 2px solid #333366;
  align-self: stretch;
}
.opt-tab-icon {
  font-size: 20px;
  vertical-align: middle;
  margin-right: 6px;
  line-height: 1;
}
.opt-tab-btn {
  font-family: var(--font-display);
  font-size: 13px;
  padding: 18px 16px;
  background: rgba(20, 20, 40, 0.6);
  color: #888;
  border: 1px solid #333366;
  border-right: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  white-space: nowrap;
}
.opt-tab-btn:hover {
  background: rgba(40, 40, 70, 0.8);
  color: #aaaaff;
}
.opt-tab-btn.active {
  background: rgba(30, 30, 60, 0.95);
  color: #ffcc00;
  border-color: #555588;
  border-right: none;
  position: relative;
}
.opt-tab-btn.active::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 0; bottom: 0;
  width: 3px;
  background: #0a0a15;
}
.opt-tab-panels {
  flex: 1;
  min-width: 0;
  padding-left: 20px;
}
.opt-tab-panel {
  display: none;
}
.opt-tab-panel.active {
  display: block;
}

.opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}
.opt-row label {
  font-family: var(--font-ui);
  font-size: 9px;
  color: #aaa;
  min-width: 130px;
  flex-shrink: 0;
}
.opt-slider {
  flex: 1;
  min-width: 60px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #222;
  border-radius: 3px;
  outline: none;
}
.opt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: #ffcc00;
  border-radius: 50%;
  cursor: pointer;
}
.opt-val {
  font-family: var(--font-ui);
  font-size: 9px;
  color: #ffcc00;
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
}
.opt-toggle {
  font-family: var(--font-display);
  font-size: 9px;
  padding: 6px 16px;
  background: #331111;
  color: #ff4444;
  border: 1px solid #662222;
  cursor: pointer;
  min-width: 60px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.opt-toggle.active {
  background: #113311;
  color: #33ff33;
  border-color: #226622;
}
.opt-select {
  font-family: var(--font-ui);
  font-size: 9px;
  padding: 6px 10px;
  background: #1a1a2a;
  color: #aaaaff;
  border: 1px solid #333366;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}
.opt-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}
.opt-nav-actions .menu-btn {
  width: 100%;
  font-size: 9px;
  padding: 10px 8px;
  text-align: center;
}

/* ---- HOW TO PLAY SCREEN ---- */
#howto-screen {
  background: radial-gradient(ellipse at center, #0a0a15 0%, #000 70%);
}
.howto-container { width: 90%; max-width: 900px; margin: 0 auto; }
.howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
.howto-section {
  background: rgba(20, 20, 40, 0.8);
  border: 1px solid #333366;
  padding: 20px;
}
.howto-section h3 {
  font-family: var(--font-display);
  font-size: 11px;
  color: #ffcc00;
  margin-bottom: 12px;
}
.howto-section p {
  font-size: 14px;
  color: #aaa;
  line-height: 1.6;
}
.howto-row {
  font-family: var(--font-ui);
  font-size: 9px;
  color: #aaa;
  margin-bottom: 8px;
}
.howto-key {
  display: inline-block;
  min-width: 100px;
  color: #33ff33;
}
.howto-class {
  font-family: var(--font-ui);
  font-size: 9px;
  color: #aaa;
  margin-bottom: 8px;
  line-height: 1.6;
}

/* ---- CROSSHAIR ---- */
#game-screen.playing,
#game-screen.playing *:not(.menu-btn):not(.opt-btn) {
  cursor: none !important;
}
.crosshair {
  position: absolute;
  pointer-events: none;
  z-index: 50;
  display: none;
}
#crosshair-reticle {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  pointer-events: none;
  z-index: 100;
  display: none;
}
#crosshair-reticle::before, #crosshair-reticle::after {
  content: '';
  position: absolute;
  background: #fff;
  box-shadow: 0 0 0 1.5px #000, 0 0 4px rgba(0,0,0,0.6);
}
#crosshair-reticle::before {
  width: 2px; height: 24px;
  left: 11px; top: 0;
}
#crosshair-reticle::after {
  width: 24px; height: 2px;
  left: 0; top: 11px;
}
#pointer-lock-prompt {
  position: fixed;
  bottom: 80px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #ffcc00;
  font-family: monospace;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,204,0,0.3);
  z-index: 90;
  display: none;
  pointer-events: none;
  animation: promptPulse 2s ease-in-out infinite;
}
@keyframes promptPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
/* -- Crosshair: DOT -- */
.crosshair-dot {
  background: #fff;
  border-radius: 50%;
  border: 2px solid #000;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.crosshair-dot.crosshair-sz-small  { width: 6px;  height: 6px; }
.crosshair-dot.crosshair-sz-medium { width: 10px; height: 10px; }
.crosshair-dot.crosshair-sz-large  { width: 16px; height: 16px; }

/* -- Crosshair: CROSS -- */
.crosshair-cross {
  background: transparent;
  border: none;
}
.crosshair-cross::before, .crosshair-cross::after {
  content: '';
  position: absolute;
  background: #fff;
  box-shadow: 0 0 0 1.5px #000, 0 0 4px rgba(0,0,0,0.5);
}
.crosshair-cross.crosshair-sz-small  { width: 20px; height: 20px; }
.crosshair-cross.crosshair-sz-small::before  { width: 2px; height: 20px; left: 9px;  top: 0; }
.crosshair-cross.crosshair-sz-small::after   { width: 20px; height: 2px; left: 0;    top: 9px; }
.crosshair-cross.crosshair-sz-medium { width: 32px; height: 32px; }
.crosshair-cross.crosshair-sz-medium::before { width: 2px; height: 32px; left: 15px; top: 0; }
.crosshair-cross.crosshair-sz-medium::after  { width: 32px; height: 2px; left: 0;    top: 15px; }
.crosshair-cross.crosshair-sz-large  { width: 48px; height: 48px; }
.crosshair-cross.crosshair-sz-large::before  { width: 3px; height: 48px; left: 22.5px; top: 0; }
.crosshair-cross.crosshair-sz-large::after   { width: 48px; height: 3px; left: 0;      top: 22.5px; }

/* -- Crosshair: RING -- */
.crosshair-ring {
  border-style: solid;
  border-color: #fff;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1.5px #000, inset 0 0 0 1.5px #000, 0 0 4px rgba(0,0,0,0.5);
}
.crosshair-ring::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
  border: 1.5px solid #000;
}
.crosshair-ring.crosshair-sz-small  { width: 20px; height: 20px; border-width: 2px; }
.crosshair-ring.crosshair-sz-small::after  { width: 4px;  height: 4px;  left: 6px;  top: 6px; }
.crosshair-ring.crosshair-sz-medium { width: 32px; height: 32px; border-width: 2px; }
.crosshair-ring.crosshair-sz-medium::after { width: 6px;  height: 6px;  left: 11px; top: 11px; }
.crosshair-ring.crosshair-sz-large  { width: 48px; height: 48px; border-width: 3px; }
.crosshair-ring.crosshair-sz-large::after  { width: 8px;  height: 8px;  left: 17px; top: 17px; }

/* ---- DAMAGE VIGNETTE ---- */
.damage-vignette {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 0, 0, 0.6) 100%);
  transition: opacity 0.1s;
}
.low-health-vignette {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 29;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(180, 0, 0, 0.4) 100%);
  animation: lowHealthPulse 1.5s ease-in-out infinite;
}
@keyframes lowHealthPulse {
  0%, 100% { opacity: var(--lh-opacity, 0); }
  50% { opacity: calc(var(--lh-opacity, 0) * 1.5); }
}

/* ---- COOLDOWN INDICATORS ---- */
#hud-cooldowns {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 15;
}
.cd-item {
  width: 48px; height: 48px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #444;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-item span {
  font-family: var(--font-ui);
  font-size: 8px;
  color: #fff;
  z-index: 2;
  text-shadow: 0 0 4px #000;
}
.cd-fill {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 0%;
  background: rgba(255, 204, 0, 0.3);
  transition: height 0.1s;
}
.cd-item.ready { border-color: #33ff33; animation: cd-pulse 0.8s ease-in-out infinite; }
.cd-item.ready .cd-fill { background: rgba(51, 255, 51, 0.2); height: 100% !important; }
@keyframes cd-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(51, 255, 51, 0.3); }
  50% { box-shadow: 0 0 10px rgba(51, 255, 51, 0.7); }
}

/* ---- KILL FEED (in sidebar) ---- */
#hud-killfeed {
  flex-shrink: 0;
  max-height: 120px;
  overflow: hidden;
}
.kf-entry {
  font-family: var(--font-ui);
  font-size: 9px;
  padding: 4px 6px;
  margin-bottom: 2px;
  background: rgba(40, 10, 10, 0.6);
  border-left: 3px solid #ff4444;
  animation: msgFade 4s forwards;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pickup feed entries (green border instead of red) */
.kf-pickup {
  background: rgba(10, 30, 10, 0.6);
  border-left-color: #44ff44;
}

/* ---- FPS COUNTER ---- */
.hud-fps {
  position: absolute;
  top: 10px;
  right: 180px;
  font-family: var(--font-ui);
  font-size: 9px;
  color: #33ff33;
  background: rgba(0,0,0,0.6);
  padding: 4px 8px;
  display: none;
  z-index: 15;
}

/* ---- KILL FEED QUIP ---- */
.kf-quip {
  color: #aaa;
  font-style: italic;
  font-size: 8px;
}

/* ---- BIG ANNOUNCEMENT ---- */
.big-announcement {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 36px;
  color: #ff4444;
  text-shadow: 0 0 30px #ff4444, 0 0 60px #ff4444;
  z-index: 30;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 2px;
}
.big-announcement.hidden { display: none; }
@keyframes bigAnnouncePop {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  60% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
}

/* ---- STREAK ANNOUNCEMENT ---- */
.hud-streak {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 24px;
  color: #ffcc00;
  text-shadow: 0 0 20px #ff6600, 0 0 40px #ff3300;
  z-index: 25;
  pointer-events: none;
  animation: streakPop 0.5s ease-out;
}
.hud-streak.hidden { display: none; }
@keyframes streakPop {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ---- SCOREBOARD (Game Over) ---- */
.scoreboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  min-width: 750px;
  max-width: 900px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.sb-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: rgba(20, 15, 10, 0.9);
  border: 1px solid #444;
  gap: 12px;
}
.sb-row.winner {
  border-color: #ffcc00;
  background: rgba(40, 30, 10, 0.9);
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.2);
}
.sb-rank {
  font-family: var(--font-display);
  font-size: 16px;
  color: #ffcc00;
  min-width: 30px;
  text-align: center;
}
.sb-row.winner .sb-rank { color: #ffcc00; }
.sb-row:nth-child(2) .sb-rank { color: #cccccc; }
.sb-row:nth-child(3) .sb-rank { color: #cc8844; }
.sb-name {
  font-family: var(--font-ui);
  font-size: 11px;
  flex: 1;
}
.sb-class {
  font-family: var(--font-ui);
  font-size: 8px;
  color: #888;
  min-width: 70px;
}
.sb-stat {
  font-family: var(--font-ui);
  font-size: 9px;
  min-width: 50px;
  text-align: center;
}
.sb-stat-label {
  font-size: 7px;
  color: #666;
  display: block;
}
.sb-wins { color: #ffcc00; }
.sb-kills { color: #ff6666; }
.sb-deaths { color: #888; }
/* ---- GAME OVER STATS TABLE ---- */
.go-stats-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-family: var(--font-ui);
}
.go-stats-table thead th {
  font-size: 11px;
  color: #666;
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid #333;
}
.go-stats-table thead th:nth-child(2) { text-align: left; }
.go-stats-table tbody tr {
  border-bottom: 1px solid #222;
}
.go-stats-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.go-row-winner {
  background: rgba(255, 204, 0, 0.08) !important;
  border-left: 3px solid #ffcc00;
}
.go-cell-rank {
  font-size: 18px;
  text-align: center;
  padding: 10px 8px;
  min-width: 36px;
}
.go-cell-name {
  font-size: 15px;
  padding: 12px 10px;
  text-align: left;
  white-space: nowrap;
}
.go-cell-class {
  font-size: 9px;
  color: #666;
  margin-left: 6px;
}
.go-cell-val {
  font-size: 13px;
  color: #ccc;
  text-align: center;
  padding: 12px 10px;
}
.go-cell-wins { color: #ffcc00; font-size: 18px; }
.go-cell-kd { color: #aaa; }
.go-cell-heal { color: #33ff33; }

/* ---- GAME OVER AWARDS ---- */
.go-awards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
  padding-top: 8px;
  border-top: 1px solid #333;
}
.go-award {
  background: rgba(20, 15, 10, 0.9);
  border: 1px solid #443366;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
}
.go-award-icon { font-size: 18px; }
.go-award-label { font-size: 9px; color: #888; }
.go-award-name { font-size: 10px; }
.go-award-val { font-size: 9px; color: #aaa; }

.go-subtext {
  font-family: var(--font-ui);
  font-size: 16px;
  color: #888;
  margin-bottom: 24px;
}
.go-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ---- CURSOR HIDING (handled above in CROSSHAIR section) ---- */

/* ---- TITLE FIRE PARTICLES ---- */
.title-flames {
  position: relative;
  height: 40px;
  margin-top: 10px;
  overflow: visible;
}
.flame-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: flameRise 1.5s ease-out infinite;
  opacity: 0;
}
@keyframes flameRise {
  0% { transform: translateY(0) scale(1); opacity: 0.8; }
  100% { transform: translateY(-60px) scale(0); opacity: 0; }
}

/* ---- STAT BARS (class select) ---- */
.stat-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.stat-bar-label {
  font-family: var(--font-ui);
  font-size: 7px;
  color: #887799;
  min-width: 30px;
  text-align: right;
}
.stat-bar-track {
  flex: 1;
  height: 6px;
  background: #221133;
  border-radius: 3px;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

/* ---- ROUND TIMER ---- */
.hud-timer {
  font-family: var(--font-ui);
  font-size: 11px;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
}
.hud-timer.warning { color: #ff4444; animation: blink 0.5s infinite; }

/* ---- HUD KILL/DEATH COUNTER (in sidebar) ---- */
.hud-kd {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #ccc;
  flex-shrink: 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  padding: 4px 0;
}
.hud-kd .kd-kills { color: #44ff44; }
.hud-kd .kd-deaths { color: #ff4444; }

.hud-alive {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #aaffaa;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* ---- SCREEN DISTORTION ON BIG HITS ---- */
#screen-distort {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 24;
  opacity: 0;
}
#screen-distort.active {
  animation: distort-flash 0.2s ease-out forwards;
}
@keyframes distort-flash {
  0% { opacity: 1; backdrop-filter: blur(2px) saturate(2); }
  100% { opacity: 0; backdrop-filter: none; }
}

/* ---- HIT DIRECTION INDICATORS ---- */
#hit-indicators {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 25;
}
.hit-indicator {
  position: absolute;
  width: 30px; height: 5px;
  background: rgba(255, 50, 50, 0.7);
  border-radius: 3px;
  opacity: 0;
  animation: hit-fade 0.5s ease-out forwards;
  box-shadow: 0 0 6px rgba(255, 50, 50, 0.5);
  pointer-events: none;
}
@keyframes hit-fade {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ---- PAUSE MENU ---- */
.pause-title {
  font-family: var(--font-display);
  font-size: 42px;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(255,255,255,0.3);
  margin-bottom: 40px;
}
.pause-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* ---- ROUND TRANSITION ---- */
.rt-title {
  font-family: var(--font-display);
  font-size: 48px;
  color: #ffcc00;
  text-shadow: 0 0 20px rgba(255, 204, 0, 0.5);
  margin-bottom: 14px;
  animation: rtPop 0.5s ease-out;
}
.rt-subtitle {
  font-family: var(--font-ui);
  font-size: 20px;
  color: #aaa;
  margin-bottom: 24px;
}
.rt-scores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 600px;
  max-width: 900px;
  width: 90%;
}
/* Round transition stats table */
.rt-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
}
.rt-stats-table thead th {
  font-size: 10px;
  color: #666;
  padding: 6px 10px;
  text-align: center;
  border-bottom: 1px solid #333;
}
.rt-stats-table thead th:first-child { text-align: left; }
.rt-stats-table tbody tr {
  border-bottom: 1px solid #222;
}
.rt-row-winner {
  background: rgba(255, 204, 0, 0.08);
  border-left: 3px solid #ffcc00;
}
.rt-cell-name {
  font-size: 15px;
  padding: 12px;
  text-align: left;
  white-space: nowrap;
}
.rt-cell-val {
  font-size: 13px;
  color: #ccc;
  text-align: center;
  padding: 12px 10px;
}
.rt-cell-heal { color: #33ff33; }
.rt-cell-wins {
  font-size: 18px;
  color: #ffcc00;
  text-align: center;
  padding: 10px 8px;
  letter-spacing: 2px;
}
/* Round awards */
.rt-awards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding-top: 6px;
  border-top: 1px solid #333;
}
.rt-award {
  background: rgba(20, 15, 10, 0.9);
  border: 1px solid #443366;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
}
.rt-award-icon { font-size: 16px; }
.rt-award-label { font-size: 8px; color: #888; }
.rt-award-name { font-size: 9px; }
.rt-award-val { font-size: 8px; color: #aaa; }
.rt-countdown {
  font-family: var(--font-ui);
  font-size: 16px;
  color: #ffcc00;
  margin-top: 18px;
  letter-spacing: 1px;
  animation: rtCountdownPulse 1s ease-in-out infinite;
}
@keyframes rtCountdownPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes rtPop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---- ACTIVE POWERUP HUD ---- */
.hud-powerup {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid #ffcc00;
  border-radius: 8px;
  padding: 8px 16px;
  z-index: 15;
  animation: puSlideIn 0.3s ease-out;
  transition: opacity 0.4s ease;
}
.hud-powerup.hidden { display: none; }
.pu-icon {
  width: 32px; height: 32px;
  border-radius: 6px;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pu-info { display: flex; flex-direction: column; gap: 4px; }
.pu-name {
  font-family: var(--font-display);
  font-size: 9px;
  color: #ffcc00;
}
.pu-bar-track {
  width: 100px; height: 6px;
  background: #333;
  border-radius: 3px;
  overflow: hidden;
}
.pu-bar-fill {
  height: 100%;
  background: #ffcc00;
  border-radius: 3px;
  transition: width 0.1s linear;
}
@keyframes puSlideIn {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@media (max-height: 700px) {
  .hud-powerup { bottom: 60px; padding: 4px 10px; }
  .pu-icon { width: 22px; height: 22px; font-size: 16px; }
  .pu-name { font-size: 7px; }
  .pu-bar-track { width: 60px; height: 4px; }
  .hud-potion { bottom: 30px; padding: 4px 10px; }
  .potion-icon { font-size: 16px; }
  .potion-label { font-size: 7px; }
  .hud-relics { bottom: 4px; gap: 4px; }
  .relic-badge { padding: 3px 8px; font-size: 7px; gap: 3px; }
}

/* ---- SPECTATOR MODE HUD ---- */
.hud-spectate {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #888;
  border-radius: 6px;
  padding: 8px 20px;
  z-index: 20;
}
.hud-spectate.hidden { display: none; }
.spectate-label {
  font-family: var(--font-display);
  font-size: 7px;
  color: #888;
  letter-spacing: 2px;
}
.spectate-name {
  font-family: var(--font-ui);
  font-size: 12px;
  color: #ffcc00;
  margin: 4px 0;
}
.spectate-hint {
  font-family: var(--font-ui);
  font-size: 6px;
  color: #666;
}

/* ---- POTION INVENTORY HUD ---- */
.hud-potion {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 40, 60, 0.9);
  border: 2px solid #00ccff;
  border-radius: 8px;
  padding: 8px 18px;
  z-index: 15;
  animation: potionPulse 1.5s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
.hud-potion.hidden { display: none; }
.potion-icon { font-size: 24px; color: #00ccff; /* ic-fill/ic-stroke draw in currentColor */ }
.potion-label {
  font-family: var(--font-display);
  font-size: 10px;
  color: #00ccff;
}
.potion-key {
  color: #88ddff;
  font-size: 9px;
}
@keyframes potionPulse {
  0%, 100% { border-color: #00ccff; box-shadow: 0 0 6px rgba(0,204,255,0.3); }
  50% { border-color: #66eeff; box-shadow: 0 0 14px rgba(0,204,255,0.6); }
}

/* ---- RELICS HUD ---- */
.hud-relics {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 15;
  transition: opacity 0.4s ease;
}
.hud-relics.hidden { display: none; }
.relic-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 9px;
  border: 2px solid;
  animation: relicGlow 2s ease-in-out infinite;
}
.relic-badge.relic_damage    { background: rgba(80,20,20,0.85); border-color: #ff6666; color: #ff6666; }
.relic-badge.relic_defense   { background: rgba(20,30,80,0.85); border-color: #66aaff; color: #66aaff; }
.relic-badge.relic_swiftness { background: rgba(20,60,20,0.85); border-color: #66ff66; color: #66ff66; }
.relic-badge.relic_vitality  { background: rgba(60,20,60,0.85); border-color: #ff66ff; color: #ff66ff; }
.relic-badge.relic_force     { background: rgba(60,40,10,0.85); border-color: #ffaa44; color: #ffaa44; }
.relic-badge.relic_magnetism { background: rgba(50,20,80,0.85); border-color: #9966ff; color: #9966ff; }
.relic-badge.relic_thorns    { background: rgba(20,50,20,0.85); border-color: #66cc66; color: #66cc66; }
.relic-badge.relic_phase     { background: rgba(30,50,70,0.85); border-color: #88ccff; color: #88ccff; }
.relic-badge.relic_precision { background: rgba(60,55,10,0.85); border-color: #ffdd44; color: #ffdd44; }
.relic-badge.relic_lifesteal { background: rgba(70,10,25,0.85); border-color: #dd3366; color: #dd3366; }
.relic-icon { font-size: 18px; }
@keyframes relicGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(255,255,255,0.1); }
  50% { box-shadow: 0 0 10px rgba(255,255,255,0.3); }
}

/* ---- KILLCAM OVERLAY ---- */
.killcam-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 150;
  pointer-events: none;
}
.killcam-overlay.hidden { display: none; }
.killcam-header {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}
.killcam-label {
  font-family: var(--font-display);
  font-size: 14px;
  color: #ff4444;
  text-shadow: 0 0 10px rgba(255,68,68,0.6);
  letter-spacing: 4px;
  animation: killcamPulse 0.6s ease-in-out infinite alternate;
}
@keyframes killcamPulse {
  from { opacity: 0.7; text-shadow: 0 0 6px rgba(255,68,68,0.4); }
  to { opacity: 1; text-shadow: 0 0 16px rgba(255,68,68,0.8); }
}
.killcam-progress-bar {
  height: 3px;
  background: rgba(255,255,255,0.1);
  margin: 0 40px;
}
.killcam-progress-fill {
  height: 100%;
  background: #ff4444;
  width: 0%;
  transition: width 0.05s linear;
}

/* ---- ACHIEVEMENT POPUPS ---- */
.achievement-popups {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.achievement-popup {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 10, 5, 0.95);
  border: 2px solid #ffcc00;
  border-radius: 8px;
  padding: 10px 16px;
  animation: achSlideIn 0.4s ease-out;
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.4);
  min-width: 220px;
}
.achievement-popup.ach-fade-out {
  animation: achFadeOut 0.5s ease-in forwards;
}
.ach-icon {
  font-size: 24px;
  line-height: 1;
}
.ach-info { flex: 1; }
.ach-name {
  font-family: var(--font-display);
  font-size: 9px;
  color: #ffcc00;
  margin-bottom: 3px;
}
.ach-desc {
  font-family: var(--font-ui);
  font-size: 6px;
  color: #aaa;
}
@keyframes achSlideIn {
  from { transform: translateX(100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes achFadeOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100px); opacity: 0; }
}

/* ---- HOST MIGRATION OVERLAY ---- */
.host-migration-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}
.host-migration-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.hmo-content {
  text-align: center;
}
.hmo-spinner {
  width: 48px; height: 48px;
  margin: 0 auto 20px;
  border: 4px solid rgba(255, 102, 0, 0.2);
  border-top: 4px solid #ff6600;
  border-radius: 50%;
  animation: hmoSpin 0.8s linear infinite;
}
.hmo-title {
  font-family: var(--font-display);
  font-size: 24px;
  color: #ff4444;
  text-shadow: 0 0 20px #ff2200, 0 0 40px #ff0000;
  margin-bottom: 12px;
  animation: hmoPulse 1.5s ease-in-out infinite;
}
.hmo-subtitle {
  font-family: var(--font-ui);
  font-size: 12px;
  color: #ffcc00;
  text-shadow: 0 0 10px #ff9900;
}
@keyframes hmoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes hmoPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* ============================================
   RESPONSIVE — OPTIONS SCREEN
   ============================================ */

/* Allow options/howto screens to scroll on short viewports */
#options-screen.active,
#howto-screen.active {
  align-items: flex-start;
  padding: 20px 0;
}

/* Narrow screens: stack tab nav on top */
@media (max-width: 600px) {
  .options-title { font-size: 18px; margin-bottom: 12px; }
  .options-container { width: 98%; }
  .options-tabbed { flex-direction: column; gap: 10px; }
  .opt-tab-nav {
    flex-direction: row;
    min-width: 0;
    padding-right: 0;
    padding-bottom: 8px;
    border-right: none;
    border-bottom: 2px solid #333366;
    gap: 6px;
  }
  .opt-tab-btn {
    flex: 1;
    text-align: center;
    border: 1px solid #333366;
    border-bottom: none;
    font-size: 8px;
    padding: 10px 6px;
  }
  .opt-tab-btn.active::after { display: none; }
  .opt-tab-panels { padding-left: 0; padding-top: 10px; }
  .opt-row label { min-width: 90px; font-size: 8px; }
  .opt-row { gap: 6px; margin-bottom: 8px; }
  .options-actions { flex-direction: column; align-items: center; gap: 8px; }
  .options-actions .menu-btn { width: 100%; max-width: 320px; }
}

/* ============================================
   RESPONSIVE — HOW TO PLAY / INSTRUCTIONS
   ============================================ */
@media (max-width: 700px) {
  .howto-container { width: 98%; }
  .instr-panel { width: 98%; }

  /* Hub: 2-col, icon switches to left of label (row layout) */
  .instr-hub-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }
  .instr-cat-btn {
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 6px;
  }
  .icb-icon { font-size: 22px; flex-shrink: 0; }
  .icb-label { font-size: 9px; text-align: left; }

  /* Detail title */
  .instr-detail-title { font-size: 16px; margin-bottom: 12px; }
  .instr-detail-note { font-size: 9px; }

  /* Item cards */
  .icard { gap: 10px; padding: 10px 12px; }
  .icard-name { font-size: 10px; }
  .icard-desc { font-size: 8px; }
  .icard-visual { font-size: 7px; }

  /* Controls key rows */
  .icard-key { min-width: 110px; font-size: 8px; margin-right: 8px; }
  .icard-key-desc { font-size: 8px; }

  /* Tips */
  .icard-tip { font-size: 9px; padding: 8px 10px; }

  /* Detail body height */
  .instr-detail-body { max-height: 55vh; }
}

@media (max-width: 480px) {
  /* Hub: tighter row layout, 2-col */
  .instr-hub-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .instr-cat-btn {
    flex-direction: row;
    justify-content: flex-start;
    padding: 8px 8px;
    gap: 7px;
  }
  .icb-icon { font-size: 18px; }
  .icb-label { font-size: 8px; }

  /* Detail title */
  .instr-detail-title { font-size: 13px; }

  /* Item cards */
  .icard { gap: 8px; padding: 8px 10px; }
  .icard-icon { min-width: 32px; height: 32px; font-size: 20px; }
  .icard-tile-canvas { width: 32px; height: 32px; }
  .icard-name { font-size: 9px; }
  .icard-desc { font-size: 7px; line-height: 1.7; }
  .icard-visual { font-size: 6px; }

  /* Controls key rows */
  .icard-key-row { flex-wrap: wrap; gap: 4px; }
  .icard-key { min-width: 0; width: 100%; margin-right: 0; font-size: 7px; text-align: left; }
  .icard-key-desc { font-size: 7px; padding-left: 4px; }

  /* Tips */
  .icard-tip { font-size: 8px; }

  /* Detail body */
  .instr-detail-body { max-height: 52vh; }
}

@media (max-width: 360px) {
  /* Very small: single column hub */
  .instr-hub-grid {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .instr-cat-btn { padding: 7px 10px; gap: 8px; }
  .icb-icon { font-size: 16px; }
  .icb-label { font-size: 8px; }
}

/* ============================================
   RESPONSIVE — SHORT VIEWPORTS (height-based)
   ============================================ */

/* Options screen: shrink on short screens */
@media (max-height: 900px) {
  .options-title { font-size: 20px; margin-bottom: 12px; }
  .options-tabbed { margin-bottom: 14px; }
  .opt-row { margin-bottom: 8px; }
  .opt-tab-btn { padding: 11px 12px; }
  #options-screen.active { padding: 12px 0; }
}
@media (max-height: 700px) {
  .options-title { font-size: 16px; margin-bottom: 8px; }
  .options-tabbed { margin-bottom: 10px; }
  .opt-row { margin-bottom: 6px; }
  .opt-row label { font-size: 8px; min-width: 110px; }
  .opt-tab-btn { padding: 9px 10px; font-size: 8px; }
  #options-screen.active { padding: 8px 0; }
}
@media (max-height: 550px) {
  .options-title { font-size: 13px; margin-bottom: 6px; }
  .options-tabbed { margin-bottom: 8px; }
  .opt-row { margin-bottom: 4px; }
  .opt-row label { font-size: 7px; min-width: 100px; }
  .opt-tab-btn { padding: 7px 8px; font-size: 7px; }
  #options-screen.active { padding: 6px 0; }
}

/* How To Play hub: shrink on short screens */
@media (max-height: 900px) {
  .instr-hub-grid { gap: 10px; margin-bottom: 18px; }
  .instr-cat-btn { padding: 14px 8px; gap: 8px; }
  .icb-icon { font-size: 26px; }
  .icb-label { font-size: 10px; }
  .instr-detail-title { font-size: 18px; margin-bottom: 10px; }
  .instr-detail-body { max-height: 62vh; }
  #howto-screen.active { padding: 12px 0; }
}
@media (max-height: 700px) {
  /* Switch to row layout (icon left) even on wide screens */
  .instr-hub-grid { gap: 8px; margin-bottom: 12px; }
  .instr-cat-btn {
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 12px;
    gap: 10px;
  }
  .icb-icon { font-size: 20px; flex-shrink: 0; }
  .icb-label { font-size: 9px; text-align: left; }
  .instr-detail-title { font-size: 15px; margin-bottom: 8px; }
  .instr-detail-body { max-height: 60vh; }
  #howto-screen.active { padding: 8px 0; }
}
@media (max-height: 550px) {
  .instr-hub-grid { gap: 5px; margin-bottom: 8px; }
  .instr-cat-btn { padding: 7px 10px; gap: 8px; }
  .icb-icon { font-size: 16px; }
  .icb-label { font-size: 8px; }
  .instr-detail-title { font-size: 13px; margin-bottom: 6px; }
  .instr-detail-body { max-height: 58vh; }
  .instr-detail-note { font-size: 8px; margin-bottom: 8px; }
}

/* ---- Now Playing toast ----
   Bottom-left so it never overlaps the HUD sidebar or the centre announcement
   band. Pointer-events off: it is a notification, never a target. */
#now-playing {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 900;
  max-width: 42vw;
  padding: 9px 16px;
  border: 1px solid rgba(255, 170, 60, 0.45);
  border-left: 3px solid #ffaa3c;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(28, 14, 8, 0.92), rgba(18, 10, 20, 0.82));
  color: #ffcf8a;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1);
  pointer-events: none;
}
#now-playing.show {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Player identity sigil ----
   Shape-based player ID that pairs with colour. Baseline-aligned so it sits
   with the name rather than on it. */
.player-sigil {
  display: inline-block;
  vertical-align: -1px;
  margin-right: 5px;
  image-rendering: auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}

/* ---- UI icons ----
   Inline SVG rather than an icon font: three icons do not justify a webfont,
   and inheriting currentColor means they follow tab hover/active state for
   free. Emoji were standing in here, and emoji in chrome is the single
   loudest "unfinished" signal in a game UI — they render differently on every
   platform and cannot be styled. */
svg.opt-tab-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  margin-right: 0.55em;
  flex-shrink: 0;
  overflow: visible;
}
/* Explicit roles per path rather than positional selectors — guessing which
   path is a stroke with :last-child breaks the moment an icon gains a shape. */
svg.opt-tab-icon .ic-fill {
  fill: currentColor;
  stroke: none;
}
svg.opt-tab-icon .ic-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---- Type scale correction ----
   Sizes throughout were tuned for 'Press Start 2P', whose glyphs occupy far
   more width and apparent weight per px. Inter at the same sizes reads too
   quiet, so the small UI text gets a modest bump and a little tracking. */
.opt-row label,
.settings-row label,
.mutator-label,
.howto-row,
.ch-row,
.icard-desc,
.ach-desc {
  font-size: 12px;
  letter-spacing: 0.015em;
}
.opt-select,
.setting-select,
.opt-val,
.opt-toggle,
.mutator-value,
.mutator-display-value {
  font-size: 11px;
  letter-spacing: 0.03em;
}
.hpc-name,
.rw-name,
.sb-name,
.room-player {
  font-size: 12px;
  font-weight: 600;
}


/* Class card icons */
svg.cls-icon {
  width: 34px;
  height: 34px;
  display: block;
  margin: 0 auto;
}
svg.cls-icon .ic-fill { fill: currentColor; stroke: none; }
svg.cls-icon .ic-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================
   Menu background + motion
   ============================================ */

/* Live crypt scene behind the menu screens. Sits under everything, never
   takes pointer events, and fades rather than popping when it starts. */
#menu-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
#menu-canvas.visible { opacity: 1; }

/* Menu screens now sit over live 3D, so they need their own scrim to keep text
   contrast. Radial rather than flat so the centre of the corridor still reads
   through, and the vignette does double duty framing the menu. */
/* Content-heavy screens need a firmer scrim than the title, which is mostly
   empty and can afford to let the corridor read. Tuned by screenshot: the
   first pass sat at 0.86-0.96 alpha and crushed the scene to black, which
   defeats the point of rendering it. */
#lobby-screen,
#room-screen,
#options-screen,
#howto-screen {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(10, 5, 16, 0.62) 0%, rgba(4, 2, 8, 0.80) 55%, rgba(2, 1, 5, 0.90) 100%);
  backdrop-filter: blur(2.5px);
}
/* The title screen is the shop window: lightest scrim, ember wash on top. */
#title-screen {
  background:
    radial-gradient(ellipse at center, rgba(26, 10, 0, 0.20) 0%, rgba(6, 3, 10, 0.52) 55%, rgba(2, 1, 5, 0.78) 100%);
}

/* ---- Staggered entrance ----
   Children of an entering screen rise and fade in sequence. A menu that simply
   appears reads as a document; one that assembles reads as a product. Depth is
   limited to the first few children so long lists (lobby rows, settings) do not
   cascade for seconds. */
@keyframes screenRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes screenFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.screen.screen-enter { animation: screenFadeIn 260ms ease both; }

.screen.screen-enter > * > *,
.screen.screen-enter > * {
  animation: screenRise 420ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.screen.screen-enter > * > *:nth-child(1) { animation-delay: 40ms; }
.screen.screen-enter > * > *:nth-child(2) { animation-delay: 90ms; }
.screen.screen-enter > * > *:nth-child(3) { animation-delay: 140ms; }
.screen.screen-enter > * > *:nth-child(4) { animation-delay: 185ms; }
.screen.screen-enter > * > *:nth-child(5) { animation-delay: 225ms; }
.screen.screen-enter > * > *:nth-child(n+6) { animation-delay: 260ms; }

/* ---- Button feel ----
   Menu buttons get a press response and a sweep highlight on hover. Buttons
   that visibly react are most of what separates a menu that feels built from
   one that feels wired up. */
.menu-btn {
  position: relative;
  overflow: hidden;
  transition: transform 120ms cubic-bezier(0.2, 0.9, 0.3, 1),
              box-shadow 180ms ease,
              border-color 180ms ease;
}
.menu-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 214, 150, 0.22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 620ms cubic-bezier(0.3, 0.8, 0.3, 1);
  pointer-events: none;
}
.menu-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 106, 31, 0.22);
}
.menu-btn:hover::after { transform: translateX(120%); }
.menu-btn:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* ---- Reduced motion ----
   Respect the OS preference: the scene stops drifting and entrances become
   instant. Vestibular triggers are not a style choice. */
@media (prefers-reduced-motion: reduce) {
  .screen.screen-enter,
  .screen.screen-enter > *,
  .screen.screen-enter > * > * {
    animation: none !important;
  }
  .menu-btn,
  .menu-btn::after { transition: none !important; }
  #menu-canvas { transition: none; }
}

/* How-to category button icons */
svg.icb-icon {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto 6px;
}
svg.icb-icon .ic-fill { fill: currentColor; stroke: none; }
svg.icb-icon .ic-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---- HUD card states ---- */

/* Critical health, local player only. A warning, not decoration — so it is
   restricted to the card that can actually act on it. */
@keyframes hpcCritical {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 40, 40, 0.35), 0 0 10px rgba(255, 30, 30, 0.18); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 70, 70, 0.85), 0 0 22px rgba(255, 40, 40, 0.55); }
}
.hud-player-card.critical {
  animation: hpcCritical 780ms ease-in-out infinite;
}
.hud-player-card.critical .hpc-health-fill {
  background: linear-gradient(90deg, #ff1a1a, #ff7a5a);
}

/* Elimination: the card recedes rather than vanishing, so the roster stays
   readable but dead players stop competing for attention. */
.hud-player-card {
  transition: opacity 320ms ease, filter 320ms ease, transform 320ms ease;
}
.hud-player-card.dead {
  opacity: 0.42;
  filter: saturate(0.25);
  transform: scale(0.985);
}
.hpc-status {
  color: #ff6666;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---- Kill feed motion ----
   Entries slide in from the right and fade out on a delay matched to the 4.5s
   removal timer in ui.js. A feed that pops in and disappears reads as a debug
   log; one that moves reads as part of the game. */
@keyframes kfIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes kfOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(14px); }
}
.kf-entry {
  animation:
    kfIn 260ms cubic-bezier(0.22, 0.9, 0.3, 1) both,
    kfOut 600ms ease 3.9s both;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .hud-player-card.critical { animation: none; box-shadow: 0 0 0 1px rgba(255, 70, 70, 0.8); }
  .hpc-health-chip { transition: none; }
  .kf-entry { animation: kfIn 1ms both, kfOut 300ms ease 4.1s both; }
}

/* ============================================
   Scoreboard reveal
   ============================================ */

/* Rows and award cards arrive in sequence rather than all at once. `--i` is
   set in JS (UIScreens.revealScoreboard) so the delay stays in CSS, and the
   awards continue the row sequence so the screen reads as one beat. */
@keyframes sbRowIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sbAwardIn {
  0%   { opacity: 0; transform: scale(1.18); }
  60%  { opacity: 1; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

.sb-revealing tbody tr {
  animation: sbRowIn 380ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}
.sb-revealing .go-award,
.sb-revealing .rt-award {
  animation: sbAwardIn 420ms cubic-bezier(0.3, 1.2, 0.4, 1) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}

/* Winner row: gilded, and the only row that gets a glow. */
.go-row-winner,
.rt-row-winner {
  background: linear-gradient(90deg, rgba(255, 194, 71, 0.16), rgba(255, 194, 71, 0.02));
  box-shadow: inset 2px 0 0 #ffc247;
}
.go-row-winner td,
.rt-row-winner td { color: #ffe4a8; }

/* Rank column. Replaces the medal emoji with a typographic treatment the
   stylesheet actually controls — emoji medals render differently on every
   platform and could not be sized or coloured with the rest of the table. */
.go-cell-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  width: 2.2em;
  color: var(--boneDim, #9c8fa4);
}
.go-cell-rank[data-rank="1"] {
  color: #ffc247;
  text-shadow: 0 0 12px rgba(255, 194, 71, 0.55);
  font-size: 19px;
}
.go-cell-rank[data-rank="2"] { color: #cfd6e0; }
.go-cell-rank[data-rank="3"] { color: #d9a273; }

/* Counting numbers must not reflow the table as digits are added. */
.go-cell-val, .rt-cell-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

@media (prefers-reduced-motion: reduce) {
  .sb-revealing tbody tr,
  .sb-revealing .go-award,
  .sb-revealing .rt-award { animation: none !important; }
}

/* ---- Named UI icons (Icons.svg) ---- */
svg.ui-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  flex-shrink: 0;
}
svg.ui-icon .ic-fill { fill: currentColor; stroke: none; }
svg.ui-icon .ic-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.go-award-icon, .rt-award-icon {
  display: inline-flex;
  align-items: center;
  color: #ffc247;
}

/* ---- Relic badges (overlay HUD) ----
   Colour comes from ItemData via a custom property, so the badge tint and the
   pickup mesh colour are the same value from the same row. */
.relic-badge {
  border-color: var(--relic-color, #ffc247);
  color: var(--relic-color, #ffc247);
}
.relic-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}
.relic-icon svg.ui-icon,
.hpc-relic-slot svg.ui-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
}
.hpc-item svg.ui-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 2px;
}

/* Stat row: glyph is static, only the number changes each frame. */
.hpc-wins, .hpc-kills, .hpc-deaths {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.hpc-wins svg.ui-icon, .hpc-kills svg.ui-icon, .hpc-deaths svg.ui-icon {
  width: 0.95em;
  height: 0.95em;
}
.hpc-wins b, .hpc-kills b, .hpc-deaths b { font-weight: 600; }