/* =========================================================
   COMING SOON page
   ========================================================= */
.cs-hero{position:relative; overflow:hidden; text-align:center; padding:clamp(72px, 10vw, 128px) 0 clamp(64px, 8vw, 96px); border-bottom:1px solid var(--line);}
.cs-hero::before{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(123,175,212,.14), transparent 60%), radial-gradient(ellipse at 50% 110%, rgba(226,86,27,.16), transparent 55%); pointer-events:none;}
.cs-hero .wrap{position:relative; z-index:1;}
.cs-hero h1{font-size:clamp(52px, 11vw, 140px); line-height:.9; letter-spacing:-.01em;}
.cs-hero h1 .outline-text{-webkit-text-stroke:1.5px rgba(243,238,230,.65);}
.cs-hero .lead{max-width:600px; margin:24px auto 0;}
.cs-sheet{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:30px;}
.tape{position:absolute; left:-5%; right:-5%; height:34px; transform:rotate(-2.5deg); display:flex; align-items:center; overflow:hidden; z-index:2;
  background:repeating-linear-gradient(-45deg, var(--orange) 0 22px, #120700 22px 44px); box-shadow:0 10px 30px rgba(0,0,0,.4);}
.tape span{white-space:nowrap; font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.3em; color:#fff; background:#120700; padding:4px 14px; margin-left:8%; text-transform:uppercase;}
.tape.bottom{bottom:18px;}
.tape-track{display:flex; gap:60px; animation:tape 30s linear infinite;}
@keyframes tape{to{transform:translateX(-50%);}}

/* Program panels */
.cs-program{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px, 5vw, 72px); align-items:center;}
.cs-program.flip .cs-visual{order:2;}
.cs-num{font-family:var(--font-display); font-size:clamp(64px, 9vw, 110px); line-height:.8; color:transparent; -webkit-text-stroke:1px var(--line-strong); display:block; margin-bottom:6px;}
.cs-program h2{margin:14px 0 18px;}
.cs-program .lead{margin-bottom:22px;}
.cs-program .check-list{margin-bottom:28px;}
.cs-status{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; margin-bottom:28px;}
.cs-status div{background:var(--bg-2); padding:14px 16px;}
.cs-status small{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-bottom:4px;}
.cs-status strong{font-size:15px; font-weight:600;}
.cs-visual{position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:5/4; border:1px solid var(--line-strong);}

/* 01 Sixes: field with moving players + shot clock */
.v-sixes{background:linear-gradient(rgba(123,175,212,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(123,175,212,.07) 1px, transparent 1px), #0a1626; background-size:22px 22px;}
.v-sixes svg{position:absolute; inset:0; width:100%; height:100%;}
.v-sixes .ln{fill:none; stroke:var(--blue); stroke-width:1.5; opacity:.7;}
.v-sixes .ln.thin{opacity:.35; stroke-dasharray:5 6;}
.v-sixes .path{fill:none; stroke-width:1.5; stroke-dasharray:4 6; opacity:.55; animation:dash 2.5s linear infinite;}
@keyframes dash{to{stroke-dashoffset:-40;}}
.v-sixes .o{fill:var(--orange);} .v-sixes .d{fill:var(--blue-bright);}
.v-sixes .o, .v-sixes .d{filter:drop-shadow(0 0 6px currentColor);}
.v-sixes .ball{fill:#fff;}
.shot-clock{position:absolute; top:16px; right:16px; text-align:center; background:#05080d; border:1px solid rgba(226,86,27,.6); border-radius:6px; padding:8px 14px 6px; box-shadow:0 0 30px rgba(226,86,27,.25);}
.shot-clock small{display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; color:var(--text-faint);}
.shot-clock b{display:block; font-family:var(--font-mono); font-size:34px; line-height:1.05; color:var(--orange); text-shadow:0 0 14px rgba(226,86,27,.7); font-weight:700;}
.shot-clock.low b{color:#ff3b30; animation:blinkc .5s steps(1) infinite;}
@keyframes blinkc{50%{opacity:.35;}}
.v-label{position:absolute; left:16px; bottom:14px; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint);}
.v-big{position:absolute; left:16px; top:12px; font-family:var(--font-display); font-size:clamp(40px, 6vw, 64px); line-height:.9; color:rgba(243,238,230,.08);}

/* 02 Built In The Tank: riveted steel + pressure gauge */
.v-tank{background:
  radial-gradient(circle at 22px 22px, #8a96a4 2.5px, #2a323c 3.5px, transparent 4.5px),
  radial-gradient(circle at calc(100% - 22px) 22px, #8a96a4 2.5px, #2a323c 3.5px, transparent 4.5px),
  radial-gradient(circle at 22px calc(100% - 22px), #8a96a4 2.5px, #2a323c 3.5px, transparent 4.5px),
  radial-gradient(circle at calc(100% - 22px) calc(100% - 22px), #8a96a4 2.5px, #2a323c 3.5px, transparent 4.5px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px),
  linear-gradient(160deg, #3a434e 0%, #1c232c 45%, #11161d 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px;}
.v-tank::before{content:''; position:absolute; inset:10px; border:2px solid rgba(0,0,0,.45); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); border-radius:6px; pointer-events:none;}
.v-tank::after{content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.08) 48%, transparent 60%); background-size:250% 100%; animation:sheen 6s ease-in-out infinite; pointer-events:none;}
@keyframes sheen{0%{background-position:120% 0;}60%,100%{background-position:-60% 0;}}
.tank-title{position:relative; z-index:1; font-family:var(--font-display); text-transform:uppercase; line-height:.88; letter-spacing:.02em; color:#e9e4da;
  text-shadow:0 2px 0 #000, 0 0 24px rgba(0,0,0,.6);}
.tank-title small{display:block; font-size:clamp(14px, 2vw, 20px); letter-spacing:.4em; color:var(--orange);}
.tank-title b{display:block; font-weight:400; font-size:clamp(44px, 7vw, 76px);
  -webkit-mask:repeating-linear-gradient(90deg, #000 0 46%, transparent 46% 50%); mask:repeating-linear-gradient(90deg, #000 0 46%, transparent 46% 50%); mask-size:22px 100%; -webkit-mask-size:22px 100%;}
.gauge{position:relative; z-index:1; width:min(150px, 34%); margin-top:18px;}
.gauge svg{width:100%; overflow:visible;}
.gauge .face{fill:#0b0f14; stroke:#596472; stroke-width:4;}
.gauge .tick{stroke:#8a96a4; stroke-width:2;}
.gauge .red{fill:none; stroke:var(--orange); stroke-width:7;}
.gauge .needle{stroke:#fff; stroke-width:3; stroke-linecap:round; transform-origin:60px 60px; animation:needle 4s cubic-bezier(.5,0,.3,1) infinite;}
@keyframes needle{0%{transform:rotate(-120deg);}55%{transform:rotate(95deg);}62%{transform:rotate(80deg);}70%,85%{transform:rotate(100deg);}100%{transform:rotate(-120deg);}}
.gauge text{font-family:var(--font-mono); font-size:9px; fill:#8a96a4; letter-spacing:.15em;}
.frost{position:absolute; top:32px; right:36px; z-index:1; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; color:var(--blue-bright); border:1px solid rgba(168,208,238,.4); padding:5px 9px; background:rgba(5,8,13,.5);}

/* 03 Girls Training: rotating ring text */
.v-girls{background:radial-gradient(circle at 50% 50%, #142a44 0%, #0a1626 55%, #070c14 100%); display:flex; align-items:center; justify-content:center;}
.v-girls svg{width:86%; height:86%;}
.v-girls .ring-text{font-family:var(--font-mono); font-size:13px; letter-spacing:.32em; fill:var(--blue); text-transform:uppercase;}
.v-girls .spin{transform-origin:200px 200px; animation:spin 40s linear infinite;}
.v-girls .spin-rev{transform-origin:200px 200px; animation:spin 60s linear infinite reverse;}
.v-girls .r1{fill:none; stroke:var(--line-strong); stroke-width:1;}
.v-girls .r2{fill:none; stroke:var(--orange); stroke-width:2; stroke-dasharray:6 10;}
.v-girls .stick{fill:none; stroke:#e9e4da; stroke-width:2.5; stroke-linecap:round;}
.v-girls .mesh{fill:none; stroke:rgba(233,228,218,.4); stroke-width:1;}
.v-girls .big{font-family:var(--font-display); font-size:58px; fill:#f3eee6; letter-spacing:.02em;}
.v-girls .big2{font-family:var(--font-display); font-size:22px; fill:var(--orange); letter-spacing:.2em;}

.cs-strip{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;}
.cs-mini{position:relative; overflow:hidden;}
.cs-mini .tag{color:var(--orange);}
@media (max-width:900px){
  .cs-program{grid-template-columns:1fr;}
  .cs-program.flip .cs-visual{order:0;}
  .cs-strip{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .shot-clock b{font-size:26px;}
}

/* Hidden Tank registration page */
.tank-hero{text-align:left;}
.tank-hero h1{font-size:clamp(48px, 7vw, 96px);}
.tank-hero .lead{margin:22px 0 0;}
.tank-hero .btn-row{justify-content:flex-start;}
@media (max-width:900px){ .tank-hero{text-align:center;} .tank-hero .lead{margin:22px auto 0;} .tank-hero .btn-row{justify-content:center;} }
@media (max-width:640px){ .v-tank .frost{display:none;} }
.tank-hero .cs-status{margin-top:28px;} .tank-hero .btn-row{margin-top:28px;}

/* Notify Me sign-up */
.notify{margin:auto; inset:0; height:fit-content; border:0; padding:16px; background:transparent; max-width:520px; width:100%; color:var(--text);}
.notify::backdrop{background:rgba(3,6,10,.78); backdrop-filter:blur(4px);}
.notify-card{position:relative; background:var(--bg-2, #0d1522); border:1px solid var(--line-strong); border-top:3px solid var(--orange); border-radius:12px; padding:30px 26px 24px; box-shadow:0 30px 80px rgba(0,0,0,.6); max-height:calc(100dvh - 32px); overflow:auto;}
.notify-card h3{font-size:clamp(26px, 5vw, 34px); margin:8px 0 6px;}
.notify-sub{color:var(--text-dim, #a9b4c2); margin:0 0 18px; font-size:15px;}
.notify-close{position:absolute; top:10px; right:12px; width:40px; height:40px; border:0; background:none; color:var(--text); font-size:28px; line-height:1; cursor:pointer; border-radius:8px;}
.notify-close:hover{background:rgba(255,255,255,.06);}
.notify-programs{border:0; padding:0; margin:0 0 16px; display:flex; flex-wrap:wrap; gap:8px;}
.notify-programs legend{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px;}
.notify-programs label{cursor:pointer;}
.notify-programs input{position:absolute; opacity:0; pointer-events:none;}
.notify-programs span{display:inline-block; padding:9px 14px; border:1px solid var(--line-strong); border-radius:999px; font-size:14px; transition:all .15s ease;}
.notify-programs input:checked + span{background:var(--orange); border-color:var(--orange); color:#160800; font-weight:700;}
.notify-programs input:focus-visible + span{outline:2px solid var(--blue); outline-offset:2px;}
.notify .field{display:block; margin-bottom:12px;}
.notify-trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.notify-fine{font-size:12px; color:var(--text-faint); margin:12px 0 0; text-align:center;}
.notify-done{text-align:center; padding:18px 0 4px;}
.notify-done p{color:var(--text-dim, #a9b4c2); margin:0 0 20px;}
.notify-check{width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:var(--orange); color:#160800; font-size:34px; font-weight:700; display:grid; place-items:center;}
body.notify-open{overflow:hidden;}