/* ═══════════════════════════════════════════════════════════════════════════
   Tournament List v2 — Champions League matchday programme

   Class prefix `tlv2-` keeps this isolated from the existing `tcard` /
   `tournaments-*` system so the two pages can coexist during the A/B.

   Design brief: prestige in chrome, urgency in data. The frame stays calm
   (Marcellus engraved plates, silver hairlines, midnight navy); countdowns,
   live tickers, registration straps do the FOMO work. Per-tab variants
   diverge — Open is forward-leaning, Live earns elevation, Past earns
   restraint.

   No banned patterns. Status colour is signalled by background tint +
   border + leading dot — never by border-left/border-right stripes
   wider than 1px. No gradient text anywhere.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Page-local token additions ──────────────────────────────────────────── */
/* Deepening the page bg widens the contrast against `--bg-base` so the
   ticket-notch mask is actually readable on glossy monitors. We tint the
   navy toward the same hue family the brand silver lives in. */
.tlv2-page {
  --tlv2-bg-page:    oklch(0.08 0.025 260);   /* deeper than --bg-deep */
  --tlv2-bg-card:    oklch(0.14 0.030 258);   /* card surface, slight hue toward brand */
  --tlv2-bg-card-hi: oklch(0.18 0.035 258);   /* hovered/lifted */
  --tlv2-hairline:   color-mix(in oklch, var(--accent) 18%, transparent);
  --tlv2-hairline-bright: color-mix(in oklch, var(--accent) 36%, transparent);

  /* Status hues — sit inside the broadcast palette */
  --tlv2-live:       oklch(0.66 0.21 28);     /* match-clock red-orange */
  --tlv2-live-10:    color-mix(in oklch, var(--tlv2-live) 12%, transparent);
  --tlv2-live-30:    color-mix(in oklch, var(--tlv2-live) 30%, transparent);
  --tlv2-open:       oklch(0.72 0.15 165);    /* emerald, muted */
  --tlv2-open-10:    color-mix(in oklch, var(--tlv2-open) 10%, transparent);
  --tlv2-open-30:    color-mix(in oklch, var(--tlv2-open) 28%, transparent);
  --tlv2-upcoming:   oklch(0.78 0.10 240);    /* steel blue, restrained */
  --tlv2-upcoming-10:color-mix(in oklch, var(--tlv2-upcoming) 10%, transparent);
  --tlv2-upcoming-30:color-mix(in oklch, var(--tlv2-upcoming) 28%, transparent);

  background: var(--tlv2-bg-page);
}

/* Body bg also deepens for the visual continuity beneath the page block */
body:has(.tlv2-page) {
  background: oklch(0.08 0.025 260);
}


/* ── Page container ──────────────────────────────────────────────────────── */
.tlv2-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 4.5rem) clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 6rem);
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}


/* ── Global live strap (UCL-style breaking-news bar) ─────────────────────── */
/* Shows from any tab when something is in_progress, so a player who lands
   on Open never misses that a final is unfolding right now. */
[hidden] { display: none !important; }

.tlv2-livestrap {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--tlv2-live) 14%, transparent) 0%,
    transparent 100%);
  border: 1px solid color-mix(in oklch, var(--tlv2-live) 30%, transparent);
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.tlv2-livestrap__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tlv2-live);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--tlv2-live) 70%, transparent);
  animation: tlv2-livePulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  flex-shrink: 0;
}
@keyframes tlv2-livePulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--tlv2-live) 70%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in oklch, var(--tlv2-live) 0%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in oklch, var(--tlv2-live) 0%, transparent); }
}

.tlv2-livestrap__copy {
  flex: 1;
  min-width: 0;
}
.tlv2-livestrap__copy strong {
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

.tlv2-livestrap__cta {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tlv2-live);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border: 1px solid color-mix(in oklch, var(--tlv2-live) 40%, transparent);
  border-radius: 3px;
  transition: background 0.2s var(--ease-out);
  flex-shrink: 0;
}
.tlv2-livestrap__cta:hover {
  background: color-mix(in oklch, var(--tlv2-live) 12%, transparent);
  /* Pin red colour against base.css's `a:hover` silver override */
  color: var(--tlv2-live);
}


/* ── Page header (per-tab eyebrow) ───────────────────────────────────────── */
.tlv2-head {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}

.tlv2-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.42em;     /* generous tracking — broadcast supers */
  color: var(--accent);
  margin: 0;
  /* Subtle UCL-style framing — silver hairlines flank the eyebrow */
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
}
.tlv2-eyebrow::before,
.tlv2-eyebrow::after {
  content: '';
  width: clamp(2rem, 6vw, 4rem);
  height: 1px;
  background: var(--tlv2-hairline);
}


/* ── Tab bar ─────────────────────────────────────────────────────────────── */
/* 2px silver underline replaces the audit-flagged 5px dot. The count chip
   gets brighter on the active tab. Keyboard arrow navigation is preserved
   in JS — visual focus uses a 2px silver offset outline. */
.tlv2-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid var(--tlv2-hairline);
  position: relative;
}

.tlv2-tab {
  position: relative;
  background: none;
  border: none;
  padding: 0.875rem 1.5rem 1rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  transition: color 0.25s var(--ease-out);
}
.tlv2-tab:hover { color: var(--text-secondary); }

.tlv2-tab.is-active { color: var(--accent); }

/* Underline indicator — a 2px silver bar that slides between tabs */
.tlv2-tab::after {
  content: '';
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease-out);
}
.tlv2-tab.is-active::after { transform: scaleX(1); }

.tlv2-tab__count {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  color: var(--text-secondary);
  border-radius: 999px;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.4;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.tlv2-tab.is-active .tlv2-tab__count {
  background: var(--accent);
  color: var(--bg-deep);
}

/* Live tab gets the urgency hue when active */
.tlv2-tab--live.is-active { color: var(--tlv2-live); }
.tlv2-tab--live.is-active::after { background: var(--tlv2-live); }
.tlv2-tab--live.is-active .tlv2-tab__count {
  background: var(--tlv2-live);
  color: oklch(0.99 0 0);
}

.tlv2-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}


/* ── Filter strap ────────────────────────────────────────────────────────── */
.tlv2-filters {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  position: relative;
}

.tlv2-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem 0.5rem 0.875rem;
  background: transparent;
  border: 1px solid var(--tlv2-hairline);
  border-radius: 3px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              background 0.2s var(--ease-out);
}
.tlv2-filter:hover {
  border-color: var(--tlv2-hairline-bright);
  color: var(--text-primary);
}
.tlv2-filter[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}
.tlv2-filter[data-active="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.tlv2-filter__value {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--accent);
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tlv2-filter__value:empty { display: none; }

.tlv2-filter__chev {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s var(--ease-out);
}
.tlv2-filter[aria-expanded="true"] .tlv2-filter__chev {
  transform: rotate(180deg);
}

.tlv2-filter__clear {
  background: transparent;
  border: none;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}
.tlv2-filter__clear:hover { color: var(--accent); }

.tlv2-filter:focus-visible,
.tlv2-filter__clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* Filter popover — anchored to whichever .tlv2-filter button opened it.
   Position is set inline by JS (transform: translate()), this rule supplies
   the visual frame. Single instance per page; content swaps. */
.tlv2-pop {
  position: absolute;
  z-index: 50;
  background: var(--tlv2-bg-card);
  border: 1px solid var(--tlv2-hairline-bright);
  border-radius: 6px;
  padding: 0.75rem;
  display: grid;
  gap: 0.375rem;
  min-width: 14rem;
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.5);
  animation: tlv2-popIn 0.18s var(--ease-out);
}
@keyframes tlv2-popIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tlv2-pop__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s var(--ease-out),
              color 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out);
}
.tlv2-pop__option:hover {
  background: color-mix(in oklch, var(--accent) 6%, transparent);
  color: var(--text-primary);
}
.tlv2-pop__option[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--tlv2-hairline-bright);
  background: color-mix(in oklch, var(--accent) 10%, transparent);
}
.tlv2-pop__option__check {
  width: 14px;
  height: 14px;
  border: 1px solid var(--tlv2-hairline-bright);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tlv2-pop__option[aria-pressed="true"] .tlv2-pop__option__check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-deep);
}


/* ── Inline error strap ──────────────────────────────────────────────────── */
.tlv2-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 0.875rem 1.125rem;
  background: color-mix(in oklch, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--danger) 28%, transparent);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-primary);
}
.tlv2-error__retry {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--tlv2-hairline-bright);
  border-radius: 3px;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out);
}
.tlv2-error__retry:hover { border-color: var(--accent); color: var(--accent); }


/* ═══════════════════════════════════════════════════════════════════════════
   Tournament grid
   ═══════════════════════════════════════════════════════════════════════════ */
.tlv2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

/* Featured card spans the full row width — used for the single-Open case
   and as the first card when len(open) is 2+. Fixes the audit's dead-column
   regression. */
.tlv2-card--featured {
  grid-column: 1 / -1;
}

/* Below 480px the auto-fit min is too wide; collapse to a single fluid col */
@media (max-width: 540px) {
  .tlv2-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Trophy plate (card)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Notch geometry sits on the card divider line between meta and foot.
   Mask cuts two semicircular holes (left+right edges) so the page bg shows
   through. A dashed silver hairline runs across the card at the same Y so
   the metaphor reads even when the notch contrast is low. */
.tlv2-card {
  --tlv2-notch-r: 9px;
  --tlv2-notch-y: calc(100% - 80px);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.375rem 1.5rem 1.5rem;
  background:
    linear-gradient(180deg, color-mix(in oklch, white 1.6%, transparent) 0%, transparent 28%),
    var(--tlv2-bg-card);
  border: 1px solid var(--tlv2-hairline);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  overflow: hidden;
  transition: border-color 0.35s var(--ease-out),
              transform 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out);

  -webkit-mask:
    radial-gradient(var(--tlv2-notch-r) at 0 var(--tlv2-notch-y), transparent 98%, #000 100%),
    radial-gradient(var(--tlv2-notch-r) at 100% var(--tlv2-notch-y), transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(var(--tlv2-notch-r) at 0 var(--tlv2-notch-y), transparent 98%, #000 100%),
    radial-gradient(var(--tlv2-notch-r) at 100% var(--tlv2-notch-y), transparent 98%, #000 100%);
  mask-composite: intersect;
}

/* The "tear here" dashed silver hairline that runs through the notch line.
   This is the metaphor-affirming detail the audit asked for — even when
   the page-vs-card contrast is imperceptible, the dashed line reads as
   ticket perforation. */
.tlv2-card::after {
  content: '';
  position: absolute;
  left: calc(var(--tlv2-notch-r) + 4px);
  right: calc(var(--tlv2-notch-r) + 4px);
  top: var(--tlv2-notch-y);
  height: 1px;
  background-image: linear-gradient(90deg,
    var(--tlv2-hairline) 0 6px,
    transparent 6px 12px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
  pointer-events: none;
  opacity: 0.6;
}

/* Top hairline accent that brightens on hover — UCL programme device.
   Drawn via ::before so it sits inside isolation context and doesn't fight
   the mask. */
.tlv2-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tlv2-hairline-bright) 30%,
    var(--tlv2-hairline-bright) 70%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  z-index: 1;
}

.tlv2-card:hover,
.tlv2-card:focus-visible {
  border-color: color-mix(in oklch, var(--accent) 30%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 14px 38px oklch(0 0 0 / 0.5);
}
.tlv2-card:hover::before,
.tlv2-card:focus-visible::before { opacity: 1; }

.tlv2-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* ── Card head: status row + title + game ────────────────────────────────── */
.tlv2-card__head {
  display: grid;
  gap: 0.75rem;
}

.tlv2-card__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tlv2-card__game {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin: 0 0 0.375rem;
}

.tlv2-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.05;
  /* Slight negative tracking — Marcellus is a display serif and reads more
     typeset and intentional at large sizes when tightened by ~1%. */
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
  /* Subtle engraved-plate feel: light hint from above */
  text-shadow: 0 1px 0 color-mix(in oklch, white 4%, transparent);
}

.tlv2-card--featured .tlv2-card__title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
}


/* ── Status badge ────────────────────────────────────────────────────────── */
/* Replaces the old inset 4px-bar pattern (which sat too close to the banned
   side-stripe pattern). New language: full pill with internal background
   tint, leading round dot for the colour signal, no side bar. */
.tlv2-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border-radius: 3px;
  border: 1px solid transparent;
  position: relative;
  isolation: isolate;
  white-space: nowrap;
}

.tlv2-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.tlv2-status--upcoming {
  color: var(--tlv2-upcoming);
  background: var(--tlv2-upcoming-10);
  border-color: var(--tlv2-upcoming-30);
}
.tlv2-status--open {
  color: var(--tlv2-open);
  background: var(--tlv2-open-10);
  border-color: var(--tlv2-open-30);
}
.tlv2-status--live {
  color: var(--tlv2-live);
  background: var(--tlv2-live-10);
  border-color: var(--tlv2-live-30);
  animation: tlv2-statusLive 1.6s var(--ease-out) infinite;
}
.tlv2-status--past {
  color: var(--text-muted);
  background: transparent;
  border-color: var(--tlv2-hairline);
}

/* Diagonal shine sweep on Open/Upcoming — broadcast strap motion language */
.tlv2-status--upcoming,
.tlv2-status--open {
  background-image: linear-gradient(115deg,
    transparent 35%,
    color-mix(in oklch, currentColor 12%, transparent) 50%,
    transparent 65%);
  background-size: 220% 100%;
  background-position: 220% 0;
  animation: tlv2-statusShine 3.6s ease-in-out infinite;
}

@keyframes tlv2-statusShine {
  0%, 22%   { background-position: 220% 0; }
  78%, 100% { background-position: -120% 0; }
}

@keyframes tlv2-statusLive {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--tlv2-live) 55%, transparent);
  }
  70% {
    box-shadow: 0 0 0 10px color-mix(in oklch, var(--tlv2-live) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 10px color-mix(in oklch, var(--tlv2-live) 0%, transparent);
  }
}


/* ── Format/personal chips (top-right of card) ───────────────────────────── */
.tlv2-card__chips {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.tlv2-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  background: color-mix(in oklch, var(--accent) 4%, transparent);
  border: 1px solid var(--tlv2-hairline);
  border-radius: 3px;
}

/* "You're in" / "You won — 1st" personal chips lean on silver */
.tlv2-chip--personal {
  color: var(--accent);
  border-color: var(--tlv2-hairline-bright);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.tlv2-chip--podium {
  color: oklch(0.85 0.13 85);                /* warm gold tint, 1st-place */
  border-color: oklch(0.85 0.13 85 / 0.4);
  background: oklch(0.85 0.13 85 / 0.08);
}


/* ── Meta grid ───────────────────────────────────────────────────────────── */
/* 3 cells default, 4 on featured. The flex-no-orphan rule from the audit
   is solved by switching to a 2-row layout below 540px where the third cell
   never appears alone. */
.tlv2-card__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem 0 1.375rem;
  border-top: 1px solid var(--tlv2-hairline);
}
.tlv2-card--featured .tlv2-card__meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 540px) {
  /* 3-cell cards keep 3 columns — clean, no orphans.
     4-cell (featured) cards switch to 2x2 so the FIELD cell never sits
     alone on its own row. This is the audit's orphan-cell bug solved
     properly: change the layout, don't drop the data. */
  .tlv2-card__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem;
  }
  .tlv2-card--featured .tlv2-card__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 0.625rem;
  }
}

.tlv2-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.tlv2-meta__label {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.tlv2-meta__value {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  /* Tight line-height matches the SVG box more closely so align-items: center
     produces a visually centered icon-with-text result. The default 1.5 leaves
     ~3-4px of leading above the glyphs, which shifts the visible text upward
     relative to the SVG centre and reads as "icon hangs lower than text". */
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.tlv2-meta__value svg {
  width: 1em;
  height: 1em;
  color: var(--text-muted);
  flex-shrink: 0;
  /* Most of the icons in this set draw their content slightly above the
     viewBox centre (trophy, ticket €-symbol pairing). A single sub-pixel
     nudge keeps the visible glyph optically centred against numerals like
     "25 €" and "See details" without disturbing standalone digits ("8"). */
  transform: translateY(0.5px);
}
.tlv2-card--featured .tlv2-meta__value {
  font-size: 1.125rem;
}
/* SVG icons inherit `1em` from the base rule above so they scale with the
   featured font-size automatically — keeps the icon-vs-text optical balance
   identical across normal and featured cards. */

.tlv2-meta__sub {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
}


/* ── Countdown — the urgency moment ──────────────────────────────────────── */
/* Lives in the meta grid on Open cards. Three urgency tiers controlled
   by the `data-urgency` attribute set by JS. */
.tlv2-countdown {
  font-family: var(--font-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}
.tlv2-countdown__num {
  font-size: 1.0625rem;
  color: var(--text-primary);
}
.tlv2-countdown__unit {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.tlv2-countdown[data-urgency="soon"] .tlv2-countdown__num {
  color: var(--tlv2-upcoming);
}
.tlv2-countdown[data-urgency="critical"] {
  animation: tlv2-tick 1s steps(2, end) infinite;
}
.tlv2-countdown[data-urgency="critical"] .tlv2-countdown__num {
  color: var(--tlv2-live);
}
.tlv2-countdown[data-urgency="critical"] .tlv2-countdown__unit {
  color: var(--tlv2-live);
}
@keyframes tlv2-tick {
  0%, 60% { opacity: 1; }
  61%, 80% { opacity: 0.85; }
  81%, 100% { opacity: 1; }
}


/* ── Live ticker line (one-liner round summary) ──────────────────────────── */
.tlv2-ticker {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tlv2-ticker strong {
  font-weight: 700;
  color: var(--tlv2-live);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.6875rem;
}


/* ── Card foot (CTA row) ─────────────────────────────────────────────────── */
.tlv2-card__foot {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: nowrap;
  margin-top: auto;
}

/* Primary CTA — silver platinum, the ceremonial click moment */
.tlv2-cta {
  flex: 2 1 0;
  min-width: 0;
  height: 44px;
  padding: 0 1rem;
  background: var(--accent);
  color: var(--bg-deep);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s var(--ease-out),
              transform 0.2s var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tlv2-cta:hover {
  background: var(--accent-hover);
  /* Explicit color override — base.css's `a:hover` rule (specificity
     0,1,1) wins over `.tlv2-cta` (0,1,0) for the color property, and
     would otherwise paint the text the same silver as the hover bg,
     making it invisible. Re-pin to bg-deep so the dark text stays put. */
  color: var(--bg-deep);
  transform: translateY(-1px);
}

/* Secondary — ghost button, lower hierarchy */
.tlv2-cta--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--tlv2-hairline-bright);
  flex: 1 1 0;
  min-width: 7rem;
}
.tlv2-cta--ghost:hover {
  background: color-mix(in oklch, var(--accent) 6%, transparent);
  color: var(--accent);
  border-color: var(--accent);
}

/* Quick actions (share, etc.) */
.tlv2-qa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--tlv2-hairline);
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out);
  flex-shrink: 0;
  text-decoration: none;
}
.tlv2-qa:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tlv2-qa svg { width: 16px; height: 16px; }

.tlv2-cta:focus-visible,
.tlv2-cta--ghost:focus-visible,
.tlv2-qa:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 380px) {
  .tlv2-card__foot { flex-wrap: wrap; }
  .tlv2-cta, .tlv2-cta--ghost { flex: 1 1 100%; }
}


/* ── Sponsor mark (foot-left, silver-tinted "powered by") ────────────────── */
.tlv2-sponsor {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  padding-top: 0.5rem;
  border-top: 1px solid var(--tlv2-hairline);
  margin-top: 0.25rem;
}
.tlv2-sponsor__logo {
  height: 18px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.4);
  opacity: 0.7;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Per-status variants
   ═══════════════════════════════════════════════════════════════════════════ */

/* Live — earns elevation. Only Live tournaments lift; everything else stays
   on the plane. Subtle warm-tinted shadow keeps the broadcast feeling. */
.tlv2-card[data-status="in_progress"] {
  border-color: color-mix(in oklch, var(--tlv2-live) 30%, var(--tlv2-hairline));
  box-shadow: 0 12px 32px color-mix(in oklch, var(--tlv2-live) 8%, transparent);
}
.tlv2-card[data-status="in_progress"]::before {
  opacity: 1;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tlv2-live) 40%,
    var(--tlv2-live) 60%,
    transparent 100%);
}

/* Past — restraint. Desaturate the chrome but keep Marcellus title legible
   by leaving title and personal chips at full saturation through a
   targeted approach (filter applies broadly; we then bump title weight). */
.tlv2-card[data-status="completed"] {
  filter: saturate(0.55);
  opacity: 0.92;
}
.tlv2-card[data-status="completed"]:hover {
  filter: saturate(0.9);
  opacity: 1;
}
.tlv2-card[data-status="completed"] .tlv2-cta {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--tlv2-hairline-bright);
}
.tlv2-card[data-status="completed"] .tlv2-cta:hover {
  background: color-mix(in oklch, var(--accent) 6%, transparent);
  color: var(--accent);
  border-color: var(--accent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Personal layer — won-by-user trophy frame
   ═══════════════════════════════════════════════════════════════════════════ */
/* When user's team won this tournament, the card gets a silver double-stroke
   frame and a Marcellus rank number in the corner. Personal layer overrides
   the Past desaturation — won cards are PERSONAL, they should glow. */
.tlv2-card--won {
  filter: none !important;
  opacity: 1 !important;
  border-color: color-mix(in oklch, var(--accent) 45%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--accent) 4%, transparent) 0%,
      transparent 35%),
    var(--tlv2-bg-card);
}

/* Inner silver stroke — a second hairline 4px inset from the border */
.tlv2-card--won::after {
  /* The dashed notch line already lives in ::after. Keep it but tint it
     silver-stronger for won cards. */
  background-image: linear-gradient(90deg,
    var(--tlv2-hairline-bright) 0 6px,
    transparent 6px 12px);
  opacity: 0.9;
}

.tlv2-rank {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  /* z-index: 0 — joins the stacking context at the lowest paint order so
     the rank sits BEHIND the foreground content (status row, chips). The
     card's `isolation: isolate` keeps this contained within the card. */
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  color: color-mix(in oklch, var(--accent) 24%, transparent);
  letter-spacing: -0.02em;
  pointer-events: none;
}

/* Lift the status row above the rank watermark on won-by-user cards so the
   chips remain readable. Applied to all cards harmlessly — non-won cards
   have no rank element to obscure. */
.tlv2-card__head { position: relative; z-index: 1; }
.tlv2-rank__sup {
  font-size: 0.45em;
  vertical-align: super;
  letter-spacing: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Empty state
   ═══════════════════════════════════════════════════════════════════════════ */
.tlv2-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem) 1.5rem;
  border: 1px dashed var(--tlv2-hairline);
  border-radius: 6px;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--accent) 1.5%, transparent),
    transparent);
}

.tlv2-empty__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--text-primary);
  margin: 0 0 0.5rem;
  letter-spacing: 0.005em;
}

.tlv2-empty__desc {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-muted);
  max-width: 36ch;
  margin: 0 0 1.5rem;
  line-height: 1.55;
}

.tlv2-empty__cta {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--tlv2-hairline-bright);
  border-radius: 3px;
  padding: 0.625rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.tlv2-empty__cta:hover { border-color: var(--accent); color: var(--accent); }


/* ═══════════════════════════════════════════════════════════════════════════
   Skeleton loading state
   ═══════════════════════════════════════════════════════════════════════════ */
.tlv2-card--skel { pointer-events: none; }
.tlv2-card--skel .tlv2-skel {
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--tlv2-bg-card) 25%,
    var(--tlv2-bg-card-hi) 50%,
    var(--tlv2-bg-card) 75%);
  background-size: 800px 100%;
  animation: tlv2-shimmer 1.5s linear infinite;
}
.tlv2-card--skel .tlv2-skel--lg { height: 28px; width: 70%; }
.tlv2-card--skel .tlv2-skel--md { height: 18px; width: 40%; }
.tlv2-card--skel .tlv2-skel--btn { height: 44px; width: 100%; }
@keyframes tlv2-shimmer {
  from { background-position: -400px 0; }
  to   { background-position:  400px 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Pagination (Past tab)
   ═══════════════════════════════════════════════════════════════════════════ */
.tlv2-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
}
.tlv2-pager__btn {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--tlv2-hairline);
  border-radius: 3px;
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.tlv2-pager__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tlv2-pager__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.tlv2-pager__btn[disabled]:hover {
  border-color: var(--tlv2-hairline);
  color: var(--text-secondary);
}
.tlv2-pager__status {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0 0.625rem;
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Entry stagger animation — opt-in via class so cards never stick invisible
   ═══════════════════════════════════════════════════════════════════════════ */
.tlv2-card.tlv2-card--in {
  animation: tlv2-cardIn 0.5s var(--ease-out) both;
  animation-delay: calc(var(--tlv2-stagger, 0) * 50ms);
}
@keyframes tlv2-cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .tlv2-card,
  .tlv2-card:hover,
  .tlv2-card.tlv2-card--in,
  .tlv2-status--live,
  .tlv2-status--open,
  .tlv2-status--upcoming,
  .tlv2-countdown[data-urgency="critical"],
  .tlv2-livestrap__pulse,
  .tlv2-pop,
  .tlv2-card--skel .tlv2-skel {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Toast (link-copied confirmation)
   ═══════════════════════════════════════════════════════════════════════════ */
.tlv2-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 0.75rem 1.25rem;
  background: var(--tlv2-bg-card);
  border: 1px solid var(--tlv2-hairline-bright);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out), transform 0.3s var(--ease-out);
  z-index: 999;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.5);
}
.tlv2-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}