/* evolution.css: Blinky egg/evolution stages, aura fins and the debug panel.
   Talks to: components/blinky/stages, components/aura, ui/debug-panel.
   Update: change a stage or aura look here. */
.aura { transform-box: fill-box; transform-origin: 50% 60%; }
.aura-pulse { animation: auraPulse 2.4s ease-in-out infinite; }
@keyframes auraPulse { 0%,100% { opacity: .75; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
.aura-flame { animation: auraFlame 1.1s ease-in-out infinite; }
@keyframes auraFlame { 0%,100% { transform: scaleY(1) skewX(0); opacity: .85; } 33% { transform: scaleY(1.06) skewX(2deg); opacity: 1; } 66% { transform: scaleY(.97) skewX(-2deg); } }
.aura-spin { animation: spin 14s linear infinite; transform-box: fill-box; transform-origin: center; }
.aura-rainbow { animation: auraHue 3s linear infinite, auraPulse 2.4s ease-in-out infinite; }
@keyframes auraHue { from { filter: hue-rotate(0deg) saturate(1.3); } to { filter: hue-rotate(360deg) saturate(1.3); } }
.egg-eye { animation: twinkle2 2.2s ease-in-out infinite; }

/* island place labels fade while the wizard or Blinky stands on them (label-guard.js) */
#labelLayer > g { transition: opacity .18s; }
#labelLayer > g.covered { opacity: .08; pointer-events: none; }
#labelLayer > g.far { opacity: 0; pointer-events: none; }

#debugPanel {
  position: fixed; left: 8px; right: 8px; top: max(8px, env(safe-area-inset-top)); z-index: 70;
  background: var(--sheet); border-radius: 18px; padding: 6px 12px 10px; max-height: 80dvh; overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); border: 3px solid #7B5CFF; font-size: 14px;
}
#debugPanel[hidden] { display: none; }
#debugPanel h3 { margin: 0; font-weight: normal; font-size: 16px; direction: ltr; text-align: left; opacity: .6; }
#debugPanel .chip { font-size: 13px; padding: 2px 9px; }

@media (prefers-reduced-motion: reduce) {
  .aura-pulse, .aura-flame, .aura-spin, .egg-eye { animation: none !important; }
  .aura-rainbow { animation: none !important; filter: saturate(1.3); }
}