/* =========================================
   Design Tokens
   ========================================= */

:root {
  --bg-body: #312e2b;
  --bg-surface: #272522;
  --bg-sunken: #1a1816;
  --bg-hover: #2d2a27;
  --bg-elevated: #3d3a37;
  --border: #4a4744;
  --border-hover: #6a6764;
  --text-primary: #e0e0e0;
  --text-secondary: #999;
  --text-muted: #666;
  --text-dim: #555;
  --text-faint: #444;
  --accent: #4a9e5c;
  --accent-hover: #3d8a4e;
  --accent-soft: #7ec894;
  --board-light: #f0d9b5;
  --board-dark: #b58863;
  --danger: #ff6b6b;
  --danger-deep: #ff4444;
  --danger-bg: #8a3d3d;
  --warning: #ffd700;
  --warning-dark: #e6c200;
  --info: #64b5f6;
  --playing: #c4a03a;
  --playing-hover: #b0902e;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --font-mono: 'Courier New', Courier, monospace;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
}

body {
  background: var(--bg-body);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px;
  width: 100%;
}

/* When settings are open, allow scrolling past the board on mobile */
.app.settings-open .board {
  touch-action: pan-y;
}

/* =========================================
   Header Bar (merged status + controls)
   ========================================= */

.header-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(90vw, 75vh, 800px);
  padding: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.header-center {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Game type label */
.game-type-label {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.02em;
}

.pre-game .game-type-label {
  cursor: pointer;
}

.pre-game .game-type-label:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* Status bar */
.status {
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  height: 34px;
  line-height: 34px;
  padding: 0 14px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status.in-check {
  color: var(--danger);
}

.status.game-over {
  color: var(--warning);
}

.status.ai-thinking {
  color: var(--info);
}

.status.new-game-info {
  color: #aaa;
  font-size: 0.85rem;
}

/* Header icon buttons */
.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
  flex-shrink: 0;
}

.header-icon-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.header-icon-btn.active {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.header-icon-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Settings gear rotation */
.settings-btn.active svg {
  transform: rotate(60deg);
}

.settings-btn svg,
.history-btn svg {
  transition: transform 0.3s ease;
}

/* New Game button in header */
#new-game {
  height: 34px;
  line-height: 32px;
  padding: 0 10px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(100, 181, 246, 0.1); /* light --info tint */
  color: var(--info);
  border: 1.5px solid var(--info);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

#new-game:hover {
  background: var(--info);
  color: #fff;
}

#new-game.game-ended {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

#new-game.game-ended:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Start game button in header */
.start-game-btn {
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s;
  white-space: nowrap;
}

.start-game-btn:hover {
  background: var(--accent-hover);
}

.start-game-btn.hidden {
  display: none;
}

/* =========================================
   Board
   ========================================= */

.board-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

#main-eval-bar {
  display: flex;
  align-items: stretch;
}

.board {
  display: grid;
  grid-template: repeat(8, 1fr) / repeat(8, 1fr);
  width: min(90vw, 75vh, 800px);
  height: min(90vw, 75vh, 800px);
  border: 3px solid var(--bg-sunken);
  border-radius: 2px;
  touch-action: none;
  user-select: none;
  flex-shrink: 0;
  position: relative;
}

/* Arrow overlay */
.arrow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

/* Squares */
.square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.square.light {
  background-color: var(--board-light);
}

.square.dark {
  background-color: var(--board-dark);
}

/* Square state highlights */
.square.selected {
  background-color: #f7ec5a !important;
}

.square.last-move {
  background-color: rgba(255, 255, 0, 0.35);
}

.square.light.last-move {
  background-color: #f7f18d;
}

.square.dark.last-move {
  background-color: #cbc34d;
}

.square.check {
  background: radial-gradient(ellipse at center, #ff0000 0%, #e70000 25%, rgba(169, 0, 0, 0) 89%);
}

/* Premove highlights */
.square.light.premove-from,
.square.light.premove-to {
  background-color: #b3b8e8 !important;
}
.square.dark.premove-from,
.square.dark.premove-to {
  background-color: #7a80c0 !important;
}

/* Legal move dots */
.square.legal-move::after {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  pointer-events: none;
}

/* Legal capture ring */
.square.legal-capture::after {
  content: '';
  position: absolute;
  width: 90%;
  height: 90%;
  border: 5px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  pointer-events: none;
}

/* Pieces */
.piece {
  width: 90%;
  height: 90%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

.piece.ghost {
  opacity: 0.3;
}

/* Dragging piece (appended to body) */
.piece-dragging {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* Coordinate labels */
.coord {
  position: absolute;
  font-size: 0.65em;
  font-weight: 700;
  pointer-events: none;
  z-index: 2;
}

.coord-rank {
  top: 2px;
  left: 3px;
}

.coord-file {
  bottom: 2px;
  right: 3px;
}

.square.light .coord { color: var(--board-dark); }
.square.dark .coord { color: var(--board-light); }

/* =========================================
   Promotion Modal
   ========================================= */

.promotion-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.promotion-modal.hidden {
  display: none;
}

.promotion-choices {
  display: flex;
  gap: 8px;
  background: var(--bg-surface);
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.promotion-piece {
  width: 72px;
  height: 72px;
  background: var(--board-light);
  border: 2px solid var(--board-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: background-color 0.15s;
}

.promotion-piece:hover {
  background: var(--warning);
  border-color: var(--warning-dark);
}

.promotion-piece img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* =========================================
   Player Bars
   ========================================= */

.player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(90vw, 75vh, 800px);
  min-height: 30px;
  padding: 3px 6px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
}

.captured-pieces {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1px;
  min-height: 22px;
}

.captured-piece {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.9;
}

.material-advantage {
  color: #aaa;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 4px;
}

/* Timer group (icon + timer) */
.timer-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Player type icon */
.player-icon {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.8;
  user-select: none;
}

/* Player name + elo labels */
.player-name {
  color: #ccc;
  font-size: 0.75rem;
  font-weight: 600;
  user-select: none;
  cursor: pointer;
}

.player-name:hover {
  color: var(--text-primary);
}

.player-name-input {
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 1px solid var(--accent);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 4px;
  width: 70px;
  font-family: inherit;
  outline: none;
}

.engine-switch-select {
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 1px solid var(--accent);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 4px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

.engine-switch-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

.player-elo {
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-family: var(--font-mono);
  cursor: default;
  user-select: none;
}

.player-elo.hidden { display: none; }

/* Pre-game interactive states */
.pre-game .player-icon {
  cursor: pointer;
  transition: transform 0.15s;
}

.pre-game .player-icon:hover {
  transform: scale(1.2);
}

.pre-game .timer {
  cursor: pointer;
}

.pre-game .timer:hover {
  background: #2a2725;
  outline: 1px solid var(--border);
}

.pre-game .player-elo:not(.hidden) {
  cursor: pointer;
}

.pre-game .player-elo:not(.hidden):hover {
  color: var(--text-primary);
}

/* Timer dropdown popup */
.timer-dropdown {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 500;
  padding: 4px 0;
  min-width: 140px;
}

.timer-dropdown-option {
  padding: 8px 14px;
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.timer-dropdown-option:hover {
  background: var(--bg-elevated);
}

.timer-dropdown-option.selected {
  color: var(--accent);
  font-weight: 600;
}

/* ELO popup */
.elo-popup {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 500;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.elo-popup .elo-slider {
  width: 120px;
}

.elo-popup .elo-value {
  min-width: 36px;
}

/* Timers */
.timer {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-sunken);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  min-width: 65px;
  text-align: center;
}

.timer.timer-active {
  color: #fff;
  background: var(--accent-hover);
}

.timer.timer-low {
  color: var(--danger-deep);
}

.timer.timer-active.timer-low {
  background: var(--danger-bg);
  color: var(--danger);
}

/* =========================================
   Settings Bottom Sheet
   ========================================= */

.settings-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.settings-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.settings-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 910;
  background: var(--bg-surface);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 80vh;
  max-height: 80dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px 20px;
}

.settings-panel.open {
  transform: translateY(0);
}

.settings-handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
  cursor: grab;
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 1;
}

.settings-handle::before {
  content: '';
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}

.settings-section {
  margin-bottom: 16px;
}

.settings-section-title {
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.control-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.control-checkbox:hover {
  border-color: var(--border);
  background: var(--bg-hover);
}

.control-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
  accent-color: var(--accent);
}

.control-checkbox span {
  font-weight: 600;
  white-space: nowrap;
}

/* Art style picker */
.art-style-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  padding: 4px;
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
}

.art-style-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 3px;
  background: var(--bg-body);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.art-style-option:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.art-style-option.selected {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.art-style-option img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.settings-panel select {
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  appearance: auto;
  transition: border-color 0.15s;
}

.settings-panel select:hover {
  border-color: var(--border);
}

/* AI per-side controls */
.ai-per-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ai-side-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.engine-select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  font-size: 0.8rem;
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  overflow: hidden;
  max-height: 36px;
  opacity: 1;
  appearance: auto;
}

.engine-select.hidden {
  max-height: 0;
  opacity: 0;
  padding: 0 6px;
  border: 0;
  pointer-events: none;
}

.engine-select:focus {
  outline: none;
  border-color: var(--accent);
}

.engine-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

.ai-elo-wrapper {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-body);
  border-radius: var(--radius-sm);
  transition: max-height 0.3s ease, opacity 0.2s ease;
  overflow: hidden;
  max-height: 40px;
  opacity: 1;
}

.ai-elo-wrapper.hidden {
  max-height: 0;
  opacity: 0;
  padding: 0 8px;
  pointer-events: none;
}

.elo-slider {
  width: 120px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.elo-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--accent-hover);
}

.elo-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--accent-hover);
}

.elo-value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 32px;
  text-align: right;
}

/* Settings footer info */
.settings-footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 12px 0 4px;
  margin-top: auto;
  border-top: 1px solid var(--border);
}

.settings-footer a {
  color: var(--text-muted);
  font-size: 0.7rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.settings-footer a:hover {
  color: var(--text-secondary);
  border-bottom-color: var(--border);
}

.settings-footer .version {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-family: var(--font-mono);
}

/* Archive menu (now in settings) */
.archive-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.archive-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0 0 1px;
  font-family: inherit;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.archive-btn:hover {
  color: var(--text-secondary);
  border-bottom-color: var(--border);
}

.archive-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 0;
  margin-bottom: 8px;
  min-width: 120px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  z-index: 920;
}

.archive-menu.hidden {
  display: none;
}

.archive-menu a {
  display: block;
  padding: 6px 14px;
  color: var(--text-primary);
  font-size: 0.8rem;
  text-decoration: none;
  white-space: nowrap;
}

.archive-menu a:hover {
  background: var(--bg-elevated);
  color: #fff;
}

/* Dev indicator */
.dev-indicator {
  background: #ff0000;
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  animation: pulse 1.5s ease-in-out infinite;
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 9999;
}

.dev-indicator.hidden {
  display: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* =========================================
   Modals
   ========================================= */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--bg-surface);
  padding: 24px;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--text-primary);
  min-width: 240px;
}

.modal-content h3 {
  margin: 0;
  font-size: 1.1rem;
}

.modal-content label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.toggle-label {
  justify-content: flex-start !important;
  gap: 8px !important;
  cursor: pointer;
}

.toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

#odds-time-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#odds-time-fields.hidden,
#same-time-fields.hidden {
  display: none;
}

.modal-content input[type="number"] {
  width: 60px;
  padding: 4px 8px;
  font-size: 0.95rem;
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}

.modal-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.modal-buttons button {
  padding: 6px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

#custom-time-ok,
#confirm-modal-ok {
  background: var(--accent);
  color: white;
}

#custom-time-ok:hover,
#confirm-modal-ok:hover {
  background: var(--accent-hover);
}

#custom-time-cancel,
#confirm-modal-cancel {
  background: var(--border);
  color: #ccc;
}

#custom-time-cancel:hover,
#confirm-modal-cancel:hover {
  background: #5a5754;
}

.confirm-modal-message {
  color: #ccc;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
}

/* =========================================
   Piece Animations
   ========================================= */

.piece.animating {
  position: absolute !important;
  z-index: 100;
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform;
}

.piece.capturing {
  animation: captureAnimation 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes captureAnimation {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(0.7) translateY(-20px); opacity: 0; }
}

.captured-piece.animating-in {
  animation: slideInCaptured 0.3s ease-out;
}

@keyframes slideInCaptured {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 0.9; }
}

/* =========================================
   Combat Animations
   ========================================= */

.combat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.combat-overlay.hidden {
  display: none;
}

.combat-scene {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.combat-attacker, .combat-defender {
  position: absolute;
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.combat-defender {
  z-index: 1;
  animation: defenderHit 0.6s cubic-bezier(0.4, 0.0, 0.6, 1) forwards;
}

.combat-attacker {
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

@keyframes defenderHit {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  15% { transform: scale(1.05) translateX(-5px); }
  40% { transform: scale(0.95) rotate(15deg) translateX(10px); opacity: 0.8; }
  70% { transform: scale(0.7) rotate(45deg) translateY(20px); opacity: 0.3; }
  100% { transform: scale(0.3) rotate(90deg) translateY(40px); opacity: 0; }
}

.combat-anim-p { animation: pawnThrust 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards; }

@keyframes pawnThrust {
  0% { transform: translateX(-60px) scale(1); }
  20% { transform: translateX(-40px) scale(1.05); }
  40% { transform: translateX(20px) scale(1.2) rotate(15deg); }
  55% { transform: translateX(25px) scale(1.25) rotate(20deg); }
  75% { transform: translateX(10px) scale(1.1) rotate(5deg); }
  100% { transform: translateX(0) scale(1) rotate(0deg); }
}

.combat-anim-n { animation: knightLeap 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes knightLeap {
  0% { transform: translate(-50px, 30px) scale(0.9) rotate(-20deg); }
  25% { transform: translate(-20px, -40px) scale(1.1) rotate(180deg); }
  50% { transform: translate(10px, -30px) scale(1.3) rotate(360deg); }
  70% { transform: translate(20px, 10px) scale(1.2) rotate(400deg); }
  100% { transform: translate(0, 0) scale(1) rotate(360deg); }
}

.combat-anim-b { animation: bishopSlash 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards; }

@keyframes bishopSlash {
  0% { transform: translate(-50px, -50px) rotate(-45deg) scale(1); }
  15% { transform: translate(-40px, -40px) rotate(-40deg) scale(1.05); }
  45% { transform: translate(30px, 30px) rotate(50deg) scale(1.3); }
  60% { transform: translate(35px, 35px) rotate(55deg) scale(1.25); }
  80% { transform: translate(15px, 15px) rotate(25deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

.combat-anim-r { animation: rookCrush 0.6s cubic-bezier(0.6, 0.0, 0.2, 1) forwards; }

@keyframes rookCrush {
  0% { transform: translateY(-50px) scale(1); }
  30% { transform: translateY(-60px) scale(1.1); }
  50% { transform: translateY(15px) scale(1.5) rotate(5deg); }
  60% { transform: translateY(20px) scale(1.6) rotate(0deg); }
  75% { transform: translateY(10px) scale(1.3); }
  100% { transform: translateY(0) scale(1); }
}

.combat-anim-q { animation: queenSpin 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards; }

@keyframes queenSpin {
  0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)); }
  20% { transform: scale(1.2) rotate(180deg) translateX(10px); filter: drop-shadow(0 0 16px rgba(255, 50, 50, 0.8)); }
  40% { transform: scale(1.4) rotate(360deg) translateX(-10px); filter: drop-shadow(0 0 20px rgba(255, 100, 100, 1)); }
  60% { transform: scale(1.5) rotate(540deg) translateY(10px); filter: drop-shadow(0 0 24px rgba(255, 150, 0, 1)); }
  80% { transform: scale(1.3) rotate(680deg); filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.8)); }
  100% { transform: scale(1) rotate(720deg); filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)); }
}

.combat-anim-k { animation: kingSword 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards; }

@keyframes kingSword {
  0% { transform: translateX(-30px) rotate(-90deg) scale(1); }
  15% { transform: translateX(-25px) rotate(-85deg) scale(1.05); }
  40% { transform: translateX(20px) rotate(45deg) scale(1.3); }
  55% { transform: translateX(25px) rotate(60deg) scale(1.35); }
  75% { transform: translateX(10px) rotate(30deg) scale(1.15); }
  100% { transform: translateX(0) rotate(0deg) scale(1); }
}

/* =========================================
   Replay Viewer (modal)
   ========================================= */

.replay-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.replay-overlay.hidden {
  display: none;
}

.replay-container {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  max-width: 650px;
  width: 95vw;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.replay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bg-elevated);
}

.replay-game-info {
  display: flex;
  flex-direction: column;
}

.replay-title {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.replay-subtitle {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-top: 2px;
}

.replay-close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.replay-close-btn:hover {
  color: var(--text-primary);
}

.replay-body {
  display: flex;
  gap: 0;
  flex: 1;
  overflow: hidden;
}

.replay-board-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  gap: 6px;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.replay-board {
  width: min(55vw, 50vh, 480px);
  height: min(55vw, 50vh, 480px);
}

.replay-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.replay-btn {
  background: var(--bg-elevated);
  border: none;
  color: var(--text-primary);
  font-size: 1rem;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s;
}

.replay-btn:hover {
  background: var(--border);
}

.replay-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.replay-btn-play {
  background: var(--accent);
  padding: 8px 18px;
  font-size: 1.1rem;
}

.replay-btn-play:hover {
  background: var(--accent-hover);
}

.replay-btn-play.playing {
  background: var(--playing);
}

.replay-btn-play.playing:hover {
  background: var(--playing-hover);
}

/* Player bars with timers */
.replay-player-bar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 2px 0;
}

.replay-timer {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-sunken);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  min-width: 60px;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}

.replay-timer.timer-active {
  color: #fff;
  background: var(--accent-hover);
}

/* Horizontal move strips */
.replay-move-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.strip-moves {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  padding: 3px 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  cursor: grab;
}

.strip-moves.dragging {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}

.strip-moves::-webkit-scrollbar {
  display: none;
}

.strip-move-num {
  color: var(--text-muted);
  font-size: 0.7rem;
  padding: 2px 0 2px 4px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.strip-move {
  color: #ccc;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  flex-shrink: 0;
  transition: background-color 0.1s;
}

.strip-move:hover {
  background: var(--bg-elevated);
}

.strip-move-active {
  background: var(--accent) !important;
  color: #fff;
}

.strip-scroll-btn {
  background: var(--bg-elevated);
  border: none;
  color: var(--text-secondary);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: background-color 0.15s, color 0.15s;
}

.strip-scroll-btn:hover {
  background: var(--border);
  color: var(--text-primary);
}

.strip-scroll-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.replay-result {
  padding: 12px 20px;
  text-align: center;
  color: var(--warning);
  font-weight: 600;
  font-size: 0.95rem;
  border-top: 1px solid var(--bg-elevated);
}

/* =========================================
   Analysis Review
   ========================================= */

.auto-analyze-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  user-select: none;
}

.auto-analyze-switch {
  position: relative;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
}

.auto-analyze-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.auto-analyze-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-elevated);
  border-radius: 9px;
  transition: background-color 0.2s;
}

.auto-analyze-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: transform 0.2s, background-color 0.2s;
}

.auto-analyze-switch input:checked + .auto-analyze-slider {
  background: var(--accent);
}

.auto-analyze-switch input:checked + .auto-analyze-slider::before {
  transform: translateX(14px);
  background: #fff;
}

/* Progress bar */
.analysis-progress {
  height: 3px;
  background: var(--bg-elevated);
  width: 100%;
  overflow: hidden;
}

.analysis-progress.hidden {
  display: none;
}

.analysis-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.3s ease;
}

/* Classification icons in move strips */
.analysis-icon {
  font-size: 0.6rem;
  margin-right: 1px;
  font-weight: bold;
  font-style: normal;
  vertical-align: middle;
}

.analysis-brilliant { color: #1bada6; }
.analysis-great { color: #5c8bb0; }
.analysis-best { color: #4a9e5c; }
.analysis-excellent { color: #96bc4b; }
.analysis-good { color: #7ec894; }
.analysis-book { color: #a88865; }
.analysis-inaccuracy { color: #ffd700; }
.analysis-mistake { color: #ff9800; }
.analysis-miss { color: #e6912a; }
.analysis-blunder { color: #ff6b6b; }

.analysis-critical {
  border-left: 2px solid var(--danger) !important;
  padding-left: 5px !important;
}

/* Move detail panel */
.analysis-detail {
  padding: 8px 12px;
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: #ccc;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.analysis-detail.hidden {
  display: none;
}

.analysis-detail-classification {
  font-weight: 600;
}

.analysis-detail-eval {
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.analysis-detail-best,
.analysis-detail-line {
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

/* Accuracy summary panel */
.analysis-accuracy {
  padding: 8px 16px;
  border-top: 1px solid var(--bg-elevated);
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.analysis-accuracy.hidden {
  display: none;
}

.accuracy-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.accuracy-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
}

.accuracy-label {
  color: var(--text-secondary);
}

.accuracy-value {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.85rem;
}

.accuracy-bar {
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: hidden;
}

.accuracy-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.accuracy-breakdown {
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

/* Critical moment navigation buttons */
.replay-btn-crit {
  background: var(--bg-elevated);
  border: none;
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.7rem;
  transition: background-color 0.15s, color 0.15s;
}

.replay-btn-crit:hover {
  background: var(--border);
  color: var(--danger);
}

.replay-btn-crit:disabled {
  opacity: 0.3;
  cursor: default;
}

.replay-btn-crit.hidden {
  display: none;
}

/* =========================================
   Game Browser
   ========================================= */

.browser-content {
  max-width: 500px;
  width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.browser-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.browser-close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

.browser-close-btn:hover {
  color: var(--text-primary);
}

.browser-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.browser-tab {
  flex: 1;
  padding: 8px 0;
  background: var(--bg-sunken);
  color: #888;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 0.15s, border-color 0.15s;
}

.browser-tab:hover {
  color: #ccc;
}

.browser-tab-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.browser-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.browser-game {
  padding: 10px 12px;
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s;
}

.browser-game:hover {
  background: var(--bg-elevated);
}

.browser-game-own {
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}

.browser-game-players {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.browser-game-meta {
  display: flex;
  gap: 12px;
  color: #888;
  font-size: 0.8rem;
}

.browser-game-result {
  font-weight: 600;
}

.result-white {
  color: var(--accent);
}

.result-black {
  color: var(--info);
}

.result-draw {
  color: var(--text-secondary);
}

.browser-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.browser-pagination button {
  padding: 6px 14px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
}

.browser-pagination button:disabled {
  opacity: 0.3;
  cursor: default;
}

.browser-page-info {
  color: #888;
  font-size: 0.8rem;
}

.browser-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
  font-size: 0.95rem;
}

/* --- Browser Filters --- */

.browser-filter-wrapper {
  margin-bottom: 6px;
}

/* Quick filter row — always visible */
.browser-filter-quick {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
}

/* Shared quick-row control base — matches #new-game style, smaller */
.browser-filter-pill,
.browser-filter-quick-tc,
.browser-filter-quick-search,
.browser-filter-advanced-toggle {
  padding: 4px 10px;
  background: #272522;
  color: #999;
  border: 1px solid #4a4744;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  font-family: inherit;
  line-height: 1.3;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.browser-filter-pill:hover,
.browser-filter-quick-tc:hover,
.browser-filter-quick-search:hover,
.browser-filter-advanced-toggle:hover {
  border-color: #6a6764;
  color: #e0e0e0;
  background: #2d2a27;
}

.browser-filter-pill:focus,
.browser-filter-quick-tc:focus,
.browser-filter-quick-search:focus,
.browser-filter-advanced-toggle:focus {
  border-color: #4a9e5c;
  outline: none;
}

/* Toggle buttons */
.browser-filter-pill {
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
}

.browser-filter-pill.browser-filter-toggle-on {
  background: #4a9e5c;
  color: #fff;
  border-color: #4a9e5c;
}

.browser-filter-pill.browser-filter-toggle-on:hover {
  background: #3d8a4e;
  border-color: #3d8a4e;
}

/* Time control dropdown */
.browser-filter-quick-tc {
  max-width: 110px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 22px;
}

.browser-filter-quick-tc option {
  background: #272522;
  color: #e0e0e0;
}

/* Player search */
.browser-filter-quick-search {
  flex: 1;
  min-width: 0;
}

/* Advanced toggle (chevron + badge) */
.browser-filter-advanced-toggle {
  white-space: nowrap;
  font-size: 0.7rem;
  padding: 4px 8px;
}

.browser-filter-toggle-active {
  color: #4a9e5c;
  border-color: #4a9e5c;
}

.browser-filter-badge {
  display: inline-block;
  background: #4a9e5c;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  margin-right: 2px;
}

/* Advanced filter panel (expandable) */
.browser-filter-advanced {
  padding: 10px;
  background: #1a1816;
  border-radius: 6px;
  margin-top: 4px;
}

.browser-filter-advanced.hidden {
  display: none;
}

.browser-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.browser-filter-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.browser-filter-group-full {
  grid-column: 1 / -1;
}

.browser-filter-label {
  color: #888;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.browser-filter-select,
.browser-filter-input {
  padding: 5px 8px;
  background: #2a2725;
  color: #e0e0e0;
  border: 1px solid #3d3a37;
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.browser-filter-select:focus,
.browser-filter-input:focus {
  border-color: #4a9e5c;
  outline: none;
}

.browser-filter-select option {
  background: #2a2725;
  color: #e0e0e0;
}

.browser-filter-elo-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.browser-filter-elo {
  width: 70px;
  flex: 1;
}

.browser-filter-elo-dash {
  color: #666;
  font-size: 0.85rem;
}

.browser-filter-clear {
  display: block;
  margin: 8px auto 0;
  padding: 4px 12px;
  background: none;
  color: #888;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  text-decoration: underline;
}

.browser-filter-clear:hover {
  color: #e0e0e0;
}

/* =========================================
   Replay on Main Board
   ========================================= */

.replay-main-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(90vw, 75vh, 800px);
  margin: 0 auto;
}

.replay-main-controls.hidden {
  display: none;
}

.replay-main-move-list {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 6px 4px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  background: #1e1c1a;
  border-radius: var(--radius-sm);
}

.replay-main-move-list::-webkit-scrollbar {
  display: none;
}

.replay-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.replay-main-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
}

.replay-main-btn {
  background: var(--bg-elevated);
  border: none;
  color: var(--text-primary);
  font-size: 1rem;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s;
}

.replay-main-btn:hover {
  background: var(--border);
}

.replay-main-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.replay-main-btn-play {
  background: var(--accent);
  padding: 8px 18px;
  font-size: 1.1rem;
}

.replay-main-btn-play:hover {
  background: var(--accent-hover);
}

.replay-main-btn-play.playing {
  background: var(--playing);
}

.replay-main-btn-play.playing:hover {
  background: var(--playing-hover);
}

.replay-main-result {
  color: var(--warning);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}

.replay-main-controls .auto-analyze-toggle {
  flex-shrink: 0;
  margin: 0;
}

.replay-crit-btn {
  font-size: 0.75rem !important;
  padding: 6px 8px !important;
  color: var(--warning) !important;
}

.replay-crit-btn.hidden {
  display: none;
}

.replay-main-controls .analysis-detail {
  width: 100%;
}

.replay-main-controls .analysis-accuracy {
  width: 100%;
}

.replay-main-controls .analysis-progress {
  border-radius: 2px;
}

.board.replay-mode-border {
  border: 3px solid var(--info);
  box-shadow: 0 0 12px rgba(100, 181, 246, 0.4);
}

.status.replay-mode {
  color: var(--info);
}

/* --- Live Move Bar (persistent during live games) --- */

.live-move-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(90vw, 75vh, 800px);
  margin: 0 auto;
  padding: 4px 0;
}

.live-move-bar.faded {
  opacity: 0.35;
  pointer-events: none;
}

.live-move-list {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  padding: 4px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  background: #1e1c1a;
  border-radius: var(--radius-sm);
}

.live-move-list::-webkit-scrollbar {
  display: none;
}

.live-move-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.live-move-btn {
  background: var(--bg-elevated);
  border: none;
  color: var(--text-primary);
  font-size: 0.85rem;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s;
}

.live-move-btn:hover {
  background: var(--border);
}

.live-move-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* --- Live Review Mode (amber border when reviewing past moves) --- */

.board.live-review-border {
  border: 3px solid #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.status.live-review {
  color: #f59e0b;
}

/* =========================================
   Evaluation Bar
   ========================================= */

.replay-board-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.eval-bar {
  width: 24px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--bg-sunken);
}

.eval-bar.hidden {
  display: none;
}

.eval-bar-black {
  background: var(--bg-elevated);
  height: 50%;
  transition: height 0.4s ease;
}

.eval-bar-white {
  background: #e8e6e1;
  height: 50%;
  transition: height 0.4s ease;
}

.eval-bar-score {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 0;
  pointer-events: none;
}

.eval-bar-score-white {
  bottom: 2px;
  color: #333;
}

.eval-bar-score-black {
  top: 2px;
  color: #ddd;
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 768px) {
  .header-bar {
    width: 100%;
    padding: 0 4px;
  }

  .header-center {
    min-width: 0;
  }

  .status {
    font-size: 0.78rem;
    padding: 0 8px;
  }

  #new-game {
    padding: 0 8px;
    font-size: 0.75rem;
  }

  .settings-panel {
    max-height: 85vh;
    max-height: 85dvh;
  }

  .control-checkbox {
    flex: 0 0 calc(50% - 4px);
    justify-content: center;
  }

  .settings-panel select {
    flex: 0 0 100%;
  }

  .replay-board {
    width: min(85vw, 45vh, 400px);
    height: min(85vw, 45vh, 400px);
  }

  .replay-board-area {
    padding: 8px 10px;
    gap: 4px;
  }

  .eval-bar {
    width: 18px;
  }

  .eval-bar-score {
    font-size: 0.5rem;
  }

  .replay-timer {
    font-size: 0.85rem;
    padding: 3px 8px;
  }

  .strip-move {
    font-size: 0.75rem;
    padding: 2px 5px;
  }

  .strip-move-num {
    font-size: 0.65rem;
  }

  .replay-main-controls {
    width: 100%;
  }

  .replay-main-btn {
    padding: 6px 8px;
    font-size: 0.85rem;
  }

  .player-bar {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/*  Replay Summary Button                                              */
/* ------------------------------------------------------------------ */

.replay-summary-btn {
  display: block;
  width: 100%;
  padding: 8px 0;
  margin-top: 6px;
  background: #3d3a37;
  color: #e0e0e0;
  border: 1px solid #4d4a47;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}

.replay-summary-btn:hover {
  background: #4d4a47;
}

.replay-summary-btn.hidden {
  display: none;
}

/* Full-screen replay viewer summary button (in header) */
button.replay-summary-btn {
  width: auto;
  margin: 0;
  padding: 4px 12px;
  font-size: 0.8rem;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/*  Post-Game Summary Modal                                            */
/* ------------------------------------------------------------------ */

.pgs-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100;
}

.pgs-modal.hidden {
  display: none;
}

.pgs-content {
  background: #272522;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  color: #e0e0e0;
  max-height: 90vh;
  overflow-y: auto;
}

.pgs-header {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #fff;
}

.pgs-body {
  margin-bottom: 16px;
}

.pgs-progress-text {
  text-align: center;
  color: #999;
  font-size: 0.9rem;
  padding: 12px 0;
}

.pgs-error {
  text-align: center;
  color: #999;
  padding: 24px 0;
}

/* Player accuracy comparison */
.pgs-players {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.pgs-player {
  flex: 1;
  text-align: center;
}

.pgs-player-name {
  font-size: 0.85rem;
  color: #ccc;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pgs-accuracy-value {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.pgs-player-white .pgs-accuracy-value {
  color: #f0f0f0;
}

.pgs-player-black .pgs-accuracy-value {
  color: #b0b0b0;
}

.pgs-accuracy-bar {
  height: 6px;
  background: #3d3a37;
  border-radius: 3px;
  overflow: hidden;
}

.pgs-accuracy-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.pgs-accuracy-fill-white {
  background: linear-gradient(90deg, #4a9e5c, #96bc4b);
}

.pgs-accuracy-fill-black {
  background: linear-gradient(90deg, #5c8bb0, #4a9e5c);
}

/* Classification breakdown grid */
.pgs-classifications {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pgs-class-row {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  justify-items: center;
  padding: 5px 8px;
  background: #1a1816;
  border-radius: 4px;
  font-size: 0.85rem;
}

.pgs-class-center {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pgs-class-count {
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.pgs-class-count-white {
  color: #f0f0f0;
}

.pgs-class-count-black {
  color: #b0b0b0;
}

.pgs-class-icon {
  font-weight: 700;
  font-size: 0.85rem;
}

.pgs-class-label {
  color: #999;
}

/* Action buttons */
.pgs-actions {
  display: flex;
  gap: 8px;
}

.pgs-btn {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.pgs-btn:hover {
  opacity: 0.85;
}

.pgs-btn-review {
  background: #4a9e5c;
  color: #fff;
}

.pgs-btn-new {
  background: #5c8bb0;
  color: #fff;
}

.pgs-btn-close {
  flex: 0 0 44px;
  background: #3d3a37;
  color: #999;
  font-size: 1.2rem;
}

.pgs-btn-close:hover {
  background: #4d4a47;
  color: #fff;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .pgs-content {
    padding: 16px;
    width: 95%;
  }

  .pgs-accuracy-value {
    font-size: 1.6rem;
  }

  .pgs-class-row {
    font-size: 0.8rem;
    padding: 4px 6px;
  }
}

/* =========================================
   Auth UI
   ========================================= */

.auth-container {
  display: flex;
  align-items: center;
  position: relative;
}

.auth-sign-in-btn {
  width: auto;
  height: 34px;
  font-size: 0.8rem;
  padding: 0 10px;
  white-space: nowrap;
}

.auth-user-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2px 8px 2px 4px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.75rem;
}

.auth-user-badge:hover { border-color: var(--border-hover); }

.auth-avatar-placeholder {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  background-size: cover;
  background-position: center;
}

.auth-badge-name {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  z-index: 100;
  min-width: 120px;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.auth-dropdown.hidden { display: none; }

.auth-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
}

.auth-dropdown-item:hover { background: var(--bg-hover); }

/* Auth Modal */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-modal.hidden { display: none; }

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}

.auth-modal-content {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 320px;
  max-width: 90vw;
}

.auth-modal-content h3 {
  color: var(--text-primary);
  margin-bottom: 16px;
  font-size: 1.1rem;
}

.auth-modal-content label {
  display: block;
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.auth-modal-content label span {
  display: block;
  margin-bottom: 4px;
}

.auth-input {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.auth-input:focus { border-color: var(--accent); outline: none; }

.auth-submit-btn {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 4px;
}

.auth-submit-btn:hover { background: var(--accent-hover); }
.auth-submit-btn:disabled { opacity: 0.6; cursor: default; }

.auth-error {
  background: var(--danger-bg);
  color: var(--danger);
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  margin-bottom: 12px;
}
.auth-error.hidden { display: none; }
.auth-sign-in-btn.hidden { display: none; }
.auth-user-badge.hidden { display: none; }

.auth-switch-link {
  margin-top: 12px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.auth-switch-link a { color: var(--accent-soft); cursor: pointer; }
.auth-login-form.hidden { display: none; }
.auth-register-form.hidden { display: none; }

/* =========================================
   Profile Modal
   ========================================= */

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-modal.hidden { display: none; }

.profile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}

.profile-panel {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 480px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
}

.profile-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
}

.profile-header {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.profile-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.profile-info { flex: 1; min-width: 0; }

.profile-display-name {
  color: var(--text-primary);
  font-size: 1.2rem;
  margin-bottom: 2px;
}

.profile-username {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.profile-bio {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-top: 8px;
}

.profile-ratings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.profile-rating-card {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  text-align: center;
}

.rating-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
}

/* =========================================
   Multiplayer
   ========================================= */

/* Play Online button */
.play-online-btn {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--info);
  color: #000;
  cursor: pointer;
  white-space: nowrap;
}
.play-online-btn:hover {
  background: #7ec5f7;
}

/* Backdrop */
.mp-backdrop {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2500;
}
.mp-backdrop.hidden { display: none; }

/* Modal */
.mp-modal {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2501;
  pointer-events: none;
}
.mp-modal.hidden { display: none; }

.mp-modal-content {
  background: var(--bg-surface);
  padding: 24px;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
  min-width: 280px;
  max-width: 360px;
  width: 90%;
  pointer-events: auto;
}

.mp-modal-content h3 {
  margin: 0 0 16px;
  font-size: 1.1rem;
  text-align: center;
}

/* Views */
.mp-view.hidden { display: none; }

/* Fields */
.mp-field {
  margin-bottom: 12px;
}
.mp-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.mp-field input,
.mp-field select {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.9rem;
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
}
.mp-field select {
  cursor: pointer;
}

/* Buttons */
.mp-btn {
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
}
.mp-btn:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.mp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.mp-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.mp-btn-primary:hover { background: var(--accent-hover); }

.mp-btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-bg);
}
.mp-btn-danger:hover { background: #9a4444; }

.mp-btn-sm { padding: 4px 10px; font-size: 0.78rem; }
.mp-btn-block { display: block; width: 100%; text-align: center; }

/* Divider */
.mp-divider {
  display: flex;
  align-items: center;
  margin: 12px 0;
  gap: 8px;
}
.mp-divider::before,
.mp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.mp-divider span { color: var(--text-muted); font-size: 0.8rem; }

/* Row layout */
.mp-row { margin-bottom: 8px; }
.mp-join-row {
  display: flex;
  gap: 8px;
}
.mp-code-input {
  flex: 1;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Room code display */
.mp-room-code-display {
  text-align: center;
  margin: 16px 0;
}
.mp-code-big {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--accent-soft);
}

/* Share URL */
.mp-share-url {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.mp-share-url-text {
  flex: 1;
  font-size: 0.75rem;
  color: var(--text-secondary);
  word-break: break-all;
}

.mp-waiting-text {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

/* Searching animation */
.mp-searching-anim {
  text-align: center;
  padding: 24px 0;
}
.mp-searching-anim p {
  color: var(--text-secondary);
  margin-top: 12px;
}
.mp-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mp-spin 0.8s linear infinite;
}
@keyframes mp-spin {
  to { transform: rotate(360deg); }
}

/* In-game controls */
.mp-game-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
}
.mp-game-controls.hidden { display: none; }

/* Connection status */
.mp-connection-status {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.mp-connection-status.connected { color: var(--accent-soft); }
.mp-connection-status.reconnecting { color: var(--warning); }
.mp-connection-status.disconnected { color: var(--danger); }
.mp-connection-status.opponent-disconnected { color: var(--warning); }

/* Draw offer toast */
.mp-draw-toast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.85rem;
}
.mp-draw-toast.hidden { display: none; }

/* Rematch controls */
.mp-rematch-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.mp-rematch-controls.hidden { display: none; }

/* =========================================
   New Game Wizard
   ========================================= */

.ng-backdrop {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2500;
}
.ng-backdrop.hidden { display: none; }

.ng-modal {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2501;
  pointer-events: none;
}
.ng-modal.hidden { display: none; }

.ng-modal-content {
  background: var(--bg-surface);
  padding: 20px 24px 24px;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
  min-width: 280px;
  max-width: 380px;
  width: 90%;
  pointer-events: auto;
}

/* Header with back/close */
.ng-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.ng-header h3 {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  text-align: center;
}
.ng-back-btn,
.ng-close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
}
.ng-back-btn:hover,
.ng-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.ng-back-btn.hidden { visibility: hidden; }

/* Views */
.ng-view.hidden { display: none; }

/* Step 1: Opponent selection — vertical list */
.ng-opponent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ng-opponent-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-sunken);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  text-align: left;
}
.ng-opponent-btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.ng-opponent-btn-green {
  background: rgba(76, 153, 76, 0.15);
  border-color: rgba(76, 153, 76, 0.4);
}
.ng-opponent-btn-green:hover {
  background: rgba(76, 153, 76, 0.25);
  border-color: rgba(76, 153, 76, 0.6);
}
.ng-opponent-btn-blue {
  background: rgba(66, 133, 200, 0.15);
  border-color: rgba(66, 133, 200, 0.4);
}
.ng-opponent-btn-blue:hover {
  background: rgba(66, 133, 200, 0.25);
  border-color: rgba(66, 133, 200, 0.6);
}
.ng-opponent-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.ng-opponent-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ng-opponent-label {
  font-size: 0.95rem;
  font-weight: 600;
}
.ng-opponent-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.rating-card-icon { font-size: 0.9rem; }

.rating-card-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

.rating-unrated { color: var(--text-muted); }

.rating-card-rd {
  font-size: 0.65rem;
  color: var(--text-dim);
}

.rating-card-stats {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.rating-win { color: var(--accent-soft); }
.rating-loss { color: var(--danger); }
.rating-draw { color: var(--text-secondary); }

.profile-games-section h3 {
  color: var(--text-primary);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.profile-games-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.profile-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.profile-filter-select {
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 0.75rem;
  cursor: pointer;
}
.profile-filter-select:hover { border-color: var(--border-hover); }

.profile-filter-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.profile-filter-elo {
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 0.75rem;
  width: 70px;
}
.profile-filter-elo:hover { border-color: var(--border-hover); }

.profile-filter-dash {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.profile-filter-clear-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.7rem;
  padding: 3px 8px;
  cursor: pointer;
  margin-left: auto;
}
.profile-filter-clear-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }

.profile-game-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.profile-game-row:hover {
  background: var(--bg-hover);
}

.pg-players { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-result { min-width: 50px; text-align: center; font-weight: 600; }
.pg-result-win { color: var(--accent-soft); }
.pg-result-loss { color: var(--danger); }
.pg-result-draw { color: var(--text-secondary); }
.pg-result-abandoned { color: var(--text-muted); }
.pg-result-ongoing { color: var(--info); }
.pg-type { min-width: 60px; }
.pg-date { min-width: 70px; text-align: right; }

.profile-games-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.profile-page-btn {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 0.75rem;
  cursor: pointer;
}
.profile-page-btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-hover); }
.profile-page-btn:disabled { opacity: 0.4; cursor: default; }

.profile-page-info {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.profile-loading, .profile-error {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}

/* =========================================
   Friends Modal
   ========================================= */

.friends-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.friends-modal.hidden { display: none; }

.friends-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}

.friends-panel {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 380px;
  max-width: 95vw;
  max-height: 80vh;
  overflow-y: auto;
}

.friends-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
}

.friends-panel h3 {
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.friends-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.friends-add-input {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.8rem;
}

.friends-add-btn {
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
}

.friends-add-btn:hover { background: var(--accent-hover); }

.friends-status {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.friends-section.hidden { display: none; }
.friends-section h4 {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 12px 0 6px;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.friend-name {
  flex: 1;
  color: var(--text-primary);
  font-size: 0.8rem;
}

.friend-pending {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.friend-accept-btn, .friend-reject-btn, .friend-remove-btn {
  padding: 3px 8px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  cursor: pointer;
}

.friend-accept-btn { background: var(--accent); color: #fff; }
.friend-reject-btn { background: var(--danger-bg); color: var(--danger); }
.friend-remove-btn { background: var(--bg-elevated); color: var(--text-secondary); }

.friends-empty {
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 12px 0;
}

/* Online / Friend steps */
.ng-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.9rem;
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
}
.ng-input:focus {
  outline: none;
  border-color: var(--accent);
}
.ng-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.9rem;
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ng-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.ng-divider::before,
.ng-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.ng-join-row {
  display: flex;
  gap: 8px;
}
.ng-code-input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  text-align: center;
}

/* Step 2: Time control — collapsible categories */
.ng-tc-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.ng-tc-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  background: var(--bg-sunken);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.ng-tc-cat:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.ng-tc-cat.selected {
  border-color: var(--accent);
  background: var(--bg-elevated);
}
.ng-tc-cat-icon {
  font-size: 1.3rem;
}
.ng-tc-cat-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ng-tc-options {
  min-height: 42px;
}
.ng-tc-option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ng-tc-option-group.hidden { display: none; }

.ng-tc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ng-tc-special-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ng-tc-btn {
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.ng-tc-btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.ng-tc-btn.selected {
  border-color: var(--accent);
  background: var(--bg-elevated);
}

/* Step 3: Settings */
.ng-settings-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ng-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.ng-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Bot settings */
.ng-bot-settings.hidden { display: none; }

.ng-settings-divider {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 0 8px;
  margin-bottom: 10px;
  border-top: 1px solid var(--border);
}

.ng-bot-side {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ng-bot-side-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.ng-color-picker {
  display: flex;
  gap: 6px;
}
.ng-color-btn {
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.ng-color-btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.ng-color-btn.selected {
  border-color: var(--accent);
  background: var(--bg-elevated);
}

.ng-field {
  margin-bottom: 10px;
}
.ng-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.ng-field select {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.9rem;
  background: var(--bg-sunken);
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ng-field input[type="range"] {
  width: 100%;
}

/* Play button */
.ng-btn {
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
}
.ng-btn:hover {
  background: var(--bg-hover);
}
.ng-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-size: 1rem;
}
.ng-btn-primary:hover {
  background: var(--accent-hover);
}
.ng-btn-block {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 16px;
}