:root {
  color-scheme: dark;
  --site-font: system-ui, 'Noto Sans Thai', 'Leelawadee UI', sans-serif;
  --site-background: #111c18;
  --site-surface: #17251f;
  --site-surface-raised: #253c2e;
  --site-text: #e4ede5;
  --site-muted: #a7b6ac;
  --site-border: #31463a;
  --site-accent: #dcf19b;
  --site-accent-ink: #19301f;
  --paper: var(--site-background);
  --table: var(--site-surface);
  --ink: var(--site-text);
  --muted: var(--site-muted);
  --line: var(--site-border);
  --lime: var(--site-accent);
  --forest: var(--site-accent);
  --red: #ef8c82;
}
html, body { background: var(--site-background); color: var(--site-text); }
body { font-family: var(--site-font); }
::selection { background: var(--site-accent); color: var(--site-accent-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--site-accent); outline-offset: 4px; }
.site-header, .site-footer { border-color: var(--site-border); }
.site-footer { color: var(--site-muted); }

body[data-game=cards] :is(.rule-panel, .multiplayer-panel, .bathroom-panel, dialog) { background: var(--site-surface); border-color: var(--site-border); }
body[data-game=cards] .table-panel { border: 1px solid var(--site-border); }
body[data-game=cards] :is(.mode-picker, .rule-icon, .rule-rank, .turn-banner, .bathroom-copy h3 span) { background: var(--site-surface-raised); border-color: var(--site-border); color: var(--site-text); }
body[data-game=cards] .mode-picker button { color: var(--site-muted); }
body[data-game=cards] .mode-picker button[aria-pressed=true] { background: var(--site-accent); color: var(--site-accent-ink); }
body[data-game=cards] :is(.button-outline, .button-table, .icon-button, .tiny-badge) { border-color: var(--site-border); color: var(--site-text); }
body[data-game=cards] :is(.button-outline, .button-table, .icon-button):hover:not(:disabled) { background: var(--site-surface-raised); }
body[data-game=cards] :is(.button-dark, .button-lime) { background: var(--site-accent); color: var(--site-accent-ink); }
body[data-game=cards] :is(.button-dark, .button-lime):hover:not(:disabled) { background: #e6f7b8; }
body[data-game=cards] :is(.rule-field textarea, .multiplayer-field input) { background: var(--site-background); border-color: var(--site-border); color: var(--site-text); }
body[data-game=cards] :is(.rule-footnote, .bathroom-copy p, .history-empty, .notice, .footer-brand) { color: var(--site-muted); border-color: var(--site-border); }
body[data-game=cards] :is(.bathroom-icon, .note-star, .brand-dot) { color: var(--site-accent); border-color: var(--site-border); }
body[data-game=cards] .house-note strong { color: var(--site-text); }
body[data-game=cards] .rule-icon.red { color: var(--red); }
body[data-game=cards] .history-list { scrollbar-color: var(--site-border) transparent; }
body[data-game=cards] :is(.card-face, .history-card) { color: #233d35; }
body[data-game=cards] :is(.card-face.red, .history-card.red) { color: #b43f3b; }
body[data-game=cards] .card-back { background-color: var(--site-surface-raised); color: var(--site-accent); }
body[data-game=cards] .noscript { background: var(--site-surface-raised); color: var(--site-text); }

body[data-game=dice] :is(.table-card, .history-card, .device-settings-panel, .help-modal) { background: var(--site-surface); border-color: var(--site-border); }
body[data-game=dice] :is(.motion-button, .count-stepper, .face-frequency, .new-dice-count) { background: var(--site-surface-raised); border-color: var(--site-border); }
body[data-game=dice] .roll-button { background: var(--site-accent); color: var(--site-accent-ink); }
body[data-game=dice] :is(.motion-button, .device-settings-toggle) { color: var(--site-text); }
body[data-game=dice] .boot-splash { background: var(--site-background); }