/* Short-lived decorations occupy only the courier/envelope stage, never message text. */
.skill-stage { position:relative; isolation:isolate; display:grid; place-items:center; min-height:150px; overflow:hidden; border-radius:24px; background:linear-gradient(135deg,#fffaf0,#f2ebfa); }
.skill-stage > :is(img,.monster-art) { height:120px; width:120px; object-fit:contain; z-index:1; }
/* The skill includes the courier's body movement, in every preview and replay. */
.skill-stage {padding-top:42px;min-height:190px;}
.skill-stage > :is(img,.monster-art) {transform-origin:50% 88%;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-iteration-count:1;}
.skill-stage[data-courier=diplo]:not([data-effect=none]) > :is(img,.monster-art) {animation-name:delivery-diplope;animation-duration:1.8s;}
.skill-stage[data-courier=slime]:not([data-effect=none]) > :is(img,.monster-art) {animation-name:delivery-forest;animation-duration:2.2s;}
[data-message-effects="off"] .skill-stage > :is(img,.monster-art),
[data-message-effects="off"] .postcard-sent .postcard-monster,
[data-message-effects="off"] .delivery-monster,
[data-message-effects="off"] .delivery-envelope {animation:none!important;}
.skill-visual { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; border-radius:inherit; }
.skill-none, [data-message-effects="off"] .skill-visual { display:none; }
.skill-visual i { position:absolute; left:25%; top:65%; width:18px; height:18px; background:#d9a34c; opacity:0; animation:skill-drift 2.4s ease-out both; border-radius:2px; clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%); }
.skill-visual i:nth-child(2n) {left:72%;top:50%;animation-delay:.12s;}
.skill-visual i:nth-child(3n) {left:35%;top:28%;animation-delay:.24s;}
.skill-visual i:nth-child(4n) {left:66%;top:76%;animation-delay:.18s;}
.skill-visual i:nth-child(5n) {left:18%;top:40%;animation-delay:.32s;}
.skill-visual i:nth-child(6n) {left:81%;top:30%;animation-delay:.1s;}
.skill-flourish i:nth-child(n+7) {width:26px;height:26px;animation-delay:.35s;}
.skill-slime i {background:#8aaf80;clip-path:none;border-radius:80% 0 80% 0;}
.skill-slime.skill-flourish i:nth-child(2n) {background:#d6a9bc;border-radius:50% 20% 50% 20%;}
.skill-fire i {background:#db9860;clip-path:none;border-radius:50%;box-shadow:0 0 12px #eebf85;}
.skill-fire.skill-flourish {animation:skill-bloom 2.6s ease-out both;}
.skill-controls {display:grid;gap:12px;margin:20px 0;padding:18px;border:1px solid #ddd0e7;border-radius:20px;}
.skill-controls select {min-height:48px;width:100%;padding:10px 12px;border:1px solid #d6c3df;border-radius:12px;background:#fffaf0;color:#503b60;font:inherit;font-size:16px;}
.effects-preference {display:flex;align-items:center;gap:12px;min-height:48px;margin:12px 0;cursor:pointer;}
.effects-preference input {width:22px;height:22px;}
.monster-card .skill-stage {width:100%;}
.monster-card .actions {justify-content:center;}
.level-label {display:block;margin:8px 0;color:#665475;font-size:14px;}
@keyframes skill-drift {0% {opacity:0;transform:translate(-14px,22px) scale(.5) rotate(-25deg);} 22% {opacity:1;transform:translate(8px,-4px) scale(1.3) rotate(15deg);} 58% {opacity:.9;} 100% {opacity:0;transform:translate(18px,-64px) scale(1.15) rotate(65deg);}}
@keyframes skill-bloom {0%,100% {background:transparent;} 35% {background:radial-gradient(ellipse at center,#f0c38c77,transparent 75%);}}
@media(prefers-reduced-motion:reduce) {
 .skill-stage > :is(img,.monster-art), .postcard-sent .postcard-monster {animation:none!important;}
 .skill-visual,.skill-visual i {animation:none!important;}
 .skill-visual i {opacity:.4;transform:none;}
 .skill-visual i:nth-child(n+5) {display:none;}
}

.delivery:not(.delivery-active) .skill-visual, .delivery:not(.delivery-active) .skill-visual i {animation-play-state:paused;}
/* A tiny hint of each monster's family before its fuller level-two trail. */
.skill-starter i{width:18px;height:18px;animation-name:skill-starter-drift;animation-duration:2s;animation-iteration-count:2}
.skill-starter.skill-fire i{box-shadow:0 0 16px 4px #eebf8580}
@keyframes skill-starter-drift{0%{opacity:0;transform:translate(-12px,18px) scale(.5) rotate(-20deg)}25%{opacity:1;transform:translate(6px,-2px) scale(1.35) rotate(10deg)}60%{opacity:.95;transform:translate(-6px,-26px) scale(1.15) rotate(35deg)}100%{opacity:0;transform:translate(14px,-52px) scale(.8) rotate(65deg)}}

/* Alternate permanent skills: particles orbit the envelope instead of trailing away. */
.skill-variant-orbit i{left:50%!important;top:50%!important;animation-name:skill-orbit!important;animation-duration:2.4s;transform-origin:center}
.skill-variant-orbit i:nth-child(2n){animation-delay:.3s}.skill-variant-orbit i:nth-child(3n){animation-delay:.6s}.skill-variant-orbit i:nth-child(4n){animation-delay:.9s}
@keyframes skill-orbit{0%{opacity:0;transform:rotate(-60deg) translateX(52px) rotate(60deg) scale(.6)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:rotate(250deg) translateX(75px) rotate(-250deg) scale(1.1)}}
.skill-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.skill-choice-card{min-width:0;padding:10px;border:1px solid #dac8e4;border-radius:18px;background:#fff8ef}.skill-choice-card h3{font-size:18px;margin:12px 0}.skill-choice-card button{width:100%;white-space:normal;margin-top:8px}.skill-choice-card .skill-stage{min-height:145px}.skill-choice-card .skill-stage>:is(img,.monster-art){width:90px;height:90px}
@media(prefers-reduced-motion:reduce){.skill-variant-orbit i{animation:none!important;transform:translateX(45px)}.skill-variant-orbit i:nth-child(2n){transform:translateX(-45px)}}

/* After sending, the skill plays over the postcard itself instead of a second stage. */
.postcard-sent .postcard-scene > .skill-visual {z-index:4;}
.postcard-sent .postcard-scene[data-courier=diplo]:not([data-effect=none]) > .postcard-monster, .postcard-sent .postcard-scene[data-courier=slime]:not([data-effect=none]) > .postcard-monster {transform-origin:50% 88%;animation:1.8s ease-in-out both delivery-diplope;}
.postcard-sent .postcard-scene[data-courier=slime]:not([data-effect=none]) > .postcard-monster {animation-name:delivery-forest;animation-duration:2.2s;}