/* Supporting pages share the game's light/dark palette without changing gameplay. */
body.supporting-page {
  --support-link: #4338ca;
  --support-panel: #eef2ff;
  --support-panel-end: #e8effa;
  --support-hero: #e0e7ff;
  --support-hero-end: #dbeafe;
  --support-muted: #475569;
  color-scheme: light;
}
body.supporting-page.dark-mode {
  --support-link: #b5c2ff;
  --support-panel: #17233c;
  --support-panel-end: #131d32;
  --support-hero: #27234f;
  --support-hero-end: #14253f;
  --support-muted: #b5c1d4;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  body.supporting-page:not(.dark-mode):not(.light-forced) {
    --support-link: #b5c2ff;
    --support-panel: #17233c;
    --support-panel-end: #131d32;
    --support-hero: #27234f;
    --support-hero-end: #14253f;
    --support-muted: #b5c1d4;
    color-scheme: dark;
  }
}
.supporting-page .support-hero {
  background: linear-gradient(120deg, var(--support-hero), var(--support-hero-end));
  color: var(--cmc-ink);
  border-color: var(--cmc-line) !important;
}
.supporting-page .support-hero .lead { color: var(--support-muted); }
.supporting-page .card,
.supporting-page .support-panel {
  --bs-card-color: var(--cmc-ink);
  --bs-card-border-color: var(--cmc-line-strong);
  --bs-card-border-radius: var(--cmc-r-lg);
  color: var(--cmc-ink);
  background: linear-gradient(135deg, var(--support-panel), var(--support-panel-end));
  border-color: var(--cmc-line-strong) !important;
}
.supporting-page .card-body { padding: clamp(1.1rem, 2vw, 1.5rem); }
.supporting-page main > section { margin-bottom: 2rem; }
.supporting-page main { overflow-wrap: anywhere; }
.supporting-page main h2 { letter-spacing: -.02em; }
.supporting-page main li + li { margin-top: .3rem; }
.supporting-page :is(main, .support-hero) a:not(.btn),
.supporting-page code { color: var(--support-link); }
.supporting-page :is(.text-muted, .fig-caption) { color: var(--support-muted) !important; }
.supporting-page .navbar .nav-link:is(.active, :hover, :focus-visible) {
  color: var(--support-link) !important;
  background: var(--support-panel);
}
.supporting-page .navbar-toggler {
  color: var(--cmc-ink);
  border-color: var(--cmc-line-strong);
  min-width: 44px;
  min-height: 44px;
}
.supporting-page .navbar-toggler-icon {
  width: 1.25rem;
  height: .95rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  border-block: 2px solid currentColor;
}
.supporting-page .support-button {
  color: #fff;
  background: #4338ca;
  border-color: #4338ca;
  min-height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.supporting-page .support-button:is(:hover, :focus-visible) {
  color: #fff;
  background: #3730a3;
  border-color: #3730a3;
}
.supporting-page a:focus-visible,
.supporting-page button:focus-visible {
  outline: 3px solid var(--support-link);
  outline-offset: 3px;
}
.supporting-page footer a { display: inline-block; padding-block: .5rem; }
.supporting-page footer a:hover { color: var(--support-link); }
.supporting-page .support-panel .form-check-input { border-color: var(--support-muted); }
@media (max-width: 575.98px) {
  .supporting-page .support-hero { padding-block: 2rem !important; }
  .supporting-page main { margin-block: 2rem !important; }
  .supporting-page main.container { padding-inline: 1rem; }
  .supporting-page .support-hero .lead { margin-bottom: 0; }
}