/* ============================================
   PLAY ANIMATIONS CSS
   Touchdown, Field Goal, 1st Down, Interception,
   Fumble, Sack, Penalty, Timeout, Punt, Safety
   ============================================ */

/* Base keyframes */
@keyframes fadeOut {
  0% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes playIconBounce {
  0% { transform: scale(0) translateY(-50px); opacity: 0; }
  50% { transform: scale(1.2) translateY(10px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes playTextSlide {
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes gradientShift {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Play Animation Base */
.play-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100;
  pointer-events: none;
  animation: fadeOut 8s forwards;
  border-radius: 12px;
}

.play-animation-icon {
  font-size: clamp(3rem, 8vh, 8rem);
  margin-bottom: clamp(10px, 2vh, 20px);
  animation: playIconBounce 0.8s ease-out;
}

.play-animation-text {
  font-size: clamp(1.5rem, 4vh, 4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: clamp(1px, 0.3vh, 3px);
  animation: playTextSlide 0.8s ease-out;
  text-align: center;
  padding: 0 10px;
  line-height: 1.2;
}

.play-animation-subtext {
  font-size: clamp(1rem, 2.5vh, 2.5rem);
  font-weight: 700;
  margin-top: clamp(5px, 1vh, 10px);
  text-align: center;
  padding: 0 10px;
  line-height: 1.2;
}

/* Negated play indicator (No Play - Penalty) */
.play-animation.negated {
  border: 4px solid #ef4444;
}

.negated-banner {
  position: absolute;
  bottom: clamp(10px, 3vh, 30px);
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: clamp(0.8rem, 2vh, 1.5rem);
  font-weight: 900;
  padding: clamp(6px, 1vh, 12px) clamp(15px, 3vw, 30px);
  border-radius: clamp(4px, 0.8vh, 8px);
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5);
  animation: negatedPulse 1s ease-in-out infinite;
  z-index: 101;
}

@keyframes negatedPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5);
  }
  50% {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 4px 25px rgba(239, 68, 68, 0.8);
  }
}

/* ============================================
   TOUCHDOWN ANIMATION
   ============================================ */
.play-animation.touchdown {
  animation: fadeOutTouchdown 7s forwards;
}

.play-animation.touchdown .play-animation-icon {
  color: #fbbf24;
  text-shadow: 0 0 30px #fbbf24, 0 0 60px #fbbf24;
}

.play-animation.touchdown .play-animation-text {
  background: linear-gradient(90deg, #22c55e, #fbbf24, #22c55e);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: playTextSlide 0.8s ease-out, gradientShift 2s linear infinite;
}

@keyframes fadeOutTouchdown {
  0% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

/* TV Performance: Use pseudo-element glow instead of expensive filter animations */
.touchdown-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(10px, 2vmin, 20px);
}

.touchdown-team-logo {
  width: clamp(80px, 20vmin, 200px);
  height: clamp(80px, 20vmin, 200px);
  object-fit: contain;
  animation: touchdownLogoEntry 0.8s ease-out, touchdownLogoPulseOptimized 1.5s ease-in-out infinite 0.8s;
  position: relative;
  z-index: 2;
}

.touchdown-fallback-icon {
  font-size: clamp(4rem, 18vmin, 10rem);
  animation: touchdownLogoEntry 0.8s ease-out, touchdownLogoPulseOptimized 1.5s ease-in-out infinite 0.8s;
  position: relative;
  z-index: 2;
}

/* GPU-friendly glow using pseudo-element with radial gradient */
.touchdown-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background: radial-gradient(ellipse at center,
    rgba(251, 191, 36, 0.5) 0%,
    rgba(34, 197, 94, 0.3) 35%,
    transparent 70%);
  z-index: 1;
  pointer-events: none;
  animation: touchdownGlowPulse 1.5s ease-in-out infinite 0.8s;
  border-radius: 50%;
}

@keyframes touchdownLogoEntry {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  50% { transform: scale(1.3) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Transform-only animation for GPU acceleration */
@keyframes touchdownLogoPulseOptimized {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Opacity-based glow pulse (GPU-friendly) */
@keyframes touchdownGlowPulse {
  0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* ============================================
   FIELD GOAL ANIMATION
   ============================================ */
.play-animation.field-goal .play-animation-icon {
  color: #3b82f6;
  text-shadow: 0 0 30px #3b82f6, 0 0 60px #3b82f6;
}

.play-animation.field-goal .play-animation-text {
  color: #3b82f6;
  text-shadow: 0 0 20px #3b82f6;
}

/* TV Performance: Field goal with GPU-friendly pseudo-element glow */
.field-goal-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.field-goal-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center,
    rgba(59, 130, 246, 0.4) 0%,
    rgba(96, 165, 250, 0.2) 40%,
    transparent 70%);
  z-index: 0;
  pointer-events: none;
  animation: fieldGoalGlowPulse 1s ease-in-out infinite alternate;
  border-radius: 50%;
}

.yframe-image {
  width: clamp(60px, 12vmin, 120px);
  height: auto;
  position: relative;
  z-index: 1;
}

.spinning-football {
  position: absolute;
  font-size: clamp(1.5rem, 4vmin, 3rem);
  bottom: -50px;
  left: 50%;
  z-index: 2;
  animation: footballSpinAndArc 1.5s ease-out forwards;
}

/* GPU-friendly glow pulse using opacity */
@keyframes fieldGoalGlowPulse {
  0% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

/* Combined spin and arc using transform only (GPU-accelerated) */
@keyframes footballSpinAndArc {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(calc(-30vh - 50px)) rotate(540deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(calc(-80vh - 50px)) rotate(1080deg);
    opacity: 0;
  }
}

/* ============================================
   TWO-POINT CONVERSION ANIMATION
   ============================================ */
.play-animation.two-point .play-animation-text {
  background: linear-gradient(90deg, #22c55e, #fbbf24, #22c55e);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: playTextSlide 0.8s ease-out, gradientShift 2s linear infinite;
  font-size: clamp(1.2rem, 3vh, 3rem) !important;
}

.two-point-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.two-point-team-logo {
  width: clamp(50px, 10vmin, 100px);
  height: clamp(50px, 10vmin, 100px);
  object-fit: contain;
  margin-bottom: clamp(10px, 2vmin, 20px);
  animation: touchdownLogoEntry 0.8s ease-out, touchdownLogoPulse 1.5s ease-in-out infinite 0.8s;
  filter: drop-shadow(0 0 20px #fbbf24) drop-shadow(0 0 40px #22c55e);
}

/* ============================================
   SAFETY ANIMATION
   ============================================ */
.play-animation.safety .play-animation-text {
  color: #f97316;
  text-shadow: 0 0 20px #f97316, 0 0 40px #dc2626;
  animation: playTextSlide 0.8s ease-out, safetyPulse 1s ease-in-out infinite 0.8s;
}

@keyframes safetyPulse {
  0%, 100% {
    text-shadow: 0 0 20px #f97316, 0 0 40px #dc2626;
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 30px #f97316, 0 0 60px #dc2626;
    transform: scale(1.05);
  }
}

/* ============================================
   1ST DOWN ANIMATION
   ============================================ */
.play-animation.first-down .play-animation-text {
  color: #22c55e;
  text-shadow: 0 0 20px #22c55e;
  position: relative;
  z-index: 10;
}

.first-down-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(5px, 1.5vh, 15px);
  width: clamp(60px, 15vmin, 120px);
  height: clamp(60px, 15vmin, 120px);
}

/* Radial glow background that fades naturally */
.first-down-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center,
    rgba(34, 197, 94, 0.4) 0%,
    rgba(34, 197, 94, 0.2) 25%,
    rgba(34, 197, 94, 0.08) 50%,
    transparent 70%);
  pointer-events: none;
  animation: glowPulse 1.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
}

.first-down-arrow {
  position: absolute;
  width: clamp(50px, 12vmin, 100px);
  height: auto;
  filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.6));
}

/* Background image (1stDown2.png) - behind everything, revealed at end */
.first-down-arrow.background {
  z-index: 1;
  opacity: 1;
}

/* Static 1stDown1.png - center position, fades out */
.first-down-arrow.static {
  z-index: 2;
  animation: firstDownStaticFade 3s ease-in-out forwards;
}

/* Moving 1stDown1.png - slides in from left, then fades out */
.first-down-arrow.moving {
  z-index: 3;
  animation: firstDownSlideAndFade 3s ease-in-out forwards;
}

@keyframes firstDownStaticFade {
  0% { opacity: 1; }
  50% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes firstDownSlideAndFade {
  0% { transform: translateX(-200%); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translateX(0); opacity: 1; }
  70% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

/* Home team direction - slide from right to center (no flip) */
.first-down-container.home-direction .first-down-arrow.moving {
  animation: firstDownSlideFromRight 3s ease-in-out forwards;
}

@keyframes firstDownSlideFromRight {
  /* Slide from right (+200%) to center */
  0% { transform: translateX(200%); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translateX(0); opacity: 1; }
  70% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

/* ============================================
   INTERCEPTION ANIMATION
   ============================================ */
.play-animation.interception .play-animation-icon {
  color: #ef4444;
  text-shadow: 0 0 30px #ef4444, 0 0 60px #ef4444;
}

.play-animation.interception .play-animation-text {
  color: #ef4444;
  text-shadow: 0 0 20px #ef4444;
}

/* ============================================
   FUMBLE ANIMATION
   ============================================ */
.play-animation.fumble .play-animation-icon {
  color: #f97316;
  text-shadow: 0 0 30px #f97316, 0 0 60px #f97316;
}

.play-animation.fumble .play-animation-text {
  color: #f97316;
  text-shadow: 0 0 20px #f97316;
}

/* ============================================
   TURNOVER ON DOWNS ANIMATION
   ============================================ */
.play-animation.turnover-on-downs .play-animation-icon {
  color: #eab308;
  text-shadow: 0 0 30px #eab308, 0 0 60px #eab308;
}

.play-animation.turnover-on-downs .play-animation-text {
  color: #eab308;
  text-shadow: 0 0 20px #eab308;
}

.turnover-on-downs-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(5px, 1.5vh, 15px);
  width: clamp(80px, 20vmin, 160px);
  height: clamp(80px, 20vmin, 160px);
}

/* Radial glow background */
.turnover-on-downs-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center,
    rgba(234, 179, 8, 0.4) 0%,
    rgba(234, 179, 8, 0.2) 25%,
    rgba(234, 179, 8, 0.05) 50%,
    transparent 70%);
  animation: turnoverGlow 3s ease-in-out forwards;
}

@keyframes turnoverGlow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}

.turnover-on-downs-icon {
  font-size: clamp(50px, 12vmin, 100px);
  color: #eab308;
  filter: drop-shadow(0 0 10px rgba(234, 179, 8, 0.8));
  animation: turnoverPulse 3s ease-in-out forwards;
}

@keyframes turnoverPulse {
  0% { transform: scale(0); opacity: 0; }
  15% { transform: scale(1.2); opacity: 1; }
  25% { transform: scale(1); }
  75% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}

/* ============================================
   SACK ANIMATION
   ============================================ */
.play-animation.sack .play-animation-text {
  color: #a855f7;
  text-shadow: 0 0 20px #a855f7, 0 0 40px #ef4444;
}

.sack-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(10px, 2vmin, 20px);
}

/* TV Performance: Sack icon with reduced filter complexity */
.sack-icon {
  font-size: clamp(3rem, 14vmin, 8rem);
  animation: sackImpact 0.6s ease-out, sackShake 0.5s ease-in-out 0.6s;
  /* Simpler text-shadow instead of expensive drop-shadow */
  text-shadow: 0 0 15px #a855f7, 0 0 25px #ef4444;
}

.sack-stars {
  position: absolute;
  font-size: clamp(1.2rem, 3vmin, 2.5rem);
  animation: sackStars 1s ease-out forwards;
  opacity: 0;
}

.sack-stars.star-1 { top: 10%; left: 20%; animation-delay: 0.3s; }
.sack-stars.star-2 { top: 5%; right: 25%; animation-delay: 0.4s; }
.sack-stars.star-3 { top: 20%; left: 10%; animation-delay: 0.5s; }
.sack-stars.star-4 { top: 15%; right: 15%; animation-delay: 0.6s; }

@keyframes sackImpact {
  0% { transform: scale(0) translateY(-100px); opacity: 0; }
  60% { transform: scale(1.4) translateY(10px); opacity: 1; }
  80% { transform: scale(0.9) translateY(-5px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes sackShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px) rotate(-3deg); }
  40% { transform: translateX(10px) rotate(3deg); }
  60% { transform: translateX(-5px) rotate(-1deg); }
  80% { transform: translateX(5px) rotate(1deg); }
}

@keyframes sackStars {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(360deg) translateY(-20px); }
}

/* ============================================
   MISSED KICK ANIMATION
   ============================================ */
.play-animation.missed-kick .play-animation-text {
  color: #ef4444;
  text-shadow: 0 0 20px #ef4444;
}

.missed-kick-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(10px, 2vmin, 20px);
  width: 100%;
  max-width: clamp(100px, 25vmin, 250px);
  height: clamp(80px, 20vmin, 200px);
}

.yframe-image-missed {
  width: clamp(50px, 12vmin, 120px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px #ef4444);
}

.missed-football {
  position: absolute;
  font-size: clamp(1.5rem, 4vmin, 3rem);
  bottom: 20%;
  left: 50%;
  animation: missedBallFly 1.2s ease-out forwards;
  filter: drop-shadow(0 0 10px #ef4444);
}

@keyframes missedBallFly {
  0% { transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translateX(30%) translateY(-80%) rotate(360deg) scale(1); opacity: 1; }
  100% { transform: translateX(100%) translateY(-120%) rotate(720deg) scale(0.6); opacity: 0; }
}

/* ============================================
   PUNT ANIMATION
   ============================================ */
.play-animation.punt .play-animation-text {
  color: #f59e0b;
  text-shadow: 0 0 20px #f59e0b;
}

.punt-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* TV Performance: Punt ball using transform-only animation (GPU-accelerated) */
.punt-ball {
  position: absolute;
  font-size: clamp(2rem, 6vmin, 4rem);
  left: 5%;
  bottom: 30%;
  animation: puntBallFlyOptimized 2s ease-in-out forwards;
  /* Reduced blur for better performance */
  text-shadow: 0 0 15px #f59e0b;
}

/* Transform-only animation for GPU acceleration */
@keyframes puntBallFlyOptimized {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    transform: translate(5vw, -5vh) rotate(90deg) scale(1.1);
    opacity: 1;
  }
  30% {
    transform: translate(25vw, -40vh) rotate(270deg) scale(1.2);
    opacity: 1;
  }
  50% {
    transform: translate(45vw, -50vh) rotate(450deg) scale(1.1);
    opacity: 1;
  }
  70% {
    transform: translate(65vw, -35vh) rotate(630deg) scale(1);
    opacity: 1;
  }
  90% {
    transform: translate(80vw, -5vh) rotate(810deg) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: translate(87vw, 5vh) rotate(900deg) scale(0.8);
    opacity: 0;
  }
}

/* ============================================
   TIMEOUT ANIMATION
   ============================================ */
.play-animation.timeout {
  animation: fadeOut 5s forwards;
}

.play-animation.timeout .play-animation-text {
  color: #fbbf24;
  text-shadow: 0 0 20px #fbbf24;
}

/* TV Performance: Timeout with GPU-friendly animation */
.timeout-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vh, 20px);
}

.timeout-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  height: 130%;
  background: radial-gradient(ellipse at center,
    rgba(251, 191, 36, 0.4) 0%,
    rgba(251, 191, 36, 0.15) 50%,
    transparent 70%);
  z-index: 0;
  pointer-events: none;
  animation: timeoutGlowPulse 1s ease-in-out infinite;
  border-radius: 50%;
}

.timeout-team-logo {
  width: clamp(60px, 15vmin, 150px);
  height: clamp(60px, 15vmin, 150px);
  object-fit: contain;
  animation: timeoutPulseOptimized 1s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

.timeout-team-name {
  font-size: clamp(1.2rem, 3vh, 2.5rem);
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
  position: relative;
  z-index: 1;
}

/* Transform-only animation (GPU-accelerated) */
@keyframes timeoutPulseOptimized {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes timeoutGlowPulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

/* ============================================
   PENALTY ANIMATION (Two-Phase)
   ============================================ */
.play-animation.penalty {
  animation: fadeOut 11s forwards;
}

.penalty-phase-1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: penaltyPhase1 5s forwards;
}

.referee-throwing {
  width: clamp(120px, 30vmin, 300px);
  height: auto;
  animation: refereeShake 0.3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px #fbbf24);
}

.penalty-phase-1-text {
  font-size: clamp(2rem, 6vh, 5rem);
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 30px #fbbf24, 0 0 60px #f59e0b;
  margin-top: clamp(10px, 2vh, 20px);
  animation: flagTextPulse 0.5s ease-in-out infinite;
}

@keyframes penaltyPhase1 {
  0% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

@keyframes refereeShake {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@keyframes flagTextPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.penalty-phase-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: penaltyPhase2 11s forwards;
}

@keyframes penaltyPhase2 {
  0% { opacity: 0; }
  45% { opacity: 0; }
  50% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}

.penalty-info-box {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
  border: 3px solid #fbbf24;
  border-radius: clamp(10px, 2vmin, 20px);
  padding: clamp(15px, 3vmin, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vh, 15px);
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
}

.penalty-team-logo {
  width: clamp(50px, 12vmin, 100px);
  height: clamp(50px, 12vmin, 100px);
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.8));
}

.penalty-type {
  font-size: clamp(1.2rem, 3vh, 2.5rem);
  font-weight: 900;
  color: #fbbf24;
  text-transform: uppercase;
  text-align: center;
}

.penalty-on {
  font-size: clamp(0.9rem, 2vh, 1.5rem);
  font-weight: 700;
  color: #f59e0b;
  text-transform: uppercase;
}

.penalty-player {
  font-size: clamp(1rem, 2.5vh, 2rem);
  font-weight: 600;
  color: white;
}

/* ============================================
   GRID SIZE RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Grid 4+ - Smaller animations */
.fullscreen-grid.grid-4 .play-animation-text,
.fullscreen-grid.grid-5 .play-animation-text,
.fullscreen-grid.grid-6 .play-animation-text,
.fullscreen-grid.grid-7 .play-animation-text,
.fullscreen-grid.grid-8 .play-animation-text {
  font-size: clamp(1rem, 3vh, 2.5rem);
}

.fullscreen-grid.grid-4 .touchdown-team-logo,
.fullscreen-grid.grid-5 .touchdown-team-logo,
.fullscreen-grid.grid-6 .touchdown-team-logo {
  width: clamp(50px, 12vmin, 100px);
  height: clamp(50px, 12vmin, 100px);
}

.fullscreen-grid.grid-7 .touchdown-team-logo,
.fullscreen-grid.grid-8 .touchdown-team-logo {
  width: clamp(40px, 10vmin, 80px);
  height: clamp(40px, 10vmin, 80px);
}

.fullscreen-grid.grid-6 .first-down-container,
.fullscreen-grid.grid-7 .first-down-container,
.fullscreen-grid.grid-8 .first-down-container {
  width: clamp(40px, 10vmin, 80px);
  height: clamp(40px, 10vmin, 80px);
}

.fullscreen-grid.grid-6 .first-down-arrow,
.fullscreen-grid.grid-7 .first-down-arrow,
.fullscreen-grid.grid-8 .first-down-arrow {
  width: clamp(35px, 8vmin, 70px);
}

/* ============================================
   NHL ANIMATIONS
   ============================================ */

/* Goal Animation - Red/White (NHL Standard) */
.play-animation.goal .play-animation-icon {
  color: #dc2626;
  text-shadow: 0 0 30px #dc2626, 0 0 60px #dc2626;
}

.play-animation.goal .play-animation-text {
  background: linear-gradient(90deg, #dc2626, #ffffff, #dc2626);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: playTextSlide 0.8s ease-out, gradientShift 2s linear infinite;
}

/* Save Animation - Blue */
.play-animation.save .play-animation-icon {
  color: #3b82f6;
  text-shadow: 0 0 30px #3b82f6, 0 0 60px #3b82f6;
}

.play-animation.save .play-animation-text {
  color: #3b82f6;
  text-shadow: 0 0 20px #3b82f6;
}

/* Power Play Goal Animation - Yellow/Gold */
.play-animation.powerplay .play-animation-icon {
  color: #fbbf24;
  text-shadow: 0 0 30px #fbbf24, 0 0 60px #fbbf24;
}

.play-animation.powerplay .play-animation-text {
  color: #fbbf24;
  text-shadow: 0 0 20px #fbbf24;
}

/* Hat Trick Animation - Purple/Gold */
.play-animation.hattrick .play-animation-icon {
  color: #a855f7;
  text-shadow: 0 0 30px #a855f7, 0 0 60px #a855f7;
}

.play-animation.hattrick .play-animation-text {
  background: linear-gradient(90deg, #a855f7, #fbbf24, #a855f7);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: playTextSlide 0.8s ease-out, gradientShift 2s linear infinite;
}

/* Penalty Animation - Orange/Red (NHL) */
.play-animation.nhl-penalty .play-animation-icon {
  color: #f97316;
  text-shadow: 0 0 30px #f97316, 0 0 60px #f97316;
}

.play-animation.nhl-penalty .play-animation-text {
  color: #f97316;
  text-shadow: 0 0 20px #f97316;
}

/* Shootout Animation - Cyan/White */
.play-animation.shootout .play-animation-icon {
  color: #06b6d4;
  text-shadow: 0 0 30px #06b6d4, 0 0 60px #06b6d4;
}

.play-animation.shootout .play-animation-text {
  color: #06b6d4;
  text-shadow: 0 0 20px #06b6d4;
}

/* ============================================
   MLB ANIMATIONS
   ============================================ */

/* Home Run Animation - Gold/Yellow */
.play-animation.home-run .play-animation-text {
  background: linear-gradient(90deg, #fbbf24, #ffffff, #fbbf24);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: playTextSlide 0.8s ease-out, gradientShift 2s linear infinite;
}

.home-run-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(10px, 2vmin, 20px);
  width: clamp(100px, 25vmin, 200px);
  height: clamp(80px, 20vmin, 160px);
}

/* TV Performance: Home run ball with text-shadow instead of filter */
.home-run-ball {
  font-size: clamp(2.5rem, 8vmin, 5rem);
  position: absolute;
  animation: homeRunBallFly 1.5s ease-out forwards;
  text-shadow: 0 0 10px #fbbf24;
}

/* TV Performance: Home run explosion with text-shadow instead of filter */
.home-run-explosion {
  font-size: clamp(4rem, 12vmin, 8rem);
  position: absolute;
  opacity: 0;
  animation: homeRunExplosion 1.5s ease-out 0.8s forwards;
  text-shadow: 0 0 20px #fbbf24, 0 0 40px #f59e0b;
}

@keyframes homeRunBallFly {
  0% {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  20% {
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%) scale(1) rotate(180deg);
    opacity: 1;
  }
  50% {
    bottom: 60%;
    left: 55%;
    transform: translateX(-50%) scale(1.2) rotate(540deg);
    opacity: 1;
  }
  80% {
    bottom: 85%;
    left: 60%;
    transform: translateX(-50%) scale(0.8) rotate(900deg);
    opacity: 0.8;
  }
  100% {
    bottom: 100%;
    left: 65%;
    transform: translateX(-50%) scale(0.3) rotate(1080deg);
    opacity: 0;
  }
}

@keyframes homeRunExplosion {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Grand Slam Animation - Rainbow/Celebration */
.play-animation.grand-slam .play-animation-text {
  background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7, #ef4444);
  background-size: 400% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: playTextSlide 0.8s ease-out, grandSlamRainbow 3s linear infinite;
}

@keyframes grandSlamRainbow {
  0% { background-position: 0% center; }
  100% { background-position: 400% center; }
}

/* Strikeout Animation - Red/Fire */
.play-animation.strikeout .play-animation-text {
  color: #ef4444;
  text-shadow: 0 0 20px #ef4444, 0 0 40px #dc2626;
}

.strikeout-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(10px, 2vmin, 20px);
}

.strikeout-k {
  font-size: clamp(5rem, 18vmin, 12rem);
  font-weight: 900;
  font-family: 'Impact', 'Arial Black', sans-serif;
  color: #ef4444;
  text-shadow: 0 0 30px #ef4444, 0 0 60px #dc2626, 0 0 90px #b91c1c;
  animation: strikeoutEntry 0.5s ease-out, strikeoutPulse 0.5s ease-in-out 0.5s infinite;
}

@keyframes strikeoutEntry {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.3) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes strikeoutPulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 30px #ef4444, 0 0 60px #dc2626;
  }
  50% {
    transform: scale(1.1);
    text-shadow: 0 0 50px #ef4444, 0 0 90px #dc2626, 0 0 120px #b91c1c;
  }
}

/* Double Play Animation - Blue/Lightning */
.play-animation.double-play .play-animation-icon {
  color: #3b82f6;
  text-shadow: 0 0 30px #3b82f6, 0 0 60px #3b82f6;
}

.play-animation.double-play .play-animation-text {
  color: #3b82f6;
  text-shadow: 0 0 20px #3b82f6;
}

/* Stolen Base Animation - Green/Speed */
.play-animation.stolen-base .play-animation-icon {
  color: #22c55e;
  text-shadow: 0 0 30px #22c55e, 0 0 60px #22c55e;
}

.play-animation.stolen-base .play-animation-text {
  color: #22c55e;
  text-shadow: 0 0 20px #22c55e;
}

/* Walk Animation - Neutral */
.play-animation.walk .play-animation-icon {
  color: #94a3b8;
  text-shadow: 0 0 20px #94a3b8;
}

.play-animation.walk .play-animation-text {
  color: #94a3b8;
  text-shadow: 0 0 15px #94a3b8;
}

/* Hit Animation - Orange */
.play-animation.hit .play-animation-icon {
  color: #f97316;
  text-shadow: 0 0 30px #f97316, 0 0 60px #f97316;
}

.play-animation.hit .play-animation-text {
  color: #f97316;
  text-shadow: 0 0 20px #f97316;
}


/* ============================================
   PLAY TEXT MODAL (for turnovers)
   Shows full play text with highlighted uppercase words
   Positioned at bottom of card, not full overlay
   ============================================ */
.play-text-modal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 80%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  padding: clamp(15px, 4vmin, 40px);
  padding-top: clamp(30px, 8vmin, 80px);
}

.play-text-modal.visible {
  opacity: 1;
}

.play-text-modal.fade-out {
  opacity: 0;
  transition: opacity 1.5s ease-out;
}

.play-text-modal-content {
  max-width: 95%;
  text-align: center;
}

.play-text-modal-body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(18px, 4vmin, 32px);
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
}

/* Highlighted text (uppercase words like player names) */
.play-text-highlight {
  color: #fbbf24;
  font-weight: 700;
  text-shadow: 0 0 15px rgba(251, 191, 36, 0.6), 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Responsive sizing for smaller grids */
.fullscreen-grid.grid-6 .play-text-modal-body,
.fullscreen-grid.grid-7 .play-text-modal-body,
.fullscreen-grid.grid-8 .play-text-modal-body {
  font-size: clamp(12px, 2.5vmin, 20px);
  line-height: 1.4;
}

.fullscreen-grid.grid-6 .play-text-modal,
.fullscreen-grid.grid-7 .play-text-modal,
.fullscreen-grid.grid-8 .play-text-modal {
  padding: clamp(8px, 2vmin, 20px);
  padding-top: clamp(20px, 5vmin, 50px);
}

/* ============================================
   SPECIAL TEAMS ANIMATIONS (Kickoff/Punt)
   Field visualizer animations
   ============================================ */

/* State during special teams animation - hide scrimmage line styling */
.playing-field.special-teams-active .ball-indicator {
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
}

/* Make ball larger during flight */
.playing-field.special-teams-active .ball-indicator::before {
  font-size: clamp(18px, 4vmin, 32px) !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(251, 191, 36, 0.6));
}

/* Hide first down line during special teams */
.playing-field.special-teams-active .first-down-line {
  opacity: 0 !important;
  transition: opacity 0.3s ease-out;
}

/* Label for KICKOFF/PUNT/TOUCHBACK/FAIR CATCH */
.special-teams-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0.95) 100%);
  color: #000;
  font-size: clamp(10px, 2.5vmin, 18px);
  font-weight: 900;
  padding: clamp(4px, 1vmin, 8px) clamp(8px, 2vmin, 16px);
  border-radius: clamp(4px, 0.8vmin, 8px);
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(251, 191, 36, 0.3);
  animation: specialTeamsLabelFade 2s ease-in-out forwards;
  pointer-events: none;
}

@keyframes specialTeamsLabelFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}

/* Grid-responsive special teams label sizing */
.fullscreen-grid.grid-5 .special-teams-label,
.fullscreen-grid.grid-6 .special-teams-label {
  font-size: clamp(8px, 2vmin, 14px);
  padding: clamp(3px, 0.8vmin, 6px) clamp(6px, 1.5vmin, 12px);
}

.fullscreen-grid.grid-7 .special-teams-label,
.fullscreen-grid.grid-8 .special-teams-label {
  font-size: clamp(6px, 1.5vmin, 10px);
  padding: clamp(2px, 0.5vmin, 4px) clamp(4px, 1vmin, 8px);
}