/* ===== Arena Scene ===== */
.arena-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.arena-svg {
  width: 100%;
  height: 100%;
}

/* Crowd wave animation */
.crowd-person {
  animation: crowdWave 3s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

@keyframes crowdWave {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* Stagger front row more */
.crowd-row-front .crowd-person { animation-duration: 2.5s; }
.crowd-row-mid .crowd-person { animation-duration: 3.5s; }
.crowd-row-back .crowd-person { animation-duration: 4s; }

/* Banner sway */
.arena-banner {
  animation: bannerSway 4s ease-in-out infinite alternate;
  transform-origin: top center;
}

@keyframes bannerSway {
  0% { transform: rotate(-1deg); }
  100% { transform: rotate(1deg); }
}

/* Ice shimmer sweep */
.ice-shimmer {
  animation: shimmerSweep 6s linear infinite;
}

@keyframes shimmerSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Goal light flash */
.goal-light-flash {
  animation: goalLightBlink 0.3s ease infinite;
}

@keyframes goalLightBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Red goal light overlay */
.arena-goal-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 85% 60%, rgba(255,0,0,0.25) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 1;
}

.arena-goal-light.active {
  animation: goalLightPulse 0.4s ease 5;
}

@keyframes goalLightPulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}


/* ===== Sprite Base ===== */
.sprite {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
}

.sprite svg {
  width: 100%;
  height: 100%;
}

.sprite-skater {
  width: 80px;
  height: 110px;
}

.sprite-goalie {
  width: 100px;
  height: 120px;
}

.sprite-puck {
  width: 24px;
  height: 24px;
}

.sprite-goal-net {
  width: 70px;
  height: 70px;
}


/* ===== Skater Animation States ===== */

/* Idle: gentle bobbing */
.sprite-skater.idle {
  animation: skaterIdle 2s ease-in-out infinite;
}

@keyframes skaterIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Skating: lean forward + leg pump */
.sprite-skater.skating {
  animation: skaterSkate 0.6s ease-in-out infinite;
}

@keyframes skaterSkate {
  0% { transform: translateX(0) rotate(-3deg); }
  50% { transform: translateX(8px) rotate(2deg); }
  100% { transform: translateX(16px) rotate(-3deg); }
}

/* Shooting: wind up then release */
.sprite-skater.shooting {
  animation: skaterShoot 0.9s ease-out forwards;
}

@keyframes skaterShoot {
  0% { transform: rotate(-10deg) translateX(0); }
  30% { transform: rotate(-18deg) translateX(-8px); }
  50% { transform: rotate(10deg) translateX(12px); }
  70% { transform: rotate(5deg) translateX(10px); }
  100% { transform: rotate(3deg) translateX(8px); }
}

/* Celebrating: jump up with arms */
.sprite-skater.celebrating {
  animation: skaterCelly 1.2s ease-out forwards;
}

@keyframes skaterCelly {
  0% { transform: translateY(0) scale(1) rotate(0); }
  20% { transform: translateY(-30px) scale(1.1) rotate(3deg); }
  35% { transform: translateY(-20px) scale(1.05) rotate(-2deg); }
  50% { transform: translateY(-25px) scale(1.08) rotate(2deg); }
  70% { transform: translateY(-10px) scale(1.03) rotate(-1deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

/* Dejected: slump */
.sprite-skater.dejected {
  animation: skaterSad 0.6s ease-out forwards;
}

@keyframes skaterSad {
  0% { transform: rotate(0) translateY(0); }
  100% { transform: rotate(-5deg) translateY(4px); }
}


/* ===== Goalie Animation States ===== */

/* Idle: slight sway */
.sprite-goalie.idle {
  animation: goalieIdle 2.5s ease-in-out infinite;
}

@keyframes goalieIdle {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* Ready: crouch lower */
.sprite-goalie.ready {
  animation: goalieReady 0.3s ease-out forwards;
}

@keyframes goalieReady {
  0% { transform: scaleY(1); }
  100% { transform: scaleY(0.92) translateY(5px); }
}

/* Saving: lunge to side */
.sprite-goalie.saving {
  animation: goalieSave 0.5s ease-out forwards;
}

@keyframes goalieSave {
  0% { transform: translateX(0) rotate(0); }
  40% { transform: translateX(-15px) rotate(-12deg) scaleX(1.1); }
  100% { transform: translateX(-10px) rotate(-8deg) scaleX(1.05); }
}

/* Celebrating (opponent missed) */
.sprite-goalie.celebrating {
  animation: goalieCelly 0.6s ease-out forwards;
}

@keyframes goalieCelly {
  0% { transform: translateY(0); }
  40% { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

/* Scored on: dejected */
.sprite-goalie.scored-on {
  animation: goalieScoredOn 0.5s ease-out forwards;
}

@keyframes goalieScoredOn {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(3px) rotate(-3deg); }
}


/* ===== Puck Animation ===== */

.sprite-puck.sliding {
  animation: puckSlide 0.5s ease-out forwards;
}

@keyframes puckSlide {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  100% { transform: translateX(500px) scale(0.7); opacity: 0.8; }
}

.sprite-puck.shot {
  animation: puckShot 0.4s ease-in forwards;
}

@keyframes puckShot {
  0% { transform: translateX(0) translateY(0) scale(1); }
  100% { transform: translateX(500px) translateY(-10px) scale(0.6); }
}

.sprite-puck.saved {
  animation: puckSaved 0.5s ease-out forwards;
}

@keyframes puckSaved {
  0% { transform: translateX(500px) translateY(-10px) scale(0.6); }
  50% { transform: translateX(420px) translateY(15px) scale(0.8); }
  100% { transform: translateX(350px) translateY(20px) scale(0.9); opacity: 0.5; }
}


/* ===== Game Animation Layer ===== */
.game-animation-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

/* Active: raise above game-area (z:5) during animations */
.game-animation-layer.playing {
  z-index: 50;
  height: 100%;
  bottom: 0;
}

.game-animation-layer .sprite-skater {
  bottom: 20px;
  left: 15%;
}

.game-animation-layer .sprite-goalie {
  bottom: 15px;
  right: 8%;
}

.game-animation-layer .sprite-puck {
  bottom: 45px;
  left: calc(15% + 70px);
}

.game-animation-layer .sprite-goal-net {
  bottom: 15px;
  right: 2%;
}


/* ===== Goal Sequence ===== */
.game-animation-layer.goal-sequence .sprite-skater {
  animation: skaterShoot 0.9s ease-out forwards;
}

.game-animation-layer.goal-sequence .sprite-puck {
  animation: puckGoal 0.7s ease-in 0.4s forwards;
}

@keyframes puckGoal {
  0% { transform: translateX(0) translateY(0) scale(1); opacity: 1; }
  80% { transform: translateX(520px) translateY(-15px) scale(0.5); opacity: 1; }
  100% { transform: translateX(560px) translateY(-5px) scale(0.4); opacity: 0.7; }
}

.game-animation-layer.goal-sequence .sprite-goalie {
  animation: goalieScoredOn 0.7s ease-out 0.6s forwards;
}

/* Goal text overlay */
.goal-anim-text {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 48px;
  font-weight: 900;
  color: #FFB81C;
  text-shadow: 0 0 20px rgba(255,184,28,0.5), 0 2px 4px rgba(0,0,0,0.5);
  letter-spacing: 6px;
  text-transform: uppercase;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}

.goal-anim-text.show {
  animation: goalTextPop 2.5s ease-out forwards;
}

@keyframes goalTextPop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  12% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
  20% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
}

/* Save text overlay */
.save-anim-text {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 40px;
  font-weight: 900;
  color: #cc0000;
  text-shadow: 0 0 15px rgba(204,0,0,0.4), 0 2px 4px rgba(0,0,0,0.5);
  letter-spacing: 4px;
  text-transform: uppercase;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}

.save-anim-text.show {
  animation: saveTextPop 2s ease-out forwards;
}

@keyframes saveTextPop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  25% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1.02); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
}


/* ===== Save Sequence ===== */
.game-animation-layer.save-sequence .sprite-skater {
  animation: skaterShoot 0.9s ease-out forwards;
}

.game-animation-layer.save-sequence .sprite-puck {
  animation: puckShot 0.5s ease-in 0.4s forwards,
             puckSaved 0.6s ease-out 0.9s forwards;
}

.game-animation-layer.save-sequence .sprite-goalie {
  animation: goalieSave 0.7s ease-out 0.4s forwards;
}


/* ===== Faceoff Sequence ===== */
.faceoff-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  z-index: 10;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

.faceoff-overlay .sprite-skater:first-child {
  position: relative;
  transform: scaleX(-1);
}

.faceoff-overlay .sprite-skater:last-child {
  position: relative;
}

.faceoff-puck-drop {
  animation: faceoffPuckDrop 0.6s ease-in 0.5s forwards;
  opacity: 0;
}

@keyframes faceoffPuckDrop {
  0% { transform: translateY(-40px); opacity: 0; }
  60% { transform: translateY(5px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}


/* ===== Jumbotron Scoreboard ===== */
.jumbotron {
  position: relative;
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
  border: 2px solid #555;
  border-radius: 10px;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: white;
  box-shadow:
    0 0 20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 40px rgba(255,184,28,0.08);
  overflow: visible;
}

/* Chasing border lights */
.jumbotron::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  background: conic-gradient(
    from var(--light-angle, 0deg),
    #FFB81C 0deg,
    transparent 30deg,
    transparent 90deg,
    #FFB81C 120deg,
    transparent 150deg,
    transparent 210deg,
    #FFB81C 240deg,
    transparent 270deg,
    transparent 330deg,
    #FFB81C 360deg
  );
  opacity: 0.4;
  z-index: -1;
  animation: chasingLights 3s linear infinite;
}

@property --light-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes chasingLights {
  to { --light-angle: 360deg; }
}

/* Fallback for browsers without @property support */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .jumbotron::before {
    background: linear-gradient(90deg, #FFB81C, transparent, #FFB81C, transparent, #FFB81C);
    animation: chasingLightsFallback 2s linear infinite;
  }
  @keyframes chasingLightsFallback {
    0% { opacity: 0.2; }
    50% { opacity: 0.5; }
    100% { opacity: 0.2; }
  }
}

/* LED scanline */
.jumbotron::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.15) 2px,
    rgba(0,0,0,0.15) 4px
  );
  pointer-events: none;
  z-index: 5;
}

.jumbotron-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 60px;
}

.jumbotron-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #FFB81C;
  font-weight: 700;
}

.jumbotron-score {
  font-size: 36px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ff3333;
  text-shadow: 0 0 12px rgba(255,50,50,0.6), 0 0 30px rgba(255,50,50,0.3);
  line-height: 1;
  position: relative;
  z-index: 2;
}

.jumbotron-score.flash {
  animation: jumbotronScoreFlash 0.4s ease;
}

@keyframes jumbotronScoreFlash {
  0% { transform: scale(1.6); color: #FFB81C; text-shadow: 0 0 20px rgba(255,184,28,0.8); }
  100% { transform: scale(1); color: #ff3333; text-shadow: 0 0 12px rgba(255,50,50,0.6); }
}

.jumbotron-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0 8px;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
}

.jumbotron-time {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #FFB81C;
  text-shadow: 0 0 8px rgba(255,184,28,0.4);
  line-height: 1;
  position: relative;
  z-index: 2;
}

.jumbotron-period-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
}

/* Dot lights around jumbotron */
.jumbotron-lights {
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  pointer-events: none;
  z-index: -2;
}


/* ===== Phase Transitions ===== */
.phase-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
}

.phase-transition-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.phase-transition-bg.animate-in {
  animation: phaseTransBgIn 0.4s ease-out forwards;
}

.phase-transition-bg.animate-out {
  animation: phaseTransBgOut 0.4s ease-in forwards;
}

@keyframes phaseTransBgIn {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes phaseTransBgOut {
  from { opacity: 1; transform: scaleX(1); }
  to { opacity: 0; transform: scaleX(0); }
}

.phase-transition-content {
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0;
}

.phase-transition-content.show {
  animation: phaseContentShow 0.5s ease-out 0.2s forwards;
}

.phase-transition-content.hide {
  animation: phaseContentHide 0.3s ease-in forwards;
}

@keyframes phaseContentShow {
  from { opacity: 0; transform: scale(0.7) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes phaseContentHide {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(1.1) translateY(-20px); }
}

.phase-transition-icon {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.phase-transition-text {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Phase-specific colors */
.phase-transition-warmup .phase-transition-bg { background: linear-gradient(135deg, #1a5276, #2980b9); }
.phase-transition-warmup .phase-transition-text { color: #85c1e9; }

.phase-transition-teach .phase-transition-bg { background: linear-gradient(135deg, #7d6608, #d4ac0d); }
.phase-transition-teach .phase-transition-text { color: #fef9e7; }

.phase-transition-play .phase-transition-bg { background: linear-gradient(135deg, #922b21, #e74c3c); }
.phase-transition-play .phase-transition-text { color: #fdedec; }

.phase-transition-cooldown .phase-transition-bg { background: linear-gradient(135deg, #1a5276, #5dade2); }
.phase-transition-cooldown .phase-transition-text { color: #d6eaf8; }

.phase-transition-rewards .phase-transition-bg { background: linear-gradient(135deg, #7d6608, #f1c40f); }
.phase-transition-rewards .phase-transition-text { color: #fff; }