/* 상태이상 연출 (js/status-fx.js) */
#stfx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
#stfx-layer > div { position: fixed; pointer-events: none; animation-duration: var(--d, 600ms); animation-fill-mode: forwards; }
#stfx-layer .has-img { background-size: contain; background-repeat: no-repeat; background-position: center; }
#stfx-layer .has-img { mix-blend-mode: screen; } /* fx 스프라이트: 검은 배경 기준 알파 → screen 블렌딩 */
#stfx-layer .has-img::before, #stfx-layer .has-img::after { display: none !important; }

/* 공통: 상태 이름 팝 */
.stfx-text { transform: translate(-50%, -50%); font-weight: 900; font-size: clamp(22px, 5vw, 44px); letter-spacing: .04em; white-space: nowrap;
  -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; animation-name: stfx-text; z-index: 2; }
.stfx-text-para { color: #fde047; text-shadow: 0 0 12px #facc15, 0 0 24px #eab308; }
.stfx-text-confuse { color: #e9d5ff; text-shadow: 0 0 12px #a855f7, 0 0 24px #7c3aed; }
.stfx-text-bleed { color: #fecaca; text-shadow: 0 0 12px #dc2626, 0 0 24px #991b1b; }
@keyframes stfx-text { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 15% { transform: translate(-50%, -60%) scale(1.5); opacity: 1; }
  35% { transform: translate(-50%, -60%) scale(1.1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -90%) scale(.6); opacity: 0; } }
.unit.stfx-pop { animation: stfx-pop .5s ease-out; }
@keyframes stfx-pop { 30% { transform: scale(1.12); filter: brightness(1.6); } }

/* 마비: 번개 */
.stfx-bolt { width: calc(var(--w) * 1.2); height: calc(var(--h) * 2.2); transform: translate(-50%, -80%); animation-name: stfx-bolt; }
.stfx-bolt:not(.has-img)::before { content: ''; position: absolute; inset: 0;
  background: #fef08a; clip-path: polygon(55% 0, 30% 48%, 50% 48%, 35% 100%, 72% 40%, 52% 40%, 70% 0);
  filter: drop-shadow(0 0 10px #facc15) drop-shadow(0 0 20px #fde047); }
@keyframes stfx-bolt { 0% { opacity: 0; transform: translate(-50%, -140%) scaleY(.4); } 15% { opacity: 1; transform: translate(-50%, -80%) scaleY(1); }
  30% { opacity: .4; } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%); } }
.stfx-screen { inset: 0; }
.stfx-flash-yellow { background: radial-gradient(circle, rgba(254,240,138,.55), rgba(250,204,21,.15) 70%); animation-name: stfx-fade; }
@keyframes stfx-fade { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.stfx-spark { width: var(--w); height: var(--h); transform: translate(-50%, -50%); animation-name: stfx-fade;
  background: radial-gradient(circle at 30% 30%, #fef08a 0 3px, transparent 4px), radial-gradient(circle at 70% 60%, #fde047 0 2px, transparent 3px), radial-gradient(circle at 50% 85%, #fff 0 2px, transparent 3px); }

/* 혼란: 소용돌이 */
.stfx-swirl { width: calc(var(--w) * 1.6); height: calc(var(--w) * 1.6); transform: translate(-50%, -50%); animation-name: stfx-swirl; border-radius: 50%; }
.stfx-swirl.small { width: var(--w); height: var(--w); }
.stfx-swirl:not(.has-img) { background: conic-gradient(from 0deg, transparent, rgba(192,132,252,.85), transparent 30%, rgba(244,114,182,.7), transparent 60%, rgba(129,140,248,.8), transparent 90%);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 22%, #000 60%, transparent 70%); mask: radial-gradient(circle, transparent 18%, #000 22%, #000 60%, transparent 70%); }
@keyframes stfx-swirl { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(720deg) scale(1.2); } }
.stfx-screen-swirl { background: radial-gradient(circle, transparent 40%, rgba(124,58,237,.35)); animation-name: stfx-screen-swirl; }
@keyframes stfx-screen-swirl { 0% { opacity: 0; transform: rotate(0) scale(1); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(25deg) scale(1.15); } }
#game.stfx-twist { animation: none; }

/* 출혈: 베기 + 핏방울 */
.stfx-slash { width: calc(var(--w) * 1.3); height: calc(var(--h) * 1.1); transform: translate(-50%, -50%); animation-name: stfx-slash; }
.stfx-slash:not(.has-img)::before, .stfx-slash:not(.has-img)::after { content: ''; position: absolute; left: -10%; right: -10%; top: 50%; height: 6px; border-radius: 50%;
  background: linear-gradient(90deg, transparent, #ef4444 20%, #fecaca 50%, #b91c1c 80%, transparent); box-shadow: 0 0 10px #dc2626; transform: rotate(-35deg); }
.stfx-slash:not(.has-img)::after { top: 38%; transform: rotate(-28deg); height: 4px; }
@keyframes stfx-slash { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 25% { opacity: 1; clip-path: inset(0 0 0 0); } 70% { opacity: 1; } 100% { opacity: 0; } }
.stfx-blood { width: 9px; height: 9px; border-radius: 50% 50% 50% 0; background: #b91c1c; box-shadow: 0 0 4px #7f1d1d; animation-name: stfx-blood; animation-timing-function: cubic-bezier(.2,.8,.4,1); }
@keyframes stfx-blood { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 30px)) scale(1); opacity: 0; } }
.stfx-edge-red { box-shadow: inset 0 0 80px 20px rgba(220,38,38,.6); animation-name: stfx-fade; }
.stfx-drip { width: 6px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #dc2626; margin-top: calc(var(--h) * .45); margin-left: var(--dx);
  animation-name: stfx-drip; animation-timing-function: ease-in; opacity: 0; }
@keyframes stfx-drip { 0% { opacity: 1; transform: translateY(0) scaleY(.5); } 100% { opacity: 0; transform: translateY(40px) scaleY(1.3); } }

/* ===== 지속 연출 ===== */
.unit .stfx-decor { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.unit.st-para > .relative > div:first-child, .unit.st-para img { filter: grayscale(.7) brightness(.85); }
.unit.st-para > .relative { animation: stfx-tremor 2.4s infinite; }
@keyframes stfx-tremor { 0%, 90%, 100% { transform: none; } 92% { transform: translate(1px, 0); } 94% { transform: translate(-1px, 1px); } 96% { transform: translate(1px, -1px); } }
.stfx-p-spark { position: absolute; top: 20%; left: 15%; width: 10px; height: 10px; background: #fde047; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px #facc15); opacity: 0; animation: stfx-p-spark 2.2s infinite; }
.stfx-p-spark.b { top: 65%; left: 75%; animation-delay: 1.1s; }
@keyframes stfx-p-spark { 0%, 80%, 100% { opacity: 0; transform: scale(.4); } 85% { opacity: 1; transform: scale(1.3); } 90% { opacity: .3; } 95% { opacity: 1; } }
.unit.stfx-jitter > .relative { animation: stfx-jitter .6s linear; }
@keyframes stfx-jitter { 0%, 100% { transform: none; } 10%, 50%, 90% { transform: translate(-3px, 1px) rotate(-1deg); } 30%, 70% { transform: translate(3px, -1px) rotate(1deg); } }

.unit.st-confuse > .relative { animation: stfx-hue 3s ease-in-out infinite; transform: rotate(-3deg); }
@keyframes stfx-hue { 0%, 100% { filter: hue-rotate(0) drop-shadow(0 0 4px #a855f7); transform: rotate(-3deg); } 50% { filter: hue-rotate(60deg) saturate(1.3) drop-shadow(0 0 8px #c084fc); transform: rotate(3deg); } }
.stfx-stars { position: absolute; left: 50%; top: -6px; width: 0; height: 0; animation: stfx-orbit 1.6s linear infinite; }
.stfx-stars i { position: absolute; font-style: normal; font-size: 11px; color: #fde68a; text-shadow: 0 0 4px #a855f7; transform: translate(-50%, -50%); }
.stfx-stars i:nth-child(1) { transform: translate(-50%, -50%) translateX(16px); }
.stfx-stars i:nth-child(2) { transform: translate(-50%, -50%) rotate(120deg) translateX(16px); }
.stfx-stars i:nth-child(3) { transform: translate(-50%, -50%) rotate(240deg) translateX(16px); }
@keyframes stfx-orbit { from { transform: scaleY(.45) rotate(0); } to { transform: scaleY(.45) rotate(360deg); } }

.unit.st-bleed > .relative { box-shadow: 0 0 0 1px rgba(220,38,38,.5), 0 4px 10px -2px rgba(220,38,38,.6); border-radius: 8px; }
.stfx-b-drip { position: absolute; bottom: 4px; left: 30%; width: 4px; height: 7px; border-radius: 50%; background: #dc2626; animation: stfx-bdrip 1.8s ease-in infinite; }
.stfx-b-drip.b { left: 65%; animation-delay: .9s; }
@keyframes stfx-bdrip { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* 디버프 아이콘 크게·맥박 */
.status-icons .st-big { display: inline-block; transform-origin: left center; animation: stfx-ipulse 1.4s ease-in-out infinite; }
.status-icons .st-big img, .status-icons img.st-asset { width: 1.4em; height: 1.4em; }
.status-icons .st-big.para { filter: drop-shadow(0 0 3px #facc15); }
.status-icons .st-big.confuse { filter: drop-shadow(0 0 3px #a855f7); }
.status-icons .st-big.bleed { filter: drop-shadow(0 0 3px #dc2626); }
@keyframes stfx-ipulse { 0%, 100% { transform: scale(1.25); } 50% { transform: scale(1.5); } }

@media (prefers-reduced-motion: reduce) {
  .unit.st-para > .relative, .unit.st-confuse > .relative, .stfx-stars, .stfx-p-spark, .stfx-b-drip, .status-icons .st-big { animation: none !important; }
}

/* ===== 도발: 방패 슬램 + 붉은 오라 ===== */
.stfx-text-taunt { color: #fee2e2; text-shadow: 0 0 12px #ef4444, 0 0 24px #b91c1c; }
.stfx-aura-burst { width: calc(var(--w) * 1.9); height: calc(var(--w) * 1.9); transform: translate(-50%, -50%); border-radius: 50%; animation-name: stfx-aura-burst; }
.stfx-aura-burst:not(.has-img) { background: radial-gradient(circle, rgba(254,202,202,.0) 25%, rgba(239,68,68,.75) 45%, rgba(185,28,28,.35) 60%, transparent 70%); }
@keyframes stfx-aura-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } }
.stfx-shield-slam { width: calc(var(--w) * .7); height: calc(var(--w) * .8); transform: translate(-50%, -50%); animation-name: stfx-shield-slam; animation-timing-function: cubic-bezier(.3,1.6,.5,1); }
#stfx-layer .stfx-shield-slam.has-img { mix-blend-mode: normal; }
.stfx-shield-slam:not(.has-img) { background: linear-gradient(160deg, #fca5a5, #dc2626 55%, #7f1d1d); clip-path: polygon(50% 0, 100% 15%, 92% 60%, 50% 100%, 8% 60%, 0 15%);
  filter: drop-shadow(0 0 10px #ef4444); }
@keyframes stfx-shield-slam { 0% { opacity: 0; transform: translate(-50%, -160%) scale(1.8); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 45% { transform: translate(-50%, -45%) scale(1.1, .9); }
  75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); } }
.stfx-pull { height: 4px; transform-origin: 0 50%; margin-top: -2px; animation-name: stfx-pull; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(239,68,68,.9) 30%, #fecaca); box-shadow: 0 0 8px #dc2626; }
.stfx-pull::after { content: ''; position: absolute; right: -6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: #fecaca; clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 0 4px #ef4444); }
@keyframes stfx-pull { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 40% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
.unit.st-taunt > .relative { border-radius: 8px; animation: stfx-taura 1.6s ease-in-out infinite; }
@keyframes stfx-taura { 0%, 100% { box-shadow: 0 0 0 1px rgba(239,68,68,.6), 0 0 8px 1px rgba(239,68,68,.45); } 50% { box-shadow: 0 0 0 2px rgba(248,113,113,.9), 0 0 18px 4px rgba(220,38,38,.7); } }
.stfx-t-emblem { position: absolute; right: 2px; bottom: 18%; width: 16px; height: 18px; animation: stfx-ipulse 1.6s ease-in-out infinite; }
.stfx-t-emblem:not(.has-img) { background: linear-gradient(160deg, #fca5a5, #dc2626 60%, #7f1d1d); clip-path: polygon(50% 0, 100% 15%, 92% 60%, 50% 100%, 8% 60%, 0 15%); filter: drop-shadow(0 0 3px #ef4444); }
.stfx-t-emblem.has-img { background-size: contain; background-repeat: no-repeat; background-position: center; }
.status-icons .st-big.taunt { filter: drop-shadow(0 0 3px #ef4444); }
@media (prefers-reduced-motion: reduce) { .unit.st-taunt > .relative, .stfx-t-emblem { animation: none !important; } }

/* ===== 지속 피해(중독·저주) / 지속 회복(재생) ===== */
.status-icons > span { position: relative; }
.st-turns { position: absolute; right: -5px; bottom: -3px; min-width: 11px; height: 11px; padding: 0 2px; border-radius: 6px; background: rgba(0,0,0,.85); color: #fff; font-size: 8px; line-height: 11px; font-weight: 900; text-align: center; font-style: normal; }
.stfx-tick { position: fixed; width: 9px; height: 9px; margin: calc(var(--h) * .1) 0 0 -4px; border-radius: 50%; pointer-events: none; opacity: 0; animation: stfx-tick-up var(--d) ease-out forwards; }
.stfx-tick.poison { background: radial-gradient(circle at 35% 35%, #ecfccb, #84cc16 55%, #6b21a8); box-shadow: 0 0 6px #a3e635; }
.stfx-tick.curse { width: 12px; height: 12px; background: radial-gradient(circle, #a855f7, #3b0764 70%, transparent); filter: blur(.5px); }
.stfx-tick.regen { width: 7px; height: 7px; background: radial-gradient(circle, #fff, #fde047 45%, #34d399); box-shadow: 0 0 8px #fde047; }
@keyframes stfx-tick-up { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2); } }
.stfx-tick-img { position: fixed; width: var(--w); height: var(--h); transform: translate(-50%, -50%); background: center/contain no-repeat; pointer-events: none; animation: stfx-fade var(--d) ease-out forwards; }
@keyframes stfx-fade { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.stfx-pulse-poison > .relative { animation: stfx-pulse-p .6s ease-out; }
.stfx-pulse-curse > .relative { animation: stfx-pulse-c .6s ease-out; }
.stfx-pulse-regen > .relative { animation: stfx-pulse-r .6s ease-out; }
@keyframes stfx-pulse-p { 0%,100% { filter: none; } 35% { filter: sepia(.6) hue-rotate(50deg) saturate(2.2) brightness(.9); } }
@keyframes stfx-pulse-c { 0%,100% { filter: none; } 35% { filter: grayscale(.4) hue-rotate(230deg) saturate(1.8) brightness(.7); } }
@keyframes stfx-pulse-r { 0%,100% { filter: none; } 35% { filter: brightness(1.35) sepia(.3) hue-rotate(40deg); } }
.unit.st-poison > .relative { box-shadow: 0 0 0 1px rgba(132,204,22,.55), 0 4px 10px -2px rgba(132,204,22,.55); border-radius: 8px; }
.unit.st-curse > .relative { box-shadow: 0 0 0 1px rgba(168,85,247,.55), 0 4px 12px -2px rgba(88,28,135,.8); border-radius: 8px; }
.unit.st-regen > .relative { box-shadow: 0 0 0 1px rgba(253,224,71,.45), 0 4px 10px -2px rgba(52,211,153,.5); border-radius: 8px; }
.stfx-bub, .stfx-spk { position: absolute; bottom: 6px; left: 28%; width: 6px; height: 6px; border-radius: 50%; animation: stfx-bub 2.2s ease-in infinite; }
.stfx-bub { background: radial-gradient(circle at 35% 35%, #ecfccb, #84cc16); }
.stfx-spk { background: radial-gradient(circle, #fff, #fde047); box-shadow: 0 0 6px #fde047; }
.stfx-bub.b, .stfx-spk.b { left: 66%; animation-delay: 1.1s; }
@keyframes stfx-bub { 0% { opacity: 0; transform: translateY(0) scale(.5); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-34px) scale(1); } }
.fx-dmg-tick { font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .stfx-bub, .stfx-spk, .stfx-pulse-poison > .relative, .stfx-pulse-curse > .relative, .stfx-pulse-regen > .relative { animation: none; } }
/* 출혈·화상 틱 */
.stfx-tick.bleed { width: 6px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #dc2626; --dy: 30px !important; }
.stfx-tick.burn { width: 6px; height: 6px; background: radial-gradient(circle, #fff7ed, #fb923c 50%, #dc2626); box-shadow: 0 0 8px #f97316; }
.stfx-pulse-bleed > .relative { animation: stfx-pulse-b .6s ease-out; }
.stfx-pulse-burn > .relative { animation: stfx-pulse-f .6s ease-out; }
@keyframes stfx-pulse-b { 0%,100% { filter: none; } 35% { filter: sepia(.5) saturate(3) hue-rotate(-30deg) brightness(.85); } }
@keyframes stfx-pulse-f { 0%,100% { filter: none; } 35% { filter: sepia(.6) saturate(2.5) hue-rotate(-15deg) brightness(1.15); } }
.unit.st-burn > .relative { box-shadow: 0 0 0 1px rgba(249,115,22,.55), 0 4px 10px -2px rgba(249,115,22,.6); border-radius: 8px; }
.stfx-emb { position: absolute; bottom: 6px; left: 30%; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, #fff7ed, #fb923c); box-shadow: 0 0 6px #f97316; animation: stfx-bub 1.8s ease-in infinite; }
.stfx-emb.b { left: 64%; animation-delay: .9s; }
@media (prefers-reduced-motion: reduce) { .stfx-emb, .stfx-pulse-bleed > .relative, .stfx-pulse-burn > .relative { animation: none; } }
/* 동결 */
.unit.st-freeze > .relative { filter: saturate(.55) brightness(1.08); box-shadow: 0 0 0 1px rgba(125,211,252,.8), 0 0 12px rgba(56,189,248,.7); border-radius: 8px; }
.stfx-ice { position: absolute; inset: 0; border-radius: 8px; pointer-events: none; background: linear-gradient(135deg, rgba(224,242,254,.35), rgba(56,189,248,.15) 40%, rgba(224,242,254,.3)), url("../img/fx/status/freeze.webp") center/70% no-repeat; box-shadow: inset 0 0 14px rgba(186,230,253,.8); }
.stfx-ice::before, .stfx-ice::after { content: "❄"; position: absolute; color: #e0f2fe; text-shadow: 0 0 6px #38bdf8; font-size: 14px; top: 18%; left: 12%; }
.stfx-ice::after { top: auto; left: auto; bottom: 22%; right: 12%; font-size: 11px; }
.stfx-tick.freeze { width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg); background: linear-gradient(135deg, #fff, #7dd3fc); box-shadow: 0 0 6px #38bdf8; }
.stfx-ice-burst { width: var(--w); height: var(--h); transform: translate(-50%, -50%); border-radius: 10px; box-shadow: inset 0 0 30px #bae6fd, 0 0 24px #38bdf8; animation: stfx-fade var(--d) ease-out forwards; }
.stfx-ice-shatter { width: var(--w); height: var(--h); transform: translate(-50%, -50%); border-radius: 10px; background: repeating-linear-gradient(60deg, transparent 0 9px, rgba(224,242,254,.7) 9px 10px), repeating-linear-gradient(-50deg, transparent 0 13px, rgba(224,242,254,.6) 13px 14px); animation: stfx-fade var(--d) ease-out forwards; }
.stfx-screen.stfx-flash-ice { position: fixed; inset: 0; background: radial-gradient(circle, transparent 40%, rgba(56,189,248,.35)); animation: stfx-fade var(--d) ease-out forwards; }
.stfx-text-freeze { color: #7dd3fc; } .stfx-text-burn { color: #fb923c; }
/* 교란(disrupt): 혼란과 같은 흔들림·별 회전, 색만 청록으로 구분 (혼란 = 보라) */
.unit.st-disrupt > .relative { animation-name: stfx-hue-dis; }
@keyframes stfx-hue-dis { 0%, 100% { filter: drop-shadow(0 0 4px #22d3ee); transform: rotate(-3deg); } 50% { filter: hue-rotate(-40deg) saturate(1.3) drop-shadow(0 0 8px #67e8f9); transform: rotate(3deg); } }
.unit.st-disrupt .stfx-stars i { color: #a5f3fc; text-shadow: 0 0 4px #0891b2; }
@media (prefers-reduced-motion: reduce) { .unit.st-disrupt > .relative { animation: none !important; } }

/* 스토리 적 턴 대본 말풍선 (game.js sayBubble) */
.ai-say{position:fixed;z-index:60;width:260px;padding:10px 14px;border-radius:16px;background:linear-gradient(180deg,#2a1020,#120a10);border:2px solid #f08aa8;color:#fff;font-weight:700;font-size:15px;line-height:1.4;box-shadow:0 8px 28px rgba(0,0,0,.7);pointer-events:none;text-align:center}
.ai-say::before{content:'';position:absolute;top:-10px;left:50%;margin-left:-9px;border:9px solid transparent;border-top:0;border-bottom-color:#f08aa8}
.ai-say-center{left:50%;top:30%;transform:translateX(-50%)}
.ai-say.pop{animation:aiSayPop .25s cubic-bezier(.2,1.6,.4,1)}
@keyframes aiSayPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}