html { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #17181c; --page-dots: #303137;
  --accent-hover: #f0c98f; --selected-bg: #4c3d2c; --selected-ink: #f1dab8;
  --ink: #f4f1e8; --muted: #b1adb0; --line: #44454d;
  --surface: #24262c; --surface-soft: #2a2c33; --surface-accent: #303035;
  --accent: #e6b66c; --accent-ink: #29221a; --warm: #c8d3ce; --warm-ink: #1c3027;
  --purple: var(--accent); --purple-dark: var(--accent); --yellow: var(--warm);
  --green: #afd2b6; --red: #edaaa5; --shadow: 4px 5px 0 #0c0d10;
}
.theme-toggle { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 8px; background: #fff; color: var(--purple-dark); border: 2px solid var(--line); border-radius: 12px; box-shadow: 2px 3px 0 var(--line); }
.theme-toggle:hover { background: #eee8ff; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 18px; }
.theme-choice { display: flex; align-items: center; flex-direction: column; gap: 8px; min-height: 120px; padding: 14px 6px; background: #f7f5fc; border: 2px solid #d6d0e3; border-radius: 16px; }
.theme-choice > span { font-size: 26px; line-height: 1; }
.theme-choice strong { font-size: 15px; }
.theme-choice small { font-size: 10px; color: var(--muted); font-weight: 700; }
.theme-choice[aria-pressed="true"] { background: #e9e0ff; border-color: #7650cf; box-shadow: 0 0 0 2px #7650cf; color: #4d279d; }
.theme-status { min-height: 40px; }
@media (max-width: 620px) {
  .site-header { gap: 10px; }
  .site-header nav { gap: 7px; }
  .site-header .nav-link[data-action="help"] { width: 40px; padding: 0; font-size: 0; }
  .site-header .nav-link[data-action="help"]::after { content: '?'; display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid currentColor; border-radius: 50%; font-size: 17px; margin: auto; }
  .site-header .record-button { width: 40px; padding: 6px; }
  .theme-toggle { width: 40px; box-shadow: 2px 2px 0 var(--line); }
  .theme-options { gap: 8px; }
  .theme-choice { padding: 14px 4px; }
  .theme-choice small { font-size: 9px; }
}
@media (max-width: 360px) { .site-header .brand { font-size: 18px; gap: 7px; } .site-header .brand-symbol { width: 32px; height: 35px; } .site-header nav { gap: 5px; } .site-header { gap: 5px; padding-left: 12px; padding-right: 12px; } }

/* Graphite and honey: warm charcoal surfaces, amber actions and sage timers. */
html[data-theme="dark"] body { background-color: var(--page-bg); background-image: radial-gradient(var(--page-dots) 1.2px, transparent 1.2px); }
html[data-theme="dark"] :is(.record-button,.theme-toggle,.feature,.game-wheel-card,.question-card,.review-item,dialog,.round-ready-card,.practice-mode,.review-controls,.home-faq details,.guide-steps li,.wheel-caption,.close-button,.sound-toggle) { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] :is(.mode-card,.question-card,.game-wheel-card,.result-summary,.round-ready-card,dialog,.feature) { box-shadow: 4px 5px 0 #0c0d10; }
html[data-theme="dark"] :is(.daily-mode,.result-share,.question-top,.mode-message) { background: var(--surface-accent); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .result-summary { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] :is(.home-copy,.mode-card p,.share-invitation,.share-note,.share-legend,.review-count,.section-intro p,.guide-steps p,.home-faq p,.guide-page p,.countdown-note,.countdown-intro,.countdown-caption,.under-cta,.wheel-preview-heading > span:last-child,.keyboard-hint,.dialog-note,.how-list p,.record-item small,.share-status) { color: var(--muted); }
html[data-theme="dark"] :is(.home-description,.guide-link,.home-rules-link:hover,.share-copy,.theme-toggle,.wheel-preview-heading > span:first-child,.share-card-heading) { color: var(--accent); }
html[data-theme="dark"] .home-heading .marked:after { background: var(--selected-bg); }
html[data-theme="dark"] :is(.primary-button,.start-button,.countdown-value,.small-letter) { background: var(--accent); color: var(--accent-ink); }
html[data-theme="dark"] .primary-button:hover { background: var(--accent-hover); color: var(--accent-ink); }
html[data-theme="dark"] :is(.secondary-button,.answer-input,.share-manual,.theme-choice,.countdown-steps span,.review-letter,.guide-steps li > span,.help-icon,.how-list > li > span,kbd) { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .answer-input { background: var(--page-bg); border-color: var(--line); }
html[data-theme="dark"] .answer-input::placeholder { color: #a5a2ac; }
html[data-theme="dark"] .clear-answer { color: #c8c4ca; }
html[data-theme="dark"] .clear-answer:hover { background: var(--surface-accent); color: var(--ink); }
html[data-theme="dark"] .answer-input[aria-invalid="true"] { background: #503438; border-color: #edaaa5; }
html[data-theme="dark"] :is(.sticker,.mode-icon,.pass-button) { background: var(--warm); color: var(--warm-ink); }
html[data-theme="dark"] :is(.intro-badge,.wheel-tag,.result-sticker,.timer,.mobile-timer) { background: var(--warm); color: var(--warm-ink); border-color: var(--line); }
html[data-theme="dark"] .brand-symbol { color: var(--accent-ink); background: var(--accent); }
html[data-theme="dark"] .brand-symbol > span { color: var(--warm-ink); }
html[data-theme="dark"] :is(.feature:nth-child(1) .feature-icon,.theme-choice[aria-pressed="true"]) { background: var(--selected-bg); border-color: var(--accent); color: var(--selected-ink); }
html[data-theme="dark"] :is(.feature:nth-child(2) .feature-icon,.ready-letters span:nth-child(2)) { background: var(--warm); color: var(--warm-ink); }
html[data-theme="dark"] :is(.feature:nth-child(3) .feature-icon,.practice-mode .mode-icon,.ready-letters span:nth-child(3)) { background: #343b38; color: #d3ddd6; }
html[data-theme="dark"] .ready-letters span:first-child { background: var(--accent); color: var(--accent-ink); }
html[data-theme="dark"] .letter { background: var(--surface-soft); color: var(--ink); }
html[data-theme="dark"] :is(.letter.correct,.review-letter.correct,.share-tile.correct,.share-legend i.correct,.feedback.success,.review-empty) { background: #304a3e; color: #d0efda; border-color: #58715d; }
html[data-theme="dark"] :is(.letter.wrong,.review-letter.wrong,.share-tile.wrong,.share-legend i.wrong,.feedback.error,.mode-message.error) { background: #503438; color: #ffd5d4; border-color: #7c5155; }
html[data-theme="dark"] :is(.letter.passed,.review-letter.passed,.share-tile.passed,.share-legend i.passed,.feedback.pass) { background: #514933; color: #f7e3ae; border-color: #7c7051; }
html[data-theme="dark"] :is(.share-tile.pending,.share-legend i.pending) { background: #2a2c33; color: #c8c4ca; border-color: var(--line); }
html[data-theme="dark"] .letter.active { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--selected-bg),2px 3px 0 #0c0d10; }
html[data-theme="dark"] :is(.feedback,.dialog-note,.no-script-note,.round-reminder) { background: var(--surface-soft); color: #e1dde1; border-color: var(--line); }
html[data-theme="dark"] .feedback.success { background: #304a3e; color: #d0efda; }
html[data-theme="dark"] .feedback.error { background: #503438; color: #ffd5d4; }
html[data-theme="dark"] .feedback.pass { background: #514933; color: #f7e3ae; }
html[data-theme="dark"] :is(.game-counts,.result-summary .game-counts,.home-guide,.feature-strip,.wheel-preview-heading,.record-item,.how-list li) { border-color: #44454d; }
html[data-theme="dark"] :is(.game-counts > div:nth-child(1) strong,.review-item[data-status="correct"] .review-status) { color: #afd2b6; }
html[data-theme="dark"] :is(.game-counts > div:nth-child(2) strong,.review-item[data-status="wrong"] .review-status,.finish-round) { color: #edaaa5; }
html[data-theme="dark"] :is(.game-counts > div:nth-child(3) strong,.review-item[data-status="passed"] .review-status) { color: var(--warm); }
html[data-theme="dark"] .review-content .your-guess { background: #503438; color: #ffd5d4; }
html[data-theme="dark"] .review-controls button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
html[data-theme="dark"] .review-controls button > span { background: #3c3b40; color: #e5e0e3; }
html[data-theme="dark"] .countdown-steps .current { background: var(--warm); color: var(--warm-ink); }
html[data-theme="dark"] .countdown-steps .done { background: #304a3e; color: #d0efda; }
html[data-theme="dark"] .countdown-card { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .countdown-number.ready { color: var(--accent-ink); }
html[data-theme="dark"] .countdown-orbit { color: var(--accent-ink); }
html[data-theme="dark"] dialog::backdrop { background: #0c0d10dc; }
html[data-theme="dark"] .theme-choice[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
html[data-theme="dark"] :is(.timer.low,.mobile-timer.low) { background: #503438; color: #ffd5d4; border-color: #7c5155; }
html[data-theme="dark"] .round-reminder div > span { color: var(--muted); }
html[data-theme="dark"] .reminder-icon { color: var(--warm-ink); }
html[data-theme="dark"] .home-faq details[open] { background: var(--surface-accent); border-color: var(--line); }
html[data-theme="dark"] .home-art .wheel-card { background: var(--surface-accent); border-color: var(--line); }

html[data-theme="dark"] :is(.theme-toggle:hover,.secondary-button:hover,.sound-toggle:hover,.close-button:hover) { background: var(--surface-accent); color: var(--ink); }
html[data-theme="dark"] .pass-button:hover { background: var(--warm); color: var(--warm-ink); }
html[data-theme="dark"] .theme-choice:hover { background: var(--surface-accent); }
html[data-theme="dark"] .game-pill { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .yellow-dot { background: var(--warm); }
html[data-theme="dark"] .challenge-card { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
html[data-theme="dark"] :is(.community-input,.report-context,.challenge-comparison > div) { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] :is(.challenge-note,.challenge-card label small,.challenge-invite label small) { color: var(--muted); }
html[data-theme="dark"] .report-question-button { color: var(--accent); }
html[data-theme="dark"] .report-question-button:disabled { color: var(--muted); }
html[data-theme="dark"] .admin-report blockquote { background: #514933; color: #f7e3ae; }
html[data-theme="dark"] .challenge-rank { border-color: var(--line); }

html[data-theme="dark"] .round-return-notice { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .round-return-notice.error { background: #503438; color: #ffd5d4; border-color: #7c5155; }

html[data-theme="dark"] :is(.hand-toggle,.hand-settings-link,.hand-options button) { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .hand-options button[aria-pressed="true"] { background: var(--selected-bg); color: var(--selected-ink); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
html[data-theme="dark"] .hand-preview { border-color: var(--line); }
html[data-theme="dark"] .hand-preview-answer { color: var(--accent-ink); }
html[data-theme="dark"] .hand-preview-pass { color: var(--warm-ink); }

html[data-theme="dark"] :is(.daily-mode .daily-ranking-link,.daily-result-ranking,.daily-rank-row,.daily-rank-empty) { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] :is(.daily-your-score,.daily-rank-row.is-mine) { background: var(--selected-bg); border-color: var(--accent); color: var(--ink); }

/* Alternative dark palettes keep the light theme's playful contrast and clear tiles. */
html[data-theme="dark"][data-dark-palette="violet"] {
  --page-bg: #171423; --page-dots: #30293f;
  --ink: #f4f0ff; --muted: #c0b8d3; --line: #5c506f;
  --surface: #252032; --surface-soft: #2e273e; --surface-accent: #39304b;
  --accent: #c0aaff; --accent-hover: #d3c4ff; --accent-ink: #241539;
  --warm: #ffe28a; --warm-ink: #352810; --selected-bg: #46355e; --selected-ink: #eee5ff;
}
html[data-theme="dark"][data-dark-palette="blue"] {
  --page-bg: #111b2b; --page-dots: #283b51;
  --ink: #eef5ff; --muted: #b4c5db; --line: #48637d;
  --surface: #1c2a3e; --surface-soft: #24354b; --surface-accent: #2d405a;
  --accent: #a3cfff; --accent-hover: #c4e1ff; --accent-ink: #122c46;
  --warm: #ffd79b; --warm-ink: #392812; --selected-bg: #294668; --selected-ink: #e1efff;
}
html[data-theme="dark"][data-dark-palette="charcoal"] {
  --page-bg: #191b1b; --page-dots: #343a38;
  --ink: #f0f5f2; --muted: #bac7c0; --line: #52645c;
  --surface: #252c29; --surface-soft: #303a35; --surface-accent: #3b4841;
  --accent: #b4e1ca; --accent-hover: #d0efdf; --accent-ink: #172f24;
  --warm: #ead4a4; --warm-ink: #322a18; --selected-bg: #375546; --selected-ink: #e2f7eb;
}
.dark-palette-heading { margin: 20px 0 6px; font-size: 18px; }
.dark-palette-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.dark-palette-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.dark-palette-choice { min-height: 90px; padding: 12px; border: 2px solid #d6d0e3; border-radius: 14px; background: #f7f5fc; color: #242131; font: inherit; text-align: left; }
.dark-palette-choice strong { display: block; font-size: 13px; margin-top: 10px; }
.dark-palette-choice[aria-pressed="true"] { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
.palette-swatches { display: flex; gap: 6px; }
.palette-swatches i { display: block; width: 22px; height: 22px; border-radius: 7px; border: 1px solid #ffffff50; }
.dark-palette-choice[data-dark-palette="violet"] { --swatch-bg:#252032; --swatch-accent:#c0aaff; --swatch-warm:#ffe28a; }
.dark-palette-choice[data-dark-palette="blue"] { --swatch-bg:#1c2a3e; --swatch-accent:#a3cfff; --swatch-warm:#ffd79b; }
.dark-palette-choice[data-dark-palette="charcoal"] { --swatch-bg:#252c29; --swatch-accent:#b4e1ca; --swatch-warm:#ead4a4; }
.dark-palette-choice[data-dark-palette="graphite"] { --swatch-bg:#24262c; --swatch-accent:#e6b66c; --swatch-warm:#c8d3ce; }
.palette-swatches i:nth-child(1) { background: var(--swatch-bg); }
.palette-swatches i:nth-child(2) { background: var(--swatch-accent); }
.palette-swatches i:nth-child(3) { background: var(--swatch-warm); }
html[data-theme="dark"] .dark-palette-choice { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .dark-palette-choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* B2 additions follow the active dark palette. */
html[data-theme="dark"] :is(.streak-chip,.daily-stats > div,.home-week,.home-week li span,.result-dock) { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .home-week li.played span { background: var(--selected-bg); }
html[data-theme="dark"] .home-week li.today span { border-color: var(--accent); }
html[data-theme="dark"] #answer-form .feedback { background: none; }
html[data-theme="dark"] #answer-form .feedback.error { color: var(--red); }
html[data-theme="dark"] .daily-tiles i { background: var(--surface-soft); color: var(--muted); border-color: var(--line); }
html[data-theme="dark"] .daily-tiles i:first-child { background: var(--accent); color: var(--accent-ink); }
html[data-theme="dark"] .daily-tiles i.correct { background: #24402d; color: var(--green); }
html[data-theme="dark"] .daily-tiles i.wrong { background: #4a2a2c; color: var(--red); }
html[data-theme="dark"] .daily-tiles i.passed { background: var(--selected-bg); color: var(--selected-ink); }
html[data-theme="dark"] .daily-tiles:has(i:is(.correct, .wrong, .passed)) i:first-child:not([class]) { background: var(--surface-soft); color: var(--muted); }
html[data-theme="dark"] .home-grid :is(.practice-mode, .home-ranking-entry, .home-key-link) { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: 0 4px 0 #0c0d10; }
html[data-theme="dark"] .home-grid .mode-key { background: var(--surface-soft); color: var(--ink); border-color: var(--line); box-shadow: 0 3px 0 #0c0d10; }
html[data-theme="dark"] .home-grid .daily-mode .mode-start::before { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .home-grid .daily-mode.mode-card { background: none; box-shadow: none; }
html[data-theme="dark"] .home-grid .practice-mode .mode-start { color: var(--accent); }
html[data-theme="dark"] body[data-screen="game"] .question-top .letter-label { background: var(--accent); color: var(--accent-ink); }
html[data-theme="dark"] .home-grid .daily-tiles i.correct, html[data-theme="dark"] .home-grid .daily-tiles i.sample-c { background: #24402d; color: var(--green); border-color: var(--line); }
html[data-theme="dark"] .home-grid .daily-tiles i.wrong, html[data-theme="dark"] .home-grid .daily-tiles i.sample-w { background: #4a2a2c; color: var(--red); border-color: var(--line); }
html[data-theme="dark"] .home-grid .daily-tiles i.passed, html[data-theme="dark"] .home-grid .daily-tiles i.sample-p { background: var(--selected-bg); color: var(--selected-ink); border-color: var(--line); }