/* ═══════════════════════════════════════
   DARK MODE — body.dark-mode
   Applied when icon theme resolves to dark
   ═══════════════════════════════════════ */

body.dark-mode {
  --text: #d8d8ee;
  --shadow: rgba(0, 0, 0, 0.5);
  color: #d0d0e8;                /* cascade light text to all descendants */
}

/* ── Dark overlay fades in over the body background ─────────────────────────
   Using ::before so the gradient can cross-fade smoothly instead of
   snapping — CSS can't interpolate between two gradients directly.          */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #0f0f1e 0%, #1a1a30 100%);
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
body.dark-mode::before {
  opacity: 1;
}

/* Hide day clouds in dark mode */
body.dark-mode .cloud {
  opacity: 0;
  transition: opacity 0.9s ease;
}

/* ── Setup / time screen ─────────────────────────────── */
body.dark-mode .time-title {
  color: #d8d8ee;
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
}

body.dark-mode .time-sub {
  color: #8080b0;
}

body.dark-mode .time-section-lbl {
  color: #5858a0;
}

body.dark-mode .time-lang-btn,
body.dark-mode .time-age-btn {
  background: #1e1e38;
  border-color: #34345a;
  color: #d0d0e8;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

body.dark-mode .time-lang-btn.active,
body.dark-mode .time-age-btn.active {
  background: #192e19;
  border-color: #66bb6a;
  color: #a5d6a7;
}

body.dark-mode .time-btn {
  background: #1e1e38;
  border-color: #28384a;
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
}

body.dark-mode .time-min {
  color: #d0d0e8;
}

body.dark-mode .time-label {
  color: #6060a0;
}

body.dark-mode .time-btn-selected {
  background: linear-gradient(135deg, #192e19, #1e1e38) !important;
  border-color: #66bb6a !important;
}

body.dark-mode .time-btn-selected .time-min  { color: #66bb6a; }
body.dark-mode .time-btn-selected .time-label { color: #3a8e3a; }

/* ── Settings overlay card ───────────────────────────── */
body.dark-mode .settings-card {
  background: #1c1c32;
}

body.dark-mode .settings-title {
  color: #d8d8ee;
}

body.dark-mode .settings-close {
  background: #28284a;
  color: #b0b0d0;
}

body.dark-mode .settings-end {
  background: #251420;
  border-color: #5a2535;
  color: #ff8a80;
}

body.dark-mode .feedback-area {
  background: #181828;
  border-color: #33335a;
  color: #d0d0e8;
}

body.dark-mode .feedback-area::placeholder {
  color: #5050a0;
}

body.dark-mode .feedback-send {
  background: linear-gradient(135deg, #1a3a5c, #0e2040);
  border-color: #3a6090;
  color: #90c8f0;
}

body.dark-mode .feedback-area:focus {
  border-color: #4a80b0;
}

/* ── Hub game grid ───────────────────────────────────── */
body.dark-mode .hub-btn {
  background: #1c1c32;
  border-color: #2e2e50;
}

body.dark-mode .hub-text-title { color: #d0d0e8; }
body.dark-mode .hub-text-desc  { color: #52529a; }

/* ── Timer bar ───────────────────────────────────────── */
body.dark-mode #timerBar {
  background: rgba(10, 10, 22, 0.9);
}

body.dark-mode .tb-track {
  background: rgba(255,255,255,.07);
}

/* ── Cog + info persistent buttons ──────────────────── */
body.dark-mode #settingsCog,
body.dark-mode #infoBtn {
  background: rgba(18, 18, 38, 0.94);
  border-color: rgba(255,255,255,.1);
  color: #c0c0e0;
}

body.dark-mode #infoBtn {
  color: #5aacde;
}

/* ── PIN overlay ─────────────────────────────────────── */
body.dark-mode .pin-card {
  background: #1c1c32;
}

body.dark-mode .pin-title {
  color: #d8d8ee;
}

body.dark-mode .pin-dot {
  border-color: #5555a0;
}

body.dark-mode .pin-key {
  background: #2a2a4a;
  color: #d0d0e8;
}

body.dark-mode .pin-key:active {
  background: #38387a;
}

body.dark-mode .pin-key.del {
  background: #3a1828;
}

/* ── Match settings bottom sheet ─────────────────────── */
body.dark-mode #matchSettingsBg {
  background: rgba(0,0,0,.65);
}

body.dark-mode #matchSettingsSheet {
  background: #1c1c32;
  box-shadow: 0 -4px 28px rgba(0,0,0,.5);
}

body.dark-mode .ms-title { color: #d0d0e8; }
body.dark-mode .ms-lbl   { color: #5050a0; }

body.dark-mode .ms-cat {
  background: #222242;
  border-color: #33335a;
  color: #d0d0e8;
}

body.dark-mode .ms-cat.on {
  background: #192e19;
  border-color: #66bb6a;
  color: #a5d6a7;
}

body.dark-mode .ms-diff {
  background: #222242;
  border-color: #33335a;
  color: #d0d0e8;
}

body.dark-mode .ms-diff.on {
  background: #192e19;
  border-color: #66bb6a;
  color: #a5d6a7;
}

/* ── Countdown overlay ───────────────────────────────── */
body.dark-mode #countdownOverlay {
  background: rgba(0,0,15,.75);
}

/* ── Title text-shadows (white glow → dark glow) ────── */
body.dark-mode .menu-title,
body.dark-mode .land-title {
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}

body.dark-mode .gtitle {
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}

/* ── Hub text labels ─────────────────────────────────── */
body.dark-mode .menu-lbl,
body.dark-mode .hub-toggle-lbl { color: #4848a0; }

body.dark-mode .cn { color: #d0d0e8; }
body.dark-mode .cd { color: #6060a0; }

body.dark-mode .menu-sub { color: #9090c0; opacity: 1; }

/* ── Info modal (inline-styled card) ────────────────── */
body.dark-mode #infoModal > div {
  background: #1c1c32 !important;
}

body.dark-mode #infoModalTitle {
  color: #d8d8ee !important;
}

body.dark-mode #infoModalBody {
  color: #8080b8 !important;
}

/* ── Ko-fi age gate modal ────────────────────────────── */
body.dark-mode #kofiModal > div {
  background: #1c1c32 !important;
  color: #d8d8ee !important;
}

body.dark-mode #kofiModal div {
  color: #d8d8ee !important;
}

body.dark-mode #kofiModal div[style*="color:#888"] {
  color: #7878b0 !important;
}

body.dark-mode #kofiYearInput {
  background: #181828 !important;
  border-color: #33335a !important;
  color: #d0d0e8 !important;
}

/* ── Rainbow settings popup ──────────────────────────── */
body.dark-mode #rbSettings {
  background: #1c1c32 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
}

body.dark-mode #rbSettings div,
body.dark-mode #rbSettings label {
  color: #d0d0e8 !important;
}

/* ── Guided-play warn card ───────────────────────────── */
body.dark-mode #gpWarnCard {
  background: #1c1c32;
}

/* ── wcset (weather/color set) labels ───────────────── */
body.dark-mode .wcset-lbl { color: #5050a0; }

/* ── Hub toggle buttons (mute / lang) ───────────────── */
body.dark-mode #muteBtn,
body.dark-mode #langBtn {
  background: #1e1e38;
  border-color: #4a6090;
  color: #d0d0e8;
}

/* ── Icon card backgrounds ───────────────────────────── */
body.dark-mode .cat-icon-wrap {
  background: #1c1c32;
}

/* ── See-more button ─────────────────────────────────── */
body.dark-mode .see-more-btn {
  color: #8080c0;
}

/* ── Catch-all: any remaining dark text in hub ───────── */
body.dark-mode #hubScreen,
body.dark-mode #menuScreen {
  color: #d0d0e8;
}

/* ══════════════════════════════════════════════════════
   SMOOTH TRANSITION — dark ↔ light
   ══════════════════════════════════════════════════════ */

/* Body fades via a ::before overlay so the gradient transition is smooth
   (CSS can't directly animate between two gradients, but can fade opacity) */
body {
  transition: color 0.9s ease;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #0f0f1e 0%, #1a1a30 100%);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  z-index: 0;
}

body.dark-mode::before {
  opacity: 1;
}

/* All the UI containers that visibly change between modes */
.settings-card,
.hub-btn,
.pin-card,
.pin-key,
.time-lang-btn,
.time-age-btn,
.time-btn,
.ms-diff,
#timerBar,
#settingsCog,
#infoBtn,
#muteBtn,
#langBtn,
.cat-icon-wrap,
#matchSettingsSheet {
  transition:
    background      0.9s ease,
    background-color 0.9s ease,
    border-color    0.9s ease,
    color           0.9s ease,
    box-shadow      0.9s ease;
}

/* Icon images fade when src swaps */
.cat-icon-img {
  transition: opacity 0.9s ease;
}

/* ══════════════════════════════════════════════════════
   CATCH-ALL: force all text light in UI screens
   Covers hardcoded inline color styles (color:#5d4e3c,
   color:#444, etc.) that CSS variables can't reach.
   Scoped to non-game screens so game UIs are unaffected.
   ══════════════════════════════════════════════════════ */
body.dark-mode #hubScreen *,
body.dark-mode #menuScreen *,
body.dark-mode #landScreen *,
body.dark-mode #setupScreen *,
body.dark-mode #doneScreen *,
body.dark-mode .settings-card *,
body.dark-mode #infoModal *,
body.dark-mode #kofiModal *,
body.dark-mode #timerBar *,
body.dark-mode #rbSettings * {
  color: #d0d0e8 !important;
}

/* Restore specific colours that should stay in those screens */
body.dark-mode .settings-end            { color: #ff8a80 !important; }
body.dark-mode .feedback-send           { color: #70aad8 !important; }
body.dark-mode #infoBtn                 { color: #5aacde !important; }
body.dark-mode .land-sub                { color: #66bb6a !important; }
body.dark-mode .done-prompt-text        { color: #7ab890 !important; }
body.dark-mode .time-lang-btn.active,
body.dark-mode .time-age-btn.active     { color: #a5d6a7 !important; }
body.dark-mode .time-btn-selected .time-min   { color: #66bb6a !important; }
body.dark-mode .time-btn-selected .time-label { color: #3a8e3a !important; }
body.dark-mode .ms-diff.on              { color: #a5d6a7 !important; }