:root {
  --bg: #0d1217;
  --panel: #182128;
  --ink: #f4f6f7;
  --muted: #9fb0ba;
  --line: #40515f;
  --green: #9bc4d8;
  --deep: #587a8d;
  --gold: #d2aa47;
}

body { background: #172127; }

.site-header {
  height: 96px;
  padding-inline: max(28px, calc((100vw - 1500px) / 2 + 24px));
  background: linear-gradient(90deg, #12191f, #1d2c36);
  border-color: #334552;
}

.site-header nav a { color: #c4d0d7; }
.site-header nav a:hover { color: #fff; }
.site-header .nav-button {
  padding: 11px 15px;
  border: 1px solid #587084;
  border-radius: 5px;
  background: #233746;
}
.site-header .nav-button:hover { border-color: #d2aa47; color: #ffe19a; }
.logo small { color: #9fb0ba; }

.hero {
  min-height: calc(100vh - 96px);
  grid-template-columns: 1fr;
  background: #172127;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 0;
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #172127 0%, rgba(23, 33, 39, .97) 32%, rgba(29, 48, 60, .58) 61%, rgba(29, 48, 60, .08) 100%),
    linear-gradient(0deg, rgba(18, 27, 33, .88), transparent 38%);
}

.hero-image img { object-position: center; }
.hero-copy {
  width: min(58%, 880px);
  min-height: calc(100vh - 96px);
  padding-left: max(6vw, calc((100vw - 1500px) / 2 + 38px));
  background: none;
}
.hero h1 { font-size: clamp(3.6rem, 6.2vw, 6.8rem); }
.hero h1 em,
.owner-intro h2 em,
.section-copy h2 em,
.scoring h2 em,
.commissioner h2 em { color: #d2aa47; }
.kicker { color: #9bc4d8; }
.lede { color: #cbd4da; }
.primary {
  border: 1px solid #c59c39;
  border-radius: 5px;
  background: #d2aa47;
  color: #171205;
  box-shadow: 0 10px 24px rgba(210, 170, 71, .14);
}
.primary:hover { background: #e2bd5f; }
.actions > a span { color: #d2aa47; }
.hero-note {
  z-index: 2;
  color: #b9c7cf;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.owner-intro {
  background: linear-gradient(135deg, #182128, #21323e);
  border-block: 1px solid #40515f;
}
.owner-intro div > p,
.steps p,
.section-copy > p:last-child,
.score-copy > p,
.score-copy li span { color: #9fb0ba; }

.how, .scoring { background: linear-gradient(135deg, #172127, #203440); }
.steps li, .score-copy li { border-color: #40515f; }
.steps li > span { color: #d2aa47; }
.steps .key-rule {
  border-color: #587a8d;
  background: linear-gradient(135deg, #1b2b35, #2b4759);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.rule-note { background: #172127; border-color: #d2aa47; }
.rule-note span { color: #aebbc3; }

.strategy { background: linear-gradient(135deg, #182128, #21323e); }
.strategy-art { background: radial-gradient(circle at 42% 38%, #294a5d, #172127 54%, #0d1217); }
.strategy-art::before { border-color: #486276; }
.player-card {
  background: linear-gradient(150deg, #294252, #12191f);
  border-color: #67859a;
}
.player-card small, .player-card span, .rounds b { color: #9bc4d8; }
.used-stamp { border-color: #d2aa47; color: #ffe19a; }
.rounds span { border-color: #40515f; background: #121a20; }

.global-board { background: linear-gradient(135deg, #142029, #233b49); }
.global-rule {
  border-color: #486276;
  background: linear-gradient(135deg, #1b2b35, #294252);
}
.global-rule span,
.global-table-head > span,
.global-table-card td strong,
.global-table-card footer button { color: #9bc4d8; }
.global-podium article, .global-table-card {
  border-color: #40515f;
  background: linear-gradient(135deg, #182128, #21323e);
}
.global-podium .podium-first {
  border-color: #b9953d;
  background: linear-gradient(180deg, #3a321d, #1b252c);
}
.global-avatar { background: #315a6e; color: #c7e8f7; }
.global-podium strong { color: #ffe19a; }
.global-table-head { border-color: #40515f; }
.live-dot { background: #d2aa47; box-shadow: 0 0 0 5px rgba(210, 170, 71, .12); }
.leader-row { background: linear-gradient(90deg, rgba(201, 159, 57, .2), #294653 42%, #213944); }

.commissioner {
  background: linear-gradient(90deg, rgba(18, 25, 31, .97), rgba(35, 55, 68, .84)), url("assets/playoff-strategy.png") center / cover;
}
.commissioner > p:not(.kicker) { color: #ced9df; }
body > footer { background: #12191f; border-top: 1px solid #40515f; }

@media (max-width: 850px) {
  .site-header { height: 82px; }
  .hero { min-height: calc(100vh - 82px); }
  .hero-copy {
    width: 100%;
    min-height: calc(100vh - 82px);
    padding-left: 22px;
    background: linear-gradient(90deg, rgba(23, 33, 39, .98), rgba(29, 48, 60, .62));
  }
  .hero-image img { object-position: 68% center; }
}

@media (max-width: 520px) {
  .site-header .nav-button { border: 0; background: transparent; }
  .hero h1 { font-size: 3.45rem; }
  .hero-copy { padding-top: 72px; padding-bottom: 110px; }
  .hero-image img { object-position: 74% center; }
  .hero-image::after {
    background:
      linear-gradient(90deg, rgba(23, 33, 39, .98) 0 24%, rgba(29, 48, 60, .72) 72%, rgba(29, 48, 60, .4)),
      linear-gradient(0deg, #172127, transparent 50%);
  }
}

/* Keep the public page on the same War Room surface from top to bottom. */
body,
#main,
#main .owner-intro,
#main .how,
#main .strategy,
#main .scoring,
#main .global-board {
  background-color: #1a2a34;
  background-image: linear-gradient(135deg, #182832 0%, #213946 100%);
}

#main .how {
  border-block: 1px solid #40515f;
}

#main .rule-note,
#main .rounds span,
#main .score-copy li,
#main .global-table-card,
#main .global-podium article {
  background-color: #1c303b;
}