/* Page appearance is independent of each collectible ticket's data-theme. */
:root {
  --mode-surface: #faf6ec;
  --mode-border: #c9cbb8;
  --mode-muted: #6c785d;
  --mode-hover: #e6eadb;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 40px;
  min-height: 40px;
  padding: 0 11px;
  flex: none;
  border: 1px solid var(--mode-border);
  border-radius: 5px;
  background: var(--mode-surface);
  color: var(--mode-muted);
  font: 11px/1.2 var(--sans);
}
.theme-toggle:hover { background: var(--mode-hover); }
.theme-toggle :is(svg, .ui-icon) {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .theme-sun { display: none; }
.entry-theme-toggle {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right));
  z-index: 25;
  box-shadow: 0 3px 16px #17231f0a;
}

:root[data-color-mode="dark"] {
  color-scheme: dark;
  --bg: #273440;
  --panel: #2d3c49;
  --panel-2: #354653;
  --text: #eee9df;
  --muted: #b7c1c9;
  --line: #53616d;
  --shadow: 0 16px 48px #0005;
  --paper: #e6ded1;
  --ink: #eee9df;
  --soft: #b7c1c9;
  --gold: #d4aa8c;
  --stroke: #4a5965;
  --mode-surface: #2d3c49;
  --mode-border: #63717b;
  --mode-muted: #d1d7da;
  --mode-hover: #3b4d5a;
}
html[data-color-mode="dark"] .theme-moon { display: none; }
html[data-color-mode="dark"] .theme-sun { display: block; }
html[data-color-mode="dark"] body { background: var(--bg); }

html[data-color-mode="dark"] :is(button, a, select):focus-visible {
  outline: 2px solid #d3ba96;
  outline-offset: 4px;
}

/* Opening, form fields, and the full wish menu. */
html[data-color-mode="dark"] .ritual-screen {
  color: var(--ink);
  background: var(--bg);
}
html[data-color-mode="dark"] .ritual-card {
  background: #2d3c49f5;
  color: var(--ink);
  border-color: var(--mode-border);
  box-shadow: 0 28px 80px #0005;
}
html[data-color-mode="dark"] :is(.ritual-input, .focus-trigger, .focus-menu) {
  background: #23323e;
  color: var(--ink);
  border-color: var(--mode-border);
}
html[data-color-mode="dark"] .ritual-input::placeholder { color: #aab5bd; opacity: 1; }
html[data-color-mode="dark"] :is(.ritual-input:focus, .focus-trigger:focus-visible) {
  border-color: #b7c6ce;
  box-shadow: 0 0 0 3px #b7c6ce20;
}
html[data-color-mode="dark"] .focus-trigger::after { border-color: #b7c6ce; }
html[data-color-mode="dark"] .focus-menu { box-shadow: 0 18px 38px #0006; }
html[data-color-mode="dark"] .focus-option { color: var(--ink) !important; }
html[data-color-mode="dark"] .focus-option:hover { background: var(--mode-hover); }
html[data-color-mode="dark"] .focus-option input { accent-color: #d5b597; }
html[data-color-mode="dark"] .focus-option.is-general { border-color: var(--stroke); }
html[data-color-mode="dark"] .entry-error { color: #f0ac98; }

/* Shared text and controls around the signed paper. */
html[data-color-mode="dark"] :is(
  .ritual-card .entry-kicker, .eyebrow, .entry-support, .support-header-entry,
  .support-afterword button, .reward-card-top, .wisdom-spark, .support-eyebrow
) { color: var(--gold); }
html[data-color-mode="dark"] :is(
  .ritual-card .entry-note, .focus-label, .site-brand small, .header-actions,
  .choice-view h1 em, .choice-subtitle, .choice-status, .edition-chip,
  .wisdom-wrap p, .wisdom-label, .wish-context > p:last-child,
  .panel-section-title > span, .channel-note, .locked-note, .reward-topic,
  .reward-card small, .source-status, .little-ritual p:last-child, .play-note,
  .result-actions-bar .text-button, .action-status, .site-footer, .site-footer a,
  .history-row small, .history-row > span:last-child, .history-footnote,
  .reward-switcher > label, .reward-select-row > span, .reward-navigation > span,
  .support-afterword
) { color: var(--soft); }
html[data-color-mode="dark"] :is(.text-button:hover, .entry-support:hover, .site-footer a:hover) {
  color: #e0c6a2;
}
html[data-color-mode="dark"] :is(.edition-chip, .result-actions-bar .text-button span) {
  border-color: var(--mode-border);
}
html[data-color-mode="dark"] :is(.ritual-card .primary-btn, .solid-button, .support-return) {
  background: #d5b597;
  color: #293440;
  border-color: #d5b597;
}
html[data-color-mode="dark"] :is(.ritual-card .primary-btn:hover, .solid-button:hover, .support-return:hover) {
  background: #e2c9af;
  border-color: #e2c9af;
  box-shadow: 0 8px 24px #0003;
}
html[data-color-mode="dark"] .outline-button {
  color: var(--mode-muted);
  border-color: var(--mode-border);
}
html[data-color-mode="dark"] .outline-button:hover { background: var(--mode-hover); }
html[data-color-mode="dark"] .quiet-seal {
  color: #c2ac89;
  border-color: #8b795e;
  background: #c2ac8908;
}
html[data-color-mode="dark"] .quiet-seal::after { border-color: #8b795e70; }

html[data-color-mode="dark"] .focus-tags span {
  color: #d0d7db;
  background: var(--panel-2);
  border-color: var(--mode-border);
}
html[data-color-mode="dark"] .channel-cell { color: #b5c2cd; border-color: var(--mode-border); }
html[data-color-mode="dark"] .channel-cell.is-lucky {
  background: #d5b597;
  color: #293440;
  border-color: #d5b597;
}
html[data-color-mode="dark"] .channel-cell.is-lucky::after { color: #655549; }
html[data-color-mode="dark"] .reward-card { background: var(--panel); border-color: var(--mode-border); }
html[data-color-mode="dark"] .reward-card h3 { color: #e2c6a8; }
html[data-color-mode="dark"] .ritual-mark { color: var(--gold); border-color: var(--mode-border); }
html[data-color-mode="dark"] .reward-select-row select { color: var(--ink); border-color: var(--mode-border); }
html[data-color-mode="dark"] .reward-select-row option { color: var(--ink); background: var(--panel); }
html[data-color-mode="dark"] .reward-navigation button { color: var(--mode-muted); }
html[data-color-mode="dark"] .reward-navigation button:hover:not(:disabled) { color: #e0c6a2; }
html[data-color-mode="dark"] .reward-navigation button:disabled { color: #9aa9b5; }

/* Both dialogs use the same dark surfaces; QR codes keep their white scan margin. */
html[data-color-mode="dark"] :is(.history-dialog, .support-dialog) {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--mode-border);
  scrollbar-color: #8493a0 var(--panel);
}
html[data-color-mode="dark"] :is(.history-dialog, .support-dialog)::backdrop { background: #15222de0; }
html[data-color-mode="dark"] .history-row { border-color: var(--stroke); }
html[data-color-mode="dark"] .history-rank { color: #e2b48e; border-color: #a08d69; }
html[data-color-mode="dark"] .support-dialog::before { border-color: var(--stroke); }
html[data-color-mode="dark"] .support-rule::after { background: var(--panel); }
html[data-color-mode="dark"] :is(
  .support-close, .support-description, .support-recipient, .support-payment-hint,
  .support-save, .support-pledge, .support-gratitude
) { color: var(--soft); }
html[data-color-mode="dark"] .support-close:hover { color: var(--ink); }
html[data-color-mode="dark"] .support-tabs { background: #23323e; border-color: var(--stroke); }
html[data-color-mode="dark"] .support-tabs button { color: #c1ccd3; }
html[data-color-mode="dark"] .support-tabs button[aria-selected="true"] {
  color: #e6d4b4;
  background: #415366;
  border-color: #8193a0;
}
html[data-color-mode="dark"] .support-tabs button[data-support-provider="alipay"][aria-selected="true"] {
  color: #cdd6e1;
  background: #415366;
  border-color: #8193a0;
}
html[data-color-mode="dark"] .support-payment-status { color: #dbbc8d; }

@media (max-width: 780px) {
  .site-header { gap: 10px; }
  .header-actions { gap: 12px; }
}
@media (max-width: 600px) {
  .header-actions { gap: 9px; }
  .header-actions .theme-toggle { padding: 0; }
  .header-actions .theme-toggle [data-theme-label] { display: none; }
  html[data-color-mode="dark"] .sealed-card { --frame: 4px; }
}
@media (max-width: 360px) {
  .site-brand { letter-spacing: 2px; }
  .site-brand small { display: none; }
  .header-actions { gap: 8px; }
}