/* Season Pass full-page trial wall (pages/season-pass-wall.blade.php).
   Ported from the ASOTV concept mockup; real checkout lives in
   public/js/pitch/season-pass-wall.js. No build step — bump asset_version. */

:root {
    --spw-red:#e11d2a; --spw-red2:#b3101c; --spw-yellow:#ffd400; --spw-ink:#0b0b0f; --spw-paper:#fffdf5;
    --pc-bg:#0a0a0a; --pc-amber:#f59e0b; --pc-orange:#f97316; --ball:#16a34a; --strike:#dc2626; --foul:#d97706;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-snap-type:y proximity; }
body { font-family:'Archivo',system-ui,sans-serif; color:var(--spw-ink); background:var(--spw-paper); line-height:1.35; overflow-x:hidden; }
body.spw-modal-open { overflow:hidden; }
.spw-wrap { width:100%; max-width:860px; margin:0 auto; padding:0 clamp(14px,4vw,22px); }

/* every full-height panel snaps and vertically-centers its content */
.spw-screen { min-height:100vh; min-height:100svh; scroll-snap-align:start;
    display:flex; flex-direction:column; justify-content:center; padding:clamp(16px,3.4vh,40px) 0; }

.spw-marquee { background:var(--spw-ink); color:var(--spw-yellow); font-weight:800; text-transform:uppercase; letter-spacing:1px; text-align:center; padding:8px 12px; font-size:.8rem; }
.spw-marquee b { color:#fff; }

/* hero */
.spw-hero { position:relative; overflow:hidden; background:radial-gradient(120% 120% at 50% -10%, #ff5a5a 0%, var(--spw-red) 45%, var(--spw-red2) 100%); color:#fff; text-align:center; }
.spw-hero-bg { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.spw-hero .spw-wrap { position:relative; z-index:1; }
.spw-badge { display:inline-block; background:var(--spw-yellow); color:var(--spw-ink); font-weight:900; text-transform:uppercase; letter-spacing:1.4px; padding:5px 15px; border-radius:999px; font-size:clamp(.66rem,2.4vmin,.82rem); box-shadow:0 4px 0 rgba(0,0,0,.25); transform:rotate(-2deg); }
.spw-hero h1 { font-size:clamp(1.75rem,6.2vmin,3.4rem); line-height:1.02; margin:clamp(10px,2.4vh,18px) 0 8px; text-shadow:3px 3px 0 rgba(0,0,0,.28); }
.spw-hero h1 em { color:var(--spw-yellow); font-style:normal; }
.spw-hero .spw-deck { font-size:clamp(.9rem,2.5vmin,1.22rem); font-weight:700; max-width:600px; margin:0 auto; opacity:.97; }
.spw-hero-grid { display:flex; gap:clamp(10px,3vw,30px); align-items:center; justify-content:center; margin:clamp(14px,3vh,28px) auto 0; flex-wrap:nowrap; }

.spw-burst { position:relative; width:clamp(108px,30vw,168px); aspect-ratio:1; flex:0 0 auto; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--spw-ink);
    background:var(--spw-yellow);
    clip-path:polygon(50% 2%,58.3% 19.1%,74% 8.4%,72.6% 27.4%,91.6% 26%,80.9% 41.7%,98% 50%,80.9% 58.3%,91.6% 74%,72.6% 72.6%,74% 91.6%,58.3% 80.9%,50% 98%,41.7% 80.9%,26% 91.6%,27.4% 72.6%,8.4% 74%,19.1% 58.3%,2% 50%,19.1% 41.7%,8.4% 26%,27.4% 27.4%,26% 8.4%,41.7% 19.1%);
    transform:rotate(-8deg); box-shadow:0 8px 22px rgba(0,0,0,.3); }
.spw-burst .small { font-weight:900; font-size:clamp(.56rem,1.7vmin,.72rem); text-transform:uppercase; }
.spw-burst .big { font-family:'Anton'; font-size:clamp(1.7rem,5.5vmin,2.6rem); line-height:.9; }

/* ===== REAL pitch-counter phone (mirrors /counters/pitch-counter) ===== */
.spw-phone { width:clamp(182px,46vw,236px); flex:0 0 auto; background:#1c1c1c; border-radius:30px; padding:10px; box-shadow:0 18px 40px rgba(0,0,0,.5); border:2px solid #333; }
.pc-card { background:var(--pc-bg); border-radius:22px; padding:13px 12px 12px; color:#fff; text-align:left; border:1px solid #262626; }
.pc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.pc-pitcher { font-weight:800; font-size:.9rem; color:#fff; display:flex; align-items:center; gap:6px; }
.pc-pitcher .dot { width:8px; height:8px; border-radius:50%; background:var(--pc-orange); box-shadow:0 0 8px var(--pc-orange); }
.pc-swap { width:27px; height:27px; border-radius:8px; background:#1e1e1e; border:1px solid #333; color:var(--pc-amber); display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.pc-ab { font-size:.66rem; color:#9ca3af; letter-spacing:.03em; margin-bottom:9px; }
.pc-ab b { color:#e5e7eb; font-weight:700; }
.pc-total-label { text-align:center; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:#9ca3af; font-weight:800; }
.pc-total { text-align:center; font-family:'Anton'; font-size:clamp(3.2rem,11vw,4.4rem); line-height:.86; margin:2px 0 3px;
    background:linear-gradient(180deg,#fff,#f5a623); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pc-bso { display:flex; justify-content:space-between; gap:6px; margin:8px 2px 10px; }
.pc-bso .g { flex:1; text-align:center; }
.pc-bso .lbl { font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; color:#8b8b8b; font-weight:800; display:block; margin-bottom:4px; }
.pc-bso .dots { display:flex; gap:4px; justify-content:center; }
.pc-bso .dots i { width:11px; height:11px; border-radius:50%; background:#2a2a2a; border:1px solid #3a3a3a; display:inline-block; }
.pc-bso .dots i.on-b { background:var(--ball); border-color:var(--ball); box-shadow:0 0 6px rgba(22,163,74,.7); }
.pc-bso .dots i.on-s { background:var(--strike); border-color:var(--strike); box-shadow:0 0 6px rgba(220,38,38,.7); }
.pc-bso .dots i.on-o { background:var(--pc-amber); border-color:var(--pc-amber); box-shadow:0 0 6px rgba(245,158,11,.6); }
.pc-btns { display:flex; gap:6px; }
.pc-btns .b { flex:1; text-align:center; font-weight:800; font-size:.78rem; padding:10px 0; border-radius:10px; color:#fff; }
.pc-btns .ball { background:var(--ball); }
.pc-btns .strike { background:var(--strike); }
.pc-btns .foul { background:var(--foul); }
.pc-mini { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; padding-top:9px; border-top:1px solid #222; }
.pc-mini .mini-svg { width:46px; }
.pc-mini .mini-cap { font-size:.54rem; color:#9ca3af; text-transform:uppercase; letter-spacing:.08em; font-weight:800; line-height:1.3; }
.pc-mini .mini-cap b { color:var(--pc-amber); }

/* CTA */
.spw-cta { display:inline-block; background:var(--spw-yellow); color:var(--spw-ink); font-family:'Anton'; font-size:clamp(1.1rem,4vmin,1.7rem); text-transform:uppercase; text-decoration:none;
    padding:clamp(12px,2vh,16px) clamp(22px,5vw,30px); border-radius:14px; box-shadow:0 6px 0 #b58f00, 0 14px 26px rgba(0,0,0,.28); margin-top:clamp(16px,3vh,26px); transition:transform .06s; cursor:pointer; border:0; }
.spw-cta:active { transform:translateY(3px); }

/* the "you won't lose your data" reassurance under the hero CTA */
.spw-datasafe { margin-top:clamp(12px,2.4vh,18px); color:#fff; font-weight:700; font-size:clamp(.82rem,2.3vmin,.95rem); opacity:.96; display:inline-flex; align-items:center; gap:8px; background:rgba(0,0,0,.18); padding:8px 15px; border-radius:999px; }
.spw-datasafe::before { content:"🔒"; }

h2.spw-sec { font-size:clamp(1.45rem,5vmin,2.4rem); text-align:center; margin-bottom:8px; line-height:1.08; }
.spw-kicker { text-align:center; color:var(--spw-red); font-weight:900; text-transform:uppercase; letter-spacing:2px; font-size:clamp(.72rem,2.2vmin,.85rem); margin-bottom:6px; }

/* strike-zone hero */
.spw-zone { background:var(--pc-bg); color:#fff; border-radius:22px; max-width:740px; margin:0 auto; padding:clamp(18px,3vh,28px); display:flex; gap:clamp(16px,4vw,28px); align-items:center; flex-wrap:wrap; justify-content:center; box-shadow:0 18px 44px rgba(0,0,0,.28); }
.spw-zone-svg { width:clamp(130px,30vmin,200px); flex:0 0 auto; }
.spw-zone-copy { flex:1; min-width:min(100%,260px); }
.spw-zone-copy .spw-kicker { text-align:left; color:var(--pc-amber); margin-bottom:8px; }
.spw-zone-copy h3 { font-size:clamp(1.35rem,4.4vmin,1.8rem); line-height:1.14; margin-bottom:8px; }
.spw-zone-copy p { color:#cbd5e1; font-weight:500; font-size:clamp(.92rem,2.5vmin,1.05rem); }
.spw-zone-legend { list-style:none; display:flex; gap:16px; margin-top:14px; }
.spw-zone-legend li { display:flex; align-items:center; gap:6px; font-size:clamp(.78rem,2.2vmin,.88rem); font-weight:700; color:#e2e8f0; }
.spw-zone-legend .d { width:12px; height:12px; border-radius:50%; display:inline-block; }
.spw-zone-legend .d.ball { background:var(--ball); }
.spw-zone-legend .d.strike { background:var(--strike); }
.spw-zone-legend .d.foul { background:var(--foul); }

/* pick-a-pass */
.spw-order { position:relative; overflow:hidden; background:#fff5f5; }
.spw-order-bg { position:absolute; inset:0; z-index:0; pointer-events:none;
    background:url('/images/mockup/pitch-asotv-bg.jpg') center/cover no-repeat; opacity:.18;
    -webkit-mask-image:radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
    mask-image:radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%); }
.spw-order .spw-wrap { position:relative; z-index:1; }
.spw-order-sub { text-align:center; color:#64748b; font-weight:600; font-size:clamp(.9rem,2.4vmin,1.05rem); max-width:470px; margin:2px auto 0; }
.spw-picks { display:flex; gap:clamp(10px,2.5vw,16px); max-width:420px; margin:clamp(14px,3vh,24px) auto 0; flex-wrap:wrap; justify-content:center; }
.spw-pick { flex:1 1 260px; border:2px solid #f0c9cc; border-radius:18px; padding:clamp(16px,2.6vh,22px) 18px; cursor:pointer; text-align:center; background:#fff; transition:transform .1s, box-shadow .1s, border-color .1s; position:relative; }
.spw-pick:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(225,29,42,.18); border-color:var(--spw-red); }
.spw-pick .spw-pick-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--spw-red); color:#fff; font-size:.64rem; font-weight:900; text-transform:uppercase; letter-spacing:1px; padding:3px 12px; border-radius:999px; }
.spw-pick .nm { font-weight:800; font-size:1.05rem; }
.spw-pick .amt { font-family:'Anton'; font-size:2.4rem; color:var(--spw-red); line-height:1; margin:4px 0; }
.spw-pick .amt s { font-family:'Archivo'; font-size:.9rem; color:#94a3b8; font-weight:800; margin-right:6px; }
.spw-pick .dsc { font-size:.82rem; color:#64748b; font-weight:600; }
.spw-pick .go { margin-top:12px; display:inline-block; background:var(--spw-yellow); color:var(--spw-ink); font-family:'Anton'; font-size:1.05rem; text-transform:uppercase; padding:9px 20px; border-radius:11px; box-shadow:0 4px 0 #b58f00; }
.spw-reassure { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:clamp(14px,2.5vh,20px); color:#64748b; font-weight:700; font-size:.84rem; }
.spw-reassure span::before { content:"⚡"; margin-right:5px; }
.spw-order .spw-datasafe { color:#334155; background:#fff; border:1px solid #f0c9cc; margin-top:clamp(12px,2.4vh,18px); }

/* keep-using / back link */
.spw-keepusing { display:block; text-align:center; margin-top:14px; color:#94a3b8; font-weight:700; font-size:.84rem; text-decoration:none; }
.spw-keepusing:hover { color:#64748b; }

/* ===== checkout MODAL ===== */
.spw-pay-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; }
.spw-pay-modal[hidden] { display:none; }
.spw-pay-modal-backdrop { position:absolute; inset:0; background:rgba(8,8,15,.74); }
.spw-pay-modal-card { position:relative; z-index:1; background:#fff; border-radius:20px; width:100%; max-width:430px; padding:24px 20px 20px;
    box-shadow:0 30px 80px rgba(0,0,0,.55); border-top:6px solid var(--spw-red);
    max-height:calc(100dvh - 32px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.spw-pm-close { position:absolute; top:8px; right:12px; background:none; border:0; font-size:1.7rem; line-height:1; color:#94a3b8; cursor:pointer; }
.spw-pm-head { text-align:center; margin-bottom:14px; }
.spw-pm-eyebrow { color:var(--spw-red); font-weight:900; text-transform:uppercase; letter-spacing:1.5px; font-size:.7rem; }
.spw-pm-title { font-size:1.5rem; margin:3px 0 0; }
.spw-pm-price { font-family:'Anton'; font-size:2.5rem; color:var(--spw-red); line-height:1; margin-top:2px; }
.spw-pm-sub { color:#64748b; font-weight:600; font-size:.85rem; margin-top:4px; }

.spw-field { text-align:left; margin:8px 0; }
.spw-field label { display:block; font-weight:700; font-size:.8rem; color:#334155; margin-bottom:4px; }
.spw-input { width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:11px 12px; font-size:16px; font-family:inherit; }
.spw-input:focus { outline:none; border-color:var(--spw-red); box-shadow:0 0 0 3px rgba(225,29,42,.12); }
.spw-field-err { color:var(--spw-red); font-size:.78rem; font-weight:600; margin-top:3px; }
.spw-signin-note { text-align:center; font-size:.8rem; color:#64748b; margin:2px 0 4px; }
.spw-signin-note a { color:var(--spw-red); font-weight:700; }

/* Free-account escape hatch — captures buyers who open the modal but balk at the
   price into the free funnel (which converts) instead of losing them. */
.spw-free-alt { display:block; text-align:center; margin:12px 0 2px; padding:11px 12px;
    border:1px solid #d1d5db; border-radius:10px; background:#f8fafc; color:#334155;
    font-weight:700; font-size:.9rem; text-decoration:none; }
.spw-free-alt:hover { background:#f1f5f9; border-color:#94a3b8; }
.spw-free-alt b { color:#0f172a; }

#spw-payment-element { margin:6px 0; min-height:44px; }
.spw-pe-loading { color:#94a3b8; font-weight:600; text-align:center; padding:16px 0; font-size:.9rem; }
.spw-pay-btn { width:100%; background:var(--spw-yellow); color:var(--spw-ink); font-family:'Anton'; font-size:1.35rem; text-transform:uppercase; border:0; border-radius:14px;
    padding:15px; margin-top:12px; cursor:pointer; box-shadow:0 6px 0 #b58f00; }
.spw-pay-btn:disabled { opacity:.55; cursor:default; box-shadow:none; }
.spw-pay-msg { color:var(--spw-red); font-weight:700; text-align:center; margin-top:8px; min-height:1em; font-size:.9rem; }
.spw-pay-msg[hidden] { display:none; }
.spw-pm-datasafe { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:12px; color:#166534; font-weight:700; font-size:.8rem; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; padding:8px 10px; }
.spw-pm-datasafe::before { content:"🔒"; }
.spw-pm-reassure { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px; color:#64748b; font-weight:700; font-size:.78rem; }
.spw-pm-reassure span::before { content:"⚡"; margin-right:4px; }

.spw-footnote { background:var(--spw-ink); color:#94a3b8; text-align:center; font-size:.76rem; padding:20px 16px; scroll-snap-align:start; }
.spw-footnote strong { color:#e2e8f0; }
.spw-footnote a { color:#93c5fd; }

@media (max-height:520px) { .spw-screen { justify-content:flex-start; } }

/* ===================== basketball theme ===================== */
/* Orange accent (hero gradient, prices, CTAs) instead of baseball red. */
.spw-theme-basketball { --spw-red:#ea580c; --spw-red2:#9a3412; --spw-yellow:#fbbf24; }
.spw-theme-basketball .spw-order-bg { background-image:url('/images/wall/basketball-court-bg.jpg'); }

/* basketball scoreboard phone mock */
.bk-card { background:var(--pc-bg); border-radius:22px; padding:14px 13px 13px; color:#fff; text-align:left; border:1px solid #262626; }
.bk-top { display:flex; align-items:center; justify-content:space-between; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:#9ca3af; font-weight:800; margin-bottom:10px; }
.bk-top .clock { color:var(--pc-amber); font-family:'Anton'; font-size:1.05rem; letter-spacing:.02em; }
.bk-score-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bk-team { flex:1; text-align:center; }
.bk-team .nm { font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; color:#9ca3af; font-weight:800; margin-bottom:2px; }
.bk-team .sc { font-family:'Anton'; font-size:clamp(2.2rem,9vw,2.9rem); line-height:.86;
    background:linear-gradient(180deg,#fff,#f59e0b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bk-team.win .sc { background:linear-gradient(180deg,#fff,#fbbf24); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bk-vs { font-size:.75rem; color:#6b7280; font-weight:800; }
.bk-fouls { display:flex; justify-content:space-between; margin:9px 2px 0; font-size:.54rem; text-transform:uppercase; letter-spacing:.07em; color:#8b8b8b; font-weight:800; }
.bk-fouls .bonus { color:var(--pc-amber); }
.bk-stats { margin-top:10px; padding-top:9px; border-top:1px solid #222; }
.bk-stats-title { font-size:.52rem; text-transform:uppercase; letter-spacing:.1em; color:#9ca3af; font-weight:800; margin-bottom:5px; }
.bk-stat-row { display:flex; justify-content:space-between; font-size:.68rem; color:#d1d5db; padding:2px 0; }
.bk-stat-row b { color:#fff; }
.bk-stat-row .pts { color:var(--pc-amber); font-weight:800; }

/* basketball season-stats "killer feature" card (fills the feature zone-svg slot) */
.bk-season { width:clamp(190px,34vmin,240px); background:#0f172a; border:1px solid rgba(148,163,184,.18); border-radius:16px; padding:14px 15px; color:#e2e8f0; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.bk-season-head { display:flex; align-items:baseline; justify-content:space-between; }
.bk-season-team { font-family:'Anton'; font-size:1.2rem; color:#fff; }
.bk-season-rec { font-family:'Anton'; font-size:1.35rem; color:var(--pc-amber); }
.bk-season-sub { font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; font-weight:700; margin:2px 0 9px; }
.bk-season-row { display:grid; grid-template-columns:1fr 42px 34px 34px; gap:4px; font-size:.72rem; padding:3px 0; align-items:center; }
.bk-season-row b { color:#fff; }
.bk-season-row .v { color:var(--pc-amber); font-weight:800; text-align:right; }
.bk-season-row span:not(.v) { text-align:right; color:#cbd5e1; }
.bk-season-row span:first-child { text-align:left; }
.bk-season-row .pos { color:#4ade80; font-weight:700; }
.bk-season-row .neg { color:#f87171; font-weight:700; }
.bk-season-labels { font-size:.56rem; text-transform:uppercase; letter-spacing:.06em; color:#64748b; font-weight:800; border-bottom:1px solid rgba(148,163,184,.16); padding-bottom:5px; margin-bottom:3px; }
.bk-season-labels span { color:#64748b !important; }

/* no order-section photo exists for the soccer/football/hockey themes yet — hide the
   (baseball) image layer instead of showing the wrong sport */
.spw-theme-soccer .spw-order-bg,
.spw-theme-football .spw-order-bg,
.spw-theme-hockey .spw-order-bg { background-image:none; }

/* ===================== soccer theme ===================== */
/* Pitch-green accent (hero gradient, prices, CTAs) instead of baseball red. */
.spw-theme-soccer { --spw-red:#16a34a; --spw-red2:#14532d; --spw-yellow:#facc15; }
/* the base hero gradient's top highlight is hard-coded red — repaint it grass-green */
.spw-theme-soccer .spw-hero { background:radial-gradient(120% 120% at 50% -10%, #4ade80 0%, var(--spw-red) 45%, var(--spw-red2) 100%); }
/* feature-legend dots: halves & stoppage / cards & goals / share live */
.spw-theme-soccer .spw-zone-legend .d.ball { background:#4ade80; }
.spw-theme-soccer .spw-zone-legend .d.strike { background:#facc15; }
.spw-theme-soccer .spw-zone-legend .d.foul { background:#f87171; }

/* soccer scoreboard phone mock */
.sc-card { background:var(--pc-bg); border-radius:22px; padding:14px 13px 13px; color:#fff; text-align:left; border:1px solid #262626; }
.sc-top { display:flex; align-items:center; justify-content:space-between; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:#9ca3af; font-weight:800; margin-bottom:10px; }
.sc-top .clock { display:inline-flex; align-items:center; gap:5px; color:#4ade80; font-family:'Anton'; font-size:1.05rem; letter-spacing:.02em; }
.sc-top .stoppage { font-family:'Archivo',sans-serif; font-size:.58rem; font-weight:900; letter-spacing:.02em; color:#052e16; background:#facc15; padding:1px 6px; border-radius:6px; }
.sc-score-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sc-team { flex:1; text-align:center; }
.sc-team .nm { font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; color:#9ca3af; font-weight:800; margin-bottom:2px; }
.sc-team .sc { font-family:'Anton'; font-size:clamp(2.2rem,9vw,2.9rem); line-height:.86;
    background:linear-gradient(180deg,#fff,#16a34a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sc-team.win .sc { background:linear-gradient(180deg,#fff,#4ade80); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sc-vs { font-size:.75rem; color:#6b7280; font-weight:800; }
.sc-strip { display:flex; align-items:center; justify-content:space-between; margin:9px 2px 0; font-size:.54rem; text-transform:uppercase; letter-spacing:.07em; color:#8b8b8b; font-weight:800; }
.sc-strip .cards, .sc-strip .live { display:inline-flex; align-items:center; gap:4px; }
.sc-strip .yc { width:7px; height:10px; border-radius:2px; background:#facc15; }
.sc-strip .live { color:#4ade80; }
.sc-strip .live .dot { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 6px rgba(74,222,128,.8); }
.sc-goals { margin-top:10px; padding-top:9px; border-top:1px solid #222; }
.sc-goals-title { font-size:.52rem; text-transform:uppercase; letter-spacing:.1em; color:#9ca3af; font-weight:800; margin-bottom:5px; }
.sc-goal-row { display:flex; justify-content:space-between; font-size:.68rem; color:#d1d5db; padding:2px 0; }
.sc-goal-row b { color:#fff; }
.sc-goal-row .min { color:#4ade80; font-weight:800; }

/* soccer wall-clock "killer feature" card (fills the feature zone-svg slot) */
.sc-clock { width:clamp(180px,32vmin,230px); background:#0f172a; border:1px solid rgba(148,163,184,.18); border-radius:16px; padding:15px 16px 14px; color:#e2e8f0; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.sc-clock-head { display:flex; align-items:center; justify-content:space-between; font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:#94a3b8; font-weight:800; }
.sc-clock-head .live { display:inline-flex; align-items:center; gap:4px; color:#4ade80; }
.sc-clock-head .live .dot { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 6px rgba(74,222,128,.8); }
.sc-clock-time { font-family:'Anton'; font-size:clamp(2.6rem,8vmin,3.4rem); line-height:.9; margin:10px 0 6px;
    background:linear-gradient(180deg,#fff,#4ade80); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sc-clock-stoppage { display:inline-block; background:#facc15; color:#052e16; font-weight:900; font-size:.72rem; padding:2px 10px; border-radius:999px; }
.sc-clock-note { margin-top:10px; padding-top:9px; border-top:1px solid rgba(148,163,184,.16); font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; font-weight:700; }

/* ===================== football theme ===================== */
/* Pigskin-brown accent (hero gradient, prices, CTAs) instead of baseball red. */
.spw-theme-football { --spw-red:#7c2d12; --spw-red2:#431407; --spw-yellow:#fbbf24; }
/* the base hero gradient's top highlight is hard-coded red — warm it to leather */
.spw-theme-football .spw-hero { background:radial-gradient(120% 120% at 50% -10%, #c2410c 0%, var(--spw-red) 45%, var(--spw-red2) 100%); }
/* feature-legend dots: downs & drives / clock & quarters / share live */
.spw-theme-football .spw-zone-legend .d.ball { background:#fbbf24; }
.spw-theme-football .spw-zone-legend .d.strike { background:#fb923c; }
.spw-theme-football .spw-zone-legend .d.foul { background:#f87171; }

/* football scoreboard phone mock */
.fb-card { background:var(--pc-bg); border-radius:22px; padding:14px 13px 13px; color:#fff; text-align:left; border:1px solid #262626; }
.fb-top { display:flex; align-items:center; justify-content:space-between; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:#9ca3af; font-weight:800; margin-bottom:10px; }
.fb-top .clock { color:var(--pc-amber); font-family:'Anton'; font-size:1.05rem; letter-spacing:.02em; }
.fb-score-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fb-team { flex:1; text-align:center; }
.fb-team .nm { font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; color:#9ca3af; font-weight:800; margin-bottom:2px; }
.fb-team .sc { font-family:'Anton'; font-size:clamp(2.2rem,9vw,2.9rem); line-height:.86;
    background:linear-gradient(180deg,#fff,#f59e0b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fb-team.win .sc { background:linear-gradient(180deg,#fff,#fbbf24); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fb-vs { font-size:.75rem; color:#6b7280; font-weight:800; }
.fb-down-strip { margin:9px 2px 0; background:#1e1e1e; border:1px solid #333; border-radius:9px; padding:6px 8px; text-align:center; font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color:#d1d5db; font-weight:800; }
.fb-down-strip b { font-family:'Anton'; font-weight:400; font-size:.85rem; letter-spacing:.04em; color:var(--pc-amber); margin-right:2px; }
.fb-timeouts { display:flex; align-items:center; justify-content:space-between; margin:9px 2px 0; font-size:.54rem; text-transform:uppercase; letter-spacing:.07em; color:#8b8b8b; font-weight:800; }
.fb-timeouts .dots { display:inline-flex; gap:3px; vertical-align:1px; }
.fb-timeouts .dots i { width:8px; height:8px; border-radius:50%; background:#2a2a2a; border:1px solid #3a3a3a; display:inline-block; }
.fb-timeouts .dots i.on { background:var(--pc-amber); border-color:var(--pc-amber); box-shadow:0 0 5px rgba(245,158,11,.6); }

/* football down-tracker "killer feature" card (fills the feature zone-svg slot) */
.fb-downs { width:clamp(180px,32vmin,230px); background:#0f172a; border:1px solid rgba(148,163,184,.18); border-radius:16px; padding:15px 16px 14px; color:#e2e8f0; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.fb-downs-head { display:flex; align-items:center; justify-content:space-between; font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:#94a3b8; font-weight:800; }
.fb-downs-big { font-family:'Anton'; font-size:clamp(2.3rem,7.5vmin,3rem); line-height:.95; margin:10px 0 8px;
    background:linear-gradient(180deg,#fff,#fbbf24); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fb-downs-dots { display:flex; justify-content:center; gap:5px; }
.fb-downs-dots i { width:9px; height:9px; border-radius:50%; background:#1e293b; border:1px solid #334155; display:inline-block; }
.fb-downs-dots i.done { background:#475569; border-color:#475569; }
.fb-downs-dots i.on { background:#fbbf24; border-color:#fbbf24; box-shadow:0 0 6px rgba(251,191,36,.7); }
.fb-downs-drive { margin-top:10px; padding-top:9px; border-top:1px solid rgba(148,163,184,.16); font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; font-weight:700; }

/* ===================== hockey theme ===================== */
/* Ice-blue accent. --spw-yellow doubles as the CTA background under dark ink text, so
   it stays a saturated sky (#7dd3fc), not near-white ice, to keep the CTA readable. */
.spw-theme-hockey { --spw-red:#0284c7; --spw-red2:#075985; --spw-yellow:#7dd3fc; }
/* the base hero gradient's top highlight is hard-coded red — cool it to ice */
.spw-theme-hockey .spw-hero { background:radial-gradient(120% 120% at 50% -10%, #38bdf8 0%, var(--spw-red) 45%, var(--spw-red2) 100%); }
/* the hard CTA drop-shadows are dark gold (#b58f00) in the base — repaint deep blue */
.spw-theme-hockey .spw-cta { box-shadow:0 6px 0 #0369a1, 0 14px 26px rgba(0,0,0,.28); }
.spw-theme-hockey .spw-pick .go { box-shadow:0 4px 0 #0369a1; }
.spw-theme-hockey .spw-pay-btn { box-shadow:0 6px 0 #0369a1; }
.spw-theme-hockey .spw-pay-btn:disabled { box-shadow:none; }
/* feature-legend dots: periods & clock / penalties & PP / share live */
.spw-theme-hockey .spw-zone-legend .d.ball { background:#38bdf8; }
.spw-theme-hockey .spw-zone-legend .d.strike { background:#fbbf24; }
.spw-theme-hockey .spw-zone-legend .d.foul { background:#f87171; }

/* hockey scoreboard phone mock */
.hk-card { background:var(--pc-bg); border-radius:22px; padding:14px 13px 13px; color:#fff; text-align:left; border:1px solid #262626; }
.hk-top { display:flex; align-items:center; justify-content:space-between; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:#9ca3af; font-weight:800; margin-bottom:10px; }
.hk-top .clock { color:#7dd3fc; font-family:'Anton'; font-size:1.05rem; letter-spacing:.02em; }
.hk-score-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hk-team { flex:1; text-align:center; }
.hk-team .nm { font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; color:#9ca3af; font-weight:800; margin-bottom:2px; }
.hk-team .sc { font-family:'Anton'; font-size:clamp(2.2rem,9vw,2.9rem); line-height:.86;
    background:linear-gradient(180deg,#fff,#38bdf8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hk-team.win .sc { background:linear-gradient(180deg,#fff,#7dd3fc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hk-vs { font-size:.75rem; color:#6b7280; font-weight:800; }
.hk-penalty { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:9px 2px 0; background:#1e1e1e; border:1px solid #333; border-radius:9px; padding:6px 8px; font-size:.56rem; text-transform:uppercase; letter-spacing:.05em; color:#d1d5db; font-weight:800; }
.hk-penalty b { color:#fff; }
.hk-penalty .left { font-family:'Anton'; font-weight:400; font-size:.8rem; letter-spacing:.03em; color:#f87171; }
.hk-penalty .pp { background:#fbbf24; color:#451a03; font-weight:900; font-size:.5rem; letter-spacing:.06em; padding:2px 6px; border-radius:6px; white-space:nowrap; }
.hk-shots { display:flex; justify-content:space-between; margin:9px 2px 0; font-size:.54rem; text-transform:uppercase; letter-spacing:.07em; color:#8b8b8b; font-weight:800; }

/* hockey penalty-box "killer feature" card (fills the feature zone-svg slot) */
.hk-pen { width:clamp(180px,32vmin,230px); background:#0f172a; border:1px solid rgba(148,163,184,.18); border-radius:16px; padding:15px 16px 14px; color:#e2e8f0; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.hk-pen-head { display:flex; align-items:center; justify-content:space-between; font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:#94a3b8; font-weight:800; }
.hk-pen-head .pp { background:#fbbf24; color:#451a03; font-weight:900; font-size:.54rem; letter-spacing:.06em; padding:2px 7px; border-radius:6px; }
.hk-pen-player { margin-top:10px; font-size:.78rem; font-weight:700; color:#cbd5e1; }
.hk-pen-player b { color:#fff; }
.hk-pen-clock { font-family:'Anton'; font-size:clamp(2.6rem,8vmin,3.4rem); line-height:.9; margin:4px 0 0;
    background:linear-gradient(180deg,#fff,#f87171); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hk-pen-note { margin-top:10px; padding-top:9px; border-top:1px solid rgba(148,163,184,.16); font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; font-weight:700; }