/* A body-level dialog presents the saved evolution; the caller can cancel on navigation. */
.creature-evolution-dialog{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#090f1d;color:#f5efdc;overflow:auto;overscroll-behavior:contain;z-index:1000;font-family:var(--sans,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif)}
.creature-evolution-dialog::backdrop{background:#070b14}
.creature-evolution-dialog [hidden]{display:none!important}
.evolution-scene{position:relative;min-height:100%;display:flex;flex-direction:column;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#213049 0%,#0b1323 47%,#070d19 80%);--evolution-accent:#74f3dd;--evolution-secondary:#c1f66b}
.evolution-scene::before{position:absolute;inset:0;content:'';background-image:linear-gradient(#6daab512 1px,transparent 1px),linear-gradient(90deg,#6daab512 1px,transparent 1px);background-size:48px 48px;pointer-events:none;mask-image:linear-gradient(transparent,#000 40%,#000)}
.evolution-topline{display:flex;align-items:center;justify-content:flex-end;gap:16px;width:100%;padding:24px clamp(16px,4vw,56px);position:relative;z-index:3}

.evolution-skip,.evolution-continue{appearance:none;min-height:48px;border-radius:2px;font:700 13px/1.4 var(--display,monospace);padding:12px 20px;cursor:pointer;touch-action:manipulation}
.evolution-skip{border:1px solid #50647f;background:#132137;color:#edf3ff;box-shadow:3px 3px 0 #050a12;flex-shrink:0}
.evolution-skip:hover{border-color:var(--evolution-accent);background:#213148}
.evolution-skip:focus-visible,.evolution-continue:focus-visible{outline:3px solid var(--evolution-accent);outline-offset:5px}
.evolution-content{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;max-width:1080px;margin:0 auto;padding:12px 24px 48px}
.evolution-kicker{font:700 11px/1.6 var(--display,monospace);letter-spacing:3px;color:var(--evolution-secondary);margin:0 0 12px}
.evolution-content h2{font:800 clamp(25px,4.2vw,54px)/1.13 var(--display,monospace);letter-spacing:-1.5px;text-wrap:balance;margin:0;max-width:100%;overflow-wrap:anywhere;color:#fff3db;text-shadow:3px 3px 0 #070e1c}
.evolution-stage{position:relative;width:min(45vh,430px,80vw);width:min(45dvh,430px,80vw);aspect-ratio:1;flex-shrink:0;isolation:isolate;margin:6px auto}
.evolution-portrait{position:absolute;inset:0;display:grid;place-items:center;transform-origin:50% 80%;z-index:2}
.evolution-portrait .creature-art{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 16px 18px #03091288)}
.evolution-portrait .is-mirrored{scale:-1 1}
.evolution-portrait--to{opacity:0;visibility:hidden;transform:scale(.78)}
.evolution-platform{position:absolute;left:14%;right:14%;bottom:9%;height:4%;border:2px solid var(--evolution-accent);background:#122936;box-shadow:0 0 30px #74f3dd25;transform:perspective(160px) rotateX(45deg);opacity:.5}
.evolution-core{position:absolute;inset:17%;background:var(--evolution-accent);opacity:0;filter:blur(42px);z-index:1;transform:scale(.2)}
.evolution-ring{position:absolute;inset:20%;border:3px solid var(--evolution-accent);opacity:0;transform:rotate(45deg) scale(.7);box-shadow:0 0 30px #74f3dd18}
.evolution-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.evolution-orbit{position:absolute;left:50%;top:50%;width:min(80vw,780px);aspect-ratio:1;border:1px solid var(--evolution-accent);opacity:.11;transform:translate(-50%,-50%) rotate(45deg)}
.evolution-orbit--two{width:min(100vw,1000px);border:1px solid var(--evolution-secondary);transform:translate(-50%,-50%) rotate(22deg)}
.evolution-rays{position:absolute;inset:-40%;background:repeating-conic-gradient(from 10deg,transparent 0deg 28deg,var(--evolution-accent) 28deg 29deg,transparent 29deg 45deg);opacity:0;transform:scale(.45);mask-image:radial-gradient(transparent 17%,#000 45%,transparent 66%)}
.evolution-horizon{position:absolute;left:0;right:0;top:68%;height:1px;background:var(--evolution-accent);opacity:.16;box-shadow:0 40px 0 #74f3dd11,0 100px 0 #74f3dd0a}
.evolution-cracks{position:absolute;inset:0;width:100%;height:100%;z-index:3;stroke-linejoin:bevel;stroke-linecap:butt;opacity:0;pointer-events:none;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
.evolution-fissure{clip-path:inset(0 0 100% 0)}
.evolution-silhouette-frame{position:absolute;inset:8%;border:3px solid var(--evolution-secondary);clip-path:polygon(0 0,28% 0,28% 2%,2% 2%,2% 28%,0 28%,0 0,100% 0,100% 28%,98% 28%,98% 2%,72% 2%,72% 0,100% 0,100% 100%,72% 100%,72% 98%,98% 98%,98% 72%,100% 72%,100% 100%,0 100%,0 72%,2% 72%,2% 98%,28% 98%,28% 100%,0 100%);opacity:0}
.evolution-shards{position:absolute;inset:0;z-index:4;pointer-events:none}
.evolution-shard{position:absolute;left:calc(50% - 4px);top:calc(50% - 4px);width:8px;height:8px;background:var(--evolution-accent);box-shadow:0 0 10px #74f3dd30;opacity:0}
.evolution-shard:nth-child(3n){background:var(--evolution-secondary);width:12px;height:6px}
.evolution-status{min-height:1.7em;margin:0;color:#c2d0e5;font-size:21px;line-height:1.7;max-width:650px}
.evolution-continue{background:var(--evolution-accent);border:1px solid var(--evolution-accent);color:#0b1722;box-shadow:4px 4px 0 #314851;margin-top:22px;min-width:180px}
.evolution-continue:hover{filter:brightness(1.1)}
.evolution-art-unavailable{position:absolute;left:15%;right:15%;padding:24px;background:#142139;border:1px solid #50647f;color:#f5efdc;font:700 16px/1.6 var(--display,monospace)}
.creature-evolution-dialog[data-phase="loading"] .evolution-portrait--from{opacity:0}
.creature-evolution-dialog[data-phase="loading"] .evolution-core{opacity:.16;transform:scale(.6)}
.creature-evolution-dialog[data-phase="charge"] .evolution-core{animation:evolution-charge 1.85s ease-in both}
.creature-evolution-dialog[data-phase="charge"] .evolution-ring{animation:evolution-charge-ring 1.85s ease-in both}
.creature-evolution-dialog[data-kind="hatch"][data-phase="charge"] .evolution-portrait--from{animation:evolution-egg-rattle 1.55s steps(2,end) both}
.creature-evolution-dialog[data-kind="evolve"][data-phase="charge"] .evolution-portrait--from{animation:evolution-lift 1.85s steps(8,end) both}
.creature-evolution-dialog[data-phase="crack"] .evolution-cracks{opacity:1;animation:evolution-crack-release 1.4s steps(1,end) both}
.creature-evolution-dialog[data-phase="crack"] .evolution-fissure{animation:evolution-crack-draw 950ms steps(64,end) both}
.creature-evolution-dialog[data-phase="crack"] .evolution-portrait--from{animation:evolution-shell-release 1.4s steps(5,end) both}
.creature-evolution-dialog[data-phase="transform"] .evolution-portrait--from{animation:evolution-silhouette 1.1s ease-in both}
.creature-evolution-dialog[data-phase="transform"] .evolution-silhouette-frame{animation:evolution-frame 1.1s ease-out both}
.creature-evolution-dialog:is([data-phase="crack"],[data-phase="transform"]) .evolution-core{animation:evolution-surge 1.1s ease-out both}
.creature-evolution-dialog:is([data-phase="crack"],[data-phase="transform"]) .evolution-shard{animation:evolution-shard-burst 1.1s var(--shard-delay) ease-out both}
.creature-evolution-dialog:is([data-phase="crack"],[data-phase="transform"]) .evolution-rays{animation:evolution-ray-open 1.1s ease-out both}
.creature-evolution-dialog[data-phase="reveal"] .evolution-portrait--from{opacity:0;visibility:hidden}
.creature-evolution-dialog[data-phase="reveal"] .evolution-portrait--to{opacity:1;visibility:visible;transform:none;animation:evolution-arrival .65s steps(8,end) both}
.creature-evolution-dialog[data-phase="reveal"] .evolution-core{opacity:.18;transform:scale(1.1)}
.creature-evolution-dialog[data-phase="reveal"] .evolution-ring{opacity:.22;transform:rotate(45deg) scale(1.2)}
.creature-evolution-dialog[data-phase="reveal"] .evolution-rays{opacity:.08;transform:scale(1)}
.creature-evolution-dialog[data-paused="true"] *{animation-play-state:paused!important}
@keyframes evolution-charge{from{opacity:.05;transform:scale(.2)}to{opacity:.38;transform:scale(1.05)}}
@keyframes evolution-charge-ring{from{opacity:0;transform:rotate(45deg) scale(1.35)}to{opacity:.5;transform:rotate(135deg) scale(.75)}}
@keyframes evolution-egg-rattle{0%,15%,40%,65%,100%{transform:rotate(0) translateY(0)}20%,45%,70%,90%{transform:rotate(-4deg) translateY(-3px)}30%,55%,80%{transform:rotate(4deg) translateY(-2px)}}
@keyframes evolution-lift{from{transform:translateY(0);filter:none}to{transform:translateY(-18px);filter:drop-shadow(0 0 22px var(--evolution-accent))}}
@keyframes evolution-crack-draw{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes evolution-crack-release{0%,85%{opacity:1}100%{opacity:0}}
@keyframes evolution-shell-release{0%,75%{opacity:1;transform:scale(1)}86%{opacity:1;transform:translateY(-4px)}100%{opacity:0;transform:translateY(18px)}}
@keyframes evolution-silhouette{0%{opacity:1;filter:brightness(1);transform:translateY(-18px)}35%,65%{opacity:1;filter:brightness(0) drop-shadow(0 0 22px var(--evolution-accent));transform:translateY(-24px) scale(1.04)}100%{opacity:0;filter:brightness(0);transform:translateY(-28px) scale(.75)}}
@keyframes evolution-frame{0%{opacity:0;transform:scale(1.35)}35%,65%{opacity:.7;transform:scale(.85)}100%{opacity:0;transform:scale(1.2)}}
@keyframes evolution-surge{0%{opacity:.35;transform:scale(1)}45%{opacity:.5;transform:scale(1.3)}100%{opacity:.2;transform:scale(1.1)}}
@keyframes evolution-shard-burst{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--shard-x),var(--shard-y)) rotate(var(--shard-turn)) scale(.75)}}
@keyframes evolution-ray-open{from{opacity:0;transform:rotate(-12deg) scale(.55)}45%{opacity:.2}to{opacity:.08;transform:rotate(10deg) scale(1)}}
@keyframes evolution-arrival{0%{transform:translateY(-22px) scale(.82);opacity:0}65%{transform:translateY(4px) scale(1.035);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
.creature-evolution-dialog[data-reduced-motion="true"] *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.creature-evolution-dialog *{animation:none!important;transition:none!important}}
@media(max-width:560px){.evolution-topline{padding:16px;gap:12px}.evolution-skip{padding:10px 13px;font-size:11px}.evolution-content{padding:10px 16px 32px;justify-content:center}.evolution-kicker{font-size:9px;letter-spacing:1.5px}.evolution-content h2{font-size:clamp(25px,7vw,36px);letter-spacing:-1px}.evolution-stage{width:min(42vh,82vw,440px);width:min(42dvh,82vw,440px,calc(100dvh - 400px));margin:8px auto}.evolution-status{font-size:18.2px;max-width:90%}.evolution-continue{margin-top:18px;min-height:48px}.evolution-orbit{width:90vw}.evolution-orbit--two{width:120vw}}
/* Compact phones reserve the remaining height for the revealed name and action. */
@media(max-width:560px) and (max-height:620px){.evolution-content{padding-top:4px;padding-bottom:20px}.evolution-kicker{margin-bottom:6px}.evolution-stage{width:max(110px,min(42dvh,82vw,calc(100dvh - 370px)));margin:4px auto}.evolution-continue{margin-top:12px}}
@media(max-height:580px) and (min-width:561px){.evolution-topline{padding-top:12px;padding-bottom:8px}.evolution-content{padding-bottom:20px}.evolution-kicker{margin-bottom:4px}.evolution-content h2{font-size:30px}.evolution-stage{width:min(43dvh,300px);margin:0 auto}.evolution-continue{margin-top:10px}}
/* Shell pieces launch after the branching seam has widened. */
.creature-evolution-dialog[data-kind="hatch"][data-phase="crack"] .evolution-shard{animation-delay:calc(1.05s + var(--shard-delay));animation-timing-function:steps(6,end)}
.creature-evolution-dialog[data-kind="hatch"][data-phase="crack"] .evolution-rays{animation-delay:1.05s}