/* ==========================================================================
   Live page (Live.dc.html 1:1). Breakpoints: pageCols vw>=1100, cardCols vw>=1200 / vw>=700.
   Cards / quick view share matches.css (loaded on this page too).
   ========================================================================== */

/* hero */
.sl-live__hero{background:#0d0d0d;color:#fff;border-bottom:3px solid var(--accent)}
.sl-live__hero-in{padding-top:16px;display:flex;flex-direction:column;gap:14px}
.sl-live__crumbs{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:500;font-size:var(--text-sm);color:rgba(255,255,255,0.6)}
.sl-live__crumbs a{transition:color var(--dur) var(--ease)}
.sl-live__crumbs a:hover{color:#fff}
.sl-live__crumb-sep{display:flex;color:rgba(255,255,255,0.35)}
.sl-live__crumbs [aria-current]{color:#fff;font-weight:600}
.sl-live__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px}
.sl-live__title-w{display:flex;flex-direction:column;gap:8px;min-width:0}
.sl-live__title{margin:0;display:flex;align-items:center;gap:16px;font-family:var(--font-display);font-weight:800;font-size:clamp(34px,3.2vw,48px);line-height:0.9;letter-spacing:-0.01em;text-transform:uppercase}
.sl-live__pulse{width:14px;height:14px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-out infinite;flex-shrink:0}
.sl-live__lead{margin:0;font-family:var(--font-body);font-size:var(--text-nav);line-height:1.55;color:#d6d6d6;max-width:760px;text-wrap:pretty}
.sl-live__facts{display:flex}
.sl-live__fact{display:flex;flex-direction:column;gap:4px;padding:0 22px;border-left:1px solid rgba(255,255,255,0.2)}
.sl-live__fv{font-family:var(--font-data);font-weight:600;font-size:24px;line-height:1;color:#fff}
.sl-live__fv.is-accent{color:var(--accent)}
.sl-live__fl{font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.6)}
.sl-live__tabs{display:flex;gap:4px;overflow-x:auto;margin-top:4px}
.sl-live__tab{position:relative;flex-shrink:0;display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border:0;background:none;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:var(--text-nav);letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.65);transition:color var(--dur) var(--ease)}
.sl-live__tab .sl-mask{color:currentColor}
.sl-live__tab.is-active{color:#fff}
.sl-live__tcount{min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,0.12);color:#fff;font-family:var(--font-data);font-weight:600;font-size:var(--text-xs);letter-spacing:0}
.sl-live__tab.is-active .sl-live__tcount{background:var(--accent)}
.sl-live__tline{position:absolute;left:10px;right:10px;bottom:0;height:3px;background:var(--accent);border-radius:2px 2px 0 0;opacity:0;transition:opacity var(--dur) var(--ease)}
.sl-live__tab.is-active .sl-live__tline{opacity:1}

/* layout */
.sl-live__main{padding-top:24px;padding-bottom:56px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.sl-live__groups{min-width:0;display:flex;flex-direction:column;gap:22px}
.sl-live__group{min-width:0}
.sl-live__group[hidden]{display:none}
.sl-live__ghead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.sl-live__gtitle{display:flex;align-items:center;gap:12px;min-width:0}
.sl-live__gicon{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;border-radius:var(--r-sm);background:#0d0d0d}
.sl-live__gicon .sl-mask{color:#fff}
.sl-live__gtitle h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:0;text-transform:uppercase;line-height:1;white-space:nowrap}
.sl-live__gcount{font-family:var(--font-data);font-weight:500;font-size:var(--text-ui);color:#666}
.sl-live__hub{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);letter-spacing:0.06em;text-transform:uppercase;color:#444;white-space:nowrap;transition:color var(--dur) var(--ease)}
.sl-live__hub:hover{color:var(--accent)}
.sl-live__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sl-live__none{padding:48px 24px;text-align:center;background:#fff;border:1px dashed var(--line-strong);border-radius:var(--r-md);font-family:var(--font-body);font-size:var(--text-nav);color:var(--muted)}
.sl-live__none[hidden]{display:none}

/* live card */
.sl-lcard{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px 16px 14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transform:translateY(0);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.sl-lcard__edge{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.sl-lcard__top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);letter-spacing:0.08em;text-transform:uppercase;color:#6b6b6b}
.sl-lcard__comp{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-lcard__live{display:flex;align-items:center;gap:6px;color:var(--accent);white-space:nowrap}
.sl-lcard__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-out infinite}
.sl-lcard__race{display:flex;flex-direction:column;gap:8px}
.sl-lcard__rname{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1}
.sl-lcard__top3{display:flex;flex-direction:column;gap:5px}
.sl-lcard__drv{display:flex;align-items:center;gap:10px}
.sl-lcard__pos{font-family:var(--font-data);font-weight:600;font-size:var(--text-sm);color:#6b6b6b;min-width:14px}
.sl-lcard__pos.is-first{color:var(--accent)}
.sl-lcard__dbadge{width:16px;height:16px;border-radius:50%;background-color:#e8e8e5;background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0}
.sl-lcard__dbadge[style]{background-color:transparent}
.sl-lcard__dname{font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1}
.sl-lcard__dval{margin-left:auto;font-family:var(--font-data);font-weight:500;font-size:var(--text-sm);color:#666}
.sl-lcard__sides{display:flex;flex-direction:column;gap:8px}
.sl-lcard__side{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center}
.sl-lcard__badge{width:26px;height:26px;border-radius:50%;background-color:#e8e8e5;background-size:contain;background-repeat:no-repeat;background-position:center}
.sl-lcard__badge[style]{background-color:transparent}
.sl-lcard__badge--flag{border-radius:3px}
.sl-lcard__name{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-lcard__sc{display:flex;gap:8px;align-items:center}
.sl-lcard__set{font-family:var(--font-data);font-weight:500;font-size:var(--text-nav);color:#6b6b6b;min-width:10px;text-align:center}
.sl-lcard__set.is-won{color:#111}
.sl-lcard__set.is-cur{color:var(--accent)}
.sl-lcard__score{display:flex;min-width:30px;height:28px;padding:0 8px;align-items:center;justify-content:center;border-radius:var(--r-xs);background:#0d0d0d;color:#fff;font-family:var(--font-data);font-weight:600;font-size:17px}
.sl-lcard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--line);font-family:var(--font-body);font-size:var(--text-xs);color:var(--faint)}
.sl-lcard__meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-lcard__link{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#444;white-space:nowrap;transition:color var(--dur) var(--ease)}
.sl-lcard__arrow{display:flex;transform:translateX(0);transition:transform var(--dur) var(--ease)}

/* aside: coming up next */
.sl-live__aside{min-width:0;display:flex;flex-direction:column;gap:14px;position:sticky;top:132px}
.sl-live__ahead{display:flex;align-items:center;gap:14px}
.sl-live__abar{width:5px;height:30px;background:var(--accent);border-radius:2px;flex-shrink:0}
.sl-live__atitle{margin:0;font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:0;text-transform:uppercase;line-height:1}
.sl-live__up{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.sl-live__uitem{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:#fff;transition:background var(--dur) var(--ease)}
.sl-live__uitem:last-of-type{border-bottom-color:transparent}
.sl-live__utime{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:var(--r-xs);background:#f1f1ef}
.sl-live__ut{font-family:var(--font-data);font-weight:600;font-size:var(--text-ui);line-height:1;color:#111}
.sl-live__ud{font-family:var(--font-display);font-weight:700;font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:#6b6b6b}
.sl-live__ubody{display:flex;flex-direction:column;gap:4px;min-width:0}
.sl-live__ucomp{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:#6b6b6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-live__ucomp .sl-mask{color:#6b6b6b}
.sl-live__utitle{font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.1;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--dur) var(--ease)}
.sl-live__all{height:46px;display:flex;align-items:center;justify-content:center;gap:10px;background:#0d0d0d;color:#fff;font-family:var(--font-display);font-weight:700;font-size:var(--text-ui);letter-spacing:0.08em;text-transform:uppercase;transition:background var(--dur) var(--ease)}
.sl-live__aarrow{display:flex;transform:translateX(0);transition:transform var(--dur) var(--ease)}

@media (hover:hover) and (pointer:fine){
  .sl-live__tab:hover{color:#fff}
  .sl-lcard:hover{border-color:#111;transform:translateY(-2px)}
  .sl-lcard:hover .sl-lcard__link{color:var(--accent)}
  .sl-lcard:hover .sl-lcard__arrow{transform:translateX(3px)}
  .sl-live__uitem:hover{background:#f6f6f4}
  .sl-live__uitem:hover .sl-live__utitle{color:var(--accent)}
  .sl-live__all:hover{background:var(--accent)}
  .sl-live__all:hover .sl-live__aarrow{transform:translateX(4px)}
}

@media (max-width:1199px){
  .sl-live__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1099px){
  .sl-live__main{grid-template-columns:minmax(0,1fr)}
  .sl-live__aside{position:static}
}
@media (max-width:699px){
  .sl-live__cards{grid-template-columns:minmax(0,1fr)}
}