/* 🔥 어려움 챕터 (js/hard-mode.js) */
.hard-toggle-btn { flex: none; margin-left: 4px; padding: 2px 7px; font-size: 10px; font-weight: 900; color: #cbd5e1; white-space: nowrap;
  background: rgba(30, 41, 59, 0.9); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; cursor: pointer; }
.hard-toggle-btn.on { color: #fff; background: linear-gradient(180deg, #dc2626, #991b1b); border-color: #f87171; }
.hard-toggle-btn:active { transform: scale(0.95); }

/* 어려움 전투 화면: 같은 배경/몬스터에 붉은 색조 (정적 오버레이라 애니메이션 비용 없음) */
.battle-arena-stage.hard-mode .battle-bg-overlay {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 35%, rgba(127, 29, 29, 0.55) 100%),
    linear-gradient(180deg, rgba(153, 27, 27, 0.38) 0%, rgba(127, 29, 29, 0.22) 55%, rgba(153, 27, 27, 0.4) 100%);
}
.battle-arena-stage.hard-mode .stage-badge { background: linear-gradient(180deg, #dc2626, #7f1d1d); }
.battle-arena-stage.hard-mode .stage-title { color: #fca5a5; }
.battle-arena-stage.hard-mode .monster-combat-unit:not(.pvp-opp) .monster-img { filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.9)); }

/* 해금 안내 */
#hard-unlock-modal { z-index: 1300; }
.hard-unlock-sheet { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.hard-unlock-icon { font-size: 40px; }
.hard-unlock-title { margin: 0; font-size: 18px; font-weight: 900; color: #fca5a5; }
.hard-unlock-desc { font-size: 12px; color: #e2e8f0; line-height: 1.5; }
.hard-unlock-list { text-align: left; margin: 0; padding: 8px 10px 8px 24px; font-size: 11px; color: #cbd5e1; line-height: 1.55; background: rgba(127, 29, 29, 0.18); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 10px; }
.hard-unlock-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* 스테이지 줄: 어려움 전환 버튼이 들어가도 한 줄 유지 (챕터 이름은 길면 … 으로 줄임) */
.stage-info-pill { min-width: 0; flex: 0 1 auto; }
.stage-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battle-stage-header > * { flex-shrink: 0; }
.battle-stage-header > .stage-info-pill { flex-shrink: 1; }
.battle-stage-header .power-label, .battle-stage-header .power-pill, .battle-stage-header [class*="power"] { white-space: nowrap; }

/* 좁은 휴대폰: 상단 바에서 이름을 숨기고 피해/체력을 위아래로 쌓아 재화와 설정 버튼이 들어가게 함 (이름은 캐릭터 정보에서 확인) */
@media (max-width: 400px) {
  .header-status-bar .user-level { display: none; }
  .header-status-bar .stat-summary-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .header-status-bar .stat-tag { font-size: 0.62rem; padding-top: 1px; padding-bottom: 1px; }
  .header-status-bar .avatar { width: 32px; height: 32px; }
}
.stage-badge { white-space: nowrap; flex: none; }
.hard-toggle-btn { flex: none; }

/* 체력바 숫자 가독성: 조금 더 크고 굵게 + 검은 테두리 (현재 체력만 표시) */
.unit-hp-bar { height: 10px; }
.monster-hp-bar, .monsters-squad.count-4 .unit-hp-bar { height: 9px; }
.unit-hp-text { font-size: 9px; font-weight: 900; letter-spacing: -0.2px; line-height: 1; white-space: nowrap;
  text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 1px 3px rgba(0, 0, 0, 0.9); }
.monster-combat-unit.boss .unit-hp-text { font-size: 10px; }
.monster-combat-unit.hp-text-off .unit-hp-text { display: none; }
/* 전투 중 펫 이름표는 레벨만 (이름은 하단 스킬 칸에 있음): 영웅 체력바를 가리지 않게 */
#hero-pets-formation .pet-tag-name { display: none; }