/* Homepage scroll story (T-1146): court-line backdrop, pinned phone, travelling ball.
   Layered on landing.css + home.css. Animates transform/opacity only. */

/* ---------- Backdrop: drifting glow + a court that draws itself ---------- */
body { position: relative; background: transparent; }
html { background: var(--bg); }
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glow {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 175, 125, 0.30), rgba(76, 175, 125, 0) 62%);
  will-change: transform;
}
.glow.g1 { left: -25vmax; top: -30vmax; animation: drift1 26s ease-in-out infinite alternate; }
.glow.g2 { right: -30vmax; bottom: -35vmax; background: radial-gradient(circle, rgba(94, 160, 203, 0.2), rgba(94, 160, 203, 0) 62%); animation: drift2 31s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vmax, 22vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vmax, -20vmax) scale(1.1); } }

/* The 3D court and its rally (home-live.js): fixed behind the whole page,
   from the very top, so it orbits under every section as you scroll. */
.court-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0.8; }
/* landing.css paints .intro solid, which hid the court on the first screen. */
.hero-c.intro { background: radial-gradient(ellipse 60% 60% at 10% 0%, rgba(16, 70, 40, 0.45), transparent); }
/* Legibility over the moving court: a soft dark halo behind headline copy. */
.hero-copy h1, .hero-copy .lede, .story-steps h3, .story-steps p, .more h2, .faq h2, .closing h2, .closing p {
  text-shadow: 0 2px 14px rgba(13, 17, 26, 0.9), 0 0 4px rgba(13, 17, 26, 0.7);
}
.lede, .closing p, .story-steps h3, .more h2, .closing h2 { text-wrap: balance; }
/* Small print gets a solid floor: no court lines or ball under it. */
footer { position: relative; background: var(--bg); }
.free-line span { white-space: nowrap; }
/* Header lines up with the wider hero on desktop. */
@media (min-width: 860px) { .top .wrap { max-width: 1040px; } }

/* Install button that stays in reach: in the header on desktop, a bar at the
   bottom on phones once the hero's buttons have scrolled away (hidden again
   at the closing call to action). */
.top .nav-cta {
  display: none; margin-left: 8px; padding: 7px 14px !important; border-radius: 10px;
  background: var(--green); color: #08130c !important; font-weight: 800;
}
.nav-cta:hover { background: var(--green-bright); }
.sticky-cta { display: none; }
@media (min-width: 860px) {
  .js .nav-cta.not-ios { display: inline-block; }
  .js.is-ios .nav-cta.not-ios { display: none; }
  .js.is-ios .nav-cta.ios-only { display: inline-block; }
}
@media (max-width: 859px) {
  .js .sticky-cta {
    display: flex; gap: 10px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(13, 17, 26, 0.94);
    border-top: 1px solid #263142; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transform: translateY(110%); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1);
  }
  .js .sticky-cta.on { transform: none; }
  .sticky-cta .sc-copy { flex: 1; font-size: 0.8rem; font-weight: 700; color: #a9b4c2; line-height: 1.3; }
  .sticky-cta .sc-copy b { display: block; color: var(--text); font-size: 0.9rem; }
  .sticky-cta .play-now { min-height: 44px; padding: 10px 18px; margin: 0; white-space: nowrap; }
  .sticky-cta .ios-only { display: none; }
  .is-ios .sticky-cta .ios-only { display: inline-flex; }
  .is-ios .sticky-cta .not-ios { display: none; }
  footer { padding-bottom: 84px; }
}

/* Step colours: one wash per story step, cross-faded as the step changes
   (green draft, orange live, blue standings, gold title). */
.sglow {
  position: absolute; left: 50%; top: 50%; width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax;
  border-radius: 50%; opacity: 0; transition: opacity 0.9s ease; will-change: opacity;
}
.sglow[data-for="0"] { background: radial-gradient(circle, rgba(94, 203, 143, 0.30), transparent 60%); }
.sglow[data-for="1"] { background: radial-gradient(circle, rgba(255, 138, 61, 0.30), transparent 60%); }
.sglow[data-for="2"] { background: radial-gradient(circle, rgba(94, 168, 255, 0.30), transparent 60%); }
.sglow[data-for="3"] { background: radial-gradient(circle, rgba(242, 201, 76, 0.32), transparent 60%); }
html[data-step="0"] .sglow[data-for="0"], html[data-step="1"] .sglow[data-for="1"],
html[data-step="2"] .sglow[data-for="2"], html[data-step="3"] .sglow[data-for="3"] { opacity: 1; }
html[data-step="1"] .device { box-shadow: 0 0 0 1px #5a3d2c, 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 90px rgba(255, 138, 61, 0.28); }
html[data-step="2"] .device { box-shadow: 0 0 0 1px #2c405a, 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 90px rgba(94, 168, 255, 0.26); }
html[data-step="3"] .device { box-shadow: 0 0 0 1px #5a4c2c, 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 90px rgba(242, 201, 76, 0.3); }
.story-steps li[data-step="1"] .num { color: #ff9d5c; }
.story-steps li[data-step="2"] .num { color: #7db8ff; }
.story-steps li[data-step="3"] .num { color: #f2c94c; }
html[data-step="1"] .story-dots span.on { background: #ff9d5c; }
html[data-step="2"] .story-dots span.on { background: #7db8ff; }
html[data-step="3"] .story-dots span.on { background: #f2c94c; }

/* Team colours: you green, Kitchen Bullies coral, Jim's Dinkers blue,
   Drop Shot Divas violet. The board is 4 columns, headers then slots. */
.story { --t1: #5ecb8f; --t2: #ff8fa3; --t3: #6fb3ff; --t4: #c792ff; }
.pane .board > :nth-child(4n+2) { --tc: var(--t2); }
.pane .board > :nth-child(4n+3) { --tc: var(--t3); }
.pane .board > :nth-child(4n+4) { --tc: var(--t4); }
.pane .board > .col-h:not(.me) { color: var(--tc); font-weight: 800; }
.pane .slot.filled:not(.me) {
  background: color-mix(in srgb, var(--tc) 16%, #141b26); border-color: color-mix(in srgb, var(--tc) 55%, #141b26);
  color: color-mix(in srgb, var(--tc) 35%, #ffffff);
}
.pane .st-row { box-shadow: inset 4px 0 0 var(--tc, transparent); grid-template-columns: 18px 1fr 30px 40px; gap: 6px; padding: 0 8px 0 12px; }
.pane .st-row .tm { font-size: 0.82rem; }
.pane .st-row[data-team="kb"] { --tc: var(--t2); } .pane .st-row[data-team="jd"] { --tc: var(--t3); } .pane .st-row[data-team="dsd"] { --tc: var(--t4); }
.pane .st-row.me { box-shadow: inset 4px 0 0 var(--t1), 0 0 0 1px #2f7a52 inset; }
.pane .st-row:not(.me) .tm { color: color-mix(in srgb, var(--tc) 40%, #ffffff); }
.wr-row span:last-child { color: var(--t3); }
.stat:nth-child(1) b { color: #5ecb8f; } .stat:nth-child(2) b { color: #ff9d5c; } .stat:nth-child(3) b { color: #f2c94c; }
.appshot:nth-child(1) .bezel { box-shadow: 0 22px 36px rgba(0, 0, 0, 0.5), 0 0 50px rgba(94, 203, 143, 0.25); }
.appshot:nth-child(2) .bezel { box-shadow: 0 22px 36px rgba(0, 0, 0, 0.5), 0 0 50px rgba(255, 138, 61, 0.22); }
.appshot:nth-child(3) .bezel { box-shadow: 0 22px 36px rgba(0, 0, 0, 0.5), 0 0 50px rgba(94, 168, 255, 0.24); }

/* ---------- Live scoring feed: rallies stream in, counters add up ---------- */
.livefeed { margin: 26px 0 0; }
.lf-card {
  display: grid; gap: 14px; padding: 16px; border-radius: 18px;
  background: linear-gradient(165deg, rgba(23, 32, 48, 0.92), rgba(16, 22, 31, 0.92));
  border: 1px solid #263142; box-shadow: 0 24px 44px rgba(0, 0, 0, 0.42);
}
.lf-live { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: #ff6b6b; }
.lf-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; animation: pulse 1.6s ease-in-out infinite; }
.lf-sub { margin-top: 4px; color: #a9b4c2; font-size: 0.95rem; font-weight: 600; }
.lf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.lf-stats div { padding: 8px 12px; border-radius: 12px; background: #0f1620; border: 1px solid #222c3a; }
.lf-stats b { display: block; font-size: 1.6rem; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); }
.lf-stats div:last-child b { color: var(--green-bright); }
.lf-stats span { font-size: 0.68rem; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.lf-list {
  list-style: none; margin: 0; padding: 0; height: 196px; overflow: hidden;
  -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent);
}
.lf-item { overflow: hidden; }
.js .lf-item:first-child { animation: lfin 0.45s cubic-bezier(.2, .8, .2, 1); }
@keyframes lfin { from { max-height: 0; opacity: 0; transform: translateY(-10px); } to { max-height: 60px; opacity: 1; transform: none; } }
.lf-in {
  display: grid; grid-template-columns: 26px 1fr auto 52px; gap: 10px; align-items: center;
  padding: 8px 10px; margin-bottom: 6px; border-radius: 12px; background: #121924; border: 1px solid #1e2836;
  font-size: 0.86rem; font-variant-numeric: tabular-nums;
}
.lf-item.me .lf-in { border-color: #1e3a2b; background: #0f1b16; }
.lf-what { color: #a9b4c2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-what b { color: var(--text); }
.lf-plus { font-size: 0.72rem; font-weight: 900; padding: 3px 9px; border-radius: 999px; color: #08130c; background: var(--green-bright); }
.lf-item.them .lf-plus { background: #3a2a33; color: #ffb3c0; }
/* The league's other matchup, in the draft board's team colours. */
.lf-item.jd .lf-plus { background: #1f2c40; color: #a9cfff; }
.lf-item.dsd .lf-plus { background: #2e2540; color: #dcc0ff; }
.lf-item.jd .lf-pts { color: #a9cfff; } .lf-item.dsd .lf-pts { color: #dcc0ff; }
.av.c1 { background: #6fb3ff; } .av.c2 { background: #a9cfff; } .av.c3 { background: #4f97e6; }
.av.d1 { background: #c792ff; } .av.d2 { background: #dcc0ff; } .av.d3 { background: #a873e6; }
/* Other league moments (trades, waivers, chat...): tagged with the feature. */
.av.ev { width: auto; min-width: 26px; padding: 0 5px; border-radius: 8px; font-size: 0.6rem; background: #2a3442; color: #e8edf3; }
.lf-item.ev.me .av.ev { background: #2f7a52; } .lf-item.ev.them .av.ev { background: #6b3442; }
.lf-item.ev.jd .av.ev { background: #2c4a70; } .lf-item.ev.dsd .av.ev { background: #4e3a70; }
.lf-tag {
  font-size: 0.64rem; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap;
  padding: 3px 8px; border-radius: 6px; color: #f2c94c; background: rgba(242, 201, 76, 0.12); border: 1px solid rgba(242, 201, 76, 0.3);
}
.lf-item.ev .lf-in { border-style: dashed; grid-template-columns: 26px 1fr auto; }
.lf-item.ev .lf-pts { display: none; }
/* A league moment is a sentence; let it wrap rather than cut it off. */
.lf-item.ev .lf-what { white-space: normal; line-height: 1.3; }
.lf-pts { text-align: right; font-weight: 900; color: var(--text); }
.lf-pts small { margin-left: 3px; font-size: 0.62rem; color: var(--muted); font-weight: 800; }
.lf-item.me .lf-pts { color: var(--green-bright); }
@media (min-width: 860px) {
  .lf-card { grid-template-columns: 260px 1fr; gap: 24px; padding: 20px 22px; align-items: center; }
}
@media (max-width: 859px) {
  .lf-list { height: 154px; }
  .lf-stats b { font-size: 1.35rem; }
  .lf-in { grid-template-columns: 26px 1fr auto 46px; gap: 8px; }
  .lf-plus em { display: none; }
}
.lf-plus em { font-style: normal; }

/* A +1 that flies from where a point was won to the score it adds to. */
.fly-pt {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; opacity: 0;
  font-weight: 900; font-size: 0.95rem; padding: 3px 10px; border-radius: 999px;
  color: #08130c; background: var(--green-bright); box-shadow: 0 0 0 3px rgba(8, 19, 12, 0.55), 0 0 22px rgba(94, 203, 143, 0.6);
}
.fly-pt.them { background: #ff8fa3; box-shadow: 0 0 0 3px rgba(26, 8, 12, 0.55), 0 0 22px rgba(255, 143, 163, 0.5); }

/* Headline lifts in on load. */
.hero-c h1 { animation: rise 0.8s cubic-bezier(.2, .8, .2, 1) both; }
.hero-c .lede { animation: rise 0.8s 0.12s cubic-bezier(.2, .8, .2, 1) both; }
.hero-c .hero-live { animation: rise 0.9s 0.22s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* translate/scale compose with the load animation's transform. */
.hero-live { translate: 0 var(--hero-y, 0px); scale: var(--hero-s, 1); transform-origin: 50% 0; }

/* ---------- Scroll story ---------- */
.story { position: relative; margin-top: 30px; }
.pane .slot { height: 48px; }
.pane .board { row-gap: 8px; }
.story-sticky { display: grid; gap: 28px; padding: 24px; max-width: 880px; margin: 0 auto; }
.device {
  position: relative; width: min(300px, 78vw); aspect-ratio: 1 / 2; margin: 0 auto;
  border-radius: 38px; padding: 10px; background: linear-gradient(160deg, #2a3442, #121820 60%);
  box-shadow: 0 0 0 1px #34425a, 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 80px rgba(76, 175, 125, 0.18);
}
.screen { position: relative; height: 100%; border-radius: 30px; overflow: hidden; background: #0f141c; }
.pane { position: absolute; inset: 52px 0 54px; display: flex; flex-direction: column; justify-content: center; padding: 12px; }
.pane .scene { margin: 0; box-shadow: none; }
/* Minimal app chrome so the HTML scenes read as the app, not floating cards. */
.app-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 52px; padding: 18px 16px 0;
  display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text);
  border-bottom: 1px solid #1c2430;
}
.app-bar b { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green-bright); flex: none; }
.app-wk { font-size: 0.7rem; color: var(--muted); font-weight: 700; }
.app-nav {
  position: absolute; bottom: 0; left: 0; right: 0; height: 54px; display: flex; justify-content: space-around; align-items: center;
  border-top: 1px solid #1c2430; font-size: 0.68rem; color: var(--muted); font-weight: 700;
}
.app-nav span.on { color: var(--green-bright); background: #173326; padding: 6px 12px; border-radius: 999px; }
.story-device { position: relative; }

/* Live matchup screen, in the app's split you-vs-them look. */
.mx {
  position: relative; display: flex; flex-direction: column; gap: 7px; padding: 10px 10px 12px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(242, 201, 76, 0.14), rgba(242, 201, 76, 0.04) 49.5%, rgba(255, 106, 61, 0.06) 50.5%, rgba(255, 106, 61, 0.16));
  border: 1px solid #2c3747; font-variant-numeric: tabular-nums;
}
.mx-banner {
  display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; border-radius: 9px;
  background: #1d5c3a; color: #c9f5dc; font-size: 0.66rem; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase;
}
.mx-banner .live-dot { font-size: 0.62rem; }
.mx-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; }
.mx-t span { display: block; font-size: 0.68rem; font-weight: 800; color: #c8d2de; white-space: nowrap; }
.mx-t b { display: inline-block; font-size: 1.75rem; font-weight: 900; line-height: 1.05; color: #f2c94c; }
.mx-t.them { text-align: right; }
.mx-t.them b { color: #ff7a4d; }
.mx-vs {
  align-self: center; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 900; color: #fff; background: #1a2230; box-shadow: 0 0 0 2px #f2c94c, 0 0 0 4px #ff7a4d;
}
.mx-edge { text-align: center; font-size: 0.7rem; font-weight: 800; color: #e8edf3; background: rgba(0, 0, 0, 0.35); border-radius: 8px; padding: 3px 6px; }
.mx-bar { height: 7px; border-radius: 4px; background: #ff6a3d; overflow: hidden; }
.mx-bar span { display: block; height: 100%; width: 50%; background: #f2c94c; transition: width 0.5s ease; }
.mx-bar.sm { height: 4px; }
.mx-slot { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mx-sh { display: flex; justify-content: space-between; align-items: center; font-size: 0.66rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; }
.mx-sh em { font-style: normal; font-size: 0.82rem; color: #e8edf3; letter-spacing: 0; }
.mx-sh .pts { color: #f2c94c; }
.mx-sh .pts.t { color: #ff9a76; }
/* The +1 rises from just above the number, inside the card. */
.mx-sh .pts .pop { right: 0; left: 0; top: -15px; margin: 0; text-align: center; color: #f2c94c; }
.mx-sh .pts.t .pop { color: #ff9a76; }
.mx-ps { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 800; }
.mx-p { display: inline-flex; align-items: center; gap: 6px; }
.mx-p .av { width: 20px; height: 20px; font-size: 0.62rem; }
.mx-last { margin-top: 2px; padding: 6px 9px; border-radius: 9px; background: #0d1a14; border: 1px solid #1e3a2b; color: var(--green-bright); font-size: 0.72rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-last.them { color: #ff8fa3; }
.mx-last.slide { animation: slide 0.35s ease-out; }

.champ-card { position: relative; text-align: center; padding: 18px 8px; }
.trophy-badge {
  position: relative; width: 132px; height: 132px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(242, 201, 76, 0.35), rgba(242, 201, 76, 0.06) 58%, transparent 70%);
  box-shadow: inset 0 0 0 2px rgba(242, 201, 76, 0.35);
}
.trophy-badge::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 10deg, rgba(255, 225, 120, 0.22) 10deg 20deg, transparent 20deg 40deg, rgba(255, 225, 120, 0.16) 40deg 50deg, transparent 50deg 80deg, rgba(255, 225, 120, 0.2) 80deg 90deg, transparent 90deg 130deg, rgba(255, 225, 120, 0.18) 130deg 140deg, transparent 140deg 190deg, rgba(255, 225, 120, 0.2) 190deg 200deg, transparent 200deg 250deg, rgba(255, 225, 120, 0.16) 250deg 260deg, transparent 260deg 310deg, rgba(255, 225, 120, 0.2) 310deg 320deg, transparent 320deg);
  -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%); mask: radial-gradient(circle, #000 40%, transparent 70%);
}
.pane.on .trophy-badge::before { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.trophy { display: block; position: relative; filter: drop-shadow(0 8px 22px rgba(242, 201, 76, 0.5)); }
.confetti.c2 i { width: 5px; height: 9px; }
.confetti.c2 i:nth-child(n) { margin-left: 3%; }
.pane.on .confetti.c2 i { animation-delay: 1.3s; animation-duration: 2.9s; }
.pane.on .trophy { animation: lift 1.1s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes lift { from { transform: translateY(30px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.champ-over { font-size: 0.72rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.champ-name { font-size: 1.9rem; font-weight: 900; color: var(--green-bright); margin: 4px 0 8px; }
.champ-line { font-size: 0.84rem; color: #a9b4c2; }
.confetti { position: absolute; inset: -10px 0 0; height: 0; }
.confetti i { position: absolute; top: 0; width: 7px; height: 12px; border-radius: 2px; opacity: 0; background: var(--green-bright); }
.confetti i:nth-child(3n) { background: #ffd166; } .confetti i:nth-child(3n+1) { background: #8fb8ff; }
.confetti i:nth-child(1) { left: 6%; } .confetti i:nth-child(2) { left: 14%; } .confetti i:nth-child(3) { left: 23%; }
.confetti i:nth-child(4) { left: 31%; } .confetti i:nth-child(5) { left: 40%; } .confetti i:nth-child(6) { left: 48%; }
.confetti i:nth-child(7) { left: 56%; } .confetti i:nth-child(8) { left: 64%; } .confetti i:nth-child(9) { left: 72%; }
.confetti i:nth-child(10) { left: 80%; } .confetti i:nth-child(11) { left: 88%; } .confetti i:nth-child(12) { left: 95%; }
.pane.on .confetti i { animation: fall 2.6s ease-in infinite; }
.pane.on .confetti i:nth-child(2n) { animation-duration: 3.1s; animation-delay: 0.4s; }
.pane.on .confetti i:nth-child(3n) { animation-duration: 2.2s; animation-delay: 0.9s; }
@keyframes fall { 0% { opacity: 0; transform: translateY(-10px) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(300px) rotate(540deg); } }

.story-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.story-dots span { width: 8px; height: 8px; border-radius: 4px; background: #2c3747; transition: width 0.3s, background 0.3s; }
.story-dots span.on { width: 26px; background: var(--green-bright); }

.story-steps { list-style: none; padding: 0; margin: 0; }
.story-steps .num { font-size: 0.78rem; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 800; color: var(--green-bright); }
.story-steps h3 { font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 900; line-height: 1.12; margin: 6px 0 8px; }
.story-steps p { color: #a9b4c2; font-size: 1.02rem; }

/* No JS / reduced motion: everything stacks; each pane shows in turn. */
.no-js .pane, .story.static .pane { position: relative; inset: auto; }
.no-js .pane + .pane, .story.static .pane + .pane { border-top: 1px solid #1c2430; }
.story.static .screen, .no-js .screen { height: auto; }
.story.static .device, .no-js .device { aspect-ratio: auto; }
.story.static .story-dots, .no-js .story-dots,
.story.static .app-bar, .no-js .app-bar, .story.static .app-nav, .no-js .app-nav { display: none; }

/* Live (JS) mode: the section is tall and the stage sticks. */
/* Desktop only (phones use .flow). Shorter than before, and screens change
   upward, in the direction you scroll (Brandon 2026-11-04). */
.story.live { height: 320vh; }
.story.live .story-sticky { position: sticky; top: 0; height: 100vh; align-content: center; }
.story.live .pane { opacity: 0; transform: translateY(14%) scale(0.97); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.story.live .pane.on { opacity: 1; transform: none; pointer-events: auto; }
.story.live .pane.past { transform: translateY(-14%) scale(0.97); }

/* Phones: each step's words, then its own screen, in normal page flow. */
.story.flow .story-device { display: none; }
.story.flow .story-sticky { padding: 0 20px; gap: 0; }
.story.flow .story-steps li { text-align: center; padding: 30px 0 12px; }
.story.flow .story-steps li[data-step="3"] .step-cta { margin-top: 18px; }
.flow-device {
  width: min(320px, 86vw); margin: 18px auto 0; border-radius: 30px; padding: 8px;
  background: linear-gradient(160deg, #2a3442, #121820 60%);
  box-shadow: 0 0 0 1px #34425a, 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 60px rgba(76, 175, 125, 0.16);
}
.flow-device .screen { height: auto; border-radius: 23px; }
/* The screen sits inside the centred step; its contents are app UI. */
.flow-device { text-align: left; }
.story.flow .pane { position: relative; inset: auto; padding: 10px; opacity: 0.35; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.story.flow .pane.on { opacity: 1; transform: none; }
.story.flow .pane .scene { padding: 12px; font-size: 0.86rem; }
.story.flow .pane .board { gap: 4px; }
.story.flow .pane .slot { font-size: 0.66rem; padding: 6px 2px; }
.story.flow .pane .col-h { font-size: 0.58rem; }
.story.flow .story-steps li[data-step="1"] .flow-device { box-shadow: 0 0 0 1px #5a3d2c, 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 138, 61, 0.22); }
.story.flow .story-steps li[data-step="2"] .flow-device { box-shadow: 0 0 0 1px #2c405a, 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 60px rgba(94, 168, 255, 0.2); }
.story.flow .story-steps li[data-step="3"] .flow-device { box-shadow: 0 0 0 1px #5a4c2c, 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 60px rgba(242, 201, 76, 0.24); }
.story.live .story-steps { position: relative; }
.story.live .story-steps li { transition: opacity 0.4s ease, transform 0.5s ease; }
.screen.flash::after {
  content: ""; position: absolute; inset: 0; border-radius: 30px; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--green-bright); animation: flash 0.6s ease-out forwards;
}
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* The rally ball: flies from the step text to the screen on each step. */
.ball {
  position: fixed; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; z-index: 5; opacity: 0;
  background: radial-gradient(circle at 35% 35%, #f6ff8a, #d4e157 55%, #9fae2c);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); pointer-events: none;
}
.ball::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: radial-gradient(circle, #7f8c1f 1.2px, transparent 1.6px) 0 0 / 5px 5px; opacity: 0.6;
}

/* Desktop: copy left, phone right; inactive steps dim. */
@media (min-width: 860px) {
  .story-sticky { grid-template-columns: 1fr 320px; gap: 56px; align-items: center; }
  .story-device { order: 2; }
  .story.live .story-steps li { opacity: 0.55; transform: translateX(-6px); padding: 14px 0; }
  .story.live .story-steps li.on h3 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); color: #fff; }
  .story.live .story-steps li.on .num { font-size: 0.86rem; }
  .story.live .story-steps li.on { opacity: 1; transform: none; }
  .story.live .story-steps li p { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
  .story.live .story-steps li.on p { max-height: 3em; }
}
/* Phones without JS / with reduced motion: a stacked story. */
@media (max-width: 859px) {
  .story-sticky { padding: 16px 20px; gap: 16px; }
  .pane { padding: 10px; }
}

/* ---------- Stats + "More to play": upright app screens ---------- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 30px auto 4px; max-width: 560px;
  padding: 14px 8px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center;
}
.stat b { display: block; font-size: clamp(1.5rem, 6vw, 2.1rem); font-weight: 900; color: var(--green-bright); line-height: 1.1; }
.stat > span { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.more { padding: 40px 0 10px; }
.more h2 { text-align: center; }
.appshots {
  display: flex; gap: 18px; overflow-x: auto; padding: 26px 24px 30px; scrollbar-width: none;
  scroll-snap-type: x proximity; max-width: 900px; margin: 0 auto;
}
.appshots::-webkit-scrollbar { display: none; }
.appshot { flex: none; width: min(60vw, 240px); margin: 0; scroll-snap-align: center; text-align: center; }
.bezel {
  padding: 6px; border-radius: 28px; background: #1a2230; border: 1px solid #34425a;
  box-shadow: 0 22px 36px rgba(0, 0, 0, 0.5), 0 0 40px rgba(76, 175, 125, 0.12);
}
.bezel img { display: block; width: 100%; height: auto; border-radius: 22px; background: #0d111a; filter: brightness(1.08); }
.appshot figcaption { margin-top: 12px; font-weight: 800; font-size: 0.85rem; color: #c8d2de; text-transform: uppercase; letter-spacing: 1px; }
.js .more .appshot { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); }
.js .more.in .appshot { opacity: 1; transform: none; }
.js .more.in .appshot:nth-child(2) { transition-delay: 0.12s; }
.js .more.in .appshot:nth-child(3) { transition-delay: 0.24s; }
.appshots-cap { display: none; }
@media (min-width: 860px) {
  .appshots { overflow: visible; justify-content: center; gap: 28px; }
  .appshot { width: 25%; }
}
/* Phones: no sideways scrolling (Brandon 2026-11-04). The three screens fan
   out in place, home in front, using the individual transform properties so
   the scroll reveal's transform still composes. */
@media (max-width: 859px) {
  .appshots { --w: min(46vw, 200px); position: relative; display: block; overflow: visible; height: calc(var(--w) * 2 + 34px); padding: 0; margin-top: 26px; }
  .appshot { position: absolute; top: 0; left: 50%; width: var(--w); margin: 0 0 0 calc(var(--w) / -2); }
  .appshot figcaption { display: none; }
  .appshot:nth-child(1) { z-index: 2; }
  .appshot:nth-child(2) { translate: -52% 6%; rotate: -8deg; scale: 0.8; }
  .appshot:nth-child(3) { translate: 52% 6%; rotate: 8deg; scale: 0.8; }
  .more { overflow-x: clip; }
  .appshots-cap { display: block; text-align: center; margin-top: 4px; font-weight: 800; font-size: 0.8rem; color: #c8d2de; text-transform: uppercase; letter-spacing: 1px; }
}

/* Draft pane: a short best-available list fills the screen like the app. */
.avail { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: #121924; border: 1px solid #222c3a; }
.avail-h { font-size: 0.66rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 800; margin-bottom: 6px; }
.avail-row { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 0; font-size: 0.8rem; font-weight: 800; }
.avail-row + .avail-row { border-top: 1px solid #1c2430; }
.avail-row em { font-style: normal; font-size: 0.66rem; color: var(--muted); font-weight: 700; }
.avail-row b { font-size: 0.68rem; color: #08130c; background: var(--green); padding: 4px 9px; border-radius: 999px; }
.pane.on .avail-row:first-of-type b { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { box-shadow: 0 0 0 4px rgba(94, 203, 143, 0.3); } }

/* Champion step call to action. */
.step-cta { margin-top: 14px; min-height: 46px; padding: 11px 22px; }
.story-steps li .step-cta { display: none; }
.story-steps li .step-cta.not-ios { display: inline-flex; }
.is-ios .story-steps li .step-cta.not-ios { display: none; }
.is-ios .story-steps li .step-cta.ios-only { display: inline-flex; }
.story.live .story-steps li:not(.on) .step-cta { pointer-events: none; }
@media (max-width: 859px) { .story.live .story-steps li[data-step="3"] p { display: none; } .step-cta { margin-top: 8px; } }

/* Ball trail: three fading ghosts follow the ball. */
.ball.ghost { width: 12px; height: 12px; box-shadow: none; filter: blur(0.5px); }
.ball.ghost::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .glow, .hero-c h1, .hero-c .lede, .hero-c .hero-live,
  .pane .confetti i, .pane .trophy { animation: none !important; }
  .ball { display: none; }
  .js .more .appshot { opacity: 1; transform: none; transition: none; }
  .pane .trophy-badge::before, .avail-row b { animation: none !important; }
  .lf-live i, .js .lf-item:first-child { animation: none; }
}

/* Standings pane: this week's head-to-head result under the table. */
.week-res { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: #121924; border: 1px solid #222c3a; }
.wr-row { display: grid; grid-template-columns: 1fr auto auto auto 1fr; gap: 8px; align-items: center; font-size: 0.78rem; font-weight: 800; }
.wr-row span:last-child { text-align: right; }
.wr-row > span:first-child, .wr-row > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-row b { font-size: 1.25rem; color: var(--green-bright); }
.wr-row b.lose { color: var(--muted); }
.wr-vs { font-size: 0.66rem; color: var(--muted); }
.wr-tag { margin-top: 8px; display: inline-block; font-size: 0.68rem; font-weight: 900; color: #08130c; background: var(--green-bright); padding: 3px 10px; border-radius: 999px; }
.pane.on .wr-tag { animation: lift 0.7s 0.4s cubic-bezier(.2, .9, .3, 1.3) both; }
/* Desktop lists every step; only the active one shows its button. */
.story.live .story-steps li:not(.on) .step-cta { visibility: hidden; }