:root {
  color-scheme: dark;
  --night: #131d1e;
  --panel: #202d2c;
  --frame: #71644f;
  --cream: #fff1d8;
  --muted: #d9ccb8;
  --gold: #efc985;
  --button-ink: #2f2418;
}

body {
  background: radial-gradient(ellipse at 15% 0, #27322e, var(--night) 680px) var(--night);
  color: var(--cream);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.interest-box button:focus-visible,
.print-button:focus-visible {
  outline-color: var(--gold);
}

.medal-page {
  --ink: var(--cream);
  --quiet: var(--muted);
  --paper: var(--night);
  --line: var(--frame);
  --accent: var(--gold);
}

.medal-page .mast > span,
.medal-page .hero .eyebrow {
  color: var(--gold);
}

.medal-page .hero {
  background: linear-gradient(140deg, #2c3530, #1a2525 65%);
}

.medal-page .hero img {
  border-inline-start: 1px solid var(--frame);
}

.medal-page .duration-option,
.medal-page .reward,
.medal-page .offer,
.game {
  background: var(--panel);
  border-color: var(--frame);
}

.medal-page .offer {
  color: var(--cream);
  border: 1px solid var(--frame);
}

.medal-page .fan {
  background: radial-gradient(ellipse at 50% 95%, #514532, #242b28 68%);
}

.medal-page .fan img {
  box-shadow: 1px 7px 16px #0008;
}

.kicker,
.facts .price,
.facts li:last-child {
  color: var(--gold);
}

.lead,
.note {
  color: var(--muted);
}

.medal-page .button,
.game a,
.interest-box button {
  background: var(--gold);
  color: var(--button-ink);
}

.game a:hover,
.interest-box button:hover,
.print-button:hover {
  filter: brightness(1.1);
}

.game-links .details-link {
  background: transparent;
  color: inherit;
}

.print-button {
  border-color: var(--frame);
  color: var(--gold);
}

.kids-scene {
  background: radial-gradient(ellipse at 20% 12%, #5b4a32, #262b27 85%);
}

@media (max-width: 720px) {
  .medal-page .hero img {
    border-inline-start: 0;
    border-block-start: 1px solid var(--frame);
  }
}