/* Bills tracker: the full-screen views (game, preview, standings, scores, player card, picks), the live taps and the
   extra celebrations. Finger targets are about 0.4 inch (roughly 64 px) on the 7.5 inch rack panel (1280 px wide).
   Colours and fonts come from style.css. */

#ov { position: absolute; inset: 0; z-index: 8; display: none; }
#ov.on { display: block; }
.layer { position: absolute; inset: 0; display: flex; background: linear-gradient(160deg, #0A2155 0%, #061a3f 55%, #041232 100%); animation: layerIn .22s ease-out both; }
@keyframes layerIn { from { opacity: 0; transform: translateY(14px); } }
.layer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 2; background: linear-gradient(var(--red) 0 3px, #fff 3px 4px, var(--red) 4px); }
.gbody { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

/* side rail of tabs: six tabs fill the 400 px height, about 66 px each */
.rail { width: 150px; flex: none; display: flex; flex-direction: column; background: rgba(0, 0, 0, .3); border-right: 1px solid var(--line); padding-top: 5px; }
.rt { flex: 1; border: 0; border-left: 5px solid transparent; background: none; color: var(--soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font: 800 14px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; }
.rt svg { width: 24px; height: 24px; }
.rt.on { color: #fff; background: rgba(26, 79, 181, .6); border-left-color: var(--red); }
.rt.off { opacity: .3; }

/* header with the big close button */
.vh { height: 64px; flex: none; margin-top: 5px; display: flex; align-items: center; padding-left: 22px; border-bottom: 1px solid var(--line); }
.vt { display: flex; align-items: baseline; min-width: 0; white-space: nowrap; overflow: hidden; }
.vt b { font-size: 30px; font-weight: 900; font-stretch: 72%; text-transform: uppercase; letter-spacing: .02em; }
.vt > span { margin-left: 16px; font-size: 17px; font-weight: 600; color: var(--soft); }
.gscore { display: inline-flex; align-items: center; gap: 12px; }
.gscore .logo, .gscore .badge { width: 38px; height: 38px; }
.sc2 { font-size: 44px; font-weight: 900; font-stretch: 68%; line-height: 1; min-width: 40px; text-align: center; opacity: .62; font-variant-numeric: tabular-nums; }
.sc2.w { opacity: 1; }
.dash { font-size: 28px; color: var(--dim); }
.x { margin-left: auto; width: 84px; height: 64px; flex: none; border: 0; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; position: relative; }
.x::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -3px; }   /* finger area 67 px tall (0.4 in): 3 px into the empty top margin of the view below */
.x svg { width: 30px; height: 30px; }

.tabv { flex: 1; min-height: 0; padding: 14px 22px; overflow: hidden; }
.msg { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.msg b { font-size: 28px; font-weight: 800; color: var(--soft); }
.msg span { margin-top: 8px; font-size: 18px; color: var(--dim); }
.none { font-size: 17px; color: var(--dim); padding: 10px 0; }
.none.big { font-size: 26px; text-align: center; padding-top: 70px; }
h4 { margin: 0 0 6px; font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.scroll { overflow-y: auto; touch-action: pan-y; }
.scroll-x { overflow-x: auto; touch-action: pan-x; }
.scroll::-webkit-scrollbar { width: 7px; } .scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .4); border-radius: 4px; }
.scroll-x::-webkit-scrollbar { height: 7px; } .scroll-x::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .4); border-radius: 4px; }
.k { height: 62px; min-width: 62px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .17); color: #fff; font: 800 26px var(--font); }
.k.big { padding: 0 26px; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; background: var(--royal2); }
.k:disabled { opacity: .3; }

/* Summary */
.t-sum { display: flex; gap: 26px; }
.sl { width: 440px; flex: none; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.sr { flex: 1; min-width: 0; padding-right: 8px; }
.ls { width: 100%; border-collapse: collapse; text-align: center; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ls th { font-size: 14px; font-weight: 800; color: var(--dim); letter-spacing: .1em; padding: 2px 4px 6px; }
.ls td { padding: 6px 4px; border-top: 1px solid var(--line); color: var(--soft); }
.ls td.tm { text-align: left; color: #fff; white-space: nowrap; }
.ls td.tm .logo, .ls td.tm .badge { vertical-align: middle; margin-right: 10px; }
.ls td.tm b { font-weight: 900; font-stretch: 75%; font-size: 26px; vertical-align: middle; }
.ls td.tot, .ls th.tot { color: #fff; font-weight: 900; font-size: 32px; font-stretch: 70%; border-left: 1px solid var(--line); }
.ls th.tot { font-size: 14px; }
.ls.big { font-size: 30px; } .ls.big td.tot { font-size: 40px; }
.ls tr.win td.tot { color: #FFE27A; }
.recap h3 { margin: 4px 0 6px; font-size: 19px; font-weight: 800; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.recap p { margin: 0; font-size: 16px; line-height: 1.35; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sl:has(.pkl) .recap h3, .sl:has(.pkl) .recap p { -webkit-line-clamp: 2; }   /* with the family picks bar, two lines each so the bar is never cut off at the bottom */
.pkl { display: flex; align-items: baseline; gap: 12px; width: 100%; height: 56px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(255, 226, 122, .14); color: #fff; text-align: left; align-items: center; }
.pkl span { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FFE27A; }
.pkl b { font-size: 24px; font-weight: 900; }
.pkl em { font-style: normal; font-size: 16px; color: var(--soft); }
.sr h4 { position: sticky; top: 0; background: #07204f; padding: 2px 0 6px; z-index: 1; margin: 0; }
.sp { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 5px 0 5px 12px; border-top: 1px solid var(--line); border-left: 4px solid transparent; }
.sp.mine { border-left-color: #3D8BFF; } .sp.them { border-left-color: #FFD23F; }
.spq { width: 54px; font-size: 20px; font-weight: 900; line-height: 1.1; flex: none; }
.spq span { display: block; font-size: 14px; font-weight: 600; color: var(--dim); }
.sp .logo, .sp .badge { width: 38px; height: 38px; flex: none; }
.spx { flex: 1; min-width: 0; }
.spx b { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.spx span { display: block; font-size: 17px; line-height: 1.2; color: #fff; }
.sps { font-size: 28px; font-weight: 900; font-stretch: 72%; white-space: nowrap; flex: none; }
.sps b { font-weight: 900; }

/* Team stats */
.tt { display: flex; justify-content: space-between; align-items: center; height: 40px; margin-bottom: 4px; }
.tt div { display: flex; align-items: center; gap: 10px; } .tt b { font-size: 24px; font-weight: 900; font-stretch: 72%; text-transform: uppercase; }
.tcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.tr { display: grid; grid-template-columns: 62px 1fr 128px 1fr 62px; align-items: center; height: 37px; gap: 6px; }   /* seven rows end on the view's bottom margin */
.tr .v { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tr .v.l { text-align: right; } .tr .v.r { text-align: left; }
.tr .lb { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); text-align: center; line-height: 1.1; }
.bar { height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .1); display: flex; overflow: hidden; }
.bar.l { justify-content: flex-end; }
.bar i { display: block; height: 100%; border-radius: 7px; }

/* Players */
.t-ply { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 20px; }
.pl { display: flex; align-items: center; gap: 10px; height: 56px; border-top: 1px solid var(--line); min-width: 0; }
.pl img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 10%; background: rgba(255, 255, 255, .14); flex: none; }
.pl div { min-width: 0; } .pl b { display: block; font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl span { display: block; font-size: 14px; line-height: 1.15; color: var(--soft); }

/* Win chance */
.wpk { display: flex; align-items: center; gap: 18px; height: 36px; }
.you { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); flex: none; }
.you .logo, .you .badge { width: 26px; height: 26px; }
#wpRead { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#wpRead em { font-style: normal; font-size: 28px; font-weight: 900; color: #FFE27A; margin-right: 8px; }
.wpc { height: 224px; touch-action: none; position: relative; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.wpc svg { width: 100%; height: 100%; display: block; overflow: visible; }   /* a scoring dot at 100% is drawn whole, not cut at the top */
.wpx { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--dim); margin-top: 6px; }
.wpx span { display: flex; align-items: center; gap: 6px; }

/* Highlights. The player's box (.hp) is 560x315 here, 16:9. The player (.hpv) stands in it at the clip's own shape (--ar, set by
   ui-app.js; 16:9 fills the box, a 9:16 phone clip stands 177x315 in the middle) and the clip's picture, blurred and dimmed (.hbg),
   fills the rest. --bgk zooms that picture past the black bars YouTube's 4:3 thumbnail puts beside a tall clip. */
.t-hi { padding: 8px 18px; }
.hl { --ar: 1.7778; --bgk: 1; display: flex; gap: 18px; width: 100%; height: 100%; }
.hp { position: relative; width: 560px; height: 100%; flex: none; display: flex; justify-content: center; background: #000; border-radius: 12px; overflow: hidden; }
.hbg { position: absolute; inset: -40px; background: 50% 50% / cover no-repeat #000; transform: scale(var(--bgk)); filter: blur(22px) brightness(.58) saturate(1.6); }
.hpv { position: relative; height: 100%; aspect-ratio: var(--ar); flex: none; background: #000; box-shadow: 0 0 36px rgba(0, 0, 0, .55); }
.hpv iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cov { position: absolute; inset: 0; background: #000; }
.cov.wait { pointer-events: none; }
.cov img { width: 100%; height: 100%; object-fit: cover; opacity: .5; display: block; }
.covt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 0 20px; }
.covt span { font-size: 21px; font-weight: 800; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.pbtn { width: 96px; height: 96px; border: 0; border-radius: 50%; padding: 26px 22px 26px 30px; background: rgba(198, 12, 48, .94); color: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.pbtn svg { width: 100%; height: 100%; display: block; }
.hc { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hn { font-size: 16px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #FFE27A; }
.ht { margin-top: 8px; font-size: 22px; font-weight: 800; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hch { margin-top: 6px; font-size: 16px; color: var(--soft); }
.hb { margin-top: auto; display: flex; gap: 10px; }
.hb .cb.big { flex: 1; width: auto; height: 68px; background: var(--royal2); }
.cb:disabled { opacity: .28; }
.hs { display: block; margin-top: 6px; min-height: 18px; font-style: normal; font-size: 15px; color: var(--dim); }
.hs + .hfb { margin-top: auto; }   /* a single video has no Previous/Next: the Full screen button sits at the foot */
.hfb { margin-top: 10px; height: 68px; flex: none; border: 0; border-radius: 14px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px;
  font: 900 19px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.hfb svg { width: 28px; height: 28px; }
.hq { width: 196px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.hx { display: none; }   /* Exit: Full screen only */
.qrt { background: #fff; border-radius: 10px; line-height: 0; overflow: hidden; }
.qrt svg { display: block; }
.hq .qrt svg { width: 182px; height: 182px; }

/* Full screen: the same box, moved over the whole 1280x400 screen. Only classes change, so the player keeps playing.
   The game body stops being the box's frame of reference (static), so .hp, .hc and .hq are placed against the whole view.
   The player fills the full height at its shape (16:9 = 711x400, 9:16 = 225x400); the panels either side are --side wide. */
.layer.game.hfs .gbody { position: static; z-index: auto; }   /* beats `.layer .gbody` (hero section, further down); z-index too, as a flex item keeps its own layer even when static */
.hl.fs { --side: calc(640px - 200px * var(--ar)); }
.hl.fs .hp { position: absolute; inset: 0; z-index: 5; width: auto; height: auto; border-radius: 0; }
.hl.fs .hpv { box-shadow: 0 0 60px rgba(0, 0, 0, .7); }
.hl.fs .hc, .hl.fs .hq { position: absolute; z-index: 6; top: 0; bottom: 0; width: var(--side); animation: fsIn .25s ease-out both; }
@keyframes fsIn { from { opacity: 0; } }
.hl.fs .hc { left: 0; padding: 24px 18px 18px; background: linear-gradient(90deg, rgba(2, 10, 30, .55), rgba(2, 10, 30, .2)); }
.hl.fs .hq { right: 0; padding: 18px; justify-content: flex-start; background: linear-gradient(270deg, rgba(2, 10, 30, .55), rgba(2, 10, 30, .2)); }
.hl.fs .ht { -webkit-line-clamp: 6; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.hl.fs .hb .cb.big { height: 76px; background: rgba(26, 79, 181, .92); }
.hl.fs .hfb { display: none; }
.hx { width: 100%; height: 84px; flex: none; border: 0; border-radius: 14px; background: var(--red); color: #fff; align-items: center; justify-content: center; gap: 12px;
  font: 900 24px var(--font); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.hx svg { width: 30px; height: 30px; }
.hl.fs .hx { display: flex; }
.hl.fs .hq .qrt { margin-top: auto; }
.hl.fs .hq .qrt svg { width: 160px; height: 160px; }
/* a phone-shaped (or square) clip leaves wide panels: a bigger title and buttons on the left, the QR code big on the right, Exit top right */
.hl.fs.tall .hc { padding: 34px 40px 26px; }
.hl.fs.tall .hn { font-size: 18px; }
.hl.fs.tall .ht { margin-top: 12px; font-size: 32px; line-height: 1.15; -webkit-line-clamp: 5; }
.hl.fs.tall .hch { margin-top: 10px; font-size: 18px; }
.hl.fs.tall .hb { gap: 14px; }
.hl.fs.tall .hb .cb.big { height: 84px; }
.hl.fs.tall .hb .cb.big svg { width: 40px; height: 40px; }
.hl.fs.tall .hq { flex-direction: row; align-items: center; gap: 22px; padding: 18px 18px 18px 40px; }
.hl.fs.tall .hx { position: absolute; top: 18px; right: 18px; width: 200px; }
.hl.fs.tall .hq .qrt { margin-top: 0; flex: none; }
.hl.fs.tall .hq .qrt svg { width: 230px; height: 230px; }
.hl.fs.tall .hq > span { text-align: left; font-size: 14px; }
.hl.fs.tall .hq > span b { font-size: 22px; line-height: 1.2; }
.hq > span { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); line-height: 1.2; }
.hq > span b { display: block; margin-top: 3px; font-size: 16px; font-weight: 800; letter-spacing: 0; text-transform: none; color: #fff; }
.hqb { display: flex; gap: 36px; align-items: center; justify-content: center; width: 100%; height: 100%; }
.hqm { max-width: 520px; }
.hqm b { display: block; font-size: 30px; font-weight: 900; line-height: 1.15; color: #fff; }
.hqm strong { display: block; margin-top: 6px; font-size: 30px; font-weight: 900; color: #FFE27A; }
.hqm span { display: block; margin-top: 18px; font-size: 18px; line-height: 1.25; color: var(--soft); }
.hqm em { display: block; margin-top: 4px; font-style: normal; font-size: 15px; color: var(--dim); }

/* Replay */
.t-rep { padding: 8px 22px; }
/* rows: 42 + 105 + 64 + 24 + 64 with 4 px gaps = 315, the panel's height inside its 8 px margins; the play text has room for its two lines */
.rp { display: flex; flex-direction: column; gap: 4px; height: 100%; }
.rpi { display: flex; align-items: center; gap: 22px; height: 42px; flex: none; }
.rpc { width: 160px; display: flex; align-items: baseline; gap: 10px; }
.rq { font-size: 32px; font-weight: 900; font-stretch: 72%; } .rt2 { font-size: 24px; font-weight: 700; color: var(--soft); font-variant-numeric: tabular-nums; }
.rps { display: flex; align-items: center; gap: 10px; font-size: 38px; font-weight: 900; font-stretch: 70%; flex: none; }
.rps em { font-style: normal; font-size: 18px; font-weight: 800; color: var(--soft); letter-spacing: .04em; }
.rps b { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; } .rps span { color: var(--dim); font-size: 26px; }
.rps .logo, .rps .badge { width: 34px; height: 34px; }
.pop { animation: pop .6s ease-out; } @keyframes pop { 30% { transform: scale(1.35); color: #FFE27A; } }
.rpw { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); min-width: 0; }
.rpw .bar { flex: 1; height: 12px; background: none; border-radius: 6px; }
.rpw .bar i { background: #fff; transition: width .6s ease; border-radius: 0; } .rpw .bar em { flex: 1; }
.rpw b { font-size: 24px; color: #fff; min-width: 56px; text-align: right; font-weight: 900; letter-spacing: 0; }
.field.rpf { height: 105px; margin-top: 0; flex: none; --ms: .8s; }
.rpf .los, .rpf .fd { transition: none; }
.rpf .bm { top: 14px; }
.trail { position: absolute; top: 0; bottom: 0; opacity: 0; transition: opacity .3s; pointer-events: none; }
.flash { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; }
.flash.on { display: flex; animation: flashIn .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.flash span { padding: 2px 30px 4px; border-radius: 12px; font-size: 54px; font-weight: 900; font-stretch: 66%; text-transform: uppercase; letter-spacing: .05em; text-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.flash.mine span { background: rgba(26, 79, 181, .92); } .flash.them span { background: rgba(70, 80, 105, .92); }
@keyframes flashIn { from { transform: scale(1.8); opacity: 0; } }
.rpp { height: 64px; flex: none; }
.rpp b { display: block; font-size: 14px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); height: 17px; }
.rpp span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 19px; line-height: 1.22; }
.rpn { height: 24px; flex: none; position: relative; touch-action: none; }
.trk { position: absolute; left: 0; right: 0; top: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: 4px; }
.mk { position: absolute; top: -5px; width: 6px; height: 18px; margin-left: -3px; border-radius: 3px; }
.mk.mine { background: #3D8BFF; } .mk.them { background: #FFD23F; }
.rpb { display: flex; align-items: center; gap: 10px; height: 64px; flex: none; }
.cb { width: 64px; height: 64px; flex: none; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .15); color: #fff; display: flex; align-items: center; justify-content: center; font: 900 22px var(--font); }
.cb svg { width: 28px; height: 28px; }
.cb.big { width: 88px; background: var(--red); } .cb.big svg { width: 34px; height: 34px; }
.spd { display: flex; gap: 6px; flex: none; margin-right: 6px; }
.cb.sp.on { background: var(--royal2); }
.chips { flex: 1; min-width: 0; display: flex; gap: 8px; padding-bottom: 2px; }
.chip { flex: none; height: 62px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; text-align: left; border-left: 5px solid transparent; }
.chip b { display: block; font-size: 15px; letter-spacing: .06em; white-space: nowrap; } .chip span { font-size: 22px; font-weight: 900; font-stretch: 75%; }
.chip.mine { border-left-color: #3D8BFF; } .chip.them { border-left-color: #FFD23F; }
.chip.on { background: var(--royal2); }

/* Standings */
.dv h4 { margin-bottom: 4px; }
.st { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.st th { font-size: 13px; font-weight: 800; color: var(--dim); letter-spacing: .1em; text-align: right; padding: 0 8px 4px; }
.st th.tm, .st td.tm { text-align: left; }
.st td { text-align: right; padding: 0 8px; border-top: 1px solid var(--line); font-weight: 700; }
.st td.tm { white-space: nowrap; }
.st td.tm i { display: inline-block; width: 22px; font-style: normal; color: var(--dim); font-size: .8em; }
.st td.tm .logo, .st td.tm .badge { vertical-align: middle; margin-right: 10px; }
.st td.tm b { font-weight: 900; vertical-align: middle; }
.st tr.us td { background: rgba(26, 79, 181, .45); }
.st.big { font-size: 24px; } .st.big td { height: 62px; } .st.big td.tm b { font-size: 28px; font-stretch: 75%; text-transform: uppercase; }
.st.mini { font-size: 16px; } .st.mini td { height: 27px; } .st.mini th { padding-bottom: 1px; font-size: 12px; }
.st.mini .logo, .st.mini .badge { width: 22px; height: 22px; }
.st.mini { table-layout: fixed; } .st.mini th:not(.tm) { width: 84px; }   /* same columns in all four division tables, so W-L, PCT, DIFF and STRK line up down the page */
.four { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; height: 100%; align-content: start; }
.four .dv h4 { margin-bottom: 1px; font-size: 13px; }

/* Scores */
.gbody.wide .tabv { padding: 14px 24px; }
.sg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 12px; }   /* four rows of games end inside the bottom margin */
.gm { height: 71px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; background: rgba(6, 20, 54, .66); }
.gm.bills { box-shadow: inset 0 0 0 3px var(--red); background: rgba(26, 79, 181, .3); }
.rs { flex: 1; min-width: 0; }
.rs .r { display: flex; align-items: center; gap: 8px; height: 33px; }
.rs .r .logo, .rs .r .badge { width: 28px; height: 28px; }
.rs .r b { font-size: 19px; font-weight: 800; width: 48px; } .rs .r span { margin-left: auto; font-size: 25px; font-weight: 900; font-variant-numeric: tabular-nums; }
.gm.post .r:not(.w) { opacity: .55; }
.stt { min-width: 86px; white-space: nowrap; text-align: right; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--soft); }   /* "Tonight 8:15 PM" on one line, no lone "PM" */
.gm.in .stt { color: #FF8099; font-weight: 900; }

/* Preview */
.t-prev { display: grid; grid-template-columns: 340px 1fr 380px; gap: 26px; }
.pv1 .vs { display: flex; align-items: center; gap: 16px; font-size: 26px; font-weight: 300; color: var(--soft); }
.recs { display: flex; gap: 0; margin: 4px 0 0; }
.pv1 .vs > span { width: 30px; text-align: center; }
.recs b { width: 70px; font-size: 22px; font-weight: 900; font-stretch: 72%; text-align: center; }
.recs b:first-child { margin-right: 62px; }   /* each record centred under its 70 px logo: 16 + 30 + 16 between the logos */
.ko { margin-top: 12px; font-size: 24px; font-weight: 800; line-height: 1.1; } .ko b { display: block; font-size: 44px; font-weight: 900; font-stretch: 70%; }
.wh { margin-top: 6px; font-size: 16px; color: var(--soft); }
.pv2 h4:not(:first-child) { margin-top: 10px; }
/* columns: name, position, status badge (as wide as QUESTIONABLE, the badge itself only as wide as its word), body part; so the
   position and body part line up down the list whatever the status */
.ij { display: grid; grid-template-columns: minmax(0, 1fr) 28px 128px 74px; align-items: center; column-gap: 8px; height: 29px; border-top: 1px solid var(--line); font-size: 16px; }
.ij span { justify-self: start; }
.ij b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ij em { font-style: normal; color: var(--dim); font-size: 13px; width: 28px; }
.ij span { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: #5B6475; }
.ij span.out { background: var(--red); } .ij span.dbt { background: #D9662B; } .ij span.que { background: #C99A1B; color: #1b1300; }
.ij i { font-style: normal; font-size: 13px; color: var(--dim); width: 74px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv3 { display: flex; flex-direction: column; min-height: 0; }
.lmr { display: flex; align-items: center; gap: 12px; height: 44px; font-size: 16px; color: var(--soft); }
.lmr i { font-style: normal; width: 30px; text-align: center; border-radius: 6px; padding: 3px 0; font-size: 20px; font-weight: 900; background: #5B6475; color: #fff; }
.lmr.w i { background: var(--royal2); } .lmr.l i { background: var(--red); }
.lmr b { font-size: 28px; font-weight: 900; font-stretch: 72%; color: #fff; }
.pr { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); margin-top: 6px; }
.pr .bar { flex: 1; height: 10px; background: none; } .pr .bar i { background: #fff; border-radius: 0; } .pr .bar em { flex: 1; background: #3A4A6B; }
.pr b { color: #fff; font-size: 16px; }
.art { margin-top: 10px; font-size: 16px; line-height: 1.3; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pvb { margin-top: auto; }

/* Predict button and picks */
.predict { position: absolute; right: 18px; bottom: 22px; z-index: 4; width: 156px; height: 76px; border: 3px solid #fff; border-radius: 16px; background: var(--red); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); line-height: 1.05; }
.predict b { font-size: 24px; font-weight: 900; font-stretch: 70%; text-transform: uppercase; letter-spacing: .06em; }
.predict span { font-size: 15px; font-weight: 700; letter-spacing: .05em; }
.predict em { font-style: normal; font-size: 13px; font-weight: 800; color: #FFE27A; }
.predict.locked { background: #1B2F63; border-color: rgba(255, 255, 255, .6); }
.predict.wide { position: static; width: 100%; height: 72px; flex-direction: row; gap: 12px; box-shadow: none; }
.pkchip { position: relative; margin-right: 12px; height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: rgba(255, 226, 122, .22); color: #FFE27A; font: 800 14px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.pkchip::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; bottom: -17px; }   /* finger area 67 px tall, in the empty space above and below the chip */
.closest { margin-top: 8px; display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 6px 12px; border-radius: 12px; background: rgba(255, 226, 122, .16); white-space: nowrap; }
.closest span { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FFE27A; }
.closest b { font-size: 22px; font-weight: 900; } .closest em { font-style: normal; font-size: 16px; color: var(--soft); }
.pbody { display: flex; flex-direction: column; height: 100%; }
.pw { flex: 1; padding: 14px 24px; }
.pw .q { font-size: 24px; font-weight: 800; color: var(--soft); margin-bottom: 10px; }
.nms { display: flex; flex-wrap: wrap; gap: 10px; max-height: 196px; overflow-y: auto; }
.nm2 { height: 68px; min-width: 150px; padding: 0 22px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .15); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nm2 b { font-size: 26px; font-weight: 800; } .nm2 span { font-size: 15px; color: #FFE27A; font-weight: 700; }
.nm2.new { background: var(--royal2); }
.seeall { margin-top: 14px; height: 56px; padding: 0 24px; border: 0; border-radius: 12px; background: rgba(255, 226, 122, .16); color: #FFE27A; font: 800 18px var(--font); letter-spacing: .05em; text-transform: uppercase; }
.kb { flex: 1; padding: 8px 24px 12px; display: flex; flex-direction: column; gap: 6px; }
.kd { height: 56px; border-radius: 12px; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 34px; font-weight: 800; }
.kd em { font-style: normal; color: var(--dim); font-size: 26px; font-weight: 600; } .kd i { font-style: normal; font-size: 15px; color: var(--dim); }
.kr { display: flex; gap: 7px; justify-content: center; }
.kr .k { width: 100px; height: 58px; padding: 0; font-size: 28px; }
.kr .k.wide { width: 130px; } .kr .k.space { flex: 1; width: auto; font-size: 20px; letter-spacing: .1em; text-transform: uppercase; }
.kr .k.back { width: 150px; font-size: 18px; text-transform: uppercase; } .kr .k.ok { width: 220px; background: #1C9B52; font-size: 22px; text-transform: uppercase; }
.ps { flex: 1; display: flex; gap: 20px; padding: 8px 24px 12px; align-items: stretch; }
.pp { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ph { display: flex; align-items: center; gap: 12px; height: 70px; border-radius: 12px; background: rgba(0, 0, 0, .3); padding: 0 16px; }
.ph span { font-size: 22px; font-weight: 800; text-transform: uppercase; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph b { font-size: 60px; font-weight: 900; font-stretch: 68%; font-variant-numeric: tabular-nums; min-width: 80px; text-align: right; }
.np { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: 1; }
.np .k { height: auto; font-size: 30px; }
.pm { width: 250px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.pm .who { font-size: 28px; font-weight: 900; font-stretch: 75%; text-transform: uppercase; }
.save { width: 100%; height: 84px; border: 0; border-radius: 16px; background: #1C9B52; color: #fff; font: 900 26px var(--font); letter-spacing: .05em; text-transform: uppercase; }
.save:disabled { background: rgba(255, 255, 255, .12); color: var(--dim); }
.back2 { height: 56px; width: 100%; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .13); color: #fff; font: 800 17px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.err { font-size: 16px; font-weight: 700; color: #FFB3C0; }
.pd { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.pd .ok { width: 84px; height: 84px; border-radius: 50%; background: #1C9B52; font-size: 54px; line-height: 84px; font-weight: 900; }
.pd b { font-size: 32px; font-weight: 800; } .pd span { font-size: 19px; color: var(--soft); }
.pd .btns { display: flex; gap: 16px; margin-top: 10px; }
.pl2 { flex: 1; padding: 10px 24px; overflow-y: auto; }
.pr2 { display: flex; align-items: center; gap: 20px; height: 62px; border-top: 1px solid var(--line); }
.pr2 b { width: 230px; font-size: 28px; font-weight: 800; } .pr2 span { font-size: 24px; font-weight: 700; flex: 1; }
.pr2 em { font-style: normal; font-size: 18px; font-weight: 900; color: #1b1300; background: #FFE27A; padding: 6px 14px; border-radius: 8px; } .pr2 i { font-style: normal; color: var(--dim); font-size: 17px; }
.pr2.win { background: rgba(255, 226, 122, .1); }
.addp { position: absolute; left: 24px; bottom: 14px; }

/* Player card */
.t-card { display: flex; gap: 26px; }
.pc1 { width: 250px; flex: none; display: flex; align-items: flex-end; justify-content: center; border-radius: 14px; background: radial-gradient(ellipse at 50% 100%, rgba(26, 79, 181, .55), transparent 70%); overflow: hidden; }
.pc1 img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; }
.pc2 { flex: 1; min-width: 0; overflow-y: auto; }
.gl { margin-bottom: 10px; padding: 8px 12px 10px; border-radius: 12px; background: rgba(255, 226, 122, .12); }
.gl h5 { margin: 0 0 4px; font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #FFE27A; }
.gs { display: flex; flex-wrap: wrap; gap: 4px 18px; } .gs span { font-size: 22px; font-weight: 800; } .gs em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--dim); margin-right: 5px; }
.ct { margin-bottom: 8px; }
.ov { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 19px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ov th:first-child, .ov td.rn { width: 92px; padding-left: 0; }   /* row labels start on the section heading's edge */
.ov th { font-size: 13px; font-weight: 800; color: var(--dim); letter-spacing: .08em; padding: 2px 8px 4px; }
.ov td { padding: 4px 8px; border-top: 1px solid var(--line); color: var(--soft); }
.ov td.rn { text-align: left; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ov tr.sea td { color: #fff; font-weight: 900; font-size: 22px; }
.ov tr.sea td.rn { font-size: 14px; }   /* the SEASON label at the other labels' size: at 22 px it ran into the first number */

/* Live taps: score by quarter, this drive's plays */
#sheet { position: absolute; left: 0; top: 0; width: 560px; height: 400px; z-index: 6; display: none; background: #051a45; align-items: center; justify-content: center; }
#sheet.on { display: flex; animation: layerIn .2s ease-out both; }
.sh { width: 480px; } .sh h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.shb { display: flex; gap: 14px; margin-top: 26px; justify-content: center; }
#gDriveList { display: none; flex: 1; min-height: 0; margin-top: 10px; flex-direction: column; }
#stage.drv #gDriveList { display: flex; } #stage.drv .lp, #stage.drv .ld { display: none; }
#gMarks { position: absolute; inset: 0; pointer-events: none; }
.mk2 { position: absolute; bottom: 8px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; border: 2px solid #fff; }
.mk2.us { background: var(--royal2); } .mk2.them { background: #3A4A6B; } .mk2 b { font-weight: 900; }
.dh { display: flex; align-items: baseline; gap: 12px; height: 26px; flex: none; } .dh b { font-size: 14px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .dh span { font-size: 14px; color: var(--soft); }
.dl { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; padding-right: 6px; }
.dl::-webkit-scrollbar { width: 7px; } .dl::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .4); border-radius: 4px; }
.dp { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.25; }
.dp i { font-style: normal; font-weight: 900; width: 22px; color: var(--dim); flex: none; } .dp em { font-style: normal; font-weight: 800; width: 76px; flex: none; color: #FFE27A; font-size: 14px; } .dp span { flex: 1; min-width: 0; }
.field[data-go], .rows[data-go], .ldr[data-go] { cursor: none; }

/* the bigger celebrations */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.confetti i { position: absolute; top: -30px; border-radius: 2px; animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(460px) rotate(620deg); } }
#party.big .sweep i { animation-iteration-count: 6; }
#party.big .pmid { right: 520px; } .pplayers.trio { width: 520px; right: 8px; }
.pplayers.trio img { width: 190px; height: 330px; }
.pplayers.trio figure:nth-child(2) { z-index: 2; } .pplayers.trio figure:nth-child(2) img { height: 372px; width: 214px; }
.pplayers.trio figure { margin: 0 -14px; animation-delay: .8s; }
#party.big .pword { animation-iteration-count: 1, 12; }

/* Full screen tip (public link, iPhone): the Bills icon as it shows on the Home Screen, three short steps, OK */
.t-fstip { display: flex; align-items: center; justify-content: center; }
.fst { display: flex; align-items: center; gap: 40px; }
.fsi { width: 140px; height: 140px; border-radius: 32px; box-shadow: 0 8px 26px rgba(0, 0, 0, .5); flex: none; }
.fst b { display: block; font-size: 34px; font-weight: 900; font-stretch: 75%; text-transform: uppercase; letter-spacing: .02em; }
.fst ol { margin: 10px 0 0; padding-left: 30px; font-size: 26px; font-weight: 700; line-height: 1.35; }
.fst ol i { display: inline-flex; vertical-align: -5px; width: 32px; height: 32px; margin-left: 6px; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, .15); }
.fst ol i svg { width: 100%; height: 100%; }
.fst em { display: block; margin-top: 10px; font-style: normal; font-size: 22px; font-weight: 700; color: #FFE27A; }
.fst .k.big { min-width: 150px; height: 72px; flex: none; }

#testTag { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 30; display: none; background: #FFC56B; color: #3a2600; font: 900 12px var(--font);
  letter-spacing: .18em; padding: 2px 14px 3px; border-radius: 0 0 8px 8px; pointer-events: none; }

/* test hook (?still=1, fixtures only): no animations, so a screenshot shows the finished picture */
.still .layer, .still #sheet { animation: none !important; }

/* bigger finger area on the season-strip tiles (they are only 35 px wide) */
.g { position: relative; }
.g::after { content: ""; position: absolute; left: -1px; right: -1px; top: -9px; bottom: -9px; }

/* ── Hero pictures behind the full-screen views (real ESPN photos, dimmed, as on the home screen) ── */
.layer .rail, .layer .gbody { position: relative; z-index: 1; }
.bd { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bd .pic { position: absolute; inset: 0; background: 50% 55% / cover no-repeat; opacity: 0; transition: opacity .8s ease; }
.bd .pic.on { opacity: 1; }
.bd .wash { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(3, 14, 40, .86) 0%, rgba(3, 14, 40, .78) 55%, rgba(3, 14, 40, .66) 100%),
              linear-gradient(0deg, rgba(3, 14, 40, .45) 0%, rgba(3, 14, 40, 0) 45%); }
.bd.nophoto .wash { background: none; }
.cuts { position: absolute; inset: 0; }
.biglogo { position: absolute; right: 40px; top: 56px; opacity: .13; }
.biglogo.ol { right: auto; left: 560px; top: 40px; opacity: .1; }
.biglogo img, .biglogo .badge { width: 380px; height: 380px; filter: none; }
.cut { position: absolute; width: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }

/* game view: the top performer peeks into the header */
.tp { display: flex; align-items: flex-end; gap: 12px; margin-left: auto; margin-right: 12px; height: 64px; }
.tp > span { align-self: center; text-align: right; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); line-height: 1.2; white-space: nowrap; }
.tp > span b { display: block; font-size: 21px; font-weight: 900; font-stretch: 78%; letter-spacing: .02em; color: #fff; }
.tp > span em { display: block; font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--soft); }
/* his head and collar stand on the header's bottom line, centred in the box (12 px to the name, 12 px to the ✕). ESPN headshots are
   600x436 with the face in the middle: at 84 px tall the photo is 116 wide, so it is cropped evenly both sides (cover, centred) and
   the box shows the top 64 px, crown to collar. (It was 160 wide in a 96 box: a block wider than its box can't centre with margin auto,
   so the face sat against the right edge and the chin was cut by the line.) */
.bust { width: 80px; height: 64px; overflow: hidden; }
.bust img { width: 100%; height: 84px; object-fit: cover; object-position: 50% 0; display: block; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.tp + .x { margin-left: 0; }

/* preview: the two leaders face each other behind the sheet */
.cuts.face .cut { bottom: 0; height: 280px; opacity: .5; }
.cuts.face .cut.fl { left: -70px; -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 55%, transparent 100%); }
.cuts.face .cut.fr { right: -30px; -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent 100%); mask-image: linear-gradient(270deg, #000 55%, transparent 100%); }

/* player card: his photo big on the right, his number large and faint behind it */
.cuts.card .bignum { position: absolute; right: 24px; bottom: 0; font-size: 430px; line-height: .86; font-weight: 900; font-stretch: 60%; color: #fff; opacity: .17; letter-spacing: -.02em; }
.cuts.card .cut.big { right: -20px; bottom: 0; height: 340px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.t-card .pc2 { margin-right: 340px; padding: 6px 14px 4px; border-radius: 12px; background: rgba(3, 14, 40, .6); }

/* standings: logos big and faint */
.cuts.logos .lg { position: absolute; top: 40px; opacity: .1; }
.cuts.logos .lg:nth-child(1) { left: 130px; } .cuts.logos .lg:nth-child(2) { left: 440px; top: 70px; } .cuts.logos .lg:nth-child(3) { left: 750px; } .cuts.logos .lg:nth-child(4) { left: 1020px; top: 70px; }
.cuts.logos .lg img, .cuts.logos .lg .badge { width: 330px; height: 330px; filter: none; }

/* predict: the home-screen three, over the stadium */
.cuts.trio .trio { position: absolute; right: 18px; bottom: 0; width: 540px; height: 330px; }
.cuts.trio .cut.t0 { left: 0; height: 252px; bottom: 0; filter: brightness(.78) drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.cuts.trio .cut.t1 { left: 150px; height: 322px; bottom: 0; z-index: 2; }
.cuts.trio .cut.t2 { left: 332px; height: 252px; bottom: 0; filter: brightness(.78) drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.layer.picks[data-s=type] .cuts.trio .trio, .layer.picks[data-s=score] .cuts.trio .trio { opacity: .17; }
.layer.picks[data-s=type] .biglogo.ol, .layer.picks[data-s=score] .biglogo.ol { opacity: .06; }
.layer.picks[data-s=who] .nms { max-width: 620px; }

.layer.picks[data-s=type] .bd .wash, .layer.picks[data-s=score] .bd .wash { background: linear-gradient(90deg, rgba(3, 14, 40, .92), rgba(3, 14, 40, .88)); }