/* Loaded last, so the same theme applies throughout the public and admin UI. */
.theme-switcher {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: inherit;
}
.theme-switcher select {
  display: inline-block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 8px 10px;
  min-height: 40px;
  font: inherit;
  border: 1px solid #d8cfe3;
  border-radius: 9px;
  background: #fffefd;
  color: #24213f;
}
header {
  flex-wrap: wrap;
  gap: 16px;
}
@media screen {
  html[data-theme="light"] {
    color-scheme: light;
  }
  html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f0ebfa;
    --muted: #b7aec9;
    --paper: #171420;
    --line: #40384f;
    --purple: #bb9aef;
    --theme-surface: #24202f;
    --theme-soft: #332b44;
    --theme-hover: #3d3350;
    --theme-border: #40384f;
    --theme-secondary: #211c2c;
    background: #171420;
    color: var(--ink);
  }
  html[data-theme="dark"] body {
    background: #171420;
    color: var(--ink);
  }
  html[data-theme="dark"] :is(input, select, textarea) {
    background: #211c2c;
    color: var(--ink);
    border-color: var(--line);
  }
  html[data-theme="dark"]
    :is(
      header,
      footer,
      td,
      th,
      .install-section,
      .selection-bar,
      .catalog-scroll,
      .human-check,
      .credentials td
    ) {
    border-color: var(--line);
  }
  html[data-theme="dark"] :is(.primary, .small) {
    background: #7455be;
    color: #fff;
  }
  html[data-theme="dark"] :is(.primary, .small):hover {
    background: #8666ce;
  }
  html[data-theme="dark"]
    :is(
      .secondary,
      .badge,
      .tag-badge,
      .movie-year,
      .status-badge,
      .coffee-link
    ) {
    background: #332b44;
    color: var(--ink);
    border-color: var(--line);
  }
  html[data-theme="dark"] :is(.secondary, .coffee-link, .admin-nav a):hover {
    background: #403450;
  }
  html[data-theme="dark"]
    :is(.text-button, .back-link, .back-player, .brand, .deck-links a) {
    color: var(--ink);
  }
  html[data-theme="dark"]
    :is(
      .eyebrow,
      .intro .eyebrow,
      .page-title .eyebrow,
      .login-panel .eyebrow,
      .editor-empty .eyebrow,
      .how,
      .how b,
      .deck-footnote,
      .notice,
      .active-player-label
    ) {
    color: #c5acec;
  }
  html[data-theme="dark"] :is(.notice.error, #link-error, .danger:not(button)) {
    color: #ffa8ad;
  }
  html[data-theme="dark"] .record-label {
    color: #24213f;
  }
  html[data-theme="dark"] .connection-note {
    background: #3a2e21;
    color: #f1ce99;
  }
  html[data-theme="dark"] .game-board {
    background: radial-gradient(ellipse at center, #30263f, #211c2c 70%);
    border-color: var(--line);
  }
  html[data-theme="dark"]
    :is(.board-center .panel, .game-board .player-section.active) {
    background: #292234;
  }
  html[data-theme="dark"] :is(.game-board button, button.gap.chosen) {
    background: #7455be;
    color: #fff;
  }
  html[data-theme="dark"] .game-board button.secondary {
    background: #403450;
  }
  html[data-theme="dark"] :is(button.danger, .game-board button.danger) {
    background: #a63e56;
    color: #fff;
  }
  html[data-theme="dark"] .gap {
    background: #332b44;
    color: #dbc5ff;
  }
  html[data-theme="dark"] #notice:not(:empty) {
    background: #3c3025;
    color: #f4d7aa;
  }
  html[data-theme="dark"] .hosting-card.warning {
    background: #3c3025;
    border-color: #a4814c;
  }
  html[data-theme="dark"] .hosting-card.danger-zone {
    background: #3c252d;
    border-color: #b96a7a;
  }
  html[data-theme="dark"] .theme-switcher select {
    background: #24202f;
    color: var(--ink);
    border-color: var(--line);
  }
}
@media print {
  .theme-switcher {
    display: none !important;
  }
}
@media screen {
  html[data-theme="dark"] :is(.print-settings, .rules-callout, .rule-callout) {
    background: #24202f;
    border-color: var(--line);
  }
  html[data-theme="dark"] :is(.rules-button, .game-ui button) {
    background: #7455be;
    color: #fff;
  }
  html[data-theme="dark"]
    :is(.rules-button.soft, .rules-nav a, .game-ui button.secondary) {
    background: #332b44;
    color: var(--ink);
  }
  html[data-theme="dark"] .game-ui button.danger {
    background: #a63e56;
  }
  html[data-theme="dark"]
    :is(
      #excluded,
      .rules-intro .eyebrow,
      .rules-panel > .eyebrow,
      .rules-section-title .eyebrow
    ) {
    color: #c5acec;
  }
}
@media screen {
  html[data-theme="dark"]
    :is(
      .timeline-example .new-movie,
      .timeline-example,
      .token-number,
      .cooperative-panel
    ) {
    border-color: var(--line);
    color: var(--ink);
  }
}
/* Original repeating doodles sit behind all controls, never over text or media. */
@media screen {
  body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("/movie-wallpaper.svg");
    background-repeat: repeat;
    background-size: 480px 480px;
    opacity: 0.17;
  }
  html[data-theme="dark"] body::before {
    opacity: 0.15;
  }
}
@media print {
  body::before {
    display: none !important;
  }
}
/* The table has its own opaque surface, so it needs the wallpaper locally too. */
@media screen {
  .game-board::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: url("/movie-wallpaper.svg") repeat;
    background-size: 480px 480px;
    opacity: 0.2;
  }
  html[data-theme="dark"] .game-board::before {
    opacity: 0.17;
  }
}
@media print {
  .game-board::before {
    display: none !important;
  }
}
/* Placement state must outrank the generic dark-mode button styling. */
@media screen {
  html[data-theme="dark"] .game-ui .game-board button.gap {
    background: #332b44;
    color: #dbc5ff;
    border: 1px dashed #bb9aef;
  }
  html[data-theme="dark"] .game-ui .game-board button.gap.chosen {
    background: #f3cc79;
    color: #241e32;
    border: 2px solid #ffe5a8;
    box-shadow: 0 0 0 3px #f3cc7933;
  }
}
.gap.chosen {
  border-style: solid;
}