/* LAVA /next · tokens from "LAVA Next Design System" (shared with the TV app) */
:root{
  --bg:#0D0E10;--surface:#1A1B1E;--panel:#1C1D21;--raised:#1E1F23;
  --text:#F5F5F7;--soft:#E5E5EA;--light:#D1D1D6;--muted:#AEAEB2;--meta:#8E8E93;--disabled:#48484A;
  --accent:#9A8FDC;--accent-ink:#C9C2F2;--live:#FF453A;--live-ink:#FF6961;--ok:#30D158;--warn:#FFD60A;
  --pill:rgba(255,255,255,.14);--line:rgba(255,255,255,.08);
  --r-tag:8px;--r-row:14px;--r-card:18px;--r-panel:26px;
  --ease:cubic-bezier(.2,.8,.2,1);--fast:120ms;--base:200ms;--slow:320ms;
  --gutter:40px;--bar:68px;
  color-scheme:dark;
}
@media (max-width:1279px){:root{--gutter:32px}}
@media (max-width:1023px){:root{--gutter:24px}}
@media (max-width:699px){:root{--gutter:16px;--bar:56px}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{min-height:100vh;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block}
:focus{outline:none}
:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:12px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tab-num{font-variant-numeric:tabular-nums}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.i.f{fill:currentColor;stroke:none}

/* ---- Top bar (1a) / phone tab bar (4a) ---- */
.topbar{position:sticky;top:0;z-index:30;height:var(--bar);padding:0 var(--gutter);display:flex;align-items:center;gap:36px;background:var(--bg);border-bottom:1px solid rgba(255,255,255,.06)}
.topbar.over{position:absolute;left:0;right:0;background:transparent;border-bottom-color:transparent}
.logo{display:flex;align-items:center;gap:9px;font:800 21px/1 Figtree,sans-serif;letter-spacing:-.02em;color:var(--text)}
.logo i{width:9px;height:9px;border-radius:50%;background:var(--live)}
.nav{display:flex;gap:6px}
.nav a{padding:9px 15px;border-radius:999px;color:var(--muted);font:600 14px/1 Figtree,sans-serif;transition:color var(--fast) var(--ease),background var(--fast) var(--ease)}
.topbar.over .nav a{color:var(--light)}
.nav a:hover{color:var(--text)}
.nav a.on{background:var(--pill);color:var(--text);font-weight:700}
.spacer{flex:1}
.searchbox{position:relative;display:flex;align-items:center;gap:10px;width:300px;padding:0 12px;height:40px;border-radius:12px;background:var(--surface);color:var(--meta);font:500 14px/1 Figtree,sans-serif}
.topbar.over .searchbox{background:rgba(26,27,30,.8);color:var(--muted)}
.searchbox input{flex:1;min-width:0;height:100%;background:none;border:0;color:var(--text);font:500 14px/1 Figtree,sans-serif}
.searchbox input::placeholder{color:inherit}
.kbd{padding:3px 7px;border-radius:6px;background:rgba(255,255,255,.08);font:600 12px/1 ui-monospace,Menlo,monospace}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 14px/1 Figtree,sans-serif;color:var(--bg);flex:none}
.tabbar{display:none}
.search-icon{display:none}
@media (max-width:1023px){.topbar{gap:20px}.searchbox{width:220px}}
@media (max-width:860px){.nav a{padding:9px 11px}.searchbox .kbd{display:none}}
@media (max-width:699px){
  .topbar{gap:12px}.nav{display:none}.searchbox{display:none}.search-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--light)}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(13,14,16,.96);border-top:1px solid rgba(255,255,255,.06)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--meta);font:600 11px/1 Figtree,sans-serif}
  .tabbar a.on{color:var(--text)}
  .tabbar svg.i{width:22px;height:22px}
  main.view{padding-bottom:84px}
  body[data-route="watch"] main.view{padding-bottom:0}
}

/* ---- Search results dropdown (10a, minimal) ---- */
.sresults{position:absolute;top:46px;right:0;width:420px;max-height:70vh;overflow:auto;padding:8px;border-radius:20px;background:var(--raised);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6);z-index:40}
.sresults h4{margin:10px 10px 6px;font:700 12px/1 Figtree,sans-serif;letter-spacing:.08em;color:var(--meta)}
.sresults .empty{padding:14px 12px;color:var(--meta);font:500 14px/1.4 Figtree,sans-serif}
.sheet-search{position:fixed;inset:0;z-index:50;background:rgba(13,14,16,.98);padding:16px;display:flex;flex-direction:column;gap:12px}
.sheet-search .searchbox{display:flex;width:auto}
.sheet-search .sresults{position:static;width:auto;max-height:none;border:0;box-shadow:none;background:none;padding:0}

/* ---- Pills, chips, segmented control ---- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--pill);color:var(--text);font:600 14px/1 Figtree,sans-serif;white-space:nowrap;transition:background var(--fast) var(--ease),color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.pill:hover{background:rgba(255,255,255,.2)}
.pill:active{transform:scale(.97)}
.pill.on{background:var(--text);color:var(--bg);font-weight:700}
.pill.glass{background:rgba(30,31,35,.72)}
.pill.glass.on{background:var(--text)}
.pill.primary{background:var(--text);color:var(--bg);font-weight:700;padding:13px 24px;font-size:15px}
.pill.primary:hover{background:#fff}
.pill[disabled]{opacity:.4;cursor:default}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips .pill{padding:9px 16px}
.seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface)}
.seg button{padding:8px 14px;border-radius:999px;color:var(--muted);font:600 13px/1 Figtree,sans-serif;white-space:nowrap;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--text);color:var(--bg)}
.dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.tag{padding:5px 9px;border-radius:999px;font:700 11px/1 Figtree,sans-serif;white-space:nowrap}
.live-badge{padding:5px 9px;border-radius:999px;background:var(--live);color:#fff;font:800 11px/1 Figtree,sans-serif;letter-spacing:.06em}

/* ---- Sports home (1a) ---- */
main.view{display:block}
.page{padding:36px var(--gutter) 56px;display:flex;flex-direction:column;gap:40px}
.sp-head{display:flex;flex-direction:column;gap:20px}
.sp-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.h1{margin:0;font:800 34px/1.1 Figtree,sans-serif;letter-spacing:-.02em}
.shelf{display:flex;flex-direction:column;gap:16px}
.shelf-h{display:flex;align-items:baseline;gap:12px}
.h2{margin:0;font:700 22px/1.2 Figtree,sans-serif}
.shelf-sub{font:500 13px/1 Figtree,sans-serif;color:var(--meta)}
.shelf-link{font:600 13px/1 Figtree,sans-serif;color:var(--muted)}
.shelf-link:hover{color:var(--text)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:20px}
.rows3{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.status-line{display:flex;align-items:center;gap:8px;font:500 13px/1.4 Figtree,sans-serif;color:var(--meta)}
@media (max-width:699px){
  .page{padding-top:20px;gap:28px}.h1{font-size:28px}
  .sp-row .seg{order:3;width:100%;overflow-x:auto}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);scrollbar-width:none}
  .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 4px;scrollbar-width:none}
  .cards>*{flex:0 0 250px;scroll-snap-align:start}
  .cards .gc-art{height:120px}
  .shelf.has-rows .cards{display:none}
  .shelf .rows-phone{display:flex;flex-direction:column;gap:10px}
  .h2{font-size:19px}
  .sp-row{gap:12px}.scores-toggle{width:38px;height:38px;padding:0;justify-content:center}.scores-toggle span{display:none}
}
.rows-phone{display:none}

/* ---- Game card (LAVA Next GameCard: card / row / banner) ---- */
.gc{display:flex;flex-direction:column;gap:12px;cursor:pointer;min-width:0;text-align:left}
.gc-art{position:relative;height:132px;border-radius:var(--r-card);overflow:hidden;display:flex;transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease)}
.gc:hover .gc-art,.gc:focus-visible .gc-art{transform:translateY(-4px);box-shadow:0 0 0 2px var(--text),0 18px 40px rgba(0,0,0,.55)}
.gc:focus-visible{outline:none}
.half{flex:1;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(0,0,0,.18)),var(--tc,#2A2D33)}
.half+.half{box-shadow:inset 1px 0 0 rgba(0,0,0,.25)}
.half::before{content:"";position:absolute;width:74%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.30) 0%,rgba(255,255,255,.08) 45%,rgba(255,255,255,0) 70%);pointer-events:none}
.gr-art .half::before{width:90%}
.half img{position:relative;z-index:1;width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.half b{position:absolute;font:800 30px/1 Figtree,sans-serif;color:#fff;letter-spacing:-.02em;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.half img~b{visibility:hidden}
.gc-art .live-badge{position:absolute;top:10px;left:10px}
.gc-art .inmv{position:absolute;top:10px;right:10px;padding:4px 9px;border-radius:999px;background:rgba(13,14,16,.72);font:700 11px/1 Figtree,sans-serif}
.gc-meta{display:flex;flex-direction:column;gap:5px;padding:0 2px}
.gc-l1{display:flex;justify-content:space-between;gap:8px;font:500 12px/1.3 Figtree,sans-serif;color:var(--meta)}
.gc-team{display:flex;justify-content:space-between;gap:8px;font:700 15px/1.3 Figtree,sans-serif}
.gc-team.lose{color:var(--meta)}
.gc-st{display:flex;align-items:center;gap:7px;font:500 13px/1.3 Figtree,sans-serif;color:var(--muted);margin-top:2px}
.gc-banner{flex-direction:column;justify-content:space-between;padding:16px 18px;background:radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.12),rgba(255,255,255,0) 55%),linear-gradient(135deg,var(--bc,#1E1F23),#141518)}
.gc-banner .kicker{font:800 12px/1 Figtree,sans-serif;letter-spacing:.12em;color:rgba(255,255,255,.75);position:relative}
.gc-banner .btitle{font:800 22px/1.05 Figtree,sans-serif;color:#fff;letter-spacing:-.01em;text-wrap:balance;position:relative;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gc-banner .live-badge{left:auto;right:12px;top:12px}
.gc-banner.poster::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,14,16,.85),rgba(13,14,16,.2))}
.gc.dim{opacity:.6}
.gr{display:flex;align-items:center;gap:14px;padding:10px;border-radius:var(--r-row);background:var(--surface);border:1px solid rgba(255,255,255,.06);cursor:pointer;min-width:0;text-align:left;transition:background var(--base) var(--ease),box-shadow var(--base) var(--ease)}
.gr:hover,.gr:focus-visible{background:var(--raised);box-shadow:0 0 0 2px var(--text);outline:none}
.gr-art{width:88px;height:52px;border-radius:10px;overflow:hidden;display:flex;flex:none}
.gr-art .half b{font-size:13px}
.gr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gr-team{display:flex;justify-content:space-between;gap:8px;font:700 14px/1.3 Figtree,sans-serif}
.gr-st{display:flex;align-items:center;gap:6px;font:500 12px/1.3 Figtree,sans-serif;color:var(--muted)}
.skel{border-radius:var(--r-card);background:linear-gradient(90deg,#17181B 0%,#1F2024 50%,#17181B 100%);background-size:600px 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{0%{background-position:-300px 0}100%{background-position:300px 0}}
.empty-state{padding:40px 0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.empty-state b{font:700 24px/1.2 Figtree,sans-serif}
.empty-state span{font:500 15px/1.6 Figtree,sans-serif;color:var(--muted);max-width:560px}

/* ---- Featured hero (1c, only when a favourite team is live) ---- */
.hero{position:relative;height:540px;overflow:hidden;background:var(--bg)}
.hero-art{position:absolute;inset:0;display:flex;filter:saturate(1.1)}
.hero-art .half img{inset:8%;width:84%;height:84%;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,14,16,.94) 0%,rgba(13,14,16,.7) 38%,rgba(13,14,16,.15) 70%),linear-gradient(0deg,#0D0E10 0%,rgba(13,14,16,0) 35%)}
.hero-copy{position:absolute;z-index:1;left:var(--gutter);bottom:56px;width:min(620px,calc(100% - 2 * var(--gutter)));display:flex;flex-direction:column;gap:18px}
.hero-kick{display:flex;align-items:center;gap:10px;font:600 14px/1 Figtree,sans-serif;color:var(--light)}
.hero-score{display:flex;align-items:center;gap:22px}
.hero-score img{width:72px;height:72px;object-fit:contain;flex:none}
.hero-score span{font:800 64px/1 Figtree,sans-serif;letter-spacing:-.03em}
.hero-title{font:800 34px/1.1 Figtree,sans-serif;letter-spacing:-.02em}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-src{display:flex;align-items:center;gap:7px;margin-left:8px;font:500 14px/1 Figtree,sans-serif;color:var(--light)}
.also{position:absolute;z-index:1;right:var(--gutter);bottom:56px;width:380px;padding:16px;border-radius:var(--r-panel);background:rgba(28,29,33,.86);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.also-h{display:flex;justify-content:space-between;padding:2px 4px 4px;font:700 14px/1 Figtree,sans-serif}
.also-h span{color:var(--meta);font-weight:500}
@media (max-width:1100px){.also{display:none}}
@media (max-width:699px){.hero{height:auto;padding:calc(var(--bar) + 120px) 0 24px}.hero-copy{position:relative;left:auto;bottom:auto;margin:0 var(--gutter);width:auto}.hero-score span{font-size:44px}.hero-score img{width:52px;height:52px}.hero-title{font-size:26px}}

/* ---- Watch (2a side-by-side on laptops, 2b overlay ≥1600px or fullscreen) ---- */
.watch{position:relative;height:100vh;height:100dvh;overflow:hidden;background:var(--bg)}
.w-video{position:absolute;overflow:hidden;background:#000;border-radius:var(--r-card)}
.w-video video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.w-top{position:absolute;display:flex;align-items:center;gap:14px;z-index:3}
.w-back{display:flex;align-items:center;gap:6px;padding:9px 14px 9px 10px;border-radius:999px;background:rgba(255,255,255,.1);font:600 14px/1 Figtree,sans-serif}
.w-back:hover{background:rgba(255,255,255,.18)}
.w-title{font:700 17px/1 Figtree,sans-serif}
.w-sub{font:500 14px/1 Figtree,sans-serif;color:var(--meta)}
.w-src{display:flex;align-items:center;gap:7px;font:500 13px/1 Figtree,sans-serif;color:var(--muted);white-space:nowrap}
.w-chipscore{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:rgba(13,14,16,.72);font:700 14px/1 Figtree,sans-serif;font-variant-numeric:tabular-nums;z-index:2}
.w-chipscore em{font-style:normal;color:var(--muted);font-weight:500}
.w-controls{position:absolute;display:flex;flex-direction:column;gap:18px;z-index:3}
.w-dvr{display:flex;align-items:center;gap:14px}
.w-dvr .time{font:600 13px/1 Figtree,sans-serif;color:var(--muted);font-variant-numeric:tabular-nums;min-width:44px}
.w-bar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.16);position:relative;cursor:pointer}
.w-bar::before{content:"";position:absolute;inset:-10px 0}
.w-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--text)}
.w-bar b{position:absolute;top:-5px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--text)}
.golive{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,69,58,.16);color:var(--live-ink);font:700 12px/1 Figtree,sans-serif;white-space:nowrap}
.golive.at{background:rgba(255,255,255,.08);color:var(--muted)}
.w-pills{display:flex;gap:8px;flex-wrap:wrap}
.w-pills .pill{position:relative}
.w-panel{position:absolute;z-index:4;border-radius:var(--r-panel);background:var(--panel);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:18px;overflow:auto;scrollbar-width:thin}
.w-panel.float{background:rgba(28,29,33,.94);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.w-panel .ph{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.w-panel .ph b{font:800 24px/1 Figtree,sans-serif}
.w-panel .ph b{white-space:nowrap}
.w-panel .ph>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.w-panel .ph span{font:500 13px/1 Figtree,sans-serif;color:var(--meta)}
.w-panel .x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--light);flex:none}
.w-panel .x:hover{background:rgba(255,255,255,.16)}
.tabs{display:flex;gap:6px}
.tabs button{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.1);font:600 14px/1 Figtree,sans-serif}
.tabs button.on{background:var(--text);color:var(--bg);font-weight:700}
.tabs .x{padding:0;width:34px;height:34px;flex:none;margin-left:auto;border-radius:50%;display:grid;place-items:center}
.scard{padding:18px;border-radius:var(--r-card);background:var(--raised);display:flex;flex-direction:column;gap:18px}
.scard-top{display:flex;align-items:center;justify-content:space-between}
.steam{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;font:700 13px/1 Figtree,sans-serif;color:var(--muted)}
.steam img{width:48px;height:48px;object-fit:contain}
.sbig{display:flex;flex-direction:column;align-items:center;gap:6px}
.sbig b{font:800 40px/1 Figtree,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sbig span{font:600 12px/1 Figtree,sans-serif;color:var(--live-ink)}
.lines{display:grid;row-gap:10px;font:600 13px/1 Figtree,sans-serif;color:var(--meta);text-align:center;font-variant-numeric:tabular-nums;border-top:1px solid var(--line);padding-top:14px}
.lines .t{text-align:left;color:var(--text)}
.lines .v{color:var(--soft)}
.lines .tot{color:var(--text);font-weight:800}
.cap{font:700 12px/1 Figtree,sans-serif;letter-spacing:.08em;color:var(--meta)}
.lead{display:flex;align-items:center;gap:12px}
.lead .num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 11px/1 Figtree,sans-serif;color:#fff;flex:none}
.lead .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lead .who b{font:700 14px/1.2 Figtree,sans-serif}
.lead .who span{font:500 12px/1.2 Figtree,sans-serif;color:var(--meta)}
.lead .line{font:700 14px/1 Figtree,sans-serif;color:var(--soft);white-space:nowrap}
.strow{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;font:700 15px/1 Figtree,sans-serif;font-variant-numeric:tabular-nums}
.strow span:nth-child(2){text-align:center;color:var(--light);font-weight:600;font-size:14px}
.strow span:nth-child(3){text-align:right}
.stbar{display:flex;gap:3px;height:4px;margin-top:8px}
.stbar i{border-radius:2px}
.play{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;font:500 13px/1.45 Figtree,sans-serif;color:var(--soft)}
.play .w{color:var(--meta)}
.play .s{font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.evrow{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--r-row);background:var(--surface)}
.evrow b{font:700 14px/1.3 Figtree,sans-serif}
.evrow span{font:500 12px/1.3 Figtree,sans-serif;color:var(--meta)}
.evrow.win span{color:var(--ok)}
.evrow.live span{color:var(--live-ink)}
.spoil{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px;border-radius:var(--r-card);background:var(--raised);font:500 14px/1.5 Figtree,sans-serif;color:var(--muted)}
.panel-note{font:500 12px/1.5 Figtree,sans-serif;color:var(--meta)}

/* layout: side (2a) */
.watch.side .w-top{left:var(--gutter);top:28px;right:calc(380px + 2 * var(--gutter))}
.watch.side .w-video{left:var(--gutter);top:80px;width:calc(100% - 380px - 3 * var(--gutter));aspect-ratio:16/9;max-height:calc(100% - 80px - 150px)}
.watch.side .w-controls{left:var(--gutter);width:calc(100% - 380px - 3 * var(--gutter))}
.watch.side .w-panel{right:var(--gutter);top:80px;bottom:40px;width:380px}
.watch.side.nopanel .w-top{right:var(--gutter)}
.watch.side.nopanel .w-video,.watch.side.nopanel .w-controls{width:calc(100% - 2 * var(--gutter))}
/* layout: overlay (2b) */
.watch.overlay .w-video{inset:0;border-radius:0}
.watch.overlay .shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(270deg,rgba(13,14,16,.75) 0%,rgba(13,14,16,0) 45%),linear-gradient(0deg,rgba(13,14,16,.92) 0%,rgba(13,14,16,0) 32%),linear-gradient(180deg,rgba(13,14,16,.7) 0%,rgba(13,14,16,0) 22%);transition:opacity .6s var(--ease)}
.watch.overlay.nopanel .shade{background:linear-gradient(0deg,rgba(13,14,16,.92) 0%,rgba(13,14,16,0) 32%),linear-gradient(180deg,rgba(13,14,16,.7) 0%,rgba(13,14,16,0) 22%)}
.watch.overlay .w-top{left:var(--gutter);top:28px}
.watch.overlay .w-back{width:40px;height:40px;padding:0;justify-content:center;background:rgba(13,14,16,.72)}
.watch.overlay .w-back span{display:none}
.watch.overlay .w-src{padding:9px 12px;border-radius:12px;background:rgba(13,14,16,.72);color:var(--soft)}
.watch.overlay .w-controls{left:var(--gutter);right:calc(400px + 32px + var(--gutter));bottom:36px}
.watch.overlay.nopanel .w-controls{right:var(--gutter)}
.watch.overlay .w-panel{right:32px;top:28px;bottom:32px;width:400px}
.watch.overlay .pill{background:rgba(30,31,35,.72)}
.watch.overlay .pill.on{background:var(--text)}
.watch.overlay .w-bar{background:rgba(255,255,255,.24)}
.w-heading{display:flex;flex-direction:column;gap:8px}
.w-heading .k{display:flex;align-items:center;gap:10px;font:600 14px/1 Figtree,sans-serif;color:var(--light)}
.w-heading .t{font:800 40px/1.1 Figtree,sans-serif;letter-spacing:-.02em}
.watch.side .w-heading{display:none}
.watch.overlay .w-top .w-title,.watch.overlay .w-top .w-sub,.watch.overlay .w-top .spacer{display:none}
.watch.overlay .w-chipscore{display:none}
.watch.idle .w-top,.watch.idle .w-controls,.watch.idle .shade,.watch.idle .w-chipscore{opacity:0;pointer-events:none}
.watch.idle{cursor:none}
.w-top,.w-controls,.w-chipscore{transition:opacity .6s var(--ease)}
.watch:not(.idle) .w-top,.watch:not(.idle) .w-controls{transition-duration:.2s}
/* phone (4b): full-width video on top, title + source, pills, Scores & stats as a bottom sheet */
@media (max-width:699px){
  .watch,.watch.side,.watch.overlay{height:auto;min-height:100dvh;overflow:visible}
  .watch .w-video,.watch.side .w-video,.watch.overlay .w-video,.watch.side.nopanel .w-video{position:relative;inset:auto;left:auto;top:auto;width:100%;max-height:none;aspect-ratio:16/9;border-radius:0}
  .watch .w-top,.watch.side .w-top,.watch.overlay .w-top,.watch.side.nopanel .w-top{position:absolute;left:10px;top:10px;right:auto}
  .watch .w-back,.watch.side .w-back{width:36px;height:36px;padding:0;justify-content:center;background:rgba(13,14,16,.72)}
  .w-back span,.w-top .w-title,.w-top .w-sub,.w-top .spacer,.w-top .w-src{display:none!important}
  .w-chipscore{left:54px;top:10px;padding:6px 9px;border-radius:10px;font-size:12px}
  .watch .w-controls,.watch.side .w-controls,.watch.overlay .w-controls,.watch.side.nopanel .w-controls{position:relative;left:auto;right:auto;bottom:auto;top:auto!important;width:auto;padding:16px var(--gutter) 24px;gap:14px}
  .watch .w-heading,.watch.side .w-heading{display:flex;gap:6px}
  .w-heading .k{display:none}
  .w-heading .t{font-size:20px;line-height:1.15}
  .watch .w-heading .src{display:flex;align-items:center;gap:7px;font:500 13px/1 Figtree,sans-serif;color:var(--meta)}
  .watch .w-heading .t{order:-1}
  .w-pills{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);scrollbar-width:none}
  .w-pills .pill{padding:10px 14px;font-size:13px}
  .watch .shade{display:none}
  .watch .w-panel,.watch.side .w-panel,.watch.overlay .w-panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:62dvh;border-radius:26px 26px 0 0;padding:10px 20px calc(28px + env(safe-area-inset-bottom));background:var(--panel);box-shadow:0 -20px 50px rgba(0,0,0,.5);z-index:20}
  .watch .w-panel::before{content:"";align-self:center;width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.24);flex:none}
  .watch:not(.nopanel)::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:19}
  .watch.idle .w-top,.watch.idle .w-controls,.watch.idle .w-chipscore{opacity:1;pointer-events:auto}.watch.idle{cursor:auto}
  /* Phone: the popover is a bottom sheet across the screen (.pop.pop outranks the base .pop rule further down). */
  .pop.pop{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));top:auto;width:auto!important;max-height:70dvh;z-index:21}
  .pop.pop .rows{max-height:calc(70dvh - 70px)}
  .switching{left:12px;right:12px;bottom:12px;transform:none;max-width:none;padding:10px 12px;gap:10px}.switching .t b{font-size:14px}.switching .t span{font-size:12px}
  .w-state .msg{padding:12px}.w-state .msg b{font-size:18px}
}
.w-heading .src{display:none}

/* ---- Video states (5c switching, 12d every source failed) ---- */
.w-state{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
.w-state .msg{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:24px;max-width:460px}
.w-state .msg b{font:800 24px/1.2 Figtree,sans-serif}
.w-state .msg span{font:500 14px/1.5 Figtree,sans-serif;color:var(--muted)}
.w-state .msg .acts{display:flex;gap:10px;margin-top:6px}
.switching{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:14px;padding:14px 16px 14px 18px;border-radius:var(--r-card);background:var(--raised);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6);max-width:calc(100% - 32px)}
.switching .t{display:flex;flex-direction:column;gap:4px;min-width:0}
.switching .t b{font:700 15px/1.2 Figtree,sans-serif}
.switching .t span{font:500 13px/1.2 Figtree,sans-serif;color:var(--muted)}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--text);flex:none;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Source popover (5b) and full list (5a) ---- */
.pop{position:absolute;bottom:calc(100% + 12px);left:0;z-index:6;width:340px;border-radius:20px;background:var(--raised);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6);padding:8px;display:flex;flex-direction:column;gap:2px;text-align:left;cursor:default}
.pop .rows{display:flex;flex-direction:column;gap:2px;overflow:auto;max-height:min(420px,calc(100vh - 220px));scrollbar-width:thin}
.pop>.row:first-child{margin-top:0}
.pop .row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;font:600 14px/1.2 Figtree,sans-serif;cursor:pointer;width:100%;text-align:left}
.pop .row:hover{background:rgba(255,255,255,.06)}
.pop .row.on{background:rgba(154,143,220,.12)}
.pop .row.failed .n{color:var(--meta)}
.pop .row .n{flex:1;min-width:0}
.pop .row small{font:500 12px/1 Figtree,sans-serif}
.pop .foot{margin-top:4px;padding:10px 12px 6px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font:500 12px/1 Figtree,sans-serif;color:var(--meta)}
.pop .foot button{color:var(--accent-ink);font:700 12px/1 Figtree,sans-serif}
.srow{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-row);background:var(--surface);cursor:pointer;width:100%;text-align:left;transition:background var(--fast) var(--ease)}
.srow:hover{background:var(--raised)}
.srow.on{background:var(--raised);box-shadow:inset 0 0 0 1.5px var(--accent)}
.srow .b{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.srow .b b{font:700 15px/1.2 Figtree,sans-serif}
.srow .b span{font:500 12px/1.2 Figtree,sans-serif;color:var(--meta)}
.srow.failed .b b{color:var(--meta)}
.t-playing{background:rgba(154,143,220,.18);color:var(--accent-ink)}
.t-checking{background:rgba(255,255,255,.08);color:var(--muted)}
.t-failed{background:rgba(255,69,58,.16);color:var(--live-ink)}
.t-ready{background:rgba(48,209,88,.14);color:var(--ok)}
.foot-block{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-top:16px;border-top:1px solid var(--line)}
.foot-block .lbl{display:flex;flex-direction:column;gap:4px}
.foot-block .lbl b{font:700 14px/1 Figtree,sans-serif}
.foot-block .lbl span{font:500 12px/1.4 Figtree,sans-serif;color:var(--meta)}
.seg.full{width:100%}.seg.full button{flex:1;padding:9px 0}

/* ---- Profile menu, toast ---- */
.menu{position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:260px;padding:8px;border-radius:20px;background:var(--raised);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px}
.menu button,.menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font:600 14px/1.2 Figtree,sans-serif;text-align:left;width:100%}
.menu button:hover,.menu a:hover{background:rgba(255,255,255,.06)}
.menu .avatar{width:28px;height:28px;font-size:12px}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.menu .check{margin-left:auto;color:var(--accent)}
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);z-index:60;padding:12px 18px;border-radius:14px;background:var(--raised);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6);font:600 14px/1.3 Figtree,sans-serif;opacity:0;pointer-events:none;transition:opacity var(--base) var(--ease),transform var(--base) var(--ease);max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:699px){.toast{bottom:92px}}

/* ---- Not-yet-rebuilt sections ---- */
.soon-card{max-width:640px;padding:28px;border-radius:var(--r-panel);background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.soon-card b{font:800 24px/1.2 Figtree,sans-serif}
.soon-card span{font:500 15px/1.6 Figtree,sans-serif;color:var(--muted)}
.soon-card .acts{display:flex;gap:10px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}.gc:hover .gc-art{transform:none}}

/* ---- Live TV (6a guide, 6b watch + guide, 19a channels, 19b search, 19c reminder) ---- */
.lt-page{gap:20px}
.lt-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lt-bar .chips .pill{padding:9px 14px;font-size:13px}
.lt-picker{right:0;left:auto;width:300px;max-height:60vh;overflow:auto}
.lt-picker .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--meta);display:grid;place-items:center;font:800 11px/1 Figtree,sans-serif;color:var(--bg);flex:none}
.lt-picker .box.on{background:var(--accent);border-color:var(--accent)}
.lt-skel{display:flex;flex-direction:column;gap:4px}
.lt-tile{border-radius:8px;background:#26272B;display:grid;place-items:center;font:800 11px/1 Figtree,sans-serif;color:var(--soft);letter-spacing:.02em;flex:none;overflow:hidden}
.lt-tile img{max-width:82%;max-height:76%;object-fit:contain}
.lt-grid{--ch:196px;--row:64px;display:flex;flex-direction:column;gap:8px}
.lt-grid:not(.compact){--ch:156px;--row:68px}
.lt-head{display:flex;gap:4px;height:32px}
.lt-nav{width:var(--ch);flex:none;display:flex;gap:6px;align-items:center}
.lt-nav button{width:32px;height:32px;border-radius:50%;background:var(--surface);color:var(--light);font:700 18px/1 Figtree,sans-serif}
.lt-nav button:hover{background:var(--raised);color:var(--text)}
.lt-slots{flex:1;display:grid;grid-template-columns:repeat(var(--slots),1fr);font:600 13px/32px Figtree,sans-serif;color:var(--meta)}
.lt-slots span{padding-left:6px;border-left:1px solid var(--line);white-space:nowrap;overflow:hidden}
.lt-body{position:relative;display:flex;flex-direction:column;gap:4px}
.lt-overlay{position:absolute;top:0;bottom:0;left:calc(var(--ch) + 4px);right:0;pointer-events:none;z-index:3}
.lt-overlay>*{pointer-events:auto}
.lt-now{position:absolute;top:-40px;bottom:0;width:2px;margin-left:-1px;background:var(--live);pointer-events:none!important}
.lt-now span{position:absolute;top:6px;left:-22px;padding:3px 6px;border-radius:6px;background:var(--live);color:#fff;font:800 11px/1 Figtree,sans-serif}
.lt-row{display:flex;gap:4px;height:var(--row)}
.lt-ch{width:var(--ch);flex:none;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:12px;background:var(--surface);text-align:left;min-width:0;transition:background var(--fast) var(--ease)}
.lt-ch:hover,.lt-row.playing .lt-ch{background:var(--raised)}
.lt-ch .n{display:flex;flex-direction:column;gap:3px;min-width:0}
.lt-ch .n b{font:700 14px/1.1 Figtree,sans-serif}
.lt-ch .n span{font:500 11px/1 Figtree,sans-serif;color:var(--meta)}
.lt-row.playing .lt-ch .n span{color:var(--accent-ink)}
.lt-progs{position:relative;flex:1;min-width:0;overflow:hidden}
.lt-prog{position:absolute;top:0;bottom:0;border-radius:12px;background:#16171A;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:4px;overflow:hidden;text-align:left;transition:background var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.lt-prog.cur{background:var(--raised)}
.lt-prog:hover{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.lt-prog.on{background:#26272B;box-shadow:0 0 0 2px var(--text)}
.lt-prog.none{background:transparent;border:1px dashed rgba(255,255,255,.1)}
.lt-prog .t{font:700 14px/1.15 Figtree,sans-serif;display:flex;align-items:center;gap:6px}
.lt-prog .s{font:500 12px/1 Figtree,sans-serif;color:var(--meta)}
.lt-prog .pr{position:absolute;left:12px;right:12px;bottom:7px;height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.lt-prog .pr i{display:block;height:100%;border-radius:2px;background:var(--text)}
i.lv{font-style:normal;padding:3px 6px;border-radius:999px;background:var(--live);color:#fff;font:800 9px/1 Figtree,sans-serif;letter-spacing:.06em;flex:none}
.lt-card{position:absolute;width:400px;max-width:calc(100% - 8px);border-radius:22px;background:var(--raised);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.65);overflow:hidden;z-index:5}
.lt-card-art{position:relative;height:150px;display:grid;place-items:center;background:linear-gradient(135deg,#2A2B30,#16171A)}
.lt-card-art img{max-width:50%;max-height:56%;object-fit:contain}
.lt-card-art b{font:800 40px/1 Figtree,sans-serif;color:var(--soft)}
.lt-card-art .live-badge{position:absolute;left:14px;top:14px}
.lt-card-art .x{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(13,14,16,.6);color:var(--light)}
.lt-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px}
.lt-card-body .m{font:500 12px/1.3 Figtree,sans-serif;color:var(--meta)}
.lt-card-body>b{font:800 22px/1.15 Figtree,sans-serif}
.lt-card-body .s{font:600 14px/1.3 Figtree,sans-serif;color:var(--light)}
.lt-card-body .d{font:500 14px/1.5 Figtree,sans-serif;color:var(--light);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.lt-card-body .acts{display:flex;gap:8px;flex-wrap:wrap}
.lt-card-body .acts .pill{padding:11px 16px}
.lt-card-body .later{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.lt-card-body .later button{display:flex;justify-content:space-between;gap:12px;font:600 14px/1.2 Figtree,sans-serif;color:var(--soft);text-align:left}
.lt-card-body .later button:hover{color:var(--text)}
.lt-card-body .later em{font-style:normal;color:var(--meta);font-weight:500;flex:none}
/* 19a channel list */
.lt-list{display:flex;flex-direction:column;gap:4px}
.lt-lhead,.lt-lrow{display:grid;grid-template-columns:56px 240px minmax(0,1fr) 300px;gap:16px;align-items:center}
.lt-lhead{font:700 11px/1 Figtree,sans-serif;letter-spacing:.08em;color:var(--meta);padding-bottom:6px}
.lt-lrow{height:64px;border-radius:14px;background:var(--surface)}
.lt-lrow.playing{background:var(--raised);box-shadow:inset 0 0 0 1.5px var(--accent)}
.lt-lrow .star{justify-self:center;font:700 18px/1 Figtree,sans-serif;color:var(--disabled)}
.lt-lrow .star.on{color:var(--warn)}
.lt-lrow .lt-ch{width:auto;background:none;padding:0}
.lt-lrow .nowc{display:flex;flex-direction:column;gap:7px;min-width:0;text-align:left}
.lt-lrow .nowc .t{font:700 15px/1.1 Figtree,sans-serif;display:flex;align-items:center;gap:8px}
.lt-lrow .p{display:flex;align-items:center;gap:10px}
.bar{display:block;width:200px;height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.bar i{display:block;height:100%;border-radius:2px;background:var(--text)}
.lt-lrow .p em,.lt-pv-info .p em{font-style:normal;font:600 12px/1 Figtree,sans-serif;color:var(--meta)}
.lt-lrow .nextc{display:flex;flex-direction:column;gap:4px;padding-right:16px;min-width:0;font:600 14px/1.1 Figtree,sans-serif;color:var(--light)}
.lt-lrow .nextc em{font-style:normal;font:500 12px/1 Figtree,sans-serif;color:var(--meta)}
/* 6b preview */
.lt-preview{display:grid;grid-template-columns:600px minmax(0,1fr);gap:40px;padding:32px var(--gutter) 8px;align-items:start}
.lt-pv-video{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:#000}
.lt-pv-video video{width:100%;height:100%;object-fit:contain;display:block}
.lt-sound{position:absolute;right:12px;top:12px;padding:6px 10px;border-radius:999px;background:rgba(13,14,16,.72);font:700 12px/1 Figtree,sans-serif}
.lt-pv-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font:500 14px/1.4 Figtree,sans-serif;color:var(--muted);text-align:center;padding:16px}
.lt-pv-msg b{font:800 20px/1.2 Figtree,sans-serif;color:var(--text)}
.lt-pv-info{display:flex;flex-direction:column;gap:14px;padding-top:8px;min-width:0}
.lt-pv-info .k{display:flex;align-items:center;gap:10px;font:600 13px/1 Figtree,sans-serif;color:var(--muted)}
.lt-pv-info .t{font:800 40px/1.1 Figtree,sans-serif;letter-spacing:-.02em}
.lt-pv-info .p{display:flex;align-items:center;gap:12px}
.lt-pv-info .p .bar{width:240px;height:4px}.lt-pv-info .p .bar i{background:var(--live)}.lt-pv-info .p em{color:var(--live-ink)}
.lt-pv-info .d{max-width:560px;font:500 15px/1.6 Figtree,sans-serif;color:var(--light);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lt-pv-info .acts{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:1100px){.lt-preview{grid-template-columns:1fr;gap:16px}.lt-pv-info .t{font-size:28px}}
@media (max-width:1023px){.lt-lhead,.lt-lrow{grid-template-columns:44px 200px minmax(0,1fr)}.lt-lhead span:last-child,.lt-lrow .nextc{display:none}}
@media (max-width:699px){
  .lt-grid,.lt-grid:not(.compact){--ch:110px}.lt-ch .n span{display:none}.lt-ch{gap:8px;padding:0 8px}.lt-grid .lt-ch .lt-tile{display:none}
  .lt-lhead,.lt-lrow{grid-template-columns:36px minmax(0,1fr)}.lt-lhead span:nth-child(3),.lt-lhead span:nth-child(4),.lt-lrow .nowc{display:none}
  .lt-card{position:fixed;left:12px!important;right:12px!important;top:auto!important;bottom:84px;width:auto;max-width:none}
  .lt-preview{padding:0 0 8px}.lt-pv-video{border-radius:0}.lt-pv-info{padding:0 var(--gutter)}.lt-pv-info .t{font-size:24px}
}
/* 19c reminder */
.remind{position:fixed;right:32px;top:32px;z-index:70;width:400px;max-width:calc(100% - 24px);border-radius:22px;background:var(--raised);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.6);padding:18px;display:flex;flex-direction:column;gap:14px}
.remind .rm-top{display:flex;align-items:center;gap:14px}
.remind .ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none}
.remind .ring>span{width:42px;height:42px;border-radius:50%;background:var(--raised);display:grid;place-items:center;font:800 18px/1 Figtree,sans-serif;font-variant-numeric:tabular-nums}
.remind .rm-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.remind .rm-t span{font:600 12px/1.2 Figtree,sans-serif;color:var(--meta)}
.remind .rm-t b{font:800 17px/1.2 Figtree,sans-serif}
.remind .rm-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.remind .rm-acts .pill{justify-content:center;padding:12px 0}
@media (max-width:699px){.remind{right:12px;top:12px}}

/* ---- Movies & TV (7a browse + 7b search bar, 7c / 18a details) ---- */
.mhero{position:relative;height:520px;background:#1A1B1E center/cover no-repeat}
.mhero.tall{height:560px}
.mhero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,14,16,.92) 0%,rgba(13,14,16,0) 62%),linear-gradient(0deg,#0D0E10 0%,rgba(13,14,16,0) 45%)}
.mhero-copy{position:absolute;z-index:1;left:var(--gutter);bottom:56px;width:min(620px,calc(100% - 2 * var(--gutter)));display:flex;flex-direction:column;gap:16px}
.mhero-copy .k{font:600 13px/1.3 Figtree,sans-serif;color:var(--light)}
.mhero-copy .t{font:800 56px/1.02 Figtree,sans-serif;letter-spacing:-.025em;color:var(--text)}
.mhero-copy .o{font:500 15px/1.6 Figtree,sans-serif;color:var(--light);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mhero-copy .acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mhero-copy .acts .pill{padding:13px 20px;font-size:15px}
.mback{position:absolute;z-index:2;left:var(--gutter);top:calc(var(--bar) + 16px);background:rgba(13,14,16,.72)}
.m-page{gap:36px;padding-top:8px}
.bigsearch{display:flex;align-items:center;gap:12px;height:56px;padding:0 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);color:var(--meta)}
.bigsearch svg.i{width:22px;height:22px}
.bigsearch input{flex:1;min-width:0;height:100%;background:none;border:0;color:var(--text);font:500 17px/1 Figtree,sans-serif}
.bigsearch input::placeholder{color:var(--meta)}
.bigsearch button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--light)}
.chip-sep{width:1px;align-self:stretch;background:rgba(255,255,255,.1);margin:0 6px}
.prow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:20px}
.prow>.pc:nth-child(n+8){display:none}
.pgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:24px 20px}
.pc{display:flex;flex-direction:column;gap:10px;min-width:0}
.pc-art{position:relative;aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:var(--surface);transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease)}
.pc-art img{width:100%;height:100%;object-fit:cover}
.pc:hover .pc-art,.pc:focus-visible .pc-art{transform:translateY(-4px);box-shadow:0 0 0 2px var(--text),0 18px 40px rgba(0,0,0,.55)}
.pc:focus-visible{outline:none}
.pc-art em{position:absolute;left:8px;top:8px;padding:4px 7px;border-radius:999px;background:rgba(13,14,16,.72);font:700 11px/1 Figtree,sans-serif;font-style:normal}
.pc-saved{position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;font:800 12px/1 Figtree,sans-serif;font-style:normal}
.pc-t{font:700 14px/1.2 Figtree,sans-serif}
.pc-s{font:500 12px/1.2 Figtree,sans-serif;color:var(--meta)}
.wide-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.wc{display:flex;flex-direction:column;gap:10px;min-width:0}
.wc-art,.ep-art{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--raised);transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease)}
.wc-art img,.ep-art img{width:100%;height:100%;object-fit:cover}
.wc:hover .wc-art,.ep:hover .ep-art{transform:translateY(-4px);box-shadow:0 0 0 2px var(--text),0 18px 40px rgba(0,0,0,.55)}
.wc-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(13,14,16,.72);display:grid;place-items:center;opacity:0;transition:opacity var(--base) var(--ease)}
.wc:hover .wc-play{opacity:1}
.wc-bar{position:absolute;left:14px;right:14px;bottom:12px;height:4px;border-radius:2px;background:rgba(255,255,255,.2)}
.wc-bar i{display:block;height:100%;border-radius:2px;background:var(--text)}
.ep-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ep{display:flex;flex-direction:column;gap:10px;min-width:0}
.ep.now .ep-art{box-shadow:0 0 0 2px var(--accent)}
.ep.future{opacity:.55;cursor:default}
.seg.seasons{overflow-x:auto;max-width:100%;scrollbar-width:none}
.cast{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.cm{display:flex;flex-direction:column;align-items:center;gap:8px;width:96px;flex:none;text-align:center}
.cm-face{width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--raised)}
.cm-face img{width:100%;height:100%;object-fit:cover}
.cm b{font:700 13px/1.2 Figtree,sans-serif;max-width:96px}
.cm span:last-child{font:500 12px/1.2 Figtree,sans-serif;color:var(--meta);max-width:96px}
.facts{display:grid;grid-template-columns:160px minmax(0,1fr);gap:12px 24px;max-width:720px}
.fk{font:600 14px/1.4 Figtree,sans-serif;color:var(--meta)}
.fv{font:500 14px/1.4 Figtree,sans-serif;color:var(--soft)}
@media (max-width:1279px){.pgrid{grid-template-columns:repeat(6,minmax(0,1fr))}.prow{grid-template-columns:repeat(6,minmax(0,1fr))}.prow>.pc:nth-child(n+7){display:none}}
@media (max-width:1023px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.prow{grid-template-columns:repeat(4,minmax(0,1fr))}.prow>.pc:nth-child(n+5){display:none}.wide-cards,.ep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mhero-copy .t{font-size:44px}}
@media (max-width:699px){
  .mhero,.mhero.tall{height:auto;min-height:420px;padding-top:var(--bar)}.mhero-copy{position:relative;left:auto;bottom:auto;margin:200px var(--gutter) 24px;width:auto}.mhero-copy .t{font-size:32px}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}
  .prow,.wide-cards,.ep-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 4px;gap:12px;scrollbar-width:none}
  .prow>.pc{flex:0 0 120px;display:flex!important;scroll-snap-align:start}.wide-cards>.wc,.ep-grid>.ep{flex:0 0 260px;scroll-snap-align:start}
  .facts{grid-template-columns:110px minmax(0,1fr)}
}

/* ---- Movie / episode player (8a, 8b, 18b, 18c, 18d) ---- */
.vplayer .w-heading .t{font-size:34px}
.vplayer .w-heading .k{color:var(--light)}
.vbar{height:5px}
.vbar s{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:rgba(255,255,255,.28);text-decoration:none}
.vp-play{width:44px;height:40px;padding:0;justify-content:center}
.vsub{position:absolute;left:5%;right:5%;bottom:8%;z-index:2;display:flex;justify-content:center;pointer-events:none;text-align:center}
.vsub.raised{bottom:26%}
.vsub span{padding:6px 14px;border-radius:8px;font-weight:600;line-height:1.3;white-space:pre-line;max-width:1200px}
.watch.vplayer:not(.nopanel) .vsub{right:calc(420px + 32px)}
.upnext{position:absolute;right:40px;bottom:150px;z-index:4;width:380px;padding:18px;border-radius:22px;background:var(--raised);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:10px}
.upnext b{font:800 17px/1.25 Figtree,sans-serif}
.upnext .d{font:500 13px/1.45 Figtree,sans-serif;color:var(--light);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.upnext .acts{display:flex;gap:8px}
.capgrid{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;font:600 14px/1 Figtree,sans-serif;color:var(--light)}
.swatches{display:flex;gap:8px}
.sw{width:28px;height:28px;border-radius:50%}
.sw.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.offset{display:flex;align-items:center;gap:8px}
.offset button{width:34px;height:34px;border-radius:50%;background:var(--pill);display:grid;place-items:center;font:700 16px/1 Figtree,sans-serif}
.offset span{flex:1;text-align:center;color:var(--text)}
.vep{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--r-row);background:var(--surface);text-align:left;width:100%}
.vep:hover{background:var(--raised)}
.vep.on{background:var(--raised);box-shadow:inset 0 0 0 1.5px var(--accent)}
.vep[disabled]{opacity:.5;cursor:default}
.vep-art{position:relative;width:120px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--raised);flex:none}
.vep-art img{width:100%;height:100%;object-fit:cover}
.vep-art .wc-bar{left:8px;right:8px;bottom:6px;height:3px}
.vep .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.vep .b b{font:700 14px/1.2 Figtree,sans-serif}
.vep .b span{font:500 12px/1.2 Figtree,sans-serif;color:var(--meta)}
.watch.vplayer .w-panel{width:420px}
@media (max-width:699px){.upnext{left:12px;right:12px;width:auto;bottom:12px}.vplayer .w-heading .t{font-size:20px}}

/* ---- Multiview (3a tiles + hover actions, 3c dock + Add game drawer, 17a Large + small, 17b picker, 17c grid, phone 4c) ---- */
body[data-route="multiview"]{overflow:hidden}
.mv{position:fixed;inset:0;background:#000;overflow:hidden;--dw:0px}
.mv-head,.mv-hint{display:none}
.mv-stage,.mv-empties{position:absolute;left:0;top:0;bottom:0;right:var(--dw);display:grid;gap:3px}
.mv-stage.boxed,.mv-empties.boxed{right:auto;bottom:auto}
.mv-empties{pointer-events:none}
.mv-empty{pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#0B0C0E;color:var(--muted);font:600 14px/1 Figtree,sans-serif;border:1.5px dashed rgba(255,255,255,.14);transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.mv-empty:hover,.mv-empty.drop{background:#141518;color:var(--text);border-color:rgba(255,255,255,.3)}
.mv-dots,.mv-addthumb{display:none}
.mvt{position:relative;min-width:0;min-height:0;background:#000;container-type:size}
.mvt.drop[data-drop-kind="swap"] .mvt-v::before{content:"Swap here"}
.mvt.dragging{opacity:.45}
.mvt[draggable="true"]{cursor:grab}
.mvt.drop .mvt-v::before{content:"Drop to replace";position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(154,143,220,.28);font:800 18px/1 Figtree,sans-serif;box-shadow:inset 0 0 0 3px var(--accent)}
.mvt-v{position:absolute;inset:0;overflow:hidden;background:#000}
.mvt-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.mvt.fill .mvt-v video{object-fit:cover}
.mvt-o{position:absolute;inset:0;z-index:2}
.mvt.audio .mvt-v::after{content:"";position:absolute;inset:0;z-index:4;box-shadow:inset 0 0 0 3px var(--accent);pointer-events:none}
.mvt-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 26%);pointer-events:none}
.mvt-chip{position:absolute;left:16px;top:16px;max-width:calc(100% - 130px);display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:rgba(13,14,16,.72);font:700 14px/1 Figtree,sans-serif;color:var(--text);font-variant-numeric:tabular-nums}
.mvt-chip span{color:var(--muted);font-weight:500;white-space:nowrap}
.mvt-sound{position:absolute;right:16px;top:16px;display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:var(--accent);color:var(--bg);font:700 12px/1 Figtree,sans-serif}
.mvt-sound svg.i{width:14px;height:14px;stroke-width:2}
/* A recorded tile's whole-game bar along its bottom; the tile buttons sit above it */
.mvt-tl{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;display:flex;padding-top:18px}
.mvt-tl .w-bar{height:4px}
.mvt:has(.mvt-tl) .mvt-acts{bottom:40px}
.mvt-replaying{position:absolute;left:12px;bottom:34px;z-index:3;padding:6px 10px;border-radius:10px;background:var(--accent);color:var(--bg);font:800 12px/1 Figtree,sans-serif}
.mvt-acts{position:absolute;left:0;right:0;bottom:20px;padding:0 12px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;opacity:0;pointer-events:none;transition:opacity var(--base) var(--ease)}
.mvt.low .mvt-acts{bottom:var(--lift,92px)}
.mv.full .mvt.low .mvt-acts{bottom:20px}
.mvt:hover .mvt-acts,.mvt.sel .mvt-acts,.mvt:focus-within .mvt-acts{opacity:1;pointer-events:auto}
.mv.idle .mvt:not(.sel) .mvt-acts{opacity:0;pointer-events:none}
.mvt-acts button{padding:10px 15px;border-radius:999px;background:rgba(30,31,35,.82);color:var(--text);font:600 13px/1 Figtree,sans-serif;white-space:nowrap}
.mvt-acts button:hover{background:rgba(52,53,58,.92)}
.mvt-acts button.pri{background:var(--text);color:var(--bg);font-weight:700}
.mvt-acts button.danger{color:var(--live-ink)}
.mvt-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#16171A;filter:saturate(.85)}
.mvt-bg .half{flex:1;align-self:stretch;display:grid;place-items:center}
.mvt-bg .half img{width:34%;max-width:120px;aspect-ratio:1;object-fit:contain}
.mvt-bg img.solo{width:30%;max-width:160px;object-fit:contain}
.mvt-bg b{font:800 22px/1.2 Figtree,sans-serif;padding:0 24px;text-align:center}
.mvt-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;background:rgba(0,0,0,.62)}
.mvt-state b{font:700 16px/1.25 Figtree,sans-serif}
.mvt-state>span:not(.spin){font:500 13px/1.3 Figtree,sans-serif;color:var(--muted)}
.mvt-state .acts{display:flex;gap:8px}
@container (max-width:640px){
  .mvt-chip{left:10px;top:10px;padding:6px 9px;border-radius:10px;font-size:12px;gap:8px;max-width:calc(100% - 96px)}
  .mvt-sound{right:10px;top:10px;padding:6px 9px;font-size:11px}
  .mvt-acts{bottom:10px;gap:6px}.mvt-acts button{padding:7px 11px;font-size:12px}
}
@container (max-width:470px){.mvt-acts .opt{display:none}}
@container (max-height:200px){.mvt-acts .opt{display:none}.mvt-state>span:not(.spin){display:none}}

/* chrome: 3a top bar (back, count, sound, share) + the 3c / 17a dock; both fade with the 3 s idle */
.mv-top,.mv-dock{position:absolute;left:calc((100% - var(--dw)) / 2);transform:translateX(-50%);z-index:6;display:flex;align-items:center;background:rgba(28,29,33,.94);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5);transition:opacity var(--slow) var(--ease)}
.mv-top{top:16px;gap:8px;padding:6px;border-radius:999px;max-width:calc(100% - var(--dw) - 32px)}
.mv-dock{bottom:20px;gap:6px;padding:8px;border-radius:22px}
.mv.idle .mv-top,.mv.idle .mv-dock{opacity:0;pointer-events:none}
/* 3b idle: only the Sound badge stays, as a round icon in the tile's corner */
.mvt-chip,.mvt-shade,.mvt-sound{transition:opacity var(--slow) var(--ease)}
.mv.idle .mvt-chip,.mv.idle .mvt-shade{opacity:0}
.mv.idle .mvt-sound{top:auto;right:12px;bottom:12px;width:34px;height:34px;padding:0;justify-content:center;font-size:0;gap:0}
.mv.idle .mvt-sound svg.i{width:16px;height:16px}
.mv.idle{cursor:none}
.mv-round{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--text);flex:none}
.mv-round:hover,.mv-tb:hover{background:rgba(255,255,255,.1)}
.mv-title{display:flex;align-items:baseline;gap:8px;padding:0 6px;font:800 15px/1 Figtree,sans-serif;white-space:nowrap}
.mv-title span{font:500 13px/1 Figtree,sans-serif;color:var(--meta)}
.mv-sep{width:1px;height:22px;background:rgba(255,255,255,.12);margin:0 2px;flex:none}
.mv-tb{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;font:600 13px/1 Figtree,sans-serif;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.mv-tb svg.i{width:16px;height:16px}
.dg{width:52px;height:40px;border-radius:10px;display:grid;place-items:center;color:rgba(255,255,255,.55);transition:background var(--fast) var(--ease)}
.dg:hover{background:rgba(255,255,255,.08)}
.dg.on{background:var(--text);color:var(--bg)}
.dg.off{color:rgba(255,255,255,.2)}
.dg-i{width:30px;height:20px;display:grid;gap:2px}
.dg-i b{border-radius:2px;background:currentColor}
.dock-add{padding:12px 14px;border-radius:12px;background:var(--pill);font:700 13px/1 Figtree,sans-serif;white-space:nowrap}
.dock-add:hover{background:rgba(255,255,255,.2)}
.dock-add.full{background:rgba(255,255,255,.06);color:var(--disabled)}
.mv-zero{position:absolute;left:calc((100% - var(--dw)) / 2);top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - var(--dw) - 48px));display:flex;flex-direction:column;gap:10px;text-align:center}
.mv-zero b{font:800 26px/1.2 Figtree,sans-serif}
.mv-zero span{font:500 15px/1.5 Figtree,sans-serif;color:var(--muted)}
/* one tile full screen inside Multiview */
.mv-ftop{position:absolute;left:var(--gutter);top:24px;right:calc(var(--dw) + var(--gutter));z-index:6;display:flex;align-items:center;gap:16px;transition:opacity var(--slow) var(--ease)}
.mv-ftitle{font:800 20px/1.2 Figtree,sans-serif;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.mv-fbar{position:absolute;left:var(--gutter);bottom:32px;z-index:6;display:flex;flex-wrap:wrap;gap:8px;transition:opacity var(--slow) var(--ease)}
.mv.full .mvt-shade{background:linear-gradient(180deg,rgba(13,14,16,.7) 0%,rgba(13,14,16,0) 22%),linear-gradient(0deg,rgba(13,14,16,.85) 0%,rgba(13,14,16,0) 28%)}
.mv.full .mvt-chip{display:none}
.mv.full .mvt-sound{top:24px;right:24px}
.mv.idle .mv-ftop,.mv.idle .mv-fbar{opacity:0;pointer-events:none}
/* Add game drawer (3c) and Scores & stats */
.mv-drawer{position:absolute;right:0;top:0;bottom:0;z-index:7;width:360px;background:var(--panel);border-left:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column;gap:16px}
.mv-drawer.w-panel{width:400px;border-radius:0;border:0;border-left:1px solid var(--line);padding:0;gap:0;overflow:hidden}
.mv-stats{flex:1;min-height:0;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:18px}
.mv-dh{display:flex;align-items:center;gap:12px}
.mv-dh b{flex:1;font:800 20px/1.1 Figtree,sans-serif}
.mv-dh span{font:600 13px/1 Figtree,sans-serif;color:var(--meta);white-space:nowrap}
.mv-dh .x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--light);flex:none}
.mv-search{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--meta)}
.mv-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:500 14px/1 Figtree,sans-serif}
.mv-search:focus-within{border-color:rgba(255,255,255,.3)}
.mv-chips{display:flex;gap:6px;flex-wrap:wrap}
.mv-chips .pill{padding:8px 13px;font-size:13px}
.mv-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;margin:0 -4px;padding:2px 4px}
.mv-list .gr{width:100%;flex:none}
.mv-list .gr[draggable="true"]{cursor:grab}
.mv-list .gr.in{opacity:.45;cursor:default}
.mv-list .gr.in::after{content:"In multiview";font:600 11px/1 Figtree,sans-serif;color:var(--accent-ink);white-space:nowrap}
.mv-list .lt-half{background:#24262B}
.mv-list .lt-half img{width:70%;height:70%;object-fit:contain}
.mv-note{display:flex;align-items:center;gap:8px;padding:12px 2px;font:500 13px/1.4 Figtree,sans-serif;color:var(--meta)}
.mv-foot{margin:0;font:500 12px/1.5 Figtree,sans-serif;color:var(--meta)}
/* layout picker (17b) and the phone tile sheet */
.mv-scrim{position:absolute;inset:0;z-index:8;background:rgba(0,0,0,.55)}
.mv-picker{position:absolute;left:calc((100% - var(--dw)) / 2);bottom:96px;transform:translateX(-50%);z-index:9;width:min(760px,calc(100% - 32px));padding:24px;border-radius:26px;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:18px}
.mv-ph{display:flex;align-items:baseline;justify-content:space-between}
.mv-ph b{font:800 22px/1 Figtree,sans-serif}
.mv-ph span{font:500 13px/1 Figtree,sans-serif;color:var(--meta)}
.mv-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lp{display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;background:var(--surface);color:rgba(255,255,255,.4);text-align:left}
.lp:hover{background:var(--raised)}
.lp.on{background:var(--raised);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.lp.off{opacity:.45}
.lp-i{width:84px;height:52px;display:grid;gap:3px;flex:none}
.lp-i b{border-radius:4px;background:currentColor}
.lp .b{display:flex;flex-direction:column;gap:4px;min-width:0}
.lp .b b{font:700 14px/1.2 Figtree,sans-serif;color:var(--text)}
.lp .b span{font:500 12px/1.25 Figtree,sans-serif;color:var(--meta)}
.mv-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;padding:20px 16px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--panel);display:flex;flex-direction:column;gap:4px}
.mv-sheet b{font:800 18px/1.2 Figtree,sans-serif;padding:0 8px 10px}
.mv-sheet button{padding:14px 8px;border-radius:12px;text-align:left;font:600 15px/1 Figtree,sans-serif}
.mv-sheet button:hover{background:rgba(255,255,255,.06)}
.mv-sheet button.danger{color:var(--live-ink)}
@media (max-width:1100px){.mv-tb[data-act="mvmute"]{max-width:150px}.mv-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.mv-tb[data-act="mvfs"]{display:none}.dg{width:44px}}
/* phone (4c): header, the main tile you swipe, thumbnails you tap to listen */
@media (max-width:699px){
  .mv{position:relative;inset:auto;min-height:100vh;min-height:100dvh;background:var(--bg);overflow:visible;padding-bottom:96px}
  .mv-head{display:flex;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 20px 14px}
  .mv-head .t{flex:1;font:800 22px/1 Figtree,sans-serif}
  .mv-head .pill{padding:9px 13px;font-size:13px}
  .mv-stage{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px;align-items:start}
  .mv-empties,.mv-top,.mv-dock{display:none}
  .mv-zero{position:static;transform:none;width:auto;margin:40px 20px;text-align:left}
  .mvt{container-type:inline-size;background:none;display:flex;flex-direction:column;gap:7px}
  .mvt-v{position:relative;inset:auto;aspect-ratio:16/9;border-radius:14px}
  .mvt.main{grid-column:1/-1;margin:0 -20px}
  .mvt.main .mvt-v{border-radius:0}
  .mvt:not(.main) .mvt-chip{display:none}
  .mvt:not(.main) .mvt-sound{right:6px;top:6px;padding:5px 7px;font-size:10px}
  .mvt:not(.main) .mvt-sound svg{display:none}
  .mvt-cap{display:flex;flex-direction:column;gap:5px}
  .mvt-cap:empty{display:none}
  .mvt-cap b{font:700 13px/1.2 Figtree,sans-serif}
  .mvt-cap span{font:500 12px/1 Figtree,sans-serif;color:var(--meta)}
  .mvt:not(.main) .mvt-state b{font-size:12px}
  .mvt:not(.main) .mvt-state .acts{display:none}
  .mvt-bg b{font-size:14px}
  .mv-dots{display:flex;grid-column:1/-1;justify-content:center;gap:6px;padding:2px 0 6px}
  .mv-dots i{width:6px;height:6px;border-radius:50%;background:var(--disabled)}
  .mv-dots i.on{width:18px;border-radius:3px;background:var(--text)}
  .mv-addthumb{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;aspect-ratio:16/9;border-radius:14px;border:1.5px dashed rgba(255,255,255,.2);color:var(--muted);font:600 13px/1 Figtree,sans-serif}
  .mv-hint{display:block;margin:18px 20px 0;font:500 12px/1.5 Figtree,sans-serif;color:var(--meta)}
  .mv-hint:empty{display:none}
  .mv.empty .mv-stage{display:none}
  .mv-drawer{position:fixed;left:0;right:0;top:12vh;bottom:0;width:auto;z-index:40;border-left:0;border-radius:22px 22px 0 0;padding:20px 16px calc(16px + env(safe-area-inset-bottom))}
  .mv-drawer.w-panel{width:auto;border-radius:22px 22px 0 0}
  .mv-picker{position:fixed;left:0;right:0;bottom:0;transform:none;width:auto;z-index:41;border-radius:22px 22px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
  .mv-scrim{position:fixed;z-index:39}
  .mv-pgrid{grid-template-columns:1fr 1fr;gap:8px}
  .lp{flex-direction:column;align-items:flex-start;gap:8px}
  .lp-i{width:64px;height:40px}
}

.nav-n{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--bg);font:800 11px/1 Figtree,sans-serif;vertical-align:1px}

/* ---- Watch panels: More to watch, Game info, Guide (2a pills) ---- */
.mw-row{display:flex;flex-direction:column;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mw-row:last-child{border-bottom:0}
.mw-row .gr{width:100%}
.mw-row.on .gr{box-shadow:inset 0 0 0 1.5px var(--accent)}
.mw-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mw-acts .pill{padding:8px 13px;font-size:13px}
.mw-acts .tag{margin-right:auto}
.gp-list{display:flex;flex-direction:column;gap:6px}
.gp-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-row);background:var(--surface);text-align:left;width:100%}
.gp-row:hover{background:var(--raised)}
.gp-row.on{box-shadow:inset 0 0 0 1.5px var(--accent)}
.gp-row .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.gp-row .b b{font:700 14px/1.2 Figtree,sans-serif}
.gp-row .b>span:not(.bar){font:500 13px/1.25 Figtree,sans-serif;color:var(--light);display:flex;align-items:center;gap:6px}
.gp-row .b em{font:500 12px/1.2 Figtree,sans-serif;font-style:normal;color:var(--meta)}
.gp-row .bar{height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.gp-row .bar i{display:block;height:100%;background:var(--text)}
.gp-row .lv{font:800 10px/1 Figtree,sans-serif;font-style:normal;padding:3px 5px;border-radius:4px;background:var(--live);color:#fff}

/* ---- Replays (9a desktop, 15a phone) ---- */
.rp-search{display:flex;align-items:center;gap:10px;width:min(550px,48vw);height:46px;padding:0 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--meta);margin-left:12px}
.rp-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:500 15px/1 Figtree,sans-serif}
.rp-search:focus-within{border-color:rgba(255,255,255,.3)}
.rp-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.rp-page.with-detail .rp-cols{grid-template-columns:minmax(0,1fr) 440px}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.rp-card{width:auto!important}
.rp-card.sel .gc-art{box-shadow:0 0 0 2px var(--accent)}
.rp-cont{display:flex;overflow-x:auto;gap:20px;scrollbar-width:none}
.rp-c{display:flex;flex-direction:column;gap:6px;text-align:left;width:325px;flex:none}
.rp-c-art{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:#1E1F23 center/cover no-repeat}
.rp-c:hover .rp-c-art{box-shadow:0 0 0 2px var(--text)}
.rp-c b{font:700 15px/1.25 Figtree,sans-serif;margin-top:6px}
.rp-c>span{font:500 13px/1.2 Figtree,sans-serif;color:var(--meta)}
.rp-tag{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:999px;background:rgba(13,14,16,.72);font:700 12px/1 Figtree,sans-serif}
.rp-bar{position:absolute;left:14px;right:14px;bottom:12px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.rp-bar i{display:block;height:100%;background:var(--text)}
.rp-detail{position:sticky;top:calc(var(--bar) + 20px);max-height:calc(100vh - var(--bar) - 40px);overflow:auto;padding:22px 20px;border-radius:var(--r-panel);background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.rp-dh{display:flex;align-items:center;justify-content:space-between}
.rp-dh .k{font:800 12px/1 Figtree,sans-serif;letter-spacing:.06em;color:var(--live-ink)}
.rp-dh .x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--light)}
.rp-detail .t{font:800 22px/1.2 Figtree,sans-serif}
.rp-detail .sub{font:500 13px/1.3 Figtree,sans-serif;color:var(--meta)}
.rp-detail .cap{margin-top:6px}
.rp-detail>.pill{align-self:flex-start}
.rp-score{font:800 18px/1.2 Figtree,sans-serif;font-variant-numeric:tabular-nums}
.rp-list{display:flex;flex-direction:column;gap:8px}
.rp-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-row);background:var(--surface)}
.rp-row .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rp-row .b b{font:700 14px/1.2 Figtree,sans-serif}
.rp-row .b span{font:500 12px/1.25 Figtree,sans-serif;color:var(--meta)}
.rp-row .pill{padding:8px 13px;font-size:13px;flex:none}
.rp-player .w-heading .t{font-size:30px}
@media (max-width:1100px){.rp-page.with-detail .rp-cols{grid-template-columns:minmax(0,1fr) 360px}}
@media (max-width:860px){.rp-page.with-detail .rp-cols{grid-template-columns:minmax(0,1fr)}.rp-detail{position:static;max-height:none}}
@media (max-width:699px){
  .rp-page .sp-row{flex-wrap:wrap}.rp-search{order:3;width:100%;margin:12px 0 0}
  .rp-c{width:230px}
}
.rp-main .shelf+.shelf{margin-top:32px}
.rp-banner{background:#1E1F23;position:relative}
.rp-banner img,.rp-c-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp-banner img+.kicker,.rp-banner img~.btitle{text-shadow:0 2px 10px rgba(0,0,0,.8)}
.rp-banner .kicker,.rp-banner .btitle{position:relative;z-index:1}
.rp-banner img{filter:brightness(.7)}

/* Multiview tile: source on the chip (on hover), Source & quality menu */
.mvt-chip em{font-style:normal;font-weight:500;color:var(--meta);display:none;max-width:160px}
.mvt:hover .mvt-chip em,.mvt.sel .mvt-chip em{display:block}
.mvt-acts button.on{background:var(--text);color:var(--bg)}
.mvt.popped .mvt-acts{opacity:1;pointer-events:auto}
.mvt-pop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;width:min(340px,calc(100% - 24px));max-height:calc(100% - 24px);display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:18px;background:rgba(30,31,35,.97);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.mvt-ph{display:flex;align-items:center;gap:8px;padding:2px 4px 4px}
.mvt-ph b{font:800 15px/1 Figtree,sans-serif}
.mvt-ph span{flex:1;font:500 12px/1 Figtree,sans-serif;color:var(--meta)}
.mvt-ph .x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08)}
.mvt-ph .x svg.i{width:15px;height:15px}
.mvt-pop .rows{display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0;scrollbar-width:thin}
.mvt-pop .row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font:600 13px/1.2 Figtree,sans-serif;text-align:left;width:100%}
.mvt-pop .row:hover{background:rgba(255,255,255,.06)}
.mvt-pop .row.on{background:rgba(154,143,220,.14)}
.mvt-pop .row.failed .n{color:var(--meta)}
.mvt-pop .row .n{flex:1;min-width:0}
.mvt-pop .row small{font:600 11px/1 Figtree,sans-serif}
.mvt-q{display:flex;flex-wrap:wrap;gap:6px;padding:6px 4px 2px;border-top:1px solid var(--line)}
.mvt-q button{padding:7px 10px;border-radius:999px;background:var(--pill);font:600 12px/1 Figtree,sans-serif}
.mvt-q button.on{background:var(--text);color:var(--bg)}
.mvt-pf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 4px 0;border-top:1px solid var(--line);font:500 11px/1.3 Figtree,sans-serif;color:var(--meta)}
.mvt-pf button{color:var(--accent-ink);font:700 12px/1 Figtree,sans-serif;white-space:nowrap}

/* Episode picker in the player (18b) */
.vep-shelf{display:flex;flex-direction:column;gap:16px;margin-bottom:22px}
.vep-h{display:flex;align-items:center;gap:16px;min-width:0}
.vep-h>b{font:800 26px/1 Figtree,sans-serif;flex:none}
.vep-seasons{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(30,31,35,.82);overflow-x:auto;scrollbar-width:none;min-width:0}
.vep-seasons::-webkit-scrollbar{display:none}
.vep-seasons button{padding:8px 14px;border-radius:999px;font:600 13px/1 Figtree,sans-serif;color:var(--light);white-space:nowrap;flex:none}
.vep-seasons button.on{background:var(--text);color:var(--bg);font-weight:700}
.vep-hint{font:500 13px/1 Figtree,sans-serif;color:var(--muted);white-space:nowrap}
.vep-h .x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(30,31,35,.82);flex:none}
.vep-row{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 2px;margin:-4px -2px 0}
.vep-row::-webkit-scrollbar{display:none}
.vep-card{flex:none;width:256px;display:flex;flex-direction:column;gap:6px;text-align:left}
.vep-card.skel{height:190px;border-radius:18px}
.vep-img{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#26272C;transition:box-shadow var(--fast) var(--ease)}
.vep-img img{width:100%;height:100%;object-fit:cover}
.vep-card:hover .vep-img{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.vep-card.on .vep-img{box-shadow:0 0 0 2.5px var(--text)}
.vep-card[disabled]{opacity:.5;cursor:default}
.vep-img .tag{position:absolute;left:12px;top:12px;background:var(--accent);color:var(--bg)}
.vep-bar{position:absolute;left:12px;right:12px;bottom:10px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.vep-bar i{display:block;height:100%;background:var(--text)}
.vep-card b{font:700 15px/1.25 Figtree,sans-serif;margin-top:6px}
.vep-card>span:last-child{font:500 13px/1.2 Figtree,sans-serif;color:var(--muted)}
.vplayer.eps .shade{background:linear-gradient(0deg,rgba(13,14,16,.95) 0%,rgba(13,14,16,.75) 45%,rgba(13,14,16,0) 75%)}
.vplayer.eps .w-heading{display:none}
@media (max-width:699px){.vep-card{width:200px}.vep-hint{display:none}.vep-h>b{font-size:20px}}
.mv.tpop .mv-top{opacity:0;pointer-events:none}
.mvt.popped .mvt-acts{opacity:0!important;pointer-events:none!important}
.vp-anime{display:inline-flex;padding:4px;border-radius:999px;background:rgba(30,31,35,.72)}
.vp-anime button{padding:7px 13px;border-radius:999px;font:700 13px/1 Figtree,sans-serif;color:var(--light)}
.vp-anime button.on{background:var(--text);color:var(--bg)}

/* ---- Search (10a palette, 15b phone page) ---- */
button.searchbox{cursor:text;text-align:left}
button.searchbox .ph{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.searchbox:hover{background:var(--raised);color:var(--light)}
.mv-chip-top{display:none}
.sx-scrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:flex;justify-content:center;align-items:flex-start;padding:56px 16px 16px}
.sx{width:min(880px,100%);max-height:calc(100vh - 72px);display:flex;flex-direction:column;border-radius:var(--r-panel);background:var(--panel);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.sx-in{display:flex;align-items:center;gap:14px;height:68px;padding:0 22px;border-bottom:1px solid var(--line);color:var(--meta)}
.sx-in svg.i{width:20px;height:20px}
.sx-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:600 20px/1 Figtree,sans-serif}
.sx-in input::-webkit-search-cancel-button{display:none}
.sx .kbd,.sx-item .kbd{padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.1);font:600 11px/1 Figtree,sans-serif;color:var(--muted)}
.sx-res{flex:1;min-height:0;overflow:auto;padding:6px 14px 12px;scrollbar-width:thin}
.sx-res:empty{display:none}
.sx-group h4{margin:14px 8px 8px;font:800 11px/1 Figtree,sans-serif;letter-spacing:.1em;color:var(--meta)}
.sx-items{display:flex;flex-direction:column;gap:6px}
.sx-items.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sx-item{position:relative;display:flex;align-items:center;gap:10px;border-radius:var(--r-row);cursor:pointer}
.sx-item>*:first-child{flex:1;min-width:0}
.sx-item .gr{background:transparent;border-color:transparent}
.sx-item.sel{box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--raised)}
.sx-item.sel .gr{background:transparent;box-shadow:none}
.sx-item .kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.sx-item.sel:has(.pill,.sx-now) .kbd{display:none}
.sx-team,.sx-tv,.sx-title{display:flex;align-items:center;gap:12px;padding:10px;min-width:0}
.sx-team .b,.sx-tv .b,.sx-title .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.sx-team b,.sx-tv b,.sx-title b{font:700 15px/1.2 Figtree,sans-serif}
.sx-team .b>span,.sx-tv .b>span,.sx-title .b>span{font:500 12px/1.2 Figtree,sans-serif;color:var(--meta)}
.sx-logo{width:44px;height:44px;border-radius:50%;background:#24262B;display:grid;place-items:center;flex:none}
.sx-logo img{width:32px;height:32px;object-fit:contain}
.sx-team .pill{padding:8px 13px;font-size:13px}
.sx-now{font:700 12px/1 Figtree,sans-serif;color:var(--muted);white-space:nowrap;padding-right:6px}
.sx-now.on{color:var(--live-ink)}
.sx-now.remind{color:var(--accent-ink)}
.sx-poster{width:44px;height:64px;border-radius:8px;overflow:hidden;background:#24262B;flex:none;display:grid;place-items:center}
.sx-poster img{width:100%;height:100%;object-fit:cover}
.sx-poster b{font:800 11px/1 Figtree,sans-serif;color:var(--muted)}
.sx-empty,.sx-more{display:flex;align-items:center;gap:8px;padding:22px 10px;font:500 14px/1.4 Figtree,sans-serif;color:var(--meta)}
.sx-more{padding:10px}
.sx-foot{display:flex;gap:20px;padding:12px 22px;border-top:1px solid var(--line);font:500 12px/1 Figtree,sans-serif;color:var(--meta)}
.sx-page .sx-ptop{display:flex;align-items:center;gap:12px;margin:8px 0 14px}
.sx-page .sx-in{flex:1;height:48px;padding:0 14px;border:1.5px solid var(--accent);border-radius:14px;background:var(--surface)}
.sx-page .sx-in input{font-size:16px}
.sx-cancel{font:600 15px/1 Figtree,sans-serif;color:var(--light)}
.sx-page .sx-res{padding:0;margin-top:6px}
.sx-page .sx-item{background:var(--surface)}
@media (max-width:699px){
  .mv-chip-top{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;background:var(--accent);color:var(--bg);font:800 13px/1 Figtree,sans-serif}
  .mv-chip-top svg.i{width:16px;height:16px}
  body[data-route="search"] .topbar{display:none}
}

/* ---- Settings (11a desktop, 15c phone) ---- */
.st{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:calc(100vh - var(--bar))}
.st-nav{padding:32px 20px 32px 40px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;position:sticky;top:var(--bar);align-self:start;height:calc(100vh - var(--bar))}
.st-me{display:flex;align-items:center;gap:12px;padding:0 0 24px}
.st-me>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.st-me b{font:800 16px/1.1 Figtree,sans-serif}
.st-me button{font:600 12px/1 Figtree,sans-serif;color:var(--accent-ink);text-align:left}
.st-nav>button{padding:12px 14px;border-radius:12px;text-align:left;font:600 14px/1 Figtree,sans-serif;color:var(--light)}
.st-nav>button:hover{background:rgba(255,255,255,.05)}
.st-nav>button.on{background:var(--pill);color:var(--text);font-weight:700}
.st-body{padding:36px 56px 80px;max-width:900px;display:flex;flex-direction:column;gap:14px}
.st-body h1{margin:0 0 12px}
.st-body h3{margin:12px 0 0;font:800 16px/1.2 Figtree,sans-serif}
.st-chips{display:flex;flex-wrap:wrap;gap:8px}
.st-team{display:inline-flex;align-items:center;gap:8px;padding:5px 8px 5px 6px;border-radius:999px;background:var(--pill);font:700 14px/1 Figtree,sans-serif}
.st-team img{width:28px;height:28px;object-fit:contain;border-radius:50%;background:#2A2C31;padding:3px}
.st-team button{width:22px;height:22px;border-radius:50%;color:var(--meta);font:600 16px/1 Figtree,sans-serif}
.st-team button:hover{background:rgba(255,255,255,.12);color:var(--text)}
.st-add{padding:11px 16px;border-radius:999px;border:1.5px dashed rgba(255,255,255,.22);font:600 14px/1 Figtree,sans-serif;color:var(--light)}
.st-picker{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line)}
.st-picker>.pill{align-self:flex-start}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;max-height:340px;overflow:auto;scrollbar-width:thin}
.st-pick{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--raised);text-align:left}
.st-pick img{width:30px;height:30px;object-fit:contain;flex:none}
.st-pick span{flex:1;display:flex;flex-direction:column;gap:3px}
.st-pick b{font:700 13px/1.1 Figtree,sans-serif}
.st-pick small{font:500 11px/1 Figtree,sans-serif;color:var(--meta)}
.st-pick.on{box-shadow:inset 0 0 0 1.5px var(--accent)}
.st-pick svg.i{color:var(--accent-ink)}
.st-card{border-radius:var(--r-card);background:var(--surface);overflow:hidden;margin-top:12px}
.st-row{display:flex;align-items:center;gap:20px;padding:18px 20px;border-bottom:1px solid var(--line)}
.st-row:last-child{border-bottom:0}
.st-row .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.st-row .b b{font:700 15px/1.2 Figtree,sans-serif}
.st-row .b span{font:500 13px/1.4 Figtree,sans-serif;color:var(--meta)}
.st-val{font:600 14px/1.3 Figtree,sans-serif;color:var(--light);text-align:right;max-width:280px}
.switch{width:44px;height:26px;border-radius:13px;background:#3A3B40;position:relative;flex:none;transition:background var(--fast) var(--ease)}
.switch i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--base) var(--ease)}
.switch.on{background:var(--ok)}
.switch.on i{transform:translateX(18px)}
.sel{position:relative;display:inline-flex;align-items:center;flex:none}
.sel select{appearance:none;-webkit-appearance:none;padding:9px 32px 9px 14px;border-radius:999px;background:var(--raised);border:1px solid var(--line);color:var(--text);font:600 14px/1 Figtree,sans-serif;cursor:pointer}
.sel select:focus-visible{outline:2px solid var(--text)}
.sel svg.chev{position:absolute;right:10px;width:14px;height:14px;transform:rotate(-90deg);pointer-events:none;color:var(--muted)}
.st-row .seg{flex:none}
.st-note{margin:8px 2px 0;font:500 13px/1.5 Figtree,sans-serif;color:var(--meta)}
.st-preview{border-radius:var(--r-card);overflow:hidden;background:linear-gradient(135deg,#2B3A4A,#15181D)}
.st-prev-frame{position:relative;aspect-ratio:21/7;display:flex;align-items:flex-end;justify-content:center;padding:0 24px 22px}
.st-prev-frame.raised{padding-bottom:64px}
.st-prev-frame span{padding:4px 12px;border-radius:6px;font-weight:600;line-height:1.3;text-align:center}
.st-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.st-person{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;border-radius:var(--r-card);background:var(--surface);text-align:center;min-width:0}
.st-person b{font:700 15px/1.2 Figtree,sans-serif;max-width:100%}
.st-person>span:last-child{font:500 12px/1 Figtree,sans-serif;color:var(--meta)}
.st-person.on{box-shadow:inset 0 0 0 1.5px var(--accent)}
.st-person.on>span:last-child{color:var(--accent-ink)}
.avatar.plus{width:56px;height:56px;background:var(--pill);color:var(--light);font:500 26px/1 Figtree,sans-serif}
.st-edit,.st-danger{display:flex;flex-direction:column;gap:12px;padding:18px 20px}
.st-edit input{height:44px;padding:0 14px;border-radius:12px;background:var(--raised);border:1px solid var(--line);color:var(--text);font:600 15px/1 Figtree,sans-serif;outline:0;max-width:340px}
.st-danger span{font:500 13px/1.4 Figtree,sans-serif;color:var(--meta)}
.st-body .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill.danger,.st-link.danger{color:var(--live-ink)}
.st-link{font:600 14px/1 Figtree,sans-serif;padding:10px 4px}
@media (max-width:1023px){.st{grid-template-columns:220px minmax(0,1fr)}.st-nav{padding-left:24px}.st-body{padding:28px 28px 80px}}
@media (max-width:699px){
  .st{display:block}
  .st-nav{position:static;height:auto;border-right:0;padding:16px var(--gutter) 0;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
  .st-me{display:none}
  .st-nav>button{flex:none;padding:9px 13px;border-radius:999px;background:var(--surface);font-size:13px}
  .st-body{padding:16px var(--gutter) 100px}
  .st-row{flex-wrap:wrap;gap:12px;padding:16px}
  .st-row .seg{width:100%}
}
.st .avatar,.st-person .avatar{display:grid;place-items:center;flex:none;color:#0D0E10;font:800 20px/1 Figtree,sans-serif;border-radius:50%}
.st-person .avatar{font-size:24px}

/* ---- Cast (20a) and Share (20b–d) ---- */
.w-share{display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:999px;background:var(--pill);font:600 13px/1 Figtree,sans-serif;margin-left:10px}
.w-share svg.i{width:16px;height:16px}
.watch.overlay .w-share{background:rgba(13,14,16,.72)}
.cs-scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px}
.cs{width:min(560px,100%);padding:22px;border-radius:var(--r-panel);background:var(--panel);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:14px}
.cs-h{display:flex;align-items:center;gap:12px}
.cs-h b{font:800 24px/1 Figtree,sans-serif}
.cs-h span{flex:1;font:500 13px/1 Figtree,sans-serif;color:var(--meta);text-align:right}
.cs-h .x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:none}
.cs-dev{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-row);background:var(--surface)}
.cs-dev svg.i{width:22px;height:22px;flex:none;color:var(--light)}
.cs-dev.on{box-shadow:inset 0 0 0 1.5px var(--accent)}
.cs-dev.off{opacity:.8}
.cs-dev .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cs-dev b{font:700 15px/1.2 Figtree,sans-serif}
.cs-dev .b span{font:500 12px/1.35 Figtree,sans-serif;color:var(--meta)}
.cs-tag{font:700 12px/1 Figtree,sans-serif;color:var(--accent-ink)}
.cs-q{display:flex;align-items:center;gap:12px;font:600 14px/1 Figtree,sans-serif;color:var(--light)}
.cs-q select{flex:1;padding:10px 12px;border-radius:12px;background:var(--raised);border:1px solid var(--line);color:var(--text);font:600 13px/1 Figtree,sans-serif}
.cs-acts{display:flex;gap:8px;flex-wrap:wrap}
.cs-note{margin:0;font:500 12px/1.5 Figtree,sans-serif;color:var(--meta)}
.cs-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface)}
.cs-tabs button{flex:1;padding:11px;border-radius:999px;font:600 15px/1 Figtree,sans-serif;color:var(--muted)}
.cs-tabs button.on{background:var(--text);color:var(--bg);font-weight:700}
.cs-card{display:flex;align-items:center;gap:16px;padding:12px;border-radius:var(--r-card);background:var(--surface)}
.cs-art{width:150px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#26272C;flex:none;display:grid;place-items:center}
.cs-art img{width:100%;height:100%;object-fit:cover}
.cs-card .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cs-card b{font:800 18px/1.2 Figtree,sans-serif}
.cs-card .b span{font:500 13px/1.3 Figtree,sans-serif;color:var(--muted)}
.cs-row{display:flex;align-items:center;justify-content:space-between;padding:4px 2px}
.cs-row b{font:700 16px/1 Figtree,sans-serif}
.cs-link{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:var(--r-row);background:var(--surface);border:1px solid var(--line)}
.cs-link code{flex:1;min-width:0;font:500 14px/1.2 ui-monospace,Consolas,monospace;color:var(--light)}
@media (max-width:699px){.w-share span{display:none}.w-share{padding:9px}.cs-art{width:96px}}
.cs-art.logo img{object-fit:contain;padding:10px}

/* ---- Fight card (16a/c/e) and race results (16b/d/f) ---- */
.ev-tabs{align-items:center;flex-wrap:wrap}
.ev-note{margin-left:auto;font:500 13px/1 Figtree,sans-serif;color:var(--meta)}
.ev-tabs .ev-note+.x{margin-left:8px}
.ev-bout{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:var(--r-row);background:var(--surface)}
.ev-bout.live{box-shadow:inset 0 0 0 1.5px var(--live)}
.ev-top{display:flex;align-items:center;gap:12px}
.ev-lbl{flex:1;font:800 11px/1 Figtree,sans-serif;letter-spacing:.08em;color:var(--meta)}
.ev-st{font:700 12px/1 Figtree,sans-serif;color:var(--muted);white-space:nowrap}
.ev-st.live{color:var(--live-ink)}
.ev-vs{display:flex;align-items:center;gap:10px}
.ev-vs i{font:500 12px/1 Figtree,sans-serif;font-style:normal;color:var(--disabled)}
.ev-f{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ev-f.r{text-align:right;align-items:flex-end}
.ev-f b{font:700 15px/1.2 Figtree,sans-serif;max-width:100%}
.ev-f span{font:500 12px/1 Figtree,sans-serif;color:var(--meta);font-variant-numeric:tabular-nums}
.ev-f.dim b{color:var(--meta)}
.ev-res{font:600 13px/1.3 Figtree,sans-serif;color:var(--light)}
.ev-hide{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:10px;background:var(--raised);font:500 13px/1 Figtree,sans-serif;color:var(--meta)}
.ev-hide button{font:700 13px/1 Figtree,sans-serif;color:var(--accent-ink)}
.ev-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 8px;text-align:center}
.ev-empty b{font:800 20px/1.2 Figtree,sans-serif}
.ev-empty span{font:500 14px/1.4 Figtree,sans-serif;color:var(--muted)}
.ev-empty .acts{margin-top:8px}
.ev-note2{font:500 12px/1 Figtree,sans-serif;color:var(--meta)}
.ev-drv{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:10px}
.ev-drv.lead{background:rgba(255,255,255,.06)}
.ev-drv .pos{width:22px;text-align:right;font:800 15px/1 Figtree,sans-serif;font-variant-numeric:tabular-nums}
.ev-flag{width:22px;height:15px;border-radius:3px;object-fit:cover;flex:none;background:#2A2C31}
.ev-drv b{flex:1;font:700 15px/1.2 Figtree,sans-serif}
.ev-list{display:flex;flex-direction:column;gap:2px}
.ev-drv{padding:8px}
.offline-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,214,10,.12);color:var(--warn);font:700 12px/1 Figtree,sans-serif}
.empty-state .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.nav a{white-space:nowrap}
@media (max-width:1100px) and (min-width:700px){button.searchbox{width:40px;padding:0;justify-content:center;border-radius:50%}button.searchbox .ph,button.searchbox .kbd{display:none}.topbar{gap:20px}}
.mvt-pop .row .n em{display:block;font:500 11px/1.2 Figtree,sans-serif;font-style:normal;color:var(--meta);margin-top:3px}
.ph-title{display:none}
/* Phone header (4a / 13a / 15a): the section title replaces the logo bar; Search is a tab, so no search icon. */
@media (max-width:699px){
  .topbar{height:auto;padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:10px;border-bottom:0}
  .topbar .logo{display:none}
  .ph-title{display:block;font:800 30px/1.1 Figtree,sans-serif;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .topbar .search-icon{display:none}
  .sp-row>.h1,.lt-page>.h1,.m-page>.h1,.st-body>.h1{display:none}
  .topbar.over .ph-title{text-shadow:0 2px 12px rgba(0,0,0,.6)}
}
.ph-eye{display:none}
@media (max-width:699px){.ph-eye{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--light)}.scores-toggle{display:none!important}}
.mv-sheet.src{padding:12px 12px calc(16px + env(safe-area-inset-bottom));max-height:75vh}
.mv-sheet.src .mvt-pop{position:static;transform:none;width:auto;max-height:none;box-shadow:none;border:0;background:none;padding:0}
.mv-sheet.src .mvt-pop .rows{max-height:52vh}
@media (max-width:699px){.page>.sp-head:first-child{margin-top:-14px}}

/* ---- Scroll arrows for rows that don't fit (seasons, episodes) ---- */
.hsw{position:relative;min-width:0;display:flex}
.hsw>.hs-track{min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.hsw>.hs-track::-webkit-scrollbar{display:none}
.hs-btn{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(30,31,35,.94);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.5);font:700 20px/1 Figtree,sans-serif;color:var(--text);place-items:center;padding-bottom:2px}
.hs-btn.l{left:-6px}.hs-btn.r{right:-6px}
.hsw.of .hs-btn{display:grid}
.hsw.of.at-start .hs-btn.l,.hsw.of.at-end .hs-btn.r{display:none}
.vep-rw .hs-btn{top:calc(50% - 22px);width:44px;height:44px;font-size:26px}
.vep-rw .hs-btn.l{left:-14px}.vep-rw .hs-btn.r{right:-14px}
.vep-sw{flex:0 1 auto}
.seasons-w{flex:0 1 auto;min-width:0;margin-left:16px}
.seasons-w .seg{overflow-x:auto}
/* ---- Library ---- */
.lib-tabs{align-self:flex-start;margin:4px 0 22px}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.lib-card{display:flex;flex-direction:column;gap:10px}
.lib-card .wc{width:auto}
.lib-acts{display:flex;flex-wrap:wrap;gap:6px}
.lib-acts .pill{padding:8px 12px;font-size:13px}
.lib-confirm{margin-top:24px;display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:var(--r-card);background:var(--surface);max-width:560px}
.lib-confirm span{font:500 13px/1.45 Figtree,sans-serif;color:var(--meta)}
.lib-confirm .acts{display:flex;gap:8px;margin-top:6px}
.lib .st-link{margin-top:20px;display:inline-block}
.lib-poster{position:relative}
.lib-x,.wc-x{position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(13,14,16,.78);color:var(--text);opacity:0;transition:opacity var(--fast) var(--ease)}
.lib-x svg.i,.wc-x svg.i{width:15px;height:15px}
.lib-poster:hover .lib-x,.wc:hover .wc-x,.lib-x:focus-visible,.wc-x:focus-visible{opacity:1}
@media (hover:none){.lib-x,.wc-x{opacity:1}}
.lib-rows{display:flex;flex-direction:column;gap:8px;max-width:760px}
.lib-row{display:flex;align-items:center;gap:14px;padding:10px;border-radius:var(--r-row);background:var(--surface)}
.lib-thumb{width:44px;height:64px;border-radius:8px;overflow:hidden;background:#26272C;flex:none}
.lib-thumb img{width:100%;height:100%;object-fit:cover}
.lib-row .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.lib-row b{font:700 15px/1.2 Figtree,sans-serif}
.lib-row .b span{font:500 12px/1 Figtree,sans-serif;color:var(--meta)}
.ep-art{position:relative}
.ep-check{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(13,14,16,.72);color:var(--light);opacity:0;transition:opacity var(--fast) var(--ease)}
.ep-check svg.i{width:16px;height:16px}
.ep:hover .ep-check,.ep-check.on,.ep-check:focus-visible{opacity:1}
.ep-check.on{background:var(--accent);color:var(--bg)}
@media (hover:none){.ep-check{opacity:1}}

/* ---- Volume (Sound button + slider) ---- */
.vol{position:relative;display:inline-flex;align-items:center;gap:0;border-radius:999px}
/* The slider floats above the Sound button: hovering never changes the row's width (no re-wrapping). */
.vol-pop{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);z-index:30;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(28,29,33,.96);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease)}
.vol-pop::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.vol-pop em{font:700 12px/1 Figtree,sans-serif;font-style:normal;color:var(--light);min-width:24px;text-align:right;font-variant-numeric:tabular-nums}
.vol:hover .vol-pop,.vol:has(:focus-visible) .vol-pop{opacity:1;pointer-events:auto;transform:translateX(-50%)}
/* In top bars (Multiview) the slider opens downward so it stays on screen. */
.mv-top .vol-pop{bottom:auto;top:calc(100% + 8px);transform:translateX(-50%) translateY(-4px)}
.mv-top .vol-pop::after{top:auto;bottom:100%}
.vol .vol-r{width:120px;margin:0}
.vol-r{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--text) var(--v,100%),rgba(255,255,255,.25) var(--v,100%));cursor:pointer}
.vol-r::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.vol-r::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--text)}
.mv-vol{display:inline-flex;align-items:center;gap:4px;max-width:340px}
.mv-vol .pill.mv-tb{background:none;padding:9px 12px}
.mv-who{font:600 13px/1 Figtree,sans-serif;color:var(--light);max-width:150px}
/* A narrow top bar (drawer open, small windows): the sound tile's name gives way first; the buttons keep their words. */
.mv-top>.mv-tb,.mv-top>.mv-round,.mv-top>.mv-title{flex:none}
.mv-top>.mv-vol{min-width:0;flex:0 1 auto}
.mv-vol .mv-who{min-width:0}
@media (hover:none){.vol .vol-pop{position:static;transform:none;opacity:1;pointer-events:auto;padding:0 0 0 10px;background:none;border:0;box-shadow:none}.vol .vol-pop em{display:none}.vol .vol-r{width:84px}}
@media (max-width:699px){.vol .vol-l{display:none}}

/* replay parts + artwork cards */
.rp-row.main{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.rp-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.rp-parts button{height:38px;border-radius:10px;background:var(--surface);font:700 13px/1 Figtree,sans-serif;color:var(--light)}
.rp-parts button:hover{background:var(--raised)}
.rp-parts button.part{box-shadow:inset 0 -3px 0 var(--accent)}
.rp-parts button.done{color:var(--meta);background:rgba(255,255,255,.04)}
.rp-parts button.on{background:var(--text);color:var(--bg)}
.rp-art{position:relative}
.rp-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp-art img+.kicker,.rp-art img~.btitle{text-shadow:0 2px 10px rgba(0,0,0,.85)}
.rp-art::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(13,14,16,.88) 0%,rgba(13,14,16,.15) 60%,rgba(13,14,16,.35) 100%);pointer-events:none}
.rp-art:not(:has(img))::before{display:none}
.rp-art .kicker,.rp-art .btitle{position:relative;z-index:2}

/* Multiview: resize divider (focus layouts) and the action bar only lifts while the dock shows */
.mv-split{position:absolute;z-index:5;width:16px;cursor:col-resize;display:grid;place-items:center;touch-action:none}
.mv-split i{width:4px;height:56px;border-radius:2px;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.4);transition:opacity var(--base) var(--ease),height var(--base) var(--ease)}
.mv-split:hover i,.mv-split.on i{height:96px;background:var(--text)}
.mv.idle .mv-split i{opacity:0}
.mv.idle .mvt.low .mvt-acts{bottom:20px}

/* event posters (streamed/ppv) behind the banner title */
.art-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-banner::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(13,14,16,.9) 0%,rgba(13,14,16,.25) 55%,rgba(13,14,16,.45) 100%);pointer-events:none}
.art-banner .kicker,.art-banner .btitle,.art-banner .live-badge{position:relative;z-index:2}
.art-banner .live-badge{position:absolute}
.art-banner .btitle{text-shadow:0 2px 12px rgba(0,0,0,.8)}
.lib .st-link{align-self:flex-start}
.lib-tabs button{padding:10px 16px;font-size:14px}

/* Phone: Watch pills wrap (no sideways scrolling); shelves are vertical rows; no visible scrollbars on day tabs / chips */
@media (max-width:699px){
  .w-pills{flex-wrap:wrap;overflow:visible;margin:0;padding:0;gap:8px}
  .w-pills .pill{padding:9px 13px;font-size:13px}
  .w-pills .vol .vol-pop{position:static;transform:none;opacity:1;pointer-events:auto;padding:0 0 0 8px;background:none;border:0;box-shadow:none}.w-pills .vol .vol-pop em{display:none}.w-pills .vol .vol-r{width:72px}
  .sp-row .seg,.chips,.seg{scrollbar-width:none}
  .sp-row .seg::-webkit-scrollbar,.chips::-webkit-scrollbar,.seg::-webkit-scrollbar{display:none}
  .rows-phone .gr{width:100%}
}
.half b.lg{font:800 10px/1.15 Figtree,sans-serif;letter-spacing:.06em;text-align:center;padding:0 6px;max-width:100%;overflow-wrap:anywhere}
.row-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;z-index:1}
.row-poster img~b{visibility:hidden}
.row-poster::before{display:none}

/* Game card menu (Watch · Add to Multiview · Remind me) and the card's + Multiview button */
.gm-scrim{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.5);display:grid;place-items:center;padding:16px}
.gm{width:min(420px,100%);padding:16px;border-radius:var(--r-panel);background:var(--panel);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:8px}
.gm-h{display:flex;align-items:flex-start;gap:12px;padding:4px 4px 8px}
.gm-h .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.gm-h b{font:800 18px/1.2 Figtree,sans-serif}
.gm-h .b>span{font:500 13px/1.3 Figtree,sans-serif;color:var(--meta)}
.gm-h .x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:none}
.gm-opt{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--r-row);background:var(--surface);text-align:left}
.gm-opt:hover,.gm-opt:focus-visible{background:var(--raised)}
.gm-opt b{font:700 15px/1.2 Figtree,sans-serif}
.gm-opt span{font:500 12px/1.3 Figtree,sans-serif;color:var(--meta)}
.gm-opt.accent b{color:var(--accent-ink)}
.gc-add{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(13,14,16,.78);color:var(--text);opacity:0;transition:opacity var(--fast) var(--ease)}
.gc-add svg.i{width:16px;height:16px}
.gc:hover .gc-add,.gc:focus-visible .gc-add{opacity:1}
.gc-add:hover{background:var(--accent);color:var(--bg)}
@media (hover:none){.gc-add{opacity:1}}
@media (max-width:699px){.gm-scrim{place-items:end center;padding:0}.gm{border-radius:22px 22px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}}

.rp-hit{font:500 12px/1.35 Figtree,sans-serif;color:var(--light);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rp-hit mark{background:rgba(154,143,220,.28);color:var(--text);border-radius:4px;padding:0 2px}
.rp-hit em{font-style:normal;color:var(--meta)}
.rp-date{display:flex;align-items:center;gap:8px;height:46px;padding:0 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--meta);margin-left:10px}
.rp-date input{background:none;border:0;outline:0;color:var(--text);font:600 14px/1 Figtree,sans-serif;color-scheme:dark}
@media (max-width:699px){.rp-date{order:4;margin:10px 0 0;height:40px}}
@media (max-width:699px){
  .watch.vplayer .w-controls,.watch.rp-player .w-controls{left:var(--gutter)!important;right:var(--gutter)!important}
  .watch.vplayer .w-panel,.watch.rp-player .w-panel{width:auto!important;left:0!important;right:0!important}
  .vplayer .vep-shelf{margin-right:0}
}
.rp-c-art .wc-x{z-index:3}
.rp-c:hover .wc-x,.rp-c:focus-visible .wc-x{opacity:1}
.rp-clear{display:flex;align-items:center;gap:8px;font:500 13px/1 Figtree,sans-serif;color:var(--muted)}
.rp-clear .pill{padding:8px 13px;font-size:13px}

/* Tennis scores panel */
.tn-head{display:flex;align-items:center;gap:10px;font:600 13px/1 Figtree,sans-serif;color:var(--muted)}
.tn-st{margin-left:auto;color:var(--light)}
.tn-row{display:flex;align-items:center;gap:6px;padding:4px 0}
.tn-p{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.tn-p img{width:24px;height:16px;border-radius:3px;object-fit:cover;flex:none}
.tn-p b{font:700 16px/1.2 Figtree,sans-serif}
.tn-row.win .tn-p b{color:var(--text)}
.tn-row:not(.win) .tn-p b{color:var(--light)}
.tn-s{width:30px;text-align:center;font:700 18px/1 Figtree,sans-serif;color:var(--meta);font-variant-numeric:tabular-nums}
.tn-s.w{color:var(--text)}
.tn-s sup{font-size:10px;margin-left:1px}
.tn-sets .tn-s{font:600 11px/1 Figtree,sans-serif;color:var(--meta)}
.dg.auto{width:auto;padding:0 12px}
.dg-auto{font:800 12px/1 Figtree,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.dg.eff{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-ink)}
.mvt-v{transition:none}
.sub-chips{display:flex;flex-wrap:wrap;gap:6px}
.sub-chip{padding:8px 12px;border-radius:999px;background:var(--surface);font:600 13px/1 Figtree,sans-serif;color:var(--light)}
.sub-chip:hover{background:var(--raised)}
.sub-chip.on{background:var(--text);color:var(--bg);font-weight:700}
.sub-chip.more{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--accent-ink)}
.srow.sm{padding:10px 12px}
.sub-style{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 14px;border-radius:var(--r-row);background:var(--surface);font:600 14px/1 Figtree,sans-serif;text-align:left}
.sub-style span{color:var(--meta)}

/* Phone turned sideways: Watch is theater (overlay) like a big screen, scaled down so the picture stays the point */
@media (orientation:landscape) and (max-height:520px){
  .watch.overlay .w-top{left:16px;top:12px}
  .watch.overlay .w-controls{left:16px;bottom:12px;right:calc(320px + 28px)}
  .watch.overlay.nopanel .w-controls{right:16px}
  .watch.overlay .w-heading{gap:4px}
  .watch.overlay .w-heading .k{font-size:12px}
  .watch.overlay .w-heading .t{font-size:20px;line-height:1.15}
  .watch.overlay .w-pills{gap:6px}
  .watch.overlay .w-pills .pill{padding:7px 12px;font-size:12px}
  .watch.overlay .w-panel{right:12px;top:12px;bottom:12px;width:320px}
}
/* Multiview tiles: the title is in the chip; a second, faded copy under the state message only made noise */
.mvt-bg>b{display:none}
/* Phone turned sideways: Multiview keeps the desktop grid (theater), with a compact bar and dock */
@media (orientation:landscape) and (max-height:520px){
  .mv-top{top:8px;padding:4px;gap:4px}
  .mv-tb{padding:7px 10px;font-size:12px;max-width:170px}
  .mv-tb[data-act="mvfs"]{display:flex}
  .mv-dock{bottom:8px;padding:4px;gap:2px;max-width:calc(100% - var(--dw) - 16px);overflow-x:auto;scrollbar-width:none}
  .mv-dock .dg{width:36px;height:28px;flex:none}
  .mv-dock .dg.auto{width:auto;padding:0 8px}
  .mvt-state{gap:6px;padding:8px}
  .mvt-state b{font-size:13px}
  .mvt-state>span:not(.spin){font-size:11px}
  .mvt-state .pill{padding:6px 10px;font-size:12px}
}

/* Multiview on a phone: sideways drags reach the swipe handler, long-press doesn't select text or open the callout */
@media (max-width:699px){
  .mv .mvt{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .mv .mvt video{pointer-events:none}
  .mv-sheet button{min-height:48px}
}

/* Small tiles (any screen): a short state message that fits, no buttons (tap the tile for options) */
@container (max-width:260px){
  .mvt-state{gap:4px;padding:6px}
  .mvt-state b{font-size:11px;line-height:1.2}
  .mvt-state>span:not(.spin){display:none}
  .mvt-state .acts{display:none}
}
/* Phone sideways: the full-tile bar fits on one line; the top bar drops the inline slider (the phone's buttons do volume) */
@media (orientation:landscape) and (max-height:520px){
  .mv-fbar{left:12px;right:12px;bottom:10px;gap:6px;flex-wrap:nowrap;overflow:hidden}
  .mv-fbar .pill{padding:7px 11px;font-size:12px;flex:none}
  .mv-fbar .pill[data-act="mvsrcpop"]{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
  .mv-ftop{top:10px;left:12px}
  .mv-ftitle{font-size:16px}
  .mv-top .vol-pop{display:none}
  .mv-top .mv-who{display:none}
}
/* Phone turned sideways (pages): a slimmer top bar and tighter headings so content starts on the first screen */
@media (orientation:landscape) and (max-height:520px){
  :root{--bar:52px;--gutter:20px}
  .topbar{gap:20px}
  .page{padding-top:16px;gap:24px}
  .h1{font-size:26px}
  .mhero-copy .t{font-size:36px}
  .lt-pv-info .t{font-size:26px}
}

/* Grid on a touch screen: a held tile can be dragged (no page panning under it); the lifted tile shows it's moving */
@media (pointer:coarse){ .mv:not(.phone) .mvt{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} }
.mv:not(.phone) .mvt.dragging{opacity:.55;outline:2px dashed rgba(255,255,255,.5);outline-offset:-2px}

/* The drop label is click-through: it must not become the thing under the pointer (that made the highlight flicker) */
.mvt.drop .mvt-v::before{pointer-events:none}

/* A Watch video playing in its picture-in-picture window while you browse waits here, off the page */
.pip-hold{position:fixed;left:-4px;top:-4px;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none}
/* Key moments of a game LAVA records (moments.js): marks on the rewind bar and the panel list. */
.w-mark{position:absolute;top:-17px;width:12px;height:12px;margin-left:-6px;border-radius:50%;border:2px solid var(--accent);background:var(--bg);cursor:pointer;z-index:1}
.w-mark::after{content:"";position:absolute;inset:-9px}
.w-mark.period{top:-14px;width:8px;height:8px;margin-left:-4px;border-color:var(--muted)}
.w-mark:hover{background:var(--accent)}
.w-moments{padding:18px;display:flex;flex-direction:column;gap:4px}
.w-moments h3{margin:0 0 8px;font:800 17px/1.2 Figtree,sans-serif}
.w-moments .note{margin:6px 0 0;font:500 13px/1.45 Figtree,sans-serif;color:var(--muted)}
.w-moments .mrow{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:10px 12px;border-radius:12px;text-align:left;color:var(--text);font:600 14px/1.35 Figtree,sans-serif}
.w-moments .mrow:hover{background:rgba(255,255,255,.06)}
.w-moments .mrow .ic{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--accent)}
.w-moments .mrow.period{color:var(--muted);font-weight:500}
.w-moments .mrow.period .ic{width:8px;height:8px;border-color:var(--muted);margin:0 2px}
/* Tennis: a set is a filled mark, a break the usual ring */
.w-mark.set,.w-moments .mrow.set .ic{background:var(--accent)}
.w-mark.set:hover{background:var(--text);border-color:var(--text)}
/* Whole-game timeline of a recorded game: the playable window, moments outside it (clips), the clip box. */
.w-bar.w-game{height:6px;border-radius:3px}
.w-bar.w-game i{background:rgba(245,245,247,.3)}
.w-bar.w-game s{position:absolute;top:-1px;bottom:-1px;background:var(--accent);border-radius:3px;text-decoration:none;z-index:1}
.w-bar.w-game b{z-index:2}
.w-bar.w-game .w-mark{z-index:3}
.w-mark.off{opacity:.35;cursor:default}
.w-moments .mrow .tag{margin-left:auto;flex:none;font:700 12px/1 Figtree,sans-serif;color:var(--accent-ink)}
.w-moments .mrow.off{opacity:.45;cursor:default}
.w-moments .note.small{font-size:12px;margin-top:10px}
.w-clipbox{position:absolute;right:14px;bottom:14px;width:min(42%,420px);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);z-index:4}
.w-clipbox video{width:100%;height:100%;object-fit:contain;display:block}
.w-clipbox .hd{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:6px;padding:8px;background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,0));z-index:1}
.w-clipbox .hd .t{flex:1;min-width:0;font:700 12px/1.3 Figtree,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-clipbox .b{flex:none;width:32px;height:32px;border-radius:16px;background:rgba(13,14,16,.8);color:var(--text);display:grid;place-items:center}
.w-clipbox .b svg{width:16px;height:16px}
.w-clipbox:fullscreen{width:100%;border-radius:0;border:0}
/* Multiview Moments drawer (multiview.js renderMoments): clip on top, moments of every recorded tile below. */
.mv-drawer.moments{display:flex;flex-direction:column;overflow:hidden}
.mv-drawer.moments .mv-dh{display:flex;align-items:center;gap:8px;padding:16px 16px 10px}
.mv-drawer.moments .mv-dh b{flex:1;font:800 17px/1.2 Figtree,sans-serif}
.mv-drawer.moments .mv-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.mv-drawer.moments .mv-chips:empty,.mv-drawer.moments .mv-clip:empty{display:none}
.mv-drawer.moments .mv-clip{padding:0 16px 10px}
.mv-drawer.moments .mv-clip .w-clipbox{position:relative;right:auto;bottom:auto;width:100%}
/* Scores · Goals (design "Scores with goal replays"): scorer rows with Replay; the clip plays at the top of the panel */
.sclip:empty{display:none}
.sclip .w-clipbox{position:relative;right:auto;bottom:auto;width:100%;aspect-ratio:auto;box-shadow:none;background:none;border:0;overflow:visible}
.sclip .w-clipbox video{aspect-ratio:16/9;height:auto;border-radius:12px;background:#000}
.sclip .w-clipbox .hd{border-radius:12px 12px 0 0}
.w-clipbox .cnote{margin:8px 2px 0;font:500 12px/1.4 Figtree,sans-serif;color:var(--meta)}
.goals{display:flex;flex-direction:column;gap:4px}
.goalrow{display:flex;align-items:center;gap:12px;padding:8px 4px;border-radius:12px}
.goalrow .ph{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:end center}
.goalrow .ph img{width:100%;height:100%;object-fit:cover;object-position:top}
.goalrow .gx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.goalrow .gx b{font:700 14px/1.3 Figtree,sans-serif}
.goalrow .gx span{font:600 12px/1.3 Figtree,sans-serif;color:var(--soft);font-variant-numeric:tabular-nums}
.goalrow .gx small{font:500 12px/1.35 Figtree,sans-serif;color:var(--meta)}
.goalrow .pill.sm{flex:none;height:32px;padding:0 12px;gap:6px;font:700 12px/1 Figtree,sans-serif}
.goalrow .pill.sm svg{width:12px;height:12px}
.mv-drawer.moments .mv-mlist{flex:1;overflow:auto;padding:0 8px 16px}
.mv-drawer.moments .mrow small{display:block;font:600 11px/1.3 Figtree,sans-serif;color:var(--muted)}
/* A goal with a LAVA moment: its play button sits in a fourth column of the scoring row. */
.play:has(.playmoment){grid-template-columns:64px minmax(0,1fr) auto 32px;align-items:center}
.playmoment{width:32px;height:32px;border-radius:16px;background:rgba(154,143,220,.18);color:var(--accent-ink);display:grid;place-items:center}
.playmoment:hover{background:var(--accent);color:var(--bg)}
.playmoment svg{width:14px;height:14px}

/* ---- After the game (summary.js, design board "Summary") ---- */
.summary{max-width:1120px;margin:0 auto;padding:28px var(--gutter) 64px;display:flex;flex-direction:column;gap:22px}
.summary>.w-back{align-self:flex-start;position:static}
.sm-head{display:flex;gap:32px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.sm-left{display:flex;flex-direction:column;gap:12px;min-width:0}
.sm-kick{font:800 12px/1 Figtree,sans-serif;letter-spacing:.08em;color:var(--meta)}
.sm-score{display:flex;align-items:center;gap:14px}
.sm-logo{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;overflow:hidden;font:800 13px/1 Figtree,sans-serif;flex:none}
.sm-logo img{width:72%;height:72%;object-fit:contain}
.sm-ab{font:800 15px/1 Figtree,sans-serif;color:var(--soft)}
.sm-num{font:800 44px/1 Figtree,sans-serif;font-variant-numeric:tabular-nums}
.sm-at{font:600 14px/1 Figtree,sans-serif;color:var(--meta)}
.sm-sub{font:500 14px/1.4 Figtree,sans-serif;color:var(--soft)}
.sm-right{display:flex;flex-direction:column;gap:10px;width:min(100%,320px)}
.pill.wide{width:100%;justify-content:center;height:44px}
.pill.wide[disabled]{opacity:.6;cursor:default}
.spin.sm{width:14px;height:14px;border-width:2px}
.sm-alt{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;color:var(--soft);font:600 13px/1.3 Figtree,sans-serif;min-width:0}
.sm-alt:hover{background:rgba(255,255,255,.06);color:var(--text)}
.sm-alt svg{width:12px;height:12px;flex:none}
.sm-note{margin:0;font:500 12px/1.4 Figtree,sans-serif;color:var(--meta);text-align:center}
.sm-h{margin:8px 0 0}
.sm-goals{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.sm-goal{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:var(--panel);border:1px solid var(--line);min-width:0}
.sm-frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden}
/* ESPN headshots are wide transparent PNGs: centred, standing on the bottom edge */
.sm-frame img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;width:auto;max-width:none}
.sm-frame img.crest{top:50%;bottom:auto;height:58%;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
.sm-meta{display:flex;align-items:center;gap:6px;font:600 12px/1.3 Figtree,sans-serif;color:var(--soft);font-variant-numeric:tabular-nums}
.sm-meta .dot{width:7px;height:7px;flex:none}
.sm-goal b{font:700 15px/1.3 Figtree,sans-serif}
.sm-goal small{font:500 12px/1.35 Figtree,sans-serif;color:var(--meta)}
.sm-box{padding:16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);max-width:560px}
.sm-box h3{margin:0 0 10px;font:800 14px/1 Figtree,sans-serif}
.sm-lines{display:grid;gap:8px 6px;font:600 13px/1 Figtree,sans-serif;color:var(--soft);text-align:center;font-variant-numeric:tabular-nums}
.sm-lines .t{text-align:left;color:var(--text);font-weight:800}
.sm-lines b{color:var(--text)}
@media (max-width:700px){.sm-head{flex-direction:column}.sm-right{width:100%}.sm-num{font-size:36px}}
button.sm-goal{text-align:left;color:inherit;cursor:pointer;transition:border-color var(--base) var(--ease)}
button.sm-goal:hover{border-color:rgba(255,255,255,.28)}
.sm-frame img.still{left:0;top:0;transform:none;width:100%;height:100%;object-fit:cover}
.sm-dur{position:absolute;right:8px;bottom:8px;padding:3px 6px;border-radius:6px;background:rgba(0,0,0,.72);font:800 11px/1 Figtree,sans-serif;font-variant-numeric:tabular-nums}
.sm-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:rgba(13,14,16,.7);display:grid;place-items:center;opacity:.9}
.sm-play svg{width:16px;height:16px}
button.sm-goal:hover .sm-play{background:var(--accent);color:var(--bg)}
/* A moment row's frame from the NHL's clip of it (Watch, Multiview), and a Scores goal row's */
.w-moments .mrow .thumb{position:relative;flex:none;width:72px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.w-moments .mrow .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.w-moments .mrow .thumb em,.goalrow .ph.still em{position:absolute;right:3px;bottom:3px;padding:1px 4px;border-radius:4px;background:rgba(0,0,0,.75);font:800 9px/1.3 Figtree,sans-serif;font-style:normal;color:#fff}
.goalrow .ph.still{position:relative;width:78px;height:auto;aspect-ratio:16/9;border-radius:8px}
.goalrow .ph.still img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Tile bars hide with the other controls when Multiview goes idle (fullscreen too); hovering a tile brings its bar back */
.mvt-tl{transition:opacity var(--base) var(--ease)}
.mv.idle .mvt:not(:hover) .mvt-tl,.mv.idle .mvt:not(:hover) .mvt-replaying{opacity:0;pointer-events:none}
/* ---- Timeline marks, take 2 (owner, 2026-10-23): team badges for goals, ticks for periods, a card on hover ---- */
.w-bar .w-mark{top:-20px;width:18px;height:18px;margin-left:-9px;border-radius:50%;border:2px solid var(--mc,var(--accent));background:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.45);transition:transform var(--base) var(--ease)}
.w-bar .w-mark:not(.team){background:var(--mc,var(--accent))}
.w-bar .w-mark .lg{width:13px;height:13px;object-fit:contain;pointer-events:none}
.w-bar .w-mark:hover{transform:scale(1.25);background:#fff}
.w-bar .w-mark:not(.team):hover{background:var(--text)}
.w-bar .w-mark.period{top:-9px;width:2px;height:22px;margin-left:-1px;border:0;border-radius:1px;background:rgba(255,255,255,.55);box-shadow:none}
.w-bar .w-mark.period:hover{transform:none;background:var(--text)}
.w-bar .w-mark.set{background:var(--accent);border-color:var(--accent)}
.w-bar .w-mark.off{opacity:.45}
.w-mark .tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);display:none;flex-direction:column;gap:4px;width:max-content;max-width:220px;padding:6px;border-radius:10px;background:rgba(18,19,22,.96);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.5);pointer-events:none;z-index:6;text-align:left}
.w-mark .tip img{width:208px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block}
.w-mark .tip .tt{font:700 12px/1.3 Figtree,sans-serif;color:var(--text);white-space:normal;max-width:208px}
.w-mark .tip .tg{font:800 10px/1 Figtree,sans-serif;color:var(--accent-ink);letter-spacing:.04em;text-transform:uppercase}
.w-mark:hover .tip{display:flex}
/* Small Multiview tiles: slimmer badges */
.mvt-tl .w-bar .w-mark{width:14px;height:14px;margin-left:-7px;top:-16px}
.mvt-tl .w-bar .w-mark .lg{width:10px;height:10px}
.mvt-tl .w-bar .w-mark.period{top:-7px;height:18px;width:2px;margin-left:-1px}
/* Clip box controls (seek, ±5 s, time) and a Multiview tile's Go live */
.w-clipbox .cc{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:8px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.75));z-index:1}
.w-clipbox .b.sm{width:auto;height:26px;padding:0 8px;border-radius:13px;font:800 11px/1 Figtree,sans-serif}
.w-clipbox .cbar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.25);position:relative;cursor:pointer}
.w-clipbox .cbar::after{content:"";position:absolute;inset:-8px 0}
.w-clipbox .cbar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--accent)}
.w-clipbox .ct{font:700 11px/1 Figtree,sans-serif;font-variant-numeric:tabular-nums;color:#fff;min-width:64px;text-align:right}
.sclip .w-clipbox .cc{position:static;background:none;padding:8px 2px 0}
.mvt-golive{position:absolute;right:12px;bottom:34px;z-index:4;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(13,14,16,.85);color:#fff;font:800 12px/1 Figtree,sans-serif;font-variant-numeric:tabular-nums}
.mvt-golive .dot{width:7px;height:7px;border-radius:50%;background:var(--live)}
.mvt-golive:hover{background:var(--live)}
.mvt-golive:hover .dot{background:#fff}
.mv.idle .mvt:not(:hover) .mvt-golive{opacity:.75}
/* UFC cards: each bout's start is a slim accent marker, a segment start (prelims, main card) a taller tick */
.w-bar .w-mark.fight{top:-14px;width:6px;height:16px;margin-left:-3px;border-radius:3px;border:0;background:var(--accent)}
.w-bar .w-mark.fight:hover{transform:scale(1.2);background:var(--text)}
.w-moments .mrow.fight .ic{border-radius:3px;width:6px;height:14px;background:var(--accent);border:0;margin:0 3px}
.w-bar .w-mark.finish{top:-10px;width:4px;height:10px;margin-left:-2px;border-radius:2px;border:0;background:rgba(255,255,255,.7)}
.w-bar .w-mark.finish:hover{transform:scale(1.2);background:var(--text)}
.w-moments .mrow.finish .ic{border-radius:2px;width:4px;height:10px;background:rgba(255,255,255,.7);border:0;margin:0 4px}
.w-bar .w-mark.rank{top:-12px;width:5px;height:12px;margin-left:-2.5px;border-radius:2px;border:0;background:#E8B931}
.w-bar .w-mark.rank:hover{transform:scale(1.2);background:var(--text)}
.w-moments .mrow.rank .ic{border-radius:2px;width:5px;height:12px;background:#E8B931;border:0;margin:0 4px}