:root {
  --bg: #080a0f;
  --panel: #10141c;
  --line: rgba(220, 231, 245, .095);
  --text: #f3f6fb;
  --mute: #919bad;
  --accent: #83aaff;
  --bad: #ff6277;
  --ok: #4fd6a0;
  --surface: #171d28;
  --header-height: 126px;
  color-scheme: dark;
}

* { scrollbar-color: #293243 transparent; scrollbar-width: thin; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: radial-gradient(ellipse at 53% -28%, rgba(55, 89, 150, .18), transparent 48%), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.012em;
}
button, input, select, textarea { font: inherit; }
button { transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid #91b7ff; outline-offset: 2px;
}

/* Broadcast header: brand, live state, then a one-row tool rail. */
.top {
  position: sticky; top: 0; z-index: 100;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  grid-template-areas: "brand status" "tools tools";
  gap: 10px 20px; align-items: center;
  min-height: var(--header-height); padding: 13px clamp(16px, 3vw, 44px) 11px;
  background: rgba(8, 10, 15, .91); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%);
}
.brand { grid-area: brand; min-width: 0; }
.brandrow { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 22px); min-width: 0; }
.top h1 { display: flex; align-items: center; gap: 9px; margin: 0; color: #f7f9fd; font-size: 16px; font-weight: 850; letter-spacing: .15em; white-space: nowrap; }
.brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px 9px 9px 3px; background: linear-gradient(145deg, #bbd1ff, #628df0 68%, #3d62bd); color: #08101d; font-size: 17px; font-style: italic; letter-spacing: -.08em; box-shadow: 0 5px 20px rgba(94, 139, 236, .26); }
.lgswitch { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); }
.lgswitch button { padding: 6px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--mute); font-size: 11px; font-weight: 700; letter-spacing: .035em; }
.lgswitch button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.lgswitch button.on { color: #07101d; background: #c6d8ff; box-shadow: 0 2px 10px rgba(101,147,240,.2); }
#aiBtn { padding: 7px 11px; border-radius: 999px; white-space: nowrap; }
.liveline { margin-top: 5px; padding-left: 40px; color: #a5afc0; font-size: 11px; }
.liveline b { color: #e9eef7; }
.liveline i { width: 6px; height: 6px; background: var(--ok); }
.mid { grid-area: status; display: flex; justify-content: flex-end; align-items: center; gap: 10px; color: #9aa5b8; font-size: 11px; text-align: right; }
.mid #updated { white-space: nowrap; }
.right { grid-area: tools; justify-self: stretch; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; min-width: 0; margin: 0 -2px; padding: 9px 2px 0; border-top: 1px solid var(--line); overflow-x: auto; overflow-y: visible; scrollbar-width: none; }
.right { scrollbar-color: rgba(131,170,255,.35) transparent; scrollbar-width: thin; }
.right::-webkit-scrollbar { display: block; height: 3px; }
.right::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(131,170,255,.32); }
.right > button, .right .ads > button { flex: 0 0 auto; padding: 7px 11px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #aab4c5; font-size: 11px; font-weight: 650; white-space: nowrap; }
.right > button:hover, .right .ads > button:hover, .right > button:focus-visible { color: #f3f6fb; background: rgba(255,255,255,.065); border-color: var(--line); }
.right > #mvBtn { margin-left: auto; color: #c6d8ff; border-color: rgba(131,170,255,.25); background: rgba(104,145,230,.1); }
.right > #adminBtn { border-color: var(--line); }
.right .ads { flex: 0 0 auto; }
.menu { top: calc(100% + 12px); background: #141a24; border-color: var(--line); border-radius: 12px; box-shadow: 0 20px 54px rgba(0,0,0,.52); }

/* Three purposeful columns: discovery, the live picture, and companion tools. */
.app { grid-template-columns: minmax(255px, 292px) minmax(0, 1fr) minmax(290px, 335px); min-height: calc(100vh - var(--header-height)); transition: grid-template-columns .32s cubic-bezier(.22,.75,.25,1); }
.app > aside:first-child, .app > aside:not(.fanside) {
  position: sticky; top: var(--header-height); align-self: start;
  max-height: calc(100vh - var(--header-height)); padding: 19px 15px 28px;
  overflow: auto; border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(17,21,29,.98), rgba(12,15,21,.96));
}
.app > aside:first-child .lg { margin: 18px 2px 8px; color: #7f8ba0; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.app > aside:first-child .lg:first-child { margin-top: 1px !important; }
.app > aside:first-child input { height: 39px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #0b0e14; color: var(--text); font-size: 12px; }
.chan { padding: 9px 11px; border-radius: 9px; background: #121720; color: #c7cfdb; font-size: 12px; }
.chan:hover, .chan.active { border-color: rgba(131,170,255,.56); background: rgba(87,124,195,.13); color: white; }
.game { padding: 10px 11px; border-color: transparent; border-radius: 10px; color: #e7ebf3; font-size: 12px; }
.game:hover { background: rgba(255,255,255,.045); }
.game.active { border-color: rgba(131,170,255,.5); background: rgba(79,115,184,.12); box-shadow: inset 2px 0 #83aaff; }
.sc { margin-bottom: 8px; padding: 10px 11px; border-color: var(--line); border-radius: 11px; background: rgba(255,255,255,.022); }
.sc.link { border-color: rgba(131,170,255,.32); background: linear-gradient(120deg, rgba(76,111,177,.15), rgba(255,255,255,.018)); }
.sc.link:hover { border-color: rgba(131,170,255,.7); background: rgba(76,111,177,.18); }
.sc .row { gap: 8px; padding: 3px 0; color: #e6ebf3; font-size: 12px; }
.sc img, .up img { width: 24px; height: 24px; }
.sc b { font-size: 14px; font-variant-numeric: tabular-nums; }
.st { margin-top: 7px; color: #919bad; font-size: 10px; }
.st.live { color: var(--ok); }
.up { position: relative; margin-bottom: 6px; padding: 9px 10px; border: 1px solid rgba(220,231,245,.055); border-radius: 9px; background: rgba(255,255,255,.018); }
.up:hover, .up.sel { border-color: rgba(131,170,255,.52); background: rgba(91,127,192,.1); }

main { padding: clamp(18px, 2vw, 30px); }
#view { min-width: 0; max-width: 1440px; margin: 0 auto; }
.title { position: relative; margin: 0 0 7px; color: #f4f6fb; font-size: clamp(23px, 2.5vw, 34px); font-weight: 760; letter-spacing: -.045em; line-height: 1.16; }
.title::before { display: block; margin-bottom: 9px; color: #91b2f6; content: "NOW PLAYING"; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.tabs { align-items: center; gap: 7px; margin: 15px 0 12px; }
.tabs button { min-height: 34px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px; background: #121721; color: #c2cbd9; font-size: 11px; font-weight: 650; }
.tabs button:hover { border-color: #596c92; color: white; }
.tabs button.active { border-color: #b7ceff; background: #b7ceff; color: #09111e; }
.tabs button.ghost { background: transparent; }
.frame { border: 1px solid rgba(210,225,255,.15); border-radius: 15px; box-shadow: 0 24px 70px rgba(0,0,0,.48), 0 0 0 5px rgba(255,255,255,.018); }
.frame iframe { background: #020304; }
.banner { border-color: rgba(255,195,87,.24); border-radius: 10px; background: rgba(133,84,21,.18); color: #f3cc82; }
.empty-player {
  position: relative; isolation: isolate; display: flex; min-height: min(620px, calc(100vh - 220px)); flex-direction: column; align-items: flex-start; justify-content: center;
  overflow: hidden; padding: clamp(26px, 5vw, 72px); border: 1px solid rgba(220,231,245,.11); border-radius: 20px;
  background: linear-gradient(115deg, rgba(19,25,36,.98) 12%, rgba(12,16,23,.94) 66%, rgba(20,31,49,.8)), #111722;
  box-shadow: 0 28px 80px rgba(0,0,0,.32);
}
.empty-player::after { position: absolute; z-index: -1; right: -12%; bottom: -50%; width: 74%; aspect-ratio: 1; border: 1px solid rgba(151,184,246,.13); border-radius: 50%; box-shadow: 0 0 0 44px rgba(151,184,246,.018), 0 0 0 100px rgba(151,184,246,.016), 0 0 100px rgba(79,126,219,.08); content: ""; }
.eyebrow { margin-bottom: 15px; color: #9ab8f6; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.empty-title { max-width: 620px; margin: 0; color: #f3f6fb; font-size: clamp(34px, 5.3vw, 68px); font-weight: 760; letter-spacing: -.058em; line-height: 1.02; }
.empty-copy { max-width: 480px; margin: 18px 0 23px; color: #a5afbf; font-size: 14px; line-height: 1.75; }
.empty-action { padding: 11px 16px; border: 1px solid #b8cefc; border-radius: 8px; background: #b8cefc; color: #09111d; font-size: 12px; font-weight: 750; }
.empty-action:hover { transform: translateY(-1px); background: #d4e1ff; }
.empty-foot { margin-top: 35px; color: #79869b; font-size: 10px; }
.soon { border-color: var(--line); background: linear-gradient(145deg, #161c27, #10141c); box-shadow: 0 25px 65px rgba(0,0,0,.3); }

.fanside { position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height)); overflow: visible; border-color: var(--line); background: rgba(12,15,21,.88); transition: min-width .32s cubic-bezier(.22,.75,.25,1), background-color .24s ease, border-color .24s ease; }
.fantop { padding: 18px 15px; }
.fanhead { flex-wrap: wrap; gap: 6px; }
.fanhead .lg { flex-basis: 100%; margin: 0 0 4px; color: #7f8ba0; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.fanhead button { font-size: 10px; }
.fanhead .ghost { padding: 6px 8px; border-color: var(--line); border-radius: 7px; }
#fanSub { padding: 6px 0; line-height: 1.55; }
.mu { margin-bottom: 8px; padding: 10px; border-color: var(--line); border-radius: 11px; background: rgba(255,255,255,.027); }
.mu:hover, .mu.sel { border-color: rgba(131,170,255,.42); background: rgba(82,113,169,.1); }
.mu .row { gap: 7px; }
.mu .row .n { color: #dce3ef; font-size: 11px; }
.mu .row b { color: #f1f4fa; font-size: 12px; }
.chat { height: min(330px, 42%); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-color: var(--line); background: #0a0d12; }
.chat > .lg { color: #8793a6; font-size: 10px; font-weight: 750; letter-spacing: .1em; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.chat-head > .lg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-edge-toggle { position: absolute; z-index: 5; top: 50%; left: -15px; display: grid; width: 29px; height: 66px; place-items: center; padding: 0; transform: translateY(-50%); border: 1px solid rgba(131,170,255,.36); border-right-color: rgba(131,170,255,.2); border-radius: 9px 0 0 9px; background: #121925; color: #d6e2fa; box-shadow: -8px 0 24px rgba(0,0,0,.22); font-size: 21px; line-height: 1; cursor: pointer; transition: left .32s cubic-bezier(.22,.75,.25,1), background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.rail-edge-toggle:hover, .rail-edge-toggle:focus-visible { outline: none; border-color: rgba(131,170,255,.7); background: #1a2638; color: white; }
.rail-edge-toggle span { display: block; transition: transform .28s cubic-bezier(.22,.75,.25,1); }
.rail-edge-toggle:active span { transform: scale(.78); }
.rail-content { min-height: 0; }
#playerView.right-rail-collapsed { grid-template-columns: minmax(0,1fr) 34px; grid-template-areas: "stage companion" "discover companion"; }
#playerView.right-rail-collapsed .fanside { min-width: 34px; padding: 0; border-left: 0; background: transparent; }
#playerView.right-rail-collapsed .fantop, #playerView.right-rail-collapsed .chat { position: absolute; inset-inline: 0; width: 100%; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(12px); transition: opacity .2s ease, transform .28s cubic-bezier(.22,.75,.25,1), visibility 0s linear .28s; }
.fantop, .chat { transition: opacity .22s ease, transform .28s cubic-bezier(.22,.75,.25,1), visibility 0s; }
.chatlog { padding: 6px 0; color: #cbd3e0; font-size: 12px; }
.chat input { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #111620; color: var(--text); font-size: 11px; }
#chatSend { padding: 7px 11px; border-radius: 8px; font-size: 11px; }

/* Dialogs and analytic surfaces share the same quieter system. */
dialog { border-color: rgba(220,231,245,.14); border-radius: 16px; background: #111620; box-shadow: 0 30px 100px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(2,4,8,.74); backdrop-filter: blur(5px); }
dialog[open] { animation: dialog-in .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
dialog { --dialog-accent: #83aaff; border-top: 2px solid var(--dialog-accent); }
#schDlg { --dialog-accent: #82aaff; width: min(940px, 96vw); }
#stDlg { --dialog-accent: #61d5d0; width: min(900px, 96vw); }
#ldDlg { --dialog-accent: #e8c77c; width: min(760px, 95vw); }
#injDlg { --dialog-accent: #f27e89; width: min(900px, 96vw); }
#cmpDlg { --dialog-accent: #b79bff; width: min(940px, 96vw); }
#odDlg { --dialog-accent: #6ed5a5; width: min(860px, 96vw); }
#ppDlg { --dialog-accent: #f2b56f; width: min(920px, 96vw); }
#pkDlg { --dialog-accent: #93b2ff; width: min(900px, 96vw); }
#alDlg { --dialog-accent: #fc8294; width: min(600px, 95vw); }
#gcDlg { --dialog-accent: #8eaef0; }
#trDlg { --dialog-accent: #c39cff; }
#fanDlg { --dialog-accent: #78d7b0; }
#rcDlg { --dialog-accent: #e8c77c; }
#teamDlg, #plDlg { --dialog-accent: #82aaff; }
dialog .opshead { position: sticky; z-index: 3; top: -20px; margin: -20px -20px 12px; padding: 15px 20px 11px; border-bottom: 1px solid var(--line); background: rgba(17,22,32,.96); backdrop-filter: blur(12px); }
dialog .opshead h3 { font-size: 17px; }
dialog .opshead > button { border-radius: 8px; }
dialog .sub { line-height: 1.55; }
dialog input:not([type=checkbox]), dialog select, dialog textarea { border-color: var(--line); border-radius: 8px; background: #0c1119; color: #ecf1f9; }
dialog button:not(.ghost) { border-radius: 8px; background: #b7ceff; color: #09111e; font-weight: 700; }
dialog button:not(.ghost):hover { background: #d3e0ff; }
dialog .ghost { border-color: var(--line); border-radius: 8px; }
dialog .sch-day { margin-top: 17px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--dialog-accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
dialog .sch-g { padding: 10px 7px; border-color: rgba(220,231,245,.06); border-radius: 8px; }
dialog .sch-g:hover { background: rgba(255,255,255,.03); }
dialog .sch-g .t { color: var(--dialog-accent); font-size: 11px; font-weight: 700; }
dialog .stnd-row { padding-top: 8px; padding-bottom: 8px; }
dialog .ld-row { padding: 8px; border-bottom-color: rgba(220,231,245,.07); border-radius: 7px; }
dialog .inj-row { padding: 9px 10px; }
dialog .cmp-res { border-color: var(--line); border-radius: 9px; background: #0c1119; }
dialog .pk-g { padding: 11px; }
dialog .pk-team { transition: background .16s ease, border-color .16s ease, transform .16s ease; }
dialog .pk-team:hover { transform: translateY(-1px); }
dialog .tblwrap { max-height: min(58vh, 620px); }
.menu { animation: menu-in .15s ease both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
dialog.wide { border-radius: 17px; }
dialog h3 { letter-spacing: -.025em; }
table th { background: #151b26; }
table th, table td { padding: 8px 10px; }
.tblwrap, .stnd, .inj-team { border-color: var(--line); border-radius: 10px; }
.stnd h4, .inj-team h4 { background: #141a24; }
.rpcard, .pk-g, .tr-card { border-color: var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.rpcard:hover, .rpcard.sel { border-color: rgba(131,170,255,.5); background: rgba(85,120,184,.12); }
.notice { z-index: 110; border-color: var(--line); border-radius: 11px; background: rgba(17,22,31,.96); box-shadow: 0 10px 40px rgba(0,0,0,.4); }
#toasts > * { border-radius: 10px; }

@media (max-width: 1200px) {
  :root { --header-height: 126px; }
  .app { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); }
  .app > aside:first-child, .app > aside:not(.fanside) { max-height: calc(100vh - var(--header-height)); }
  .fanside { grid-column: 1 / -1; position: static; height: auto; max-height: none; border-top: 1px solid var(--line); border-left: 0; }
  .fantop { padding: 17px 20px; }
  .mgrid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .chat { height: 300px; }
  #playerView.right-rail-collapsed { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) 34px; }
  #playerView.right-rail-collapsed .fanside { grid-column: 3; grid-row: 1; position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height)); align-self: start; border-top: 0; }
}
@media (max-width: 800px) {
  :root { --header-height: auto; }
  .top { position: sticky; grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "status" "tools"; gap: 7px; padding: 10px 12px 8px; }
  .brandrow { gap: 9px; flex-wrap: wrap; }
  .top h1 { font-size: 13px; }
  .brand-mark { width: 27px; height: 27px; }
  .lgswitch { gap: 1px; padding: 3px; }
  .lgswitch button { padding: 6px 8px; font-size: 10px; }
  #aiBtn { margin-left: auto; padding: 6px 9px; }
  .liveline { padding-left: 36px; font-size: 10px; }
  .mid { justify-content: flex-start; text-align: left; font-size: 10px; }
  .right { gap: 3px; margin: 0 -12px; padding: 7px 11px 1px; border-top: 1px solid var(--line); }
  .right > button, .right .ads > button { padding: 7px 9px; font-size: 10px; }
  .right > #mvBtn { margin-left: 0; }
  .app { display: flex; flex-direction: column; min-height: 0; }
  .app > main { order: 1; width: 100%; padding: 16px 13px 21px; }
  .app > aside:first-child, .app > aside:not(.fanside) { position: static; order: 2; width: 100%; max-height: none; padding: 14px 13px 20px; border-right: 0; border-top: 1px solid var(--line); border-bottom: 0; }
  .app > .fanside { order: 3; width: 100%; }
  .app > aside:first-child .lg { margin-top: 15px; }
  .empty-player { min-height: 390px; padding: 28px 23px; border-radius: 15px; }
  .empty-player::after { right: -35%; bottom: -50%; width: 100%; }
  .empty-copy { font-size: 13px; }
  .title { font-size: clamp(22px, 6vw, 29px); }
  .frame { border-radius: 11px; }
  .tabs { gap: 5px; }
  .tabs button { min-height: 32px; padding: 6px 9px; font-size: 10px; }
  .fanside { position: static; height: auto; border-left: 0; transition: width .32s cubic-bezier(.22,.75,.25,1), min-width .32s cubic-bezier(.22,.75,.25,1), background-color .24s ease; }
  .fantop { padding: 16px 13px; }
  .chat { height: 300px; }
  #playerView.right-rail-collapsed .fanside { align-self: flex-end; width: 34px; min-width: 34px; height: 66px; margin: 0 14px 12px; overflow: visible; }
  #playerView.right-rail-collapsed .rail-edge-toggle { top: 50%; left: 0; transform: translateY(-50%); border-radius: 9px; border-right-color: rgba(131,170,255,.36); }
  dialog .opshead { top: -14px; margin: -14px -14px 10px; padding: 12px 14px 10px; }
  dialog .tblwrap { max-height: 50vh; }
  .notice { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: none; }
}
@media (max-width: 420px) {
  .brandrow { gap: 6px; }
  .top h1 { gap: 6px; font-size: 11px; letter-spacing: .11em; }
  .brand-mark { width: 24px; height: 24px; border-radius: 7px 7px 7px 2px; font-size: 14px; }
  .lgswitch button { padding: 5px 6px; font-size: 9px; }
  #aiBtn { font-size: 10px; }
  .empty-player { min-height: 340px; }
  .empty-title { font-size: 38px; }
}

/* Matchday refresh: fast category browsing, broadcast graphics, and event-first cards. */
:root {
  --bg: #080a0d;
  --panel: #101317;
  --surface: #171b20;
  --line: rgba(228,235,226,.105);
  --text: #f3f5ef;
  --mute: #9ba29c;
  --accent: #c7f36b;
  --header-height: 118px;
}
body { background: radial-gradient(ellipse at 49% -22%, rgba(127,156,73,.12), transparent 44%), #080a0d; }
.top { min-height: var(--header-height); background: rgba(8,10,13,.94); border-bottom-color: rgba(199,243,107,.16); box-shadow: 0 12px 36px rgba(0,0,0,.16); }
.brand-mark { background: linear-gradient(145deg,#e4ffab,#a9df4d 65%,#709c25); box-shadow: 0 4px 20px rgba(173,224,76,.24); }
.top h1 { letter-spacing: .18em; }
.lgswitch { background: #11150f; border-color: rgba(199,243,107,.14); }
.lgswitch button.on { background: var(--accent); color: #10140a; box-shadow: 0 3px 15px rgba(199,243,107,.18); }
.liveline i { background: var(--accent); }
.right { border-color: rgba(228,235,226,.08); }
.right > button, .right .ads > button { border-radius: 999px; padding-inline: 13px; }
.right > #mvBtn { color: #e7f4cf; border-color: rgba(199,243,107,.26); background: rgba(199,243,107,.09); }
.app { grid-template-columns: minmax(0,1fr) minmax(285px,320px); grid-template-rows: auto auto; grid-template-areas: "stage companion" "discover companion"; align-items: start; }
.app > main { grid-area: stage; }
.app > aside:first-child { grid-area: discover; position: static; top: auto; align-self: stretch; max-height: none; margin: 0; padding: 18px clamp(18px,2.5vw,38px) 28px; border-top: 1px solid rgba(228,235,226,.09); border-right: 0; background: linear-gradient(180deg,rgba(16,19,23,.82),rgba(10,12,14,.98)); }
.app > .fanside { grid-area: companion; grid-row: 1 / span 2; }
.stream-shelf { margin: 2px 0 22px; animation: match-enter .42s cubic-bezier(.2,.75,.2,1) both; }
.stream-shelf-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; }
.stream-shelf-label { display:flex; align-items:baseline; gap:10px; min-width:0; }
.stream-shelf-kicker { color:var(--accent); font-size:9px; font-weight:850; letter-spacing:.16em; white-space:nowrap; }
.stream-shelf-title { margin:0; color:#f0f2e9; font-size:16px; font-weight:780; letter-spacing:-.035em; }
.stream-shelf-total { color:#879080; font-size:9px; font-weight:800; letter-spacing:.1em; white-space:nowrap; }
.stream-track { display:flex; gap:9px; overflow-x:auto; overscroll-behavior-inline:contain; padding:2px 2px 10px; scrollbar-width:thin; scroll-snap-type:x proximity; }
.stream-card { position:relative; display:flex; flex:0 0 clamp(235px,25vw,300px); min-width:0; min-height:190px; flex-direction:column; align-items:stretch; gap:0; overflow:hidden; padding:0 13px 12px; border:1px solid rgba(228,235,226,.1); border-radius:14px; background:linear-gradient(145deg,#151816,#0e100f); color:var(--text); text-align:left; scroll-snap-align:start; animation:match-enter .36s both; }
.stream-card:nth-child(2) { animation-delay:.035s; } .stream-card:nth-child(3) { animation-delay:.07s; } .stream-card:nth-child(4) { animation-delay:.105s; } .stream-card:nth-child(5) { animation-delay:.14s; }
.stream-card::after { position:absolute; right:-35px; bottom:-58px; width:105px; aspect-ratio:1; border:1px solid rgba(199,243,107,.12); border-radius:50%; box-shadow:0 0 0 16px rgba(199,243,107,.025); content:""; pointer-events:none; transition:transform .3s ease, opacity .3s ease; opacity:.55; }
.stream-card:hover, .stream-card.selected { transform:translateY(-2px); border-color:rgba(199,243,107,.42); background:linear-gradient(135deg,#1a2018,#141813); }
.stream-card:hover::after { transform:scale(1.2); opacity:1; }
.stream-card-meta { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:38px; }
.stream-card-state { display:inline-flex; align-items:center; gap:5px; color:#c7cbbf; font-size:8px; font-weight:850; letter-spacing:.12em; }
.stream-card-state i { width:6px; height:6px; border-radius:50%; background:#9da393; }
.stream-card-state.live { color:#ff9e93; }
.stream-card-state.live i { background:#ff695f; box-shadow:0 0 9px rgba(255,105,95,.6); animation:live-breathe 2s ease-in-out infinite; }
.stream-card-sport { color:#899181; font-size:8px; font-weight:800; letter-spacing:.13em; }
.stream-card-visual { position:relative; display:flex; min-height:88px; align-items:center; justify-content:center; gap:clamp(19px,3vw,34px); overflow:hidden; margin:0 -13px 10px; background:radial-gradient(ellipse at 18% 52%,color-mix(in srgb,var(--away-color) 28%,transparent),transparent 47%),radial-gradient(ellipse at 82% 52%,color-mix(in srgb,var(--home-color) 28%,transparent),transparent 47%),linear-gradient(110deg,rgba(255,255,255,.025),transparent 50%,rgba(255,255,255,.02)); }
.stream-card-visual::before { position:absolute; inset:0; background:linear-gradient(115deg,transparent 0 49.8%,rgba(255,255,255,.07) 50%,transparent 50.2%); content:""; pointer-events:none; }
.stream-card-team-logo { position:relative; display:grid; width:64px; height:64px; flex:none; place-items:center; border-radius:15px; background:rgba(7,9,8,.38); filter:drop-shadow(0 5px 11px rgba(0,0,0,.34)); transition:transform .25s ease; }
.stream-card:hover .stream-card-team-logo:first-child { transform:translateX(-3px) scale(1.04); }
.stream-card:hover .stream-card-team-logo:last-child { transform:translateX(3px) scale(1.04); }
.stream-card-team-logo img { position:relative; z-index:1; width:90%; height:90%; object-fit:contain; }
.stream-card-team-initials { position:absolute; color:#f1f3eb; font-size:12px; font-weight:900; letter-spacing:.04em; }
.stream-card-versus { position:relative; z-index:1; color:rgba(238,244,228,.55); font-size:9px; font-weight:900; letter-spacing:.12em; }
.stream-card-generic-mark { color:rgba(218,230,199,.78); font-size:22px; font-weight:900; letter-spacing:.14em; }
.stream-card-viewers { color:#c5b2ef; font-size:9px; font-weight:850; letter-spacing:.02em; }
.stream-card-name { position:relative; z-index:1; display:-webkit-box; overflow:hidden; color:#f0f2e9; font-size:12px; font-weight:780; letter-spacing:-.018em; line-height:1.25; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.stream-card-foot { position:relative; z-index:1; margin-top:auto; color:#a8b197; font-size:9px; font-weight:650; }
.stream-track::-webkit-scrollbar { display:block; height:4px; }
.stream-track::-webkit-scrollbar-thumb { border-radius:9px; background:rgba(199,243,107,.25); }
.app > aside:first-child, .app > aside:not(.fanside) { background: linear-gradient(180deg,#101317,#0c0f12); border-right-color: rgba(228,235,226,.09); }
.app > aside:first-child .lg { color: #a7b192; letter-spacing: .15em; }
.sp { min-height: 46px; background: #151a16; border-color: rgba(228,235,226,.08); }
.sp:hover, .sp[aria-expanded="true"] { border-color: rgba(199,243,107,.45); background: rgba(199,243,107,.075); }
.chan, .game, .up, .sc { border-radius: 12px; }
.sc { background: linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border-color: rgba(228,235,226,.08); }
.sc.link { border-color: rgba(199,243,107,.2); background: linear-gradient(115deg,rgba(119,159,49,.16),rgba(255,255,255,.018)); }
.sc.link:hover, .up:hover, .up.sel { border-color: rgba(199,243,107,.52); background: rgba(199,243,107,.08); }
.st.live { color: var(--accent); }
.fanside { background: rgba(13,16,14,.9); border-color: rgba(228,235,226,.09); }
.rail-edge-toggle { border-color: rgba(199,243,107,.38); background: #171d14; color: #e5f8c5; }
.rail-edge-toggle:hover, .rail-edge-toggle:focus-visible { border-color: var(--accent); background: #222b19; }
.fantop .lg, .chat > .lg { color: #a7b192; }
.mu, .rpcard, .pk-g, .tr-card { border-radius: 12px; }

.match-desk {
  position: relative; isolation: isolate; overflow: hidden; min-height: 430px; margin: clamp(4px,2vw,24px) 0 28px; padding: clamp(20px,3vw,38px);
  border: 1px solid rgba(225,240,205,.13); border-radius: 22px;
  background: linear-gradient(112deg,rgba(20,25,20,.98) 0%,rgba(16,20,17,.95) 50%,rgba(26,33,20,.94)),#101410;
  box-shadow: 0 28px 75px rgba(0,0,0,.32); animation: match-enter .5s cubic-bezier(.2,.75,.2,1) both;
}
.match-desk::before, .match-desk::after { position:absolute; z-index:-1; content:""; pointer-events:none; }
.match-desk::before { width:430px; aspect-ratio:1; right:-135px; top:-255px; border:1px solid rgba(199,243,107,.13); border-radius:50%; box-shadow:0 0 0 34px rgba(199,243,107,.022),0 0 0 83px rgba(199,243,107,.018),0 0 90px rgba(199,243,107,.07); }
.match-desk::after { inset:0; opacity:.3; background:linear-gradient(135deg,transparent 49.8%,rgba(255,255,255,.025) 50%,transparent 50.2%); }
@keyframes match-enter { from { opacity:0; transform:translateY(13px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
.match-desk-head, .match-desk-footer, .match-actions { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.match-overline { color:#a8b39d; font-size:10px; font-weight:850; letter-spacing:.17em; }
.match-live-tag { padding:6px 10px; border:1px solid rgba(199,243,107,.23); border-radius:999px; background:rgba(199,243,107,.08); color:#dafa9e; font-size:9px; font-weight:850; letter-spacing:.12em; }
.match-live-tag.is-live { border-color:rgba(255,95,87,.33); background:rgba(255,95,87,.12); color:#ff948b; animation: live-breathe 2s ease-in-out infinite; }
@keyframes live-breathe { 50% { box-shadow:0 0 18px rgba(255,95,87,.16); } }
.matchup { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(9px,2vw,28px); padding:clamp(36px,6vh,68px) 0 42px; }
.match-team { display:flex; min-width:0; flex-direction:column; align-items:center; text-align:center; animation: team-reveal .55s .08s both; }
.match-team.home { animation-delay:.16s; }
@keyframes team-reveal { from { opacity:0; transform:translateY(9px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.match-logo { display:grid; width:clamp(80px,11vw,138px); aspect-ratio:1; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.11); border-radius:30%; background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.025)); box-shadow:0 18px 46px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.1); color:var(--accent); font-size:26px; font-weight:850; }
.match-logo img { width:74%; height:74%; object-fit:contain; filter:drop-shadow(0 7px 12px rgba(0,0,0,.2)); }
.match-team-name { max-width:230px; margin-top:19px; color:#f4f5ee; font-size:clamp(17px,2.2vw,26px); font-weight:800; letter-spacing:-.04em; line-height:1.1; }
.match-team-code { margin-top:7px; color:#90998d; font-size:10px; font-weight:750; letter-spacing:.16em; }
.match-center-mark { display:flex; min-width:92px; flex-direction:column; align-items:center; gap:10px; }
.match-vs { color:rgba(241,246,233,.34); font-size:clamp(20px,3vw,34px); font-weight:900; letter-spacing:-.08em; }
.match-countdown { color:#d5edaa; font-size:11px; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
.match-desk-footer { padding:14px 0 0; border-top:1px solid rgba(255,255,255,.09); }
.match-date { color:#e5eadd; font-size:12px; font-weight:750; }
.match-watch-note { color:#889186; font-size:10px; }
.match-actions { justify-content:flex-start; margin-top:20px; }
.match-watch, .match-schedule { min-height:42px; padding:0 17px; border:1px solid rgba(199,243,107,.35); border-radius:9px; background:var(--accent); color:#14190b; font-size:11px; font-weight:850; letter-spacing:.015em; box-shadow:0 7px 24px rgba(199,243,107,.12); }
.match-watch:hover, .match-schedule:hover { transform:translateY(-2px); background:#d9ff8a; box-shadow:0 11px 30px rgba(199,243,107,.2); }
.match-watch:disabled { background:rgba(199,243,107,.15); color:#cfdda9; box-shadow:none; }
.match-schedule { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:#e1e6dc; box-shadow:none; }
.next-games { margin:0 0 30px; animation: match-enter .45s .12s both; }
.next-games-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.next-games-caption { color:#737d72; font-size:9px; font-weight:800; letter-spacing:.14em; }
.next-games-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; }
.next-game { display:flex; min-width:0; flex-direction:column; align-items:stretch; gap:15px; padding:13px; border:1px solid rgba(228,235,226,.09); border-radius:13px; background:linear-gradient(140deg,#141815,#101311); color:var(--text); text-align:left; animation: match-enter .4s both; }
.next-game:nth-child(2) { animation-delay:.05s; } .next-game:nth-child(3) { animation-delay:.1s; } .next-game:nth-child(4) { animation-delay:.15s; }
.next-game:hover { transform:translateY(-3px); border-color:rgba(199,243,107,.4); background:#171d14; }
.next-game-teams { display:flex; justify-content:space-between; gap:10px; }
.next-game-team { display:flex; align-items:center; gap:6px; color:#dce2d7; font-size:10px; font-weight:800; }
.next-game-team img { width:23px; height:23px; object-fit:contain; }
.next-game-time { padding-top:9px; border-top:1px solid rgba(255,255,255,.07); color:#9ea892; font-size:10px; font-weight:650; }
#playerView.right-rail-collapsed > .fanside { grid-area: companion; grid-row: 1 / span 2; }

.empty-player { border-color:rgba(225,240,205,.13); background:linear-gradient(115deg,#151a15 12%,#101410 66%,#1b2418),#111722; }
.eyebrow { color:var(--accent); }
.empty-action { border-color:var(--accent); background:var(--accent); color:#13180b; }
.empty-action:hover { background:#d9ff8a; }
dialog { background:#111512; border-color:rgba(220,231,210,.14); }
dialog .opshead { background:rgba(17,21,18,.97); }
dialog button:not(.ghost) { background:var(--accent); color:#14190b; }
table th { background:#171c17; }

@media (max-width: 1200px) {
  .app { grid-template-columns:minmax(225px,270px) minmax(0,1fr); }
  .match-desk { min-height:400px; }
}
@media (max-width: 800px) {
  .top { min-height:0; }
  .match-desk { min-height:0; margin:0 0 21px; padding:20px 16px; border-radius:17px; }
  .matchup { padding:42px 0 34px; gap:7px; }
  .match-center-mark { min-width:64px; }
  .match-logo { width:clamp(67px,19vw,105px); border-radius:25%; }
  .match-team-name { margin-top:13px; font-size:clamp(14px,4vw,21px); }
  .match-desk-footer { align-items:flex-start; flex-direction:column; gap:6px; }
  .match-actions { flex-wrap:wrap; }
  .stream-shelf { margin:0 0 18px; }
  .stream-shelf-title { font-size:14px; }
  .stream-card { flex-basis:242px; min-height:184px; }
  .next-games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 420px) {
  .match-overline { font-size:8px; }
  .match-live-tag { padding:5px 7px; font-size:8px; }
  .match-team-name { font-size:13px; }
  .match-center-mark { min-width:52px; }
  .match-countdown { font-size:9px; }
  .next-game { padding:10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Live box score beside the single-game player. */
.watch-layout { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:14px; }
.watch-layout > .frame { min-width:0; }
.live-stats-panel { grid-row:1; min-width:0; max-height:min(68vw,640px); overflow:auto; padding:14px 13px; border:1px solid rgba(199,243,107,.14); border-radius:14px; background:linear-gradient(155deg,rgba(25,31,23,.98),rgba(13,17,14,.98)); box-shadow:inset 0 1px rgba(255,255,255,.035),0 18px 45px rgba(0,0,0,.18); scrollbar-color:#36402c transparent; }
.watch-layout > .frame { grid-row:2; }
.ls-head { display:flex; flex-direction:column; gap:9px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); }
.ls-live-dot { color:#c9f47b; font-size:9px; font-weight:850; letter-spacing:.14em; }
.ls-live-dot::before { display:inline-block; width:6px; height:6px; margin:0 6px 1px 0; border-radius:50%; background:#c9f47b; box-shadow:0 0 12px #b5e861; content:""; }
.ls-score { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ls-team { display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:6px; min-width:0; }
.ls-team img { width:25px; height:25px; object-fit:contain; }
.ls-team b { overflow:hidden; color:#d9e1d2; font-size:11px; text-overflow:ellipsis; }
.ls-team strong { color:#f7f9f3; font-size:20px; font-variant-numeric:tabular-nums; }
.ls-period { color:#899184; font-size:10px; }
.ls-modes { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:11px 0 14px; padding:3px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(0,0,0,.2); }
.ls-modes button { min-height:30px; border:0; border-radius:6px; background:transparent; color:#9da594; font-size:10px; font-weight:750; cursor:pointer; transition:background .18s ease,color .18s ease,transform .18s ease; }
.ls-modes button:hover { color:white; transform:translateY(-1px); }
.ls-modes button.active { background:rgba(199,243,107,.16); color:#d9ff9b; box-shadow:inset 0 0 0 1px rgba(199,243,107,.16); }
.ls-section { margin:0 0 15px; }
.ls-section-title { margin-bottom:8px; color:#798271; font-size:8px; font-weight:850; letter-spacing:.14em; }
.ls-colheads { display:grid; grid-template-columns:1fr 1fr; margin-bottom:5px; color:#c8d2bf; font-size:9px; text-align:center; }
.ls-metric { display:grid; grid-template-columns:minmax(0,1fr) minmax(80px,1.05fr) minmax(0,1fr); align-items:center; gap:3px; min-height:28px; border-top:1px solid rgba(255,255,255,.045); }
.ls-metric b { overflow:hidden; color:#e5eadf; font-size:10px; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
.ls-metric b:first-child { text-align:left; }
.ls-metric b:last-child { text-align:right; }
.ls-metric span { color:#8f9888; font-size:8px; text-align:center; }
.ls-player-team { margin-top:8px; padding:9px 8px 5px; border:1px solid rgba(255,255,255,.065); border-radius:9px; background:rgba(255,255,255,.018); }
.ls-team-label { margin-bottom:5px; color:#c9d2bf; font-size:9px; font-weight:800; letter-spacing:.04em; }
.ls-player { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 7px; padding:7px 0; border-top:1px solid rgba(255,255,255,.05); }
.ls-player b { overflow:hidden; color:#e4e9df; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.ls-player > span { color:#96a284; font-size:7px; font-weight:800; letter-spacing:.08em; }
.ls-player small { grid-column:1 / -1; color:#a1aa98; font-size:9px; font-variant-numeric:tabular-nums; }
.live-stats-empty { margin:9px 0; color:#899184; font-size:10px; line-height:1.5; }
@media (min-width:1700px) {
  .watch-layout { grid-template-columns:minmax(250px,280px) minmax(0,1fr); align-items:center; width:calc(100% + 294px); margin-left:-294px; }
  .live-stats-panel, .watch-layout > .frame { grid-row:auto; }
}
.watch-layout.no-live-stats { grid-template-columns:minmax(0,1fr); width:100%; margin-left:0; }
.watch-layout.no-live-stats .live-stats-panel { display:none; }
.watch-layout.no-live-stats > .frame { grid-column:1; grid-row:1; }
@media (max-width:800px) { .watch-layout { gap:10px; } .live-stats-panel { max-height:310px; padding:12px; border-radius:11px; } }