:root{
  --pitch:#0a3524; --pitch-deep:#06231a; --volt:#c8f542; --paper:#f7f5ec;
  --clay:#e4572e; --bg:#f7f5ec; --surface:#fffdf4; --surface-alt:#efead8;
  --text:#101613; --dim:#5c665f; --border:#d8d2bd; --accent:#1d6a4a;
  --font-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-body:"Barlow",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:16px;line-height:1.45}
a{color:var(--accent)}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
main.wrap{padding-bottom:56px}
h1,h2,h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;margin:0}
.display-xl{font-size:64px;line-height:.95;font-weight:700}
.display-lg{font-size:44px;line-height:1;font-weight:700}
.kicker{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin:0}
.lede{font-size:17px;max-width:56ch}
.dim{color:var(--dim)} .small{font-size:13px}
.center-note{text-align:center;margin-top:26px;color:var(--dim)}
.linklike{background:none;border:none;color:var(--accent);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:0}
.w-full{width:100%}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;background:var(--pitch-deep);color:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper)}
.brand-logo{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-kicker{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;opacity:.75}
.brand-name{font-family:var(--font-display);font-size:30px;font-weight:700;text-transform:uppercase;line-height:.95}
.topnav{display:flex;align-items:center;gap:8px}
.topnav-btn{background:none;border:1px solid rgba(247,245,236,.35);color:var(--paper);border-radius:999px;padding:6px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.topnav-call{color:var(--volt);font-weight:700;text-decoration:none;font-size:15px;white-space:nowrap}
.topnav-sep{color:rgba(247,245,236,.45);font-weight:700}
@media (max-width:640px){ .topnav-btn{display:none} .topnav-call{font-size:12.5px} .display-xl{font-size:48px} .display-lg{font-size:36px} }

/* splash / intro — "Match Night": floodlights bloom, pitch lines draw in,
   ball drops to the center spot, V1 badge pops, words stagger in, bubbles rise */
.splash{position:fixed;inset:0;z-index:60;color:var(--paper);overflow:hidden;cursor:pointer;transition:opacity .45s ease;background:linear-gradient(180deg,#04160d 0%,#07271a 34%,#0a3524 62%,#0d4029 100%);user-select:none;-webkit-user-select:none}
.splash.gone{opacity:0;pointer-events:none}
.mn-glow{position:absolute;top:-70px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(240,255,210,.55) 0%,rgba(200,245,66,.18) 45%,rgba(200,245,66,0) 70%);opacity:0;animation:mnGlow 1.4s ease-out .1s forwards}
.mn-glow.l{left:-90px} .mn-glow.r{right:-90px;animation-delay:.35s}
@keyframes mnGlow{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.mn-beam{position:absolute;top:0;width:130px;height:300px;opacity:0;background:linear-gradient(180deg,rgba(255,255,225,.20),rgba(255,255,225,0));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);animation:mnGlow 1.6s ease-out .2s forwards}
.mn-beam.l{left:6%;transform:rotate(9deg)} .mn-beam.r{right:6%;transform:rotate(-9deg);animation-delay:.45s}
.mn-pitch{position:absolute;left:0;right:0;bottom:0;height:46%;opacity:0;background:repeating-linear-gradient(90deg,#0e4a2d 0 56px,#0a3d24 56px 112px);animation:mnFade 1.2s ease-out .5s forwards}
.mn-lines{position:absolute;left:0;right:0;bottom:0;height:46%;width:100%}
.mn-lines path,.mn-lines circle,.mn-lines line{stroke:rgba(247,245,236,.85);stroke-width:3;fill:none;stroke-dasharray:1200;stroke-dashoffset:0;animation:mnDraw 1.4s ease-in-out .7s backwards}
@keyframes mnDraw{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}
@keyframes mnFade{from{opacity:0}to{opacity:1}}
.mn-ball{position:absolute;left:50%;top:47%;width:76px;height:76px;margin-left:-38px;filter:drop-shadow(0 10px 10px rgba(0,0,0,.45));animation:mnDrop 1.05s cubic-bezier(.28,.84,.42,1) .95s backwards}
@keyframes mnDrop{0%{transform:translateY(-330px) rotate(-160deg)}55%{transform:translateY(0) rotate(0deg) scale(1,1)}68%{transform:translateY(-26px) rotate(10deg)}82%{transform:translateY(0) scale(1.06,.9)}100%{transform:translateY(0) scale(1,1)}}
.mn-ripple{position:absolute;left:50%;top:calc(47% + 66px);width:90px;height:22px;margin-left:-45px;border:3px solid rgba(200,245,66,.8);border-radius:50%;opacity:0;animation:mnRip 1.1s ease-out 1.95s backwards}
.mn-ripple.d2{animation-delay:2.25s;border-color:rgba(247,245,236,.6)}
@keyframes mnRip{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(2.6)}}
.mn-tuft{position:absolute;top:calc(47% + 52px);width:34px;opacity:1;transform-origin:50% 100%;animation:mnSprout .55s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes mnSprout{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.mn-badge{position:absolute;left:50%;top:9%;width:118px;height:118px;margin-left:-59px;border-radius:50%;box-shadow:0 14px 30px rgba(0,0,0,.5);animation:mnPop .6s cubic-bezier(.34,1.56,.64,1) 2.1s backwards}
@keyframes mnPop{0%{transform:scale(0) rotate(-14deg);opacity:0}70%{transform:scale(1.1) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.mn-title{position:absolute;left:0;right:0;top:calc(9% + 128px);text-align:center;color:var(--paper);font-family:var(--font-display);text-transform:uppercase}
.mn-title .w{display:inline-block;font-size:44px;font-weight:700;letter-spacing:2px;animation:mnUp .5s cubic-bezier(.34,1.4,.64,1) backwards}
.mn-title .lime{color:var(--volt)}
@keyframes mnUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.mn-tag{position:absolute;left:0;right:0;top:calc(9% + 182px);text-align:center;color:rgba(247,245,236,.85);font-size:16px;font-style:italic;animation:mnFade 1s ease-out 3.15s backwards}
.mn-bubbles{position:absolute;left:0;right:0;bottom:34px;display:flex;justify-content:center;gap:14px;padding:0 10px}
.mn-bub{animation:mnRise .55s cubic-bezier(.34,1.56,.64,1) backwards}
.mn-bub-in{display:block;padding:13px 18px;border-radius:999px;font-size:15px;font-weight:700;color:#07271a;box-shadow:0 8px 18px rgba(0,0,0,.35);animation:mnBob 2.6s ease-in-out infinite;white-space:nowrap}
@keyframes mnRise{from{opacity:0;transform:translateY(46px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mnBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mn-hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;color:rgba(247,245,236,.55);font-size:11px;letter-spacing:2px;text-transform:uppercase;animation:mnFade 1s ease-out 3.9s backwards}
.splash.skip-fast *{animation-duration:0s !important;animation-delay:0s !important}
@media (max-width:520px){ .mn-title .w{font-size:30px} .mn-bub-in{font-size:12.5px;padding:11px 12px} .mn-badge{width:96px;height:96px;margin-left:-48px} .mn-title{top:calc(9% + 106px)} .mn-tag{top:calc(9% + 152px);font-size:13px} }
@media (prefers-reduced-motion:reduce){ .splash *{animation-duration:0s !important;animation-delay:0s !important} }

/* bubbles (layout A: Floating Pitch — bubbles float over a grass pitch) */
.pitch-scene{position:relative;border-radius:28px;overflow:hidden;margin-top:18px;padding:36px 22px 30px;background:linear-gradient(rgba(247,245,236,.92),rgba(247,245,236,.28) 32%,rgba(247,245,236,0) 54%),repeating-linear-gradient(90deg,#58a95d 0 72px,#4c9e52 72px 144px);box-shadow:inset 0 0 0 2px rgba(10,53,36,.14),0 18px 40px rgba(6,35,26,.18)}
.pitch-lines{position:absolute;inset:0;pointer-events:none}
.pitch-halfway{position:absolute;left:0;right:0;top:60%;height:2px;background:rgba(255,255,255,.5)}
.pitch-circle{position:absolute;top:60%;left:50%;width:190px;height:190px;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.5);border-radius:50%}
.pitch-box{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:300px;height:72px;border:2px solid rgba(255,255,255,.42);border-bottom:none}
.pitch-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(247,245,236,.94);color:var(--pitch);font-weight:700;font-size:15px;border-radius:999px;padding:6px 16px 6px 7px;box-shadow:0 4px 14px rgba(6,35,26,.18);margin-bottom:14px}
.pitch-pill img{border-radius:50%;display:block}
.bubbles-head{position:relative;z-index:2;text-align:center;padding:6px 0 8px}
.bubbles-head .lede{margin-inline:auto}
.bubbles{position:relative;z-index:2;display:flex;flex-direction:column;gap:20px;max-width:780px;margin:28px auto 0}
.bubble{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:none;cursor:pointer;border-radius:999px;padding:26px 34px;color:#fff;width:min(430px,88%);backdrop-filter:brightness(1.08) saturate(1.15);-webkit-backdrop-filter:brightness(1.08) saturate(1.15);box-shadow:0 16px 30px rgba(6,35,26,.30),inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 3px 6px rgba(255,255,255,.55),inset 0 16px 26px rgba(255,255,255,.28),inset 0 -18px 28px rgba(255,255,255,.30),inset 0 -26px 34px rgba(6,35,26,.14);transition:transform .18s cubic-bezier(.34,1.45,.64,1);font-family:var(--font-body);animation:bob 3.6s ease-in-out infinite alternate}
.bubble:hover{animation-play-state:paused}
@keyframes bob{from{translate:0 0}to{translate:0 -9px}}
.bubble:active{transform:scale(.97)}
.bubble::before{content:"";position:absolute;z-index:1;top:9px;left:24px;width:118px;height:54px;border-radius:50%;transform:rotate(-11deg);background:radial-gradient(ellipse at center,rgba(255,255,255,.98) 0%,rgba(255,255,255,.45) 42%,rgba(255,255,255,0) 70%);filter:blur(1px);pointer-events:none}
.bubble::after{content:"";position:absolute;z-index:1;top:5px;left:30px;right:30px;height:48%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.10) 55%,rgba(255,255,255,0));box-shadow:inset 0 2px 3px rgba(255,255,255,.75);pointer-events:none}
.bubble-parent{background:radial-gradient(circle at 30% 16%,rgba(255,255,255,.45),rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(84,224,120,.90) 0%,rgba(35,179,84,.90) 52%,rgba(15,128,55,.92) 100%);align-self:flex-start}
.bubble-trainer{background:radial-gradient(circle at 30% 16%,rgba(255,255,255,.50),rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(219,240,125,.90) 0%,rgba(143,199,50,.90) 52%,rgba(95,150,25,.92) 100%);align-self:center;animation-delay:.55s}
.bubble-player{background:radial-gradient(circle at 30% 16%,rgba(255,255,255,.45),rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(99,214,158,.90) 0%,rgba(39,181,126,.90) 52%,rgba(16,128,88,.92) 100%);align-self:flex-end;animation-delay:1.1s}
.bubble-emoji,.bubble-title,.bubble-blurb{position:relative;z-index:2}
.bubble-title,.bubble-blurb{text-shadow:0 1px 3px rgba(6,35,26,.40)}
.pitch-scene .welcome-card{position:relative;z-index:2}
.pitch-scene .center-note{position:relative;z-index:2;color:var(--pitch-deep);font-weight:600}
.pitch-scene .center-note .linklike{color:var(--pitch-deep)}
@media (prefers-reduced-motion:reduce){ .bubble{animation:none} }
.bubble-emoji{font-size:30px}
.bubble-title{font-family:var(--font-display);font-size:38px;font-weight:700;text-transform:uppercase;line-height:1}
.bubble-blurb{font-size:15px;opacity:.92;max-width:44ch}
.welcome-card{max-width:560px;margin:22px auto 0}

/* cards, buttons, forms */
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 1px 0 rgba(16,22,19,.05)}
.card-title{font-size:26px;font-weight:600;margin-bottom:6px}
.btn-primary{display:inline-block;background:var(--accent);color:#f4ffe9;border:none;border-radius:14px;padding:13px 20px;font:inherit;font-weight:700;cursor:pointer;text-align:center}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{display:inline-block;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:14px;padding:11px 18px;font:inherit;font-weight:600;cursor:pointer}
.btn-ghost:active{transform:scale(.98)}
.backbtn{background:none;border:none;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;padding:18px 0 6px}
.form-card{display:flex;flex-direction:column;gap:14px;max-width:560px}
.fld{display:block}
.fld span{display:block;font-weight:600;font-size:14px;margin-bottom:5px}
.fld input,.fld select{width:100%;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:11px 12px;font:inherit;color:var(--text)}
.fld input:focus,.fld select:focus{outline:2px solid var(--accent)}
.form-err{color:var(--clay);font-weight:600;margin:0}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:1fr}
@media (min-width:860px){ .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} }
.section{margin-top:38px}
.section > h2{font-size:32px;font-weight:600;margin-bottom:12px}

/* tier cards */
.tier-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tier-name{font-size:32px;font-weight:600;line-height:1}
.tier-tag{color:var(--dim);font-weight:600;font-size:14px;margin-top:2px}
.wk-badge{font-family:var(--font-display);background:var(--accent);color:#f4ffe9;font-weight:700;font-size:18px;border-radius:10px;padding:4px 10px;white-space:nowrap}
.price-line{font-weight:600;color:var(--dim);margin:12px 0 6px}
.tier ul{margin:10px 0 0;padding:0;list-style:none}
.tier li{display:flex;gap:8px;font-size:14.5px;margin-top:6px}
.tier li::before{content:"●";color:var(--accent);font-size:11px;margin-top:3px}

/* rest of year */
.restyear{background:var(--pitch);color:var(--paper);border-radius:22px;padding:24px}
.restyear h2{color:var(--paper)}
.restyear .fee{display:inline-block;background:var(--volt);color:var(--pitch-deep);font-weight:700;border-radius:999px;padding:6px 16px;margin:8px 0 4px}
.dates{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.date-chip{background:rgba(247,245,236,.12);border:1px solid rgba(247,245,236,.35);border-radius:999px;padding:6px 14px;font-weight:600;font-size:14.5px}
.restyear .fineprint{font-weight:700;margin:6px 0 0}
.restyear .fineprint2{opacity:.85;margin:4px 0 0}

/* venue */
.venue-rate{font-weight:700}
.venue-list{margin:0;padding:0;list-style:none}
.venue-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px}
.venue-list li:last-child{border-bottom:none}
.venue-list .vr{font-weight:600;white-space:nowrap}

/* hero */
.hero{background:var(--pitch);color:var(--paper);border-radius:24px;padding:28px;margin-top:18px}
.hero h2{font-size:42px;line-height:1.02;font-weight:700}
.hero p{opacity:.92;max-width:60ch}
.hero .kicker{color:var(--volt)}

/* providers */
.provider-note{border:1.5px dashed var(--border);background:var(--surface-alt);border-radius:18px;padding:18px 20px;margin-bottom:16px}
.provider-note h2{font-size:24px;font-weight:600;margin-bottom:4px}
.provider-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pchip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:5px 14px;font-weight:600;font-size:14px;color:var(--dim)}
.provider-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;border-radius:14px;border:1px solid var(--border);padding:14px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;margin-bottom:10px;box-shadow:0 1px 2px rgba(16,22,19,.08)}
.provider-btn:active{transform:scale(.99)}
.guest-card{margin-top:4px}

/* login */
.login-head{display:flex;align-items:center;gap:14px;margin-top:6px}

/* home */
.home-head{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.avatar-dot{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;color:#fff;font-family:var(--font-display);font-weight:600;flex-shrink:0}
.player-card{border-left:6px solid var(--accent)}
.empty-note{border:1.5px dashed var(--border);border-radius:14px;padding:16px;color:var(--dim);background:var(--surface)}
.signout-row{margin-top:34px;text-align:center}

/* footer */
.footer{background:var(--pitch-deep);color:var(--paper);margin-top:0;padding:26px 0}
.footer a{color:var(--volt)}
.footer p{margin:4px 0}
.ball-slot{display:inline-flex}

/* press pop — every tappable element gets the click animation */
button,a,select,input,.card,.date-chip,.pchip{-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .18s cubic-bezier(.34,1.45,.64,1)}
.pop-press{transform:scale(.95)}
.card.pop-press{transform:scale(.98)}
.date-chip.pop-press,.pchip.pop-press{transform:scale(.93)}
input.pop-press,select.pop-press{transform:scale(.99)}
button:active,a:active{transform:scale(.95)}
.card:active{transform:scale(.98)}
.date-chip:active,.pchip:active{transform:scale(.93)}
@media (prefers-reduced-motion:reduce){ .pop-press,button:active,a:active,.card:active,.date-chip:active,.pchip:active{transform:none} }