:root {
  color-scheme: dark;
  --bg: #0b1024;
  --header: #0f152c;
  --surface: #151e36;
  --soft: #1c2943;
  --text: #f5f6ff;
  --muted: #b3bfd7;
  --line: #32415d;
  --accent: #91f5dc;
  --accent-hover: #b7ffed;
  --accent-ink: #0a2c32;
  --focus: #ffc486;
  --link: #a2f6e1;
  --success: #a8f6ca;
  --error: #ffb2ac;
  --coin: #ffd283;
  --coin-fill: #d69546;
  --radius: 12px;
  --radius-button: 8px;
}

.brand-mark {
  position: relative;
  border: 1px solid #3f777c;
  border-radius: 8px;
  background: #204348;
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 18% 20%;
  background: #a9fae8;
  clip-path: polygon(0 47%, 100% 0, 62% 100%, 43% 62%);
}
.relay-hero {
  position: relative;
  isolation: isolate;
  min-height: 459px;
  display: flex;
  align-items: center;
  margin-top: 26px;
  overflow: hidden;
  border-radius: 17px;
  border: 1px solid #354566;
  background: #111a35;
}
.hero-stage, .relay-hero::after { position: absolute; inset: 0; }
.hero-stage { z-index: -2; left: 40%; overflow: hidden; background: linear-gradient(160deg, #479ee3, #64c8d9); }
.hero-stage img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.relay-hero::after {
  content: "";
  z-index: -1;
  background: linear-gradient(90deg, #101831 37%, #101831c9 45%, transparent 62%);
}
.hero-copy { padding: 40px clamp(22px, 5vw, 66px); }
.hero-copy .eyebrow { color: #9cf4de; font: 750 .82rem/1.25 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.hero-copy h1 {
  margin: 13px 0 17px;
  max-width: 8.8ch;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(3rem, 7.8vw, 6.2rem);
  line-height: .95;
  letter-spacing: -.068em;
}
.hero-copy > p:not(.eyebrow) { max-width: 35ch; font-size: 1.04rem; color: #c9d4ec; }
.hero-copy .button { margin-top: 22px; }
.relay-deck { padding-top: 28px; scroll-margin-top: 18px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { padding: 6px 12px; min-height: 34px; background: transparent; border: 1px solid #354764; border-radius: 7px; color: #c4d1e9; font-size: .82rem; font-weight: 660; }
.filters button[aria-pressed="true"] { background: #253f52; color: #b6f8e7; border-color: #578d91; }
.game-card { transition: border-color .16s ease; }
.game-card:hover { border-color: #72aeac; }
.relay-deck h2, .play-heading h1 { font-family: "Archivo Black", "Arial Black", sans-serif; letter-spacing: -.045em; }
.play-layout { grid-template-columns: minmax(0, 1fr) minmax(248px, .36fr); }
.play-heading h1 { font-size: clamp(1.9rem, 4.2vw, 3.15rem); }
.game-stage { background: #0a1229; }
.round-panel .score-pair div { border-top: 2px solid #447f83; }
.game-detail:empty { display: none; }
.auth-preview { border: 1px solid var(--line); }
.auth-card { border-top: 3px solid #65b9b0; }
.footer-row .brand-mark { transform: scale(.8); }

@media (max-width: 800px) {
  .relay-hero { min-height: 405px; }
  .play-layout { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .round-panel { grid-template-columns: 1fr 1fr; }
  .round-panel .game-rules { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .relay-hero { min-height: 415px; align-items: end; margin-top: 13px; }
  .hero-stage { left: 0; bottom: 31%; }
  .hero-stage img { object-position: center top; }
  .relay-hero::after { background: linear-gradient(0deg, #101831 15%, #101831 33%, #10183128 76%, transparent); }
  .hero-copy { padding: 24px 16px; }
  .hero-copy h1 { font-size: clamp(2.9rem, 11vw, 4rem); margin: 7px 0 10px; }
  .hero-copy h1 br { display: none; }
  .hero-copy > p:not(.eyebrow) { font-size: .91rem; max-width: 34ch; }
  .hero-copy .button { margin-top: 14px; }
  .relay-deck { padding-top: 22px; }
  .relay-deck .section-heading { gap: 9px; margin-bottom: 11px; }
  .filters button { padding-inline: 8px; }
  .round-panel { grid-template-columns: 1fr; }
  .round-panel .game-rules { grid-column: auto; }
  .library-play .play-layout { grid-template-areas: "score" "actions" "field" "rules"; }
  .library-play .round-panel { display: contents; }
  .library-play .play-field { grid-area: field; }
  .library-play .score-pair { grid-area: score; }
  .library-play .round-actions { grid-area: actions; }
  .library-play .game-rules { grid-area: rules; }
}