/* World Bowling League arena: fixes layered on top of the design stylesheet (site.css).
   site.css is generated from the design export and never hand-edited. Everything here is
   engineering, accessibility and real-asset work carried over from the WBL Website port and
   adapted to today's design. None of it is meant to change how the design looks. */

/* ---- headings: real elements, same pixels ---- */
/* the hero lock-up is the page h1; stop the generic `.hero h1` type rules reaching it */
.hero h1.hlock{font:inherit;font-variation-settings:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit}
/* timeline headings were h4, which had no global rule; the global h3 line-height must not apply */
.tl .node h3.nh{line-height:inherit}

/* ---- anchors clear the sticky nav at every width (the design only set this under 720px) ---- */
:target{scroll-margin-top:calc(var(--navh, 68px) + 18px)}
.sec,#finalstage,#stmtstage,#terms,#main section,header,footer{scroll-margin-top:calc(var(--navh, 68px) + 18px)}
#main{outline:0}

/* ---- no sideways scroll on phones ----
   The design's two swipe rails (How to Play steps, press cards) use negative margins sized for a
   20px and 24px gutter, but the wrap's gutter is 16px under 720px, so both boxes poked 4 to 8px
   past the viewport and the page scrolled sideways (the design's own 390 render is 398 wide).
   Clipping the sections at the viewport edge removes that without moving a card. */
@media(max-width:720px){#how.hiw3,#press{overflow-x:clip}}

/* ---- nav ---- */
.brand{text-decoration:none;color:inherit}
.brand:hover{color:inherit}
/* the drawer sits inside the blurred sticky nav, so its translucent white composited with the
   page and the hero read straight through the links. Opaque, with a scrim and scroll lock. */
.navdrawer{background:#FFFCFA;backdrop-filter:none;-webkit-backdrop-filter:none}
.navscrim{position:fixed;inset:0;z-index:58;background:rgba(20,8,2,.42);opacity:0;pointer-events:none;transition:opacity .26s ease}
.navscrim.on{opacity:1;pointer-events:auto}
html.nav-open{overflow:hidden}
@media(min-width:961px){.navscrim{display:none}}
@media(prefers-reduced-motion:reduce){.navdrawer,.navscrim{transition:none}}

/* ---- the way back to Future of Sports ----
   History, because this has been asked for several ways: the entry first sat before the CTA in
   the right-hand group, on 18 Sep 2026 it was taken out of the nav bar for crowding the CTA, and
   on 25 Sep it came back as the FSP mark on its own beside the WBL lockup, in a .nav-left wrapper.
   Asked for again later the same day as the plain word FSP, the last item in the link row so it
   reads between "Pricing" and "Reserve your place": no mark, no wrapper, no rules of its own, just
   a link like its neighbours. Same on /wps and /tlc. Below the burger switch the link row is
   hidden and "Back to Future of Sports" is the drawer's first item, so phones are unchanged.
   .fsp-mark stays: the drawer entry still draws it. */
.fsp-mark{display:block;flex:none;width:auto;height:15px;fill:currentColor}
@media(min-width:961px){.nav-links{gap:26px}}
@media(min-width:1280px){.nav-links{gap:22px}}
/* ---- the nav bar lines up with the page, so the lockup sits left and the CTA sits right ----
   Asked for on 25 Sep 2026. site.css caps .nav-in at 1240px with a 56px gutter while .wrap runs
   to 1440px with a 64px gutter, so above 1240 the WBL lockup and "Reserve your place" were pulled
   ~67px inboard of every section below them and read as a centred cluster. Matching .wrap's cap
   and gutter puts both on the page's own left and right edges. Only from 1280: below that the
   wider gutter would take 16px off a row the design already fills (see the link gaps above). */
@media(min-width:1280px){.nav-in{max-width:1440px;padding-left:64px;padding-right:64px}}
.navdrawer a.nd-fsp>span{display:inline-flex;align-items:center;gap:11px}
.navdrawer a.nd-fsp .fsp-mark{height:13px}

/* ---- reveals already on screen when the page first lays out show at once (js/app.js) ---- */
.reveal.rv-now{transition:none!important}

/* ---- as featured in: the real marks, white on the vermillion ----
   Each mark sits in a box the size of the text label it replaces (10.5px caps on a 17px line,
   plus its 2px underline gap and 1px underline), so
   the row keeps the design's spacing and wraps at the same widths.
   Every mark is then drawn 30% larger than that label size: slot widths and mark heights are
   both scaled by 1.3, as is the 17.01px box the mark centres in (the 2px underline gap and 1px
   underline are unchanged), so each mark keeps its relative weighting and clears the underline. */
.stmt-points .press a span{display:inline-flex;align-items:center;justify-content:center;height:25.11px;line-height:1}
.stmt-points .press .plogo{display:block;width:auto;height:16.9px;max-width:none;filter:brightness(0) invert(1)}
.stmt-points .press a:has(.pl-reuters) span{width:82.77px}
.stmt-points .press a:has(.pl-espn) span{width:47.31px}
.stmt-points .press a:has(.pl-bloomberg) span{width:111.18px}
.stmt-points .press a:has(.pl-usatoday) span{width:99.53px}
.stmt-points .press a:has(.pl-sportbusiness) span{width:148.75px}
.stmt-points .press .pl-reuters{height:20.8px}
.stmt-points .press .pl-espn{height:13.65px}
.stmt-points .press .pl-bloomberg{height:16.9px}
.stmt-points .press .pl-usatoday{height:14.3px}
.stmt-points .press .pl-sportbusiness{height:16.9px}

/* ---- press cards: real thumbnails, whole card is the link ---- */
a.upd{display:block;color:inherit;text-decoration:none;transition:border-color .3s ease,transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease}
a.upd:hover,a.upd:focus-visible{color:inherit;border-color:var(--papaya);transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(22,19,16,.45)}
a.upd:hover .t,a.upd:focus-visible .t{color:var(--papaya)}
/* thumbnails are 16:10 with the outlet's badge top right; the desktop card is 4:3, so crop from the left */
.upd .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;transition:transform .6s cubic-bezier(.22,1,.36,1)}
a.upd:hover .im img{transform:scale(1.045)}
.upd .t{transition:color .25s ease}
/* no arrow on the date line: asked for on 20 Sep 2026. The whole card is already the link,
   so the ↗ was repeating what the card says. The "View all ↗" link above the grid keeps its. */
.upd .dt .ext{display:none}
.updall{display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.updall:hover{color:var(--papaya)!important}
.updall .ext{transition:transform .3s ease}
.updall:hover .ext{transform:translate(2px,-2px)}

/* ---- How to Play layers: the real clip and its tracking, drawn where the stills were ---- */
#how.hiw3 .hk-plane video,#how.hiw3 .hk-plane .hk-cv{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%}
#how.hiw3 .hk-plane .hk-cv{pointer-events:none}
/* The three tracking planes are glass: only their lines and their label, no ground. The design gave
   every plane the same tinted ground, which stacked three times over the clip and left the video
   under a dark wash. The base plane keeps its ground (the poster sits on it before the clip loads).
   The stills' own dimming is dropped here too: a bowling house is lit low to begin with, so at 60%
   brightness and half saturation the clip read as grey. Same treatment as /wps, one step further. */
#how.hiw3 .hk-plane[data-p=skel],#how.hiw3 .hk-plane[data-p=ball],#how.hiw3 .hk-plane[data-p=venue]{background:transparent}
/* and they sit further apart at rest, so each one reads on its own (was 70px between planes).
   The same spread as /wps, whose stage, scene and resting depths are identical to this one.
   Above 720px only: below that the stage is shorter and clips, and keeps its own spacing.
   :not(:hover) because site.css's hover rules only beat its resting ones on source order, and
   this file is read later; hovering still separates the planes the whole way. */
@media(min-width:721px){
  #how.hiw3 .hk-stage.in:not(:hover) .hk-plane[data-p=base]{transform:translateZ(-145px)}
  #how.hiw3 .hk-stage.in:not(:hover) .hk-plane[data-p=skel]{transform:translateZ(-50px)}
  #how.hiw3 .hk-stage.in:not(:hover) .hk-plane[data-p=ball]{transform:translateZ(45px)}
  #how.hiw3 .hk-stage.in:not(:hover) .hk-plane[data-p=venue]{transform:translateZ(140px)}
}

/* ---- How to Play steps: nothing above step 01 ----
   The design draws a short centred hairline at the top edge of every step, and paints the first
   one papaya instead of grey, so an orange line sat above step 01 dividing it from nothing.
   Asked for on 18 Sep 2026: remove it. The two grey lines between the steps are untouched.
   Only visible above 900px in any case: below that the steps become cards and site.css already
   hides all three lines. */
#how.hiw3 .hiw-steps .hs:first-child:before{display:none}

/* ---- waitlist form ---- */
.wl-pot{position:absolute!important;left:-10000px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.wl-submit[aria-busy="true"]{opacity:.7;cursor:progress}

/* ---- keyboard affordances ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:500;background:var(--ink);color:#fff;padding:12px 20px;font-family:var(--disp);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:12px;top:12px;color:#fff}
:focus-visible{outline:2px solid var(--papaya);outline-offset:3px}
.g-verm :focus-visible,.hero :focus-visible,.heroflow :focus-visible,#reserve :focus-visible,footer :focus-visible,#finalstage :focus-visible,.hk-meas :focus-visible{outline-color:#fff}
.btn:focus-visible{outline-offset:2px}

/* ---- first layout: the nav, the hero and the Statement only ----
   Sections below the Statement start with data-defer, so the browser skips their layout and paint
   for the first frame; js/app.js removes the attribute one section per task right after the first
   paint (or at once for a section the reader scrolls to, an in-page link, or a deep link). Once
   removed, nothing of this rule remains: no containment, no clipping. */
[data-defer]{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---- phones: the Statement's points panel is laid out open from the start ----
   The design transitions its max-height (0 to 900px) and margin-top (0 to 34px), which moved the
   headline in layout on every frame of the .9s opening. js/app.js replays that motion with transforms
   and a clip instead; the container's own opacity and transform already switched instantly on phones
   (the design's transition list there held only max-height and margin-top). */
@media(max-width:720px){.stmt-points,.stmt-points.on{max-height:none;margin-top:34px;transition:none}}

/* ---- phones: the history rail's "Today" map keeps the same 200px picture band ----
   Under 720px each timeline node is a column flexbox, so a flex-basis is a HEIGHT. site.css sizes
   the map figure with `flex:0 0 280px!important` next to its own `height:200px!important`, and the
   basis wins: the figure renders 280px tall where every other node's picture is 200px, pushing the
   "150 million players" copy 80px below the copy in the nodes either side of it. An auto basis hands
   the main size back to that declared 200px. The map is not rescaled - width, the 280px box and the
   svg's 170% draw are all untouched, the figure just stops reserving the extra 80px of height. */
@media(max-width:720px){#history figure.nfig.nfig-map{flex:0 0 auto!important}}

/* ---- phones: the rewards block is one raised card, and the reward barrel turns sideways ----
   Asked for on 20 Sep 2026: match the Future of Sports home page, where the barrel spins about a
   vertical axis and the prize copy, the host and the barrel all sit together on a raised white card,
   so the block reads as one dedicated panel instead of loose rows on the page.
   js/app.js switches the barrel to rotateY under 900px; the fade has to run left to right with it,
   and its panels have to span the full width and be allowed to wrap, because sideways they tile edge
   to edge around the cylinder rather than stacking. Nothing here applies above 900px. */
@media(max-width:900px){
  #rewards .pz{padding:16px 18px 28px;border-radius:18px;background:linear-gradient(#fff,#F7F3EE);border:1px solid rgba(22,19,16,.08);box-shadow:inset 0 1px 0 #fff,0 2px 4px -2px rgba(22,19,16,.10),0 18px 28px -18px rgba(22,19,16,.30),0 44px 62px -42px rgba(22,19,16,.34)}
  #rewards .drum{min-height:120px!important;height:auto;padding:0;overflow:hidden;perspective:700px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  #rewards .drum .ln{left:0;right:0;width:auto;max-width:none;box-sizing:border-box;padding:0 8px;white-space:normal;text-wrap:balance;line-height:1.1}
}

/* ---- the layer label is a label, not a chip ----
   Asked for on 20 Sep 2026: drop the tinted box behind each layer's caption and the 01-04 numbering
   in front of it (the numbers came out of index.html), so the caption reads as plain white type on
   the footage the way the layer console on the Future of Sports home page does. Same on /wps, /tlc. */
#how.hiw3 .hk-tag{background:none;padding:0;border-radius:0}

/* ---- pricing switch: the same slide as /tlc ----
   Asked for on 20 Sep 2026: match the Club / Pro switch to the one on /tlc, which slides cleanly.
   The switch carries the class "pro" so its pill can slide, which also hands it the Pro plan's own
   rules. site.css answers that at its .od-seg declaration, but a later 900px block re-states
   ".od>div.pro{padding:0!important;border-right:0!important}" and wins on source order, so the
   moment Pro was picked the switch lost its 3px padding and its right edge and snapped smaller
   underneath the sliding pill. /tlc keeps its shape through the slide because port.css re-states the
   switch's own declaration last; this does the same with site.css's values. */
@media(max-width:900px){#pricing .od>div.od-seg{padding:3px!important;border:1px solid var(--rule)!important}}
/* fsp-www-registered-mark (30 Sep 2026): a 24px+ touch target, same layout */
#pricing .od .od-more{padding:5px 0;margin:-5px 0}