/* =========================================================
   전투 화면 (V2): 가운데 큰 몬스터 일러스트 → 내 캐릭터 → 대사 창 → 행동
   ========================================================= */
.battle {
  z-index: 30;
  padding: calc(var(--safe-top) + 10px) 14px calc(var(--safe-bottom) + 12px);
  gap: 10px;
}
.bt-head { flex: none; display: flex; align-items: center; gap: 8px; }
.bt-title { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-title .floor { font-family: var(--font-latin); font-weight: 700; font-size: 15px; color: var(--gold-hi); letter-spacing: 1px; }
.bt-title .zone { display: block; font-size: 11px; color: var(--ink-dim); }
.bt-turn { flex: none; min-width: 40px; text-align: right; font-family: var(--font-latin); font-size: 12px; color: var(--ink-dim); letter-spacing: 1px; }
.bt-turn b { color: var(--ink); font-size: 15px; }

/* 적 무대 */
.bt-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.foe-plate { width: 100%; max-width: 380px; text-align: center; }
.foe-name { font-family: var(--font-title); font-weight: 800; font-size: 21px; color: #fff; text-shadow: 0 0 14px rgba(155, 92, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foe-tags { display: flex; justify-content: center; gap: 4px; margin-top: 2px; min-height: 0; }
.foe-tag { font-family: var(--font-latin); font-size: 10px; letter-spacing: 2px; padding: 1px 8px; color: #fff; background: #a8243f; }
.foe-art-wrap { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.foe-art-wrap::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 70%; max-width: 280px; height: 18px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(155, 92, 255, 0.35), transparent); pointer-events: none;
}
/* 깎은 모서리 + 끊기지 않는 테두리: 바깥(테두리색) 안에 안쪽(그림)을 1px 작게 */
.foe-frame {
  --cut: 18px;
  height: 100%; max-height: 300px; max-width: 100%; aspect-ratio: 1 / 1; padding: 1px;
  background: linear-gradient(135deg, var(--gold-line), var(--line-strong) 45%, var(--gold-line));
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.foe-frame.boss { background: linear-gradient(135deg, var(--gold-hi), #a8243f 50%, var(--gold-hi)); }
.foe-frame.enraged { background: linear-gradient(135deg, var(--bad), #6e1430 50%, var(--bad)); }
.bt-foe-art {
  --cut: 17.6px;
  width: 100%; height: 100%; border: none;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.bt-foe-art .art-ph svg { max-width: 88px; }

/* HP/MP 바 */
.bt-bar { margin-top: 6px; }
.bt-bar-top { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-faint); margin-bottom: 3px; font-family: var(--font-latin); letter-spacing: 1px; }
.bt-bar-top b { font-family: var(--font); font-weight: 500; color: var(--ink-dim); letter-spacing: 0; }
.bar-track { height: 8px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.07); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 100%; transition: width 0.35s ease; }
.foe-plate .bar-track { height: 10px; border-color: var(--gold-line); }
.bar-track.low .bar-fill.hp { animation: lowPulse 0.8s infinite alternate; }
@keyframes lowPulse { to { filter: brightness(1.6); } }

/* 버프 */
.hud-buffs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.foe-plate .hud-buffs { justify-content: center; }
.hud-buffs:empty { display: none; }
.buff-chip { font-size: 10px; font-weight: 700; padding: 1px 6px; background: rgba(99, 214, 160, 0.14); border: 1px solid rgba(99, 214, 160, 0.4); color: var(--good); }
.buff-chip.down { background: rgba(255, 107, 129, 0.12); border-color: rgba(255, 107, 129, 0.45); color: #ff9aa9; }

/* 내 캐릭터 */
.bt-ally { --cut: 12px; flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.bt-avatar { width: 50px; height: 62px; flex: none; border-radius: 25px 25px 3px 3px; border-color: var(--gold-line); }
.bt-avatar .art-ph span { display: none; }
.bt-vitals { flex: 1; min-width: 0; }
.bt-name { display: flex; align-items: baseline; gap: 6px; }
.bt-name b { min-width: 0; font-family: var(--font-title); font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-name span { flex: none; font-family: var(--font-latin); font-size: 11px; color: var(--violet-hi); }
.party-pips { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pip { width: 14px; height: 14px; transform: rotate(45deg); border: 1px solid var(--line-strong); background: rgba(10, 6, 20, 0.6); }
.pip.active { background: var(--gold); border-color: var(--gold-hi); box-shadow: 0 0 8px rgba(217, 178, 106, 0.7); }
.pip.down { opacity: 0.25; }

/* 연출 */
[data-sprite].hit { animation: hit 0.35s; }
[data-sprite].crit { animation: hit 0.35s, critGlow 0.5s; }
[data-sprite].act { animation: bump 0.35s; }
[data-sprite].enter { animation: enter 0.4s ease-out; }
[data-sprite].fainted { filter: grayscale(1) brightness(0.45); }
.art[data-sprite].enraged { box-shadow: inset 0 0 0 2px var(--bad); }
[data-sprite].marked { box-shadow: inset 0 0 0 2px var(--gold); }
@keyframes hit { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes critGlow { 0% { filter: brightness(2.2); } 100% { filter: none; } }
@keyframes bump { 50% { transform: translateY(-5px) scale(1.03); } }
@keyframes enter { from { transform: translateX(-24px); opacity: 0; } }
.floater {
  position: absolute; z-index: 6; pointer-events: none;
  font-family: var(--font-latin); font-weight: 700; font-size: 26px;
  color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  animation: floatUp 1s ease-out forwards;
  transform: translate(-50%, 0);
}
.floater.crit { color: var(--gold-hi); font-size: 34px; }
.floater.heal { color: var(--good); }
.floater.small { font-size: 16px; font-family: var(--font); }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 8px) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
.b-flash { position: absolute; inset: 0; pointer-events: none; z-index: 40; opacity: 0; }
.b-flash.red { animation: flashRed 0.9s ease-out; }
.b-flash.white { animation: flashWhite 0.25s ease-out; }
@keyframes flashRed { 20% { opacity: 1; background: rgba(255, 107, 129, 0.28); } 100% { opacity: 0; } }
@keyframes flashWhite { 0% { opacity: 1; background: rgba(255, 255, 255, 0.16); } 100% { opacity: 0; } }

/* 대사 창 (최근 기록, 위로 스크롤하면 이전 기록) */
.bt-msg { --cut: 10px; --frame-fill: rgba(10, 6, 18, 0.88); flex: none; height: 92px; padding: 0; }
.bt-log {
  height: 100%; padding: 9px 14px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-size: 13.5px; line-height: 1.6; color: var(--ink);
}
.bt-log p { margin: 0 0 2px; }
.bt-log p.me { color: var(--sky); }
.bt-log p.foe { color: #ffa3b1; }
.bt-log p.hi { color: var(--violet-hi); font-weight: 700; }
.bt-log p.good { color: var(--good); }
.bt-log p.bad { color: var(--bad); font-weight: 700; }
.bt-log p.turn { color: var(--ink-faint); font-family: var(--font-latin); font-size: 10px; letter-spacing: 3px; margin: 4px 0; }
.bt-log.waiting::after { content: ''; position: sticky; float: right; bottom: 2px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--violet-hi); animation: loadPulse 0.8s infinite; }

/* 행동 */
.bt-cmd { flex: none; min-height: 124px; }
.cmd-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 8px; font-size: 12px; color: var(--ink-dim); }
.cmd-title b { color: var(--ink); font-family: var(--font-title); font-weight: 800; font-size: 14px; }
.cmd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmd-grid > button { min-height: 54px; font-size: 15px; }
.cmd-grid > button .ic { width: 20px; height: 20px; }
.cmd-list { max-height: 32vh; overflow-y: auto; }
.cmd-list .si-right.mp { color: var(--sky); }
.cmd-list .si-right.qty { color: var(--violet-hi); }
.cmd-list .mini-hp { width: 80px; flex: none; }
.cmd-back { margin-top: 2px; }
.cmd-wait { display: grid; place-items: center; min-height: 116px; }

/* 결과 */
.result-hero { text-align: center; padding: 2px 0 10px; }
.result-hero .eyebrow { font-family: var(--font-latin); font-size: 11px; letter-spacing: 4px; color: var(--gold); }
.result-hero h4 { margin: 4px 0 4px; font-family: var(--font-title); font-weight: 800; font-size: 26px; color: #fff; text-shadow: 0 0 18px rgba(155, 92, 255, 0.55); }
.result-hero.lose .eyebrow { color: var(--bad); }
.result-hero.lose h4 { text-shadow: 0 0 18px rgba(255, 107, 129, 0.5); }
.result-hero p { margin: 0; color: var(--ink-dim); font-size: 13px; line-height: 1.6; }
.result-box { --cut: 10px; padding: 4px 14px; }
.lvup { color: var(--good); font-weight: 700; font-size: 12px; margin-left: 4px; }

@media (min-width: 700px) {
  .foe-frame { max-height: 380px; }
  .foe-name { font-size: 26px; }
  .bt-avatar { width: 60px; height: 76px; }
  .bt-msg { height: 108px; }
  .bt-log { font-size: 15px; }
  .cmd-grid > button { min-height: 62px; font-size: 17px; }
}
@media (max-height: 680px) {
  .bt-msg { height: 72px; }
  .bt-log { font-size: 12.5px; }
  .bt-avatar { width: 40px; height: 50px; }
  .bt-cmd { min-height: 110px; }
  .cmd-grid > button { min-height: 46px; }
}