.evolution-dialog {
  width: min(640px, calc(100% - 24px));
  border: 1px solid #9be6ed66;
  border-radius: 20px;
  overflow: hidden;
  background: #102b43;
  color: #f3ffff;
  box-shadow: 0 24px 100px #04132099;
}
.evolution-dialog::backdrop { background: #071927df; backdrop-filter: blur(8px); }
.evolution-cinematic {
  position: relative;
  isolation: isolate;
  padding: 30px 24px 28px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 42%, #28647b 0, #173d55 38%, #102b43 75%);
}
.evolution-cinematic > .eyebrow { color: #b0edf1; letter-spacing: 5px; font-size: 10px; }
.evolution-stage { position: relative; height: clamp(230px, 42vw, 320px); margin: 12px 0 8px; }
.evolution-stage > .sprite {
  position: absolute;
  inset: 50% auto auto 50%;
  width: clamp(175px, 33vw, 235px);
  height: clamp(175px, 33vw, 235px);
  object-fit: contain;
  translate: -50% -50%;
  filter: drop-shadow(0 12px 16px #07182766);
}
.evolution-from { animation: evolution-transform 3.8s ease-in-out both; }
.evolution-to { animation: evolution-reveal 4.5s ease-out both; }
.evolution-halo {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 64%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #e4ffffcc, #8be7ec44 35%, transparent 68%);
  animation: evolution-bloom 4.5s ease-in-out both;
}
.evolution-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(82%, 300px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid #b9faff33;
  border-top-color: #c5fbffcc;
  border-bottom-color: #c5fbff99;
  border-radius: 50%;
  box-shadow: 0 0 25px #88dfe522, inset 0 0 25px #88dfe511;
  animation: evolution-orbit 4.5s ease-in-out both;
}
.evolution-orbit::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid #b9faff33;
  border-left-color: #c5fbff99;
  border-radius: 50%;
}
.evolution-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e4ffff;
  box-shadow: -105px -65px #bffbff, 95px -85px #e4ffff, -135px 35px #e4ffff, 130px 55px #bffbff, -40px -130px #e4ffff, 50px 120px #e4ffff, -85px 105px #bffbff, 120px -20px #e4ffff;
  animation: evolution-sparks 4.5s ease-out both;
}
.evolution-caption { min-height: 87px; }
.evolution-caption h2 { display: grid; margin: 0; font-size: clamp(22px, 4vw, 30px); line-height: 1.25; color: #f3ffff; text-wrap: balance; }
.evolution-caption h2 > span { grid-area: 1 / 1; align-self: center; }
.evolution-before-label { animation: evolution-intro 3.8s linear both; }
.evolution-after-label { animation: evolution-name 4.5s ease-out both; }
.evolution-caption p { margin: 12px 0 0; color: #b0d8e1; font-size: 13px; }
.evolution-cinematic > .button { min-width: 180px; margin-top: 16px; }
@keyframes evolution-transform {
  0%, 12% { opacity: 1; transform: scale(1); }
  38% { filter: brightness(0) invert(1) drop-shadow(0 0 14px #c5ffff); transform: scale(.92); }
  58% { transform: scale(1.12); }
  76% { opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 0 22px #c5ffff); transform: scale(.88); }
  100% { opacity: 0; filter: brightness(0) invert(1); transform: scale(1.2); }
}
@keyframes evolution-reveal {
  0%, 72% { opacity: 0; transform: scale(.75); filter: brightness(0) invert(1); }
  84% { opacity: 1; transform: scale(1.08); filter: brightness(0) invert(1) drop-shadow(0 0 22px #c5ffff); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 12px 16px #07182766); }
}
@keyframes evolution-bloom {
  0% { opacity: .15; transform: scale(.6); }
  70% { opacity: .9; transform: scale(1.3); }
  82% { opacity: 1; transform: scale(1.6); }
  100% { opacity: .3; transform: scale(1); }
}
@keyframes evolution-orbit { from { rotate: -45deg; opacity: .25; } 80% { opacity: 1; } to { rotate: 315deg; opacity: .4; } }
@keyframes evolution-sparks { 0% { opacity: 0; transform: scale(.25) rotate(-30deg); } 55% { opacity: .7; } 82% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25) rotate(30deg); } }
@keyframes evolution-intro { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evolution-name { 0%, 84% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .evolution-cinematic *, .evolution-cinematic *::after { animation: none; }
  .evolution-from, .evolution-before-label, .evolution-particles { opacity: 0; }
  .evolution-to, .evolution-after-label { opacity: 1; }
  .evolution-halo { opacity: .3; }
  .evolution-orbit { opacity: .4; }
}