/* Visible mode choices keep selection separate from starting a game. */
.home-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--rule); border-radius: var(--radius-control); }
.home-mode-switch .mode-option { justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 10px 8px; border: 1px solid transparent; border-radius: var(--radius-control); text-align: center; }
.home-mode-switch .mode-option strong { font-size: 15px; }
.home-mode-switch .mode-option[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.home-mode-switch .mode-option[aria-pressed="false"] { color: var(--ink); }
.home-mode-switch .mode-check { width: 16px; }
.home-mode-switch .mode-check[hidden] { display: inline-block; visibility: hidden; }
.home-mode-switch .mode-check svg { width: 16px; height: 16px; }
.home-mode-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin: 10px 0 16px; }
.home-mode-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.home .home-progress { margin: 12px 0 0; font-size: 13px; }

/* Home hero: the selected mode's card. Daily uses the night palette so it reads
   as today's main event; Practice keeps the light outline. */
.home-actions { padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius-panel); }
.home-actions[data-mode="ranked"] {
  --bg: var(--night); --ink: var(--chalk);
  --muted: color-mix(in srgb, var(--chalk) 80%, var(--night));
  --rule: color-mix(in srgb, var(--chalk) 26%, transparent);
  --control-rule: color-mix(in srgb, var(--chalk) 56%, transparent);
  border-color: var(--night); background: var(--night); color: var(--chalk);
}
.home-actions[data-mode="ranked"] .button:focus-visible, .home-actions[data-mode="ranked"] .mode-option:focus-visible { outline-color: var(--fresh); }
.home-countdown {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13px; line-height: 1.4;
}
.home-countdown time { color: var(--ink); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.home-countdown small { flex-basis: 100%; font-size: 12px; }

/* In-game round state: running total, points per locked round and a draining clock. */
.question-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
.question-top > :not(.question-meta, .time-bar) { justify-self: end; }
.question-meta { display: grid; gap: 2px; min-width: 0; }
.question-meta .eyebrow { margin: 0; white-space: nowrap; }
.running-total { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.3; }
.running-total strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.time-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.time-bar i { display: block; height: 100%; transform-origin: left center; transform: scaleX(var(--time-left, 1)); background: var(--pitch); }
.time-bar[data-urgency="urgent"] i, .time-bar[data-urgency="expired"] i { background: #A52222; }
@media (prefers-reduced-motion: no-preference) {
  .time-bar i { transition: transform 100ms linear, background-color var(--motion-fast) var(--motion-ease); }
}
.progress { height: 6px; }
.progress span { border-radius: 2px; }
.progress .done[data-band="high"] { border-color: var(--ink); background: var(--ink); }
.progress .done[data-band="mid"] { border-color: var(--pitch); background: var(--pitch); }
.progress .done[data-band="low"] { border-color: var(--pitch); background: color-mix(in srgb, var(--pitch) 40%, transparent); }
.progress .done[data-band="zero"] { background: transparent; border-style: dashed; }

/* Two secondary result actions share a row only when both labels fit. */
@media (max-width: 359px) { .result-actions { grid-template-columns: minmax(0, 1fr); } .home-actions { padding: 12px; } }

/* Home layout: one container edge, the stadium as a banner and the hero card
   overlapping it. DOM order is unchanged; grid areas place every part. */
.home {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "copy" "art" "card" "board" "note" "test" "foot";
  max-width: none;
  margin-inline: auto;
}
.home > * { grid-column: auto; min-width: 0; }
.home > h1 { grid-area: title; width: fit-content; max-width: 100%; margin-bottom: 12px; }
.home > .home-copy { grid-area: copy; margin-bottom: 20px; }
.home > .stadium {
  grid-area: art;
  width: 100%; max-width: none; height: 132px; margin: 0;
  aspect-ratio: auto; object-fit: cover; object-position: 50% 72%;
}
.home > .home-actions {
  grid-area: card; position: relative; margin-top: -44px; background: var(--bg);
  box-shadow: 0 10px 28px rgb(7 57 45 / .22);
}
.home > .home-leaderboard {
  grid-area: board; justify-self: center; width: auto; margin: 12px 0 0;
  padding-inline: 0; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px;
}
.home > .practice-note { grid-area: note; margin-block: 8px 0; }
.home > .small { grid-area: test; }
.home > .site-footer { grid-area: foot; margin-top: 24px; }
.home > .site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.home > .site-footer > span { font-size: 12px; color: var(--muted); }
.home > .site-footer .service-links { flex-basis: auto; border-top: 0; padding-top: 0; }
.home > .site-footer::before { content: ""; flex-basis: 100%; order: -1; border-top: 1px solid var(--rule); }

/* Shared container edge for header rule, content and bottom bands. The game
   stage spans the full width, so its header rule and bands do too. */
#app:not(:has([data-view="game"])) > .site-header { border-bottom: 0; }
#app:not(:has([data-view="game"])) > .site-header::after {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0;
  border-bottom: 1px solid var(--rule);
}
#app:not(:has([data-view="game"])) > .bottom-bands { margin-inline: var(--gutter); border-radius: 4px 4px 0 0; overflow: hidden; }
@media (min-width: 600px) and (max-width: 899px) { .home { max-width: 560px; } }

@media (min-width: 900px) {
  .home {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    grid-template-rows: auto auto auto 1fr auto auto auto;
    grid-template-areas: "art art" "title card" "copy card" "board card" "note note" "test test" "foot foot";
    column-gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }
  .home > .stadium { height: clamp(220px, 22vw, 300px); object-position: 50% 58%; }
  .home > h1 { margin-top: 36px; }
  .home > .home-actions { margin-top: -96px; }
  .home > .home-leaderboard { justify-self: start; margin-top: 0; }
  .home > .home-copy { margin-bottom: 12px; }
}
/* Short phones keep Play above the fold: a thinner banner and overlap. */
@media (max-width: 899px) and (max-height: 700px) {
  .home > .stadium { height: 84px; }
  .home > .home-actions { margin-top: -28px; }
}

/* Question phase motion. Decorative, transform and opacity only, never on the
   prompt or input surface, and never delaying the clock or input. */
.time-bar { position: relative; overflow: visible; }
.time-bar i { border-radius: 3px; }
.time-bar::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--time-left, 1) * 100%);
  width: 16px; height: 16px; border: 1.5px solid var(--ink); border-radius: 50%;
  background: conic-gradient(var(--ink) 0 10%, var(--bg) 10% 33%, var(--ink) 33% 43%, var(--bg) 43% 66%, var(--ink) 66% 76%, var(--bg) 76%);
  translate: -50% -50%; rotate: calc((1 - var(--time-left, 1)) * 1440deg); pointer-events: none;
}
.time-bar[data-urgency="expired"]::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .time-bar::after { transition: left 100ms linear; }
  .answer-clock[data-urgency="urgent"] { animation: clock-pulse 1s ease-in-out infinite; }
  .football-stage:has(.answer-clock[data-urgency="urgent"]) .football-stage__world::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 35%, transparent 25%, rgb(165 34 34 / .3));
    animation: crowd-pulse 1s ease-in-out infinite;
  }
  [data-round-status="feedback"] .progress .done:not(:has(~ .done)) { animation: segment-pop 380ms cubic-bezier(.3,1.6,.5,1); }
  #answer[data-shake] { animation: answer-shake 260ms ease-in-out; }
  .stage-feedback .stage-points { animation: points-pop 520ms cubic-bezier(.3,1.5,.5,1) 80ms backwards; }
  .stage-feedback[data-outcome="accepted"] { animation: net-ripple 700ms ease-out; }
  .stage-feedback[data-outcome="accepted"] .feedback-verdict { animation: verdict-slide 320ms var(--motion-ease) backwards; }
  .stage-feedback[data-outcome="timeout"], .stage-feedback[data-outcome="passed"] { animation: dull-thud 360ms ease-out; }
  .ready-intro h1::after {
    content: ""; display: block; width: 28px; height: 28px; margin-top: 12px; border-radius: 50%;
    background: conic-gradient(var(--ink) 0 10%, var(--bg) 10% 33%, var(--ink) 33% 43%, var(--bg) 43% 66%, var(--ink) 66% 76%, var(--bg) 76%);
    border: 2px solid var(--ink); animation: kickoff-roll 1.6s cubic-bezier(.2,.7,.3,1) both;
  }
  @keyframes clock-pulse { 50% { transform: scale(1.06); } }
  @keyframes crowd-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
  @keyframes segment-pop { 0% { transform: scaleY(1); } 40% { transform: scaleY(2.6); } 100% { transform: scaleY(1); } }
  @keyframes answer-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
  @keyframes points-pop { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
  @keyframes net-ripple { 0% { box-shadow: 0 0 0 0 rgb(184 229 106 / .85); } 100% { box-shadow: 0 0 0 18px rgb(184 229 106 / 0); } }
  @keyframes verdict-slide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes dull-thud { 0% { transform: translateY(-4px); } 40% { transform: translateY(2px); } 100% { transform: translateY(0); } }
  @keyframes kickoff-roll { from { translate: -120px 0; rotate: -720deg; opacity: 0; } 25% { opacity: 1; } to { translate: 0 0; rotate: 0; opacity: 1; } }
}