/* ===== 전투 화면 부드럽게 1차 (보이는 것만 · 전투 로직·속도 그대로) ===== */
/* #1 잔상 HP 바: 빨간 바가 먼저 줄고, 밝은 잔상이 잠깐 뒤 따라 줄어듦 */
.hp-bar { position: relative; }
.hp-bar .hp-fill, .hud-hp > [id$="-hpbar"] { position: relative; z-index: 1; }
.hp-ghost { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(254, 240, 138, .75); border-radius: inherit; transition: width .45s ease-out .3s; pointer-events: none; }
/* #3 새 카드 등장: 위에서 살짝 떨어지며 통통 */
/* #5 턴 배너: 가운데로 스윽 지나감 (누르기 막지 않음) */
#turn-banner { position: fixed; left: 0; right: 0; top: 42%; z-index: 45; pointer-events: none; display: flex; justify-content: center; animation: tbIn .62s ease-in-out forwards; }
#turn-banner span { padding: 8px 40px; font-weight: 900; font-size: 22px; letter-spacing: .1em; color: #fff; text-shadow: 0 2px 6px #000;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, .85) 20%, rgba(16, 185, 129, .85) 80%, transparent); }
#turn-banner.ai span { background: linear-gradient(90deg, transparent, rgba(220, 38, 38, .85) 20%, rgba(220, 38, 38, .85) 80%, transparent); }
@keyframes tbIn { 0% { opacity: 0; translate: -40px 0; } 20% { opacity: 1; translate: 0 0; } 75% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 40px 0; } }
@media (prefers-reduced-motion: reduce) { .hp-ghost { transition: none; } #turn-banner { animation: none; } #turn-banner { display: none; } }
/* ===== 2차 (#6 사망 연출 · 파편) — 기다리는 시간은 예전 그대로(150ms) 안에서 끝남, 파편만 따로 0.6초 ===== */
.fx-dying { transition: none !important; animation: fxDie .15s ease-in forwards; }
@keyframes fxDie {
  0% { filter: brightness(1.6) sepia(1) saturate(6) hue-rotate(-30deg); opacity: 1; translate: 0 0; scale: 1; }
  30% { filter: brightness(1.2) sepia(1) saturate(5) hue-rotate(-30deg); opacity: 1; }
  100% { filter: grayscale(1) brightness(.5); opacity: 0; translate: 0 14px; scale: .9; }
}
.fx-shards { position: fixed; z-index: 35; pointer-events: none; width: 0; height: 0; }
.fx-shards i { position: absolute; width: 6px; height: 6px; margin: -3px; background: linear-gradient(135deg, #fecaca, #7f1d1d); clip-path: polygon(50% 0, 100% 60%, 30% 100%, 0 40%); animation: fxShard .6s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes fxShard { from { opacity: 1; translate: 0 0; rotate: 0deg; } to { opacity: 0; translate: var(--dx) var(--dy); rotate: var(--rot); } }
#field-box.fx-screen { animation: fxScreen .2s linear; }
@media (prefers-reduced-motion: reduce) { .fx-dying { animation: none !important; transition: opacity .15s ease !important; opacity: 0; } .fx-shards { display: none; } }

/* 아이폰 사파리 안전망: Tailwind CDN(실행 중 CSS 생성)이 전투 화면 카드 클래스를 놓치면
   카드 그림이 원본 크기(800px+)로 화면을 덮었음. 크기 관련 핵심 클래스만 같은 값으로 고정해 둔다. */
#game .w-\[64px\] { width: 64px; }
#game .w-\[78px\] { width: 78px; }
#game .aspect-\[3\/4\] { aspect-ratio: 3 / 4; }
#game .card-frame { overflow: hidden; isolation: isolate; }
#game .card-frame > img.card-img { display: block; width: 100%; max-width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 768px) {
  #game .md\:w-\[96px\] { width: 96px; }
  #game .md\:w-\[110px\] { width: 110px; }
}

/* 아이폰 끊김 완화: 전투 카드의 Tailwind shadow-lg(어두운 배경이라 거의 안 보임)가 매 렌더마다 큰 흐림 그림자를 다시 그려서
   WebKit에서 프레임을 가장 많이 잡아먹었음. 등급 테두리/빛(rar-*)은 그대로 둔다. */
#game .card-frame.shadow-lg { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; }

/* 꾸미기 카드 테두리 (내 카드만 · 이미지 1장). iOS 라이트에선 끔.
   원본 프레임의 검은 질감이 9-slice 상단에 남아 초상화 위 검은 줄이 됨.
   폭만 줄여선 없어지지 않음: 카드 안에서만 screen 합성해 밝은 장식은 살리고 검정은 투명하게. */
#game .card-frame > .cosmo-bdr{position:absolute;inset:0;pointer-events:none;z-index:6;border:4px solid transparent;border-image-slice:50;border-image-width:4px;border-image-repeat:stretch;mix-blend-mode:screen}
html.ios #game .card-frame > .cosmo-bdr{display:none}

/* 스킬 사용 가능: 카드 자체에 빛 + 배지 (아래 줄이 수비대장 칸에 가려지던 문제) */
#game .unit.sk-ready > .relative > .card-frame{box-shadow:0 0 0 2px #e879f9,0 0 12px rgba(217,70,239,.75)}
#game .unit .sk-ready-badge{position:absolute;right:2px;bottom:30px;z-index:8;width:22px;height:22px;border-radius:9999px;background:radial-gradient(circle at 35% 30%,#f5d0fe,#c026d3 60%,#701a75);color:#fff;font-size:12px;font-weight:900;line-height:22px;text-align:center;border:1.5px solid #fff;box-shadow:0 0 8px #d946ef;animation:skBadge 1.2s ease-in-out infinite}
@keyframes skBadge{50%{transform:scale(1.15)}}
html.ios #game .unit .sk-ready-badge{animation:none}
@media (min-width:768px){#game .unit .sk-ready-badge{width:26px;height:26px;line-height:26px;font-size:14px;bottom:40px}}
/* 진영 칸(수비대장·보스) 원형 테두리는 상태효과 스타일이 모서리를 바꾸지 않게 항상 원형 유지 (금색 네모로 보이던 문제) */
#game .base-unit > .base-ring{border-radius:9999px!important}
html.ios #game .base-unit > .base-ring::after{border-radius:9999px!important}
/* 수비대장 흔들림: 붉은 흔들림 (iOS는 가볍게) */
@keyframes fxStagger{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
#game .fx-stagger{animation:fxStagger .6s ease-out;filter:drop-shadow(0 0 10px rgba(239,68,68,.9)) saturate(1.3)}
html.ios #game .fx-stagger{animation-duration:.35s;filter:none;box-shadow:0 0 0 2px rgba(239,68,68,.8);border-radius:9999px}