/* ═══════════════════════════════════════
   HOOP SHOT — css/basketball.css
   ═══════════════════════════════════════ */

/* ── Court ───────────────────────────────────────────────────────────────── */
#basketScreen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  font-family: 'Baloo 2', cursive;
  /* Cartoon court PNG when loaded; CSS gradient fallback while image loads */
  background:
    url('../Images/GameAssets/Basketball/background.webp') center/cover no-repeat,
    linear-gradient(180deg,
      #1675c4 0%,
      #3d9fe6 28%,
      #5eb2ee 32%,
      #c08a14 32%,
      #d09a1c 36%,
      #a06808 100%
    );
}

/* ── Hoop layers ──────────────────────────────────────────────────────────── */
#bktHoopBack,
#bktHoopNet {
  position: absolute;
  width: 240px;
  height: 240px;
  pointer-events: none;
}

#bktHoopBack { z-index: 4; }

/* Net sits in front of ball (z=6) — ball appears to pass through/behind net */
#bktHoopNet  { z-index: 8; }

/* ── Ball ────────────────────────────────────────────────────────────────── */
#bktBall {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  background: url('../Images/GameAssets/Basketball/ball.webp') center/contain no-repeat;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  z-index: 6;
  /* will-change tells GPU to keep this layer composited — eliminates trail artifacts */
  will-change: transform, opacity;
}

#bktBall.bkt-idle {
  animation: bkt-idle 1.9s ease-in-out infinite;
}

/* ── Jumbotron scoreboard ─────────────────────────────────────────────────── */
#bktJumbotron {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  user-select: none;

  /* LED display casing */
  background: #0a0a0e;
  border: 3px solid #2a2a2a;
  border-radius: 14px;
  box-shadow:
    0 0 0 2px #3a3a3a,
    0 0 0 5px #111,
    0 8px 28px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.06);
  padding: 6px 20px 8px;
  min-width: 150px;
  text-align: center;
}

/* Scanline overlay */
#bktJumbotron::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.10) 3px,
    rgba(0,0,0,.10) 4px
  );
  pointer-events: none;
}

.bkt-jmb-brand {
  font-size: .58rem;
  letter-spacing: 1.5px;
  color: #ff8800;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255,136,0,.55);
  margin-bottom: 1px;
  opacity: .8;
}

.bkt-jmb-score-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
}

.bkt-jmb-lbl {
  font-size: .52rem;
  letter-spacing: 2px;
  color: #ff8800;
  font-weight: 900;
  opacity: .5;
  text-transform: uppercase;
}

#bktScore {
  font-size: 2.6rem;
  font-weight: 900;
  color: #ffb300;
  text-shadow:
    0 0 10px #ff8800,
    0 0 24px rgba(255,136,0,.45);
  letter-spacing: 4px;
  line-height: 1;
  font-family: 'Courier New', monospace;
}


/* ── Streak bar ──────────────────────────────────────────────────────────── */
#bktStreakBar {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 10px;
  font-size: 1.9rem;
  pointer-events: none;
  user-select: none;
}

.bkt-streak-dot {
  transition: transform .15s ease;
  line-height: 1;
  display: inline-block;
}

.bkt-streak-active {
  animation: bkt-streak-pop .3s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Streak message overlay ──────────────────────────────────────────────── */
#bktStreakMsg {
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 25;
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .65);
  pointer-events: none;
  display: none;
  white-space: nowrap;
}

/* ── Settings cog ────────────────────────────────────────────────────────── */
#bktSettingsBtn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 40;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.52);
  border: 2px solid rgba(255, 255, 255, 0.18);
  font-size: 1.35rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), background 0.2s;
  touch-action: manipulation;
  user-select: none;
}
#bktSettingsBtn:active { background: rgba(0,0,0,0.7); }
#bktSettingsBtn.open   { transform: rotate(55deg); }

#bktSettingsPanel {
  position: absolute;
  top: 70px;
  right: 14px;
  z-index: 39;
  background: rgba(8, 8, 12, 0.93);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 14px 18px 16px;
  min-width: 210px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  display: none;
  pointer-events: none;
}
#bktSettingsPanel.open {
  display: block;
  pointer-events: auto;
  animation: bkt-panel-in 0.28s cubic-bezier(.34,1.56,.64,1) both;
}

.bkt-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family: 'Baloo 2', cursive;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.bkt-setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.bkt-setting-row:first-child { padding-top: 0; }

.bkt-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: #333;
  transition: background 0.25s;
  flex-shrink: 0;
  touch-action: manipulation;
}
.bkt-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.bkt-toggle.on {
  background: #ff8800;
}
.bkt-toggle.on::after {
  transform: translateX(24px);
}

.bkt-setting-divider {
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  color: rgba(255,136,0,0.55);
  font-weight: 900;
  text-transform: uppercase;
  padding: 6px 0 2px;
}

/* ── Confetti ─────────────────────────────────────────────────────────────── */
.bkt-confetti {
  position: absolute;
  top: -18px;
  z-index: 35;
  pointer-events: none;
  border-radius: 2px;
  animation: bkt-confetti-fall linear forwards;
}

@keyframes bkt-confetti-fall {
  0%   { transform: translateY(0)     translateX(0)              rotate(0deg);   opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(108vh) translateX(var(--cdrift))  rotate(var(--cspin)); opacity: 0; }
}

/* ── Animations ──────────────────────────────────────────────────────────── */

/* Ball bobs gently — uses CSS vars set by JS so position + bob compose cleanly */
@keyframes bkt-idle {
  0%, 100% { transform: translate(var(--bkt-x,0px), var(--bkt-y,0px)) scale(1);    }
  50%       { transform: translate(var(--bkt-x,0px), calc(var(--bkt-y,0px) - 10px)) scale(1.05); }
}

/* Score number pops on a make */
@keyframes bkt-score-pop {
  0%   { transform: scale(0.6); opacity: .5; }
  55%  { transform: scale(1.6); opacity: 1;  }
  100% { transform: scale(1);   opacity: 1;  }
}

/* Streak dot pops when lit */
@keyframes bkt-streak-pop {
  0%   { transform: scale(0.4); }
  60%  { transform: scale(1.5); }
  100% { transform: scale(1);   }
}

/* Settings panel slides down */
@keyframes bkt-panel-in {
  0%   { transform: translateY(-12px) scale(0.92); opacity: 0; }
  100% { transform: translateY(0)     scale(1);    opacity: 1; }
}

/* Streak message flies in then fades */
@keyframes bkt-msg-pop {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  65%  { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
}