/* ==========================================================================
   Pixel Sprites — CSS box-shadow dot art for partner stages
   Each pixel = 4px. box-shadow renders the full sprite.
   Stage 0-2 in Phase 1, Stage 3-4 in Phase 3.
   ========================================================================== */

:root {
  --pixel: 4px;
}

/* --- Container --- */
.pixel-sprite {
  width: var(--pixel);
  height: var(--pixel);
  overflow: visible;
  image-rendering: pixelated;
  position: relative;
}

.pixel-sprite--16 {
  /* 16x16 grid → actual display 64x64 */
  margin: 0 auto;
  width: var(--pixel);
  height: var(--pixel);
}

.pixel-sprite--24 {
  /* 24x24 grid → actual display 96x96 */
  margin: 0 auto;
  width: var(--pixel);
  height: var(--pixel);
}

/* === Stage 0: たまご (Egg) 16x16 === */
/* Simple cream egg with speckles on a warm background */
.sprite-egg {
  box-shadow:
    /* Row 5-6: top curve */
    calc(var(--pixel) * 6) calc(var(--pixel) * 4) 0 0 #e8d5b0,
    calc(var(--pixel) * 7) calc(var(--pixel) * 4) 0 0 #e8d5b0,
    calc(var(--pixel) * 8) calc(var(--pixel) * 4) 0 0 #e8d5b0,
    calc(var(--pixel) * 9) calc(var(--pixel) * 4) 0 0 #e8d5b0,
    calc(var(--pixel) * 5) calc(var(--pixel) * 5) 0 0 #e8d5b0,
    calc(var(--pixel) * 6) calc(var(--pixel) * 5) 0 0 #f5e6cc,
    calc(var(--pixel) * 7) calc(var(--pixel) * 5) 0 0 #f5e6cc,
    calc(var(--pixel) * 8) calc(var(--pixel) * 5) 0 0 #f5e6cc,
    calc(var(--pixel) * 9) calc(var(--pixel) * 5) 0 0 #f5e6cc,
    calc(var(--pixel) * 10) calc(var(--pixel) * 5) 0 0 #e8d5b0,
    /* Row 7-8: upper body */
    calc(var(--pixel) * 4) calc(var(--pixel) * 6) 0 0 #e8d5b0,
    calc(var(--pixel) * 5) calc(var(--pixel) * 6) 0 0 #f5e6cc,
    calc(var(--pixel) * 6) calc(var(--pixel) * 6) 0 0 #f5e6cc,
    calc(var(--pixel) * 7) calc(var(--pixel) * 6) 0 0 #faf0e0,
    calc(var(--pixel) * 8) calc(var(--pixel) * 6) 0 0 #faf0e0,
    calc(var(--pixel) * 9) calc(var(--pixel) * 6) 0 0 #f5e6cc,
    calc(var(--pixel) * 10) calc(var(--pixel) * 6) 0 0 #f5e6cc,
    calc(var(--pixel) * 11) calc(var(--pixel) * 6) 0 0 #e8d5b0,
    calc(var(--pixel) * 4) calc(var(--pixel) * 7) 0 0 #e8d5b0,
    calc(var(--pixel) * 5) calc(var(--pixel) * 7) 0 0 #f5e6cc,
    calc(var(--pixel) * 6) calc(var(--pixel) * 7) 0 0 #faf0e0,
    calc(var(--pixel) * 7) calc(var(--pixel) * 7) 0 0 #c4a882,
    calc(var(--pixel) * 8) calc(var(--pixel) * 7) 0 0 #faf0e0,
    calc(var(--pixel) * 9) calc(var(--pixel) * 7) 0 0 #faf0e0,
    calc(var(--pixel) * 10) calc(var(--pixel) * 7) 0 0 #f5e6cc,
    calc(var(--pixel) * 11) calc(var(--pixel) * 7) 0 0 #e8d5b0,
    /* Row 9-10: middle body */
    calc(var(--pixel) * 4) calc(var(--pixel) * 8) 0 0 #e8d5b0,
    calc(var(--pixel) * 5) calc(var(--pixel) * 8) 0 0 #f5e6cc,
    calc(var(--pixel) * 6) calc(var(--pixel) * 8) 0 0 #faf0e0,
    calc(var(--pixel) * 7) calc(var(--pixel) * 8) 0 0 #faf0e0,
    calc(var(--pixel) * 8) calc(var(--pixel) * 8) 0 0 #faf0e0,
    calc(var(--pixel) * 9) calc(var(--pixel) * 8) 0 0 #c4a882,
    calc(var(--pixel) * 10) calc(var(--pixel) * 8) 0 0 #f5e6cc,
    calc(var(--pixel) * 11) calc(var(--pixel) * 8) 0 0 #e8d5b0,
    calc(var(--pixel) * 4) calc(var(--pixel) * 9) 0 0 #e8d5b0,
    calc(var(--pixel) * 5) calc(var(--pixel) * 9) 0 0 #f5e6cc,
    calc(var(--pixel) * 6) calc(var(--pixel) * 9) 0 0 #f5e6cc,
    calc(var(--pixel) * 7) calc(var(--pixel) * 9) 0 0 #faf0e0,
    calc(var(--pixel) * 8) calc(var(--pixel) * 9) 0 0 #faf0e0,
    calc(var(--pixel) * 9) calc(var(--pixel) * 9) 0 0 #f5e6cc,
    calc(var(--pixel) * 10) calc(var(--pixel) * 9) 0 0 #f5e6cc,
    calc(var(--pixel) * 11) calc(var(--pixel) * 9) 0 0 #e8d5b0,
    /* Row 11-12: lower body */
    calc(var(--pixel) * 5) calc(var(--pixel) * 10) 0 0 #e8d5b0,
    calc(var(--pixel) * 6) calc(var(--pixel) * 10) 0 0 #f5e6cc,
    calc(var(--pixel) * 7) calc(var(--pixel) * 10) 0 0 #f5e6cc,
    calc(var(--pixel) * 8) calc(var(--pixel) * 10) 0 0 #f5e6cc,
    calc(var(--pixel) * 9) calc(var(--pixel) * 10) 0 0 #f5e6cc,
    calc(var(--pixel) * 10) calc(var(--pixel) * 10) 0 0 #e8d5b0,
    calc(var(--pixel) * 6) calc(var(--pixel) * 11) 0 0 #e8d5b0,
    calc(var(--pixel) * 7) calc(var(--pixel) * 11) 0 0 #e8d5b0,
    calc(var(--pixel) * 8) calc(var(--pixel) * 11) 0 0 #e8d5b0,
    calc(var(--pixel) * 9) calc(var(--pixel) * 11) 0 0 #e8d5b0;
}

/* === Stage 1: ひよこ (Chick) 16x16 === */
/* Yellow fluffy chick with orange beak and red comb */
.sprite-chick {
  box-shadow:
    /* Comb */
    calc(var(--pixel) * 7) calc(var(--pixel) * 2) 0 0 #e74c3c,
    calc(var(--pixel) * 8) calc(var(--pixel) * 2) 0 0 #e74c3c,
    calc(var(--pixel) * 8) calc(var(--pixel) * 3) 0 0 #e74c3c,
    /* Head row 4-5 */
    calc(var(--pixel) * 6) calc(var(--pixel) * 3) 0 0 #fdd835,
    calc(var(--pixel) * 7) calc(var(--pixel) * 3) 0 0 #fdd835,
    calc(var(--pixel) * 5) calc(var(--pixel) * 4) 0 0 #fdd835,
    calc(var(--pixel) * 6) calc(var(--pixel) * 4) 0 0 #ffeb3b,
    calc(var(--pixel) * 7) calc(var(--pixel) * 4) 0 0 #ffeb3b,
    calc(var(--pixel) * 8) calc(var(--pixel) * 4) 0 0 #ffeb3b,
    calc(var(--pixel) * 9) calc(var(--pixel) * 4) 0 0 #fdd835,
    /* Eyes + face row 6 */
    calc(var(--pixel) * 5) calc(var(--pixel) * 5) 0 0 #fdd835,
    calc(var(--pixel) * 6) calc(var(--pixel) * 5) 0 0 #222,
    calc(var(--pixel) * 7) calc(var(--pixel) * 5) 0 0 #ffeb3b,
    calc(var(--pixel) * 8) calc(var(--pixel) * 5) 0 0 #222,
    calc(var(--pixel) * 9) calc(var(--pixel) * 5) 0 0 #fdd835,
    /* Beak row 7 */
    calc(var(--pixel) * 5) calc(var(--pixel) * 6) 0 0 #fdd835,
    calc(var(--pixel) * 6) calc(var(--pixel) * 6) 0 0 #ffeb3b,
    calc(var(--pixel) * 7) calc(var(--pixel) * 6) 0 0 #ff9800,
    calc(var(--pixel) * 8) calc(var(--pixel) * 6) 0 0 #ffeb3b,
    calc(var(--pixel) * 9) calc(var(--pixel) * 6) 0 0 #fdd835,
    calc(var(--pixel) * 10) calc(var(--pixel) * 6) 0 0 #ff9800,
    /* Body rows 8-10 */
    calc(var(--pixel) * 4) calc(var(--pixel) * 7) 0 0 #fdd835,
    calc(var(--pixel) * 5) calc(var(--pixel) * 7) 0 0 #ffeb3b,
    calc(var(--pixel) * 6) calc(var(--pixel) * 7) 0 0 #fff176,
    calc(var(--pixel) * 7) calc(var(--pixel) * 7) 0 0 #fff176,
    calc(var(--pixel) * 8) calc(var(--pixel) * 7) 0 0 #fff176,
    calc(var(--pixel) * 9) calc(var(--pixel) * 7) 0 0 #ffeb3b,
    calc(var(--pixel) * 10) calc(var(--pixel) * 7) 0 0 #fdd835,
    /* Wing */
    calc(var(--pixel) * 3) calc(var(--pixel) * 8) 0 0 #f9a825,
    calc(var(--pixel) * 4) calc(var(--pixel) * 8) 0 0 #fdd835,
    calc(var(--pixel) * 5) calc(var(--pixel) * 8) 0 0 #fff176,
    calc(var(--pixel) * 6) calc(var(--pixel) * 8) 0 0 #fff176,
    calc(var(--pixel) * 7) calc(var(--pixel) * 8) 0 0 #fff9c4,
    calc(var(--pixel) * 8) calc(var(--pixel) * 8) 0 0 #fff176,
    calc(var(--pixel) * 9) calc(var(--pixel) * 8) 0 0 #ffeb3b,
    calc(var(--pixel) * 10) calc(var(--pixel) * 8) 0 0 #fdd835,
    calc(var(--pixel) * 11) calc(var(--pixel) * 8) 0 0 #f9a825,
    calc(var(--pixel) * 4) calc(var(--pixel) * 9) 0 0 #fdd835,
    calc(var(--pixel) * 5) calc(var(--pixel) * 9) 0 0 #ffeb3b,
    calc(var(--pixel) * 6) calc(var(--pixel) * 9) 0 0 #ffeb3b,
    calc(var(--pixel) * 7) calc(var(--pixel) * 9) 0 0 #fff176,
    calc(var(--pixel) * 8) calc(var(--pixel) * 9) 0 0 #ffeb3b,
    calc(var(--pixel) * 9) calc(var(--pixel) * 9) 0 0 #ffeb3b,
    calc(var(--pixel) * 10) calc(var(--pixel) * 9) 0 0 #fdd835,
    /* Belly + feet rows 11-12 */
    calc(var(--pixel) * 5) calc(var(--pixel) * 10) 0 0 #fdd835,
    calc(var(--pixel) * 6) calc(var(--pixel) * 10) 0 0 #fdd835,
    calc(var(--pixel) * 7) calc(var(--pixel) * 10) 0 0 #ffeb3b,
    calc(var(--pixel) * 8) calc(var(--pixel) * 10) 0 0 #fdd835,
    calc(var(--pixel) * 9) calc(var(--pixel) * 10) 0 0 #fdd835,
    /* Feet */
    calc(var(--pixel) * 5) calc(var(--pixel) * 11) 0 0 #ff9800,
    calc(var(--pixel) * 6) calc(var(--pixel) * 11) 0 0 #ff9800,
    calc(var(--pixel) * 8) calc(var(--pixel) * 11) 0 0 #ff9800,
    calc(var(--pixel) * 9) calc(var(--pixel) * 11) 0 0 #ff9800;
}

/* === Stage 2: わかどり (Young Bird) 16x16 === */
/* Blue-grey young falcon with sharper features */
.sprite-youngbird {
  box-shadow:
    /* Head crest */
    calc(var(--pixel) * 7) calc(var(--pixel) * 1) 0 0 #546e7a,
    calc(var(--pixel) * 8) calc(var(--pixel) * 1) 0 0 #455a64,
    calc(var(--pixel) * 7) calc(var(--pixel) * 2) 0 0 #607d8b,
    calc(var(--pixel) * 8) calc(var(--pixel) * 2) 0 0 #546e7a,
    calc(var(--pixel) * 9) calc(var(--pixel) * 2) 0 0 #455a64,
    /* Head rows 3-4 */
    calc(var(--pixel) * 5) calc(var(--pixel) * 3) 0 0 #546e7a,
    calc(var(--pixel) * 6) calc(var(--pixel) * 3) 0 0 #607d8b,
    calc(var(--pixel) * 7) calc(var(--pixel) * 3) 0 0 #78909c,
    calc(var(--pixel) * 8) calc(var(--pixel) * 3) 0 0 #78909c,
    calc(var(--pixel) * 9) calc(var(--pixel) * 3) 0 0 #607d8b,
    calc(var(--pixel) * 10) calc(var(--pixel) * 3) 0 0 #546e7a,
    /* Eyes row */
    calc(var(--pixel) * 5) calc(var(--pixel) * 4) 0 0 #546e7a,
    calc(var(--pixel) * 6) calc(var(--pixel) * 4) 0 0 #fff,
    calc(var(--pixel) * 7) calc(var(--pixel) * 4) 0 0 #222,
    calc(var(--pixel) * 8) calc(var(--pixel) * 4) 0 0 #78909c,
    calc(var(--pixel) * 9) calc(var(--pixel) * 4) 0 0 #222,
    calc(var(--pixel) * 10) calc(var(--pixel) * 4) 0 0 #fff,
    calc(var(--pixel) * 11) calc(var(--pixel) * 4) 0 0 #546e7a,
    /* Beak row */
    calc(var(--pixel) * 5) calc(var(--pixel) * 5) 0 0 #607d8b,
    calc(var(--pixel) * 6) calc(var(--pixel) * 5) 0 0 #78909c,
    calc(var(--pixel) * 7) calc(var(--pixel) * 5) 0 0 #78909c,
    calc(var(--pixel) * 8) calc(var(--pixel) * 5) 0 0 #ff9800,
    calc(var(--pixel) * 9) calc(var(--pixel) * 5) 0 0 #ff9800,
    calc(var(--pixel) * 10) calc(var(--pixel) * 5) 0 0 #e65100,
    calc(var(--pixel) * 11) calc(var(--pixel) * 5) 0 0 #607d8b,
    /* Body rows 6-9 */
    calc(var(--pixel) * 4) calc(var(--pixel) * 6) 0 0 #546e7a,
    calc(var(--pixel) * 5) calc(var(--pixel) * 6) 0 0 #78909c,
    calc(var(--pixel) * 6) calc(var(--pixel) * 6) 0 0 #90a4ae,
    calc(var(--pixel) * 7) calc(var(--pixel) * 6) 0 0 #b0bec5,
    calc(var(--pixel) * 8) calc(var(--pixel) * 6) 0 0 #b0bec5,
    calc(var(--pixel) * 9) calc(var(--pixel) * 6) 0 0 #90a4ae,
    calc(var(--pixel) * 10) calc(var(--pixel) * 6) 0 0 #78909c,
    calc(var(--pixel) * 11) calc(var(--pixel) * 6) 0 0 #546e7a,
    /* Wing L */
    calc(var(--pixel) * 3) calc(var(--pixel) * 7) 0 0 #455a64,
    calc(var(--pixel) * 4) calc(var(--pixel) * 7) 0 0 #607d8b,
    calc(var(--pixel) * 5) calc(var(--pixel) * 7) 0 0 #90a4ae,
    calc(var(--pixel) * 6) calc(var(--pixel) * 7) 0 0 #b0bec5,
    calc(var(--pixel) * 7) calc(var(--pixel) * 7) 0 0 #cfd8dc,
    calc(var(--pixel) * 8) calc(var(--pixel) * 7) 0 0 #b0bec5,
    calc(var(--pixel) * 9) calc(var(--pixel) * 7) 0 0 #90a4ae,
    calc(var(--pixel) * 10) calc(var(--pixel) * 7) 0 0 #607d8b,
    calc(var(--pixel) * 11) calc(var(--pixel) * 7) 0 0 #455a64,
    /* Wing R + body */
    calc(var(--pixel) * 2) calc(var(--pixel) * 8) 0 0 #37474f,
    calc(var(--pixel) * 3) calc(var(--pixel) * 8) 0 0 #546e7a,
    calc(var(--pixel) * 4) calc(var(--pixel) * 8) 0 0 #78909c,
    calc(var(--pixel) * 5) calc(var(--pixel) * 8) 0 0 #90a4ae,
    calc(var(--pixel) * 6) calc(var(--pixel) * 8) 0 0 #b0bec5,
    calc(var(--pixel) * 7) calc(var(--pixel) * 8) 0 0 #cfd8dc,
    calc(var(--pixel) * 8) calc(var(--pixel) * 8) 0 0 #b0bec5,
    calc(var(--pixel) * 9) calc(var(--pixel) * 8) 0 0 #90a4ae,
    calc(var(--pixel) * 10) calc(var(--pixel) * 8) 0 0 #78909c,
    calc(var(--pixel) * 11) calc(var(--pixel) * 8) 0 0 #546e7a,
    calc(var(--pixel) * 12) calc(var(--pixel) * 8) 0 0 #37474f,
    /* Belly */
    calc(var(--pixel) * 5) calc(var(--pixel) * 9) 0 0 #607d8b,
    calc(var(--pixel) * 6) calc(var(--pixel) * 9) 0 0 #b0bec5,
    calc(var(--pixel) * 7) calc(var(--pixel) * 9) 0 0 #cfd8dc,
    calc(var(--pixel) * 8) calc(var(--pixel) * 9) 0 0 #cfd8dc,
    calc(var(--pixel) * 9) calc(var(--pixel) * 9) 0 0 #b0bec5,
    calc(var(--pixel) * 10) calc(var(--pixel) * 9) 0 0 #607d8b,
    /* Tail + lower */
    calc(var(--pixel) * 5) calc(var(--pixel) * 10) 0 0 #546e7a,
    calc(var(--pixel) * 6) calc(var(--pixel) * 10) 0 0 #78909c,
    calc(var(--pixel) * 7) calc(var(--pixel) * 10) 0 0 #90a4ae,
    calc(var(--pixel) * 8) calc(var(--pixel) * 10) 0 0 #78909c,
    calc(var(--pixel) * 9) calc(var(--pixel) * 10) 0 0 #546e7a,
    /* Feet */
    calc(var(--pixel) * 5) calc(var(--pixel) * 11) 0 0 #ff9800,
    calc(var(--pixel) * 6) calc(var(--pixel) * 11) 0 0 #ff9800,
    calc(var(--pixel) * 8) calc(var(--pixel) * 11) 0 0 #ff9800,
    calc(var(--pixel) * 9) calc(var(--pixel) * 11) 0 0 #ff9800;
}

/* === Partner Animations === */

/* Idle: gentle bounce */
@keyframes partner-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Correct: jump + squash/stretch */
@keyframes partner-correct {
  0%   { transform: translateY(0) scaleY(1); }
  20%  { transform: translateY(2px) scaleY(0.85) scaleX(1.15); }
  50%  { transform: translateY(-16px) scaleY(1.1) scaleX(0.95); }
  80%  { transform: translateY(0) scaleY(0.95); }
  100% { transform: translateY(0) scaleY(1); }
}

/* Incorrect: head tilt (wondering) */
@keyframes partner-incorrect {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-12deg); }
  70%      { transform: rotate(-8deg); }
}

/* Evolution: flash + scale */
@keyframes partner-evolve-out {
  0%   { transform: scale(1); opacity: 1; filter: brightness(1); }
  40%  { transform: scale(1.1); opacity: 1; filter: brightness(3); }
  100% { transform: scale(0.5); opacity: 0; filter: brightness(5); }
}

@keyframes partner-evolve-in {
  0%   { transform: scale(0.3); opacity: 0; filter: brightness(3); }
  50%  { transform: scale(1.2); opacity: 1; filter: brightness(1.5); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}

/* Star particle for correct answer */
@keyframes star-particle {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* Utility classes */
.partner-idle {
  animation: partner-idle 2s ease-in-out infinite;
}

.partner-correct {
  animation: partner-correct 600ms ease-out;
}

.partner-incorrect {
  animation: partner-incorrect 400ms ease-in-out;
}

.partner-evolve-out {
  animation: partner-evolve-out 700ms ease-in forwards;
}

.partner-evolve-in {
  animation: partner-evolve-in 800ms ease-out forwards;
}

/* Star particles container */
.partner-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.partner-star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffd54f;
  border-radius: 50%;
  animation: star-particle 600ms ease-out forwards;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .partner-idle,
  .partner-correct,
  .partner-incorrect,
  .partner-evolve-out,
  .partner-evolve-in,
  .partner-star {
    animation: none !important;
  }
}