/* ═══════════════════════════════════════
   HOCKEY: SLAP SHOT — css/hockey.css v1
   Adapted from css/soccer.css (goal/keeper/jumbotron) + the stick-swing
   keyframe from css/baseball.css's #bsbBat/bsbBatSwing.
   ═══════════════════════════════════════ */

#hockeyScreen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: url('../Images/GameAssets/Hockey/background.webp') center/cover no-repeat,
    linear-gradient(180deg, #cfeeff 0%, #cfeeff 40%, #eaf7ff 40%, #eaf7ff 100%);
}

/* ── Settings cog (identical structure to soccer's) ── */
#hkySettingsBtn {
  position: absolute; top: 14px; right: 14px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), background 0.2s;
  touch-action: manipulation; user-select: none;
}
#hkySettingsBtn:active { transform: scale(.9); }
#hkySettingsBtn.open   { transform: rotate(55deg); }

#hkySettingsPanel {
  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;
}
#hkySettingsPanel.open {
  display: block; pointer-events: auto;
  animation: hky-panel-in 0.28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes hky-panel-in {
  from { opacity: 0; transform: scale(0.88) translateY(-10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.hky-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);
}
.hky-setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.hky-setting-row:first-child { padding-top: 0; }
.hky-setting-divider {
  font-size: 0.6rem; letter-spacing: 1.5px; color: rgba(66, 165, 245, 0.8);
  font-weight: 900; text-transform: uppercase; padding: 6px 0 2px;
}
.hky-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;
}
.hky-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);
}
.hky-toggle.on { background: #2196f3; }
.hky-toggle.on::after { transform: translateX(24px); }

/* ── Jumbotron (same construction as soccer's) ── */
#hkyJumbotron {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 20; pointer-events: none; user-select: none;
  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 18px 8px; text-align: center; white-space: nowrap;
}
#hkyJumbotron::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;
}
.hky-jmb-brand {
  font-size: .58rem; letter-spacing: 1.5px; color: #42a5f5; font-weight: 900;
  text-shadow: 0 0 8px rgba(66,165,245,.55); margin-bottom: 2px; opacity: .9;
}
.hky-jmb-stats { display: flex; align-items: center; justify-content: center; gap: 4px; }
.hky-jmb-stat  { display: flex; flex-direction: column; align-items: center; padding: 0 10px; }
.hky-jmb-divider { width: 1.5px; height: 36px; background: rgba(255,255,255,.12); border-radius: 1px; }
.hky-jmb-lbl {
  font-size: .44rem; letter-spacing: 2px; color: #42a5f5; font-weight: 900;
  opacity: .5; text-transform: uppercase; margin-bottom: 1px;
}

/* ── Goal + net + goalie (identical structure to soccer's) ── */
#hockeyGoal {
  position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
  width: min(74%, 340px); z-index: 12;
}
#hockeyGoalImg { width: 100%; height: auto; display: block; position: relative; z-index: 13; pointer-events: none; user-select: none; }
#hockeyNet {
  position: absolute; top: 12%; left: 14%; right: 14%; bottom: 20%;
  border-radius: 3px; transition: background-color .15s; z-index: 14; pointer-events: none;
}
#hockeyNet.hky-net-flash { background-color: rgba(120,200,255,.5); }

#hockeyGoalie {
  position: absolute; bottom: -4px; width: 92px; height: 92px; z-index: 15;
  display: flex; align-items: flex-end; justify-content: center;
  transition: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4));
  user-select: none; pointer-events: none; overflow: visible;
}
#hockeyGoalie.hky-kp-right { transform: scaleX(-1); }
#hockeyGoalie.hky-kp-left  { transform: scaleX(1); }

/* ── Puck ── */
#hkyPuck {
  position: absolute; top: 0; left: 0; width: 56px; height: 56px; z-index: 20;
  background: url('../Images/GameAssets/Hockey/puck.webp') center/contain no-repeat;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
#hkyPuck.hky-idle { animation: hky-puck-bob 1.6s ease-in-out infinite; }
@keyframes hky-puck-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }

/* ── Stick — Jason, 2026-09-26: "the swing anchored to the bottom middle
   of the screen, so the stick swings up... consider how a hockey stick
   hits a puck, we'd need the stick to have an arch that follows a U curve
   almost. So the stick would be persistent on the screen." Previously
   JS relocated this element to sit right on top of the puck for every
   shot and just rotated it there; now it lives at one fixed pivot (a
   player's hands, off the bottom edge) at all times, and a shot rotates
   it from a raised windup, down through the puck near rotate:0 (where
   the blade is lowest AND moving nearly horizontally — a real slap
   shot's blade stays near the ice and sweeps sideways through contact),
   to a forward follow-through — the U curve is the blade tip's swept
   arc around that one fixed pivot. transform-origin stays at the grip
   (bottom of the image, per the stick_right.webp flip/pad fix). ── */
#hkyStick {
  position: absolute; left: calc(50% - 20px); bottom: -10%;
  width: clamp(70px,18vw,110px); height: clamp(230px,52vw,320px);
  background: url('../Images/GameAssets/Hockey/stick_right.webp') center/contain no-repeat;
  transform-origin: bottom center; transform: rotate(8deg);
  z-index: 22; pointer-events: none;
}
@keyframes hkyStickSwing {
  0%   { transform: rotate(8deg); }
  15%  { transform: rotate(55deg); }
  55%  { transform: rotate(-25deg); }
  100% { transform: rotate(8deg); }
}

/* ── Streak bar (reuses soccer's .scr-streak-dot styling wholesale) ── */
#hkyStreakBar {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 20; display: flex; gap: 10px; font-size: 1.8rem; pointer-events: none;
}

/* ── Hint text ── */
#hkyHint {
  position: absolute; top: 66px; left: 50%; transform: translateX(-50%);
  z-index: 20; background: rgba(255,255,255,.92); border-radius: 40px;
  padding: 8px 18px; font-family: 'Baloo 2', cursive; font-weight: 800;
  font-size: .95rem; color: #1565c0; white-space: nowrap; pointer-events: none;
  transition: opacity .3s;
}