/* Live right now — a scoreboard, not a card grid.
   Rows separated by rules; the score numerals are the one loud thing.
   Tokens come from style.css; this file only adds what a scoreboard needs,
   and a dark palette, because this page gets read at the rink at night. */

.live { --rule: #dfe3ea; --live-red: var(--red, #c8102e); --score-ink: var(--navy); --muted: var(--subtle); }

.nav a[aria-current="page"] { color: var(--gold-bright); }

.live .live-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-bottom: 1.25rem; }
.live .live-head h1 { color: var(--navy); font-size: clamp(2rem, 6vw, 3rem); line-height: 1; }
.live .live-status { color: var(--muted); font-size: 0.95rem; }

.live .live-controls { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin-bottom: 1.5rem; }
.live .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.live .chip {
  font: inherit; font-size: 0.9rem; font-weight: 600;
  color: var(--navy); background: transparent;
  border: 1.5px solid var(--navy); border-radius: 999px;
  padding: 0.3rem 0.85rem; cursor: pointer;
}
.live .chip[aria-pressed="true"] { background: var(--navy); color: #fff; }
.live .chip:focus-visible, .live .find input:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 2px; }
.live .find { flex: 1 1 14rem; }
.live .find input {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 0.5rem 0.85rem; border: 1.5px solid var(--rule); border-radius: 10px;
  background: var(--card); color: var(--ink);
}
.live .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.live .sort { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); }
.live .sort-label { margin-right: 0.15rem; }
.live .sort-choice {
  font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--navy); background: transparent;
  border: 0; border-bottom: 2px solid transparent; padding: 0.15rem 0.1rem; cursor: pointer;
}
.live .sort-choice[aria-pressed="true"] { border-bottom-color: var(--gold); }
.live .sort-choice:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 2px; }

.live .league h2 { color: var(--navy); font-size: 1.35rem; margin: 1.75rem 0 0.25rem; }
.live .league:first-child h2 { margin-top: 0; }
.live .division h3 { font-size: 0.95rem; font-weight: 600; color: var(--muted); margin: 1.1rem 0 0.1rem; }
.live .division:first-of-type h3 { margin-top: 0.4rem; }
.live .division .game:first-of-type { border-top-color: var(--rule); }

.live .game { padding: 1rem 0 1.1rem; border-top: 1px solid var(--rule); }
.live .league .game:first-of-type { border-top: 2px solid var(--navy); }

.live .scoreline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; }
.live .side { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.live .side.visitor { flex-direction: row-reverse; text-align: right; }
.live .crest { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }
.live .crest-blank {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--navy); color: var(--gold-bright);
  font-family: "Big Shoulders", sans-serif; font-weight: 800; font-size: 1.3rem;
}
.live .team { display: flex; flex-direction: column; min-width: 0; }
.live .team .name { font-family: "Big Shoulders", -apple-system, sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; }
.live .team .club { color: var(--muted); font-size: 0.8rem; }

.live .score { display: grid; grid-template-columns: auto auto; column-gap: 0.75rem; justify-items: center; align-items: baseline; padding: 0 0.5rem; }
.live .score .num {
  font-family: "Big Shoulders", -apple-system, sans-serif; font-weight: 800;
  font-size: 2.75rem; line-height: 1; color: var(--score-ink); min-width: 1.4ch; text-align: center;
  font-variant-numeric: tabular-nums;
}
.live .score .state { grid-column: 1 / -1; font-size: 0.75rem; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem; white-space: nowrap; }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); display: inline-block; }
.live .is-live .dot { background: var(--live-red); animation: pulse 1.6s ease-in-out infinite; }
.live .is-live .state { color: var(--live-red); }
.live .is-unofficial .dot { background: var(--cheese); }
.live .is-final .num { color: var(--muted); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .live .is-live .dot { animation: none; } }

.live .meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; margin-top: 0.55rem; font-size: 0.85rem; color: var(--muted); }
.live .meta .last { color: var(--ink); }

.live .periods { border-collapse: collapse; margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.live .periods th, .live .periods td { padding: 0.05rem 0.55rem; text-align: center; font-weight: 500; }
.live .periods th:first-child { text-align: left; padding-left: 0; font-weight: 600; color: var(--ink); }
.live .periods thead th { color: var(--muted); font-weight: 600; }

.live .empty { padding: 2.5rem 0 1rem; }
.live .empty h2 { color: var(--navy); font-size: 1.6rem; margin-bottom: 0.4rem; }
.live .empty p { color: var(--muted); max-width: 40rem; }
.live .next-up { list-style: none; margin-top: 1.25rem; max-width: 40rem; }
.live .next-up li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.1rem 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--rule); font-size: 0.95rem; }
.live .next-up .next-up-head { display: block; border-top: 0; padding-bottom: 0.2rem; font-weight: 600; color: var(--ink); }
.live .next-up .time { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.live .next-up .venue { grid-column: 2; color: var(--muted); font-size: 0.85rem; }

.live .fine { margin-top: 2.5rem; font-size: 0.85rem; color: var(--muted); max-width: 40rem; }

@media (max-width: 560px) {
  .live .scoreline { grid-template-columns: 1fr auto 1fr; gap: 0.4rem; }
  .live .side { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .live .side.visitor { align-items: flex-end; }
  .live .crest { width: 36px; height: 36px; flex-basis: 36px; }
  .live .team .name { font-size: 1.05rem; }
  .live .score .num { font-size: 2.3rem; }
}

@media (prefers-color-scheme: dark) {
  body:has(.live) { background: var(--navy-deep); color: #eef1f6; }
  .live { --rule: #24324f; --score-ink: #ffffff; --muted: #9aa5b8; --ink: #eef1f6; --card: #13223f; }
  .live .live-head h1, .live .league h2, .live .empty h2 { color: var(--gold-bright); }
  .live .chip { color: #eef1f6; border-color: #9aa5b8; }
  .live .sort-choice { color: #eef1f6; }
  .live .sort-choice[aria-pressed="true"] { border-bottom-color: var(--gold-bright); }
  .live .chip[aria-pressed="true"] { background: var(--gold-bright); color: var(--navy-deep); border-color: var(--gold-bright); }
  .live .find input { border-color: #24324f; }
  .live .league .game:first-of-type { border-top-color: #9aa5b8; }
  .live .crest-blank { background: #24324f; }
  .live .team .name, .live .meta .last, .live .periods th:first-child, .live .next-up .time, .live .next-up .next-up-head { color: #eef1f6; }
  footer { border-top-color: #24324f; }
}