/* Colors and typography from Autosport News/public_html/assets/css/styles.css. */
:root {
  --brand: #2457d6;
  --brand-bright: #1764ee;
  --brand-dark: #183d9a;
  --red: #ed1c24;
  --ink: #071536;
  --muted: #62738e;
  --line: #dbe7f4;
  --ice: #edf7ff;
  --surface: #ffffff;
  --font-body: 'Poppins', Arial, sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-label: 'IBM Plex Mono', monospace;
}
body {
  font-family: var(--font-body);
  background: var(--ice);
  -webkit-font-smoothing: antialiased;
}
.brand { color: var(--brand); font-weight: 800; }
.brand span { color: var(--brand-dark); }
.header-label, .eyebrow, .section-heading > span, .promotion-list p {
  font-family: var(--font-label);
  font-weight: 600;
}
.header-label { text-align: right; }
@media (max-width: 380px) {
  .header-label { max-width: 140px; }
  .promotion-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.eyebrow { color: var(--brand); }
h1 { font-family: var(--font-display); font-weight: 700; }
h1 em { color: var(--brand); font-style: normal; font-weight: 700; }
.guarantee span { color: var(--red); }
.spin-button, .claim-button {
  color: var(--surface);
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 5px 0 var(--brand-dark), 0 10px 22px rgb(45 91 157 / 12%);
  font-weight: 800;
}
.spin-button:hover, .claim-button:hover { background: var(--brand-bright); filter: none; }
button:focus-visible, a:focus-visible { outline-color: var(--brand-bright); }
.promotions { border-color: var(--line); }
.section-heading h2, dialog h2 { font-family: var(--font-body); }
.promotion-list > a, .promotion-list > article { background: var(--surface); border-color: var(--line); }
.promotion-list > a:hover { background: var(--ice); border-color: var(--brand); }
.promotion-list strong { color: var(--brand); font-family: var(--font-display); }
.promotion-list strong span { color: var(--muted); }
dialog { background: var(--surface); border-color: var(--line); }
dialog::backdrop { background: rgb(7 21 54 / 72%); }
.reward strong { color: var(--brand); font-family: var(--font-display); }
#wheel .segment-free { fill: var(--ice); }
#wheel .segment-bonus { fill: var(--brand); }
#wheel path { stroke: var(--line); }
#wheel .label-free { fill: var(--ink); }
#wheel .label-bonus { fill: var(--surface); }
#wheel .segment-label { font-family: var(--font-body); }
#wheel .segment-label text:first-child { font-family: var(--font-display); font-weight: 800; }

/* Restore the original character-left, wheel-right composition. */
main { max-width: 1440px; padding-inline: 32px; }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding-top: 22px; }
.zeus-panel { min-width: 0; align-self: center; }
.zeus-art { display: block; width: 100%; height: auto; }
.intro { padding-bottom: 8px; text-align: center; }
.intro .eyebrow { margin-bottom: 8px; }
.intro h1 { font-size: clamp(30px, 3.3vw, 48px); letter-spacing: -.5px; margin: 0; }
@media (max-width: 760px) {
  main { padding-inline: 18px; }
  .hero { gap: 20px; padding-top: 20px; }
  .zeus-panel { width: 100%; max-width: 480px; }
  .intro h1 { font-size: 34px; }
}