/*
 * Shared dark mode overrides for standalone game pages.
 * Covers the common "Cuppa game page" layout: warm cream bg,
 * brown header, card-style containers, buttons, inputs.
 *
 * Games with unique elements (OzWord tiles, Sudoku grid, etc.)
 * need additional per-game overrides via inline <style> blocks.
 *
 * Include via <link rel="stylesheet" href="/games/_shared/dark-mode.css">
 * after the game's own stylesheet.
 */

/* ── Nav ──────────────────────────────────────────── */
.cuppa-nav { display: none !important; }

/* ── Base ─────────────────────────────────────────── */
body.cuppa-dark {
    background: #1a1a2e !important;
    color: #E8E0D6 !important;
}

/* Header / top bar */
body.cuppa-dark .top-bar,
body.cuppa-dark .game-header,
body.cuppa-dark header,
body.cuppa-dark [class*="header"] {
    background: #16213e !important;
    color: #E8E0D6 !important;
}

/* Containers, panels, cards */
body.cuppa-dark .card,
body.cuppa-dark .panel,
body.cuppa-dark .container,
body.cuppa-dark .game-container,
body.cuppa-dark .game-board,
body.cuppa-dark main {
    background-color: #16213e;
    color: #E8E0D6;
}

/* Inputs, selects */
body.cuppa-dark input,
body.cuppa-dark select,
body.cuppa-dark textarea {
    background: #1e1a16 !important;
    color: #E8E0D6 !important;
    border-color: rgba(232,213,183,0.3) !important;
}

/* Buttons — keep primary buttons themed, darken secondary.
   Stateful controls are exempt (audit DM-005): this rule was flattening
   selected/active toggle buttons (Minesweeper flag mode, Sudoku/Cuppadoku
   note mode, difficulty pickers) to the same colour as their unselected
   siblings, erasing the state entirely. */
body.cuppa-dark button:not([class*="primary"]):not([class*="play"]):not([class*="submit"]):not([class*="start"]):not([class*="selected"]):not([class*="active"]):not([aria-pressed="true"]) {
    background: rgba(232,213,183,0.1);
    color: #E8E0D6;
    border-color: rgba(232,213,183,0.3);
}

/* Links */
body.cuppa-dark a { color: #C4956A; }

/* Borders — soften bright borders */
body.cuppa-dark hr,
body.cuppa-dark [class*="divider"] {
    border-color: rgba(232,213,183,0.15) !important;
}

/* Modal / overlay backgrounds */
body.cuppa-dark .modal,
body.cuppa-dark .dialog,
body.cuppa-dark [class*="modal"],
body.cuppa-dark [class*="popup"],
body.cuppa-dark [class*="overlay-content"] {
    background: #16213e !important;
    color: #E8E0D6 !important;
}
/* …and their descendants (audit DM-005): the parent rule darkens the card
   but page-level heading/body rules with explicit light-theme colours beat
   its inherited color — Wheel Words and Cuppa Squares help dialogs shipped
   dark-brown headings on the navy card (~1.25:1). Headings go cream,
   body copy muted-cream; anything with its own dark-theme rule can still
   override these by landing later in its page's cascade. */
body.cuppa-dark .modal h1, body.cuppa-dark .modal h2, body.cuppa-dark .modal h3,
body.cuppa-dark .dialog h1, body.cuppa-dark .dialog h2, body.cuppa-dark .dialog h3,
body.cuppa-dark [class*="modal"] h1, body.cuppa-dark [class*="modal"] h2, body.cuppa-dark [class*="modal"] h3,
body.cuppa-dark [class*="popup"] h1, body.cuppa-dark [class*="popup"] h2, body.cuppa-dark [class*="popup"] h3,
body.cuppa-dark [class*="overlay-content"] h1, body.cuppa-dark [class*="overlay-content"] h2, body.cuppa-dark [class*="overlay-content"] h3 {
    color: #E8D5B7;
}
body.cuppa-dark .modal p, body.cuppa-dark .modal li,
body.cuppa-dark .dialog p, body.cuppa-dark .dialog li,
body.cuppa-dark [class*="modal"] p, body.cuppa-dark [class*="modal"] li,
body.cuppa-dark [class*="popup"] p, body.cuppa-dark [class*="popup"] li,
body.cuppa-dark [class*="overlay-content"] p, body.cuppa-dark [class*="overlay-content"] li {
    color: #cfc8bd;
}

/* Tables */
body.cuppa-dark table { color: #E8E0D6; }
body.cuppa-dark th { background: rgba(232,213,183,0.08); color: #E8E0D6; }
body.cuppa-dark td { border-color: rgba(232,213,183,0.15); }

/* Toolbar / bottom bar */
body.cuppa-dark .toolbar,
body.cuppa-dark [class*="toolbar"],
body.cuppa-dark .bottom-bar,
body.cuppa-dark .status-bar {
    background: #16213e !important;
    color: #E8E0D6 !important;
}

/* Current clue bar (crossword-style games) */
body.cuppa-dark .current-clue-bar,
body.cuppa-dark [class*="clue-bar"] {
    background: #241d14 !important;
    color: #E8E0D6 !important;
}

/* Clue lists */
body.cuppa-dark .clue-list li { color: #E8E0D6; }
body.cuppa-dark .clue-list li:hover { background: rgba(232,213,183,0.06); }
body.cuppa-dark .clue-list li.active { background: rgba(232,213,183,0.12); }

/* Timer */
body.cuppa-dark .timer,
body.cuppa-dark [class*="timer"] {
    color: #C4956A;
}

/* Score / stats text */
body.cuppa-dark [class*="score"],
body.cuppa-dark [class*="stat"] {
    color: #E8E0D6;
}

/* Join Cuppa CTA (bottom banner) */
body.cuppa-dark #join-cuppa {
    background: #16213e !important;
    color: #E8E0D6 !important;
}
body.cuppa-dark #join-cuppa a {
    color: #C4956A !important;
}