/* 전투 개선 PR A (js/game.js BFX). body.bfx 일 때만 — localStorage vrBfx=0 이면 꺼짐 */

/* 1-3 같은 글자 합치기: '×n' 꼬리표 + 살짝 튐 */
.bfx .fx-dmg[data-n]::after, .bfx .float-text[data-n]::after { content: attr(data-n); margin-left: 3px; font-size: .7em; color: #fff; text-shadow: 0 1px 2px #000; }
.bfx .fx-merged { scale: 1.18; transition: scale .12s ease-out; }

/* 3-3 마지막 일격 슬로모션 · 패배 흑백 · MVP 카드 뒤집기 */
.bfx #game.bfx-final #field-box { animation: bfxFinal .6s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes bfxFinal { 0% { scale: 1; filter: brightness(1.6) contrast(1.1); } 100% { scale: 1.06; filter: brightness(.85); } }
body.bfx:has(#game.bfx-final) .fx-dmg { animation-duration: 2.2s !important; }
.bfx #game.bfx-lose { filter: grayscale(1) brightness(.75); transition: filter .6s ease; }
.bfx #end-screen.end-lose { backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); }
.bfx .end-mvp.bfx-flip { animation: bfxFlip .6s cubic-bezier(.3,1.4,.5,1) both; transform-origin: 50% 50%; }
@keyframes bfxFlip { 0% { transform: perspective(700px) rotateY(90deg) scale(.85); opacity: 0; } 100% { transform: perspective(700px) rotateY(0) scale(1); opacity: 1; } }

/* 3-4 필살기 컷인: 위·아래 띠 + 속도선 (CSS), 길이 그대로 (--dur), 판을 덜 가림 */
/* 띠 = 그림 틀 맨 가장자리 얇은 선 (예전 8% 어두운 띠 + 안쪽 선이 그림을 가로질렀음). 틀 안쪽 테두리(inset)도 이 선 하나로 */
.bfx .cutin .cut-band { position: absolute; left: 0; right: 0; height: 2px; background: var(--bandc, #34d399); z-index: 3; pointer-events: none; animation: bfxBand var(--dur) ease-out both; }
.bfx .cutin .cut-band-t { top: 0; }
.bfx .cutin .cut-band-b { bottom: 0; }
.bfx .cutin.cutin-img { border-block: 0; }
.bfx .cutin.cutin-img.cutin-me, .bfx .cutin.cutin-img.cutin-ai { box-shadow: 0 0 40px rgba(0,0,0,.8); }
.bfx .cutin.cutin-ai { --bandc: #f87171; }
@keyframes bfxBand { 0% { transform: scaleX(0); } 12%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.bfx .cutin .cut-speed { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .45; mix-blend-mode: screen;
  background: repeating-linear-gradient(calc(var(--dir, 1) * 8deg), transparent 0 18px, rgba(255,255,255,.55) 18px 20px, transparent 20px 46px);
  background-size: 300% 100%; animation: bfxSpeed var(--dur) linear both; }
@keyframes bfxSpeed { from { background-position: 0 0; } to { background-position: calc(var(--dir, 1) * -600px) 0; } }
.bfx .cutin .cutin-text { z-index: 4; }
/* 그림 크기는 index.html 의 기본 70vh / 세로 62vh 를 사용.
   BFX 의 40vh / 32vh 축소 덮어쓰기는 제거 (보안 1단계와 무관한 기존 스타일). */

/* 2-4 PC 가로: 필드 카드 크기 맞춤 (js fitBoard → --bz) · 1440px 이상이면 전투 기록을 왼쪽에 상시 표시 */
.bfx #game.bfx-fit #field-box .unit { zoom: var(--bz, 1); }
@media (min-width: 1440px) and (orientation: landscape) {
  body.bfx.bfx-battle #log-modal { display: block !important; inset: 72px auto 16px 12px; width: calc((100vw - 1024px) / 2 - 24px); max-width: 360px; background: none; padding: 0; z-index: 5; }
  body.bfx.bfx-battle #log-modal .log-panel { height: 100%; display: flex; flex-direction: column; background: rgba(24,24,27,.82); }
  body.bfx.bfx-battle #log-modal .log-body { max-height: none; flex: 1; }
  body.bfx.bfx-battle #log-close, body.bfx.bfx-battle #log-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bfx .fx-merged { transition: none; scale: 1; }
  .bfx #game.bfx-final #field-box, .bfx .end-mvp.bfx-flip, .bfx .cutin .cut-band, .bfx .cutin .cut-speed { animation: none !important; }
  .bfx .cutin .cut-speed { display: none; }
}