.liveWrap{max-width:1400px;}
.liveTopHead{display:flex;align-items:center;gap:14px;min-width:0;}
.liveTopLogo{width:54px;height:54px;border-radius:14px;border:1px solid var(--bd);background:var(--card);object-fit:contain;box-shadow:var(--shadow);}
.liveTopText{min-width:0;}
.liveTopName{font-weight:950;font-size:26px;line-height:1.1;color:var(--accent);margin:0;}
.liveTopMeta{margin-top:4px;color:var(--muted);font-weight:600;font-size:14px;line-height:1.2;}

.liveGrid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:14px;
}
.liveMenuBtn{display:none;}
.liveMenuBackdrop{display:none;}
.liveMenuCloseBtn{display:none;}
.liveWrap .topbar{align-items:flex-start;}
.liveWrap .right{flex-wrap:wrap;justify-content:flex-end;}
.liveWrap .pill{white-space:nowrap;}
.liveLeft .cardBd{padding-top:10px;}
.liveRight .cardBd{padding-top:14px;}

.liveStatusWrap{display:flex;align-items:center;justify-content:flex-end;gap:10px;}
.liveStatusPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--bd);
  border-radius:999px;
  background:var(--card);
  font-weight:900;
  color:var(--text);
  white-space:nowrap;
}
.liveStatusDot{
  width:10px;height:10px;border-radius:999px;
  background:#94a3b8;
}
.liveStatusPill.ok .liveStatusDot{background:#22c55e;}
.liveStatusPill.warn .liveStatusDot{background:#ef4444;}
.liveStatusPill.blink .liveStatusDot{animation: liveBlink 1s steps(2,end) infinite;}
@keyframes liveBlink{50%{opacity:0.2;}}

.liveTriplet{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}

.liveResultsHd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.liveResultsHdRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.liveViewToggle{flex:0 0 auto;}

/* Flight selector pills */
.flightPills{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
.flightPill{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border:1px solid var(--bd);
  border-radius:999px;
  background:var(--card);
  color:var(--text);
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .15s, background .15s, color .15s;
}
.flightPill:hover{
  border-color:rgba(124,58,237,.35);
}
.flightPill.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.liveMatrixView{display:none;}
body.liveViewTable .liveMatrixView{display:block;}
body.liveViewTable .liveAttemptsView{display:none;}
body.liveViewPosition .liveMatrixView{display:block;}
body.liveViewPosition .liveAttemptsView{display:none;}

.liveMatrixScroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  --liveSticky1W: 44px;
}
.liveMatrixTbl{table-layout:fixed;}
.liveMatrixTbl th,
.liveMatrixTbl td{white-space:nowrap;}

.liveMatrixTbl td.liveMarkCell{white-space:normal;}
.liveMarkWrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.05;}
.liveMarkPrimary{font-weight:950;white-space:nowrap;}
.liveMarkSecondary{font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap;}

.liveAttemptThWrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.05;}

.liveAthCell{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%;}
.liveAthName{font-weight:950;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.liveAthLink{color:inherit;text-decoration:none;transition:color .15s;}
.liveAthLink:hover{color:var(--accent);text-decoration:underline;}
.liveAthAff{color:var(--muted);font-weight:800;font-size:12px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.liveSticky1{position:sticky;left:0;background:var(--card);z-index:3;}
.liveSticky2{position:sticky;left:var(--liveSticky1W, 44px);background:var(--card);z-index:3;}
.liveMatrixTbl td.liveSticky1,
.liveMatrixTbl td.liveSticky2{z-index:2;}
.liveMatrixTbl th.liveSticky1,
.liveMatrixTbl th.liveSticky2{z-index:4;}
.liveMatrixTbl .liveSticky1{border-right:1px solid var(--bd);}
.liveMatrixTbl .liveSticky2{border-right:1px solid var(--bd);}

.liveMatrixTbl td.liveSticky2{overflow:hidden;}

.liveLanding{display:none;}
.liveLandingHead{display:flex;align-items:center;gap:18px;}
.liveLandingLogo{width:92px;height:92px;border-radius:20px;border:1px solid var(--bd);background:var(--card);object-fit:contain;box-shadow:var(--shadow);}
.liveLandingText{min-width:0;}
.liveLandingTitle{font-weight:950;font-size:46px;line-height:1.05;color:var(--accent);}
.liveLandingMeta{margin-top:6px;color:var(--muted);font-weight:500;font-size:28px;line-height:1.15;}
.liveLandingHint{margin-top:40px;color:var(--muted);font-weight:500;font-size:44px;line-height:1.25;text-align:center;}
.liveLandingHintMobile{display:none;}
.liveSlot{
  border:1px solid var(--bd);
  border-radius:14px;
  padding:12px;
  background:var(--card);
  box-shadow: var(--shadow);
}
.liveSlotHd{font-weight:950;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;gap:8px;}

.upLiveBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--bd);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.upLiveBadge .dot{
  width:10px;
  height:10px;
  animation: liveBlink 1s steps(2,end) infinite;
}
.liveSlotName{margin-top:8px;font-weight:950;font-size:16px;line-height:1.2;}
.liveSlotName .liveAthLink{color:inherit;text-decoration:none;}
.liveSlotName .liveAthLink:hover{color:var(--accent);text-decoration:underline;}
.liveSlotMeta{margin-top:6px;color:var(--muted);font-weight:800;font-size:12px;}

/* Video popup */
.liveVideoTitle{font-weight:950;}
.liveVideoActions{display:flex;gap:8px;align-items:center;}
.liveVideoEl{width:100%;max-height:70vh;background:#000;display:block;}

/* Video modal */
.liveModal{display:none;}
body.liveVideoOpen #liveVideoModal{display:block;}
body.liveUpgradeOpen #liveUpgradeModal{display:block;}
.liveModalBackdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  z-index:60;
}
.liveModalDialog{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(92vw, 980px);
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:16px;
  box-shadow: var(--shadow);
  overflow:hidden;
  z-index:61;
}
.liveModalHd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-bottom:1px solid var(--bd);
}

.badgeLive{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--bd);
  background:var(--card);
  font-weight:900;
  font-size:11px;
  white-space:nowrap;
}
.badgeLive .dot{
  width:8px;height:8px;border-radius:999px;
  background:#94a3b8;
}
.badgeLive.inprog{border-color:rgba(239,68,68,.25);}
.badgeLive.inprog .dot{background:#ef4444;animation: liveBlink 1s steps(2,end) infinite;}
.badgeLive.done .dot{background:#22c55e;}

.btnLink{border:1px solid var(--bd);background:#fff;padding:6px 10px;border-radius:10px;cursor:pointer;font-weight:900;text-decoration:none;color:var(--text);display:inline-flex;align-items:center;justify-content:center;}
.btnLink:hover{border-color:rgba(124,58,237,.35);}

.trLive td{
  background: rgba(239,68,68,.10);
  animation: liveRowBlink 1s steps(2,end) infinite;
}
.trLive td:first-child{border-left:4px solid rgba(239,68,68,.55);}

@keyframes liveRowBlink{
  50%{ background: rgba(239,68,68,.04); }
}

/* Make the events table feel interactive */
.tr-clickable{cursor:pointer;}
.tr-clickable:hover td{background:rgba(124,58,237,.06);}
.tr-active td{background:rgba(124,58,237,.10);}

@media (max-width: 1080px){
  .liveGrid{grid-template-columns: 1fr;}
}

@media (max-width: 720px){
  .liveWrap{padding:14px;}
  .liveWrap .topbar{flex-direction:column;align-items:stretch;}
  .liveWrap .right{justify-content:flex-start;}

  .liveTopHead{gap:12px;}
  .liveTopLogo{width:48px;height:48px;border-radius:12px;}
  .liveTopName{font-size:22px;}
  .liveTopMeta{font-size:13px;}

  /* Mobile: move Events into a drawer opened by hamburger */
  .liveMenuBtn{display:inline-flex;}
  .liveMenuCloseBtn{display:inline-flex;}
  .liveMenuBackdrop{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.35);
    z-index:40;
  }
  body.liveMenuOpen .liveMenuBackdrop{display:block;}

  .liveGrid{display:block;}
  .liveLeft{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:min(92vw, 420px);
    margin:0;
    border-radius:0 16px 16px 0;
    z-index:41;
    transform:translateX(-110%);
    transition:transform 180ms ease;
    overflow:auto;
  }
  body.liveMenuOpen .liveLeft{transform:translateX(0);}
  .liveLeft .cardHd{
    position:sticky;
    top:0;
    background:var(--card);
    z-index:1;
  }

  .liveTriplet{grid-template-columns:1fr;}
  .liveSlot{padding:12px;}

  .liveLandingTitle{font-size:32px;}
  .liveLandingMeta{font-size:18px;}
  .liveLandingHint{font-size:26px;margin-top:26px;}
  .liveLandingHintMobile{display:block;}

  /* Attempts table -> stacked cards */
  .liveAttemptsTbl thead{display:none;}
  .liveAttemptsTbl,
  .liveAttemptsTbl tbody{
    display:block;
    width:100%;
  }
  .liveAttemptsTbl tr{
    display:block;
    border:1px solid var(--bd);
    border-radius:14px;
    margin:10px 0;
    overflow:hidden;
    background:var(--card);
    box-shadow: var(--shadow);
  }
  .liveAttemptsTbl td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-bottom:1px solid var(--bd);
  }
  .liveAttemptsTbl td:last-child{border-bottom:0;}
  .liveAttemptsTbl td::before{
    content: attr(data-label);
    font-weight:900;
    color:var(--muted);
    flex:0 0 96px;
  }
  .liveAttemptsTbl td[data-label="Athlete"]{flex-wrap:wrap;overflow-wrap:anywhere;}
  .liveAttemptsTbl td[data-label="Video"] button{width:100%;}

  #liveEventStartBadge{display:inline-block;margin-left:0;margin-top:4px;}
  #liveEventTitle{display:flex;flex-wrap:wrap;align-items:center;gap:4px;}
}

/* Modern iPhones (e.g. 12–15) */
@media (max-width: 480px){
  .liveWrap{padding:14px;}
  .liveAttemptsTbl td::before{flex:0 0 88px;}
  .liveLandingLogo{width:84px;height:84px;border-radius:18px;}
  .liveLandingHead{gap:14px;}

  /* Matrix table: tighter on phones so At1 is visible */
  .liveMatrixTbl th,
  .liveMatrixTbl td{padding:8px 6px;}
  .liveAthAff{font-size:11px;}
  .liveAttemptThWrap{font-size:11px;}
  .liveMarkPrimary{font-size:12.5px;}
  .liveMarkSecondary{font-size:10px;}
}

/* Landing state (all devices): show meet header + instruction until an event is selected */
body:not(.liveHasEvent) .liveLanding{display:block;}
body:not(.liveHasEvent) .liveRight .cardHd{display:none;}
body:not(.liveHasEvent) .liveTriplet{display:none;}
body:not(.liveHasEvent) .liveAttemptsWrap{display:none;}
/* modal handles itself */

/* iPhone 8 (375px) and similar */
@media (max-width: 400px){
  .liveWrap{padding:12px;}
  .liveWrap .cardHd{padding:10px 12px;}
  .liveWrap .cardBd{padding:12px;}
  .liveSlotName{font-size:15px;}

  .liveAttemptsTbl td{padding:9px 10px;font-size:12.5px;}
  .liveAttemptsTbl td::before{flex:0 0 72px;}
  .liveVideoHd{flex-direction:column;align-items:stretch;}
  .liveVideoActions{justify-content:flex-end;flex-wrap:wrap;}
}

/* ── Upgrade prompt modal ── */
.upgradeDialog{
  max-width:420px;
  margin:0 auto;
}
.upgradeContent{
  padding:36px 28px 28px;
  text-align:center;
}
.upgradeIcon{
  font-size:44px;
  margin-bottom:12px;
}
.upgradeTitle{
  font-size:20px;
  font-weight:900;
  margin:0 0 10px;
  color:var(--text);
}
.upgradeSub{
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
  margin:0 0 24px;
}
.upgradeActions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.upgradeBtn{
  display:block;
  padding:12px 20px;
  border-radius:12px;
  font-size:14px;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  border:0;
  transition:background .15s, color .15s;
}
.upgradeBtnPrimary{
  background:var(--accent);
  color:#fff;
}
.upgradeBtnPrimary:hover{
  background:#6d28d9;
}
.upgradeBtnSecondary{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--bd);
}
.upgradeBtnSecondary:hover{
  background:var(--bg);
  color:var(--text);
}
.upgradeSignin{
  margin-top:16px;
  font-size:13px;
  color:var(--muted);
}
.upgradeSignin a{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}
.upgradeSignin a:hover{
  text-decoration:underline;
}

/* Premium badge on video button */
.btnLink .premiumBadge{
  font-size:10px;
  margin-left:3px;
  vertical-align:super;
  opacity:.7;
}

/* ── Ad slots ── */
.liveAdSlot {
  width: 100%;
  text-align: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--bd);
}
.liveAdTop {
  margin-bottom: 10px;
}
.liveAdBottom {
  margin-top: 14px;
}
.liveAdSlot ins {
  min-height: 90px;
}

/* ── Dark-mode overrides ── */
[data-theme="dark"] .btnLink { background: var(--card) }