/* ========================================
   GAMES DARK MODE - Unified System
   Consistent dark mode across all games
   ======================================== */

/* ========================================
   1. DARK MODE VARIABLES
   ======================================== */
[data-theme="dark"],
.game-root.dark-mode,
.game-landing-root.dark-mode,
.hangman-container.dark-mode,
.game-page.dark-mode {
    /* Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --card-bg: #1e293b;
    --header-bg: #0f172a;
    --page-bg: #0f172a;
    --main-bg: #0b1526;
    
    /* Text Colors - WHITE for maximum contrast */
    --text-primary: #ffffff !important;
    --text-secondary: #cbd5e1 !important;
    --text-muted: #cbd5e1 !important;
    
    /* Border & UI Colors */
    --border-color: #334155;
    --header-border: #60a5fa;
    
    /* Shadows */
    --shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* ========================================
   2. FORCE WHITE TEXT IN DARK MODE
   ======================================== */
[data-theme="dark"],
.game-root.dark-mode,
.game-landing-root.dark-mode,
.hangman-container.dark-mode,
.game-page.dark-mode {
    color: #ffffff !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] label,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
.game-root.dark-mode p,
.game-root.dark-mode span,
.game-root.dark-mode div,
.game-root.dark-mode h1,
.game-root.dark-mode h2,
.game-root.dark-mode h3,
.game-landing-root.dark-mode p,
.game-landing-root.dark-mode span,
.hangman-container.dark-mode p,
.hangman-container.dark-mode span,
.game-page.dark-mode p,
.game-page.dark-mode span {
    color: #ffffff !important;
}

/* ========================================
   3. INPUT PLACEHOLDERS
   ======================================== */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ========================================
   4. INPUT FIELDS BACKGROUND
   ======================================== */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: #ffffff !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--header-border);
    outline-color: var(--header-border);
}