/* Interface themes. Sandstone is the original look; the others re-colour the same
   materials (wood panels, parchment cards, stone cards) and their accents, so the
   layout and artwork are untouched. Chosen in the menu, remembered per browser. */

/* ——— Midnight Oasis: moonlit indigo panels, silver-gold accents. ——— */
body[data-theme='midnight'] {
  --ink: #dfe3ee;
  --gold: #c9c2a0;
  --muted: #8f97ab;
  --line: #7d8fb83b;
  background: #141826;
}
body[data-theme='midnight'] .wood,
body[data-theme='midnight'] .category-tabs {
  background-color: #171c2a;
  background-image: linear-gradient(#141a28ee, #1b2233e8), var(--wood-grain);
  box-shadow: inset 0 1px #b9c6e61a;
}
body[data-theme='midnight'] .parchment,
body[data-theme='midnight'] dialog.modal {
  background-color: #262d3f;
  background-image: linear-gradient(#2c3449f0, #222939f2), var(--paper-grain);
  color: #dfe3ee;
  border-color: #56627f;
  box-shadow:
    0 5px 25px #0a0d1655,
    inset 0 0 0 4px #313a52,
    inset 0 0 0 5px #8a96b455;
}
body[data-theme='midnight']
  .parchment
  :is(h1, h2, h3, h4, p, small, label, b, strong, span, em, .eyebrow, .wave-title h2),
body[data-theme='midnight']
  dialog.modal
  :is(h1, h2, h3, h4, p, small, label, b, strong, span, em, .eyebrow) {
  color: inherit;
}
body[data-theme='midnight'] .parchment .eyebrow,
body[data-theme='midnight'] dialog.modal .eyebrow,
body[data-theme='midnight'] .setup-label {
  color: #a9b3cb;
}
body[data-theme='midnight'] .build-card {
  background: linear-gradient(#1c2232d9, #2a3146e0), var(--stone-grain);
  background-size: auto, 280px;
  border-color: #6d7a9a;
  color: #e4e7f0;
}
body[data-theme='midnight'] .build-card:hover:not(:disabled),
body[data-theme='midnight'] .build-card.active {
  background-color: #3a4560;
  outline-color: #c9c2a0;
}
body[data-theme='midnight'] :is(.hero-card, .setup-maps button, .setup-opponents button, .setup-modes button, .setup-choices button) {
  background: #ffffff0d;
  box-shadow: inset 0 0 0 1px #8a96b455;
  color: #dfe3ee;
}
body[data-theme='midnight'] :is(.setup-maps, .setup-opponents, .setup-modes, .setup-choices) [aria-checked='true'],
body[data-theme='midnight'] .setup-modes [aria-selected='true'] {
  background: #c9c2a022;
  box-shadow: inset 0 0 0 2px #c9c2a0;
}
body[data-theme='midnight'] .hero-name {
  color: #dfe3ee;
  text-shadow: 0 1px 2px #000a;
}
body[data-theme='midnight'] .scenario h1 {
  color: #e6e9f2;
}
body[data-theme='midnight'] .scenario p {
  color: #c9cfdd;
  border-top-color: #c9cfdd33;
}
body[data-theme='midnight'] .wave-progress span {
  background: #8fa7d6;
}
body[data-theme='midnight'] .hero-ring {
  box-shadow: 0 0 0 1px #10141f;
}
body[data-theme='midnight'] #battlefield::after {
  /* A cool night grade over the battlefield, without touching the art. */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(#1a2a5a1c, #0a102624);
  mix-blend-mode: multiply;
}

/* ——— Verdant Court: ivory parchment, walnut-green wood, emerald and brass. ——— */
body[data-theme='verdant'] {
  --ink: #ece7d2;
  --gold: #b8964a;
  --teal: #2f7d5e;
  background: #1d241c;
}
body[data-theme='verdant'] .wood,
body[data-theme='verdant'] .category-tabs {
  background-color: #1f281f;
  background-image: linear-gradient(#1b241be6, #253023e0), var(--wood-grain);
  box-shadow: inset 0 1px #d8e6b81a;
}
body[data-theme='verdant'] .parchment,
body[data-theme='verdant'] dialog.modal {
  background-color: #eeead6;
  background-image: linear-gradient(#f6f2e1d0, #e9e3c8d0), var(--paper-grain);
  color: #33402c;
  border-color: #9a9a6a;
  box-shadow:
    0 5px 25px #1c241824,
    inset 0 0 0 4px #ece6cf,
    inset 0 0 0 5px #6f8a5a55;
}
body[data-theme='verdant'] .parchment :is(h1, h2, h3, h4, .wave-title h2),
body[data-theme='verdant'] dialog.modal :is(h1, h2, h3, h4) {
  color: #2f4a33;
}
body[data-theme='verdant'] .parchment .eyebrow,
body[data-theme='verdant'] dialog.modal .eyebrow,
body[data-theme='verdant'] .setup-label {
  color: #5f7a4e;
}
body[data-theme='verdant'] .build-card {
  background: linear-gradient(#1e2a20d9, #2f3a2be0), var(--stone-grain);
  background-size: auto, 280px;
  border-color: #8f9a64;
}
body[data-theme='verdant'] .build-card:hover:not(:disabled),
body[data-theme='verdant'] .build-card.active {
  background-color: #dfe6c8;
  outline-color: #2f7d5e;
}
body[data-theme='verdant'] :is(.setup-maps, .setup-opponents, .setup-choices) [aria-checked='true'],
body[data-theme='verdant'] .setup-modes [aria-selected='true'] {
  background: #2f7d5e1f;
  box-shadow: inset 0 0 0 2px #2f7d5e;
}
body[data-theme='verdant'] .wave-progress span,
body[data-theme='verdant'] .status-dot {
  background: #2f7d5e;
}
body[data-theme='verdant'] .hero-slot[data-state='available'].affordable .hero-ring {
  background: conic-gradient(from 0deg, #2f7d5e, #b8964a, #2f7d5e);
}
body[data-theme='verdant'] .modal .primary,
body[data-theme='verdant'] .primary {
  background: #2f6b4f;
  color: #f2efd9;
}