/* Interface lighting is independent of the board's material and piece skin. */
.color-theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.color-theme-options button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-height: 67px; font-size: 12px; }
.color-theme-options .ui-icon { width: 21px; height: 21px; }
.color-theme-field .fine-print { margin: 8px 0 0; font-size: 11px; }
html { --ui-on-accent: #ffffff; }
html[data-color-theme='dark'] {
  color-scheme: dark;
  --ui-bg: #101b18;
  --ui-surface: #182722;
  --ui-surface-soft: #22362d;
  --ui-ink: #e4ece3;
  --ui-muted: #a2b5a9;
  --ui-accent: #9bc5a9;
  --ui-accent-hover: #b3d5bc;
  --ui-line: #354b3e;
  --ui-gold: #d0b57f;
  --ui-danger: #e79b88;
  --ui-on-accent: #112e21;
  --ui-shadow: 0 12px 36px #00000025;
  --ui-shadow-dialog: 0 24px 80px #00000070;
  --surface-shadow: 0 12px 40px #00000020;
}
html[data-color-theme='dark'] ::selection { color: #eff5eb; background: #43654f; }
html[data-color-theme='dark'] :focus-visible { outline-color: #aad4ad; }
html[data-color-theme='dark'] img.ui-icon { filter: brightness(0) saturate(100%) invert(87%) sepia(12%) saturate(341%) hue-rotate(77deg); }
html[data-color-theme='dark'] .primary-button { color: #112e21; }
html[data-color-theme='dark'] .primary-button img.ui-icon { filter: brightness(0) saturate(100%); }
html[data-color-theme='dark'] input::placeholder { color: #8ca194; }
html[data-color-theme='dark'] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23bfd0c2' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html[data-color-theme='dark'] .appearance-button:hover { background: #2c4536; }
html[data-color-theme='dark'] .online-dot,
html[data-color-theme='dark'] .connection::before { background: #9ec6a4; }
html[data-color-theme='dark'] .resume-card { border-color: #4c7154; background: linear-gradient(110deg, #25422f, #1e3328); box-shadow: 0 4px 14px #00000018; }
html[data-color-theme='dark'] .resume-symbol { border-color: #4c6a4d; background: #2f4a33; }
html[data-color-theme='dark'] .preview-frame { border-color: #3a5140; background: linear-gradient(135deg, #2b4133, #203428); box-shadow: 0 22px 40px #00000022; }
html[data-color-theme='dark'] .ad-card { background: #2a2c21; border-color: #525139; }
html[data-color-theme='dark'] .ad-label { color: #c3b78e; }
html[data-color-theme='dark'] .game-board-wrap,
html[data-color-theme='dark'] .replay-board-frame { background: #1e3026; }
html[data-color-theme='dark'] .avatar-fallback { background: #304b37; border-color: #4b6850; }
html[data-color-theme='dark'] .player-card.active { border-color: #77a57f; }
html[data-color-theme='dark'] .dock-tool:disabled { color: #8b9c8e; background: #1e2e24; border-color: #304032; }
html[data-color-theme='dark'] #game-view[data-nudge-state='ready'] .nudge-tool { border-color: #6d956f; background: #2b4532; }
html[data-color-theme='dark'] #game-view[data-nudge-state='sent'] .nudge-tool { background: #243b2b; }
html[data-color-theme='dark'] dialog { box-shadow: var(--ui-shadow-dialog); }
html[data-color-theme='dark'] dialog::backdrop { background: #000b08a6; }
html[data-color-theme='dark'] .toast { color: #ecf3e7; background: #2b4938; border-color: #658369; box-shadow: 0 8px 24px #00000035; }
html[data-color-theme='dark'] .piece-swatch { background: #24382b; }
html[data-color-theme='dark'] .invitation-card { border-color: #40573e; background: radial-gradient(circle at 100% 0, #344b34, transparent 65%), #203024; }
html[data-color-theme='dark'] .invite-time { border-color: #4c6449; }
html[data-color-theme='dark'] .result-emblem { border-color: #6c603f; background: #333123; }
html[data-color-theme='dark'] .result-winner .result-avatar { box-shadow: 0 0 0 3px #d0b57f22; }
html[data-color-theme='dark'] .game-menu > .danger-option small { color: #c7a193; }
html[data-color-theme='dark'] .match-resume { border-color: #4c6b4c; }
html[data-color-theme='dark'] .room-public-note { border-color: #6c8d6e; }
html[data-color-theme='dark'] .storage-warning { border-color: #8b694b; color: #edc7a6; background: #3c3022; }
html[data-color-theme='dark'] .check-alert { border-color: #a56f4e; border-left-color: #e1936b; background: linear-gradient(110deg, #3d2c20, #30291f); color: #f1c6a3; }
html[data-color-theme='dark'] .check-alert-emblem { border-color: #b48560; background: #503525; }
html[data-color-theme='dark'] .check-alert-copy p { color: #d4b196; }
html[data-color-theme='dark'] .check-alert .text-button { color: #f0c198; }
html[data-color-theme='dark'] .last-move-summary { background: #2c3225; color: #d1c69e; }
html[data-color-theme='dark'] .room-request-card { border-color: #567752; background: #273c2b; }
html[data-color-theme='dark'] .room-chat-avatar { background: #314a33; }
html[data-color-theme='dark'] .room-chat-meta strong { color: #bdcfb9; }
html[data-color-theme='dark'] .room-chat-message p { background: #243728; border-color: #3a543b; }
html[data-color-theme='dark'] .room-chat-message.is-self p { background: #2b4730; border-color: #4a694b; }
html[data-color-theme='dark'] .room-chat-system { background: #2c3528; }
html[data-color-theme='dark'] .chat-self .chat-bubble,
html[data-color-theme='dark'] .room-request-symbol { color: var(--ui-on-accent); }
html[data-color-theme='dark'] #room-chat-unread { color: #35221b; }
html[data-color-theme='dark'] .rg-piece-option[aria-pressed='true'] { background: var(--ui-accent); color: var(--ui-on-accent); }
html[data-color-theme='dark'] .rg-piece-diagram,
html[data-color-theme='dark'] .rg-five-board { --ui-accent: #28684f; --ui-danger: #a54736; --ui-ink: #173b32; }
html[data-color-theme='dark'] .board { --ui-accent: #28684f; }
/* Color transitions never animate the board, coordinates, or chess pieces. */
body, .lobby-controls, .player-card, dialog, .dialog-heading,
.game-board-wrap, .replay-board-frame, .last-move-summary { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
@media (prefers-reduced-motion: reduce) {
  body, .lobby-controls, .player-card, dialog, .dialog-heading,
  .game-board-wrap, .replay-board-frame, .last-move-summary { transition: none; }
}