/* Dark paper and light ink. Game colors are handled by the shared renderer. */
:root[data-theme="dark"] {
  --paper: #14171d;
  --ink: #e7e9ee;
  --muted: #a1a8b4;
  --red: #f07065;
  --panel: #1c2028;
  --line: #586170;
}
:root[data-theme="dark"] #game { background: var(--paper); }
:root[data-theme="dark"] .menu {
  background: linear-gradient(105deg, #14171dbf 0%, #14171d8c 32%, #14171d26 65%, #14171d0d 100%);
}
:root[data-theme="dark"] .menu .intro-card {
  border-color: var(--line);
  box-shadow: 6px 6px 0 #0009;
}
:root[data-theme="dark"] :is(.paper-modal, .replay-footer, .round-banner, .spectator-bar, .warmup-banner, .quad-status) {
  background: var(--panel);
}
:root[data-theme="dark"] :is(.paper-modal, .server-row) {
  border-color: var(--line);
  box-shadow: 7px 7px 0 #0009;
}
:root[data-theme="dark"] .overlay,
:root[data-theme="dark"] .paper-modal::backdrop { background: #05070bad; }
:root[data-theme="dark"] :is(.match-pill, .vitals, .leader-strip, .replay-heading) { background: #1c2028ed; }
:root[data-theme="dark"] :is(.weapon-info > span, .fps-counter, .menu .quick-controls kbd) { background: #1c2028c9; }
:root[data-theme="dark"] .menu .home-actions .outline-button { background: #1c2028c9; }
:root[data-theme="dark"] .menu .home-actions .outline-button:hover { background: #2b303b; }
:root[data-theme="dark"] :is(.host-modal input, .host-modal select) { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] :is(.primary-button, .server-badge, .frag-card, .warmup-banner button) {
  color: #242424;
  border-color: #242424;
  box-shadow: 4px 4px 0 #0009;
}
:root[data-theme="dark"] .primary-button:hover { box-shadow: 2px 2px 0 #0009; }
:root[data-theme="dark"] :is(.icon-button:hover, .outline-button:hover) { background: #e7e9ee12; }
:root[data-theme="dark"] .server-row:hover:not(:disabled) { background: #edb93018; }
:root[data-theme="dark"] :is(.standings tr.is-player, .death-scores tr.is-player) { background: #edb93026; }
:root[data-theme="dark"] .rocket-tip { background: #edb93018; border-color: #edb93070; }
:root[data-theme="dark"] .reload-track { background: #e7e9ee30; }
:root[data-theme="dark"] .replay-track { background: #e7e9ee20; }
:root[data-theme="dark"] .damage { mix-blend-mode: screen; }
:root[data-theme="dark"] .crosshair { filter: drop-shadow(0 1px 1px #000); }

:root[data-theme="dark"] :is(.menu .intro-description, .menu .build-label, .menu .load-status, .menu .doodle-note, .arena-stamp, .solo-note,
  .paper-modal > p, .match-description, .host-note, .local-modal .match-options label,
  .local-modal .match-description, .local-modal #difficulty-description, .local-modal #rules-description,
  .local-modal .solo-note, .difficulty-options p) { color: var(--muted); }
:root[data-theme="dark"] :is(.menu .masthead, .menu .menu-footer, .build-label b, .local-tools,
  .local-modal .match-options select, .quick-controls kbd, .control-grid kbd, .standings, .standings td,
  .menu .arena-stamp span + span) { border-color: var(--line); }
:root[data-theme="dark"] :is(.quick-controls kbd, .control-grid kbd) { box-shadow: 2px 2px 0 #0008; }

/* Only the small, monochrome logo assets need a filter. The scene does not. */
:root[data-theme="dark"] :is(.brand-mark, .brand-wordmark, .duudle-title img, .hud-brand img) { filter: invert(1); }
:root[data-theme="dark"] .stickman-art [stroke="#242424"] { stroke: var(--ink); }
:root[data-theme="dark"] .stickman-art [fill="#242424"] { fill: var(--ink); }
:root[data-theme="dark"] .stickman-art [fill="#ffffff"] { fill: var(--paper); }
:root[data-theme="dark"] .stickman-art :is([fill="#cfcfcf"], [fill="#e7e7e7"]) { fill: #343b47; }
:root[data-theme="dark"] .stickman-art [stroke="#989898"] { stroke: #7e8899; }

:root[data-theme="dark"] #touch-stick { background: #1c202899; border-color: #e7e9ee60; }
:root[data-theme="dark"] #touch-stick > div { background: #e7e9ee50; border-color: #e7e9ee70; }
:root[data-theme="dark"] #touch-controls button { background: #1c2028cc; }
:root[data-theme="dark"] #touch-fire { color: #242424; }

/* This control works before the game finishes loading and in the pause menu. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 8px 10px; flex-shrink: 0;
  border: 1.5px solid currentColor; border-radius: 3px;
  background: var(--paper); color: var(--ink); font: 19px/1 Hand, cursive;
  white-space: nowrap; cursor: pointer;
}
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.theme-toggle[aria-pressed="true"] svg { fill: currentColor; }
.theme-toggle:hover { background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.theme-toggle:focus-visible { outline: 3px solid #2364e8; outline-offset: 4px; }
.pause-modal .theme-toggle { width: auto; margin: 0 0 18px; }
@media (max-width: 420px) {
  .menu .theme-toggle { padding-inline: 8px; }
  .menu .theme-toggle svg { display: none; }
  .menu .brand-wordmark { width: 86px; }
}