/* ═══════════════════════════════════════
   BASEBALL: HIT OFF TEE — css/baseball.css v3
   ═══════════════════════════════════════ */

#baseballScreen{
  display:none;position:fixed;inset:0;z-index:10;overflow:hidden;
  /* Square 1024×1024 image — cover fills screen, center/bottom shows field area */
  background:#2a5a9e url('../Images/GameAssets/Baseball/bg_stadium_v2.webp') center bottom/cover no-repeat;
}

/* ── Score — hidden in favour of the persistent jumbotron ── */
#bsbScore{ display:none; }

/* ── Power meter (left side, vertical) ── */
#bsbPowerWrap{
  position:absolute;left:16px;bottom:22%;z-index:20;
  width:28px;height:clamp(100px,25vw,160px);
  background:rgba(0,0,0,0.5);border-radius:14px;overflow:visible;
  border:2px solid rgba(255,255,255,0.3);
}
#bsbPowerFill{
  position:absolute;bottom:0;left:0;right:0;
  height:0%;border-radius:12px;
  background:hsl(120,90%,50%);
  transition:height 0.02s linear;
  overflow:hidden;
}
#bsbPowerLabel{
  position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
  font-size:0.55rem;font-weight:900;color:rgba(255,255,255,0.8);
  letter-spacing:1px;white-space:nowrap;
}

/* ── Ball + tee station (centered, above bottom) ── */
#bsbStation{
  position:absolute;bottom:14%;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  z-index:8;cursor:pointer;-webkit-tap-highlight-color:transparent;
  will-change:transform,opacity;
}
#bsbBall{
  width:clamp(80px,20vw,120px);height:clamp(80px,20vw,120px);
  background:url('../Images/GameAssets/Baseball/baseball.webp') center/contain no-repeat;
  will-change:transform;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.4));
  animation:bsbBallIdle 2.8s ease-in-out infinite;
  transition:none;
  flex-shrink:0;
}

/* ── Bat — JS positions it dynamically at the ball on each swing ── */
#bsbBat{
  position:absolute;
  /* default offscreen until first swing positions it via JS */
  left:50%;bottom:15%;
  width:clamp(80px,20vw,130px);height:clamp(220px,55vw,340px);
  background:url('../Images/GameAssets/Baseball/bat_right.webp') center/contain no-repeat;
  transform-origin:bottom center;
  transform:rotate(50deg);
  z-index:12;pointer-events:none;
  visibility:hidden; /* hidden at rest — only visible during swing */
}
#bsbBat.bsb-swinging{
  animation:bsbBatSwing 0.25s ease-out forwards;
}

/* ── Outcome text overlay ── */
#bsbOutcomeText{
  position:absolute;top:35%;left:50%;
  transform:translate(-50%,-50%);
  z-index:25;
  font-size:clamp(2rem,10vw,4rem);font-weight:900;
  color:white;
  text-shadow:0 0 30px rgba(255,220,0,1),0 4px 12px rgba(0,0,0,0.6);
  display:none;pointer-events:none;
  white-space:nowrap;
}

/* ── Persistent Jumbotron / Scoreboard ── */
#bsbJumbotron{
  position:absolute;top:52px;left:50%;
  transform:translateX(-50%) scale(0);
  width:min(90vw,420px);z-index:15;
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border:3px solid rgba(255,215,64,.5);border-radius:14px;
  padding:10px 16px;
  display:flex;align-items:center;justify-content:space-around;gap:0;
  box-shadow:0 0 24px rgba(255,215,64,.25),0 6px 24px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
#bsbJumbotron.bsb-active{transform:translateX(-50%) scale(1);}
.bsb-jmb-stat{
  display:flex;flex-direction:column;align-items:center;gap:1px;flex:1;
}
.bsb-jmb-lbl{
  font-size:clamp(.5rem,2vw,.7rem);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}
.bsb-jmb-num{
  font-size:clamp(1.6rem,6vw,2.4rem);font-weight:900;color:#ffd740;
  text-shadow:0 0 12px rgba(255,215,64,.6),0 2px 0 rgba(0,0,0,.5);
  line-height:1;
}
.bsb-jmb-hr{ color:#ff7043; text-shadow:0 0 12px rgba(255,112,67,.6),0 2px 0 rgba(0,0,0,.5); }
.bsb-jmb-divider{
  width:1px;height:42px;
  background:rgba(255,255,255,.18);flex-shrink:0;
}

/* ── Settings button & panel ── */
#bsbSettingsBtn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  font-size: 1.35rem;
  cursor: pointer;
  transition: background .2s, transform .3s;
  -webkit-tap-highlight-color: transparent;
}
#bsbSettingsBtn:active { background: rgba(0,0,0,0.75); }
#bsbSettingsBtn.open   { transform: rotate(55deg); }

#bsbSettingsPanel {
  position: absolute;
  top: 66px;
  right: 14px;
  z-index: 30;
  background: rgba(18,18,30,0.92);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 12px 16px;
  min-width: 210px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: none;
  flex-direction: column;
  gap: 10px;
}
#bsbSettingsPanel.open { display: flex; }
.bsb-setting-divider {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.bsb-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .9rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
}
.bsb-toggle {
  width: 46px;
  height: 26px;
  border-radius: 13px;
  border: none;
  background: rgba(255,255,255,0.2);
  position: relative;
  cursor: pointer;
  transition: background .25s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.bsb-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s;
}
.bsb-toggle.on {
  background: #4caf50;
}
.bsb-toggle.on::after {
  transform: translateX(20px);
}

/* ── Fireworks layer ── */
#bsbFireworksLayer{position:absolute;inset:0;pointer-events:none;z-index:20;overflow:hidden;}
.bsb-spark{
  position:absolute;width:10px;height:10px;border-radius:50%;
  pointer-events:none;
  animation:bsbSparkFly var(--dur,.6s) ease-out forwards;
}

/* ── Hit hint ── */
#bsbHint{
  position:absolute;bottom:6%;left:0;right:0;
  text-align:center;font-size:clamp(1rem,3.5vw,1.3rem);
  font-weight:800;color:rgba(255,255,255,.85);
  text-shadow:0 2px 8px rgba(0,0,0,.5);
  pointer-events:none;transition:opacity .4s;z-index:15;
}

/* ── Keyframes ── */
@keyframes bsbBallIdle{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-6px);}
}
@keyframes bsbJmbPop{
  0%  {transform:translateX(-50%) scale(0.85);}
  60% {transform:translateX(-50%) scale(1.05);}
  100%{transform:translateX(-50%) scale(1);}
}
@keyframes bsbSparkFly{
  0%  {transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0;}
}
@keyframes bsbBatSwing{
  /* Barrel starts below-right (loaded stance), sweeps through ball at 0°, follows through left */
  0%  {transform:rotate(55deg); visibility:visible;}  /* loaded: barrel right & low  */
  26% {transform:rotate(0deg);  visibility:visible;}  /* CONTACT: barrel at ball      */
  62% {transform:rotate(-52deg);visibility:visible;}  /* follow-through left          */
  100%{transform:rotate(-52deg);visibility:hidden;}
}
@keyframes bsbOutcomePop{
  0%  {transform:translate(-50%,-50%) scale(0.2);opacity:0;}
  50% {transform:translate(-50%,-50%) scale(1.2);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(1);  opacity:1;}
}