/* ===== 타이탄 페이지 전용(titan-page.js) - 관련 수치 카드, 전투설정/빠른계산/실전시뮬레이션/조합찾기 4탭, 육각형 듀얼 장면 =====
   css/style.css를 여러 파일로 분리한 것 중 하나 - index.html에 링크된 순서(cascade 순서)가
   원본과 동일하게 유지되도록 주의할 것 ===== */

/* ===== 타이탄 페이지: 관련 수치 카드 ===== */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 1.67cqw, 10px);
}

.metric-tile {
  /* <button> 기본 스타일 리셋 */
  appearance: none;
  font-family: inherit;
  outline: none;
  /* 브라우저 기본 <button> 글자색(대개 검정에 가까운 buttontext 시스템 색상, 다크 테마와 무관하게
     고정)을 명시적으로 덮어씀 - 없으면 .metric-label/.metric-value가 각자 색을 갖고 있어 평소엔
     안 보이지만, stat-roll-flash-up/down 애니메이션의 마지막 프레임(color: inherit)이 바로 이
     버튼의 기본 검정색으로 풀려서 값이 바뀔 때마다 잠깐 검게 변했다가 되돌아오는 것처럼 보이던
     원인이었음(사용자 지적) */
  color: var(--text-main);

  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: clamp(7px, 1.83cqw, 11px) clamp(10px, 2.5cqw, 15px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

@media (hover: hover) {
  .metric-tile:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 5%, var(--input-bg));
  }
}

.metric-tile:active {
  background: var(--card-bg);
}

.metric-tile.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.metric-label {
  font-size: clamp(11px, 2.33cqw, 13px);
  color: var(--text-sub);
}

.metric-value {
  font-size: clamp(15px, 4cqw, 20px);
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: normal;
  /* js/ui/stat-roll-ui.js의 오도미터 자릿수 스트립(.stat-roll-digit)이 애니메이션 도중에만
     line-height:1.1em을 쓰는데, 여기 자체엔 line-height가 없어서(브라우저 기본값 상속) 애니메이션이
     끝나고 일반 텍스트로 되돌아가는 순간 줄 높이가 달라져 글자가 위아래로 살짝 튀어 보였음
     (사용자 지적) - 정적/애니메이션 상태의 줄 높이를 똑같이 맞춰서 그 튐을 없앰 */
  line-height: 1.1;
}

/* 관련 수치 타일 값이 바뀔 때(룬/스탯 조절 등) js/ui/stat-roll-ui.js의 오도미터 롤링 애니메이션을
   씀(건물 페이지에서 처음 적용 - 사용자 확정 "숫자가 바뀌는 모션이 있어야 해") - 색 플래시
   키프레임 자체는 my-dino.css에 이미 있고 지금까지 .stat-readout-value에만 걸려있었어서, 여기
   .metric-value에도 걸리게 선택자만 추가함(같은 keyframes 재사용, 새 keyframes 아님) */
.metric-value.stat-roll-up { animation: stat-roll-flash-up 0.65s ease; }
.metric-value.stat-roll-down { animation: stat-roll-flash-down 0.65s ease; }
@media (prefers-reduced-motion: reduce) {
  .metric-value.stat-roll-up, .metric-value.stat-roll-down { animation: none; }
}

.metric-sub {
  font-size: clamp(10px, 2.2cqw, 12px);
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}

/* 기본값에서 바뀐 값만 노란색으로 강조(입력칸/드롭다운/관련 수치 타일 공통).
   input/.selected-value/.metric-value 등 이 규칙보다 뒤에 나오는 동일 특이도 클래스도 있어서
   소스 순서에 기대지 않도록 !important로 확실히 이기게 함 */
.value-changed {
  color: var(--accent) !important;
}

.metric-detail {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-color);
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.metric-detail-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 8px;
}

/* 행 자체는 세로 스택(주 내용 + 선택적 서브라인) - 서브라인이 없는 행은 기존과 똑같이 한 줄로 보임 */
.metric-detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 0;
  border-top: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-main);
}

.metric-detail-row:first-of-type {
  border-top: none;
}

.metric-detail-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 확률/원래 값처럼 평균값 계산에 쓰인 원본 수치를 보여주는 보조 줄(예: "원래 대미지 1,234") */
.metric-detail-row-sub {
  font-size: 11px;
  color: var(--text-sub);
}

.metric-detail-empty {
  font-size: 13px;
  color: var(--text-sub);
  text-align: center;
  padding: 6px 0;
}

/* ===== 타이탄: 전투 설정 / 빠른 계산 / 실전 시뮬레이션 / 조합 찾기 4개 모드를 정확히 4등분 -
   탭 폭이 전부 같아서 인디케이터도 순수 CSS 퍼센트로 처리(JS 픽셀 측정 방식은 창 폭이 좁아질 때
   재계산이 안 돼서 옆 탭을 침범하는 버그가 있었음 - %는 항상 컨테이너와 같이 줄어들어 안전함).
   이동은 #titanModeTabs의 data-active-idx 속성으로 표시(titanInitModeTabs, titan-page.js) =====*/
.titan-mode-tabs-4 .battle-mode-indicator {
  width: calc(25% - 5px);
}

.titan-mode-tabs-4[data-active-idx="1"] .battle-mode-indicator { transform: translateX(calc(100% + 4px)); }
.titan-mode-tabs-4[data-active-idx="2"] .battle-mode-indicator { transform: translateX(calc(200% + 8px)); }
.titan-mode-tabs-4[data-active-idx="3"] .battle-mode-indicator { transform: translateX(calc(300% + 12px)); }

/* 전투 설정 탭(idx 0)만 나머지 모드와 구분되게 하늘색(#3cb4be)으로 표시 - 나머지 3개(빠른 계산/
   실전 시뮬레이션/조합 찾기)는 기본 골드 그라디언트 그대로 유지 */
.titan-mode-tabs-4[data-active-idx="0"] .battle-mode-indicator {
  background: linear-gradient(135deg, #3cb4be, color-mix(in srgb, #3cb4be 78%, black));
  box-shadow: 0 3px 10px color-mix(in srgb, #3cb4be 40%, transparent);
}

.titan-mode-tabs-4[data-active-idx="0"] #titanModeTabSettings.active {
  color: #eef4ff;
}

/* 전투 설정 8칸(자연/부족/공버프/체버프/레벨/시간/거리/연속전투)을 전부 "라벨 왼쪽 - 조작 오른쪽"
   행으로 통일해서 2열 grid에 정확히 4행씩 배치 - 줄바꿈 대신 글자 크기를 줄여서 한 줄에 들어가게 함 */
.titan-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.titan-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: clamp(34px, 8cqw, 48px);
  min-width: 0;
}


/* 타이탄 레벨/전투 제한시간 - 위아래 가로선으로 하나의 구역처럼 묶고, 각각 라벨 밑에 드롭다운이
   자기 칸 폭 전체를 차지하도록(다른 행들처럼 라벨 옆에 붙는 게 아니라 아래로 스택) */
.titan-settings-levelblock {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* levelblock끼리 바로 붙으면(버프 타워 페어 바로 밑에 레벨캡 페어) 앞 블록의 border-bottom과
   뒷 블록의 border-top이 몇 픽셀 간격을 두고 나란히 있어 가로선 2개로 보임(사용자 지적) - 뒤에
   오는 블록의 위쪽 선은 빼서 하나로 합침 */
.titan-settings-levelblock + .titan-settings-levelblock {
  border-top: none;
  padding-top: 0;
}

/* 자연/부족/버프타워/레벨캡/별자리캡(서버·타일 관련 설정)과 타이탄 레벨부터 이어지는 타이탄
   전투 설정을 시각적으로 분리(사용자 확정 - "타일 설정 관련이랑 타이탄 설정 관련을 조금
   시각적으로 분리시켰으면") - 레벨캡 페어 바로 다음에 오는 "타이탄 레벨"(전투 설정 섹션의 시작)
   위에 여백을 더 주고 구분선을 강조색으로 눈에 띄게 함. 레벨캡 페어 자신의 아래쪽 가는 선은
   이 강조색 선과 몇 픽셀 간격을 두고 나란히 있어 또 가로선 2개로 보이므로(사용자 지적) 없앰
   (:has로 "바로 다음이 타이탄 레벨인 levelblock"만 콕 집어서 border-bottom을 뺌) */
.titan-settings-levelblock:has(+ .titan-settings-fullstack) {
  border-bottom: none;
}

.titan-settings-levelblock + .titan-settings-fullstack {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 2px solid var(--accent);
}

.titan-settings-stack .setting-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
}

.titan-settings-stack .custom-dropdown,
.titan-settings-stack .affix-input {
  width: 100%;
}

/* 짝 없이 혼자 스택으로 배치되는 항목(타이탄 레벨)용 - 위아래 구분선 없이 전체 폭 한 줄만 차지 */
.titan-settings-fullstack {
  grid-column: 1 / -1;
}

/* 연속 전투는 토글이라 겹칠 일이 없어서 라벨 옆 배치를 유지하되, 짝이 없어져서 혼자 전체 폭을 씀 */
.titan-settings-row-full {
  grid-column: 1 / -1;
}

/* 연속 전투 - 왼쪽이 허전해 보이지 않게 라벨+토글을 오른쪽으로 붙임 */
.titan-settings-row-end {
  justify-content: flex-end;
}

/* 2열 상태(공격력·체력 버프 타워 / 전투 제한시간·타이탄 거리)에서는 드롭다운 폭이 카드 전체가
   아니라 그 절반이라 기본 selected-value 글자 크기가 여전히 크면 ▼ 삼각형과 겹침 - 더 작게
   클램프하고, 그래도 넘치면 자간 대신 말줄임표로 처리 */
.titan-settings-stack .selected-value {
  font-size: clamp(9.5px, 2cqw, 13px);
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 타이탄 레벨은 짝 없이 혼자 카드 전체 폭을 쓰므로(반쪽 폭이 아님) 위의 축소가 필요 없음 -
   기본 드롭다운 크기(다른 페이지의 일반 커스텀 드롭다운과 동일)로 되돌림 */
.titan-settings-fullstack .selected-value {
  font-size: clamp(11px, 2.5cqw, 15px);
  padding-left: clamp(10px, 2.33cqw, 14px);
  padding-right: clamp(10px, 2.33cqw, 14px);
}

/* 카드 폭이 좁아지면 2열로는 텍스트가 도저히 안 들어가므로, 레벨/제한시간을 세로로 줄내림
   (각자 한 행 전체를 차지) - 이 블록만 스코프해서 나머지 설정 항목(자연구조물 등)은 그대로 2열 유지 */
@container (max-width: 400px) {
  .titan-settings-levelblock {
    grid-template-columns: 1fr;
  }
}

.titan-settings-row .setting-label {
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.titan-settings-row .setting-control,
.titan-settings-row .custom-dropdown,
.titan-settings-row .affix-input {
  width: 44%;
  min-width: 0;
}

.titan-settings-row .selected-value {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 타이탄: 빠른 계산 탭 - 현재 전투 설정 요약. 진짜 2열 grid + 실선 테두리로 좌우를 명확히
   나눔(칸 폭이 항상 정확히 반반이라 어긋날 일이 없음) ===== */
.titan-quick-summary {
  margin-bottom: 14px;
}

.titan-quick-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.titan-quick-summary-col {
  border-left: 1px solid var(--border-color);
  padding: 0 0 0 14px;
}

/* 왼쪽 칸은 구분선이 자기 오른쪽에 있으니 오른쪽 여백이 있어야 글자가 선에 안 붙어 보임 */
.titan-quick-summary-col:first-child {
  border-left: none;
  padding: 0 14px 0 0;
}

.titan-quick-summary-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
  font-size: 13px;
}

.titan-quick-summary-item:first-child {
  border-top: none;
}

.titan-quick-summary-item span {
  color: var(--text-sub);
}

.titan-quick-summary-item b {
  color: var(--text-main);
  text-align: right;
}

/* ===== 타이탄: 실전 시뮬레이션 탭 - 육각형 2개(인접 타일). 결합 좌표계: 육각형 1개 100x86.6,
   내 타일 중심은 원점(0,0), 상대(보스) 타일은 그 오른쪽 위 이웃(+75,-43.3) - js/pages/
   titan-page.js의 TITAN_HEX_CENTERS/HEX_NEIGHBOR 참고(SVG viewBox 시절 절대좌표 아님). 바닥은
   Three.js(js/core/hex-scene3d.js)가 이 좌표 그대로 진짜 3D로 그리고, 공룡/타이탄 아바타는
   hexScene.projectToScreen()이 계산한 화면 좌표를 받는 평면 2D 레이어 */
.titan-duel-wrap {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 보스 아바타를 키우면서(사용자 확정 - 1.6배) 3D 원근으로 카메라에 가까운 쪽이 실제 배치
     박스보다 위로 더 튀어나와 보여서, 위쪽 카드와 겹치지 않게 여백을 둠(다이노 배틀 모바일
     클리핑 때와 같은 원인 - 근접 오브젝트가 자기 레이아웃 박스를 넘어서 튀어나옴) */
  padding: 40px 0 10px;
  /* 사이드바 체력바 폭을 육각형 스테이지와 같은 기준으로 맞추기 위해 여기(공통 부모)에 선언해서
     .titan-hex-hpbar-list와 .titan-duel-field가 같은 값을 공유하게 함. 카드 폭이 넓은 화면에서도
     364px에 막혀 여백만 남고 내용물은 작게 보이던 문제(사용자 지적 - "최대한 크게 볼 수 있어야
     해") - 카드 자체 폭(실측 약 620px)에 맞춰 상한을 520px로 올림(사이드바+gap을 빼고도 잘리지
     않는 선) */
  --duel-w: min(520px, 92cqw);
}

.titan-duel-field {
  position: relative;
  padding: clamp(10px, 4cqw, 20px) 0;
}

/* 바닥(Three.js canvas)과 아바타 오버레이가 정확히 같은 박스를 공유하는 기준 무대 - 두 레이어가
   서로 다른 padding/여백을 가지면 좌표가 어긋나므로, 결합 좌표계(175x129.9) 박스는 이 하나로만
   정의하고 두 레이어 모두 여기 꽉 채워 겹침. CSS 3D(perspective/rotateX)는 더 이상 안 씀 - 바닥은
   Three.js(js/core/hex-scene3d.js)가 진짜 3D로 그리고, 아바타는 hexScene.projectToScreen()이
   계산한 화면 좌표를 그대로 left/top에 심는 평범한 2D 오버레이임(CSS rotateX+perspective 방식이
   이번 세션 내내 겪은 렌더링 버그들 - perspective 체인이 중간 래퍼에서 끊기는 버그, preserve-3d
   중첩 안에서 오버레이가 안 그려지는 버그 등 - 을 원천 차단하려고 사용자 확정으로 전면 교체함) */
.titan-duel-stage {
  position: relative;
  width: var(--duel-w);
  aspect-ratio: 175 / 129.9;
  margin: 0 auto;
}

/* Three.js가 여기에 canvas를 붙임(js/core/hex-scene3d.js의 mount()) */
.titan-duel-tilt {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.45));
}

/* 아바타 오버레이 - 평범한 2D 절대 위치 레이어(3D 변환 없음). JS(titanPositionMyAvatars/
   titanPositionBoss)가 hexScene.projectToScreen()으로 계산한 화면 좌표를 각 빌보드 슬롯의
   left/top에 심음 */
.titan-formation-group {
  position: absolute;
  inset: 0;
}

.titan-hex-anchor-popup-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 아바타 위치 앵커 - hexScene.projectToScreen()이 계산한 화면 좌표(left/top)를 그대로 받는 평범한
   2D 요소. translate(-50%,-50%)만으로 정확히 그 지점에 중심이 오므로(Three.js 카메라가 이미 진짜
   3D 투영을 해준 좌표라 CSS 쪽에서 원근을 흉내낼 필요가 없음), 예전에 이 페이지 특유로 필요했던
   rotateX 역회전/translateZ/손튜닝 translateY 보정값들이 전부 필요 없어짐(공 중심이 육각형 중심과
   안 맞던 문제, 이름표가 육각형 밖으로 나가던 문제 등 - 전부 이 보정값들을 실측으로 손튜닝해야 했던
   근본 원인이었음). left/top 전환에 트랜지션을 걸어서 대형이 바뀔 때(공룡이 죽어 마릿수가 줄 때)
   순간이동 대신 부드럽게 이동함 */
.titan-hex-billboard-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* .titan-hex-avatar는 체력바(order:-1) → 공 → 이름표를 순서대로 쌓는 flex 컬럼(다이노 배틀의
   .battle-team-slot과 동일한 방식 - 이름표도 진짜 flex 자식으로 둬서 위/아래 무게가 균형 잡히게
   함). 예전엔 이름표가 공 안의 position:absolute 오버레이였는데, 그러면 "공의 중심"만 세계좌표에
   맞추는 translateY 보정이 필요했고, 그 보정이 계산에서 안 잡히는 이름표를 육각형 밖으로 밀어내는
   버그가 있었음(사용자 지적 - 스크린샷으로 직접 확인, 이름표가 육각형 바닥 밖에 떠 있었음) - 이제는
   이름표도 flex 스택 안에 들어가서 별도 보정 없이 자연스럽게 육각형 안에 들어감.
   ※ 한때 다이노 배틀/건물 페이지처럼 체력바/텍스트를 공의 절대 위치(bottom:100%) 오버레이 자식으로
   바꿔서 아예 flex 자체를 없애려고 시도했었는데, getBoundingClientRect()로는 정상적인 박스가
   잡히는데도 실제 화면엔 전혀 그려지지 않는 현상이 실측으로 재현됨(이 구조 특유의 중첩 preserve-3d
   렌더링 버그로 추정 - 아래 .titan-hex-avatar-hpbar 주석 참고) - 그래서 flex 인-플로우 방식은
   유지하고, 이름표만 그 스택 안으로 편입시키는 방향으로 감 */
.titan-hex-avatar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.titan-hex-avatar-ball {
  position: relative;
  /* 육각형 크기 기준 통일 크기(js/core/hex-scene3d.js의 projectDiameterPx) - titanPositionMyAvatars/
     titanPositionBoss가 --avatar-diam-px로 심어줌. clamp()는 씬이 아직 마운트되기 전(탭이 열리기
     직전) 잠깐 쓰이는 폴백일 뿐 - 그 사이엔 안 보이므로 값 자체는 중요하지 않음 */
  width: var(--avatar-diam-px, clamp(30px, 11cqw, 52px));
  aspect-ratio: 1;
  border-radius: 50%;
  /* 흔들림 회전의 중심을 바닥(아래쪽)에 둠 - 리팩터 전에는 이 요소(공 모양+흔들림)가 위치
     지정용 바깥 틀과 분리돼 있지 않아서 자연스럽게 바닥 중심으로 흔들렸는데, 분리하면서
     기본값(가운데 중심)으로 바뀌어 제자리에서 팽이처럼 도는 것처럼 보였음(사용자 피드백으로
     발견) - 원래처럼 바닥에 뿌리내린 채 좌우로 기우뚱하는 느낌으로 되돌림 */
  transform-origin: 50% 100%;
}

/* 공 밑에 이름표(로그인 시 닉네임, js/ui/dino-display-ui.js) - 체력바/공과 같은 flex 스택의 정식
   자식(다이노 배틀의 .battle-team-slot-name과 동일한 방식, 사용자 확정 "공룡 밑에 이름도 넣고").
   예전엔 공(.titan-hex-avatar-ball) 안의 절대 위치(top:100%) 오버레이였는데, 그러면 이름표가
   중앙 정렬 계산에서 완전히 빠져서 육각형 밖으로 튀어나가는 버그가 있었음(사용자 지적, 위
   .titan-hex-avatar 주석 참고) - flex 자식으로 바꿔서 부모의 gap(3px)이 자동으로 공과의 간격을
   줌, 흔들림 애니메이션은 공(.titan-hex-avatar-ball)에만 걸려있어서 이름표는 흔들리지 않고
   제자리에 고정됨(체력바와 동일한 기존 동작) */
.titan-hex-avatar-name {
  font-size: 9px;
  /* "내 공룡" 이름표 색 - 다이노 배틀의 #myFormationGroup .battle-team-slot-name과 통일(사용자
     지적 - "어느 페이지는 초록색이고 어떤 페이지는 하얀색이고") */
  color: #4ade80;
}

/* 타이탄 이름표는 "내 공룡"과 달리 적(보스) 쪽이라 다이노 배틀의 #oppFormationGroup
   .battle-team-slot-name과 같은 빨강으로 - 공/체력바가 이미 빨강 계열이라 초록 글씨는 안 맞음 */
.titan-hex-avatar-name-boss {
  color: #e0473f;
  white-space: nowrap;
  /* 로그인 닉네임은 길이가 제각각이라(사용자가 직접 정함) 다이노 배틀의 .battle-team-slot-name과
     같은 방식으로 잘라냄 - 안 그러면 옆 공룡 이름표와 겹침(건물 페이지에서 실측으로 먼저 발견) */
  max-width: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 아바타 삼각 대형(공룡 1~3마리)과 보스 위치는 이제 titanPositionMyAvatars()/titanPositionBoss()가
   세계좌표로 계산해서 부모 .titan-hex-billboard-slot의 left/top에 직접 심음(다이노 배틀의
   updateStackDisplay와 같은 원리) - 예전의 slot별 고정 %, [data-count] 재배치 규칙은 필요 없어짐.
   z-index는 titanPositionMyAvatars()가 카메라 실제 깊이(projectToScreen의 distance) 기반으로 매번
   심어줌(다이노 배틀/건물과 같은 방식으로 통일) - 한때 정적값을 손으로 미리 매겨뒀었는데 앞/뒤
   방향을 반대로 착각해서 더 먼 뒤쪽 공룡이 가까운 앞쪽 공룡을 가리는 버그가 났었음(사용자 지적) -
   동적 계산으로 바꾸면 이런 실수 자체가 불가능해짐 */

/* 타이탄(보스) 아바타는 공룡 쪽보다 큼(육각형 기준 통일 크기의 1.6배 - js/core/hex-scene3d.js의
   TITAN_BOSS_DIAMETER_WORLD) - 항상 1마리뿐이라 위치는 항상 고정 중심점. clamp()는 씬 마운트 전
   폴백 */
.titan-hex-avatar-boss .titan-hex-avatar-ball {
  width: var(--avatar-diam-px, clamp(67px, 24cqw, 115px));
}

.titan-hex-avatar-mine .titan-hex-avatar-ball {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, white), var(--accent-strong) 75%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}

.titan-hex-avatar-boss .titan-hex-avatar-ball {
  background: radial-gradient(circle at 35% 30%, #ff8a80, #a4241f 75%);
  box-shadow: 0 0 14px rgba(224, 71, 63, 0.55);
}

.titan-hex-avatar.dummy-shaking .titan-hex-avatar-ball {
  animation: titan-hex-shake 0.35s ease-in-out;
}

/* 피격 흔들림 폭을 절반으로(사용자 확정 - "사이트의 모든 피격 시 떨림 정도를 절반으로 줄여") */
@keyframes titan-hex-shake {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-3deg); }
  40% { transform: rotate(2.5deg); }
  60% { transform: rotate(-2deg); }
  80% { transform: rotate(1deg); }
}

/* 앞 3자리(삼각 대형) 각자의 체력바 - 아바타 원 바로 위(order:-1로 시각 순서만 앞당김, DOM
   순서는 그대로 유지해서 기존 js의 querySelector 로직을 안 건드림).
   ※ 건물/다이노 배틀 페이지처럼 공의 절대 위치(bottom:100%) 오버레이 자식으로 바꿔서 flex 흐름을
   아예 안 타게 해보려는 시도가 있었는데, 이 페이지의 중첩 preserve-3d 구조에서는
   getBoundingClientRect() 상으로는 박스가 정상인데도 실제 화면엔 그려지지 않는 현상이 실측으로
   재현됨(위 .titan-hex-avatar 주석 참고) - 그래서 order 기반 flex 방식을 유지함 */
.titan-hex-avatar-hpbar {
  position: relative;
  order: -1;
  /* 다이노 배틀(.battle-hp-bar-mini, css/dino-battle.css)과 같은 공용 규칙으로 통일(사용자 확정
     - "이건 공룡 자체 로직에 들어가야 하는거야... 모든 페이지에서 사용해야 한다는거지") - 가로를
     공룡 실제 지름과 정확히 맞추고, 세로는 원래 바의 비율(가로 46px일 때 세로 4px)을 유지 */
  width: var(--avatar-diam-px, clamp(30px, 11cqw, 52px));
  height: max(2px, calc(var(--avatar-diam-px, clamp(30px, 11cqw, 52px)) * 4 / 46));
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.titan-hex-avatar-hpfill {
  height: 100%;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 999px;
}

/* 타이탄(보스) 체력바만 다른 공룡 체력바보다 두껍고 넓게(공룡 쪽은 요청이 없어서 기본 5px/90%
   그대로) - 안에 "현재/최대" 수치 글자가 들어갈 공간을 만들기 위함. 다른 게임들의 보스 체력바를
   참고해서 "얇고 긴 띠" 형태로(54px까지 두꺼웠던 이전 버전은 사용자 피드백으로 너무 두껍다고
   판단해서 되돌림) - 두께보다는 폭으로 여유를 확보함. 아바타 원보다 넓어져도(1.8배) 겹치는
   요소가 없어서 괜찮음 */
.titan-hex-avatar-hpbar-boss {
  /* width는 아바타 크기(--avatar-diam-px)를 그대로 참조해서 자동으로 비례. 사용자 확정 -
     "타이탄 체력바 더 얇고 양옆으로 길게" - 두께는 32px -> 9px로 줄이고(수치 글자를 안에
     넣으려고 두꺼웠던 것인데, 이제 글자를 바 위로 뺐으니(.titan-hex-avatar-hp-text) 얇아도 됨),
     배율은 1.5 -> 2.2로 늘려서 옆으로 더 길게 */
  width: calc(var(--avatar-diam-px, clamp(67px, 24cqw, 115px)) * 2.2);
  height: 9px;
}

/* 현재/최대 수치를 체력바 "위"에 표시(사용자 확정 - "체력바 위에 체력 텍스트를 표시해줘") - 예전엔
   체력바 안쪽에 꽉 채워 넣었지만(두께 32px일 때나 가능했던 방식) 체력바가 얇아지면서 더는 안 들어가
   체력바(order:-1)와 똑같은 방식으로 .titan-hex-avatar 플렉스 컬럼의 정식 자식으로 두고 order:-2로
   체력바보다 한 칸 더 위에 오게 함(음수 오프셋 없이 정상 flow라 위 오버레이 시도와 달리 확실하게
   그려짐). 큰 수(수백만~수억)라도 줄바꿈 없이 한 줄로 보이게 white-space:nowrap + 카드 폭 비례
   스케일링(cqw) 적용, 어두운 배경 위에서도 잘 읽히도록 흰 글씨 + 그림자는 그대로 유지 */
.titan-hex-avatar-hp-text {
  order: -2;
  white-space: nowrap;
  font-size: clamp(10px, 2.6cqw, 16px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

/* 표시 중인 3마리 각자의 피격/회복/공격 기여를 그 공룡 아바타 위에 개별적으로 띄움(.battle-dmg-popup
   기반 - position/애니메이션은 그대로 재사용, 크기/색만 작게 오버라이드) */
/* 기본 .battle-dmg-popup은 top:0(음수 오프셋 없음) - 예전엔 여기 top:-13px를 더 얹어서 아바타
   위로 살짝 띄웠는데, preserve-3d가 중첩된 이 구조에서는 부모 박스 바깥(음수 오프셋)으로 나가는
   요소가 아예 안 그려지는 렌더링 버그가 있어서(체력바와 같은 원인, 실측으로 확인) top 오프셋을
   빼고 기본값 그대로 씀 - 이제 아바타 바로 위 체력바 자리에서 시작해 자연스럽게 위로 떠오름 */
.titan-mini-popup {
  font-size: 13px;
}

.titan-mini-popup-dmg {
  color: #ff6b5e;
}

.titan-mini-popup-heal {
  color: #6cf27a;
}

.titan-mini-popup-attack {
  color: var(--accent);
}

/* 숨겨진(비표시) 공룡들의 체력바 - 육각형 왼쪽에 세로 1열. 막대 사이 여백을 살짝 더 줌 */
.titan-hex-hpbar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* position:relative는 이 막대 위에 개별 피격/힐/공격 팝업을 띄우기 위한 기준점 - overflow:hidden은
   빼둠(팝업이 막대 밖 위쪽으로 떠야 하는데 잘려 보이면 안 되니까). 채움 막대 자체가 이미
   border-radius를 갖고 있어서 둥근 모양은 그대로 유지됨.
   폭은 표시 중인 3마리 자기 체력바와 같은 비율(0.9(hpbar폭) × 0.26(아바타폭) × 0.5714(앵커폭) ≈
   0.1337 × 무대 폭)로 계산해서 "대기 공룡 체력바 가로길이 = 표시되는 3마리와 동일"하게 맞춤 */
.titan-hex-hpbar {
  position: relative;
  width: calc(var(--duel-w) * 0.1337);
  height: 9px;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
}

.titan-hex-hpfill {
  height: 100%;
  width: 100%;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 999px;
}

.titan-hex-hpfill-mine {
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
}

.titan-hex-hpfill-boss {
  background: linear-gradient(90deg, #a4241f, #e0473f);
}

.titan-live-stats {
  margin-top: 14px;
}

#titanLiveModeCard .battle-controls {
  margin-top: 14px;
}

#battleReport.report-box {
  margin-top: 16px;
}

/* 조합 찾기 결과의 룬 나열 줄을 누르면 프리셋에 바로 장착할 수 있음 - dummy.css의
   .dummy-optimize-best-combo는 훈련 타겟 페이지(dummy-page.js)와 공유하는 클래스라 거기엔 이
   기능이 없으므로, 클릭 가능해 보이는 스타일은 타이탄 페이지 범위로만 한정함 */
#titanOptimizeResult .dummy-optimize-best-combo {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 4px;
  margin-left: -4px;
  transition: background 0.15s;
}

#titanOptimizeResult .dummy-optimize-best-combo:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

#titanApplyPresetOverlay .btn-apply {
  margin-top: 10px;
}

#titanApplyPresetOverlay .btn-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 조합 찾기: 보유 룬 레벨 입력 목록(dummy-owned-rune-grid, 적합 룬 전부라 세로로 김) 접기/펼치기 -
   버튼은 우측에 작게 */
.titan-owned-rune-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.titan-owned-rune-header-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub);
}

.titan-owned-rune-collapse-btn {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.titan-owned-rune-collapse-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
  background: color-mix(in srgb, var(--accent) 8%, var(--input-bg));
}

.titan-owned-rune-collapse-icon {
  font-size: 10px;
  line-height: 1;
}

/* 접힌 상태 - display만 끔(DOM/입력값은 그대로 남아있어서 다시 펼치면 입력한 레벨이 그대로 보임) */
.dummy-owned-rune-grid.titan-owned-rune-grid-collapsed {
  display: none;
}