/* 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: #151310;
  --panel: #1e1b17;
  --panel-2: #29251f;
  --wash: #312c25;
  --text: #efe9e1;
  --muted: #bfb6ab;
  --faint: #978e84;
  --border: #5b544b;
  --rule: #efe9e1;
  --accent: #52c985;
  --accent-bright: #48db7e;
  --accent-ink: #07240f;
  --accent-soft: #16311f;
  --accent-line: #2f7c4c;
  --green: #6cc28e;
  --lime: #89ba8a;
  --yellow: #d9b24f;
  --orange: #d9aa7a;
  --red: #e38a82;
}

/* 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 ("Deep end", the page's own night in
   field.css): a sea darker than the navy panels, land a lit steel blue and
   borders in a pale sonar blue. They were a black sea, charcoal land and
   lamplight borders (to 22 October 2026), which went muddy on the navy page.
   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: #2c4570;
  --ocean: #06101f;
  --ocean-swell: #18305a;
  --map-land: #233f66;
  --map-land-deep: #1b3252;
  --map-edge: #6a95cc;
  --map-edge-soft: #3e6290;
  --map-halo: #04070d;
  /* 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: #e8f1ff;
  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: #13110f; --muted: #46413e; --faint: #6f6862; --border: #aaa39d;
  color: #13110f;
}

/* The party person (people.css), and Oracle 1's party runner drawn after it
   (one-word.css), keep the light-mode drawing: ink outline and feet, white
   face, dark eyes. 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) { --text: #13110f; --panel: #f8f5f1; }
:root[data-theme="dark"] :is(.country-avatar, .ow-runner), :root[data-theme="dark"] .account-chip .country-avatar.mini {
  filter: drop-shadow(1px 0 0 #efe9e1) drop-shadow(-1px 0 0 #efe9e1) drop-shadow(0 1px 0 #efe9e1) drop-shadow(0 -1px 0 #efe9e1);
}

/* 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"] .game-cover { background: #151310f5; }
: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 glowing on navy. */
:root[data-theme="dark"] .ow-clue .guess .way { color: #e3f6ff; border-color: #7d93b8; background: #16284a; box-shadow: 0 0 8px rgba(169, 198, 255, .4), 0 0 2px rgba(169, 198, 255, .6); }
:root[data-theme="dark"] .ow-clue .guess .way .way-arrow { filter: drop-shadow(0 0 2px rgba(227, 246, 255, .7)); }

/* Hovers and highlights that were a pale tint of paper: a dark one. */
:root[data-theme="dark"] :is(.btn:hover, .report-send:hover:enabled, .report-primary:hover,
  .solo-leave [data-stay]:hover, #modal-actions button:hover, #help-close:hover) { background: #1f4630; }
: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"] .party-button.primary:hover { background: #cfe9d6; }
: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: #2c2822; --cx-tile-hover: #38332c; }
:root[data-theme="dark"] .cx-tile[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }