/* Match cards + group cards + fixture day groups */

/* ===== Compact "Live now" / "Next up" banner (lobby pages) ===== */
/* Mobile-first: label on top, teams centered below.
   Tablet+: single horizontal row with stage chip in the middle. */
.live-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border-hi);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.live-next:hover { background: var(--color-surface); transform: translateY(-1px); }
.live-next:active { transform: translateY(0); }
.live-next--live {
  border-color: rgba(255,59,48,0.4);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,59,48,0.14) 0%, transparent 70%),
    var(--color-bg-elev);
  box-shadow: var(--glow-live);
}
.live-next--next { border-color: rgba(231,180,108,0.35); }

.live-next__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
}
.live-next--live .live-next__label { color: var(--color-live); }
.live-next__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-live);
  box-shadow: 0 0 8px var(--color-live);
  animation: pulse 1.4s var(--ease-out) infinite;
  flex: 0 0 auto;
}
.live-next__more {
  margin-left: var(--s-1);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
}

.live-next__stage {
  display: none; /* phones hide the stage chip — label + teams is enough */
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-mute);
  white-space: nowrap;
}

.live-next__teams {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  font-size: var(--fs-md);
  flex-wrap: nowrap;
  max-width: 100%;
}
.live-next__flag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  flex: 0 0 auto;
}
.live-next__code { color: var(--color-text); }
.live-next__score {
  color: var(--color-gold);
  font-size: var(--fs-lg);
  padding: 0 var(--s-1);
  font-variant-numeric: tabular-nums;
}
.live-next__vs {
  color: var(--color-text-mute);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  padding: 0 var(--s-1);
}
.live-next__minute {
  color: var(--color-live);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

/* Two+ simultaneous live matches (e.g. the final group games, or knockout
   ties in the same slot) stack under the label so BOTH show on the lobby. */
.live-next__matches {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
}
.live-next__match {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding-top: var(--s-2);
  border-top: 1px solid var(--color-border);
}
.live-next__match:first-child { border-top: none; padding-top: 0; }

/* Tablet+ : flip back to a single-row layout with everything inline. */
@media (min-width: 560px) {
  .live-next {
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
  }
  .live-next__label { text-align: left; flex-wrap: nowrap; white-space: nowrap; }
  .live-next__stage { display: inline; flex: 1 1 auto; text-align: center; }
  .live-next__teams { margin-left: auto; }
  /* Multi-match banner stays stacked (label on top, games beneath) even on
     wide screens — a single row can't hold two games legibly. */
  .live-next--multi { flex-direction: column; align-items: stretch; }
  .live-next--multi .live-next__match { justify-content: center; }
  .live-next--multi .live-next__match .live-next__teams { margin-left: 0; }
}

/* Live poller swaps the banner inside .live-banner and toggles .is-updated
   to flash it whenever the score (or match) actually changes. */
.live-banner.is-updated { animation: liveBannerPing 800ms var(--ease-out); }
@keyframes liveBannerPing {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.018); }
  100% { transform: scale(1); }
}
/* The fixtures-page live card (js/matches.js poller) flashes the same way on a
   goal — but not on a routine minute tick. */
.live-now-slot.is-updated { animation: liveBannerPing 800ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .live-banner.is-updated,
  .live-now-slot.is-updated { animation: none; }
}

/* Groups poller re-renders the grid inside .groups-live and flashes it when a
   finished match moves the standings — a gentle fade, not a scale (it's big). */
.groups-live.is-updated { animation: groupsFlash 900ms ease-out; }
@keyframes groupsFlash {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .groups-live.is-updated { animation: none; }
}

/* ===== Live now strip ===== */
.live-now {
  margin-bottom: var(--s-6);
  padding: var(--s-4);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,59,48,0.18) 0%, transparent 60%),
    var(--color-bg-elev);
  border: 1px solid rgba(255,59,48,0.4);
  border-radius: var(--r-lg);
  box-shadow: var(--glow-live);
}
.live-now__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-live);
}
.live-now__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-live);
  box-shadow: 0 0 10px var(--color-live);
  animation: pulse 1.4s var(--ease-out) infinite;
}

/* ===== Day group ===== */
.day { margin-top: var(--s-6); }
.day__label {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.18em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin: 0 0 var(--s-3) 0;
}
.match-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ===== Match card ===== */
.match {
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--t-fast) var(--ease-out);
}
.match--live { border-color: rgba(255,59,48,0.35); box-shadow: var(--glow-live); }
.match--finished { opacity: 0.92; }

.match__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.match__stage { color: var(--color-text-dim); }
.match__time { color: var(--color-text-mute); font-variant-numeric: tabular-nums; }

.match__body {
  display: grid;
  /* flag | name | score | name | flag — flags pinned to card edges */
  grid-template-columns: 44px 1fr auto 1fr 44px;
  gap: var(--s-3);
  align-items: center;
}

.match__flag {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  flex: 0 0 auto;
}
.match__flag--tbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-mute);
  font-family: var(--font-display);
  font-size: 22px;
}

.match__name {
  min-width: 0;       /* allows ellipsis */
  overflow: hidden;
}
.match__name--left  { text-align: left; }
.match__name--right { text-align: right; }
.match__code {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-text);
  text-transform: uppercase;
}
.match__full {
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.match__owner {
  font-size: var(--fs-xs);
  margin-top: 2px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.match__score {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  justify-content: center;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  min-width: 80px;
}
.match__num {
  font-size: clamp(var(--fs-2xl), 8vw, var(--fs-3xl));
  color: var(--color-gold);
  line-height: 1;
}
.match__dash { color: var(--color-text-mute); font-size: var(--fs-lg); }
.match__vs {
  font-size: var(--fs-md);
  color: var(--color-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

@media (max-width: 480px) {
  .match__body { grid-template-columns: 36px 1fr auto 1fr 36px; gap: var(--s-2); }
  .match__flag { width: 36px; height: 36px; }
  .match__code { font-size: var(--fs-sm); }
  .match__full { font-size: 10px; }
}

/* ===== Group cards ===== */
.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
}
.group-card {
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.group-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: 0.1em;
  margin: 0 0 var(--s-3) 0;
  background: var(--grad-gold);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.group-card__list { list-style: none; margin: 0; padding: 0; }
.group-card__row {
  display: grid;
  grid-template-columns: 28px auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--color-border);
}
.group-card__row:first-child { border-top: none; }

/* Standings variant — pos + flag + who (code/owner) + 3 stat columns */
.group-card__list--standings .group-card__row {
  grid-template-columns: 18px 24px 1fr auto;
  gap: var(--s-2);
}
.group-card__row--advance .group-card__pos { color: var(--color-gold); font-weight: var(--fw-bold); }
.group-card__pos {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  text-align: center;
}
.group-card__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.group-card__list--standings .group-card__code { color: var(--color-text); font-size: var(--fs-sm); }
.group-card__list--standings .group-card__owner { font-size: 11px; }
.group-card__stats {
  display: grid;
  grid-template-columns: 26px 30px 30px;
  gap: 4px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.group-card__stat {
  font-size: var(--fs-sm);
  color: var(--color-text-dim);
}
.group-card__stat--pts {
  color: var(--color-gold);
  font-weight: var(--fw-bold);
}
.group-card__legend {
  display: grid;
  grid-template-columns: 26px 30px 30px;
  gap: 4px;
  text-align: center;
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--color-border);
  /* Push the legend to align under .group-card__stats — pos+flag+who occupy
     ~18 + 24 + 1fr (gap × 3 = 24px) on the left. */
  margin-left: auto;
}
.group-card__legend span {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-mute);
}
.group-card__flag {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface);
}
.group-card__flag--placeholder { background: var(--color-surface); }
.group-card__code {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--color-text-dim);
}
.group-card__name {
  font-size: var(--fs-sm);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-card__owner {
  font-size: var(--fs-xs);
  color: var(--color-gold);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

/* Land just below the top burger button, not flush under it. */
#now, #live { scroll-margin-top: calc(var(--s-7) + env(safe-area-inset-top, 0)); }

/* Floating "jump to the current match" button (js/matches.js). */
.now-fab {
  position: fixed;
  right: calc(var(--s-3) + env(safe-area-inset-right, 0));
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0));
  z-index: 7800;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border-hi);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.now-fab:active { transform: scale(0.96); }
.now-fab__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 8px var(--color-gold);
  animation: pulse 1.4s var(--ease-out) infinite;
}
.now-fab--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
@media (prefers-reduced-motion: reduce) {
  .now-fab__dot { animation: none; }
  .now-fab { transition: opacity var(--t-fast) var(--ease-out); }
}