/* theme-light.css - Light Theme */
/* Applied via body.theme-light class */

body.theme-light {
  /* ============================================
     BACKGROUNDS - Soft blue light theme (no white)
     ============================================ */
  --bg-base: #a8c0e8;
  --bg-elevated: #9bb5e0;
  --bg-surface-1: #b8cef0;
  --bg-surface-2: #adc5eb;
  --bg-overlay: rgba(160, 185, 225, 0.92);
  --bg-overlay-heavy: rgba(150, 178, 220, 0.96);

  /* Game interface background */
  --bg-game-center: rgba(140, 170, 215, 1);
  --bg-game-edge: rgba(120, 155, 205, 1);

  /* Panel/container backgrounds */
  --bg-panel-start: rgba(150, 180, 225, 0.98);
  --bg-panel-end: rgba(135, 168, 218, 0.98);
  --bg-panel-solid: rgba(145, 175, 222, 0.98);

  /* Input/form backgrounds */
  --bg-input-start: rgba(175, 200, 240, 0.95);
  --bg-input-end: rgba(160, 190, 235, 0.95);
  --bg-input-focus-start: rgba(165, 195, 238, 0.98);
  --bg-input-focus-end: rgba(155, 188, 232, 0.98);

  /* Button backgrounds */
  --bg-button-start: rgba(70, 110, 190, 0.95);
  --bg-button-end: rgba(50, 90, 170, 0.95);
  --bg-button-hover-start: rgba(60, 100, 180, 1);
  --bg-button-hover-end: rgba(40, 80, 160, 1);
  --bg-button-secondary-start: rgba(140, 170, 210, 0.9);
  --bg-button-secondary-end: rgba(125, 158, 200, 0.9);

  /* Glass effect - blue-tinted */
  --bg-glass: rgba(140, 175, 225, 0.6);
  --bg-glass-hover: rgba(150, 185, 232, 0.75);

  /* ============================================
     TEXT COLORS
     ============================================ */
  --text-primary: #1a1a2e;
  --text-secondary: rgba(50, 60, 100, 0.75);
  --text-muted: rgba(50, 70, 120, 0.6);
  --text-disabled: rgba(0, 0, 0, 0.3);
  --text-inverse: #ffffff;
  --text-white: #1a1a2e;

  /* Label text */
  --text-label: rgba(50, 70, 120, 0.7);
  --text-label-light: rgba(40, 50, 80, 0.85);

  /* ============================================
     ACCENT COLORS
     ============================================ */
  --accent-primary: #4f46e5;
  --accent-primary-hover: #4338ca;

  /* Blue accent - adjusted for light backgrounds */
  --accent-blue: rgba(60, 100, 180, 1);
  --accent-blue-90: rgba(60, 100, 180, 0.9);
  --accent-blue-80: rgba(60, 100, 180, 0.8);
  --accent-blue-60: rgba(60, 100, 180, 0.6);
  --accent-blue-50: rgba(60, 100, 180, 0.5);
  --accent-blue-40: rgba(100, 130, 200, 0.4);
  --accent-blue-30: rgba(100, 130, 200, 0.3);
  --accent-blue-20: rgba(100, 130, 200, 0.2);
  --accent-blue-15: rgba(100, 130, 200, 0.15);
  --accent-blue-12: rgba(100, 130, 200, 0.12);
  --accent-blue-10: rgba(100, 130, 200, 0.1);
  --accent-blue-08: rgba(100, 130, 200, 0.08);
  --accent-blue-05: rgba(100, 130, 200, 0.05);

  /* ============================================
     BORDER COLORS
     ============================================ */
  --border-default: rgba(100, 130, 200, 0.3);
  --border-subtle: rgba(100, 130, 200, 0.2);
  --border-faint: rgba(100, 130, 200, 0.1);
  --border-strong: rgba(100, 130, 200, 0.4);
  --border-focus: rgba(60, 100, 180, 0.6);
  --border-glow: rgba(60, 100, 180, 0.4);

  /* Glass borders */
  --border-glass: rgba(100, 130, 200, 0.15);
  --border-glass-strong: rgba(100, 130, 200, 0.25);

  /* ============================================
     STATUS COLORS (darker for readability)
     ============================================ */
  --status-success: #16a34a;
  --status-success-dark: #15803d;
  --status-success-bg: rgba(22, 163, 74, 0.15);
  --status-success-border: rgba(22, 163, 74, 0.4);

  --status-error: #dc2626;
  --status-error-dark: #b91c1c;
  --status-error-bg: rgba(220, 38, 38, 0.12);
  --status-error-border: rgba(220, 38, 38, 0.4);

  --status-warning: #d97706;
  --status-warning-dark: #b45309;
  --status-warning-bg: rgba(217, 119, 6, 0.12);

  --status-info: #2563eb;
  --status-info-bg: rgba(37, 99, 235, 0.1);

  --status-gold: #ca8a04;
  --status-gold-dark: #a16207;

  /* ============================================
     GAME BOARD - CELLS (blue tinted, no white)
     ============================================ */
  /* Hidden cell */
  --cell-hidden-start: rgba(130, 160, 210, 0.98);
  --cell-hidden-end: rgba(115, 148, 200, 0.98);
  --cell-hidden-border: rgba(90, 130, 185, 0.5);
  --cell-hidden-hover-start: rgba(145, 175, 220, 0.98);
  --cell-hidden-hover-end: rgba(130, 162, 212, 0.98);
  --cell-hidden-hover-border: rgba(80, 120, 190, 0.6);

  /* Revealed cell */
  --cell-revealed-start: rgba(160, 185, 225, 0.95);
  --cell-revealed-end: rgba(150, 178, 220, 0.95);
  --cell-revealed-border: rgba(110, 145, 195, 0.4);

  /* Mine cell */
  --cell-mine-start: rgba(200, 70, 70, 0.95);
  --cell-mine-end: rgba(180, 50, 50, 0.95);
  --cell-mine-border: rgba(180, 50, 50, 0.6);

  /* Flagged cell - keep visible on light */
  --cell-flagged-start: rgba(150, 130, 180, 0.92);
  --cell-flagged-end: rgba(135, 115, 165, 0.92);
  --cell-flagged-border: rgba(120, 90, 160, 0.55);
  --cell-flag-color: #c02020;

  /* Game board container */
  --board-bg-start: rgba(120, 155, 205, 0.98);
  --board-bg-end: rgba(105, 142, 195, 0.98);
  --board-border: rgba(80, 115, 175, 0.5);

  /* ============================================
     CELL NUMBER COLORS (no glow, darker for contrast)
     ============================================ */
  --cell-n1: #1e60a8;
  --cell-n2: #1a8a4a;
  --cell-n3: #c03030;
  --cell-n4: #7030a0;
  --cell-n5: #b06010;
  --cell-n6: #108080;
  --cell-n7: #a03070;
  --cell-n8: #505050;

  /* No glow in light mode */
  --cell-number-glow: 0;

  /* ============================================
     AI DIFFICULTY COLORS (darker)
     ============================================ */
  --ai-beginner: #16a34a;
  --ai-beginner-bg: rgba(22, 163, 74, 0.12);
  --ai-intermediate: #ca8a04;
  --ai-intermediate-bg: rgba(202, 138, 4, 0.12);
  --ai-expert: #dc2626;
  --ai-expert-bg: rgba(220, 38, 38, 0.12);

  /* ============================================
     PLAYER COLORS
     ============================================ */
  --player-human: #16a34a;
  --player-human-bg: rgba(22, 163, 74, 0.12);
  --player-ai: #2563eb;
  --player-ai-bg: rgba(37, 99, 235, 0.1);
  --player-spectator: #6b7280;
  --player-disconnected: #9ca3af;

  /* ============================================
     SHADOWS & GLOWS (softer for light theme)
     ============================================ */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.2);

  /* Subtle glows for light theme */
  --glow-blue-sm: 0 0 15px rgba(100, 130, 200, 0.15);
  --glow-blue-md: 0 0 30px rgba(100, 130, 200, 0.12);
  --glow-blue-lg: 0 0 50px rgba(100, 130, 200, 0.1);

  /* No text glow in light mode */
  --text-glow-blue: none;
  --text-glow-title: none;
  --text-glow-success: none;
  --text-glow-error: none;

  /* Inset shadows */
  --inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --inset-dark: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  --inset-button: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.08);

  /* ============================================
     GRID PATTERNS - Darker grid for light theme
     ============================================ */
  --grid-line: rgba(30, 50, 100, 0.35);
  --grid-line-accent: rgba(30, 50, 100, 0.5);
  --grid-line-subtle: rgba(30, 50, 100, 0.2);

  /* ============================================
     SCROLLBAR
     ============================================ */
  --scrollbar-track: rgba(200, 210, 230, 0.3);
  --scrollbar-thumb: rgba(100, 130, 200, 0.4);
  --scrollbar-thumb-hover: rgba(100, 130, 200, 0.6);

  /* ============================================
     MODALS
     ============================================ */
  --modal-bg-start: rgba(210, 225, 250, 0.99);
  --modal-bg-end: rgba(195, 215, 248, 0.99);
  --modal-border: rgba(100, 140, 210, 0.4);
  --modal-header-line: rgba(100, 140, 210, 0.6);

  /* ============================================
     NOTIFICATIONS
     ============================================ */
  --notification-bg: rgba(245, 248, 255, 0.98);
  --notification-border: rgba(100, 130, 200, 0.3);
}

/* ============================================
   LIGHT THEME - MODAL OVERRIDES
   (Until modals.css is migrated to CSS variables)
   ============================================ */

/* Modal content background */
body.theme-light .modal-content {
  background: linear-gradient(180deg,
    rgba(140, 170, 215, 0.99) 0%,
    rgba(125, 158, 205, 0.99) 100%);
  border-color: rgba(80, 120, 185, 0.5);
  box-shadow:
    0 0 50px rgba(80, 120, 185, 0.25),
    0 25px 50px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.theme-light .modal-content::before {
  background: linear-gradient(90deg,
    transparent,
    rgba(100, 130, 200, 0.6),
    transparent);
}

body.theme-light .modal-title {
  color: #1a1a2e;
  text-shadow: none;
}

body.theme-light .modal-subtitle {
  color: rgba(50, 60, 100, 0.8);
}

/* Game Over Stats Box */
body.theme-light .single-player-game-over .stats {
  background: rgba(110, 145, 195, 0.7);
  border-color: rgba(80, 120, 175, 0.45);
}

body.theme-light .single-player-game-over .stat-row {
  border-bottom-color: rgba(100, 130, 200, 0.15);
}

body.theme-light .single-player-game-over .stat-label {
  color: rgba(60, 80, 130, 0.8);
}

body.theme-light .single-player-game-over .stat-value {
  color: #1a1a2e;
  text-shadow: none;
}

/* ============================================
   LIGHT THEME - HUD OVERRIDES
   ============================================ */

/* Top Left Stats (Timer, Flags, Lives) */
body.theme-light .top-left-stats .game-timer,
body.theme-light .top-left-stats .flag-count,
body.theme-light .top-left-stats .lives-count {
  background: linear-gradient(180deg,
    rgba(150, 180, 225, 0.95) 0%,
    rgba(135, 168, 218, 0.95) 100%);
  border-color: rgba(80, 120, 180, 0.4);
  color: #1a1a2e;
  text-shadow: none;
  box-shadow:
    0 0 15px rgba(80, 120, 180, 0.15),
    0 4px 15px rgba(0, 0, 0, 0.1);
}

body.theme-light .top-left-stats .game-timer .label,
body.theme-light .top-left-stats .flag-count .label,
body.theme-light .top-left-stats .lives-count .label {
  color: rgba(40, 60, 100, 0.7);
}

body.theme-light .top-left-stats .game-timer .value,
body.theme-light .top-left-stats .flag-count .value,
body.theme-light .top-left-stats .lives-count .value {
  color: #1a1a2e;
  text-shadow: none;
}

/* Progress indicator */
body.theme-light .status {
  background: linear-gradient(180deg,
    rgba(150, 180, 225, 0.95) 0%,
    rgba(135, 168, 218, 0.95) 100%);
  border-color: rgba(80, 120, 180, 0.4);
  color: #1a1a2e;
  text-shadow: none;
  box-shadow:
    0 0 15px rgba(80, 120, 180, 0.15),
    0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Bottom HUD (Difficulty selector) */
body.theme-light .bottom-hud .attack-inventory,
body.theme-light .bottom-hud .power-ups-inventory {
  background: linear-gradient(180deg,
    rgba(150, 180, 225, 0.95) 0%,
    rgba(135, 168, 218, 0.95) 100%);
  border-color: rgba(80, 120, 180, 0.4);
  box-shadow:
    0 0 15px rgba(80, 120, 180, 0.15),
    0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Mobile difficulty selector */
body.theme-light .mobile-difficulty-selector {
  background: linear-gradient(180deg,
    rgba(160, 188, 230, 0.98) 0%,
    rgba(145, 175, 222, 0.98) 100%);
  border-color: rgba(80, 120, 180, 0.4);
  box-shadow:
    0 0 20px rgba(80, 120, 180, 0.15),
    0 4px 20px rgba(0, 0, 0, 0.1);
}

body.theme-light .mobile-difficulty-selector::before {
  background: linear-gradient(90deg,
    transparent,
    rgba(80, 120, 180, 0.5),
    transparent);
}

body.theme-light .difficulty-btn {
  background: linear-gradient(180deg,
    rgba(140, 172, 220, 0.9) 0%,
    rgba(125, 160, 212, 0.9) 100%);
  border-color: rgba(80, 120, 180, 0.3);
  color: #1a1a2e;
}

body.theme-light .difficulty-btn:hover {
  background: linear-gradient(180deg,
    rgba(155, 185, 228, 0.95) 0%,
    rgba(140, 172, 220, 0.95) 100%);
  border-color: rgba(70, 110, 175, 0.5);
}

body.theme-light .difficulty-btn.active {
  background: linear-gradient(180deg,
    rgba(70, 110, 180, 0.95) 0%,
    rgba(55, 95, 165, 0.95) 100%);
  border-color: rgba(50, 90, 160, 0.6);
  color: #ffffff;
}

/* Connection quality icon */
body.theme-light .connection-quality-icon {
  background: linear-gradient(180deg,
    rgba(150, 180, 225, 0.95) 0%,
    rgba(135, 168, 218, 0.95) 100%);
  border-color: rgba(80, 120, 180, 0.4);
}

/* Return to lobby / close button */
body.theme-light .constant-return-lobby,
body.theme-light .close-btn {
  background: linear-gradient(180deg,
    rgba(150, 180, 225, 0.95) 0%,
    rgba(135, 168, 218, 0.95) 100%);
  border-color: rgba(80, 120, 180, 0.4);
  color: #1a1a2e;
  box-shadow:
    0 0 15px rgba(80, 120, 180, 0.15),
    0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Theme selector in game */
body.theme-light .theme-selector {
  background: linear-gradient(180deg,
    rgba(160, 188, 230, 0.98) 0%,
    rgba(145, 175, 222, 0.98) 100%);
  border-color: rgba(80, 120, 180, 0.4);
  color: #1a1a2e;
}

body.theme-light .theme-selector option {
  background: rgba(150, 180, 225, 1);
  color: #1a1a2e;
}

/* ============================================
   LIGHT THEME - VS AI CONFIGURATION
   ============================================ */

/* VS AI config panel - no container */
body.theme-light .vs-ai-config {
  background: transparent !important;
  border: none !important;
}

/* Board difficulty buttons */
body.theme-light .vs-ai-difficulty-btn {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.95) 0%,
    rgba(160, 188, 232, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.3) !important;
  color: #1a1a2e !important;
}

body.theme-light .vs-ai-difficulty-btn:hover {
  background: linear-gradient(180deg,
    rgba(185, 208, 245, 0.98) 0%,
    rgba(170, 196, 238, 0.98) 100%) !important;
}

body.theme-light .vs-ai-difficulty-btn.active {
  background: linear-gradient(180deg,
    rgba(100, 150, 220, 0.95) 0%,
    rgba(80, 130, 200, 0.95) 100%) !important;
  border-color: rgba(60, 110, 180, 0.5) !important;
  color: #ffffff !important;
}

body.theme-light .vs-ai-difficulty-btn .diff-name,
body.theme-light .vs-ai-difficulty-btn .diff-size {
  color: inherit !important;
}

/* Custom board settings panel */
body.theme-light .vs-ai-custom-settings,
body.theme-light .custom-board-settings {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.95) 0%,
    rgba(160, 188, 232, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.3) !important;
  border-radius: 8px !important;
}

body.theme-light .vs-ai-custom-settings label,
body.theme-light .custom-board-settings label,
body.theme-light .custom-setting-label {
  color: rgba(30, 50, 90, 0.8) !important;
}

body.theme-light .vs-ai-custom-settings input,
body.theme-light .custom-board-settings input,
body.theme-light .custom-board-input {
  background: rgba(220, 232, 250, 0.95) !important;
  border: 1px solid rgba(80, 120, 180, 0.3) !important;
  color: #1a1a2e !important;
}

body.theme-light .vs-ai-custom-settings input:focus,
body.theme-light .custom-board-settings input:focus,
body.theme-light .custom-board-input:focus {
  background: rgba(235, 242, 255, 0.98) !important;
  border-color: rgba(80, 130, 200, 0.5) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(80, 130, 200, 0.2) !important;
}

/* AI Opponent selectors */
body.theme-light .ai-opponent-selector {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.9) 0%,
    rgba(160, 188, 232, 0.9) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
}

body.theme-light .ai-opponent-selector:hover {
  background: linear-gradient(180deg,
    rgba(185, 208, 245, 0.95) 0%,
    rgba(170, 196, 238, 0.95) 100%) !important;
}

body.theme-light .ai-label {
  color: #1a1a2e !important;
}

body.theme-light .ai-label.ai-beginner { color: #16a34a !important; }
body.theme-light .ai-label.ai-intermediate { color: #ca8a04 !important; }
body.theme-light .ai-label.ai-expert { color: #dc2626 !important; }

/* Stepper buttons (- and +) */
body.theme-light .ai-btn-minus,
body.theme-light .ai-btn-plus,
body.theme-light .setting-btn-minus,
body.theme-light .setting-btn-plus {
  background: linear-gradient(180deg,
    rgba(130, 165, 215, 0.95) 0%,
    rgba(110, 148, 200, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.4) !important;
  color: #ffffff !important;
}

body.theme-light .ai-btn-minus:hover,
body.theme-light .ai-btn-plus:hover,
body.theme-light .setting-btn-minus:hover,
body.theme-light .setting-btn-plus:hover {
  background: linear-gradient(180deg,
    rgba(110, 150, 205, 0.98) 0%,
    rgba(90, 132, 190, 0.98) 100%) !important;
}

/* AI count display */
body.theme-light .ai-count-value,
body.theme-light .ai-count-display {
  color: #1a1a2e !important;
  background: rgba(200, 218, 245, 0.8) !important;
  border: 1px solid rgba(80, 120, 180, 0.2) !important;
}

/* Game Settings cards (Lives, Grenades, Attack Slots) */
body.theme-light .game-setting-selector {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.9) 0%,
    rgba(160, 188, 232, 0.9) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
}

body.theme-light .setting-label {
  color: #1a1a2e !important;
}

body.theme-light .setting-label.setting-lives { color: #dc2626 !important; }
body.theme-light .setting-label.setting-grenades { color: #ca8a04 !important; }
body.theme-light .setting-label.setting-attacks { color: #0891b2 !important; }

body.theme-light .setting-count-value {
  color: #1a1a2e !important;
  background: rgba(200, 218, 245, 0.8) !important;
}

/* Win condition selector */
body.theme-light .win-condition-label,
body.theme-light .win-condition-value {
  color: #1a1a2e !important;
}

body.theme-light .win-nav-btn {
  background: linear-gradient(180deg,
    rgba(100, 150, 210, 0.9) 0%,
    rgba(80, 130, 195, 0.9) 100%) !important;
  border: 1px solid rgba(60, 110, 175, 0.4) !important;
  color: #ffffff !important;
}

/* Attack options */
body.theme-light .vs-ai-attack-option {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.9) 0%,
    rgba(160, 188, 232, 0.9) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
}

body.theme-light .vs-ai-attack-option:hover {
  background: linear-gradient(180deg,
    rgba(185, 208, 245, 0.95) 0%,
    rgba(170, 196, 238, 0.95) 100%) !important;
}

body.theme-light .vs-ai-attack-option.selected {
  background: linear-gradient(180deg,
    rgba(100, 160, 230, 0.9) 0%,
    rgba(80, 140, 215, 0.9) 100%) !important;
  border-color: rgba(60, 120, 195, 0.5) !important;
}

body.theme-light .vs-ai-attack-option .attack-name {
  color: #1a1a2e !important;
}

body.theme-light .vs-ai-attack-option .attack-count {
  background: rgba(80, 130, 195, 0.9) !important;
  color: #ffffff !important;
}

/* Power-up options */
body.theme-light .vs-ai-powerup-option {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.9) 0%,
    rgba(160, 188, 232, 0.9) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
}

body.theme-light .vs-ai-powerup-option:hover {
  background: linear-gradient(180deg,
    rgba(185, 208, 245, 0.95) 0%,
    rgba(170, 196, 238, 0.95) 100%) !important;
}

body.theme-light .vs-ai-powerup-option.selected {
  background: linear-gradient(180deg,
    rgba(100, 190, 140, 0.9) 0%,
    rgba(80, 170, 120, 0.9) 100%) !important;
  border-color: rgba(60, 150, 100, 0.5) !important;
}

body.theme-light .vs-ai-powerup-option .powerup-name {
  color: #1a1a2e !important;
}

body.theme-light .vs-ai-powerup-option .powerup-count {
  background: rgba(60, 150, 100, 0.9) !important;
  color: #ffffff !important;
}

/* Start VS AI Game button */
body.theme-light .vs-ai-start-btn {
  background: linear-gradient(180deg,
    rgba(100, 150, 215, 0.95) 0%,
    rgba(80, 130, 200, 0.95) 100%) !important;
  border: 1px solid rgba(60, 110, 180, 0.5) !important;
  color: #ffffff !important;
}

body.theme-light .vs-ai-start-btn:hover:not(:disabled) {
  background: linear-gradient(180deg,
    rgba(80, 135, 205, 0.98) 0%,
    rgba(60, 115, 190, 0.98) 100%) !important;
}

body.theme-light .vs-ai-start-btn:disabled {
  background: linear-gradient(180deg,
    rgba(140, 165, 200, 0.7) 0%,
    rgba(125, 152, 190, 0.7) 100%) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

body.theme-light .vs-ai-start-btn small {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Total AI display */
body.theme-light .vs-ai-total,
body.theme-light .ai-total-display {
  color: #1a1a2e !important;
}

/* Section titles */
body.theme-light .vs-ai-section-title {
  color: #1a1a2e !important;
}

/* Mode toggle buttons */
body.theme-light .mode-toggle-container {
  background: linear-gradient(180deg,
    rgba(160, 188, 230, 0.9) 0%,
    rgba(145, 175, 222, 0.9) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.3) !important;
}

body.theme-light .mode-toggle-btn {
  background: transparent !important;
  color: rgba(30, 50, 90, 0.7) !important;
}

body.theme-light .mode-toggle-btn:hover {
  background: rgba(120, 160, 215, 0.3) !important;
  color: #1a1a2e !important;
}

body.theme-light .mode-toggle-btn.active {
  background: linear-gradient(180deg,
    rgba(90, 140, 205, 0.95) 0%,
    rgba(70, 120, 190, 0.95) 100%) !important;
  color: #ffffff !important;
}

/* ============================================
   LIGHT THEME - HOST NEW GAME MODAL
   ============================================ */

/* Host game modal container */
body.theme-light .host-game-modal,
body.theme-light .game-setup-modal {
  background: linear-gradient(180deg,
    rgba(160, 188, 230, 0.98) 0%,
    rgba(145, 175, 222, 0.98) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.3) !important;
}

/* Modal title */
body.theme-light .host-game-modal h2,
body.theme-light .game-setup-modal h2,
body.theme-light .modal-title {
  color: #1a1a2e !important;
}

/* Form labels */
body.theme-light .host-game-modal label,
body.theme-light .game-setup-modal label,
body.theme-light .setup-label {
  color: rgba(30, 50, 90, 0.85) !important;
}

/* Input fields and selects */
body.theme-light .host-game-modal input,
body.theme-light .host-game-modal select,
body.theme-light .game-setup-modal input,
body.theme-light .game-setup-modal select {
  background: rgba(220, 232, 250, 0.95) !important;
  border: 1px solid rgba(80, 120, 180, 0.3) !important;
  color: #1a1a2e !important;
}

body.theme-light .host-game-modal input:focus,
body.theme-light .host-game-modal select:focus,
body.theme-light .game-setup-modal input:focus,
body.theme-light .game-setup-modal select:focus {
  background: rgba(235, 242, 255, 0.98) !important;
  border-color: rgba(80, 130, 200, 0.5) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(80, 130, 200, 0.2) !important;
}

body.theme-light .host-game-modal input::placeholder {
  color: rgba(100, 130, 170, 0.7) !important;
}

/* AI Players panel */
body.theme-light .ai-players-panel,
body.theme-light .ai-players-section {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.95) 0%,
    rgba(160, 188, 232, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
}

body.theme-light .ai-players-panel h3,
body.theme-light .ai-players-section h3,
body.theme-light .ai-section-title {
  color: #1a1a2e !important;
}

body.theme-light .ai-total-badge {
  background: rgba(100, 150, 210, 0.9) !important;
  color: #ffffff !important;
}

body.theme-light .ai-info-btn {
  background: linear-gradient(180deg,
    rgba(90, 140, 205, 0.95) 0%,
    rgba(70, 120, 190, 0.95) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(60, 110, 180, 0.4) !important;
}

/* AI selector cards (Beginner, Intermediate, Expert) in Host Game */
body.theme-light .ai-selector {
  background: linear-gradient(180deg,
    rgba(160, 188, 230, 0.95) 0%,
    rgba(145, 175, 222, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.3) !important;
}

body.theme-light .ai-selector .ai-difficulty-name {
  color: #1a1a2e !important;
}

body.theme-light .ai-selector .ai-count-display {
  background: rgba(200, 218, 245, 0.95) !important;
  border: 1px solid rgba(80, 120, 180, 0.3) !important;
  color: #1a1a2e !important;
}

body.theme-light .ai-selector .ai-description {
  color: rgba(30, 50, 90, 0.8) !important;
}

body.theme-light .ai-selector .ai-control-btn {
  background: linear-gradient(180deg,
    rgba(100, 150, 210, 0.95) 0%,
    rgba(80, 130, 195, 0.95) 100%) !important;
  border: 1px solid rgba(60, 110, 180, 0.4) !important;
  color: #ffffff !important;
}

body.theme-light .ai-selector .ai-control-btn:hover {
  background: linear-gradient(180deg,
    rgba(80, 135, 200, 0.98) 0%,
    rgba(60, 115, 185, 0.98) 100%) !important;
}

/* AI total indicator - make text readable */
body.theme-light .ai-total-indicator {
  background: rgba(100, 150, 210, 0.95) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Host game sections (Game Settings, Attacks, Power-ups panels) */
body.theme-light .host-game-section {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.95) 0%,
    rgba(160, 188, 232, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
}

body.theme-light .host-section-title {
  color: #1a1a2e !important;
}

/* Host setting selectors (Lives, Grenades, Attack Slots) */
body.theme-light .host-setting-selector {
  background: linear-gradient(180deg,
    rgba(190, 212, 245, 0.95) 0%,
    rgba(175, 200, 238, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.2) !important;
}

body.theme-light .host-setting-label {
  color: #1a1a2e !important;
}

body.theme-light .host-setting-label.setting-lives { color: #dc2626 !important; }
body.theme-light .host-setting-label.setting-grenades { color: #ca8a04 !important; }
body.theme-light .host-setting-label.setting-attacks { color: #0891b2 !important; }

body.theme-light .host-setting-value {
  background: rgba(220, 232, 250, 0.95) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
  color: #1a1a2e !important;
}

body.theme-light .host-setting-btn {
  background: linear-gradient(180deg,
    rgba(100, 150, 210, 0.95) 0%,
    rgba(80, 130, 195, 0.95) 100%) !important;
  border: 1px solid rgba(60, 110, 180, 0.4) !important;
  color: #ffffff !important;
}

body.theme-light .host-setting-btn:hover {
  background: linear-gradient(180deg,
    rgba(80, 135, 200, 0.98) 0%,
    rgba(60, 115, 185, 0.98) 100%) !important;
}

/* Stepper buttons in host modal */
body.theme-light .ai-type-card .btn-minus,
body.theme-light .ai-type-card .btn-plus,
body.theme-light .ai-player-card .btn-minus,
body.theme-light .ai-player-card .btn-plus,
body.theme-light .setting-row .btn-minus,
body.theme-light .setting-row .btn-plus {
  background: linear-gradient(180deg,
    rgba(100, 150, 210, 0.95) 0%,
    rgba(80, 130, 195, 0.95) 100%) !important;
  border: 1px solid rgba(60, 110, 180, 0.4) !important;
  color: #ffffff !important;
}

body.theme-light .ai-type-card .btn-minus:hover,
body.theme-light .ai-type-card .btn-plus:hover,
body.theme-light .ai-player-card .btn-minus:hover,
body.theme-light .ai-player-card .btn-plus:hover,
body.theme-light .setting-row .btn-minus:hover,
body.theme-light .setting-row .btn-plus:hover {
  background: linear-gradient(180deg,
    rgba(80, 135, 200, 0.98) 0%,
    rgba(60, 115, 185, 0.98) 100%) !important;
}

/* Attacks panel */
body.theme-light .attacks-panel,
body.theme-light .attacks-section {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.95) 0%,
    rgba(160, 188, 232, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
}

body.theme-light .attacks-panel h3,
body.theme-light .attacks-section h3,
body.theme-light .attacks-title {
  color: #1a1a2e !important;
}

/* Attack option cards (host modal) */
body.theme-light .host-attack-option,
body.theme-light .attack-option {
  background: linear-gradient(180deg,
    rgba(190, 212, 245, 0.95) 0%,
    rgba(175, 200, 238, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.2) !important;
}

body.theme-light .host-attack-option:hover,
body.theme-light .attack-option:hover {
  background: linear-gradient(180deg,
    rgba(200, 220, 250, 0.98) 0%,
    rgba(185, 208, 242, 0.98) 100%) !important;
}

body.theme-light .host-attack-option.selected,
body.theme-light .attack-option.selected {
  background: linear-gradient(180deg,
    rgba(100, 160, 230, 0.95) 0%,
    rgba(80, 140, 215, 0.95) 100%) !important;
  border-color: rgba(60, 120, 195, 0.5) !important;
}

body.theme-light .host-attack-option .attack-name,
body.theme-light .attack-option .attack-name {
  color: #1a1a2e !important;
}

body.theme-light .host-attack-option.selected .attack-name,
body.theme-light .attack-option.selected .attack-name {
  color: #ffffff !important;
}

body.theme-light .host-attack-option .attack-count,
body.theme-light .attack-option .attack-count {
  background: rgba(80, 130, 195, 0.9) !important;
  color: #ffffff !important;
}

/* Power-ups panel */
body.theme-light .powerups-panel,
body.theme-light .powerups-section {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.95) 0%,
    rgba(160, 188, 232, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
}

body.theme-light .powerups-panel h3,
body.theme-light .powerups-section h3,
body.theme-light .powerups-title {
  color: #1a1a2e !important;
}

/* Power-up option cards (host modal) */
body.theme-light .host-powerup-option,
body.theme-light .power-up-option,
body.theme-light .powerup-option {
  background: linear-gradient(180deg,
    rgba(190, 212, 245, 0.95) 0%,
    rgba(175, 200, 238, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.2) !important;
}

body.theme-light .host-powerup-option:hover,
body.theme-light .power-up-option:hover,
body.theme-light .powerup-option:hover {
  background: linear-gradient(180deg,
    rgba(200, 220, 250, 0.98) 0%,
    rgba(185, 208, 242, 0.98) 100%) !important;
}

body.theme-light .host-powerup-option.selected,
body.theme-light .power-up-option.selected,
body.theme-light .powerup-option.selected {
  background: linear-gradient(180deg,
    rgba(100, 190, 140, 0.95) 0%,
    rgba(80, 170, 120, 0.95) 100%) !important;
  border-color: rgba(60, 150, 100, 0.5) !important;
}

body.theme-light .host-powerup-option .power-up-name,
body.theme-light .power-up-option .power-up-name,
body.theme-light .powerup-option .powerup-name {
  color: #1a1a2e !important;
}

body.theme-light .host-powerup-option.selected .power-up-name,
body.theme-light .power-up-option.selected .power-up-name,
body.theme-light .powerup-option.selected .powerup-name {
  color: #ffffff !important;
}

body.theme-light .host-powerup-option .power-up-count,
body.theme-light .power-up-option .power-up-count,
body.theme-light .powerup-option .powerup-count {
  background: rgba(60, 150, 100, 0.9) !important;
  color: #ffffff !important;
}

/* Create Game and Cancel buttons */
body.theme-light .create-game-btn,
body.theme-light .host-game-submit {
  background: linear-gradient(180deg,
    rgba(80, 160, 120, 0.95) 0%,
    rgba(60, 140, 100, 0.95) 100%) !important;
  border: 1px solid rgba(40, 120, 80, 0.5) !important;
  color: #ffffff !important;
}

body.theme-light .create-game-btn:hover,
body.theme-light .host-game-submit:hover {
  background: linear-gradient(180deg,
    rgba(60, 145, 105, 0.98) 0%,
    rgba(45, 125, 85, 0.98) 100%) !important;
}

body.theme-light .cancel-btn,
body.theme-light .host-game-cancel {
  background: linear-gradient(180deg,
    rgba(140, 165, 200, 0.95) 0%,
    rgba(125, 152, 190, 0.95) 100%) !important;
  border: 1px solid rgba(100, 130, 170, 0.4) !important;
  color: #ffffff !important;
}

body.theme-light .cancel-btn:hover,
body.theme-light .host-game-cancel:hover {
  background: linear-gradient(180deg,
    rgba(125, 152, 190, 0.98) 0%,
    rgba(110, 138, 180, 0.98) 100%) !important;
}

/* ============================================
   LIGHT THEME - MULTIPLAYER LOBBY
   ============================================ */

/* Player info bar */
body.theme-light .player-info,
body.theme-light .user-info-bar {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.95) 0%,
    rgba(160, 188, 232, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
}

body.theme-light .player-info .player-name,
body.theme-light .user-info-bar .player-name {
  color: #0d7a32 !important;
}

body.theme-light .player-info .player-id,
body.theme-light .user-info-bar .player-id {
  background: rgba(200, 218, 245, 0.95) !important;
  color: #1a1a2e !important;
}

body.theme-light .player-info .logout-btn,
body.theme-light .user-info-bar .logout-btn {
  background: rgba(200, 218, 245, 0.95) !important;
  color: #1a1a2e !important;
  border: 1px solid rgba(80, 120, 180, 0.3) !important;
}

body.theme-light .player-info .stat-label,
body.theme-light .user-info-bar .stat-label,
body.theme-light .player-stats .stat-label,
body.theme-light .stat-label {
  color: #1a1a2e !important;
}

body.theme-light .player-info .stat-value,
body.theme-light .user-info-bar .stat-value,
body.theme-light .player-stats .stat-value,
body.theme-light .stat-value {
  color: #1a1a2e !important;
  font-weight: 600 !important;
}

body.theme-light .player-info .win-rate,
body.theme-light .user-info-bar .win-rate,
body.theme-light .player-stats .win-rate,
body.theme-light #stat-winrate {
  color: #0d7a32 !important;
}

/* Player stats container */
body.theme-light .player-stats {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.95) 0%,
    rgba(160, 188, 232, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
}

body.theme-light .player-stats .logged-in-name {
  color: #0d7a32 !important;
}

body.theme-light .player-stats .player-code {
  background: rgba(200, 218, 245, 0.95) !important;
  color: #1a1a2e !important;
}

/* Available Games section */
body.theme-light .available-games,
body.theme-light .games-list-container {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.95) 0%,
    rgba(160, 188, 232, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
}

body.theme-light .available-games h3,
body.theme-light .games-list-title {
  color: #1a1a2e !important;
}

/* Game item cards */
body.theme-light .game-item {
  background: linear-gradient(180deg,
    rgba(190, 212, 245, 0.95) 0%,
    rgba(175, 200, 238, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
}

body.theme-light .game-item:hover {
  background: linear-gradient(180deg,
    rgba(200, 220, 250, 0.98) 0%,
    rgba(185, 208, 242, 0.98) 100%) !important;
}

body.theme-light .game-item .game-name {
  color: #1a1a2e !important;
}

body.theme-light .game-item .game-host {
  color: #1a1a2e !important;
}

body.theme-light .game-item .game-details,
body.theme-light .game-item .game-settings {
  color: #2a3a5e !important;
}

body.theme-light .game-item .player-badge {
  background: rgba(13, 122, 50, 0.95) !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.theme-light .game-player.human-player {
  background: rgba(13, 122, 50, 0.15) !important;
  color: #0d7a32 !important;
  border: 1px solid rgba(13, 122, 50, 0.4) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.theme-light .game-item .join-btn {
  background: linear-gradient(180deg,
    rgba(80, 160, 120, 0.95) 0%,
    rgba(60, 140, 100, 0.95) 100%) !important;
  color: #ffffff !important;
}

body.theme-light .game-item .cancel-game-btn {
  background: linear-gradient(180deg,
    rgba(220, 80, 80, 0.95) 0%,
    rgba(200, 60, 60, 0.95) 100%) !important;
  color: #ffffff !important;
}

/* Players online indicator */
body.theme-light .players-online,
body.theme-light .online-count {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.95) 0%,
    rgba(160, 188, 232, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 180, 0.25) !important;
  color: #16a34a !important;
}

/* Light theme - Player Cards (solid background for performance) */
body.theme-light .player-card {
  background: #e8eef8 !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(100, 130, 200, 0.3);
}

body.theme-light .player-card .player-name {
  color: #1a1a2e;
  text-shadow: none;
}

body.theme-light .player-card .progress-text,
body.theme-light .player-card .lives-text {
  color: #1a1a2e;
}

body.theme-light .player-card.attackable:hover {
  background: #d8e2f2 !important;
}

body.theme-light .player-card.spectatable:hover {
  background: #d0daf0 !important;
}

body.theme-light .player-card.being-attacked {
  background: #f8d8d8 !important;
  border-color: #cc4444 !important;
}

body.theme-light .player-card.attacking {
  background: #f8e8d0 !important;
  border-color: #cc8800 !important;
}

body.theme-light .player-card.dead {
  background: #d8d8dc !important;
}