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

body.theme-light {
  /* ============================================
     BACKGROUNDS - Soft blue light theme (no white)
     ============================================ */
  --bg-base: #8099c5;
  --bg-elevated: #7590bb;
  --bg-surface-1: #a8c0e8;
  --bg-surface-2: #9eb8e2;
  --bg-overlay: rgba(128, 153, 197, 0.92);
  --bg-overlay-heavy: rgba(117, 144, 187, 0.96);

  /* Game interface background */
  --bg-game-center: rgba(110, 140, 185, 1);
  --bg-game-edge: rgba(90, 125, 175, 1);

  /* Panel/container backgrounds - enhanced gradient contrast */
  --bg-panel-start: rgba(175, 200, 240, 0.98);
  --bg-panel-end: rgba(140, 172, 220, 0.98);
  --bg-panel-solid: rgba(155, 185, 228, 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 (light blue, cell-shaded look)
     ============================================ */
  /* Hidden cell - light blue with strong outline */
  --cell-hidden-start: rgba(160, 190, 235, 1);
  --cell-hidden-end: rgba(140, 175, 225, 1);
  --cell-hidden-border: rgba(70, 100, 160, 0.8);
  --cell-hidden-hover-start: rgba(175, 200, 240, 1);
  --cell-hidden-hover-end: rgba(155, 185, 230, 1);
  --cell-hidden-hover-border: rgba(60, 90, 150, 0.9);

  /* Revealed cell - slightly lighter blue */
  --cell-revealed-start: rgba(180, 205, 242, 1);
  --cell-revealed-end: rgba(165, 195, 238, 1);
  --cell-revealed-border: rgba(90, 120, 170, 0.5);

  /* Mine cell - vibrant red */
  --cell-mine-start: rgba(240, 90, 90, 1);
  --cell-mine-end: rgba(220, 70, 70, 1);
  --cell-mine-border: rgba(150, 40, 40, 0.9);

  /* Flagged cell - distinct purple */
  --cell-flagged-start: rgba(170, 155, 205, 1);
  --cell-flagged-end: rgba(150, 135, 190, 1);
  --cell-flagged-border: rgba(100, 70, 140, 0.8);
  --cell-flag-color: #8b2525;  /* Darker maroon to reduce chromostereopsis */

  /* Game board container - light blue backdrop */
  --board-bg-start: rgba(170, 195, 238, 1);
  --board-bg-end: rgba(150, 180, 228, 1);
  --board-border: rgba(60, 90, 150, 0.7);

  /* ============================================
     CELL NUMBER COLORS (no glow, darker for contrast)
     ============================================ */
  --cell-n1: #1e60a8;
  --cell-n2: #1a8a4a;
  --cell-n3: #7a2828;  /* Darker maroon to reduce chromostereopsis */
  --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 (enhanced for depth)
     ============================================ */
  /* Multi-layer shadows for realistic depth */
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.04);
  --shadow-lg:
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 16px 32px rgba(0, 0, 0, 0.06),
    0 32px 64px rgba(0, 0, 0, 0.05);
  --shadow-xl:
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 16px 32px rgba(0, 0, 0, 0.08),
    0 32px 64px rgba(0, 0, 0, 0.06),
    0 48px 96px rgba(0, 0, 0, 0.04);

  /* Colored glows for interactive elements */
  --glow-blue-sm: 0 0 12px rgba(70, 120, 200, 0.25);
  --glow-blue-md: 0 0 24px rgba(70, 120, 200, 0.2);
  --glow-blue-lg: 0 0 40px rgba(70, 120, 200, 0.15);

  /* Subtle text shadows for headers */
  --text-glow-blue: 0 1px 2px rgba(0, 0, 0, 0.1);
  --text-glow-title: 0 2px 4px rgba(0, 0, 0, 0.08);
  --text-glow-success: 0 1px 2px rgba(0, 80, 40, 0.15);
  --text-glow-error: 0 1px 2px rgba(120, 0, 0, 0.15);

  /* Enhanced inset shadows for depth */
  --inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  --inset-dark: inset 0 -1px 0 rgba(0, 0, 0, 0.08), inset 0 -2px 4px rgba(0, 0, 0, 0.03);
  --inset-button: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.05);

  /* Neumorphic shadow pair for soft 3D effect */
  --neu-raised:
    6px 6px 12px rgba(0, 0, 0, 0.1),
    -4px -4px 10px rgba(255, 255, 255, 0.8);
  --neu-inset:
    inset 4px 4px 8px rgba(0, 0, 0, 0.08),
    inset -4px -4px 8px rgba(255, 255, 255, 0.9);

  /* ============================================
     GRID PATTERNS - Darker grid for light theme
     ============================================ */
  --grid-line: rgba(50, 80, 140, 0.18);
  --grid-line-accent: rgba(50, 80, 140, 0.35);
  --grid-line-subtle: rgba(50, 80, 140, 0.12);

  /* ============================================
     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 */
body.theme-light .vs-ai-config {
  background: linear-gradient(180deg,
    rgba(160, 188, 230, 0.95) 0%,
    rgba(145, 175, 222, 0.95) 100%) !important;
  border-color: rgba(80, 120, 180, 0.3) !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;
}

/* ============================================
   LIGHT THEME - LOBBY & AUTH SECTION
   ============================================ */

/* Lobby header text */
body.theme-light .lobby-header h2 {
  color: #1a1a2e !important;
  text-shadow: none !important;
}

body.theme-light .lobby-header p,
body.theme-light .lobby-subtitle {
  color: rgba(40, 55, 90, 0.8) !important;
}

/* Auth section container */
body.theme-light .auth-section {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.95) 0%,
    rgba(160, 188, 232, 0.95) 100%) !important;
  border: 2px solid rgba(80, 120, 180, 0.35) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Auth tabs container */
body.theme-light .auth-tabs {
  background: rgba(150, 180, 225, 0.6) !important;
  border: 2px solid rgba(80, 120, 180, 0.3) !important;
  border-radius: 14px !important;
  padding: 4px !important;
}

/* Individual auth tabs */
body.theme-light .auth-tab {
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: rgba(40, 60, 100, 0.7) !important;
  font-weight: 600 !important;
  padding: 0.6rem 1rem !important;
  box-shadow: none !important;
}

body.theme-light .auth-tab:hover {
  background: rgba(130, 165, 215, 0.4) !important;
  color: #1a1a2e !important;
}

body.theme-light .auth-tab.active {
  background: linear-gradient(180deg,
    rgba(80, 130, 200, 0.95) 0%,
    rgba(60, 110, 180, 0.95) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(60, 100, 170, 0.25) !important;
}

/* Auth form */
body.theme-light .auth-form {
  background: transparent !important;
}

body.theme-light .auth-hint {
  color: rgba(50, 70, 110, 0.7) !important;
  font-size: 0.85rem !important;
}

body.theme-light .auth-error {
  background: linear-gradient(180deg,
    rgba(255, 220, 220, 0.95) 0%,
    rgba(255, 200, 205, 0.98) 100%) !important;
  border: 2px solid rgba(220, 100, 110, 0.4) !important;
  border-radius: 10px !important;
  color: #b04050 !important;
}

/* Auth input fields */
body.theme-light .auth-section input,
body.theme-light .auth-form input {
  background: rgba(220, 232, 250, 0.95) !important;
  border: 2px solid rgba(80, 120, 180, 0.3) !important;
  border-radius: 10px !important;
  color: #1a1a2e !important;
  padding: 0.75rem 1rem !important;
}

body.theme-light .auth-section input:focus,
body.theme-light .auth-form 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 3px rgba(80, 130, 200, 0.15) !important;
}

body.theme-light .auth-section input::placeholder,
body.theme-light .auth-form input::placeholder {
  color: rgba(100, 130, 170, 0.7) !important;
}

/* Auth buttons (Create Account, Login, etc.) */
body.theme-light .auth-section button,
body.theme-light .auth-form button {
  background: linear-gradient(180deg,
    rgba(80, 130, 200, 0.95) 0%,
    rgba(60, 110, 180, 0.95) 100%) !important;
  border: 2px solid rgba(50, 90, 160, 0.5) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
  box-shadow: 0 2px 8px rgba(60, 100, 170, 0.25) !important;
}

body.theme-light .auth-section button:hover,
body.theme-light .auth-form button:hover {
  background: linear-gradient(180deg,
    rgba(60, 115, 190, 0.98) 0%,
    rgba(45, 95, 170, 0.98) 100%) !important;
  box-shadow: 0 4px 12px rgba(60, 100, 170, 0.35) !important;
  transform: translateY(-2px);
}

/* Players online - ensure it has solid background */
body.theme-light .players-online {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 0.98) 0%,
    rgba(160, 188, 232, 0.98) 100%) !important;
  border: 2px solid rgba(80, 120, 180, 0.35) !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  color: #16a34a !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   LIGHT THEME - SUBTLE DEPTH EFFECTS
   ============================================ */

/* --- PANELS & CARDS: Gentle shadow --- */
body.theme-light .modal-content,
body.theme-light .auth-section,
body.theme-light .available-games,
body.theme-light .games-list-container,
body.theme-light .player-stats,
body.theme-light .player-info,
body.theme-light .vs-ai-config,
body.theme-light .host-game-modal,
body.theme-light .game-setup-modal {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* --- CARDS: Subtle depth with highlight --- */
body.theme-light .game-item,
body.theme-light .ai-selector,
body.theme-light .ai-opponent-selector,
body.theme-light .game-setting-selector,
body.theme-light .host-attack-option,
body.theme-light .attack-option,
body.theme-light .host-powerup-option,
body.theme-light .powerup-option,
body.theme-light .vs-ai-difficulty-btn,
body.theme-light .host-setting-selector {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: all 0.15s ease !important;
}

body.theme-light .game-item:hover,
body.theme-light .ai-selector:hover,
body.theme-light .ai-opponent-selector:hover,
body.theme-light .host-attack-option:hover,
body.theme-light .attack-option:hover,
body.theme-light .host-powerup-option:hover,
body.theme-light .powerup-option:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-1px) !important;
}

/* --- BUTTONS: Subtle 3D with gentle lift --- */
body.theme-light .join-btn,
body.theme-light .create-game-btn,
body.theme-light .host-game-submit,
body.theme-light .vs-ai-start-btn,
body.theme-light .auth-section button,
body.theme-light .auth-form button,
body.theme-light .ai-control-btn,
body.theme-light .host-setting-btn,
body.theme-light .win-nav-btn {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: all 0.15s ease !important;
}

body.theme-light .join-btn:hover,
body.theme-light .create-game-btn:hover,
body.theme-light .host-game-submit:hover,
body.theme-light .vs-ai-start-btn:hover:not(:disabled),
body.theme-light .ai-control-btn:hover,
body.theme-light .host-setting-btn:hover,
body.theme-light .win-nav-btn:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px) !important;
}

body.theme-light .join-btn:active,
body.theme-light .create-game-btn:active,
body.theme-light .host-game-submit:active,
body.theme-light .vs-ai-start-btn:active:not(:disabled),
body.theme-light .ai-control-btn:active,
body.theme-light .host-setting-btn:active {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(0) !important;
}

/* --- INPUTS: Subtle inset --- */
body.theme-light input[type="text"],
body.theme-light input[type="password"],
body.theme-light input[type="number"],
body.theme-light select,
body.theme-light .auth-section input,
body.theme-light .auth-form input,
body.theme-light .custom-board-input,
body.theme-light .ai-count-value,
body.theme-light .ai-count-display,
body.theme-light .setting-count-value,
body.theme-light .host-setting-value {
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.theme-light input[type="text"]:focus,
body.theme-light input[type="password"]:focus,
body.theme-light input[type="number"]:focus,
body.theme-light select:focus,
body.theme-light .auth-section input:focus,
body.theme-light .auth-form input:focus {
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.06),
    0 0 0 2px rgba(70, 120, 200, 0.15) !important;
}

/* --- GAME BOARD: Light blue container with strong border --- */
body.theme-light .game-board {
  background: linear-gradient(180deg,
    rgba(175, 200, 240, 1) 0%,
    rgba(155, 185, 232, 1) 100%) !important;
  border: 3px solid rgba(60, 90, 145, 0.7) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* --- GAME CELLS: Cell-shaded look with strong outlines --- */
body.theme-light .cell.hidden {
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
  border: 2px solid rgba(70, 100, 160, 0.6) !important;
}

body.theme-light .cell.hidden:hover {
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(50, 80, 140, 0.8) !important;
}

body.theme-light .cell.revealed {
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(90, 120, 170, 0.4) !important;
}

/* --- HUD ELEMENTS: Gentle float --- */
body.theme-light .top-left-stats .game-timer,
body.theme-light .top-left-stats .flag-count,
body.theme-light .top-left-stats .lives-count,
body.theme-light .status,
body.theme-light .constant-return-lobby,
body.theme-light .close-btn,
body.theme-light .theme-selector,
body.theme-light .connection-quality-icon {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* --- TABS: Active state --- */
body.theme-light .auth-tab.active,
body.theme-light .mode-toggle-btn.active {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* --- PLAYER CARDS: Subtle raised --- */
body.theme-light .player-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

body.theme-light .player-card.attackable:hover,
body.theme-light .player-card.spectatable:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-1px);
}

/* --- DIFFICULTY BUTTONS: Active pressed --- */
body.theme-light .vs-ai-difficulty-btn.active,
body.theme-light .difficulty-btn.active {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   LIGHT THEME - SOLO DASHBOARD DEPTH
   ============================================ */

/* Dashboard sections - subtle card appearance */
body.theme-light .solo-dashboard .lobby-section {
  background: linear-gradient(180deg,
    rgba(185, 208, 245, 0.95) 0%,
    rgba(165, 192, 235, 0.95) 100%) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(100, 140, 200, 0.25) !important;
}

/* Stat cards with depth */
body.theme-light .stat-card {
  background: linear-gradient(180deg,
    rgba(200, 220, 250, 0.95) 0%,
    rgba(180, 205, 242, 0.95) 100%) !important;
  border: 1px solid rgba(100, 140, 200, 0.2) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Best time items */
body.theme-light .best-item {
  background: linear-gradient(180deg,
    rgba(195, 215, 248, 0.9) 0%,
    rgba(180, 202, 240, 0.9) 100%) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(100, 140, 200, 0.15) !important;
}

/* Leaderboard preview rows */
body.theme-light .preview-row {
  background: linear-gradient(180deg,
    rgba(195, 215, 248, 0.85) 0%,
    rgba(180, 202, 240, 0.85) 100%) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(100, 140, 200, 0.12) !important;
}

body.theme-light .preview-row:hover {
  background: linear-gradient(180deg,
    rgba(205, 222, 252, 0.95) 0%,
    rgba(190, 210, 245, 0.95) 100%) !important;
}

/* Rank highlights */
body.theme-light .preview-row.rank-1 {
  background: linear-gradient(90deg,
    rgba(255, 215, 0, 0.2) 0%,
    rgba(195, 215, 248, 0.85) 50%) !important;
}
body.theme-light .preview-row.rank-2 {
  background: linear-gradient(90deg,
    rgba(192, 192, 192, 0.25) 0%,
    rgba(195, 215, 248, 0.85) 50%) !important;
}
body.theme-light .preview-row.rank-3 {
  background: linear-gradient(90deg,
    rgba(205, 127, 50, 0.2) 0%,
    rgba(195, 215, 248, 0.85) 50%) !important;
}

/* Activity items */
body.theme-light .activity-item {
  background: linear-gradient(180deg,
    rgba(195, 215, 248, 0.85) 0%,
    rgba(180, 202, 240, 0.85) 100%) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(100, 140, 200, 0.12) !important;
}

/* Filter buttons */
body.theme-light .filter-btn-mini {
  background: linear-gradient(180deg,
    rgba(190, 212, 248, 0.95) 0%,
    rgba(175, 200, 240, 0.95) 100%) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

body.theme-light .filter-btn-mini:hover {
  background: linear-gradient(180deg,
    rgba(200, 220, 252, 0.98) 0%,
    rgba(185, 208, 245, 0.98) 100%) !important;
}

body.theme-light .filter-btn-mini.active {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Your rank badge */
body.theme-light .your-rank {
  background: linear-gradient(180deg,
    rgba(180, 205, 245, 0.95) 0%,
    rgba(165, 192, 238, 0.95) 100%) !important;
  border: 1px solid rgba(80, 120, 200, 0.25) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* View all button */
body.theme-light .view-all-btn {
  background: linear-gradient(180deg,
    rgba(185, 208, 245, 0.95) 0%,
    rgba(170, 196, 238, 0.95) 100%) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

body.theme-light .view-all-btn:hover {
  background: linear-gradient(180deg,
    rgba(195, 215, 250, 0.98) 0%,
    rgba(180, 205, 242, 0.98) 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* Online players display */
body.theme-light .online-display {
  background: linear-gradient(180deg,
    rgba(200, 235, 210, 0.4) 0%,
    rgba(180, 225, 195, 0.3) 100%) !important;
  border-radius: 12px;
  padding: 1rem;
}