/* ==========================================================================
   Public site — WeGro Champions League 2026
   ========================================================================== */

/* ---- Demo banner ---------------------------------------------------------- */
.demo-banner {
  background: linear-gradient(90deg, var(--wg-orange), var(--flame));
  color: #2a1102;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 7px 14px;
}
.demo-banner code {
  font-family: var(--mono);
  background: rgba(0, 0, 0, 0.16);
  padding: 1px 6px;
  border-radius: 5px;
}

/* ---- Header --------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(4, 33, 30, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
}
/* The logo is only 26px tall, but the tappable area around it should not be —
   44px is the size a thumb actually hits reliably. */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.brand img {
  height: 26px;
  width: auto;
}
.site-head__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.updated {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
/* Keep the header on one line on a phone: the signed-in email and the
   "Updated …" stamp are nice-to-have, the buttons are not. */
@media (max-width: 520px) {
  .site-head__meta > .pill {
    display: none;
  }
  .site-head__meta .btn {
    padding: 7px 11px;
    font-size: 13px;
  }
  .brand img {
    height: 22px;
  }
}
@media (max-width: 380px) {
  .updated {
    display: none;
  }
}

/* ---- Hero ----------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 22px 0 18px;
}
.hero__crest {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
}
.hero__title {
  font-size: clamp(24px, 6.4vw, 44px);
  line-height: 1.05;
  margin: 2px 0 6px;
}
.hero__title span {
  display: block;
  background: linear-gradient(100deg, var(--wg-orange), var(--flame));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
}
@media (min-width: 720px) {
  .hero {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 26px;
    padding: 34px 0 26px;
  }
  .hero__crest {
    width: 140px;
    height: 140px;
  }
}

/* ---- Countdown ------------------------------------------------------------ */
.countdown {
  margin-bottom: var(--gap);
  text-align: center;
}
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
}
.cd-unit {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 4px;
}
.cd-unit b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 5.5vw, 30px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--mint);
  line-height: 1.1;
}
.cd-unit span {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Banners -------------------------------------------------------------- */
.banner {
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: var(--gap);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.banner--champion {
  background: linear-gradient(100deg, var(--gold), #f0a93c);
  color: #2c1f00;
  font-family: var(--font-display);
  font-size: clamp(16px, 3.6vw, 22px);
  box-shadow: var(--shadow-lg);
}
.banner--live {
  background: rgba(242, 98, 42, 0.13);
  border: 1px solid rgba(242, 98, 42, 0.45);
  color: var(--text);
  font-weight: 600;
}

/* ---- Tabs ----------------------------------------------------------------- */
.tabs--sticky {
  position: sticky;
  top: 58px;
  z-index: 30;
  padding: 10px 0;
  margin-bottom: 4px;
  background: linear-gradient(180deg, var(--bg) 62%, transparent);
}
.panel {
  display: grid;
  gap: var(--gap);
  padding-bottom: 30px;
  grid-template-columns: minmax(0, 1fr);
}

/* ---- Column layouts ------------------------------------------------------- */
.cols-2,
.cols-3 {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 780px) {
  .cols-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The "Next up" card is stretched to match the leaderboard beside it, so centre
   its contents rather than leaving them stranded at the top. */
.card:has(> #nextUp) {
  display: flex;
  flex-direction: column;
}
.card:has(> #nextUp) > #nextUp {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
}

.spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--line-strong);
  border-top-color: var(--mint);
  animation: spin 0.85s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  display: grid;
  gap: 10px;
  justify-items: center;
}

/* ---- Definition list ------------------------------------------------------ */
.deflist {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 11px;
}
.deflist li {
  display: grid;
  gap: 1px;
}
.deflist dt,
.deflist .k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.deflist .v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}

/* ---- Venue map ------------------------------------------------------------ */
.map-embed {
  aspect-ratio: 16 / 10;
  width: 100%;
  margin: 0 0 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Side by side, the poster makes the Format card tall and the grid stretches the
   Venue card to match. Rather than leave dead space under the map, let the map
   grow into it — a bigger map is strictly more useful. */
@media (min-width: 780px) {
  .card:has(> .map-embed) {
    display: flex;
    flex-direction: column;
  }
  .card:has(> .map-embed) > .map-embed {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 260px;
  }
}
/* Google's map tiles are bright white against a dark page; take the edge off
   without making the labels unreadable, and go full strength on hover. */
.map-embed iframe {
  filter: saturate(0.9) brightness(0.92);
  transition: filter 0.25s ease;
}
.map-embed:hover iframe,
.map-embed:focus-within iframe {
  filter: none;
}
@media print {
  .map-embed {
    display: none;
  }
}

/* ---- Captains showcase ---------------------------------------------------- */
.captains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 760px) {
  .captains {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cap-card {
  position: relative;
  text-align: center;
  padding: 16px 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), rgba(11, 59, 54, 0.55));
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
  animation: riseIn 0.4s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.cap-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wg-green), var(--mint), var(--wg-orange));
}
.cap-card:hover {
  transform: translateY(-3px);
  border-color: rgba(63, 217, 164, 0.45);
}
.cap-photo {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 11px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(140deg, var(--mint), var(--wg-orange));
}
.cap-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--bg-2);
  display: block;
}
.cap-photo.no-img::after {
  content: "👤";
  position: absolute;
  inset: 3px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  font-size: 30px;
}
.cap-slot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 2px solid var(--mint);
  color: var(--mint);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
}
.cap-team {
  font-size: clamp(13px, 3.2vw, 16px);
  letter-spacing: 0.02em;
  color: var(--mint);
  margin: 0 0 3px;
}
.cap-person {
  margin: 0;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
}
.cap-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11px;
  color: var(--faint);
}

/* ---- Rivalry poster ------------------------------------------------------- */
.poster {
  position: relative;
  display: block;
  margin-top: 14px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  line-height: 0;
  text-decoration: none;
}
.poster img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.35s ease;
}
.poster:hover img,
.poster:focus-visible img {
  transform: scale(1.02);
}
.poster-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(4, 33, 30, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.poster:hover .poster-zoom,
.poster:focus-visible .poster-zoom {
  opacity: 1;
  transform: translateY(0);
}
/* Touch devices have no hover, so keep the affordance visible there. */
@media (hover: none) {
  .poster-zoom {
    opacity: 1;
    transform: none;
  }
}

/* ---- Live clock ----------------------------------------------------------- */
.live-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ---- Fixtures ------------------------------------------------------------- */
.fixtures {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}
.fx {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  overflow: hidden;
}
.fx--final {
  border-color: rgba(232, 195, 92, 0.42);
  background: linear-gradient(180deg, rgba(232, 195, 92, 0.09), var(--bg-2));
}
.fx--live {
  border-color: rgba(242, 98, 42, 0.5);
}
.fx__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
}
.fx__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 13px 12px;
  width: 100%;
  background: none;
  border: 0;
  text-align: inherit;
  font: inherit;
  color: inherit;
}
button.fx__body {
  cursor: pointer;
}
button.fx__body:hover {
  background: rgba(255, 255, 255, 0.03);
}
.fx__team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 16px);
}
.fx__team--away {
  justify-content: flex-end;
  text-align: right;
}
.fx__team.win {
  color: var(--mint);
}
.fx__team.lose {
  color: var(--muted);
}
.fx__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx__score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 5vw, 26px);
  font-variant-numeric: tabular-nums;
  padding: 2px 12px;
  border-radius: 9px;
  background: var(--surface-2);
  white-space: nowrap;
}
.fx__score--pending {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--faint);
  background: transparent;
  border: 1px solid var(--line);
  padding: 5px 10px;
}
.fx__events {
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  display: grid;
  gap: 5px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.14);
}
.fx__ev {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.fx__ev b {
  font-weight: 600;
}
.fx__ev.away {
  justify-content: flex-end;
  text-align: right;
}
/* A critical goal is marked in the match log with the same star the referee
   tapped, so the two screens read as the same record. */
.fx__crit {
  color: var(--gold);
}

/* ---- Standings ------------------------------------------------------------ */
.tbl .pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
}
.tbl tr.qualified .pos {
  background: linear-gradient(135deg, var(--wg-green), var(--mint-dim));
  color: #04231d;
}
.q-key,
.q {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: rgba(63, 217, 164, 0.16);
  border: 1px solid rgba(63, 217, 164, 0.42);
  color: var(--mint);
  font-size: 11px;
  font-weight: 700;
}
.team-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-family: var(--font-display);
}
.form {
  display: inline-flex;
  gap: 3px;
}
.form i {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #04231d;
}
.form i.W {
  background: var(--mint);
}
.form i.D {
  background: var(--muted);
}
.form i.L {
  background: #d96a6a;
  color: #2a0b0b;
}
.mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.mini-row:last-child {
  border-bottom: 0;
}
.mini-row .pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.mini-row.qualified .pos {
  background: linear-gradient(135deg, var(--wg-green), var(--mint-dim));
  color: #04231d;
}
.mini-row .pts {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
}

/* ---- Squads --------------------------------------------------------------- */
.squads {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
  .squads {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (min-width: 1080px) {
  .squads {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.squad__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.squad__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line-strong);
  flex: 0 0 auto;
}
.squad__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--mint);
  line-height: 1.2;
}
.squad__cap {
  font-size: 12px;
  color: var(--muted);
}
.budget {
  height: 6px;
  border-radius: 4px;
  background: var(--bg-2);
  overflow: hidden;
  margin: 8px 0 4px;
}
.budget i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--wg-green), var(--mint));
  transition: width 0.4s ease;
}
.budget.over i {
  background: linear-gradient(90deg, var(--flame), var(--danger));
}
.squad__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr);
}
.squad__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 14px;
}
.squad__list li.is-captain {
  background: rgba(232, 195, 92, 0.1);
}
/* A guest player — tinted like the captain's row, because they are also outside
   the auction, but dashed so it never reads as a bought squad member. */
.squad__list li.is-special {
  background: rgba(232, 195, 92, 0.07);
  border: 1px dashed rgba(232, 195, 92, 0.34);
}
.pos-tag {
  flex: 0 0 auto;
  width: 34px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 0;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--muted);
}
.pos-tag.GK {
  background: rgba(232, 195, 92, 0.18);
  color: var(--gold);
}
.pos-tag.DEF {
  background: rgba(63, 217, 164, 0.16);
  color: var(--mint);
}
.pos-tag.MID {
  background: rgba(0, 169, 80, 0.2);
  color: #5fd98d;
}
.pos-tag.FWD {
  background: rgba(242, 98, 42, 0.18);
  color: #ff9166;
}
.squad__list .price {
  margin-left: auto;
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.slot-empty {
  opacity: 0.45;
  font-style: italic;
}

/* ---- Auction pool --------------------------------------------------------- */
.pool {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
.pool__group h4 {
  margin: 0 0 7px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.pool__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.progress-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.progress-bar {
  flex: 1 1 180px;
  height: 8px;
  border-radius: 5px;
  background: var(--bg-2);
  overflow: hidden;
}
.progress-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--wg-green), var(--mint));
  transition: width 0.4s ease;
}

/* ---- Stats ---------------------------------------------------------------- */
.stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.stat-row:last-child {
  border-bottom: 0;
}
.stat-row .rank {
  width: 22px;
  font-size: 12px;
  font-weight: 700;
  color: var(--faint);
  flex: 0 0 auto;
}
.stat-row .who {
  min-width: 0;
  flex: 1 1 auto;
}
.stat-row .who b {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-row .who span {
  font-size: 12px;
  color: var(--faint);
}
.stat-row .val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}

.awards {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) {
  .awards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 980px) {
  .awards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.award {
  border: 1px solid rgba(232, 195, 92, 0.3);
  background: linear-gradient(180deg, rgba(232, 195, 92, 0.09), transparent);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
}
.award .medal {
  font-size: 26px;
  line-height: 1;
}
.award .label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin: 7px 0 3px;
}
.award .winner {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
}
.award .sub {
  font-size: 12px;
  color: var(--muted);
}
.award.tbd .winner {
  color: var(--faint);
  font-weight: 600;
  font-size: 15px;
}
/* How the total was earned, or why this winner was chosen. */
.award-note {
  margin-top: 5px;
  font-size: 11px;
  color: var(--faint);
  line-height: 1.45;
}

/* ---- Player points ledger -------------------------------------------------
   Wide table, so it scrolls inside its own box rather than pushing the page
   sideways on a phone. */
.pt-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.pt-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--muted);
}
.pt-chip b {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--mint);
}
.pt-chip.is-neg b {
  color: #ff9d9d;
}
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tbl--points {
  /* Nine stat columns plus rank, player and team. Narrower than this and the
     numbers start wrapping under their own headings. */
  min-width: 700px;
}
/* Numbers only, so they can be tight — it buys the width the names need. */
.tbl--points th:nth-child(n + 4),
.tbl--points td:nth-child(n + 4) {
  padding-left: 6px;
  padding-right: 6px;
}
/* Column heads are abbreviations, so the full word lives in a tooltip — without
   the browser's default dotted underline, which reads as a typo in a table. */
.tbl--points abbr {
  text-decoration: none;
  border-bottom: 0;
  cursor: help;
}
.tbl--points td .faint {
  font-size: 11px;
}

/* ---- Rules ---------------------------------------------------------------- */
.rules {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: r;
  display: grid;
  gap: 11px;
}
.rules li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.55;
}
.rules li::before {
  counter-increment: r;
  content: counter(r);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wg-green), var(--mint-dim));
  color: #04231d;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rules--plain li {
  grid-template-columns: minmax(0, 1fr);
}
.rules--plain li::before {
  display: none;
}
.rules--plain li {
  padding-left: 16px;
  position: relative;
}
.rules--plain li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 16px;
}
@media (min-width: 640px) {
  .stat-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tile {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px;
}
.tile b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(19px, 4.6vw, 26px);
  font-weight: 800;
  color: var(--gold);
  line-height: 1.15;
}
.tile span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint);
  font-weight: 700;
}

/* ==========================================================================
   CHARTS
   Palette validated against the card surface #0B3B36 — all four slots clear
   3:1, worst adjacent CVD ΔE 8.4. Bars in a single-series chart share one hue
   because teams and players have no natural order; goal difference is the one
   chart encoding polarity, so it gets the diverging blue/red pair.
   ========================================================================== */
.chart {
  --c-mint: #3fd9a4;
  --c-gold: #e8c35c;
  --c-blue: #3987e5;
  --c-pos: #3987e5; /* diverging: above the line */
  --c-neg: #e66767; /* diverging: below the line */
  --c-track: rgba(255, 255, 255, 0.07);
  --c-grid: rgba(255, 255, 255, 0.14);
}
.chart--enter .bar-fill,
.chart--enter .diverge-fill,
.chart--enter .meter-track > i {
  animation: growBar 0.62s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.chart--enter .bar-row:nth-child(2) .bar-fill {
  animation-delay: 0.05s;
}
.chart--enter .bar-row:nth-child(3) .bar-fill {
  animation-delay: 0.1s;
}
.chart--enter .bar-row:nth-child(4) .bar-fill {
  animation-delay: 0.15s;
}
.chart--enter .bar-row:nth-child(n + 5) .bar-fill {
  animation-delay: 0.2s;
}
@keyframes growBar {
  from {
    transform: scaleX(0);
  }
}

.chart-note {
  margin: -8px 0 12px;
  font-size: 12.5px;
}

.chart-empty {
  margin: 6px 0;
  padding: 18px 12px;
  text-align: center;
  color: var(--faint);
  font-size: 13.5px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}

/* ---- Horizontal bars ------------------------------------------------------ */
.bars,
.diverge {
  display: grid;
  gap: 9px;
}
.bar-row {
  display: grid;
  grid-template-columns: minmax(74px, 30%) minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  padding: 3px 4px;
  min-height: 30px; /* comfortable hover/touch target */
  cursor: default;
}
.bar-row:hover,
.bar-row:focus-visible {
  background: rgba(255, 255, 255, 0.045);
  outline: none;
}
.bar-row:focus-visible {
  box-shadow: 0 0 0 2px var(--mint);
}
.bar-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--faint);
  letter-spacing: 0.02em;
}
.bar-track {
  height: 14px; /* thin marks — never fill the row */
  border-radius: 3px;
  background: var(--c-track);
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  width: var(--pct);
  min-width: 3px;
  /* square at the baseline, 4px rounded at the data end */
  border-radius: 0 4px 4px 0;
  transform-origin: left center;
  transition: width 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
  background: var(--c-mint);
}
/* A zero must render as nothing — a minimum-width stub would overstate it. */
.bar-fill.is-zero {
  min-width: 0;
}
.bars--gold .bar-fill {
  background: var(--c-gold);
}
.bars--blue .bar-fill {
  background: var(--c-blue);
}
.bar-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- Diverging ------------------------------------------------------------ */
.diverge-track {
  position: relative;
  height: 14px;
  border-radius: 3px;
  background: var(--c-track);
}
.diverge-zero {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px; /* hairline, solid — never dashed */
  background: var(--c-grid);
}
.diverge-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--pct);
  min-width: 2px;
  transition: width 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
  transform-origin: left center;
}
.diverge-fill.is-pos {
  left: 50%;
  border-radius: 0 4px 4px 0;
  background: var(--c-pos);
}
.diverge-fill.is-neg {
  right: 50%;
  border-radius: 4px 0 0 4px;
  background: var(--c-neg);
  transform-origin: right center;
}
.bar-value.is-neg {
  color: #ff9d9d;
}
.diverge-legend {
  display: flex;
  gap: 16px;
  margin-top: 3px;
  padding-left: 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.diverge-legend .key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}

/* ---- Goals by pitch zone (sequential, one hue) ---------------------------- */
.zone-chart {
  display: grid;
  gap: 6px;
}
.zone-chart-goal {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--mint);
  padding: 4px;
  border-top: 3px solid var(--mint);
  background: linear-gradient(180deg, rgba(63, 217, 164, 0.2), transparent);
}
.zone-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.zone-cell-c {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--fill, transparent);
  padding: 12px 6px;
  text-align: center;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: default;
}
.zone-cell-c b {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.zone-cell-c span {
  font-size: 10.5px;
  color: var(--text);
  opacity: 0.72;
  line-height: 1.3;
}
.zone-cell-c:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

/* ---- Saves & clearances (two series, stacked) ----------------------------- */
.chart-legend {
  display: flex;
  gap: 16px;
  margin: 0 0 8px 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.chart-legend .key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}
.key--saves {
  background: var(--c-blue);
}
.key--clears {
  background: var(--c-gold);
}
.stack-track {
  display: flex;
  align-items: stretch;
  /* The gap IS the spacer between segments — a 2px sliver of the card surface,
     so the split survives even where two similar values meet. */
  gap: 2px;
}
.stack-seg {
  width: var(--pct);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Segment labels take whichever ink actually reads on their own fill: white on
   the mid-tone blue, near-black on the light gold. */
.stack-seg b {
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stack-seg.is-a {
  background: var(--c-blue);
}
.stack-seg.is-a b {
  color: #fff;
}
.stack-seg.is-b {
  background: var(--c-gold);
}
.stack-seg.is-b b {
  color: #06231f;
}
.key--pos {
  background: var(--c-pos);
}
.key--neg {
  background: var(--c-neg);
}

/* ---- Meters --------------------------------------------------------------- */
.meters {
  display: grid;
  gap: 13px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
  .meters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.meter {
  border-radius: 8px;
  padding: 4px;
  cursor: default;
}
.meter:hover,
.meter:focus-visible {
  background: rgba(255, 255, 255, 0.045);
  outline: none;
}
.meter:focus-visible {
  box-shadow: 0 0 0 2px var(--mint);
}
.meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 5px;
}
.meter-head b {
  font-family: var(--font-display);
  font-weight: 800;
}
.meter-head .num {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.meter-track {
  height: 10px;
  border-radius: 4px;
  /* unfilled track is a lighter step of the fill's own ramp */
  background: rgba(63, 217, 164, 0.13);
  overflow: hidden;
}
.meter-track > i {
  display: block;
  height: 100%;
  width: var(--pct);
  border-radius: 0 4px 4px 0;
  transform-origin: left center;
  background: var(--c-mint);
  transition: width 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.meter-track > i.is-over {
  background: var(--c-neg);
}
.meter-sub {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--faint);
}

/* ---- Tooltip -------------------------------------------------------------- */
.chart-tip {
  position: absolute;
  z-index: 95;
  max-width: min(78vw, 300px);
  padding: 8px 11px;
  border-radius: 9px;
  background: #04211e;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.4;
  pointer-events: none;
}

/* ==========================================================================
   MOTION — transform/opacity only, so it stays on the compositor.
   ========================================================================== */
.panel:not([hidden]) > * {
  animation: riseIn 0.34s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.panel:not([hidden]) > *:nth-child(2) {
  animation-delay: 0.045s;
}
.panel:not([hidden]) > *:nth-child(3) {
  animation-delay: 0.09s;
}
.panel:not([hidden]) > *:nth-child(n + 4) {
  animation-delay: 0.13s;
}
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
  }
}

.hero {
  animation: riseIn 0.4s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.banner--champion {
  animation: popIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.35) both;
}
@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.93);
  }
}

/* A score that just changed gets one pulse, so a goal is impossible to miss. */
.fx__score.bump,
.mini-row.bump .pts {
  animation: bump 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
@keyframes bump {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.28);
    color: var(--mint);
  }
  100% {
    transform: scale(1);
  }
}

.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

/* ---- Footer --------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 18px 0 26px;
  margin-top: 20px;
}
.foot-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
/* Footer links sit at the very bottom of a long scroll — give them enough
   height to be tapped without zooming. */
.site-foot a {
  display: inline-block;
  padding: 6px 2px;
}
.credit {
  color: var(--mint);
  font-weight: 700;
}
.credit:hover {
  color: var(--wg-orange);
}

/* ---- Print ---------------------------------------------------------------- */
@media print {
  .site-head,
  .tabs,
  .site-foot,
  .demo-banner,
  .countdown,
  #mapLink {
    display: none !important;
  }
  .panel[hidden] {
    display: grid !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .card {
    border-color: #ccc;
    box-shadow: none;
    background: #fff;
    break-inside: avoid;
  }
}