/* Dark mode: the settings' "Turn dark mode on" (GameTheme in storage.js sets
   data-theme="dark" on <html> before anything paints). kit.css imports this;
   the pages that inline their own tokens (the solo menu, City Limits) link it.

   It recolours the pages: paper, panels, ink, rules and buttons, and turns the
   maps, globes and Border Draw's pad to night (below). Size It Up's board goes
   dark too, its shapes in pale ink; the answer colours (green found, red
   missed) are the same in both themes. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #130e26;
  --panel: #1f1840;
  --panel-2: #29204f;
  --wash: #33295f;
  --text: #f1ecff;
  --muted: #c0b6e6;
  --faint: #9086bd;
  --border: #4b3f80;
  --rule: #d9d0ff;
  --accent: #b09bff;
  --accent-bright: #ffcf4d;
  --accent-ink: #1d1838;
  --accent-soft: #2c2160;
  --accent-line: #6d58d6;
  --green: #5fd68a;
  --lime: #8fd48f;
  --yellow: #ffd45e;
  --orange: #ffa45e;
  --red: #ff6b7a;
  --right: #5fd68a;
  --right-soft: rgba(95, 214, 138, .18);
  --wrong: #ff6b7a;
  --wrong-soft: rgba(255, 107, 122, .18);
}

/* The drawing board (Size It Up's two countries to scale) goes dark with the
   page: the reference is drawn in the page's pale ink and the country being
   sized is a pale tint under its outline. It kept a light plate until 30 Sep
   2026, which glared on a dark page. Trend Lines' chart draws in the page's
   tokens too and lightens its five line colours itself (games/trend-lines.html). */
:root[data-theme="dark"] #board .sub { fill: rgba(239, 233, 225, 0.16); }

/* The maps and globes at night ("Moonlit", with the Pixel Edition's dusk in
   field.css): a deep blue sea a step lighter than the violet page, so a globe
   with no frame still stands off it, grey-blue land and pale borders. They
   were all violet for the Pixel Edition's first days (a sea darker than the
   page, which a frameless globe sank into), a navy "deep end" (22 October to
   November 2026), and a black sea with charcoal land before that.
   The globes read the same colours (vector-globe.js); Globe Trotter's textured
   globe takes them too (globe-trotter-view.js), and Border Draw's pad inks
   its drawing pale (border-draw.html). */
:root[data-theme="dark"] :is(
  .map-panel, #map-wrap, .guess-map-frame, .revealmap, .globe-frame, .hunt-views,
  .context-map, .world-map, #blind-globe, #lingocation-globe, #pad-wrap
) {
  color-scheme: dark;
  --rule: #4b3f80;
  --ocean: #1a2247;
  --ocean-swell: #34418a;
  --map-land: #3c4466;
  --map-land-deep: #323958;
  --map-edge: #d2d7f2;
  --map-edge-soft: #6b7398;
  --map-halo: #10162f;
  /* A named country: a deep green, so the bright pins on it still show. */
  --map-answered: #2a9d61;
  /* What a map marks in ink by day (Border Chain's ends, Blind Click's
     guess): the page's pale ink. */
  --map-mark: #f1ecff;
  color: var(--text);
}
/* City Limits' guess map keeps its own names for them. */
:root[data-theme="dark"] .guess-map-frame { --guess-sea: var(--ocean); --guess-land: var(--map-land); --guess-edge: var(--map-edge); --guess-halo: var(--map-halo); }

/* An answer's chip under the map (kit.css): green words on its dark tint. */
:root[data-theme="dark"] .chip.got { color: var(--green); }

/* Pieces that keep a light colour of their own (the landing's Solo play, the
   party podium's steps and the medals, solved Oracle 3 groups): their writing
   stays ink rather than turning pale on pale. */
:root[data-theme="dark"] :is(
  .welcome-actions .solo-button, .podium-step, .medal-symbol, .cx-band, .cx-grid i, .cx-summary li
) {
  --text: #1d1838; --muted: #4a4468; --faint: #6f6a8e; --border: #b3add0;
  color: #1d1838;
}

/* The party person (people.css) and Oracle 1's party runner (one-word.css)
   are pixel drawings with their own ink outline, the same by night. A pale
   rim stands them off the dark page. The lobby's ready and timed-out glows
   are more specific and replace the rim. */
:root[data-theme="dark"] :is(.country-avatar, .ow-runner), :root[data-theme="dark"] .account-chip .country-avatar.mini {
  filter: drop-shadow(1px 0 0 #f1ecff) drop-shadow(-1px 0 0 #f1ecff) drop-shadow(0 1px 0 #f1ecff) drop-shadow(0 -1px 0 #f1ecff);
}

/* Party: the notes, the leader's gold, the ready, timed-out and winner cards
   and a covered game take dark tints of their colours, not pale chips. */
:root[data-theme="dark"] { --gold-soft: #3a3120; --gold-line: #8a7236; --gold-ink: #ecd48f; --red-soft: #3b2220; }
:root[data-theme="dark"] :is(.party-notice, .medal-leader-banner) { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }
:root[data-theme="dark"] .party-error { background: var(--red-soft); color: #f0b1aa; border-color: #7d403a; }
:root[data-theme="dark"] :is(.medal-table .medal-leader, .standings-toggle) { background: var(--gold-soft); }
:root[data-theme="dark"] .player-card.winner { background: var(--gold-soft); border-color: var(--gold-line); }
:root[data-theme="dark"] .lobby-slots .player-card:has(.ready-ready) { background: var(--accent-soft); border-color: var(--accent-line); }
:root[data-theme="dark"] .lobby-slots .player-card:has(.ready-timed-out) { background: var(--red-soft); }
:root[data-theme="dark"] .player-ready-status.ready-ready { color: var(--green); }
:root[data-theme="dark"] .player-ready-button { color: var(--accent); }
:root[data-theme="dark"] .player-ready-button:hover { background: var(--accent-line); color: var(--text); }
:root[data-theme="dark"] .game-cover { background: #130e26f2; }
:root[data-theme="dark"] :is(#standings-summary, .live-medal-heading strong) { color: var(--gold-ink); }
:root[data-theme="dark"] .standings-toggle[aria-expanded="true"] { border-color: var(--gold-line); }

/* Oracle 1's hot, warm and cold misses: dark tints, light words. */
:root[data-theme="dark"] :is(.ow-clue, .game-view-clues) .heat.hot { color: #f0aaa2; border-color: #7d403a; background: #3b2220; }
:root[data-theme="dark"] :is(.ow-clue, .game-view-clues) .heat.warm { color: #efc27f; border-color: #7a5a2c; background: #36291a; }
:root[data-theme="dark"] :is(.ow-clue, .game-view-clues) .heat.cold { color: #9fc2e6; border-color: #3d5f80; background: #1c2a38; }
/* Its which-way arrows: a night chip, pale ink on violet. */
:root[data-theme="dark"] .ow-clue .guess .way { color: #f1ecff; border-color: #8a78d6; background: #29204f; box-shadow: 0 0 0 1px #05030c; }
:root[data-theme="dark"] .ow-clue .guess .way .way-arrow { filter: none; }

/* Hovers and highlights that were a pale tint of paper: a dark one. */
:root[data-theme="dark"] :is(.solo-leave [data-stay]:hover, #modal-actions button:hover, #help-close:hover) { background: #3a2d6e; }
:root[data-theme="dark"] :is(.ow-suggestion:hover, .ow-suggestion.active, button.ow-continent:hover,
  button.ow-continent:focus-visible, .suggestion:hover, .suggestion.active) { background: var(--wash); }

:root[data-theme="dark"] .report-form textarea { background: var(--panel); }

/* Oracle 3: dark tiles with light words; a chosen tile is inked light. */
:root[data-theme="dark"] { --cx-tile: #241c4a; --cx-tile-hover: #2f2560; }
:root[data-theme="dark"] .cx-tile[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }