/* Warm clay surfaces pair with the original sprite controls and artwork. */
:root[data-theme="dark"][data-theme-variant="dark"] {
  color-scheme: dark;
  --bg: #211b17;
  --bg-raised: #332820;
  --bg-sunken: #29211c;
  --ink: #f6eee5;
  --muted: #d0bfae;
  --line: #695141;
  --line-inset: #503e32;
  --accent: #f0ae75;
  --accent-ink: #2b1b10;
  --hard: #d3b5f4;
  --hard-ink: #241a34;
  --hard-soft: #2b2542;
  --hard-line: #63547d;
  --hard-strike: #d3b5f4;
  --hit: #65bc94;
  --hit-ink: #10291f;
  --partial: #e6c579;
  --partial-ink: #302510;
  --miss: #554237;
  --ok-text: #8ddab4;
  --error: #ffabab;
  --error-ink: #391a22;
  --map-opacity: .065;
  --shadow-float: 0 12px 36px #00000080;
  --v3-primary: #93c5fd;
}

:root[data-theme="dark"][data-theme-variant="dark"] body::before { filter: sepia(.55) saturate(.65); }
:root[data-theme="dark"][data-theme-variant="dark"] body.dock { --dock-surface: var(--bg-raised); }
:root[data-theme="dark"][data-theme-variant="dark"] :is(input, select, textarea) { color: var(--ink); accent-color: var(--accent); }
:root[data-theme="dark"][data-theme-variant="dark"] :is(input, textarea)::placeholder { color: #c9b7a5; opacity: 1; }
:root[data-theme="dark"][data-theme-variant="dark"] :is(button, a, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
:root[data-theme="dark"][data-theme-variant="dark"] :is(.site-bar, .issue-strip, .guess-box) { border-color: var(--line); }
:root[data-theme="dark"][data-theme-variant="dark"] .site-bar { background: var(--bg-sunken); }
:root[data-theme="dark"][data-theme-variant="dark"] .issue-strip { background: var(--bg); }

/* Keep the original button artwork; dampen its frame without dimming labels. */
:root[data-theme="dark"][data-theme-variant="dark"] .sprite-ui {
  --sprite-neutral-filter: brightness(.36) sepia(.22) saturate(.9);
  --sprite-neutral-hover: brightness(.4) sepia(.22) saturate(.95);
  --sprite-neutral-press: brightness(.32) sepia(.22) saturate(.9);
}
:root[data-theme="dark"][data-theme-variant="dark"] .sprite-ui :is(.result-card, .share-menu-panel)::before,
:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites :is(.mode-card, .mode-card-half, .endless-panel, .endless-row)::before,
:root[data-theme="dark"][data-theme-variant="dark"] .sprite-ui .result[data-variant] :is(.result-naming, .spread-panel)::before,
:root[data-theme="dark"][data-theme-variant="dark"] .sound-player::before { content: none; }
:root[data-theme="dark"][data-theme-variant="dark"] .sprite-ui .account-danger-button { color: var(--error); }

:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites :is(.mode-card, .mode-card-half, .endless-panel) {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
}
:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites :is(a.mode-card, a.mode-card-half, .endless-row):hover {
  background: #403126;
  border-color: #997354;
}
:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites :is(.mode-card, .mode-card-half) :is(h2, .mode-card-status),
:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites :is(.endless-row-name, .endless-stat-value) { color: var(--ink); }
:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites :is(.mode-card, .mode-card-half) p,
:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites :is(.endless-row-state, .endless-stat-label) { color: var(--muted); }
:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites .mode-card-half-hard :is(h2, .mode-card-hard-eyebrow) { color: var(--hard); }
:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites .mode-card-art { filter: none; opacity: .65; mask-image: linear-gradient(#000 30%, transparent); }
:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites .endless-row {
  background: var(--bg-sunken);
  border: 1px solid var(--line-inset);
  color: var(--ink);
}
:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites .endless-row::after { opacity: .06; }
:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites .hard-term {
  color: var(--hard);
  background: var(--hard-soft);
  border-color: var(--hard-line);
}

:root[data-theme="dark"][data-theme-variant="dark"] .sprite-ui .result-card {
  --muted: #d0bfae;
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
:root[data-theme="dark"][data-theme-variant="dark"] .sprite-ui .result[data-variant] .result-card {
  background: var(--bg-raised);
  border: 1px solid #94765e;
  box-shadow: var(--shadow-float);
}
:root[data-theme="dark"][data-theme-variant="dark"] .sprite-ui .result[data-variant] :is(.result-naming, .spread-panel) {
  border: 1px solid var(--line-inset);
  border-image: none;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}
:root[data-theme="dark"][data-theme-variant="dark"] .sprite-ui .result[data-variant] .result-naming { padding: .875rem; }
:root[data-theme="dark"][data-theme-variant="dark"] .sprite-ui .result[data-variant] .result-hero {
  background-image: linear-gradient(#29211cc9, #29211ced), var(--result-scene);
}
:root[data-theme="dark"][data-theme-variant="dark"] .sprite-ui .result[data-variant] .result-portrait-frame {
  background: var(--bg-sunken);
  border-color: var(--accent);
}
:root[data-theme="dark"][data-theme-variant="dark"] .sprite-ui .share-menu-panel {
  border: 1px solid var(--line);
  border-image: none;
  background: var(--bg-raised);
  box-shadow: var(--shadow-float);
}
:root[data-theme="dark"][data-theme-variant="dark"] .spread-row { color: var(--ink); }
:root[data-theme="dark"][data-theme-variant="dark"] .spread-row:not(.is-current):not(.is-lost) .spread-bar { background: #d4a47c; }
:root[data-theme="dark"][data-theme-variant="dark"] .spread-row.is-lost .spread-bar,
:root[data-theme="dark"][data-theme-variant="dark"] .spread-row.is-current.is-lost .spread-tag { background: #d0bfae; }
:root[data-theme="dark"][data-theme-variant="dark"] .spread-row.is-current.is-lost .spread-tag { color: #29211c; }
:root[data-theme="dark"][data-theme-variant="dark"] .spread-panel { --muted: #d0bfae; }

:root[data-theme="dark"][data-theme-variant="dark"] .sound-player {
  --muted: #d0bfae;
  --sound-marker: #c9b7a5;
  --sound-marker-active: #f0ae75;
  --sound-wave-played: #93c5fd;
  --sound-wave-unlocked: #f0ae75;
  --sound-wave-locked: #94765e;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
}
:root[data-theme="dark"][data-theme-variant="dark"] .sound-player-heading {
  background-image: linear-gradient(#332820de, #332820ed), url("data/sprites/scenes/concert-stage.webp");
  border-color: var(--line);
}
:root[data-theme="dark"][data-theme-variant="dark"] .sound-playhead { background: #93c5fd; }
:root[data-theme="dark"][data-theme-variant="dark"] .sound-clips .is-current { color: var(--accent); }
:root[data-theme="dark"][data-theme-variant="dark"] :is(.sound-cutoff, .sound-cutoff::before) { background: var(--accent); }

@media (max-width: 30rem) {
  :root[data-theme="dark"][data-theme-variant="dark"] .sprite-ui .result[data-variant] .result-card { border-radius: 1rem 1rem 0 0; }
}

:root[data-theme="dark"][data-theme-variant="dark"] .picker-sprites :is(.mode-card, .mode-card-half) .mode-card-cta {
  width: 100%;
  padding: .625rem .5rem;
}

:root[data-theme="dark"][data-theme-variant="dark"] :is(.result, details.share-preview[open], details.how-to[open], details.feedback-sheet[open], details.lexicon[open], details.account-sheet[open])::before {
  background: #120d09d9;
}