/* ═══════════════════════════════════════════════════════════════
   Live Scores page styles.

   Uses the same design tokens as /css/leaderboard.css (already loaded
   on this page for the header) so this file never re-declares :root.
   Tokens used: --gold, --gold-bright, --gold-dim, --gold-glow, --bg,
   --card, --card2, --border, --border-gold, --text, --muted, --usa,
   --canada, --mexico.

   Class names are prefixed `.lv*` so they can't collide with any other
   surface (bracket / leaderboard / etc).
   ═══════════════════════════════════════════════════════════════ */

/* Live-score-only locals (status colors + sheet sizing) */
:root {
  --lv-live:     #34D399;
  --lv-live-bg:  rgba(52,211,153,0.16);
  --lv-red:      #FF6063;
  --lv-blue:     #4F8BFF;
  --lv-success:  #30D158;
  --lv-hairline: rgba(255,255,255,0.05);
  /* Knockout round colors — match the My Bracket tree (mobile mbTab palette).
     R32 blue, R16 green, QF red, SF purple, Final gold. */
  --lv-ko-r32:    rgba(42,57,141,0.85);
  --lv-ko-r32-fg: rgb(120,150,255);
  --lv-ko-r16:    rgba(60,172,59,0.85);
  --lv-ko-r16-fg: rgb(80,220,90);
  --lv-ko-qf:     rgba(230,29,37,0.85);
  --lv-ko-qf-fg:  rgb(255,90,90);
  --lv-ko-sf:     rgba(138,80,220,0.85);
  --lv-ko-sf-fg:  rgb(190,135,255);
  --lv-ko-fin:    rgba(216,180,90,0.85);
  --lv-ko-fin-fg: rgb(232,200,106);
  --lv-ko-third:  rgba(168,168,184,0.65);
  --lv-ko-third-fg: rgb(200,200,210);
}

/* ── Layout: clear the 62px fixed site header ─────────────────── */
.lvWrap {
  position: relative; z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 90px 24px 120px;
}
@media (max-width: 820px) { .lvWrap { padding: 80px 16px 80px; } }
@media (max-width: 560px) { .lvWrap { padding: 76px 12px 60px; } }

/* ── Hero (matches bracket/leaderboard hero pattern) ──────────── */
.lvHero {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.lvHero__left { min-width: 260px; flex: 1; }
.lvEyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--gold-dim);
  border: 0.5px solid var(--border-gold);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px;
}
.lvEyebrow__pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: lvDot 2s ease-in-out infinite; }
@keyframes lvDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }
.lvTitle {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 900; letter-spacing: -0.01em; line-height: 0.92;
  color: #fff; text-transform: uppercase;
  margin: 0;
}
.lvTitle em { color: var(--gold); font-style: normal; }
.lvSub {
  margin-top: 10px;
  font-size: 14px; color: var(--muted); font-weight: 500;
  line-height: 1.5;
  max-width: 560px;
}
.lvHero__meta { display: flex; gap: 10px; flex-wrap: wrap; }
.lvStat {
  display: flex; flex-direction: column;
  padding: 10px 16px;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  min-width: 100px;
}
.lvStat__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; color: var(--muted); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.lvStat__val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 800; color: #fff;
  letter-spacing: -0.01em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.lvStat__val--live { color: var(--lv-live); }
.lvStat__val--gold { color: var(--gold); }

/* ── Countdown / state hero (between hero + tabs) ─────────────── */
.lvCountdown {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 22px 26px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(216,180,90,0.10), rgba(216,180,90,0.02));
  border: 0.5px solid var(--border-gold);
  border-radius: 18px;
}
.lvCountdown__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 6px;
}
.lvCountdown__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 800; letter-spacing: -0.005em; line-height: 1.05;
  color: #fff; margin: 0;
  text-transform: uppercase;
}
.lvCountdown__title small {
  display: block; margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--muted); font-weight: 500;
  letter-spacing: 0.04em; text-transform: none;
}
.lvCountdown__units { display: flex; gap: 18px; }
.lvCountdown__unit { text-align: center; min-width: 56px; }
.lvCountdown__unit .n {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 38px; line-height: 1;
  font-weight: 900; letter-spacing: -0.02em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.lvCountdown__unit .u {
  margin-top: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.lvCountdown--live { background: linear-gradient(135deg, rgba(52,211,153,0.10), rgba(52,211,153,0.02)); border-color: rgba(52,211,153,0.45); }
.lvCountdown--live .lvCountdown__label { color: var(--lv-live); }

/* ── Tabs row + view-mode toggle ──────────────────────────────── */
.lvTabsRow {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.lvTabs {
  display: inline-flex; gap: 2px; flex-wrap: nowrap;
  padding: 3px; border-radius: 11px;
  background: var(--card);
  border: 0.5px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
  max-width: 100%;
}
.lvTabs::-webkit-scrollbar { display: none; }
.lvTab {
  all: unset; cursor: pointer;
  padding: 7px 14px; border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  transition: background 140ms ease, color 140ms ease;
  white-space: nowrap;
}
.lvTab:hover { color: #fff; }
.lvTab.active { background: var(--gold-dim); color: var(--gold); }
.lvTab__count {
  font-family: 'Inter', sans-serif;
  font-size: 10px; margin-left: 6px; opacity: 0.75;
  font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0;
}

.lvView {
  display: inline-flex; gap: 2px;
  padding: 3px; border-radius: 10px;
  background: var(--card);
  border: 0.5px solid var(--border);
}
.lvView__btn {
  all: unset; cursor: pointer;
  padding: 6px 12px; border-radius: 7px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
  transition: all 140ms ease; white-space: nowrap;
}
.lvView__btn:hover { color: #fff; }
.lvView__btn.active { background: var(--card2); color: #fff; }
.lvView__btn .ico { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.lvView__btn.active .ico { background: var(--gold); opacity: 1; }
.lvView__btn.active .ico--bar { background: var(--gold); width: 3px; height: 10px; border-radius: 1px; }

/* ── Bracket picker banner ────────────────────────────────────── */
.lvBP {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px;
  margin-bottom: 18px;
  background: rgba(216,180,90,0.06);
  border: 0.5px solid var(--border-gold);
  border-radius: 14px;
}
.lvBP__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  flex-shrink: 0;
}
.lvBP__name { color: #fff; font-weight: 700; font-size: 14px; }
.lvBP__meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── Day divider (Today/Tomorrow lists) ───────────────────────── */
.lvDayDiv {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
}
.lvDayDiv:first-child { margin-top: 0; }
.lvDayDiv__line { flex: 1; height: 0.5px; background: var(--border); }
.lvDayDiv__count {
  font-family: 'Inter', sans-serif;
  color: var(--muted); font-weight: 500; letter-spacing: 0.06em;
}

/* ── Match card ───────────────────────────────────────────────── */
.lvCard {
  position: relative;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 150ms ease, background 150ms ease;
}
.lvCard:hover { border-color: rgba(255,255,255,0.14); background: var(--card2); }
.lvCard.ft { opacity: 0.82; }
.lvCard.clickable { cursor: pointer; }

.lvCard.host-USA::before,
.lvCard.host-MEX::before,
.lvCard.host-CAN::before,
.lvCard.has-pick::before {
  content: ""; position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--gold);
}
.lvCard.host-USA::before { background: var(--usa); }
.lvCard.host-MEX::before { background: var(--mexico); }
.lvCard.host-CAN::before { background: var(--canada); }
.lvCard.has-pick.host-USA::before,
.lvCard.has-pick.host-MEX::before,
.lvCard.has-pick.host-CAN::before { background: var(--gold); }

.lvCard__top {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px 8px;
  gap: 10px;
}
.lvCard__meta {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.lvCard__venueCenter {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px; color: var(--muted);
  white-space: nowrap; pointer-events: none;
  max-width: 45%; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) { .lvCard__venueCenter { display: none; } }

.lvStatus {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lvStatus--upcoming { background: var(--card2); color: var(--muted); }
.lvStatus--ft       { background: var(--card2); color: var(--muted); }
.lvStatus--live     { background: var(--lv-live-bg); color: var(--lv-live); }
.lvStatus__pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lv-live);
  animation: lvPulse 1.4s ease-in-out infinite;
}
@keyframes lvPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.85)} }

.lvCard__body {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  padding: 14px 22px;
}
.lvCard__body .team.home { justify-self: end; flex-direction: row-reverse; }
.lvCard__body .team.away { justify-self: start; }
.lvCard__body .team {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.lvCard__body .teamName {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 700; color: #fff;
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lvCard__body .team.winner .teamName { color: var(--gold); }
.lvCard__body .team.loser  .teamName { color: var(--muted); font-weight: 500; }
.lvCard__body .team.picked .teamName { color: var(--gold-bright); font-weight: 800; }

.lvFlag {
  font-size: 22px; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.lvScore {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px; font-weight: 800; letter-spacing: -0.02em;
  color: #fff; min-width: 86px; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.lvScore .sep { color: rgba(255,255,255,0.2); font-weight: 500; font-size: 24px; }
.lvScore--upcoming {
  color: var(--gold);
  font-size: 22px; letter-spacing: 0.02em;
}
.lvScore--upcoming .vs {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.24); text-transform: uppercase; margin-top: 4px;
}

.lvCard__pick {
  margin: 0 14px;
  padding: 9px 12px;
  background: var(--card2);
  border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: rgba(255,255,255,0.72);
}
.lvCard__pick .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
  box-shadow: 0 0 8px var(--gold-glow);
}
.lvCard__pick.correct .dot { background: var(--lv-success); box-shadow: 0 0 8px rgba(52,211,153,0.6); }
.lvCard__pick.wrong .dot   { background: var(--lv-red);     box-shadow: 0 0 8px rgba(255,96,99,0.6); }
.lvCard__pick strong { color: #fff; font-weight: 700; }

.lvCard__bottom {
  padding: 9px 16px 11px;
  border-top: 0.5px solid var(--lv-hairline);
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 11.5px; color: var(--muted);
}
.lvCard__bottom .scorers { color: rgba(255,255,255,0.7); }

@media (max-width: 560px) {
  .lvCard__body { padding: 12px 14px; gap: 10px; }
  .lvCard__body .teamName { font-size: 13px; }
  .lvFlag { font-size: 18px; }
  .lvScore { font-size: 24px; min-width: 64px; }
  .lvScore--upcoming { font-size: 16px; }
  .lvCard__bottom { flex-direction: column; gap: 4px; }
}

/* ── Promo (free-tier merch) + Upgrade bar ────────────────────── */
.lvPromo {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  margin-bottom: 10px;
  background: transparent;
  border: 0.5px dashed rgba(255,255,255,0.14);
  border-radius: 12px;
  position: relative;
  font-size: 13px; color: rgba(255,255,255,0.70);
  text-align: center;
}
.lvPromo__label {
  position: absolute; top: 4px; right: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.30);
}
.lvPromo__cta {
  color: var(--gold); font-weight: 700; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
.lvPromo__cta:hover { color: var(--gold-bright); }

.lvUpg {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 10px;
  background: rgba(216,180,90,0.06);
  border: 0.5px solid var(--border-gold);
  border-radius: 12px;
}
.lvUpg__text { font-size: 13.5px; color: #fff; letter-spacing: -0.005em; }
.lvUpg__text .sub { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.lvUpg__btn {
  display: inline-block; text-decoration: none;
  padding: 8px 16px; border-radius: 999px;
  background: var(--gold); color: #1a1410;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 140ms ease, transform 80ms ease;
}
.lvUpg__btn:hover { opacity: 0.9; }
.lvUpg__btn:active { transform: scale(0.97); }

/* ── Groups view ──────────────────────────────────────────────── */
.lvLegend {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 18px;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.lvLegend__item { display: inline-flex; align-items: center; gap: 6px; }
.lvLegend__bar { width: 3px; height: 12px; background: var(--gold); border-radius: 1px; }
.lvLegend__check { color: var(--lv-success); font-weight: 800; }
.lvLegend__cross { color: var(--lv-red); font-weight: 800; }

.lvGroups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .lvGroups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lvGroups { grid-template-columns: 1fr; gap: 10px; } }

.lvGCard {
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 12px;
}
.lvGCard__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--lv-hairline);
}
.lvGCard__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--gold);
}
.lvGCard__md {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.lvGTable { width: 100%; border-collapse: collapse; font-size: 12px; }
.lvGTable thead th {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  text-align: right; padding: 5px 3px;
  border-bottom: 0.5px solid var(--border);
}
.lvGTable thead th.pos, .lvGTable thead th.tcol { text-align: left; }
.lvGTable tbody td {
  padding: 7px 3px; text-align: right;
  color: #fff; font-variant-numeric: tabular-nums;
  border-bottom: 0.5px solid var(--lv-hairline);
}
.lvGTable tbody tr:last-child td { border-bottom: none; }
.lvGTable td.pos {
  text-align: left; color: var(--muted);
  width: 18px; position: relative; padding-left: 9px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
}
.lvGTable td.tcol {
  text-align: left; padding-left: 3px; font-weight: 600; font-size: 13px;
  font-variant-numeric: normal;
}
.lvGTable td.tcol .lvFlag { font-size: 16px; margin-right: 7px; vertical-align: middle; }
.lvGTable td.pts { color: var(--gold); font-weight: 800; padding-right: 3px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; }
.lvGTable td.scol { width: 18px; text-align: center; padding: 0; }
.lvGTable tr.picked td.pos::before {
  content: ""; position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 3px; background: var(--gold); border-radius: 1px;
}
.lvGTable tr.picked td.tcol { color: var(--gold-bright); }
.lvGTable tr.elim td { color: rgba(255,255,255,0.24); }
.lvGTable .ok-mark   { color: var(--lv-success); font-weight: 800; font-size: 11px; }
.lvGTable .bad-mark  { color: var(--lv-red); font-weight: 800; font-size: 11px; }

/* ── Knockout bracket ────────────────────────────────────────── */
.lvKWrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 0 32px;
  margin: 0 -24px; padding-left: 24px; padding-right: 24px;
}
/* Bracket-math layout: each round's first card sits vertically centered
   between the previous round's first pair, the second between the second
   pair, and so on. Achieved by giving each round its own padding-top
   (offset by half the previous round's "cycle") and its own gap (the gap
   between consecutive cards, which doubles each round).

   --lv-card-h is the assumed match-card height; --lv-cycle is one R32
   row stride (card height + base gap). All deeper-round rows step down
   by half a cycle and double in stride. */
.lvK {
  display: flex; align-items: flex-start;
  gap: 28px; min-width: 1400px;
  --lv-card-h: 92px;
  --lv-base-gap: 10px;
  --lv-cycle:   calc(var(--lv-card-h) + var(--lv-base-gap));
  --lv-label-h: 36px;  /* room reserved for the absolutely-positioned round label */
}
.lvK__round {
  display: flex; flex-direction: column;
  min-width: 210px;
  position: relative;
  padding-top: var(--lv-label-h);
}
/* Round-specific bracket math (step-down + cycle doubling) */
.lvK__round[data-round="r32"]   { gap: var(--lv-base-gap); }
.lvK__round[data-round="r16"]   {
  padding-top: calc(var(--lv-label-h) + var(--lv-cycle) * 0.5);
  gap: calc(var(--lv-cycle) * 2 - var(--lv-card-h));
}
.lvK__round[data-round="qf"]    {
  padding-top: calc(var(--lv-label-h) + var(--lv-cycle) * 1.5);
  gap: calc(var(--lv-cycle) * 4 - var(--lv-card-h));
}
.lvK__round[data-round="sf"]    {
  padding-top: calc(var(--lv-label-h) + var(--lv-cycle) * 3.5);
  gap: calc(var(--lv-cycle) * 8 - var(--lv-card-h));
}
.lvK__round[data-round="final"] {
  padding-top: calc(var(--lv-label-h) + var(--lv-cycle) * 7.5);
  gap: var(--lv-base-gap);
}
.lvK__round[data-round="third"] { padding-top: var(--lv-label-h); }

/* Lock card height so the bracket math holds (different content lengths
   would otherwise drift the alignment). The third-place small variant
   sets its own min-height. */
.lvK__match { min-height: var(--lv-card-h); }

.lvK__roundLabel {
  position: absolute; top: 0; left: 0; right: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--lv-ko-fin-fg);
  padding-bottom: 8px;
  margin: 0;
  border-bottom: 0.5px solid var(--border);
  text-align: center;
  height: calc(var(--lv-label-h) - 4px);
  display: flex; align-items: center; justify-content: center;
}
/* Round-color theme per column */
.lvK__round[data-round="r32"]   .lvK__roundLabel { color: var(--lv-ko-r32-fg); border-bottom-color: var(--lv-ko-r32); }
.lvK__round[data-round="r16"]   .lvK__roundLabel { color: var(--lv-ko-r16-fg); border-bottom-color: var(--lv-ko-r16); }
.lvK__round[data-round="qf"]    .lvK__roundLabel { color: var(--lv-ko-qf-fg);  border-bottom-color: var(--lv-ko-qf); }
.lvK__round[data-round="sf"]    .lvK__roundLabel { color: var(--lv-ko-sf-fg);  border-bottom-color: var(--lv-ko-sf); }
.lvK__round[data-round="final"] .lvK__roundLabel { color: var(--lv-ko-fin-fg); border-bottom-color: var(--lv-ko-fin); }
.lvK__round[data-round="third"] .lvK__roundLabel { color: var(--lv-ko-third-fg); border-bottom-color: var(--lv-ko-third); }

.lvK__match {
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden; position: relative;
  border-left: 3px solid var(--lv-ko-fin);
}
/* Per-round left accent bar (matches the My Bracket round-color identity). */
.lvK__round[data-round="r32"]   .lvK__match { border-left-color: var(--lv-ko-r32); }
.lvK__round[data-round="r16"]   .lvK__match { border-left-color: var(--lv-ko-r16); }
.lvK__round[data-round="qf"]    .lvK__match { border-left-color: var(--lv-ko-qf); }
.lvK__round[data-round="sf"]    .lvK__match { border-left-color: var(--lv-ko-sf); }
.lvK__round[data-round="final"] .lvK__match { border-left-color: var(--lv-ko-fin); }
.lvK__round[data-round="third"] .lvK__match { border-left-color: var(--lv-ko-third); }

.lvK__match.has-pick { border-color: var(--border-gold); border-left-color: var(--gold); }
.lvK__match.has-pick::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; background: var(--gold);
}

/* Per-card label inside the card ("R32-1", "R16-1", "QF-1", "SF-1", "FIN") —
   matches the My Bracket tree where every match has a small slot identifier. */
.lvK__match__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  padding: 6px 12px 0;
}
.lvK__round[data-round="r32"]   .lvK__match__label { color: var(--lv-ko-r32-fg); }
.lvK__round[data-round="r16"]   .lvK__match__label { color: var(--lv-ko-r16-fg); }
.lvK__round[data-round="qf"]    .lvK__match__label { color: var(--lv-ko-qf-fg); }
.lvK__round[data-round="sf"]    .lvK__match__label { color: var(--lv-ko-sf-fg); }
.lvK__round[data-round="final"] .lvK__match__label { color: var(--lv-ko-fin-fg); }
.lvK__round[data-round="third"] .lvK__match__label { color: var(--lv-ko-third-fg); }

/* Connector pipe: a horizontal stub from the right edge of each match into
   the gap between rounds, colored by the round it leaves. Round-N+1's
   matches sit centered between two round-N matches (justify-content: space-around)
   so the stubs visually feed forward. The last column (.lvK__round--last)
   has no outgoing pipe. */
.lvK__match::after {
  content: "";
  position: absolute; top: 50%;
  right: -14px; width: 14px; height: 1.5px;
  background: currentColor;
  opacity: 0.55;
}
.lvK__round--last .lvK__match::after { display: none; }
.lvK__round[data-round="r32"]   .lvK__match::after { background: var(--lv-ko-r32); }
.lvK__round[data-round="r16"]   .lvK__match::after { background: var(--lv-ko-r16); }
.lvK__round[data-round="qf"]    .lvK__match::after { background: var(--lv-ko-qf); }
.lvK__round[data-round="sf"]    .lvK__match::after { background: var(--lv-ko-sf); }
.lvK__round[data-round="final"] .lvK__match::after { display: none; }
.lvK__round[data-round="third"] .lvK__match::after { display: none; }

.lvK__row {
  display: grid; grid-template-columns: 1fr auto 18px;
  gap: 8px; align-items: center;
  padding: 8px 12px;
}
.lvK__row + .lvK__row { border-top: 0.5px solid var(--lv-hairline); }
.lvK__row .tcell { display: flex; align-items: center; gap: 8px; min-width: 0; color: #fff; }
.lvK__row .tcell .lvFlag { font-size: 15px; }
.lvK__row .tcell .tn {
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lvK__row.tbd .tcell .tn { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.lvK__row.winner .tcell { color: var(--gold); }
.lvK__row.winner .tcell .tn { font-weight: 700; }
.lvK__row.loser .tcell { color: rgba(255,255,255,0.24); }
.lvK__row.picked .tcell .tn { color: var(--gold-bright); font-weight: 700; }
.lvK__row .pickmark { font-size: 10px; text-align: center; color: rgba(255,255,255,0.24); }
.lvK__row.picked .pickmark { color: var(--gold); }

.lvK__meta {
  padding: 5px 12px 6px;
  border-top: 0.5px solid var(--lv-hairline);
  display: flex; justify-content: space-between;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

.lvK__round--final .lvK__match:not(.lvK__match--third) {
  background: linear-gradient(180deg, rgba(216,180,90,0.10), rgba(216,180,90,0.02));
  border-color: var(--border-gold);
  min-width: 220px;
}

/* Third-place: small silver card slotted directly under the Final card
   (no sub-header). Mirrors the My Bracket layout. */
.lvK__match--third {
  background: var(--card) !important;
  border: 0.5px solid var(--border) !important;
  border-left: 3px solid var(--lv-ko-third) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin-top: 6px;
  opacity: 0.88;
}
.lvK__match--third .lvK__match__label { color: var(--lv-ko-third-fg) !important; }
.lvK__match--third .lvK__row { padding: 5px 10px; }
.lvK__match--third .lvK__row .tcell .tn { font-size: 11.5px; }
.lvK__match--third .lvK__row .tcell .lvFlag { font-size: 13px; }
.lvK__match--third .lvK__meta { padding: 4px 10px 5px; font-size: 9px; }
.lvK__match--third::after { display: none; }
.lvTrophy {
  text-align: center;
  padding: 10px 14px; margin-top: 10px;
  background: rgba(216,180,90,0.06);
  border: 0.5px solid var(--border-gold);
  border-radius: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
}
/* ── Mobile knockout: round-colored tabs (R32/R16/QF/SF/Final) ── */
/* Matches the My Bracket page's mobile mbTab palette so the two pages
   feel like one product. Default hidden on desktop; the @media swap at
   ≤820px hides the bracket-tree (.lvK) and shows .lvMK instead. */
.lvMK { display: none; }
.lvMKTabs {
  display: flex; gap: 3px;
  background: rgba(0,0,0,0.25);
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lvMKTabs::-webkit-scrollbar { display: none; }
.lvMKTab {
  all: unset;
  flex: 1; min-width: 44px;
  text-align: center;
  padding: 9px 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  border-radius: 9px; cursor: pointer;
  transition: all 180ms ease;
  white-space: nowrap;
}
.lvMKTab[data-mk-tab="r32"].active   { background: rgba(42,57,141,0.22);  color: rgb(100,130,255); box-shadow: inset 0 0 0 1.5px rgba(42,57,141,0.7); }
.lvMKTab[data-mk-tab="r16"].active   { background: rgba(60,172,59,0.18);  color: rgb(60,210,80);   box-shadow: inset 0 0 0 1.5px rgba(60,172,59,0.7); }
.lvMKTab[data-mk-tab="qf"].active    { background: rgba(230,29,37,0.18);  color: rgb(255,80,80);   box-shadow: inset 0 0 0 1.5px rgba(230,29,37,0.7); }
.lvMKTab[data-mk-tab="sf"].active    { background: rgba(138,80,220,0.18); color: rgb(178,120,255); box-shadow: inset 0 0 0 1.5px rgba(138,80,220,0.7); }
.lvMKTab[data-mk-tab="final"].active { background: rgba(216,180,90,0.22); color: rgb(216,180,90);  box-shadow: inset 0 0 0 1.5px rgba(216,180,90,0.8); }

.lvMKRound { display: none; flex-direction: column; gap: 10px; }
.lvMKRound.active { display: flex; }
/* Match cards inside the mobile knockout pick up the same round-color
   left-border that the desktop bracket-tree uses, since data-round is
   propagated to the round wrapper. */
.lvMKRound[data-round="r32"]   .lvK__match { border-left-color: var(--lv-ko-r32); }
.lvMKRound[data-round="r16"]   .lvK__match { border-left-color: var(--lv-ko-r16); }
.lvMKRound[data-round="qf"]    .lvK__match { border-left-color: var(--lv-ko-qf); }
.lvMKRound[data-round="sf"]    .lvK__match { border-left-color: var(--lv-ko-sf); }
.lvMKRound[data-round="final"] .lvK__match { border-left-color: var(--lv-ko-fin); }
.lvMKRound[data-round="final"] .lvK__match.lvK__match--third { border-left-color: var(--lv-ko-third) !important; }
.lvMKRound .lvK__match { min-height: 0; }
.lvMKRound .lvK__match::after { display: none; }
/* Same color for the in-card slot label */
.lvMKRound[data-round="r32"]   .lvK__match__label { color: var(--lv-ko-r32-fg); }
.lvMKRound[data-round="r16"]   .lvK__match__label { color: var(--lv-ko-r16-fg); }
.lvMKRound[data-round="qf"]    .lvK__match__label { color: var(--lv-ko-qf-fg); }
.lvMKRound[data-round="sf"]    .lvK__match__label { color: var(--lv-ko-sf-fg); }
.lvMKRound[data-round="final"] .lvK__match__label { color: var(--lv-ko-fin-fg); }

@media (max-width: 820px) {
  .lvK { display: none; }
  .lvMK { display: block; }
}

/* ── All-view filters + summary ───────────────────────────────── */
.lvFilters {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  /* Belt-and-suspenders against any inner element being too wide for the
     viewport (prevents horizontal scroll if a seg has unexpectedly long text). */
  overflow: hidden;
}
.lvFG { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 140px; }
.lvFG--search { flex: 1 1 100%; min-width: 180px; }
/* On narrow phones (≤640px), stack each filter group into its own row.
   The default 140px min-width was letting Status + Host share a row even
   on screens where their 4-button seg controls couldn't fit, causing
   horizontal overflow. */
@media (max-width: 640px) {
  .lvFilters { gap: 12px; padding: 12px; }
  .lvFG, .lvFG--search { flex: 1 1 100%; min-width: 0; }
  .lvSeg__btn { padding: 6px 6px; font-size: 10.5px; letter-spacing: 0.06em; }
}
.lvFGLabel {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.lvSeg {
  display: flex; gap: 2px; padding: 3px;
  border-radius: 9px; background: var(--card2);
  width: 100%;
}
.lvSeg--auto { width: auto; }
.lvSeg__btn {
  all: unset; cursor: pointer;
  flex: 1; padding: 6px 10px; border-radius: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted); text-align: center;
  transition: all 140ms ease;
}
.lvSeg__btn:hover { color: #fff; }
.lvSeg__btn.active { background: rgba(255,255,255,0.10); color: #fff; }
.lvInput {
  background: var(--card2);
  border: 0.5px solid var(--border);
  border-radius: 9px;
  color: #fff;
  font-family: 'Inter', sans-serif; font-size: 13px;
  padding: 7px 11px; outline: none;
  transition: border-color 140ms ease, background 140ms ease;
}
.lvInput:focus { border-color: var(--border-gold); background: var(--card); }
.lvInput::placeholder { color: var(--muted); }

.lvSummary {
  display: flex; gap: 10px; align-items: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
  margin-bottom: 16px; padding-left: 4px;
}
.lvSummary .dot { color: rgba(255,255,255,0.24); }

/* ── All-view: schedule day + row ─────────────────────────────── */
.lvSchedDay { margin-bottom: 22px; }
.lvSchedDay__header {
  position: sticky; top: 62px; z-index: 10;
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 4px;
  margin-bottom: 10px;
  background: linear-gradient(to bottom, rgba(7,8,12,0.97), rgba(7,8,12,0.90));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.lvSchedDay__date {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: #fff;
}
.lvSchedDay__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
}
.lvSchedDay__line { flex: 1; height: 0.5px; background: var(--border); }
.lvSchedDay__count {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.lvSchedList {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.lvRow {
  display: grid;
  grid-template-columns: 76px 1fr 80px 1fr 1.2fr 0.6fr;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  position: relative;
  font-size: 13px;
  border-bottom: 0.5px solid var(--lv-hairline);
  transition: background 120ms ease;
  cursor: pointer;
}
.lvSchedList > .lvRow:last-child { border-bottom: none; }
.lvRow:hover { background: var(--card2); }
.lvRow.has-pick::before,
.lvRow.host-USA::before,
.lvRow.host-MEX::before,
.lvRow.host-CAN::before {
  content: ""; position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 2px 2px 0;
}
.lvRow.has-pick::before { background: var(--gold); }
.lvRow.host-USA::before { background: var(--usa); }
.lvRow.host-MEX::before { background: var(--mexico); }
.lvRow.host-CAN::before { background: var(--canada); }
.lvRow.has-pick.host-USA::before,
.lvRow.has-pick.host-MEX::before,
.lvRow.has-pick.host-CAN::before { background: var(--gold); }
.lvRow.ft { opacity: 0.82; }

.lvRT { display: flex; flex-direction: column; gap: 1px; }
.lvRT__t {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: -0.005em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.lvRT__s {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.lvRLive {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: 4px;
  background: var(--lv-live-bg); color: var(--lv-live);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
}
.lvRLive .pulse {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--lv-live);
  animation: lvPulse 1.4s ease-in-out infinite;
}
.lvR__team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lvR__team--home { justify-content: flex-end; flex-direction: row-reverse; }
.lvR__team .tn {
  font-size: 14px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lvR__team.winner .tn { color: var(--gold); font-weight: 700; }
.lvR__team.loser  .tn { color: var(--muted); }
.lvR__team.picked .tn { color: var(--gold-bright); font-weight: 800; }

.lvR__score {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums;
}
.lvR__score .sep { color: rgba(255,255,255,0.20); font-weight: 500; }
.lvR__score .w { color: var(--gold); }
.lvR__score .l { color: var(--muted); }
.lvR__vs {
  color: var(--muted); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
}
.lvR__venue {
  color: var(--muted); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lvR__stage {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  text-align: right;
}
@media (max-width: 820px) {
  .lvRow { grid-template-columns: 58px 1fr 64px 1fr; gap: 8px; padding: 10px 12px; }
  .lvR__venue, .lvR__stage { display: none; }
}

/* ── Calendar export toolbar + modal ─────────────────────────── */
.lvCalEx {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 12px;
}
.lvCalEx--locked { background: rgba(216,180,90,0.06); border-color: var(--border-gold); }
.lvCalEx__left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lvCalEx__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.lvCalEx__right { display: flex; gap: 8px; flex-wrap: wrap; }
.lvCalEx__btn {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 8px;
  background: var(--card2); color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 120ms ease;
}
.lvCalEx__btn:hover { background: rgba(255,255,255,0.10); }
.lvCalEx__btn--link { color: var(--gold); }
.lvCalEx__lock {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,0.7);
}
.lvCalEx__lock svg { color: var(--gold); }
.lvCalEx__lock strong { color: #fff; font-weight: 700; }
.lvCalEx__upgrade {
  display: inline-block; text-decoration: none;
  padding: 7px 16px; border-radius: 999px;
  background: var(--gold); color: #1a1410;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Pro-only "Selected teams" segment + dropdown panel ------------- */
.lvSeg__btn--locked { position: relative; padding-right: 30px !important; opacity: 0.78; }
.lvLockChip {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 8px; font-weight: 800; letter-spacing: 0.12em;
  background: var(--gold); color: #1a1410;
  padding: 1px 5px; border-radius: 4px;
  text-transform: uppercase;
}
.lvCalEx__teams {
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--lv-hairline);
  position: relative;
}
.lvCalEx__teamsLocked {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 10px 14px; margin-top: 10px;
  background: rgba(216,180,90,0.06);
  border: 0.5px dashed var(--border-gold);
  border-radius: 10px;
  font-size: 13px; color: rgba(255,255,255,0.7);
}
.lvCalEx__teamsLocked .lock-icon {
  width: 16px; height: 16px; flex-shrink: 0; color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
}
.lvCalEx__teamsLocked .lvCalEx__upgrade { margin-left: auto; }
.lvCalEx__teamsBtn {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 220px;
  padding: 8px 12px;
  background: var(--card2);
  border: 0.5px solid var(--border);
  border-radius: 9px;
  color: #fff;
  font-family: 'Inter', sans-serif; font-size: 13px;
}
.lvCalEx__teamsBtn:hover { border-color: var(--border-gold); }
.lvCalEx__teamsBtn .placeholder { color: var(--muted); }
.lvCalEx__teamsBtn .chev {
  margin-left: auto; color: var(--muted);
  transition: transform 0.15s ease;
}
.lvCalEx__teams.open .lvCalEx__teamsBtn .chev { transform: rotate(180deg); }

.lvCalEx__teamsScrim {
  position: fixed; inset: 0; z-index: 200;
}
.lvCalEx__teamsMenu {
  position: absolute; left: 0; top: 100%;
  margin-top: 6px; z-index: 201;
  width: min(360px, 100%);
  max-height: 360px;
  background: rgba(10,12,18,0.98);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.lvCalEx__teamsHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--lv-hairline);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.lvCalEx__teamsHead button {
  all: unset; cursor: pointer;
  color: var(--gold);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lvCalEx__teamsList {
  overflow-y: auto;
  padding: 4px;
}
.lvCalEx__teamRow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; cursor: pointer;
  border-radius: 6px;
  font-size: 13px; color: rgba(255,255,255,0.85);
  user-select: none;
}
.lvCalEx__teamRow:hover { background: var(--card2); }
.lvCalEx__teamRow input { accent-color: var(--gold); cursor: pointer; }
.lvCalEx__teamRow.checked { color: #fff; background: rgba(216,180,90,0.06); }
.lvCalEx__teamRow .group-tag {
  margin-left: auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--muted);
}
.lvCalEx__teamsChips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.lvCalEx__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 10px; border-radius: 999px;
  background: rgba(216,180,90,0.10);
  border: 0.5px solid var(--border-gold);
  font-size: 12px; color: #fff;
}
.lvCalEx__chip button {
  all: unset; cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
}
.lvCalEx__chip button:hover { color: #fff; background: rgba(255,255,255,0.20); }

/* Subscribe (auto-updates) row in the export toolbar ----------- */
.lvCalEx__sub {
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid var(--lv-hairline);
}
.lvCalEx__subHead { margin-bottom: 10px; }
.lvCalEx__subTitle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
}
.lvCalEx__subTitle svg { color: var(--gold); }
.lvCalEx__subSub {
  margin-top: 4px;
  font-size: 12px; color: var(--muted);
}
.lvCalEx__subActions {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center;
}
.lvCalEx__subUrlRow {
  margin-top: 10px;
  display: flex;
}
.lvCalEx__subUrl {
  flex: 1 1 100%; min-width: 0;
  background: var(--card2);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  padding: 8px 10px;
  outline: none;
}
.lvCalEx__subUrl:focus { border-color: var(--border-gold); }
.lvCalEx__btn--gold {
  background: var(--gold) !important;
  color: #1a1410 !important;
}
.lvCalEx__btn--gold:hover { opacity: 0.9; background: var(--gold) !important; }
.lvCalEx__subNote {
  margin-top: 8px;
  font-size: 11.5px; color: var(--muted);
  font-style: italic;
}
.lvCalEx__subUpgrade {
  margin-left: 6px;
  color: var(--gold);
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}
.lvCalEx__subUpgrade:hover { text-decoration: underline; }

/* Stale-knockout re-download banner ----------------------------- */
.lvKoBanner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(216,180,90,0.12), rgba(216,180,90,0.04));
  border: 0.5px solid var(--border-gold);
  border-radius: 12px;
  animation: lvFadeIn 220ms ease-out;
}
.lvKoBanner__body { flex: 1; min-width: 220px; }
.lvKoBanner__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 800; letter-spacing: -0.005em;
  color: var(--gold); margin-bottom: 2px;
  text-transform: none;
}
.lvKoBanner__sub {
  font-size: 13px; color: rgba(255,255,255,0.78);
}
.lvKoBanner__actions { display: flex; align-items: center; gap: 8px; }
.lvKoBanner__cta {
  all: unset; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  background: var(--gold); color: #1a1410;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 140ms ease, transform 80ms ease;
}
.lvKoBanner__cta:hover { opacity: 0.9; }
.lvKoBanner__cta:active { transform: scale(0.97); }
.lvKoBanner__close {
  all: unset; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
}
.lvKoBanner__close:hover { background: rgba(255,255,255,0.16); color: #fff; }

.lvModal {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: lvFadeIn 180ms ease-out;
}
@keyframes lvFadeIn { from{opacity:0} to{opacity:1} }
.lvModal__inner {
  background: rgba(10,12,18,0.98);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 22px 24px;
  max-width: 480px; width: 100%;
  box-shadow: 0 30px 70px rgba(0,0,0,0.7);
}
.lvModal__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px;
}
.lvModal__head h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 900; letter-spacing: -0.01em;
  color: #fff; margin: 0; text-transform: uppercase;
}
.lvModal__close {
  all: unset; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--card2); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
}
.lvModal__steps {
  padding-left: 20px; margin: 0 0 16px;
  color: rgba(255,255,255,0.7);
  font-size: 13.5px; line-height: 1.6;
}
.lvModal__steps a { color: var(--gold); font-weight: 600; }
.lvModal__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lvModal__note { font-size: 11.5px; color: var(--muted); margin: 0; }

/* ── Month-grid calendar ─────────────────────────────────────── */
.lvCal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 16px;
}
.lvCal__title { text-align: center; }
.lvCal__month {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px; font-weight: 900; letter-spacing: 0.02em;
  color: #fff; text-transform: uppercase;
}
.lvCal__sub {
  display: block; margin-top: 2px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.lvCal__nav {
  all: unset; cursor: pointer;
  padding: 7px 14px; min-width: 90px; text-align: center;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.lvCal__nav:hover:not(:disabled) { background: var(--card2); color: #fff; }
.lvCal__nav:disabled { opacity: 0.3; cursor: default; }
.lvCal__dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--card);
  border: 0.5px solid var(--border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}
.lvCal__dow-cell {
  padding: 9px 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  border-right: 0.5px solid var(--lv-hairline);
}
.lvCal__dow-cell:last-child { border-right: none; }
.lvCal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
.lvCal__cell {
  position: relative;
  min-height: 120px; padding: 8px;
  border-right: 0.5px solid var(--lv-hairline);
  border-top: 0.5px solid var(--lv-hairline);
  display: flex; flex-direction: column; gap: 6px;
}
.lvCal__cell:nth-child(7n) { border-right: none; }
.lvCal__cell--empty { background: rgba(0,0,0,0.2); }
.lvCal__cell.no .lvCal__daynum { color: var(--muted); }
.lvCal__cell.today { background: var(--gold-dim); }
.lvCal__cell.today::after { content:""; position:absolute; inset:0; border:1px solid var(--gold); pointer-events:none; }
.lvCal__cell.final { background: rgba(216,180,90,0.06); }
.lvCal__cell.final::after { content:""; position:absolute; inset:0; border:1px solid var(--border-gold); pointer-events:none; }
.lvCal__cell.final .lvCal__daynum { color: var(--gold); font-weight: 800; }
.lvCal__cellHead { display: flex; align-items: center; justify-content: space-between; }
.lvCal__daynum {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 600;
}
.lvCal__cell.today .lvCal__daynum { color: var(--gold); font-weight: 800; }
.lvCal__count {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; color: var(--muted);
  padding: 1px 6px; border-radius: 999px;
  background: var(--card2);
  font-weight: 700;
}
.lvCal__trophy { color: var(--gold); flex-shrink: 0; }
.lvCal__cellBody { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.lvCal__match {
  position: relative;
  padding: 4px 6px 4px 8px;
  background: var(--card2);
  border-radius: 4px;
  font-size: 11px; line-height: 1.3;
  border-left: 2px solid transparent;
  cursor: pointer;
}
.lvCal__match.host-USA { border-left-color: var(--usa); }
.lvCal__match.host-MEX { border-left-color: var(--mexico); }
.lvCal__match.host-CAN { border-left-color: var(--canada); }
.lvCal__match.has-pick:not(.host-USA):not(.host-MEX):not(.host-CAN) { border-left-color: var(--gold); }
.lvCal__match.ft { opacity: 0.7; }
.lvCal__matchTime {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700;
  color: var(--muted);
}
.lvCal__matchTeams {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: rgba(255,255,255,0.7);
}
.lvCal__matchTeams .t { font-weight: 700; flex-shrink: 0; }
.lvCal__matchTeams .t.w { color: var(--gold); }
.lvCal__matchTeams .t.l { color: var(--muted); }
.lvCal__matchScore {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; color: var(--muted);
}
.lvCal__more {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; color: var(--muted); padding: 1px 6px;
}
.lvCal__legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 14px 4px 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.lvCal__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.lvCal__legend .sw { width: 10px; height: 10px; border-radius: 2px; }
.lvCal__legend .sw--usa  { background: var(--usa); }
.lvCal__legend .sw--mex  { background: var(--mexico); }
.lvCal__legend .sw--can  { background: var(--canada); }
.lvCal__legend .sw--pick { background: var(--gold); }
@media (max-width: 820px) {
  .lvCal__cell { min-height: 84px; padding: 4px; }
  .lvCal__matchTeams { font-size: 10px; }
  .lvCal__month { font-size: 18px; }
  .lvCal__nav { min-width: 72px; padding: 6px 8px; font-size: 10px; }
}

/* ── Empty state + skeleton + prestate ───────────────────────── */
.lvEmpty {
  text-align: center; padding: 48px 24px;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 14px;
}
.lvEmpty h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 900; color: #fff;
  letter-spacing: -0.005em; margin: 0 0 8px;
  text-transform: uppercase;
}
.lvEmpty p { color: rgba(255,255,255,0.7); font-size: 13.5px; margin: 0; }
.lvEmpty a {
  display: inline-block; margin-top: 16px;
  color: var(--gold); font-size: 13px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
}

.lvSkeleton { display: flex; flex-direction: column; gap: 10px; }
.lvSkeleton__row {
  height: 72px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
  animation: lvShim 1.4s ease-in-out infinite;
}
@keyframes lvShim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.lvPre {
  text-align: center; padding: 42px 20px;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 16px;
}
.lvPre__icon { font-size: 42px; margin-bottom: 16px; }
.lvPre__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 900; letter-spacing: -0.005em;
  color: #fff; margin: 0 0 8px; text-transform: uppercase;
}
.lvPre__sub {
  font-size: 13.5px; color: rgba(255,255,255,0.7);
  max-width: 420px; margin: 0 auto;
  line-height: 1.5;
}
.lvPre__cd {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding: 10px 18px;
  background: var(--gold-dim);
  border: 0.5px solid var(--border-gold);
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold);
}

/* ── Match detail sheet (desktop drawer / mobile bottom sheet) ── */
.lvScrim {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: lvFadeIn 180ms ease-out;
}
.lvSheet {
  position: fixed; z-index: 401;
  background: rgba(10,12,18,0.98);
  border: 0.5px solid rgba(255,255,255,0.14);
  box-shadow: 0 20px 80px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
}
@media (min-width: 721px) {
  .lvSheet {
    top: 0; right: 0; bottom: 0;
    width: 440px; max-width: 92vw;
    border-radius: 18px 0 0 18px;
    animation: lvSheetRight 220ms cubic-bezier(.22,.68,0,1.2);
  }
  @keyframes lvSheetRight { from{transform:translateX(100%);opacity:0.6} to{transform:translateX(0);opacity:1} }
}
@media (max-width: 720px) {
  .lvSheet {
    left: 0; right: 0; bottom: 0;
    max-height: 88vh;
    border-radius: 18px 18px 0 0;
    animation: lvSheetUp 240ms cubic-bezier(.22,.68,0,1.2);
  }
  @keyframes lvSheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
}
.lvSheet__handle {
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.24); border-radius: 2px;
  margin: 10px auto 0;
}
@media (min-width: 721px) { .lvSheet__handle { display: none; } }
.lvSheet__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px 10px;
  border-bottom: 0.5px solid var(--lv-hairline);
}
.lvSheet__round {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
}
.lvSheet__close {
  all: unset; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--card2); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}
.lvSheet__body { padding: 20px 22px; flex: 1; overflow-y: auto; }
.lvSheet__teams {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  padding: 8px 0 20px;
}
.lvSheet__team { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lvSheet__team .lvFlag { font-size: 44px; }
.lvSheet__team .tn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: -0.005em;
  color: #fff; text-align: center;
}
.lvSheet__team.picked .tn { color: var(--gold-bright); }
.lvSheet__kickoff { text-align: center; font-family: 'Barlow Condensed', sans-serif; }
.lvSheet__kickoff .local {
  font-size: 26px; font-weight: 900; color: var(--gold);
  letter-spacing: -0.005em; line-height: 1;
}
.lvSheet__kickoff .utc {
  display: block; margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.lvSheet__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 10px 0;
  border-bottom: 0.5px solid var(--lv-hairline);
  font-size: 13px;
}
.lvSheet__row:last-of-type { border-bottom: none; }
.lvSheet__row .k {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  flex-shrink: 0;
}
.lvSheet__row .v { color: #fff; text-align: right; font-weight: 500; }
.lvSheet__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.lvSheet__btn {
  all: unset; cursor: pointer; text-decoration: none;
  flex: 1; min-width: 140px; text-align: center;
  padding: 10px 14px; border-radius: 10px;
  background: var(--card2); color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lvSheet__btn:hover { background: rgba(255,255,255,0.10); }
.lvSheet__btn--gold { background: var(--gold); color: #1a1410; }
.lvSheet__btn--gold:hover { opacity: 0.9; background: var(--gold); }
.lvSheet__note { margin-top: 10px; font-size: 11.5px; color: var(--muted); text-align: center; }