/* ===== Easter Egg Reward ===== */
.egg-reward-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  width: 100%;
}

.egg-reward-animation {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
}

.egg-crack-left,
.egg-crack-right {
  position: absolute;
  font-size: 48px;
  top: 50%;
  transform: translateY(-50%);
  animation: eggCrack 1.5s ease-out forwards;
}

.egg-crack-left {
  left: 50%;
  clip-path: inset(0 50% 0 0);
  animation-name: eggCrackLeft;
}

.egg-crack-right {
  left: 50%;
  clip-path: inset(0 0 0 50%);
  animation-name: eggCrackRight;
}

.egg-sparkle {
  position: absolute;
  font-size: 32px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: eggSparkle 0.6s ease-out 1s forwards;
}

@keyframes eggCrackLeft {
  0% { transform: translateY(-50%) translateX(-50%) rotate(0deg); }
  60% { transform: translateY(-50%) translateX(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) translateX(calc(-50% - 20px)) rotate(-15deg); opacity: 0.5; }
}

@keyframes eggCrackRight {
  0% { transform: translateY(-50%) translateX(-50%) rotate(0deg); }
  60% { transform: translateY(-50%) translateX(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) translateX(calc(-50% + 20px)) rotate(15deg); opacity: 0.5; }
}

@keyframes eggSparkle {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
}

.egg-reward-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: #ffd700;
  text-align: center;
  margin: 0 0 12px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.egg-reward-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  border-radius: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.4);
}

.egg-badge-icon {
  font-size: 18px;
}

.egg-badge-text {
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 700;
  color: #1a1200;
}

.egg-reward-subtitle {
  font-family: var(--font-system);
  font-size: 11px;
  color: #aa8800;
  margin-bottom: 12px;
}

.egg-reward-post {
  background: #2a2000;
  border: 1px solid #554400;
  border-radius: 6px;
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #ffd700;
  line-height: 1.6;
  text-align: left;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
}

.egg-reward-post p {
  margin: 0 0 8px;
}

.egg-reward-footer {
  margin-top: 16px;
  font-family: var(--font-system);
  font-size: 11px;
  color: #aa8800;
  text-align: center;
  line-height: 1.8;
}