/* Dark mode: the moonlit garden.
   Turned on by the moon button in the top bar (js/theme.js), which adds
   class="dark" to <html>. Loaded after style.css; style.css itself is unchanged. */

html.dark {
  color-scheme: dark;
  --paper: #2D2456;    /* small inset areas (speech bubble, price tags) */
  --dot: #3A2F66;
  --ink: #F7F3FF;      /* text and outlines turn light */
  --muted: #DDD5F5;
  --white: #3A2F66;    /* cards and buttons: lighter purple so they stand out */
  --line: #8577BE;     /* dashed and thin borders */
  --panel: #1E1736;    /* the big page card behind them: darker */
  --danger: #FF8AB4;
}

/* Bright things (yellow, mint and pink buttons, done cards, stickers) keep dark text,
   so they stay easy to read. */
  html.dark .btn,
  html.dark .letter-card.is-done,
  html.dark .level.is-done,
  html.dark .sticker.earned .disc,
  html.dark .sticker.earned:nth-child(even) .disc,
  html.dark .sticker.earned:nth-child(3n) .disc,
  html.dark .hand-state.ok,
  html.dark .big-sticker,
  html.dark #progressFill,
  html.dark .letter-counts li.full,
  html.dark .coins,
  html.dark .word-card.is-done,
  html.dark .word-letter.is-current,
  html.dark .word-letter.is-done,
  html.dark .shop-balance,
  html.dark .shop-action,
  html.dark .shop-item.is-equipped .shop-action,
  html.dark .coin-reward,
  html.dark .lb-row.is-me,
  html.dark .vol-steps li::before,
  html.dark .volunteer-card:hover,
  html.dark .letter-card.is-done.needs-practice {
  --ink: #2B1B4A;
  --muted: #5E4F7C;
  color: #2B1B4A;
}

/* Quiet (white) buttons are dark in dark mode, so they keep light text. */
html.dark .btn-quiet { --ink: #F1ECFF; color: #F1ECFF; box-shadow: 0 3px 0 #0C0818; }

/* Camera message bar */
html.dark .cam-status, html.dark .hand-state:not(.ok) { background: rgba(37, 29, 64, 0.94); }

/* Logo tagline: lighter pink so it shows on purple */
html.dark .brand-tag { color: #FF9CCB; }

/* Drawings (Mochi, stickers, logo) keep their dark plum outlines and faces. */
html.dark svg { --ink: #2B1B4A; --white: #FFFFFF; }

/* Night garden behind the page */
html.dark body.garden-bg::before {
  background: #241B4A url("../assets/garden-night.svg") center bottom / cover no-repeat;
}
html.dark .garden-bg .topbar,
html.dark .garden-bg main { background: var(--panel); box-shadow: 0 8px 0 rgba(5, 2, 15, 0.55); }
html.dark .garden-bg .foot,
html.dark dialog { background: var(--panel); }

/* Locked and not-yet-available cards: a soft tile instead of see-through,
   and less fading so the words stay readable. */
html.dark .letter-card.is-locked,
html.dark .level.is-locked,
html.dark .word-card.is-locked { background: #2A2150; }
html.dark .btn:disabled,
html.dark .letter-card:disabled,
html.dark .word-card:disabled,
html.dark .shop-item:disabled { opacity: 0.75; }

/* Moon / sun button */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; padding-left: 0.7rem; padding-right: 0.7rem; }
.theme-btn svg { width: 1.4rem; height: 1.4rem; display: block; }
.theme-btn .icon-sun { display: none; }
html.dark .theme-btn .icon-sun { display: block; }
html.dark .theme-btn .icon-moon { display: none; }

/* Shop prices on dark tags (not affordable yet, or already owned): white numbers */
html.dark .shop-item.is-expensive .shop-action,
html.dark .shop-item.is-owned .shop-action { color: #FFFFFF; --ink: #F7F3FF; }
html.dark .shop-action { box-shadow: inset 0 0 0 2px #FFFFFF; }

/* Review: Worst / Medium / Best piles become dark tinted cards with bright labels */
html.dark .deck-worst { --tint: #4A2346; --accent: #FF8AB4; }
html.dark .deck-medium { --tint: #4A3B22; --accent: #FFD23F; }
html.dark .deck-best { --tint: #1F4A3D; --accent: #7EE6BA; }
html.dark .deck-label { color: #2B1B4A; }
html.dark .deck-blurb,
html.dark .deck-meta { color: #E6DEFA; }
/* "Needs practice" on the yellow letter cards */
html.dark .letter-card.needs-practice .letter-card-status { color: #B3124E; }

/* Shop rarity cards (Common to Legendary): the light pastel tints are set by
   js/game.js, so they are overridden here with dark tints of each rarity color. */
html.dark .shop-item {
  background-image: none !important;
  background-color: color-mix(in srgb, var(--rarity-color, #7a8b99) 30%, #2A2150) !important;
}
html.dark .shop-item:has(.shop-rarity-dot[aria-label="Legendary"]) {
  background-image: linear-gradient(135deg, #5A2A4E 0%, #5A4A28 50%, #33306A 100%) !important;
}
html.dark .shop-desc { color: #E6DEFA; }
html.dark .shop-rarity-dot { border-color: #FFFFFF; }