/* ===== 타이탄/공룡대전/아레나/허수아비 4개 시뮬레이터가 공유하는 전투 화면 뼈대 - 좌우 설정 패널+가운데 전투 카드 3단 레이아웃, 모드 탭, 대미지 팝업, VS배지, 전투 컨트롤, 친구 세션 툴바 =====
   css/style.css를 여러 파일로 분리한 것 중 하나 - index.html에 링크된 순서(cascade 순서)가
   원본과 동일하게 유지되도록 주의할 것 ===== */

@media (min-width: 1100px) {
  body[data-page="dino-battle"] .container {
    width: min(100%, 1240px);
  }
  .battle-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: start;
    gap: 16px;
  }
}

.battle-side-panel {
  min-width: 0;
}

/* 데스크톱 3단 레이아웃에서 "내 공룡"/"상대 공룡" 패널이 같은 높이에서 시작하도록, 두 패널 다
   같은 모양의 헤더 행(제목 + 필요하면 버튼)을 항상 둠 - 예전엔 이 헤더가 모바일 슬라이드 패널
   에서만 보이고 데스크톱에서는 아예 없어서, 친구 초대/설정 불러오기 버튼이 상대 쪽에만 추가로
   붙는 순간 두 패널의 시작 높이가 어긋나 보였음 */
.battle-panel-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  /* margin-bottom을 따로 안 둠 - 바로 아래 오는 .dino-summary-bar가 자기 몫의 위쪽 padding을
     이미 갖고 있어서(css/my-dino.css), 여기서도 margin을 더하면 "헤더 밑줄 -> 스탯 숫자" 간격이
     "스탯 숫자 -> 요약바 밑줄" 간격보다 눈에 띄게 커짐(사용자 지적 - 공룡 대전 사이드 패널처럼
     이 헤더가 붙는 곳에서만 위쪽 여백이 유독 커 보였던 원인) */
  font-weight: bold;
}

/* 헤더가 이제 카드 바깥 형제가 아니라 카드 안 첫 줄로 들어옴(묶음 2) - 카드 자체는
   padding:0 !important라 좌우/위쪽 여백을 직접 줘야 하고, 카드 맨 위 요소니 모서리도 둥글게 함.
   :first-child로 스코프해서 혹시 다른 위치에 헤더가 쓰이게 되어도 영향 없게 함 */
.battle-panel-header:first-child {
  padding: var(--p-base) var(--p-base) 12px;
  border-radius: 16px 16px 0 0;
}

.battle-panel-close {
  display: none;
}

@media (max-width: 1099px) {
  .battle-side-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(88vw, 400px);
    background: var(--bg-color);
    z-index: 2050;
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
  }
  .battle-side-panel.my-side {
    left: 0;
    transform: translateX(-105%);
  }
  .battle-side-panel.opp-side {
    right: 0;
    transform: translateX(105%);
  }
  .battle-side-panel.open {
    transform: translateX(0);
  }
  .battle-panel-close {
    display: flex;
  }
}

.battle-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2040;
}

.battle-panel-overlay.open {
  display: block;
}

.battle-arena-wrap {
  position: relative;
}

.battle-peek-btn {
  display: none;
}

@media (max-width: 1099px) {
  .battle-peek-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 64px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-sub);
    font-size: 13px;
    cursor: pointer;
    z-index: 10;
  }
  .battle-peek-btn.my-peek {
    left: 0;
    border-radius: 0 10px 10px 0;
  }
  .battle-peek-btn.opp-peek {
    right: 0;
    border-radius: 10px 0 0 10px;
  }
}

/* 빠른계산/실전대전을 각자 따로 뜬 카드로 나누지 않고, 하나의 카드(.battle-main-card) 안에서
   탭으로만 전환되게 통합. 은은한 골드 글로우 배경을 카드 위쪽에 깔아서(홈 화면 히어로와 같은
   톤) 무대라는 느낌을 살림. */
.battle-main-card {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}

.battle-main-card::before {
  content: "";
  position: absolute;
  top: -70%;
  left: 50%;
  width: 420px;
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.battle-mode-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4px;
  background: var(--input-bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
}

.battle-mode-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1cqw, 6px);
  flex: 1;
  padding: 9px 0;
  border-radius: 7px;
  border: none;
  background: none;
  color: var(--text-sub);
  /* 카드 폭 비례 스케일링(사이트 공용 컨벤션) - 좁은 화면에서 라벨이 줄바꿈되기 전에 글자부터
     먼저 작아지게 해서, 옆에 붙는 배지(.battle-tab-presence)와 부딪히는 걸 줄임 */
  font-size: clamp(10.5px, 2.17cqw, 13px);
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* 친구 기능 4단계: 화면을 강제로 맞추는 대신, 지금 누가 어느 탭을 보고 있는지 탭 글자 옆에
   닉네임 첫 글자 배지로 표시함(내 배지=글자 왼쪽, 상대 배지=글자 오른쪽) - JS(updatePresenceBadges
   류)가 해당하는 탭 버튼 안으로 이 엘리먼트 자체를 옮겨 붙임. 배지 크기도 탭 글자와 같은 비율로
   같이 작아지게 함(둘 다 같은 clamp 공식 - 600px 기준 18px -> 3cqw) */
.battle-tab-presence {
  display: none;
  align-items: center;
  justify-content: center;
  width: clamp(14px, 3cqw, 18px);
  height: clamp(14px, 3cqw, 18px);
  border-radius: 50%;
  font-size: clamp(8px, 1.67cqw, 10px);
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.battle-tab-presence.my-presence {
  background: var(--accent);
  color: #1a1206;
}

.battle-tab-presence.friend-presence {
  background: #e0473f;
  color: #fff;
}

.battle-mode-tab.active {
  color: #1a1206;
}

.battle-mode-indicator {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 4px;
  width: calc(50% - 6px);
  height: calc(100% - 8px);
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.battle-mode-tabs.mode-live .battle-mode-indicator {
  transform: translateX(calc(100% + 4px));
}

/* 허수아비는 빠른 계산/실전 대전/조합 찾기 3탭 - 공용 .battle-mode-indicator는 2탭 폭(50%)으로
   짜여있어서 3탭 폭(33.333%)만 여기서 따로 덮어씀. translateX는 원래대로 "자기 폭 + gap"만큼
   이동이라 탭 개수와 무관하게 그대로 재사용됨(2번째 탭=1배, 3번째 탭=2배 이동) */
.dummy-mode-tabs-3 .battle-mode-indicator {
  width: calc(33.333% - 5.333px);
}

.dummy-mode-tabs-3.mode-optimize .battle-mode-indicator {
  transform: translateX(calc(200% + 8px));
}

.battle-mode-panel {
  position: relative;
  z-index: 1;
}

.quickcalc-desc {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.5;
  margin: 0 0 14px;
}

/* 결과 카드가 "500회 계산하기" 버튼 바로 밑에 여백 없이 붙어있어서 답답해 보이던 것 수정 */
.battle-mode-panel .report-grid {
  margin-top: 16px;
}

.battle-dmg-popup {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: battle-dmg-float 0.7s ease-out forwards;
  white-space: nowrap;
}

/* 평타: 흰색(기본) / 평타 크리티컬: 흰색 + 빨간 테두리 */
.battle-dmg-popup.crit:not(.skill) {
  color: #ffffff;
  -webkit-text-stroke: 1px #ff4444;
  font-size: 19px;
}

/* 스킬 대미지: 빨간색 / 스킬 크리티컬: 보라색 */
.battle-dmg-popup.skill {
  color: #ff4444;
}

.battle-dmg-popup.skill.crit {
  color: #b768f5;
  font-size: 19px;
}

.battle-dmg-popup.heal {
  color: #2ecc71;
  font-size: 13px;
}

@keyframes battle-dmg-float {
  0% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -32px); opacity: 0; }
}

.battle-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(30px, 9cqw, 42px);
  height: clamp(30px, 9cqw, 42px);
  border-radius: 50%;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  animation: battle-vs-pulse 2.4s ease-in-out infinite;
}

@keyframes battle-vs-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 15%, transparent); }
}

.battle-vs span {
  font-size: clamp(11px, 2.8cqw, 13px);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.battle-result {
  text-align: center;
  font-size: clamp(18px, 5cqw, 24px);
  font-weight: 900;
  color: var(--accent);
  margin: 4px 0 14px;
  animation: battle-result-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes battle-result-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.battle-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.battle-controls .btn-simulate {
  flex: 1;
}

.battle-speed-dropdown {
  flex-shrink: 0;
  width: 76px;
}

/* 속도 드롭다운은 전투 카드 맨 아래쪽(.battle-controls)에 있는데, 카드에 overflow:hidden이
   걸려있어서(위쪽 골드 글로우가 둥근 모서리 밖으로 안 새어나가게 하려고) 목록이 아래로 펼쳐지면
   카드 경계에 잘려서 "느림"만 보이고 나머지가 안 보였음 - 위로 펼치도록 방향을 뒤집음 */
.battle-speed-dropdown .dropdown-list {
  top: auto;
  bottom: 100%;
  border-top: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

.battle-restart-btn {
  flex-shrink: 0;
  width: 3em;
  min-height: 3em;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-main);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.battle-restart-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== 친구와 함께(친구 기능 3단계) ===== */

/* 패널 헤더 행(.battle-panel-header) 안에 제목과 나란히 들어감 - 상대 쪽만 있어도 내 쪽과 헤더
   행 높이가 맞도록 한 줄짜리 작은 버튼으로 둠(예전엔 헤더 아래 별도의 큰 버튼 줄이었음) */
.opp-panel-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.friend-toolbar-btn {
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-main);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.friend-toolbar-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.friend-leave-btn {
  border-color: #e0473f;
  color: #e0473f;
}

/* 친구 기능 4단계: 상대의 준비 완료 상태 표시(내가 지금 어느 탭을 보고 있든 항상 보임) */
.battle-ready-indicator {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  color: var(--text-sub);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.battle-ready-indicator.is-ready {
  border-color: var(--accent);
  color: var(--accent);
}

.friend-session-waiting {
  text-align: center;
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1.6;
  padding: 28px var(--p-base);
}

.friend-session-waiting .friend-toolbar-btn {
  margin-top: 12px;
  max-width: 160px;
  margin-left: auto;
  margin-right: auto;
}

/* 세션 중 "상대 공룡" 쪽 배치/버프타워 드롭다운 잠금(상대가 직접 정하는 값이라 여기선 편집 불가) */