/* theme-dark.css - Dark Theme (Default) */
/* The dark theme is the default - values are defined in tokens.css */
/* This file exists for consistency and potential dark-specific overrides */

/* Dark theme is applied by default via :root in tokens.css */
/* No class needed - this is the base state */
/* Use :not() selectors to avoid overriding other themes */

/* Player Cards - solid background for performance (dark theme only) */
body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .player-card {
  background: #1a1a24 !important;
  backdrop-filter: none !important;
}

body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .player-card.attackable:hover {
  background: #252530 !important;
}

body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .player-card.spectatable:hover {
  background: #2a3550 !important;
}

body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .player-card.being-attacked {
  background: #3a2020 !important;
  border-color: #cc4444 !important;
}

body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .player-card.attacking {
  background: #3a3020 !important;
  border-color: #cc8800 !important;
}

body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .player-card.dead {
  background: #1a1a1a !important;
}

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

/* Auth section container */
body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-section {
  background: linear-gradient(180deg,
    rgba(25, 30, 45, 0.95) 0%,
    rgba(18, 22, 35, 0.98) 100%) !important;
  border: 2px solid rgba(100, 150, 255, 0.25) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  box-shadow:
    0 0 30px rgba(100, 150, 255, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Auth tabs container */
body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-tabs {
  background: rgba(30, 40, 60, 0.6) !important;
  border: 2px solid rgba(100, 150, 255, 0.2) !important;
  border-radius: 14px !important;
  padding: 4px !important;
}

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

body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-tab:hover {
  background: rgba(60, 80, 120, 0.4) !important;
  color: #ffffff !important;
}

body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-tab.active {
  background: linear-gradient(180deg,
    rgba(80, 120, 200, 0.9) 0%,
    rgba(60, 100, 180, 0.9) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(80, 120, 200, 0.3) !important;
  text-shadow: 0 0 10px rgba(150, 200, 255, 0.5) !important;
}

/* Auth form */
body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-form {
  background: transparent !important;
}

body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-hint {
  color: rgba(150, 180, 220, 0.7) !important;
  font-size: 0.85rem !important;
}

body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-error {
  background: linear-gradient(180deg,
    rgba(60, 20, 25, 0.95) 0%,
    rgba(50, 15, 20, 0.98) 100%) !important;
  border: 2px solid rgba(255, 100, 100, 0.4) !important;
  border-radius: 10px !important;
  color: #ff8888 !important;
}

/* Auth input fields */
body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-section input,
body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-form input {
  background: rgba(20, 25, 40, 0.95) !important;
  border: 2px solid rgba(100, 150, 255, 0.2) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  padding: 0.75rem 1rem !important;
}

body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-section input:focus,
body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-form input:focus {
  background: rgba(25, 30, 50, 0.98) !important;
  border-color: rgba(100, 150, 255, 0.5) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(100, 150, 255, 0.15) !important;
}

body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-section input::placeholder,
body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-form input::placeholder {
  color: rgba(150, 180, 220, 0.5) !important;
}

/* Auth buttons (Create Account, Login, etc.) */
body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-section button,
body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-form button {
  background: linear-gradient(180deg,
    rgba(80, 120, 200, 0.9) 0%,
    rgba(60, 100, 180, 0.9) 100%) !important;
  border: 2px solid rgba(100, 150, 255, 0.4) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
  box-shadow:
    0 0 15px rgba(100, 150, 255, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.3) !important;
  text-shadow: 0 0 10px rgba(150, 200, 255, 0.5) !important;
}

body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-section button:hover,
body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .auth-form button:hover {
  background: linear-gradient(180deg,
    rgba(90, 130, 210, 0.95) 0%,
    rgba(70, 110, 190, 0.95) 100%) !important;
  box-shadow:
    0 0 25px rgba(100, 150, 255, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-2px);
}

/* Players online indicator */
body:not(.theme-kokoro):not(.theme-classic):not(.theme-light) .players-online {
  background: linear-gradient(180deg,
    rgba(25, 30, 45, 0.95) 0%,
    rgba(18, 22, 35, 0.98) 100%) !important;
  border: 2px solid rgba(100, 150, 255, 0.25) !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  color: #4ade80 !important;
  font-weight: 600 !important;
  box-shadow: 0 0 20px rgba(100, 150, 255, 0.08) !important;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.5) !important;
}