/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Reset and base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #eef2ff 0%, #f3e8ff 50%, #fce7f3 100%);
  padding: 1rem;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* App container */
#app {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loading state */
#loading {
  text-align: center;
}

.loading-spinner {
  animation: spin 1s linear infinite;
  border-radius: 50%;
  height: 3rem;
  width: 3rem;
  border: 2px solid transparent;
  border-bottom: 2px solid #2563eb;
  margin: 0 auto 1rem;
}

.loading-text {
  color: #6b7280;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Main quiz container */
.quiz-container {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1.5rem;
  max-width: 57.2rem;
  width: 100%;
}


/* Header */
.quiz-header {
  text-align: center;
  margin-bottom: 1.25rem;
}

.quiz-title {
  font-size: 1.875rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 0.5rem;
  font-family: 'Poppins', sans-serif;
}

.quiz-description {
  color: #6b7280;
}

/* Grid layout for tiles */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 334px);
  gap: 0.9375rem;
  margin-bottom: 2rem;
  align-items: start;
  position: relative;
  overflow: visible;
  justify-content: center;
}

/* Tile styles */
.tile-square {
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 260px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
  text-align: center;
  transition: all 0.3s ease-in-out;
  overflow: visible;
}

.tile-content {
  position: relative;
  z-index: 3;
  color: #1f2937;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem; /* default fallback */
  text-align: center;
  word-wrap: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 1.4;
  padding: 0.5rem;
  width: 100%;
  height: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow: visible;
}

/* Color schemes for tiles - all tiles now have white background */
.tile-sage { background: #ffffff; }
.tile-pearl { background: #ffffff; }
.tile-lavender { background: #ffffff; }
.tile-sky { background: #ffffff; }
.tile-mint { background: #ffffff; }
.tile-peach { background: #ffffff; }
.tile-blush { background: #ffffff; }
.tile-lemon { background: #ffffff; }
.tile-seafoam { background: #ffffff; }
.tile-coral { background: #ffffff; }

/* White background for tiles containing images */
.tile-has-image {
  background: #ffffff !important;
  padding: 0.2rem !important; /* Reduced padding for image tiles */
}

/* Reduce padding for tile-content when it contains an image */
.tile-has-image .tile-content {
  padding: 0 !important; /* Remove additional padding for image content */
}

/* Blue border for correct answer highlight */
.correct-answer-highlight {
  border: 4px solid #3b82f6 !important;
  animation: blue-glow 1s ease-in-out infinite alternate;
}

@keyframes blue-glow {
  0% { 
    border-color: #3b82f6;
    box-shadow: 0 0 0 rgba(59, 130, 246, 0.4);
  }
  100% { 
    border-color: #60a5fa;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
  }
}

/* Explanation arrows */
.explanation-arrow {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 101;
}

/* Arrow for explanation-0 (left of top-left tile) - points right */
.explanation-arrow-0 {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid rgba(255, 255, 255, 0.95);
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

/* Arrow for explanation-1 (right of top-right tile) - points left */
.explanation-arrow-1 {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 20px solid rgba(255, 255, 255, 0.95);
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.1));
}

/* Arrow for explanation-2 (left of bottom-left tile) - points right */
.explanation-arrow-2 {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid rgba(255, 255, 255, 0.95);
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

/* Arrow for explanation-3 (right of bottom-right tile) - points left */
.explanation-arrow-3 {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 20px solid rgba(255, 255, 255, 0.95);
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.1));
}

/* Show answer button */
.show-answer-btn {
  background: #ffffff;
  color: #1f2937;
  font-weight: bold;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #d1d5db;
  transition: all 0.3s ease-in-out;
  transform: scale(1);
  cursor: pointer;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: calc(334px + 0.9375rem + 334px);
  margin: 0 auto;
}

.show-answer-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.show-answer-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.eye-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Button container */
.button-container {
  text-align: center;
}

/* Explanation boxes - 4 predefined positions */
.explanation-box {
  position: absolute;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 0.5rem;
  border: 2px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 100;
  min-width: 250px;
  max-width: 400px;
  min-height: 150px;
  width: auto;
  height: auto;
  animation: explanation-appear 0.5s ease-out forwards;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Position 0: Left of top-left tile */
.explanation-0 {
  right: calc(100% + 1.5rem);
  top: 0;
}

/* Position 1: Right of top-right tile */
.explanation-1 {
  left: calc(100% + 1.5rem);
  top: 0;
}

/* Position 2: Left of bottom-left tile */
.explanation-2 {
  right: calc(100% + 1.5rem);
  bottom: 0;
}

/* Position 3: Right of bottom-right tile */
.explanation-3 {
  left: calc(100% + 1.5rem);
  bottom: 0;
}

@keyframes explanation-appear {
  from { 
    opacity: 0; 
    transform: scale(0.8); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}

.answer-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 1rem;
  text-align: center;
}

.explanation-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.explanation-text {
  font-size: 1rem;
  line-height: 1.5;
  color: #374151;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
  text-align: center;
}

.answer-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.answer-label {
  font-weight: 600;
  color: #1f2937;
  flex-shrink: 0;
}

.answer-text {
  color: #374151;
  flex: 1;
}

/* Fraction rendering */
.fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0.25em;
}

.fraction-num, 
.fraction-den {
  font-size: 1rem;
  line-height: 1;
}

.fraction-bar {
  border-top: 1.5px solid #222;
  width: 100%;
  min-width: 1.2em;
  margin: 0.1em 0 0.1em 0;
}

/* Responsive design */
@media (max-width: 640px) {
  body {
    padding: 0.5rem;
  }
  
  .quiz-container {
    padding: 1.5rem;
    max-width: calc(54.6rem * 0.9);
  }
  
  .quiz-title {
    font-size: 1.5rem;
  }
  
  .tiles-grid {
    gap: 0.46875rem;
    grid-template-columns: repeat(2, 293px);
  }
  
  .tile-square {
    padding: 0.6rem;
    min-height: 230px;
  }
  
  .tile-content {
    /* font-size defined by character-based classes */
    padding: 0.25rem;
    line-height: 1.3;
  }
  
  /* Mobile character-based font sizing (scaled down) */
  .tile-content.extra-large-text {
    font-size: 2.5rem !important;   /* ~40px on mobile */
    line-height: 1.1 !important;
  }

  .tile-content.very-large-text {
    font-size: 2rem !important;     /* ~32px on mobile */
    line-height: 1.15 !important;
  }

  .tile-content.large-text {
    font-size: 1.5rem !important;   /* ~24px on mobile */
    line-height: 1.2 !important;
  }

  .tile-content.medium-text {
    font-size: 1.25rem !important;  /* ~20px on mobile */
    line-height: 1.25 !important;
  }

  .tile-content.small-text {
    font-size: 1rem !important;     /* ~16px on mobile */
    line-height: 1.3 !important;
  }

  .tile-content.extra-small-text {
    font-size: 0.75rem !important; /* ~12px on mobile */
    line-height: 1.3 !important;
  }
  
  .tile-content .latex-image {
    max-width: 95%;
    max-height: 95%;
  }
  
  /* Even less padding for image tiles on mobile */
  .tile-has-image {
    padding: 0.15rem !important;
  }
  
  .tile-content table {
    /* font-size inherited from character-based classes */
  }
  
  .tile-content .katex,
  .tile-content .katex-display {
    /* font-size inherited from character-based classes */
  }
  
  /* Explanation boxes responsive */
  .explanation-box {
    min-width: 180px;
    max-width: 250px;
    min-height: 100px;
    padding: 1rem;
  }
  
  .explanation-0,
  .explanation-2 {
    right: calc(100% + 1rem);
  }
  
  .explanation-1,
  .explanation-3 {
    left: calc(100% + 1rem);
  }
  
  .explanation-text {
    font-size: 0.9rem;
    line-height: 1.4;
  }
  
  .show-answer-btn {
    width: calc(293px + 0.46875rem + 293px);
  }
}

/* Error state */
.error-container {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
}

.error-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #991b1b;
  margin-bottom: 0.5rem;
}

.error-message {
  color: #dc2626;
}

/* Interactive tile styling */
.tile-square {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tile-square:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Character-based responsive text sizing */
/* 1-3 characters: Extra Large */
.tile-content.extra-large-text {
  font-size: 3.5rem !important;   /* ~56px */
  line-height: 1.1 !important;
  font-weight: 600 !important;
}

/* 4-6 characters: Very Large */
.tile-content.very-large-text {
  font-size: 2.75rem !important;  /* ~44px */
  line-height: 1.15 !important;
  font-weight: 500 !important;
}

/* 7-12 characters: Large */
.tile-content.large-text {
  font-size: 2.125rem !important; /* ~34px */
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

/* 13-20 characters: Medium */
.tile-content.medium-text {
  font-size: 1.625rem !important; /* ~26px */
  line-height: 1.25 !important;
}

/* 21-35 characters: Small */
.tile-content.small-text {
  font-size: 1.25rem !important;  /* ~20px */
  line-height: 1.3 !important;
}

/* 36+ characters: Extra Small */
.tile-content.extra-small-text {
  font-size: 0.9rem !important;     /* ~14.4px */
  line-height: 1.3 !important;
}

/* LaTeX image and error styling */
.latex-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Specific styling for content within tiles */
.tile-content .latex-image {
  max-width: 95%;
  max-height: 95%;
  width: auto;
  height: auto;
}

/* Table styling within tiles */
.tile-content table {
  max-width: 100%;
  max-height: 100%;
  /* font-size inherited from character-based classes */
  border-collapse: collapse;
  margin: 0 auto;
}

.tile-content table td,
.tile-content table th {
  padding: 0.25rem 0.5rem;
  border: 1px solid #d1d5db;
  text-align: center;
}

/* Math expressions in tiles */
.tile-content .katex-display {
  margin: 0.25rem 0;
  /* font-size inherited from character-based classes */
}

.tile-content .katex {
  /* font-size inherited from character-based classes */
}

.latex-error {
  color: #dc2626;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
  padding: 0.5rem;
  margin: 0.25rem 0;
  font-size: 0.875rem;
}

/* Confetti animation */
#confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1000;
}

.confetti-overlay {
  position: relative;
  width: 100%;
  height: 100%;
}

.confetti-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: #22c55e;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  animation: confetti-message 3s ease-out;
}

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

.confetti {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 10px;
  background: #22c55e;
  animation: confetti-fall 2.5s linear infinite;
}

.confetti-fast {
  animation: confetti-fall-fast 1.8s linear infinite;
}

.confetti:nth-child(2n) { background: #3b82f6; animation-delay: 0.1s; left: 10%; }
.confetti:nth-child(3n) { background: #f59e0b; animation-delay: 0.2s; left: 20%; }
.confetti:nth-child(4n) { background: #ef4444; animation-delay: 0.3s; left: 30%; }
.confetti:nth-child(5n) { background: #8b5cf6; animation-delay: 0.4s; left: 40%; }
.confetti:nth-child(6n) { background: #06b6d4; animation-delay: 0.5s; left: 50%; }
.confetti:nth-child(7n) { background: #10b981; animation-delay: 0.6s; left: 60%; }
.confetti:nth-child(8n) { background: #f97316; animation-delay: 0.7s; left: 70%; }
.confetti:nth-child(9n) { background: #ec4899; animation-delay: 0.8s; left: 80%; }
.confetti:nth-child(10n) { background: #6366f1; animation-delay: 0.9s; left: 90%; }

/* Star confetti - extended definitions */
.confetti-star {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid;
  position: relative;
  transform-origin: center;
}

.confetti-star:before {
  content: '';
  position: absolute;
  left: -5px;
  top: 2px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid inherit;
}

.confetti-star:nth-child(11n) { border-bottom-color: #f97316; animation-delay: 0.3s; left: 15%; }
.confetti-star:nth-child(13n) { border-bottom-color: #06b6d4; animation-delay: 0.7s; left: 35%; }
.confetti-star:nth-child(17n) { border-bottom-color: #8b5cf6; animation-delay: 1.1s; left: 55%; }
.confetti-star:nth-child(19n) { border-bottom-color: #ef4444; animation-delay: 1.5s; left: 75%; }
.confetti-star:nth-child(23n) { border-bottom-color: #fef3c7; animation-delay: 1.9s; left: 76%; }
.confetti-star:nth-child(25n) { border-bottom-color: #fde68a; animation-delay: 2.3s; left: 92%; }



/* Realistic Firework effects */
.firework-burst-center {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  animation: firework-center-burst 0.8s ease-out forwards;
}

.firework-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
  animation: firework-particle-burst 2s ease-out forwards;
  transform-origin: center;
}

@keyframes firework-center-burst {
  0% {
    opacity: 1;
    transform: scale(0.1);
    background: radial-gradient(circle, white 0%, var(--firework-color, gold) 100%);
    box-shadow: 0 0 20px var(--firework-color, gold);
  }
  10% {
    opacity: 1;
    transform: scale(3);
    background: radial-gradient(circle, white 0%, var(--firework-color, gold) 50%, transparent 100%);
    box-shadow: 0 0 40px var(--firework-color, gold);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
    background: transparent;
    box-shadow: 0 0 0px var(--firework-color, gold);
  }
}

@keyframes firework-particle-burst {
  0% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    background: var(--particle-color, gold);
    box-shadow: 0 0 6px var(--particle-color, gold);
  }
  20% {
    opacity: 1;
    transform: 
      translateX(calc(cos(var(--angle, 0deg)) * var(--distance, 100px)))
      translateY(calc(sin(var(--angle, 0deg)) * var(--distance, 100px)))
      scale(1.2);
    background: var(--particle-color, gold);
    box-shadow: 0 0 10px var(--particle-color, gold);
  }
  40% {
    opacity: 0.8;
    transform: 
      translateX(calc(cos(var(--angle, 0deg)) * var(--distance, 100px) * 1.2))
      translateY(calc(sin(var(--angle, 0deg)) * var(--distance, 100px) * 1.2 + 20px))
      scale(0.9);
  }
  70% {
    opacity: 0.4;
    transform: 
      translateX(calc(cos(var(--angle, 0deg)) * var(--distance, 100px) * 1.1))
      translateY(calc(sin(var(--angle, 0deg)) * var(--distance, 100px) * 1.1 + 60px))
      scale(0.6);
  }
  100% {
    opacity: 0;
    transform: 
      translateX(calc(cos(var(--angle, 0deg)) * var(--distance, 100px) * 0.8))
      translateY(calc(sin(var(--angle, 0deg)) * var(--distance, 100px) * 0.8 + 100px))
      scale(0.2);
    background: transparent;
    box-shadow: 0 0 0px var(--particle-color, gold);
  }
}

@keyframes confetti-fall {
  0% { 
    transform: translateY(-100vh) rotateZ(0deg) rotateX(0deg) rotateY(0deg); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(100vh) rotateZ(720deg) rotateX(360deg) rotateY(180deg); 
    opacity: 0; 
  }
}

@keyframes confetti-fall-fast {
  0% { 
    transform: translateY(-100vh) rotateZ(0deg) rotateX(0deg) rotateY(0deg); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(100vh) rotateZ(1080deg) rotateX(540deg) rotateY(270deg); 
    opacity: 0; 
  }
}

@keyframes confetti-fall-medium {
  0% { 
    transform: translateY(-100vh) rotateZ(0deg) rotateX(0deg) rotateY(0deg); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(100vh) rotateZ(900deg) rotateX(450deg) rotateY(225deg); 
    opacity: 0; 
  }
}

/* Answer feedback styles */
.incorrect-answer {
  border: 4px solid #dc2626 !important;
  animation: incorrect-pulse 0.5s ease-in-out 3;
}

.correct-answer {
  border: 4px solid #16a34a !important;
  animation: correct-glow 0.6s ease-in-out 2;
}

@keyframes incorrect-pulse {
  0%, 100% { 
    border-color: #dc2626;
    box-shadow: 0 0 0 rgba(220, 38, 38, 0.4);
  }
  50% { 
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
  }
}

@keyframes correct-glow {
  0%, 100% { 
    border-color: #16a34a;
    box-shadow: 0 0 0 rgba(22, 163, 74, 0.4);
  }
  50% { 
    border-color: #22c55e;
    box-shadow: 0 0 25px rgba(22, 163, 74, 0.8);
  }
}

.incorrect-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: #dc2626;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  animation: incorrect-message 2s ease-out;
}

.correct-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.5rem;
  font-weight: bold;
  color: #16a34a;
  text-shadow: 
    2px 2px 0px #15803d,
    4px 4px 0px #166534,
    6px 6px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  animation: correct-message 2s ease-out;
  filter: drop-shadow(0 0 15px rgba(22, 163, 74, 0.8));
}

@keyframes incorrect-message {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-5deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(2deg); }
  40% { transform: translate(-50%, -50%) scale(1.05) rotate(-1deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

@keyframes correct-message {
  0% { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.3); 
    filter: drop-shadow(0 0 0px rgba(22, 163, 74, 0));
  }
  25% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1.2); 
    filter: drop-shadow(0 0 20px rgba(22, 163, 74, 1));
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.1); 
    filter: drop-shadow(0 0 25px rgba(22, 163, 74, 0.9));
  }
  100% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
    filter: drop-shadow(0 0 15px rgba(22, 163, 74, 0.6));
  }
}