/* Dark Mode Override Variables */
body.dark-mode {
    --bg-color: #131415;
    /* Dunkles Hintergrund-Schwarzgrau */
    --card-bg: #202F36;
    /* Etwas helleres Grau für Cards/Menüs */
    --text-main: #FFFFFF;
    /* Weißer Text */
    --text-light: #AFAFAF;
    /* Hellgrauer Text */
    --border-color: #37464F;
    /* Trennlinien in dunklem Blaugrau */
    --hover-overlay: rgba(255, 255, 255, 0.1);
    /* Weißer Hover-Layer */

    /* Buttons und Akzente bleiben meistens erhalten, für Lesbarkeit aber evtl. angepasst */
    --primary-color: #58CC02;
    --primary-shadow: #58A700;
    --secondary-color: #1CB0F6;
    --secondary-shadow: #1899D6;
    --wrong-red: #FF4B4B;
    --wrong-shadow: #EA2B2B;
}

/* Spezifische Anpassungen für den Dark Mode (falls SVG / Bilder invertiert werden müssen etc.) */
body.dark-mode .kana {
    color: #FFFFFF;
}

/* Header Background in Darkmode entfernt nach User-Wunsch */

body.dark-mode .settings-modal {
    background-color: var(--card-bg);
    color: var(--text-main);
}

/* Fix: Quiz Options and Matching Buttons */
body.dark-mode .option-btn,
body.dark-mode .matching-btn,
body.dark-mode .puzzle-block {
    background-color: var(--bg-color);
    color: var(--text-main);
}

/* Fix: Alphabet Cards */
body.dark-mode .alpha-char {
    background-color: var(--bg-color);
    color: var(--text-main);
}

/* Fix: Romaji Labels */
body.dark-mode .romaji-label {
    color: var(--secondary-color);
}

/* Fix: Chat History Backgrounds */
body.dark-mode .chat-history,
body.dark-mode .grammar-explanation {
    background-color: var(--bg-color);
    color: var(--text-main);
}

body.dark-mode .chat-partner {
    background-color: var(--card-bg);
    color: var(--text-main);
}