/* =============================================================================
   ON DECK — "STADIUM PRIME" theme
   -----------------------------------------------------------------------------
   A modern, glossy, Balatro-flavoured skin: an ultra-lit ballpark, holographic
   cards with 3D tilt, springy juice. Everything is scoped under
   `body.theme-prime` so the retro 8-bit base styling is left completely intact.
   Fonts: Fredoka (rounded UI) + Luckiest Guy (juicy display). Pointer-driven
   foil uses the --mx/--my custom props set by juice.js.
   ============================================================================= */

body.theme-prime{
  --p-gold:#ffcf3a;
  --p-gold-2:#ffab2e;
  --p-green:#2fae5a;
  --p-green-d:#16652f;
  --p-ink:#0a1a12;
  --p-glass:rgba(12,30,22,.55);
  --p-glass-2:rgba(20,44,32,.42);
  --p-stroke:rgba(255,255,255,.14);
  --p-text:#eafff1;
  font-family:'Fredoka',system-ui,sans-serif;
  color:var(--p-text);
  background:
    radial-gradient(120% 90% at 50% -10%, #22406e 0%, #16294a 40%, #0a1524 78%, #060c16 100%);
  image-rendering:auto;
}
/* soften the retro scanline overlay into a gentle premium grain */
body.theme-prime::after{opacity:.14;mix-blend-mode:soft-light;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px)}

body.theme-prime .lbl,
body.theme-prime .hint,
body.theme-prime .credit,
body.theme-prime .matchup-note,
body.theme-prime .booth p{font-family:'Fredoka',system-ui,sans-serif}

/* ---------- panels: soft glass (Manus / BKlit influence) ------------------ */
body.theme-prime .panel{
  background:linear-gradient(180deg,var(--p-glass),var(--p-glass-2));
  border:1px solid var(--p-stroke);border-radius:18px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(14px) saturate(1.2);
}
body.theme-prime .panel h3{
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:14px;letter-spacing:.5px;
  color:var(--p-gold);text-shadow:none;
}
body.theme-prime .matchup-note{font-size:19px;color:#cfeede;line-height:1.35}
body.theme-prime .matchup-note b{color:var(--p-gold)}
body.theme-prime .hint{font-size:16px;color:#a9d9bd}

/* ---------- scoreboard: glass jumbotron ----------------------------------- */
body.theme-prime .board{
  border:1px solid var(--p-stroke);border-radius:20px;
  background:linear-gradient(180deg,rgba(10,26,20,.72),rgba(6,16,12,.72));
  box-shadow:0 24px 60px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.10),
             0 0 0 1px rgba(255,207,58,.10);
  backdrop-filter:blur(16px);
}
body.theme-prime .board::before{
  font-family:'Luckiest Guy',cursive;letter-spacing:2px;color:#111;
  background:linear-gradient(180deg,#ffe08a,var(--p-gold-2));border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(255,171,46,.8);border:none;
}
body.theme-prime .team-score .nm{font-family:'Fredoka';font-weight:600;font-size:12px;color:#cfe9d8}
body.theme-prime .team-score .runs{
  font-family:'Luckiest Guy',cursive;font-size:30px;color:var(--p-gold);
  text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 22px rgba(255,207,58,.5);
}
body.theme-prime .team-score.active{outline:none;
  box-shadow:0 0 0 2px var(--p-gold), 0 0 24px -4px var(--p-gold)}
body.theme-prime .team-score .dot{border-radius:50%;border-color:rgba(255,255,255,.7)}
body.theme-prime .inning-pill{
  font-family:'Luckiest Guy',cursive;letter-spacing:1px;color:#0a1a12;
  background:linear-gradient(180deg,#fff,#dfeee5);border-radius:999px;box-shadow:0 6px 16px -8px #000;
}
body.theme-prime .count-line b{font-family:'Luckiest Guy',cursive;color:var(--p-gold)}
body.theme-prime .led{border:none;background:rgba(255,255,255,.14)}
body.theme-prime .led.ball.on{background:var(--p-green);box-shadow:0 0 12px var(--p-green)}
body.theme-prime .led.strike.on{background:var(--p-gold);box-shadow:0 0 12px var(--p-gold)}
body.theme-prime .led.out.on{background:#ff5a5f;box-shadow:0 0 12px #ff5a5f}

/* =============================================================================
   THE BALLPARK  (stadium decor lives in dedicated divs, hidden in retro)
   ========================================================================== */
.stadium-sky,.stadium-stands,.stadium-wall{display:none}
body.theme-prime .field{
  border:none;border-radius:22px;overflow:hidden;
  background:
    radial-gradient(140% 90% at 50% 118%, #4bd07a 0%, #2c9c50 34%, #1c7a3c 55%, #12622f 74%, #0c4a24 100%);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85), inset 0 2px 0 rgba(255,255,255,.10);
}
/* outfield mow — concentric arcs radiating from home plate */
body.theme-prime .field::before{
  content:"";position:absolute;inset:0;opacity:.16;z-index:1;
  background:repeating-radial-gradient(circle at 50% 92%,
    rgba(255,255,255,.9) 0 16px, transparent 16px 34px);
}
/* sky glow + light bloom above the wall */
body.theme-prime .stadium-sky{
  display:block;position:absolute;left:0;right:0;top:0;height:34%;z-index:0;
  background:
    radial-gradient(60% 120% at 20% 0%, rgba(255,255,220,.5), transparent 55%),
    radial-gradient(60% 120% at 80% 0%, rgba(255,255,220,.5), transparent 55%),
    linear-gradient(180deg, #1a2c4e 0%, #24406e 60%, #2b5680 100%);
}
/* tiered crowd stands with a speckled crowd texture */
body.theme-prime .stadium-stands{
  display:block;position:absolute;left:-2%;right:-2%;top:4%;height:24%;z-index:1;
  transform:perspective(340px) rotateX(26deg);transform-origin:top center;
  border-radius:0 0 40% 40%/0 0 100% 100%;
  background:
    radial-gradient(rgba(255,255,255,.55) 18%, transparent 20%) 0 0/7px 7px,
    radial-gradient(rgba(255,220,180,.4) 18%, transparent 20%) 4px 4px/9px 9px,
    linear-gradient(180deg,#243651,#182740 70%,#101d31);
  box-shadow:inset 0 -14px 22px -8px rgba(0,0,0,.6);
  opacity:.95;
}
/* outfield wall with ad boards + yellow top line */
body.theme-prime .stadium-wall{
  display:block;position:absolute;left:2%;right:2%;top:27%;height:7.5%;z-index:2;
  border-radius:6px;border-top:3px solid var(--p-gold);
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.06) 0 12px, transparent 12px 14px),
    linear-gradient(180deg,#0f3d22,#0a2c18);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.15);
}
/* glossy infield */
body.theme-prime .diamond{
  border:none;border-radius:10px;
  background:linear-gradient(180deg,#e0a86a,#b06f38);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22), 0 8px 20px -10px rgba(0,0,0,.6);
}
body.theme-prime .infield-grass{
  border:none;background:linear-gradient(180deg,#3fbf6a,#248a44);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25);
}
body.theme-prime .mound{
  background:radial-gradient(circle at 40% 35%,#e6b072,#a9662f);
  border:none;box-shadow:0 6px 14px -6px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.3);
}
body.theme-prime .base{
  border:none;border-radius:5px;background:linear-gradient(180deg,#fff,#dfe7e0);
  box-shadow:0 6px 12px -4px rgba(0,0,0,.5), inset 0 1px 0 #fff;
}
body.theme-prime .base.lit{
  background:linear-gradient(180deg,#fff2b0,var(--p-gold));
  box-shadow:0 0 20px 2px var(--p-gold), 0 6px 12px -4px rgba(0,0,0,.5);
}
body.theme-prime .base-label{font-family:'Fredoka';font-weight:600;opacity:.7}
body.theme-prime .ball-sprite{box-shadow:0 0 12px rgba(255,255,255,.9)}

/* runner chips — glossy pucks */
body.theme-prime .runner{
  border:none;border-radius:10px;font-family:'Luckiest Guy',cursive;font-size:13px;
  background:linear-gradient(180deg,#ffffff,#e7efe9);
  box-shadow:0 8px 16px -6px rgba(0,0,0,.6), inset 0 2px 0 #fff, 0 0 0 2px rgba(255,207,58,.5);
}
body.theme-prime .runner.red{color:#e5354b} body.theme-prime .runner.blk{color:#26303f}

/* =============================================================================
   CARDS — glossy, bubbly, holographic
   ========================================================================== */
body.theme-prime .card{
  --mx:50%; --my:40%;
  border:none;border-radius:12px;overflow:hidden;
  font-family:'Luckiest Guy',cursive;color:#12202a;
  background:linear-gradient(160deg,#ffffff 0%,#f3f6f4 55%,#e4ebe6 100%);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.65), inset 0 2px 0 rgba(255,255,255,.9),
             inset 0 -6px 12px -6px rgba(0,0,0,.15);
  transform-style:preserve-3d;
}
body.theme-prime .card > *{position:relative;z-index:2}
body.theme-prime .card .big{font-size:23px;text-shadow:0 2px 0 rgba(0,0,0,.10)}
body.theme-prime .card.small .big{font-size:16px}
/* wet-look top gloss */
body.theme-prime .card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:52%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));
  border-radius:12px 12px 40% 40%/12px 12px 22% 22%;
}
/* holographic foil, driven by pointer (--mx/--my) */
body.theme-prime .card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .25s ease;mix-blend-mode:color-dodge;
  background:
    radial-gradient(60% 55% at var(--mx) var(--my), rgba(255,255,255,.7), transparent 55%),
    conic-gradient(from 0deg at var(--mx) var(--my),
      rgba(255,90,120,.5), rgba(255,209,90,.5), rgba(90,255,170,.5),
      rgba(90,200,255,.5), rgba(200,120,255,.5), rgba(255,90,120,.5));
  background-size:cover, 220% 220%;
}
body.theme-prime .card:hover::after,
body.theme-prime .card.foil::after{opacity:.55}
body.theme-prime .card.red-suit{color:#e5354b} body.theme-prime .card.blk-suit{color:#26303f}

/* face-down: a premium patterned back */
body.theme-prime .card.face-down{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,207,58,.25), transparent 60%),
    repeating-linear-gradient(45deg,#0f7a3e 0 8px,#0c6633 8px 16px);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.7), inset 0 0 0 3px rgba(255,207,58,.8),
             inset 0 2px 0 rgba(255,255,255,.3);
}
body.theme-prime .card.face-down::after{color:#ffe07a;font-family:'Luckiest Guy';
  mix-blend-mode:normal;opacity:1;font-size:20px}
/* mound cards get a slow auto-shimmer */
body.theme-prime #slot-pitch .card::after,
body.theme-prime #slot-swing .card::after{opacity:.4;animation:primeShimmer 3.2s linear infinite}
@keyframes primeShimmer{0%{background-position:0 0,0% 50%}100%{background-position:0 0,220% 50%}}

/* ---------- hand cards ---------------------------------------------------- */
body.theme-prime .hand .card.play{border-radius:14px;transition:box-shadow .2s}
body.theme-prime .hand .card.play:hover{transform:none;              /* tilt handled by JS */
  box-shadow:0 22px 40px -16px rgba(0,0,0,.7), 0 0 0 2px var(--p-gold),
             inset 0 2px 0 rgba(255,255,255,.9)}
body.theme-prime .hand .card.disabled{filter:grayscale(.5) brightness(.8);opacity:.5}

/* =============================================================================
   BUTTONS — glossy pills with spring press
   ========================================================================== */
body.theme-prime .btn{
  font-family:'Luckiest Guy',cursive;font-size:15px;letter-spacing:.6px;color:#3a2400;
  border:none;border-radius:999px;padding:14px 24px;
  background:linear-gradient(180deg,#ffe487,var(--p-gold) 55%,var(--p-gold-2));
  box-shadow:0 12px 22px -10px rgba(255,171,46,.9), inset 0 2px 0 rgba(255,255,255,.7),
             inset 0 -4px 8px -4px rgba(160,90,0,.5);
  transition:transform .12s cubic-bezier(.2,1.4,.4,1), box-shadow .12s;
}
body.theme-prime .btn:hover{transform:translateY(-2px) scale(1.03);
  box-shadow:0 18px 30px -12px rgba(255,171,46,.95), inset 0 2px 0 rgba(255,255,255,.8)}
body.theme-prime .btn:active{transform:translateY(1px) scale(.98);box-shadow:0 6px 14px -8px rgba(0,0,0,.6)}
body.theme-prime .btn.green{color:#04220f;
  background:linear-gradient(180deg,#7ff0a3,var(--p-green) 55%,#178a41);
  box-shadow:0 12px 22px -10px rgba(47,174,90,.9), inset 0 2px 0 rgba(255,255,255,.6)}
body.theme-prime .btn.ghost{color:#eafff1;background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}

/* ---------- booth + dugout mini chips ------------------------------------- */
body.theme-prime .booth p{color:#d3efe0;font-size:18px;border-left-color:transparent}
body.theme-prime .booth p.big{font-family:'Luckiest Guy',cursive;color:var(--p-gold);
  font-size:19px;-webkit-text-stroke:0;text-shadow:0 2px 10px rgba(255,207,58,.4)}
body.theme-prime .booth p.you{border-left-color:var(--p-green)}
body.theme-prime .mini{border:none;border-radius:5px;font-family:'Fredoka';font-weight:700;
  background:linear-gradient(180deg,#fff,#e6ede8);box-shadow:0 3px 6px -3px rgba(0,0,0,.5)}
body.theme-prime .mini.down{background:repeating-linear-gradient(45deg,#0f7a3e 0 5px,#0c6633 5px 10px)}
body.theme-prime .mini.pitcher{outline:none;box-shadow:0 0 0 2px var(--p-gold),0 3px 6px -3px #000}

/* =============================================================================
   BIG-MOMENT FLASH — juicy
   ========================================================================== */
body.theme-prime .flash .msg{
  font-family:'Luckiest Guy',cursive;color:var(--p-gold);
  text-shadow:0 6px 0 rgba(0,0,0,.35), 0 0 40px rgba(255,207,58,.8);
}
body.theme-prime .flash .msg small{font-family:'Fredoka';font-weight:600;color:#fff}

/* =============================================================================
   TITLE / START — premium glass; also serves as the live theme preview
   ========================================================================== */
body.theme-prime .overlay{
  background:#060c16;
  background-image:
    radial-gradient(70% 60% at 50% -8%, rgba(255,255,220,.18), transparent 55%),
    radial-gradient(120% 90% at 50% -10%, #22406e 0%, #16294a 42%, #0a1524 80%, #060c16 100%);
}
body.theme-prime .title{
  font-family:'Luckiest Guy',cursive;color:var(--p-gold);letter-spacing:2px;
  text-shadow:0 8px 0 rgba(0,0,0,.3), 0 0 50px rgba(255,207,58,.6);
}
body.theme-prime .subtitle{font-family:'Fredoka';font-weight:600;color:#dfeaff;letter-spacing:1px}
body.theme-prime .overlay .rules{font-family:'Fredoka';font-weight:500;color:#d7e6f2;font-size:20px}
body.theme-prime .overlay .rules b{color:var(--p-gold)}
body.theme-prime .credit{font-family:'Fredoka';color:#8fb4cf}
body.theme-prime .credit b{color:#cfe3f2}

/* the style picker (shared markup, themed both ways) */
.style-pick{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:4px 0}
.style-opt{
  cursor:pointer;width:210px;max-width:44vw;text-align:left;border-radius:16px;padding:14px 16px;
  background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.16);color:#eafff1;
  transition:transform .12s, border-color .12s, box-shadow .12s;
}
.style-opt:hover{transform:translateY(-3px)}
.style-opt .so-name{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--gold);
  display:block;margin-bottom:8px;letter-spacing:1px}
.style-opt .so-desc{font-size:15px;line-height:1.3;color:#bfe8cd}
.style-opt .so-swatch{height:34px;border-radius:8px;margin-top:10px;border:1px solid rgba(255,255,255,.2)}
.style-opt[data-theme="retro"] .so-swatch{
  background:repeating-linear-gradient(45deg,#127a3e 0 8px,#0a3d24 8px 16px);image-rendering:pixelated}
.style-opt[data-theme="prime"] .so-swatch{
  background:linear-gradient(120deg,#ff5a78,#ffd15a,#5affaa,#5ac8ff,#c878ff);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6)}
.style-opt.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 12px 28px -12px rgba(0,0,0,.6)}
/* prime restyles the picker chrome to match its look */
body.theme-prime .style-opt{border-radius:18px;background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.2)}
body.theme-prime .style-opt .so-name{font-family:'Luckiest Guy',cursive;font-size:15px;color:var(--p-gold)}
body.theme-prime .style-opt .so-desc{font-family:'Fredoka';color:#cfe3f2}
body.theme-prime .style-opt.active{border-color:var(--p-gold);
  box-shadow:0 0 0 2px var(--p-gold),0 16px 32px -14px rgba(0,0,0,.7)}