/* Night HUD / lobby. Load AFTER game/style.css.
   night.js applyTheme() sets <html data-theme="day|night"> and the colour tokens
   (--fog --ground --asphalt --line --hair --muted --body --ink --ember, plus --panel --track
   --scrim --field --on-ember --error) as inline custom properties on :root, so every rule in
   style.css that uses var(--…) follows. This file only covers the colours style.css,
   index.html and hud.js write as literals, and only under [data-theme="night"]: day is untouched.

   Night contrast (WCAG 2): text #E8E6E1 on #121317 = 14.9:1, on #1A1B20 = 13.8:1;
   muted #8A877F on #121317 = 5.2:1, on #1A1B20 = 4.8:1; body #B9B6AF on #121317 = 9.2:1;
   #121317 on ember #FF4A1C = 5.5:1 (the hot multiplier); error #FF7A55 on #1A1B20 = 6.7:1. */

:root[data-theme="night"] .meter { background: var(--track); }
:root[data-theme="night"] .hud-board { background: var(--panel); }
:root[data-theme="night"] .field input { background: var(--field); }
:root[data-theme="night"] .err { color: var(--error); }
:root[data-theme="night"] #pause { background: var(--scrim); }
:root[data-theme="night"] #finish { background: rgba(11,12,15,.6); }
:root[data-theme="night"] .mult.hot { color: var(--on-ember); }
:root[data-theme="night"] .pills button[aria-checked="true"] { color: var(--ground); }
:root[data-theme="night"] .primary { color: var(--ground); }
:root[data-theme="night"] .swatches button[aria-checked="true"] { box-shadow: inset 0 0 0 4px var(--line); }
/* index.html angle gauge: presentation attributes lose to CSS */
:root[data-theme="night"] #hud svg circle { stroke: var(--track); }
:root[data-theme="night"] #hudAngleArc, :root[data-theme="night"] #hudAngleNeedle { stroke: var(--ink); }
/* name tags float over the dark road: keep them a panel, not a hole */
:root[data-theme="night"] #tags .tag span:first-child { background: var(--line); color: var(--ink); box-shadow: 0 0 0 1px var(--hair); }

/* leaderboard swatches: the ink livery would vanish on the dark panel */
:root[data-theme="night"] .board .sw { box-shadow: 0 0 0 1px var(--hair); }

/* Day / Night switch (lobby card + pause card). Uses tokens only, so it works in both themes. */
.theme-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-toggle .seg { display: flex; }
.theme-toggle .seg button { height: 36px; padding: 0 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--mono); font-size: 14px; cursor: pointer; }
.theme-toggle .seg button + button { border-left: none; }
.theme-toggle .seg button[aria-checked="true"] { background: var(--ink); color: var(--ground); }