/* =====================================================================
   Winter Ball Updates · stream.css (operator 2026-11-01): "Lose the watch button. Just put a red play button inside a circle. Not just
   there. Everywhere. Lose the words. Streamline everything accordingly on mobile." Loads last.
   ===================================================================== */

/* ---------- the play button, every width: a 28 px red circle (operator: "could be 30 percent smaller"), smaller only inside tiny cells ---------- */
.wbtn, .wbtn.wrow, .wbtn.whero, .wbtn.wnight, .wbtn.winl, .wbtn.wres, .wbtn.wlog, .wbtn.wtile, .wbtn.wbox, .gc .gf > .wbtn.wcard {
  width:28px; min-width:28px; height:28px; min-height:28px; padding:0; gap:0; border:0; border-radius:50%; background:#BE2A32; color:#fff; display:inline-grid; place-items:center; flex:none; box-shadow:none; }
.wbtn:hover, .gc .gf > .wbtn.wcard:hover, .wbtn.whero:hover { background:#9E1F27; color:#fff; }
.wbtn .wi { display:block; width:11px; height:11px; font-size:0; color:#fff; }
.wbtn.wres, .wbtn.wlog, .wbtn.winl { width:24px; min-width:24px; height:24px; min-height:24px; } .wbtn.wres .wi, .wbtn.wlog .wi, .wbtn.winl .wi { width:9px; height:9px; }
.wbtn.wtile { width:20px; min-width:20px; height:20px; min-height:20px; } .wbtn.wtile .wi { width:8px; height:8px; }
/* "Full game ↗" says what it is, so it keeps its words beside the circle */
.fullg { display:inline-flex; align-items:center; gap:5px; } .fullg .fg-i { width:20px; height:20px; flex:none; border-radius:50%; background:#BE2A32; color:#fff; display:inline-grid; place-items:center; } .fullg .fg-i .wi { display:block; width:8px; height:8px; }
.gc .gf > .wbtn.wcard { justify-self:center; align-self:center; margin:auto; }
/* the play mark on a video's own thumbnail is the same button */
.clip-media .cthumb::after, .thumb::after, .pod-play { color:transparent; font-size:0; border-radius:50%; text-shadow:none;
  background:#BE2A32 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 1.6v8.8L10.8 6z' fill='%23fff'/%3E%3C/svg%3E") center / 46% no-repeat; }
.clip-media .cthumb::after, .thumb::after { content:""; }
.thumb::after { inset:auto; left:50%; top:50%; translate:-50% -50%; width:26px; height:26px; }
.pod-th:hover .pod-play, .pod-th:focus-visible .pod-play { background-color:#9E1F27; }

/* ---------- top performers, every width: one compact row each (operator: "looks huge"): a small logo and a thin club accent, no colour block;
   the text stops short of the play button ---------- */
.stories { display:grid; grid-template-rows:none; grid-auto-rows:auto; gap:6px; align-content:space-between; }
.story-w { min-height:0; }
.story-w > .story, .story { grid-template-columns:50px minmax(0, 1fr); min-height:64px; height:auto; align-items:center; border-radius:10px; border-left:3px solid var(--team, var(--lc)); }
.story .sb { background:none; display:grid; place-items:center; align-self:stretch; }
.story .sb .logo-badge { --ls:40px; width:40px; height:40px; padding:3px; }
.story .txt { padding:8px 10px 8px 2px; }
.story-w:has(> .wbtn.wstory) > .story { padding-bottom:0; } .story-w:has(> .wbtn.wstory) > .story .txt { padding-right:44px; }
.story .k { font:600 10.5px/1.2 var(--fb); letter-spacing:.06em; margin-bottom:2px; }
.story b, .story .d { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.story b { font:700 15.5px/1.12 var(--fd); font-stretch:78%; letter-spacing:0; margin-bottom:1px; }
.story .d { font:500 12.5px/1.2 var(--fb); }
.wbtn.wstory { right:10px; bottom:auto; top:50%; translate:0 -50%; }

/* ---------- the stories card, every width: as tall as its tallest slide (no fixed height, nothing absolute to clip), its text near the top of the
   photo, so the row is only as tall as it needs ---------- */
.hrow { height:auto; }
.hrow .rot, .rot.fans { min-height:236px; height:auto; display:grid; }
.rot .slide { position:relative; inset:auto; grid-area:1 / 1; align-self:end; width:100%; min-width:0; box-sizing:border-box; padding:32px 20px 34px; }
.rot .slide .hero-k { margin-bottom:6px; font-size:11px; padding:3px 7px; }
.rot .slide h2 { font-size:clamp(24px, 2.2vw, 30px); line-height:1.02; } .rot .slide h2.long { font-size:clamp(22px, 1.9vw, 27px); line-height:1.04; }
.rot .slide p { font-size:14px; line-height:1.32; margin-top:5px; }
.rot .slide .hero-acts { margin-top:8px; display:flex; flex-wrap:nowrap; align-items:center; gap:6px; max-width:100%; }
.rot .slide .hero-acts > .btn { height:34px; min-height:34px; padding:0 12px; font-size:12.5px; white-space:nowrap; flex:0 1 auto; min-width:0; }
.rot .fan-cap { font-size:10px; padding:2px 6px; bottom:5px; line-height:1.2; }
/* the tile beside them follows the same height */
.hrow .slogan { padding:12px 14px; gap:8px; min-height:0; }
.hrow .slogan .big { font-size:28px; line-height:1; } .hrow .slogan .big::after { margin-top:6px; }
.hrow .slogan .caps { font-size:9.5px; line-height:1.55; letter-spacing:.14em; margin:0; }
.hrow .slogan .acts { gap:6px; } .hrow .slogan .acts .btn { height:32px; min-height:32px; padding:0 10px; font-size:12px; }

/* above phones: the taller rows, a darker photo now the text sits higher on it, and the close button clear of the tile's buttons */
@media (min-width: 821px) {
  .story-w > .story, .story { min-height:72px; }
  .rot.fans::before { background:linear-gradient(0deg, rgb(15 35 64 / .94) 0, rgb(15 35 64 / .86) 55%, rgb(15 35 64 / .62) 82%, rgb(15 35 64 / .4)); }
}
@media (min-width: 821px) and (max-width: 1280px) {
  .hrow .slogan { padding-right:54px; }
  .numtile .big { font-size:clamp(19px, 1.9vw, 24px); white-space:nowrap; }
}
.numtile { min-width:0; } .numtile .big .u { font-size:.5em; margin-left:1px; }

/* a clip's row has its play mark on the thumbnail: no second one at the end */
.cliprow { grid-template-columns:72px minmax(0, 1fr); } .cliprow .chev { display:none; }

/* ---------- phones ---------- */
@media (max-width: 820px) {
  /* no game of the day on phones: no box and no room kept for it */
  .gotd { display:none !important; }
  /* a small button still takes a 40 px tap */
  .wbtn::before { content:""; position:absolute; left:50%; top:50%; translate:-50% -50%; width:40px; height:40px; }
  .wbtn:not(.wstory):not(.wtile) { position:relative; }

  /* the stories card */
  .hrow .rot, .rot.fans { min-height:336px; }
  .rot .slide { padding:30px 14px 42px; }
  .rot .slide h2, .rot .slide h2.long { font-size:25px; line-height:1; padding:6px 9px; }
  .rot .slide p { font-size:13.5px; line-height:1.3; padding:5px 9px; }
  .rot .slide .hero-acts { gap:5px; } .rot .slide .hero-acts > .btn { height:36px; min-height:36px; padding:0 10px; }
  .rot .slide .hero-acts > a[href="#daily/scores"] { display:none; }

  .story .k { font-size:10px; } .story b { font-size:15px; } .story .d { font-size:11.5px; }

  /* the page below, to the same scale: headings first (shared by every phone page) */
  .page-h h1, .l2-head h1, .l2-ph h1, .l2-banner h1, .flood h1 { font-size:25px; line-height:1.05; }
  .card-head h2, .card-head h3, .l2-card-h h2 { font-size:18px; line-height:1.15; }
  .card-head { min-height:0; margin-bottom:5px; padding-bottom:3px; }
  .card-head a, .card-head .more { font-size:12.5px; }
  .grid, .slot-row { margin-bottom:8px; gap:8px; } .toolrow { margin-bottom:6px; }
  section.card { padding:9px 10px; } .card-foot { font-size:11px; padding-top:3px; }
  .chip { height:28px; min-height:28px; padding:0 9px; font-size:12px; position:relative; } .chip::after { content:""; position:absolute; left:0; right:0; top:-6px; bottom:-6px; }
  .chipbar { gap:5px; margin-bottom:4px; } .pill-tabs { margin-bottom:4px; }

  /* the welcome band */
  .slogan, .hrow .slogan { padding:10px 14px; gap:6px 12px; } .hrow .slogan .big { font-size:24px; }
  .hrow .slogan .acts { flex-direction:row; width:100%; margin:0; } .hrow .slogan .acts .btn { width:auto; max-width:none; height:36px; min-height:36px; font-size:12.5px; }

  /* blog cards: the headline, two lines at most, and the way in */
  .bl-row, .bl-row.bl-n2, .bl-row.bl-n1 { gap:6px; margin-bottom:8px; }
  .bl-card .bl-cb { padding:7px 10px 6px; gap:2px; } .bl-card .sd-k { font-size:10px; } .bl-card .bl-ct { font-size:16px; line-height:1.18; -webkit-line-clamp:2; text-wrap:pretty; }
  .bl-card .bl-sd { display:none; } .bl-card .sd-go { padding-top:2px; font-size:12px; } .bl-card .bl-cv { aspect-ratio:4 / 1; }

  /* player rows */
  .lr { min-height:0; padding:4px 0; gap:7px; grid-template-columns:16px 26px minmax(0, 1fr) auto; } .lr.nr { grid-template-columns:26px minmax(0, 1fr) auto; }
  .lr:has(> .wrow) { grid-template-columns:16px 26px minmax(0, 1fr) auto auto; } .lr.nr:has(> .wrow) { grid-template-columns:26px minmax(0, 1fr) auto auto; }
  .lr > .wrow { margin-left:4px; }
  .lr .logo-badge { --ls:26px; width:26px; height:26px; } .lr .who { font-size:13.5px; line-height:1.15; } .lr .sub { font-size:11px; line-height:1.2; } .lr .n { font-size:13px; }
  .lr .v .war { font-size:15px; } .lr .v small { font-size:8px; letter-spacing:.05em; margin-top:1px; } .lr .v { font-size:10.5px; line-height:1.1; }
  /* tonight's games */
  .gl { min-height:0; padding:4px 0; } .gl .tt { font-size:13.5px; line-height:1.15; } .gl .tt small { margin-top:3px; font-size:9.5px; } .gl .tm3 { font-size:13px; min-height:21px; } .gl .tm3 .logo-badge { --ls:20px; width:20px; height:20px; } .watchl { font-size:11px; margin-top:1px; } .gl .sub { font-size:11px; }
  /* tables */
  .table th { font-size:9.5px; padding:3px 5px; } .table td, .table td.r, .table td.sub, .table td.nw { font-size:12.5px; padding:3px 5px; line-height:1.18; } .table td.rank { font-size:13px; padding:3px 5px; }
  .table .logo-badge { --ls:20px; width:20px; height:20px; } .table a.tm { font-size:12.5px; } .table td .sub, .table td.sub { font-size:11px; } .table .war { font-size:14px; }
  /* the photo of the night */
  .place-fig .pf-ph { height:120px; } .place-fig figcaption { padding:6px 10px; } .place-fig .cap { font-size:13px; line-height:1.2; } .place-fig .where { font-size:11.5px; line-height:1.25; }
  /* clips */
  .cliprow { grid-template-columns:62px minmax(0, 1fr); gap:8px; padding:4px 0; font-size:13px; line-height:1.15; } .cliprow .thumb { height:36px; } .cliprow .sub { font-size:11px; line-height:1.2; } .cliprow b { font-size:13px; line-height:1.15; }
  /* numbers of the night: three across; the figure scales with the phone, so 67,286 or 12:40 a.m. stays inside its tile */
  .nums { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:5px; } .numtile { padding:6px 7px; min-width:0; overflow:hidden; }
  .numtile .big { font-size:clamp(15px, 4.9vw, 21px); line-height:1.05; white-space:nowrap; } .numtile .big .u { font-size:.5em; margin-left:1px; }
  .numtile .lbl { font-size:11px; line-height:1.2; margin-top:2px; } .numtile .det { font-size:10px; line-height:1.2; padding-top:3px; }
  /* your MLB teams */
  .picker { gap:5px; } .pick { padding:4px 3px; font-size:10.5px; min-height:44px; } .pick .logo-badge, .pick img { --ls:20px; width:20px; height:20px; }
}
/* narrow phones: the arrows go, so one row of buttons still fits in Spanish */
@media (max-width: 360px) {
  .rot .slide .hero-acts .arr { display:none; }
  .rot .slide .hero-acts > .btn { padding:0 8px; font-size:12px; }
}