/* Easter egg styles: yellow-duo. Moved verbatim out of static/app.css (egg rebuild); linked right after app.css in index.html. */
/* ================================================================
   Pokémon Yellow Duo egg — Red + Pikachu walk-across, namespaced cy-*.
   Overworld sideways-walk spritesheet (2 frames of 64×64 = 128×64 each).
   ================================================================ */

/* Yellow Duo walk-across — Red (leading) + Pikachu (trailing).
   2-frame sprite: Frame A = original sideways pose.
   Frame B = body tile same, leg tile horizontally flipped (Gen 1 GB technique). */
.cy-duo-wrap {
  position: fixed;
  left: 0;
  bottom: 60px;
  z-index: 8100; /* above maint-preview overlay (8000) and DEV banner (4000) */
  pointer-events: none;
  display: flex;
  animation: cy-duo-slide 8s linear forwards;
  animation-play-state: paused; /* JS adds .cy-duo-go when audio is playing */
}

.cy-duo-wrap:not(.cy-duo-go) .cy-red,
.cy-duo-wrap:not(.cy-duo-go) .cy-pika { animation-play-state: paused; }

.cy-duo-wrap.cy-duo-go { animation-play-state: running; }

@keyframes cy-duo-slide {
  from { transform: translateX(-200px); }
  to   { transform: translateX(110vw); }
}

.cy-duo-inner {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  /* no scaleX — sprites face RIGHT in the PNG (flipped once from the GIF walk cycle) */
}

.cy-red, .cy-pika {
  display: block;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* Red: LOCKED 2026-10-21 — do not regenerate yellow_red_walk.png or retune this sheet */
.cy-red {
  background-size: 128px 64px;
  background-image: url('/static/easter/yellow_red_walk.png');
  animation: cy-step 0.28s steps(2, end) infinite;
}

@keyframes cy-step {
  from { background-position: 0 0; }
  to   { background-position: -128px 0; }
}

/* Pikachu: LOCKED 2026-10-21 — do not regenerate yellow_pikachu_walk.png; 2px nudge aligns feet with Red */
.cy-pika {
  background-size: 128px 64px;
  background-image: url('/static/easter/yellow_pikachu_walk.png');
  animation: cy-step 0.28s steps(2, end) infinite;
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  .cy-duo-wrap { display: none; }
}