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

/* 2-1 빈 진영(수비대장) 칸: 큰 동그라미 대신 한 줄 (이름 + 진영 HP 바) */
.bfx .base-unit.base-thin { width: auto; flex-direction: row; gap: 8px; padding: 2px 10px; border-radius: 9999px; background: rgba(0,0,0,.35); opacity: .8; }
.bfx .base-unit.base-thin .base-ring { display: none; }
.bfx .base-unit.base-thin .base-name { margin: 0; font-size: 10px; color: #a1a1aa; }
.bfx .base-unit.base-thin .base-hp { margin: 0; width: 120px; height: 12px; }
@media (min-width: 768px) { .bfx .base-unit.base-thin { width: auto; } .bfx .base-unit.base-thin .base-hp { width: 180px; height: 14px; } }

/* 2-5 체력 위기 (30% 이하): 화면 가장자리 붉은 깜빡임 + 체력바 색 */
.bfx #game.bfx-low::before { content: ''; position: fixed; inset: 0; z-index: 40; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(239,68,68,.55), inset 0 0 60px 12px rgba(220,38,38,.45); animation: bfxLowEdge 1.1s ease-in-out infinite; }
@keyframes bfxLowEdge { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.bfx #game.bfx-low #me-hpbar, .bfx #game.bfx-low #me-boss .base-hp-fill { background: linear-gradient(90deg, #f97316, #ef4444) !important; animation: bfxLowBar .55s steps(2, jump-none) infinite alternate; }
.bfx #game .unit:not(.base-unit) .hp-bar.hp-low .hp-fill { background: linear-gradient(90deg, #f97316, #facc15) !important; }
@keyframes bfxLowBar { from { filter: brightness(1); } to { filter: brightness(1.7); } }

/* 1-2 치명타·큰 피해: 가장자리 섬광 + 전장 살짝 줌 (scale 속성 → 기존 흔들림 transform 과 겹치지 않음) */
.bfx #game.bfx-hit::after { content: ''; position: fixed; inset: 0; z-index: 41; pointer-events: none; box-shadow: inset 0 0 50px 10px rgba(253,224,71,.55); animation: bfxHitEdge .3s ease-out forwards; }
.bfx #game.bfx-hit-strong::after { box-shadow: inset 0 0 0 3px rgba(255,255,255,.7), inset 0 0 80px 18px rgba(253,186,116,.75); }
@keyframes bfxHitEdge { 0% { opacity: 1; } 100% { opacity: 0; } }
.bfx #field-box.bfx-zoom { animation: bfxZoom .26s ease-out; }
@keyframes bfxZoom { 0% { scale: 1; } 35% { scale: 1.025; } 100% { scale: 1; } }

/* 2-2 필드 카드: HP 숫자 하나 크게, 뱃지는 두 모서리에 세로로 (왼쪽 = 비용·등급, 오른쪽 = 속성·스킬 수) */
.bfx #game .unit:not(.base-unit) .u-hpnum { text-align: center; font-size: 13px; line-height: 15px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px rgba(239,68,68,.8); margin-top: 1px; font-variant-numeric: tabular-nums; }
.bfx #game .unit:not(.base-unit) .u-hpnum.low { color: #fdba74; text-shadow: 0 1px 2px #000, 0 0 8px rgba(249,115,22,.95); }
.bfx #game .unit:not(.base-unit) .card-frame .st-hp { display: none; }
.bfx #game .unit:not(.base-unit) .card-frame > .absolute.top-1.left-1 { top: 2px; left: 2px; width: 20px; height: 20px; font-size: 10px; }
.bfx #game .unit:not(.base-unit) .card-frame > .absolute.top-1.right-1 { top: 2px; right: 2px; line-height: 20px; font-size: 13px; }
.bfx #game .unit:not(.base-unit) .card-frame .rar-badge { top: 24px; left: 2px; }
.bfx #game .unit:not(.base-unit) .card-frame .sk-count { top: 24px; right: 2px; }
.bfx #game .unit:not(.base-unit) .lv-badge { top: -9px; z-index: 2; }
.bfx #game .unit:not(.base-unit) .status-icons, .bfx #game .unit:not(.base-unit) .item-icons { top: 42px; }
@media (min-width: 768px) {
  .bfx #game .unit:not(.base-unit) .u-hpnum { font-size: 16px; line-height: 18px; }
  .bfx #game .unit:not(.base-unit) .card-frame > .absolute.top-1.left-1 { width: 26px; height: 26px; font-size: 12px; }
  .bfx #game .unit:not(.base-unit) .card-frame > .absolute.top-1.right-1 { line-height: 26px; font-size: 16px; }
  .bfx #game .unit:not(.base-unit) .card-frame .rar-badge, .bfx #game .unit:not(.base-unit) .card-frame .sk-count { top: 31px; }
  .bfx #game .unit:not(.base-unit) .status-icons, .bfx #game .unit:not(.base-unit) .item-icons { top: 56px; }
}
@media (prefers-reduced-motion: reduce) { .bfx #game.bfx-low::before, .bfx #game.bfx-low #me-hpbar { animation: none; opacity: .8; } .bfx #field-box.bfx-zoom { animation: none; } }

/* 빈 수비대장 칸: 가운데 반원 (내 쪽 = 필드 아래 가장자리에서 위로 볼록, 상대 = 위 가장자리에서 아래로) · EMPTY + HP */
.bfx .base-unit.base-thin { width: 136px; height: 64px; padding: 0; gap: 4px; flex-direction: column; justify-content: center; opacity: .9; border: 1px dashed rgba(255,255,255,.28); background: radial-gradient(ellipse at 50% 100%, rgba(63,63,70,.6), rgba(24,24,27,.75)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.bfx .base-slot-me .base-unit.base-thin { border-radius: 68px 68px 0 0; border-bottom: 0; padding-top: 10px; border-color: rgba(52,211,153,.5); box-shadow: 0 -3px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.bfx .base-slot:not(.base-slot-me) .base-unit.base-thin { border-radius: 0 0 68px 68px; border-top: 0; padding-bottom: 10px; border-color: rgba(248,113,113,.45); }
.bfx .base-slot-me:has(.base-thin) { margin: auto 0 -8px; }
.bfx .base-slot:not(.base-slot-me):has(.base-thin) { margin: -8px 0 auto; }
.bfx .base-unit.base-thin .base-ring { display: none; }
.bfx .base-unit.base-thin .base-name { font-size: 12px; letter-spacing: .2em; font-weight: 900; color: #a1a1aa; }
.bfx .base-slot-me .base-unit.base-thin .base-name { color: #a7f3d0; }
.bfx .base-unit.base-thin .base-hp { width: 96px; height: 12px; }
@media (min-width: 768px) { .bfx .base-unit.base-thin { width: 180px; height: 84px; } .bfx .base-unit.base-thin .base-hp { width: 130px; } }

/* 휴대폰: 아래 조작 영역(마나·턴 종료·행동 아이콘·손패)을 화면 맨 아래에 붙임 */
@media (max-width: 767px) {
  .bfx #game:not(.hidden) { min-height: 100dvh; }
  .bfx #game:not(.hidden) > #field-box { flex: 1 1 auto; justify-content: space-between; }
  .bfx #field-box > #ai-field, .bfx #field-box > #me-field { flex: 1 1 0; align-items: center; }
  .bfx #game > #me-dock { margin-top: auto; position: sticky; bottom: 0; z-index: 20; padding-bottom: env(safe-area-inset-bottom); background: linear-gradient(180deg, rgba(9,9,11,0), rgba(9,9,11,.85) 18px); }
}