/* Self-hosted OFL fonts (see /assets/fonts/OFL.txt): no request leaves this site. */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700 800;font-display:swap;src:url(/assets/fonts/big-shoulders-display-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Pro Baseball Sim: site.v1.css ("Night Game"). Shared by every page.
   Versioned file name: bump to site.v2.css on any change (assets are cached as immutable). */

/* Size-adjusted fallback so the swap to Big Shoulders moves as little as possible.
   TODO before launch: tune size-adjust by overlaying the self-hosted woff2 on this fallback. */
@font-face{font-family:"Big Shoulders Fallback";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("Roboto Condensed Bold"),local("RobotoCondensed-Bold"),local("Arial Narrow"),local("Roboto Condensed");font-weight:700 800;size-adjust:88%}

/* ---------------------------------------------------------------- tokens */
/* Day game (light) */
:root{
  color-scheme:light dark;
  --bg:#F5F2E9;--band:#ECE7DA;--surface:#FFFFFF;--surface-2:#FFFFFF;--line:#D8D1C0;--border:#7A7466;
  --ink:#0F1B2D;--ink-2:#4A5666;--gold:#E0A400;--gold-text:#865C00;--on-gold:#0F1B2D;
  --green:#08703A;--on-green:#FFFFFF;--red:#B3261E;--blue:#1461B8;--clay:#C9A27E;
  --chalk:rgba(15,27,45,.18);--stripe:rgba(8,112,58,.035);--focus:#865C00;--link:#08703A;
  --plate-bg:#0F1B2D;--plate-ink:#F5F2E9;
  --shadow:0 24px 48px -24px rgba(15,27,45,.25);--pool:rgba(224,164,0,.08);
  --display:"Big Shoulders Display","Big Shoulders","Big Shoulders Fallback","Arial Narrow","Roboto Condensed",sans-serif;
  --text:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gutter:16px;--pad:72px
}
/* Night game (dark scheme): the app's Dugout dark tokens */
@media (prefers-color-scheme:dark){:root{
  --bg:#0E1310;--band:#121814;--surface:#161D19;--surface-2:#1E2722;--line:#2B352F;--border:#6B7A70;
  --ink:#F1F5F2;--ink-2:#A9B8AE;--gold:#F2C14E;--gold-text:#F2C14E;--on-gold:#1A1405;
  --green:#42E084;--on-green:#06210F;--red:#FF6B5E;--blue:#5DB7FF;--clay:#5A3E2B;
  --chalk:rgba(244,241,232,.85);--stripe:rgba(66,224,132,.03);--focus:#F2C14E;--link:#42E084;
  --plate-bg:#F4F1E8;--plate-ink:#0E1310;
  --shadow:0 -40px 80px -40px rgba(255,243,209,.18);--pool:rgba(255,243,209,.16)
}}
/* "Under the lights": night in both schemes */
.night,.site-header.is-over{
  --bg:#0E1310;--band:#121814;--surface:#161D19;--surface-2:#1E2722;--line:#2B352F;--border:#6B7A70;
  --ink:#F1F5F2;--ink-2:#A9B8AE;--gold:#F2C14E;--gold-text:#F2C14E;--on-gold:#1A1405;
  --green:#42E084;--on-green:#06210F;--red:#FF6B5E;--blue:#5DB7FF;--clay:#5A3E2B;
  --chalk:rgba(244,241,232,.85);--stripe:rgba(66,224,132,.03);--focus:#F2C14E;--link:#F2C14E;
  --plate-bg:#F4F1E8;--plate-ink:#0E1310;
  --shadow:0 -40px 80px -40px rgba(255,243,209,.18);--pool:rgba(255,243,209,.16);
  --sky-1:#0A1328;--sky-2:#0C1A24;--lamp:#FFF3D1;--board:#05080A;--bulb-off:#1B2127;--bulb-on:#FFF3D1;--bulb-label:#F2C14E
}
.night{color-scheme:dark;background-color:var(--bg);color:var(--ink)}
@media (min-width:600px){:root{--gutter:24px}}
@media (min-width:1024px){:root{--gutter:32px;--pad:112px}}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:72px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
svg{display:block}
p{margin:0 0 1em}
h1,h2,h3{margin:0;line-height:1.15}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
button{font:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 16px;border-radius:10px;background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none}
.skip:focus{top:8px}
.wrap{width:100%;max-width:1264px;margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--pad)}
.sec.has-div{padding-top:0}
.on-band{background:var(--band)}
.dia{display:inline-block;flex:none;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}

/* ---------------------------------------------------------------- type */
.h1{font:800 clamp(3.25rem,7vw + 1rem,7.5rem)/.9 var(--display);letter-spacing:-.01em;text-wrap:balance;margin:0 0 24px}
.h2{font:800 clamp(2.5rem,4.5vw + 1rem,4.75rem)/.95 var(--display);letter-spacing:-.005em;text-wrap:balance;margin:0 0 20px}
.lede,.intro{font-size:1.25rem;line-height:1.5;max-width:36rem}
.intro{color:var(--ink-2);margin:0}
.head{margin-bottom:48px}
.sign{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 20px;font:700 .8125rem/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.plate{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;background:var(--plate-bg);color:var(--plate-ink)}
.small{font-size:.9375rem;color:var(--ink-2)}

/* ---------------------------------------------------------------- buttons, pills, store switch */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:14px;border:1.5px solid transparent;font:700 1rem/1.2 var(--text);text-align:center;text-decoration:none;cursor:pointer}
.hcta .btn{white-space:nowrap}
.btn-primary{background:var(--green);color:var(--on-green)}
.btn-primary:hover{text-decoration:underline}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--border)}
.btn-secondary:hover{background:var(--surface)}
.soon{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--gold-text);background:transparent;background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--ink);font:700 .9375rem/1.2 var(--text);white-space:nowrap}
.badge-slot{min-height:48px}
html[data-store="soon"] .store-live{display:none!important}
html:not([data-store="soon"]) .store-soon{display:none!important}
.text-link{display:inline-flex;align-items:center;gap:6px;min-height:48px;font-weight:700}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:50;height:56px;color:var(--ink);background:var(--bg);background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--line)}
.site-header.is-over{background:transparent;border-bottom-color:transparent}
.hrow{display:flex;align-items:center;gap:12px;height:55px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:inherit;text-decoration:none;font-weight:700;font-size:1.0625rem;white-space:nowrap}
.brand img{width:28px;height:28px;border-radius:7px}
.hmid{display:flex;align-items:center;gap:16px;margin-inline:auto}
.basepath{flex:none;width:24px;height:24px;color:var(--ink-2)}
.basepath rect{fill:none;stroke:currentColor;stroke-width:1.5}
.basepath rect.on{fill:var(--gold);stroke:var(--gold)}
.nav{display:none}
.hcta{flex:none}
.t-sm{display:none}
@media (max-width:599px),(min-width:1024px) and (max-width:1239px){.t-lg{display:none}.t-sm{display:inline}}
@media (min-width:1024px){
  .nav{display:flex;gap:2px}
  .nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 10px;color:inherit;text-decoration:none;font-weight:500;font-size:.9375rem;white-space:nowrap}
  .nav a:hover{text-decoration:underline}
}
@media (max-width:379px){.basepath{display:none}}
@media (max-width:359px){.brand{font-size:.9375rem;gap:8px}.hcta .soon{padding-inline:10px;font-size:.8125rem}}

/* ---------------------------------------------------------------- night bands: sky, towers, haze, track */
.sky{position:relative;overflow:hidden;overflow:clip;background:linear-gradient(180deg,var(--sky-1) 0,var(--sky-2) 45%,var(--bg) 100%)}
.lights{position:absolute;inset:0;pointer-events:none}
.lights.half{opacity:.5}
.haze{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 0,rgba(255,243,209,.12),transparent)}
.lights{--tt:62px;--bh:36px}
.lights.top{--tt:20px}
.beam{position:absolute;top:calc(var(--tt) + var(--bh));width:110%;height:110%;-webkit-mask:linear-gradient(#000,transparent 70%);mask:linear-gradient(#000,transparent 70%)}
.beam-l{left:calc(max(8px,3vw) + 24px);background:conic-gradient(from 118deg at 0 0,rgba(255,243,209,.06) 0deg 38deg,transparent 38deg)}
.beam-r{right:calc(max(8px,3vw) + 24px);background:conic-gradient(from 204deg at 100% 0,rgba(255,243,209,.06) 0deg 38deg,transparent 38deg)}
.tower{position:absolute;top:var(--tt);display:flex;flex-direction:column;align-items:center}
.tower-l{left:max(8px,3vw)}
.tower-r{right:max(8px,3vw)}
.bank{display:grid;grid-template-columns:repeat(4,6px);gap:4px;padding:5px;border-radius:3px;background:#05080A;box-shadow:inset 0 0 0 1px rgba(169,184,174,.25)}
.bank i{width:6px;height:6px;border-radius:50%;background:var(--lamp);box-shadow:0 0 8px 1px rgba(255,243,209,.5)}
.pole{width:2px;height:12px;background:rgba(169,184,174,.4)}
@media (min-width:1024px){
  .lights{--tt:70px;--bh:42px}
  .lights.top{--tt:24px}
  .bank{grid-template-columns:repeat(4,8px)}
  .bank i{width:8px;height:8px}
  .pole{height:20px}
}
@media (min-width:1400px){
  .tower-l{left:calc((100vw - 1264px) / 4 - 27px)}
  .tower-r{right:calc((100vw - 1264px) / 4 - 27px)}
  .pole{height:min(60vh,520px)}
  .beam-l{left:calc((100vw - 1264px) / 4)}
  .beam-r{right:calc((100vw - 1264px) / 4)}
}
.bank i:nth-child(2){--i:1}.bank i:nth-child(3){--i:2}.bank i:nth-child(4){--i:3}.bank i:nth-child(5){--i:4}.bank i:nth-child(6){--i:5}
.bank i:nth-child(7){--i:6}.bank i:nth-child(8){--i:7}.bank i:nth-child(9){--i:8}.bank i:nth-child(10){--i:9}.bank i:nth-child(11){--i:10}.bank i:nth-child(12){--i:11}
.tower-r{--d:250ms}
@media (prefers-reduced-motion:no-preference){
  .lights-up .bank i{animation:lamp .7s calc(var(--i,0) * 45ms + var(--d,0ms)) both}
  .lights-up .beam,.lights-up .haze{animation:fade-in 1.2s .3s both}
}
@keyframes lamp{0%{opacity:.08}40%{opacity:.7}60%{opacity:.35}100%{opacity:1}}
@keyframes fade-in{from{opacity:0}}
.chalk,.track::before,.divider::before{background:var(--chalk);-webkit-mask:url(/assets/img/chalk-line.svg) 0 0/230px 2px repeat-x;mask:url(/assets/img/chalk-line.svg) 0 0/230px 2px repeat-x}
.track{position:relative;height:16px;background:var(--clay)}
.track::before{content:"";position:absolute;left:0;right:0;top:0;height:2px}

/* ---------------------------------------------------------------- section dividers */
.divider{position:relative;height:2px;margin-bottom:64px}
.divider::before{content:"";position:absolute;top:0;bottom:0;left:22px;right:0}
.dbase{position:absolute;left:1px;top:-5px;width:12px;height:12px;border:1.5px solid var(--chalk);background:var(--bg);transform:rotate(45deg)}
.on-band .dbase{background:var(--band)}
.passed>.dbase{background:var(--gold);border-color:var(--gold)}

/* ---------------------------------------------------------------- gate (hero) */
.gate{margin-top:-56px;padding-top:112px}
.gate-grid{position:relative;display:grid;gap:32px;padding-bottom:56px}
@media (max-width:599px){.gate .lede{font-size:1.125rem}.facts{margin-top:16px}}
.gate-copy{min-width:0}
.gate .lede{margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.facts{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:24px 0 0;padding:0;color:var(--ink-2);font-weight:500}
.facts li{display:inline-flex;align-items:center;gap:10px}
.sentinel{position:absolute;top:40px;left:0;width:1px;height:1px}
.gate-card{position:relative;isolation:isolate;min-width:0}
@media (min-width:1024px){
  .gate{padding-top:152px}
  .gate-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;padding-bottom:96px}
  .gate-copy{grid-column:1/7;padding-top:72px}
  .gate-card{grid-column:8/13}
  .frame{position:relative;padding:9px;border-radius:34px;background:#05070A;box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
  .frame::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-150px;height:300px;background:radial-gradient(50% 50% at 50% 50%,var(--pool),transparent 72%);pointer-events:none}
}

/* ---------------------------------------------------------------- the call card */
.seg{display:none;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 12px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
html.js .seg{display:grid}
.seg button{min-height:48px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);font-weight:700;font-size:.9375rem;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--gold)}
.call-cap{margin:0 0 10px;color:var(--ink-2);font-weight:500}
.cap-js{display:none}
html.js .cap-js:not([hidden]){display:inline}
html.js .cap-nojs{display:none}
.call-card{position:relative;padding:16px;border-radius:20px;background:var(--surface-2);color:var(--ink)}
@media (min-width:1024px){.call-card{padding:20px;border-radius:26px}}
.sb{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.sb-team{display:flex;align-items:center;gap:10px;min-width:0}
.sb-home{justify-content:flex-end;text-align:right}
.sb-abbr{display:block;font-weight:700;font-size:.9375rem;line-height:1.2;white-space:nowrap}
.sb-tag{display:block;min-height:1.3em;font-weight:700;font-size:.6875rem;line-height:1.3;color:var(--green)}
.star{color:var(--gold)}
.sb-score{display:inline-block;min-width:1.25ch;overflow:hidden;font:800 2.25rem/1 var(--display);font-variant-numeric:tabular-nums;text-align:center}
.sb-score span{display:block}
.sb-mid{min-width:84px;text-align:center;line-height:1.2}
.sb-inn{display:block;font-weight:700;font-size:1.25rem}
.sb-arrow{color:var(--green);font-size:.8125rem}
.sb-half,.sb-outs{display:block;font-size:.75rem;color:var(--ink-2)}
.outs{display:flex;justify-content:center;gap:4px;margin:4px 0 2px}
.outs i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.outs i.on{background:var(--red)}
.sb2{display:flex;align-items:center;gap:10px;margin-top:10px;padding:6px 12px;border-radius:10px;background:var(--surface);font-size:.875rem;font-weight:500}
.bases{flex:none;width:26px;height:26px}
.bases rect{fill:none;stroke:var(--border);stroke-width:1.8}
.bases rect.on{fill:var(--gold);stroke:var(--gold)}
.ab{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--ink-2);font-size:.8125rem;white-space:nowrap}
.ab b{color:var(--ink);font-size:.875rem}
.you{display:inline-block;padding:1px 6px;border-radius:999px;background:rgba(242,193,78,.18);color:var(--gold);font-weight:700;font-size:.6875rem;letter-spacing:.02em;line-height:1.5}
.yc{display:inline-block;margin:16px 0 8px;padding:3px 10px;border-radius:999px;background:rgba(242,193,78,.16);color:var(--gold);font-weight:700;font-size:.8125rem;letter-spacing:.04em}
.prompt{margin:0 0 12px;font-weight:700;font-size:1.25rem;line-height:1.3}
.ctx{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:8px 12px;border-radius:14px;background:var(--surface)}
.ctx .bases{width:30px;height:30px}
.ctx p{margin:0;line-height:1.35}
.ctx-1{display:block;font-weight:500;font-size:.9375rem}
.ctx-2{display:block;font-size:.8125rem;color:var(--ink-2)}
.opts{display:grid;gap:10px}
.opt{position:relative;display:block;width:100%;margin:0;padding:12px 14px 12px 20px;overflow:hidden;border-radius:16px;border:1.5px solid var(--risk);border-color:color-mix(in srgb,var(--risk) 70%,transparent);background:var(--surface-2);color:var(--ink);text-align:left;cursor:pointer;transition:opacity .15s ease-out}
.opt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--risk)}
.r-safe{--risk:var(--green)}.r-bal{--risk:var(--gold)}.r-high{--risk:var(--red)}
.opt:disabled{opacity:1;color:var(--ink);cursor:default}
.opt:not(:disabled):not([aria-disabled="true"]):hover{background:var(--surface)}
.opt[aria-disabled="true"]{cursor:default}
.opt.chosen{border-color:var(--risk);box-shadow:inset 0 0 0 .5px var(--risk)}
.opt.dim{opacity:.4}
.opt-t{display:block;font-weight:700;font-size:1.125rem;line-height:1.3}
.risk{display:inline-block;margin:4px 0;padding:1px 8px;border-radius:999px;color:var(--risk);background:transparent;background:color-mix(in srgb,var(--risk) 12%,transparent);font-weight:700;font-size:.75rem;line-height:1.5}
.opt-e{display:block;font-size:.875rem;line-height:1.4;color:var(--ink-2)}
.opt-o{display:block;margin-top:4px;font-weight:500;font-size:.9375rem;font-variant-numeric:tabular-nums}
.roll{position:relative;display:none;height:6px;margin-top:10px;border-radius:3px;background:var(--line)}
html.js .roll{display:flex}
.roll i{height:100%}
.s-hr{width:calc(var(--hr,0) * 1%);background:var(--gold);border-radius:3px 0 0 3px}
.s-ob{width:calc((var(--ob,0) - var(--hr,0)) * 1%);background:var(--green)}
.s-k{width:calc(var(--k,0) * 1%);background:var(--red)}
.pin{position:absolute;bottom:0;left:calc(var(--r,0) * 1%);width:2px;height:18px;margin-left:-1px;background:var(--chalk);opacity:0}
.pin::before{content:"";position:absolute;left:-2px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.rolled .pin{opacity:1}
.result{min-height:150px;margin-top:14px}
html:not(.js) .result{display:none}
.play{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:6px 10px;border-radius:8px;font-size:.9375rem;line-height:1.4}
.play .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--border)}
.play .you{margin-left:auto}
.t-score{background:rgba(242,193,78,.12);font-weight:700}
.t-score .dot{background:var(--gold)}
.t-hit .dot{background:var(--green)}
.t-out{color:var(--ink-2)}
.t-out .dot{background:var(--line)}
.play.mine{font-weight:700}
.closer{margin:0 0 12px;font-weight:500}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tally{margin:12px 0 0;font-size:.875rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){
  .rolled .pin{animation:pin-drop .3s ease-out}
  .pulse{animation:pulse .45s ease-in-out}
  .flip{animation:flip .25s ease-out}
  .fade{animation:fade-in .2s ease-out both}
}
@keyframes pin-drop{from{transform:translateY(-16px);opacity:0}}
@keyframes pulse{50%{transform:scale(1.15)}}
@keyframes flip{from{transform:translateY(-70%);opacity:0}}

/* ---------------------------------------------------------------- concourse: the road */
.road{position:relative;display:grid;gap:40px;margin:0;padding:0 0 0 40px;list-style:none}
.road::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--chalk);transform-origin:50% 0}
.stop{position:relative}
.stop .base{position:absolute;left:-39px;top:10px;width:14px;height:14px;border:1.5px solid var(--chalk);background:var(--bg);transform:rotate(45deg)}
.stop.passed .base{background:var(--gold);border-color:var(--gold)}
.stop-n{margin:0 0 6px;font:800 2.5rem/1 var(--display);font-variant-numeric:tabular-nums}
.stop h3{font-weight:700;font-size:1.125rem;line-height:1.3}
.stat{display:block;margin:2px 0 10px;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-variant-numeric:tabular-nums}
.stop-t{margin:0 0 4px;font-weight:700}
.stop p{margin-bottom:0}
.draft{position:relative;margin-top:20px;padding:10px 14px;border-radius:12px;background:var(--surface);font-weight:500}
.draft::before{content:"";position:absolute;left:-36px;top:50%;width:8px;height:16px;margin-top:-8px;background:var(--gold);border-radius:2px}
@media (min-width:1024px){
  .road{grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;padding:44px 0 0}
  .road::before{left:0;right:0;top:7px;bottom:auto;width:auto;height:2px;transform-origin:0 50%}
  .stop .base{left:0;top:-44px}
  .draft{position:static;font-size:.9375rem}
  .draft::before{left:auto;right:-21px;top:-46px;width:10px;height:18px;margin:0}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .road::before{animation:draw-y linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
  @media (prefers-reduced-motion:no-preference) and (min-width:1024px){
    .road::before{animation-name:draw-x}
  }
}
@keyframes draw-y{from{transform:scaleY(0)}}
@keyframes draw-x{from{transform:scaleX(0)}}
.ages{display:flex;flex-wrap:wrap;gap:20px 12px;margin:64px 0 16px;padding:0;list-style:none}
.ages li{display:flex;flex-direction:column;align-items:center;width:92px;text-align:center}
.ages img{width:72px;height:72px;border-radius:50%;border:3px solid var(--ring);background:var(--ring);object-fit:cover}
.st1{--ring:#4CAF50}.st2{--ring:#78909C}.st3{--ring:#FFC107}.st4{--ring:#B87333}.st5{--ring:#9C64FF}
.age-l{margin-top:8px;font-weight:700;font-size:.9375rem}
.age-r{font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ages-cap{margin:0;color:var(--ink-2)}
@media (min-width:1024px){.ages{gap:24px}.ages li{width:124px}.ages img{width:96px;height:96px}}

/* ---------------------------------------------------------------- screenshots in phone frames */
.shot{position:relative;isolation:isolate;margin:0}
.phone{position:relative;aspect-ratio:1080/2160;padding:9px;border-radius:34px;background:#05070A;box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.phone::before{content:"";position:absolute;z-index:-1;left:-20%;right:-20%;top:-120px;height:240px;background:radial-gradient(50% 50% at 50% 50%,var(--pool),transparent 72%);pointer-events:none}
.phone img{width:100%;height:100%;border-radius:26px;object-fit:cover;object-position:top}
.shot figcaption{margin-top:14px;text-align:center;font-weight:500;font-size:.9375rem}
.cap-n{margin-right:2px;font:800 1.25rem/1 var(--display)}
.solo{width:min(72vw,300px);margin-inline:auto}
.rail{display:flex;gap:16px;margin:40px calc(-1 * var(--gutter)) 0;padding:16px var(--gutter) 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain}
.rail>.shot{flex:0 0 min(62vw,280px);scroll-snap-align:start}
@media (min-width:900px){
  .rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-inline:0;padding-inline:0;overflow:visible}
  .rail>.shot{width:min(100%,300px);justify-self:center}
}
@media (min-width:1024px){.solo{width:300px}}

/* ---------------------------------------------------------------- clubhouse */
.clubhouse{background-image:repeating-linear-gradient(90deg,var(--stripe) 0 128px,transparent 128px 256px)}
.blocks{display:grid;gap:32px}
.block h3,.tile h3,.more h3{font-weight:700;font-size:1.25rem;line-height:1.3;margin:0 0 8px}
.block p,.tile p{margin:0}
.closing{display:flex;gap:14px;align-items:baseline;max-width:44rem;margin:48px 0 0}
.closing .dia{position:relative;top:-2px}
.closing p{margin:0}
@media (min-width:900px){.blocks{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------------------------------------------------------------- press box */
.ways{display:grid;gap:32px}
.way h3{font:800 2rem/1 var(--display);letter-spacing:.02em;text-transform:uppercase;margin:0 0 10px}
.strap{margin:0 0 8px;font-weight:700;color:var(--gold-text)}
.way p:last-child{margin:0}
@media (min-width:900px){.ways{grid-template-columns:1fr 1fr;gap:48px}}

/* ---------------------------------------------------------------- scoreboard: earn it */
.earn>.wrap{position:relative}
.boards{display:grid;gap:20px;margin-top:8px}
.board{padding:20px;border-radius:20px;border:1px solid var(--line);background:var(--board);color:var(--bulb-on)}
.bulb-h{display:inline-block;margin:0 0 18px;padding:4px 8px;border-radius:6px;background:radial-gradient(circle,var(--bulb-off) 55%,transparent 60%) 0 0/4px 4px;font:800 2.5rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--bulb-on)}
.bulbs{display:block;-webkit-mask:radial-gradient(circle,#000 55%,transparent 60%) 0 0/4px 4px;mask:radial-gradient(circle,#000 55%,transparent 60%) 0 0/4px 4px}
.rows{margin:0;padding:0;list-style:none}
.rows li{padding:10px 0;border-top:1px solid var(--line);font:700 1.125rem/1.25 var(--display);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 0 12px rgba(255,243,209,.35);transition:opacity .3s ease-out}
.rows .lvl{display:block;color:var(--bulb-label)}
.rows .hon{display:block;color:var(--bulb-on)}
.rows .hof{margin-top:6px;padding:10px 12px;border-top:0;border-radius:10px;background:rgba(242,193,78,.14)}
.rows .hof .hon{grid-column:1/-1;color:var(--gold);font-size:1.5rem;letter-spacing:.08em}
.rows li:nth-child(2){transition-delay:90ms}.rows li:nth-child(3){transition-delay:180ms}.rows li:nth-child(4){transition-delay:270ms}.rows li:nth-child(5){transition-delay:360ms}
.pre-light .rows li{opacity:.12;text-shadow:none}
.lb{width:100%;border-collapse:collapse;font:700 1.125rem/1.25 var(--display);letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.lb th{padding:0 0 8px;text-align:left;font-size:.875rem;color:var(--bulb-label)}
.lb td{padding:10px 0;border-top:1px solid var(--line)}
.lb td:first-child,.lb th:first-child{width:4.5rem}
.lb .gap td{color:var(--ink-2)}
.lb .me td{color:var(--gold);background:rgba(242,193,78,.14)}
.lb .me td:first-child{padding-left:8px;border-radius:8px 0 0 8px}
.lb .me td:last-child{border-radius:0 8px 8px 0}
.lb .me .dia{margin-right:10px;position:relative;top:-2px}
.board-cap{margin:14px 0 0;font:400 .875rem/1.5 var(--text);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.more{display:grid;gap:40px;margin-top:56px}
.more p{max-width:36rem;margin:0}
.more-text{display:grid;gap:40px;align-content:center}
@media (min-width:600px){.rows li{display:grid;grid-template-columns:8.5rem 1fr;gap:12px}}
@media (min-width:900px){
  .boards{grid-template-columns:3fr 2fr}
  .more{grid-template-columns:minmax(0,1fr) 300px;column-gap:64px;align-items:center}
}

/* ---------------------------------------------------------------- upper deck */
.tiles{display:grid;gap:20px}
.tile{padding:24px;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:var(--surface)}
.tile-wheel{display:grid;gap:24px;align-items:center}
.thumb{width:200px;margin-inline:auto}
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px;padding:0;list-style:none}
.sw-chip{position:relative;display:block;aspect-ratio:1;border-radius:14px;background:linear-gradient(135deg,var(--lb) 50%,var(--db) 50%);box-shadow:inset 0 0 0 1px var(--line)}
.sw-chip i{position:absolute;width:12px;height:12px;border-radius:50%}
.sw-chip .lp{left:14%;top:14%;background:var(--lp)}
.sw-chip .lm{left:36%;top:14%;background:var(--lm)}
.sw-chip .dp{right:36%;bottom:14%;background:var(--dp)}
.sw-chip .dm{right:14%;bottom:14%;background:var(--dm)}
.sw-name{display:block;margin-top:6px;text-align:center;font-weight:700;font-size:.8125rem}
.sw-dugout{--lb:#EEF3EE;--db:#0E1310;--lp:#0A7A3D;--lm:#865C00;--dp:#42E084;--dm:#F2C14E}
.sw-floodlight{--lb:#EBEBED;--db:#000000;--lp:#006B30;--lm:#7A5000;--dp:#4DFF9A;--dm:#FFD54F}
.sw-clubhouse{--lb:#F5EDDD;--db:#15100B;--lp:#2E7A3A;--lm:#865A08;--dp:#86D69A;--dm:#F2BD5E}
.sw-signal{--lb:#F2F5F9;--db:#0D1117;--lp:#00735A;--lm:#6E6200;--dp:#2FD3A5;--dm:#F0E442}
@media (min-width:600px){.tile-wheel{grid-template-columns:200px minmax(0,1fr)}.thumb{margin:0}}
@media (min-width:900px){.tiles{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- box seats: pro */
.pro-card{max-width:40rem;padding:24px;border-radius:20px;background:var(--surface);box-shadow:inset 0 2px 0 var(--gold-text)}
.pro-card ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.pro-card li{display:flex;align-items:baseline;gap:14px;font-weight:700;font-size:1.125rem}
.pro-card li .dia{position:relative;top:-2px}
.pro-card p{margin:0}
.pro-card p span{font-weight:400;font-size:1rem;color:var(--ink-2)}
.pro .small{max-width:40rem;margin:20px 0 0}
@media (min-width:1024px){.pro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:center}.pro-grid .head{margin-bottom:0}}

/* ---------------------------------------------------------------- guest services */
.faq{max-width:48rem}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary,.toc-m summary{display:flex;align-items:center;gap:14px;min-height:48px;padding:14px 0;cursor:pointer;list-style:none;font-weight:700;font-size:1.125rem;line-height:1.35}
.faq summary::-webkit-details-marker,.toc-m summary::-webkit-details-marker{display:none}
.faq summary::before,.toc-m summary::before{content:"";flex:none;width:10px;height:10px;margin-left:2px;border:1.5px solid var(--gold-text);transform:rotate(45deg);transition:transform .2s ease-out}
.faq details[open] summary::before,.toc-m details[open] summary::before{transform:rotate(225deg);background:var(--gold);border-color:var(--gold)}
.faq .ans{max-width:62ch;padding:0 0 20px 26px}
.faq .ans p{margin:0}
@media (prefers-reduced-motion:reduce){.faq summary::before,.toc-m summary::before{transition:none}}

/* ---------------------------------------------------------------- first pitch */
.get{text-align:center}
.get .wrap{position:relative;padding-block:120px var(--pad)}
.get .h2{margin-inline:auto}
.get p{margin-inline:auto;max-width:36rem}
.get .lede{margin-bottom:28px}
.get .cta{justify-content:center}
.get .small{margin-top:20px}

/* ---------------------------------------------------------------- footer */
.site-footer{padding:40px 0 48px;border-top:1px solid var(--line);font-size:.9375rem;color:var(--ink-2)}
.site-footer p{margin:0 0 12px;max-width:72ch}
.flinks{display:flex;flex-wrap:wrap;margin:0 0 12px -8px;padding:0;list-style:none}
.flinks a{display:inline-flex;align-items:center;min-height:48px;padding:0 8px;font-weight:500}
.fine{font-size:.8125rem}

/* ---------------------------------------------------------------- 404 */
.lost .wrap{position:relative}
.lost-grid{display:grid;gap:40px;padding-block:120px 72px}
.lost .lede{margin:0 0 28px}
.mini{margin:20px 0 0;color:var(--ink-2)}
.mini a{display:inline-flex;align-items:center;min-height:48px;padding:0 4px}
.lost-grid>*{min-width:0}
.lost-art{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px}
.wedge{width:min(52vw,240px);height:auto}
.wedge .foul{stroke:var(--chalk);stroke-width:2;fill:none}
.wedge .arc{stroke:var(--line);stroke-width:2;fill:none}
.wedge circle{fill:#5E6C63}
.wedge .ball{fill:var(--gold)}
.mini-board{padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--board)}
.mini-board .bulb-h{margin:0;font-size:3.5rem}
@media (min-width:900px){.lost-grid{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-block:160px 112px}}

/* ---------------------------------------------------------------- legal pages: the game program */
.legal-band{background-color:var(--board);background-image:linear-gradient(rgba(244,241,232,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,232,.06) 1px,transparent 1px);background-size:32px 32px}
.legal-band .wrap{display:flex;flex-direction:column;align-items:flex-start;padding-block:24px 40px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-bottom:12px;font-weight:700;text-decoration:none}
.back:hover{text-decoration:underline}
.legal-band h1{max-width:22ch;margin:0 0 24px;font:800 clamp(2.25rem,5vw,3.75rem)/1 var(--display);text-wrap:balance}
.legal-band .meta{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:4px 16px;align-self:stretch;max-width:44rem;margin:0;padding:10px 0;border-top:1px solid var(--line);color:var(--ink)}
.legal-band .meta:last-of-type{border-bottom:1px solid var(--line)}
.legal-band .meta strong{font-weight:700;font-size:.75rem;line-height:1.9;letter-spacing:.08em;text-transform:uppercase;color:var(--bulb-label)}
.toc-m{order:1;align-self:stretch;max-width:44rem;margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toc-m summary{font-size:1rem}
.toc-m ol,.toc-rail ol{margin:0;padding:0 0 12px;list-style:none}
.toc-m a,.toc-rail a{display:flex;align-items:center;min-height:44px;padding:4px 0;line-height:1.35;text-decoration:none}
.toc-m a:hover,.toc-rail a:hover{text-decoration:underline}
.toc-rail{display:none}
.toc-h{margin:0 0 8px;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.toc-rail a{min-height:36px;font-size:.875rem;color:var(--ink)}
.legal-wrap{display:grid;grid-template-columns:minmax(0,1fr);padding-block:40px var(--pad)}
.legal-body{max-width:68ch;font-size:1.0625rem;line-height:1.7}
.legal-body a,.legal-band .meta{overflow-wrap:anywhere}
.legal-body.wide{max-width:64rem}
.legal-body .lead{font-size:1.1875rem;line-height:1.6}
.legal-body h2{display:flex;align-items:baseline;gap:12px;margin:48px 0 16px;padding-top:24px;border-top:1px solid var(--line);font:800 1.75rem/1.15 var(--display);scroll-margin-top:80px}
.num{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 4px;border:1.5px solid var(--gold-text);border-radius:4px;font-size:1.0625rem;font-variant-numeric:tabular-nums;position:relative;top:-3px}
.legal-body h2:target .num{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.legal-body ul{margin:0 0 1em;padding:0;list-style:none}
.legal-body li{position:relative;margin:8px 0;padding-left:24px}
.legal-body li::before{content:"";position:absolute;left:3px;top:.72em;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.legal-body hr{height:10px;margin:36px 0;border:0;background:var(--gold-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='10'%3E%3Cpath d='M5 0l5 5-5 5-5-5zM23 0l5 5-5 5-5-5zM41 0l5 5-5 5-5-5z'/%3E%3C/svg%3E") center/46px 10px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='10'%3E%3Cpath d='M5 0l5 5-5 5-5-5zM23 0l5 5-5 5-5-5zM41 0l5 5-5 5-5-5z'/%3E%3C/svg%3E") center/46px 10px no-repeat}
.legal-body blockquote{margin:24px 0;padding:16px 20px;border-left:4px solid var(--green);border-radius:14px;background:var(--surface);font-size:1.125rem;line-height:1.6}
.legal-body blockquote p{margin:0}
.table-wrap{margin:16px 0 24px;overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.legal-body table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.legal-body th{padding:10px 12px;border-bottom:1px solid var(--line);background:var(--band);text-align:left;vertical-align:top;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.legal-body td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legal-body tbody tr:last-child td{border-bottom:0}
.updated{display:inline-block;margin:24px 0 0;padding:6px 14px;border-radius:999px;border:1px solid #2B352F;background:#05080A;color:#FFF3D1;font-weight:700;font-size:.8125rem;letter-spacing:.02em}
.links a{display:inline-flex;align-items:center;min-height:48px;margin-right:20px}
@media (max-width:599px){
  .legal-band .meta{grid-template-columns:1fr;gap:0}
  .legal-body thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .legal-body table,.legal-body tbody,.legal-body tr,.legal-body td{display:block}
  .legal-body tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .legal-body tbody tr:last-child{border-bottom:0}
  .legal-body td{padding:2px 0;border:0}
  .legal-body td::before{content:attr(data-label);display:block;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
}
@media (min-width:1100px){
  .legal-wrap{grid-template-columns:220px minmax(0,68ch);column-gap:56px;justify-content:start}
  .legal-wrap.single{grid-template-columns:minmax(0,64rem)}
  .legal-body{grid-column:2;grid-row:1}
  .legal-wrap.single .legal-body{grid-column:1}
  .toc-rail{display:block;grid-column:1;grid-row:1;position:sticky;top:80px;align-self:start;max-height:calc(100vh - 100px);overflow:auto}
  .toc-m{display:none}
}
/* delete account: two option cards */
.ocards{display:grid;gap:20px;margin:8px 0 24px}
.ocard{padding:20px;border-radius:20px;background:var(--surface);box-shadow:inset 0 2px 0 var(--green)}
@media (min-width:600px){.ocard{padding:24px}}
.ocard.acct{box-shadow:inset 0 2px 0 var(--gold-text)}
.ocard h2{margin:0 0 12px;padding:0;border:0}
.ocard p:last-child{margin-bottom:0}
.steps{counter-reset:step}
.step{position:relative;padding-left:44px;counter-increment:step}
.step::before{content:"";position:absolute;left:6px;top:4px;width:18px;height:18px;border:1.5px solid var(--gold-text);transform:rotate(45deg)}
.step::after{content:counter(step);position:absolute;left:0;top:3px;width:30px;text-align:center;font:800 1rem/22px var(--display)}
@media (min-width:900px){.ocards{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- forced colors */
@media (forced-colors:active){
  .opt,.board,.tile,.pro-card,.ocard,.call-card,.phone,.soon,.seg{border:1px solid CanvasText}
  .bulbs{-webkit-mask:none;mask:none}
  .dia,.dbase,.stop .base{forced-color-adjust:none}
}

/* ---------------------------------------------------------------- print: black on white */
@media print{
  :root,.night,.site-header.is-over{--bg:#fff;--band:#fff;--surface:#fff;--surface-2:#fff;--ink:#000;--ink-2:#222;--line:#999;--link:#000;--gold:#000;--gold-text:#000;--green:#000;--board:#fff;--bulb-label:#000;--bulb-on:#000;--chalk:#999}
  body,.night{background:#fff!important;color:#000}
  .site-header,.site-footer,.toc-m,.toc-rail,.back,.skip,.sign,.lights,.track,.links{display:none!important}
  .legal-band{background:none!important}
  .legal-band .wrap,.legal-wrap{padding-block:0}
  .updated{border:1px solid #000;background:#fff;color:#000}
  a{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")"}
  .phone,.call-card,.ocard,.pro-card{box-shadow:none}
}