/* Layout and clean-up pass: centered content, fewer decorations. Colors and behavior are unchanged. */

/* centered header */
.top { padding-inline: max(20px, calc((100% - 1500px) / 2)); }
.right { justify-content: center; padding-inline: max(2px, calc((100% - 1500px) / 2)); }
.right > #mvBtn { margin-left: 0; }

/* centered page: the whole grid sits in the middle on wide screens */
.app { max-width: 1560px; margin-inline: auto; column-gap: clamp(14px, 2vw, 30px); }
/* nothing below the video: channels, recently watched, search and the score lists are gone (the stream board at the top replaces them) */
.app > aside:first-child { display: none !important; }
#view { width: 100%; margin-inline: auto; }
.stream-shelf, .watch-layout { margin-inline: auto; }

/* less decoration: no glow background, no orbs, calmer shadows and radii */
body { background: #080a0d; }
.empty-player::after, .match-desk::before, .match-desk::after,
.stream-card::before, .stream-card::after, .stream-card-visual::before, .stream-card-visual::after { display: none !important; }
.stream-card, .match-desk, .live-stats-panel, .empty-player, .frame { box-shadow: none !important; }
.live-breathe, .match-live-tag.is-live { animation: none !important; }
.stream-shelf-kicker, .empty-player .eyebrow { display: none; }
.right > button, .right .ads > button, .lgswitch, .lgswitch button { border-radius: 10px; }
.top h1, .ls-section-title, .lg { letter-spacing: .06em; }
.stream-card-state, .stream-card-sport, .stream-shelf-total { letter-spacing: .04em; }

/* player row: field and stats stacked on the left, the video takes the rest */
.watch-layout { display: flex !important; align-items: flex-start; gap: 14px; width: 100% !important; margin-left: 0 !important; }
.watch-layout > .frame { flex: 1 1 0; min-width: 0; grid-row: auto; }
.watch-side { display: flex; flex-direction: column; gap: 12px; flex: 0 0 280px; width: 280px; }
.watch-side:not(:has(> :not([hidden]))) { display: none; }
.live-stats-panel, .live-field-panel { width: 100%; box-sizing: border-box; }
.live-stats-panel[hidden], .live-field-panel[hidden] { display: none !important; }
.live-field-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px 13px; border: 1px solid rgba(199,243,107,.14); border-radius: 12px; background: rgba(12,16,12,.85); }
.live-field-panel .field { margin: 0; }
.lf-sit { color: #e5eadd; font-size: 12px; font-weight: 700; }
.lf-sit.rz { color: #ff948b; }
@media (max-width: 999px) {
  .watch-layout { flex-direction: column; align-items: stretch; }
  .watch-layout > .frame { flex: 0 0 auto; width: 100%; }
  .watch-side { flex-basis: auto; width: auto; }
}

/* block-ads popup close button */
#adsMenu .ads-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
#adsMenu .ads-x:hover { border-color: var(--accent); }
#adsMenu p { padding-right: 34px; }

/* Fantasy/Chat rail archived (hidden; its code is still in index.html). One column, wider and tighter. */
.app > .fanside, #rightRailToggle { display: none !important; }
.app, .app.right-rail-collapsed { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "stage" !important; max-width: 1500px; }
.app > main { padding: 14px 20px 24px; }
#view { max-width: none; }
.stream-shelf { margin: 0 0 14px; }
.stream-shelf-head { margin-bottom: 8px; }

/* the college football icon is dark: show it light unless its button is selected */
#lgCfb:not(.on) img { filter: invert(1) brightness(1.1); }
.stream-card-generic-mark img[src$="cfb-logo.png"] { filter: invert(1) drop-shadow(0 4px 10px rgba(0,0,0,.35)) !important; }
.rail-edge-toggle { display: none !important; }

/* ---------- phones: one column, nothing clipped, fewer controls ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
@media (max-width: 700px) {
  .top { grid-template-columns: 1fr; gap: 6px; padding: 10px 14px 6px; }
  .top .brandrow { justify-content: space-between; }
  .top .mid { justify-content: flex-start; gap: 8px; }
  #updated { display: none; }                       /* the "last updated" text only matters on a desktop */
  #voteBtn { padding: 6px 10px; font-size: 11px; }
  .lgswitch button { padding: 7px 12px; min-width: 40px; }
  .right { justify-content: flex-start; padding: 6px 14px; gap: 4px; scroll-snap-type: x proximity; }
  .right > button, .right .ads > button { min-height: 38px; padding-inline: 13px; font-size: 12px; scroll-snap-align: start; }
  #castScreenBtn { display: none; }                  /* casting the tab to a TV is a desktop thing */
  .right > #mvBtn, .right > #adminBtn { margin-left: 0; }
  .app > main { padding: 10px 12px 20px; }
  .stream-shelf-total { display: none; }
  .stream-track { gap: 8px; scroll-snap-type: x mandatory; }
  .stream-card { flex: 0 0 min(78vw, 270px); scroll-snap-align: start; }
  .stream-card-visual { min-height: 64px; }
  .stream-card-generic-mark img { height: 48px !important; }
  h2.title, .title { font-size: 22px; line-height: 1.15; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; min-height: 38px; white-space: nowrap; }
  /* video first, then field and stats below it, short and scrollable so the page stays calm */
  .watch-layout { flex-direction: column-reverse; gap: 10px; }
  .watch-layout > .frame { flex: 0 0 auto; width: 100%; }
  .watch-side { width: 100%; flex-basis: auto; }
  .live-stats-panel { max-height: 260px; height: auto !important; }
  .live-field-panel { padding: 10px 11px; }
  /* dialogs and popups fit the screen */
  dialog { max-width: calc(100vw - 20px); width: calc(100vw - 20px); max-height: 88dvh; }
  #adsMenu { padding: 16px; }
  .banner, #consent, .cookie { font-size: 12px; }
}
@media (max-width: 420px) {
  .top h1 span:last-child { letter-spacing: .08em; }
  .liveline { font-size: 11px; }
}

/* ---------- admin on phones ---------- */
@media (max-width: 700px) {
  dialog.wide, #opsDlg, #loginDlg { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; padding: 14px; box-sizing: border-box; overflow: auto; }
  #loginDlg { inset: auto 0 0 0; height: auto; border-radius: 16px 16px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  #loginDlg input, #opsDlg input, #opsDlg select { font-size: 16px; min-height: 44px; }   /* 16px stops iOS zooming into the field */
  #loginForm > div { gap: 10px; }
  #loginForm button, #opsDlg button { min-height: 44px; }
  .opshead { position: sticky; top: -14px; z-index: 2; margin: -14px -14px 10px; padding: 12px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
  .opshead h3 { font-size: 16px; }
  .tabs2 button { flex: 1; }
  .tblwrap { max-height: 52dvh; -webkit-overflow-scrolling: touch; }
  table { font-size: 12px; }
  th, td { padding: 8px 9px; }
  .sendbox { flex-direction: column; align-items: stretch; }
  dialog .sendbox input#sendText { min-width: 0; width: 100%; }
  .sendbox button, .sendbox .filebtn { width: 100%; text-align: center; }
  #adminInfo { display: none; }
  #opsBtn, #refreshBtn, #toggle { flex: 0 0 auto; }
}

/* fullscreen fallback for phones that can't fullscreen an element */
.frame.pfs, .mvbody.pfs { position: fixed !important; inset: 0; z-index: 3000; width: 100vw !important; height: 100dvh; max-height: none; aspect-ratio: auto; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; margin: 0; }
html.pfs-on, html.pfs-on body { overflow: hidden; }

/* phones and touch screens: no blur layers or heavy shadows (they cost a lot of memory next to a playing video) */
@media (max-width: 700px), (hover: none) {
  *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .stream-card, .stream-shelf, .live-stats-panel, .live-field-panel, .frame { box-shadow: none !important; animation: none !important; }
  .stream-card-visual { background-image: none; }
}