/* The schedule and watch room scroll independently, so browsing never moves video. */
:root { --bar-height: 60px; }
html, body { height: 100%; }
body { height: 100dvh; overflow: hidden; }
.topbar { height: var(--bar-height); padding: 0 24px; }
.brand img { width: 27px; height: 27px; }
.brand > span:first-of-type { font-size: 21px; }
.brand { min-width: 0; }
.brand img, .brand > span:first-of-type { flex-shrink: 0; }
.lite-badge { max-width: 220px; white-space: normal; letter-spacing: .02em; line-height: 1.35; }
.app-layout { display: block; max-width: none; height: calc(100dvh - var(--bar-height)); min-height: 0; margin: 0; }
#main { height: 100%; min-height: 0; padding: 0; }
.workspace { display: grid; grid-template-columns: 360px minmax(0, 1fr); align-items: stretch; gap: 0; height: 100%; min-height: 0; }
.event-browser { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); background: #131714; }
.browse-modes { display: flex; flex-shrink: 0; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.browse-modes button { flex: 1; background: transparent; color: var(--muted); border-radius: 6px; padding: 10px 7px; font-size: 12px; white-space: nowrap; }
.browse-modes button[aria-pressed="true"] { background: var(--accent-dim); color: var(--accent); }
.channels-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.channel-tools { padding: 18px 16px 12px; flex-shrink: 0; }
.channel-search-row { display: flex; gap: 9px; align-items: center; margin-bottom: 12px; }
.channel-search-row .search { flex: 1; min-width: 0; margin: 0; order: 0; }
.channel-search-row .icon-button { flex-shrink: 0; font-size: 22px; order: 1; }
.channel-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.channel-filters label { display: flex; flex-direction: column; gap: 6px; font-size: 10px; color: var(--muted); }
.channel-filters select { min-width: 0; width: 100%; font: inherit; font-size: 12px; color: #d8e3d9; background: #171d18; border: 1px solid #354036; border-radius: 6px; padding: 10px 5px; text-overflow: ellipsis; }
.channel-filters select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.checked-label { font-size: 9px; color: #9bc183; white-space: nowrap; }
.checked-label .live-dot { margin-right: 4px; }
#channel-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3d4c3d transparent; }
#channel-list:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.channel-row { display: flex; align-items: center; gap: 0; padding-right: 8px; border-bottom: 1px solid #272e28; }
.channel-row.selected { background: #202a1e; box-shadow: inset 2px 0 var(--accent); }
.channel-open { display: flex; align-items: center; text-align: left; flex: 1; min-width: 0; gap: 9px; padding: 15px 7px 15px 16px; background: transparent; }
.channel-open:hover { background: #1a211b; }
a.channel-open { color: inherit; text-decoration: none; }
.channel-monogram { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; color: #bbd5ac; background: #273222; border: 1px solid #394832; font-size: 11px; font-weight: 650; }
.channel-description { flex: 1; min-width: 0; }
.channel-description strong { display: block; font-size: 12px; line-height: 1.5; font-weight: 550; overflow-wrap: anywhere; }
.channel-description small { display: block; color: var(--muted); font-size: 9px; line-height: 1.5; margin-top: 2px; }
.channel-live { display: flex; align-items: center; gap: 4px; font-size: 8px; letter-spacing: .3px; color: var(--accent); margin-top: 5px; }
.channel-live > span:last-child { color: #8b9b8e; letter-spacing: 0; }
.channel-open .event-action { padding: 4px; font-size: 8px; }
.favourite-button { flex-shrink: 0; background: transparent; color: #8b9b8e; border-radius: 6px; padding: 5px; width: 30px; height: 36px; font-size: 22px; }
.favourite-button[aria-pressed="true"] { color: #d5e99a; }
.favourite-button:hover { background: #293422; color: var(--accent); }
.channel-footer { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; padding: 10px 16px; border-top: 1px solid var(--line); color: #859789; font-size: 9px; line-height: 1.5; }
.browser-tools { padding: 22px 18px 12px; flex-shrink: 0; }
.browser-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.browser-heading h1 { font-size: 24px; letter-spacing: -.7px; margin: 7px 0 0; }
.browser-heading .eyebrow { font-size: 8px; }
.search { width: 100%; max-width: none; padding: 12px; margin-bottom: 10px; }
.search input { font-size: 12px; }
.view-tabs { width: 100%; }
.view-tab { flex: 1; padding: 9px 8px; }
.sport-picker { position: relative; margin-top: 10px; font-size: 11px; }
.sport-picker > summary { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; list-style: none; color: var(--muted); }
.sport-picker > summary::-webkit-details-marker { display: none; }
.sport-picker > summary strong { flex: 1; font-weight: 500; color: #d8e3d9; }
.sport-picker[open] > summary { border-color: #627d51; }
summary:focus-visible, #event-list:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#categories { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; max-height: min(360px, 45dvh); overflow: auto; padding: 7px; background: #1a211b; border: 1px solid #3b4b39; border-radius: 8px; box-shadow: 0 12px 35px #0008; scrollbar-width: thin; overscroll-behavior: contain; }
.category { width: 100%; min-height: 40px; margin: 0; padding: 8px; border: 0; font-size: 11px; gap: 7px; }
.category .category-icon { display: flex !important; width: 16px; }
.category-name { overflow-wrap: anywhere; }
.category-count { min-width: 12px; }
.notice { padding: 9px; margin: 10px 0 0; max-height: 90px; overflow: auto; }
.events-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.section-heading { padding: 5px 18px 12px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.section-heading h2 { font-size: 12px; }
#event-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3d4c3d transparent; }
.schedule-notice { padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 11px; line-height: 1.6; }
.schedule-notice strong { font-weight: 550; color: #c8d4ca; }
.schedule-notice p { margin: 6px 0 2px; color: var(--muted); }
.schedule-notice .text-button { color: var(--accent); font-size: 11px; }
.event-row { grid-template-columns: 55px minmax(0, 1fr) 47px; gap: 9px; padding: 14px 14px 14px 18px; min-height: 88px; }
.event-time time { font-size: 11px; }
.event-title { font-size: 12px; line-height: 1.5; }
.event-category { font-size: 9px; }
.event-description { min-width: 0; }
.event-title { display: grid; gap: 5px; }
.event-team { display: flex; align-items: center; gap: 7px; min-width: 0; line-height: 1.35; }
.event-team > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.event-badge { display: inline-grid; place-items: center; position: relative; flex: 0 0 22px; width: 22px; height: 22px; color: #8da28b; }
.event-badge svg { width: 17px; height: 17px; opacity: .65; }
.event-badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .15s; }
.event-badge.has-image img { opacity: 1; }
.event-badge.has-image svg { visibility: hidden; }
.event-category { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; margin-top: 7px; line-height: 1.4; }
.event-sport { display: inline-flex; align-items: center; gap: 7px; }
.league-badge { width: 22px; height: 17px; }
.league-badge svg { width: 13px; height: 13px; }
.league-badge img { padding: 0 2px; }
.event-source-note { color: #78897c; white-space: nowrap; }
.event-action { justify-self: end; border: 1px solid #344331; color: #b4c5ac; border-radius: 5px; padding: 5px 6px; font-size: 9px; white-space: nowrap; }
.event-row:hover .event-action, .event-row.selected .event-action { border-color: #65864f; color: var(--accent); background: #b4f28b08; }
.date-divider { padding: 9px 18px; font-size: 9px; position: sticky; top: 0; z-index: 1; }
.list-footer { flex-shrink: 0; margin: 0; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 9px; }
.watch-room { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 22px 24px 14px; }
.watch-heading { flex-shrink: 0; margin-bottom: 20px; }
.watch-heading h2 { margin-top: 7px; font-size: 24px; }
.watch-heading .eyebrow { font-size: 8px; }
.watch-toolbar { flex-shrink: 0; gap: 10px; margin-bottom: 18px; }
.watch-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3d4c3d transparent; padding: 3px; }
.watch-grid { gap: 14px; }
.watch-room[data-count="1"] .watch-grid { max-width: 1100px; }
.view-card:focus-visible { outline: 1px solid var(--accent); }
.view-card.featured .player-screen { flex: none; }
.view-header { min-height: 64px; }
.view-title h3 { font-size: 12px; }
.view-controls .audio-button { min-width: 69px; }
.event-research { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.research-heading { position: sticky; top: -16px; z-index: 1; margin: -16px -16px 12px; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.watch-empty { min-height: min(420px, 58dvh); justify-content: center; gap: 16px; }
.empty-views { font-size: 32px; margin-bottom: 15px; }
.watch-empty strong { font-size: 24px; }
.watch-empty .watch-button { margin-top: 8px; }
.watch-footer { padding-bottom: 6px; }
.replace-view { position: sticky; top: 0; z-index: 3; box-shadow: 0 8px 20px #0005; }
body.theater .event-browser { display: none; }
body.theater .app-layout { height: 100dvh; min-height: 0; }
body.theater .workspace { grid-template-columns: minmax(0, 1fr); }
.watch-room:fullscreen { height: 100dvh; overflow: hidden; }

@media (max-width: 1280px) and (min-width: 741px) {
  .workspace { grid-template-columns: 330px minmax(0, 1fr); }
  .watch-room { padding-inline: 16px; }
  .watch-grid { gap: 10px; }
  .wall-size input { width: 65px; }
  .watch-toolbar { gap: 8px; }
}
@media (max-width: 960px) and (min-width: 741px) {
  .workspace { grid-template-columns: 310px minmax(0, 1fr); }
  .watch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall-actions { margin-left: 0; }
  .wall-size { margin-left: auto; }
}

/* Phones have one player. The browser below it owns its own scrolling region. */
@media (max-width: 740px), (pointer: coarse) and (max-width: 1100px) {
  :root { --bar-height: 64px; }
  .topbar { padding: 0 12px; }
  .brand { gap: 3px 7px; display: grid; grid-template-columns: 24px auto; }
  .brand > span:first-of-type { font-size: 18px; }
  .brand img { width: 24px; height: 24px; }
  .lite-badge { grid-column: 1 / -1; font-size: 9px; padding: 2px 4px; max-width: 220px; }
  .topbar-right { gap: 12px; }
  .connection { font-size: 9px; }
  .original-link { font-size: 0; }
  .original-link span { font-size: 18px; margin: 0; }
  .workspace { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "watch" "browse"; gap: 0; }
  .event-browser { grid-area: browse; border-right: 0; }
  .browse-modes { padding: 6px 10px; gap: 3px; }
  .browse-modes button { font-size: 11px; padding: 8px 6px; }
  .channel-tools { padding: 10px 12px 8px; }
  .channel-search-row { margin-bottom: 8px; }
  .channel-filters label { font-size: 0; gap: 0; }
  .channel-filters select { font-size: 14px; padding: 8px 5px; }
  .channel-row { padding-right: 7px; }
  .channel-open { padding: 11px 7px 11px 12px; }
  .channel-description strong { font-size: 12px; }
  .channel-monogram { width: 28px; height: 28px; }
  .favourite-button { width: 44px; height: 44px; }
  .channel-footer { padding: 7px 12px max(7px, env(safe-area-inset-bottom)); font-size: 8px; }
  #channel-availability { display: none; }
  .browser-tools { padding: 10px 12px 7px; }
  .browser-heading { margin-bottom: 9px; }
  .browser-heading h1 { font-size: 18px; margin: 0; letter-spacing: -.4px; }
  .browser-heading .eyebrow { display: none; }
  .browser-heading .icon-button { width: 28px; height: 28px; }
  .has-streams .browser-tools { display: grid; grid-template-columns: minmax(0, 1fr) 30px; column-gap: 8px; }
  .has-streams .browser-heading { grid-column: 2; grid-row: 1; margin: 0; justify-content: center; }
  .has-streams .browser-heading > div { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .has-streams .search { grid-column: 1; grid-row: 1; }
  .has-streams .view-tabs, .has-streams .sport-picker, .has-streams .notice { grid-column: 1 / -1; }
  .search { padding: 8px 10px; margin-bottom: 7px; }
  .search input { font-size: 16px; }
  .search kbd { display: none; }
  .view-tabs { padding: 3px; gap: 3px; }
  .view-tab { padding: 7px 6px; }
  .sport-picker { margin-top: 6px; }
  .sport-picker > summary { padding: 8px 10px; }
  #categories { max-height: min(300px, 40dvh); }
  .section-heading { padding: 4px 12px 7px; }
  .event-row { grid-template-columns: 54px minmax(0, 1fr) 48px; min-height: 76px; gap: 8px; padding: 12px; }
  .event-action { font-size: 9px; padding: 5px; }
  .date-divider { padding: 7px 12px; }
  .list-footer { padding: 6px 12px max(6px, env(safe-area-inset-bottom)); font-size: 8px; }
  .empty-state { min-height: 170px; padding: 20px 12px; }
  .watch-room { grid-area: watch; padding: 0; height: auto; border-bottom: 1px solid #3a4937; }
  .watch-room[data-count="0"] { display: none; }
  .watch-heading, .watch-toolbar, .watch-footer { display: none; }
  .watch-content { overflow: visible; padding: 0; }
  .watch-room .watch-grid { display: block; width: 100%; max-width: none; margin: 0; }
  .view-card { border: 0; border-radius: 0; overflow: visible; }
  .view-header { padding: 7px 12px; min-height: 42px; gap: 8px; }
  .view-title h3 { font-size: 12px; }
  .view-title p { font-size: 9px; margin-top: 2px; }
  .view-number, .view-header [data-command="feature"] { display: none; }
  .view-header [data-command="close"] { width: 30px; height: 30px; }
  .view-card .player-screen { height: min(24dvh, 240px); aspect-ratio: auto; }
  .view-card .player-screen:fullscreen { height: 100%; }
  .view-status { font-size: 9px; min-height: 18px; padding: 6px 12px 0; }
  .view-controls { padding: 6px 10px; gap: 5px; flex-wrap: nowrap; }
  .view-controls .watch-button { padding: 7px 8px; font-size: 10px; min-height: 30px; }
  .view-controls [data-command="change"] { display: none; }
  .view-servers summary { padding: 8px 12px; }
  .view-servers[open], .event-research { position: fixed; inset: auto 8px max(8px, env(safe-area-inset-bottom)); z-index: 30; max-height: 58dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border: 1px solid #52684a; border-radius: 10px; box-shadow: 0 -12px 45px #0009; }
  .view-servers[open] > summary { position: sticky; top: 0; padding: 13px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
  .view-servers[open] > summary::after { content: "Close ×"; float: right; color: var(--accent); }
  .event-research { z-index: 31; max-height: 62dvh; }
  .research-bout-form input { font-size: 16px; }
  .research-heading .view-icon { width: 32px; height: 32px; }
  .notice { max-height: 50px; margin-top: 6px; font-size: 10px; }
}

/* A phone turned sideways still has one video, beside the event browser. */
@media (max-height: 550px) and (min-width: 600px) and (max-width: 1100px) and (pointer: coarse) {
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "watch browse"; }
  body:not(.has-streams) .workspace { grid-template-columns: minmax(0, 1fr); grid-template-areas: "browse"; }
  .watch-room { border-right: 1px solid var(--line); border-bottom: 0; overflow-y: auto; }
  .view-card .player-screen { height: min(45dvh, 240px); }
  .list-footer { display: none; }
  .event-research { max-height: 85dvh; }
}