/* ===== 허수아비 페이지 전용(dummy-page.js) - 육각형 타일, 타격 이펙트, 최적 조합 찾기 =====
   css/style.css를 여러 파일로 분리한 것 중 하나 - index.html에 링크된 순서(cascade 순서)가
   원본과 동일하게 유지되도록 주의할 것 ===== */

/* ===== 허수아비 =====
   바닥(육각형)은 Three.js(js/core/hex-scene3d.js)가 그리는 진짜 WebGL 3D - CSS rotateX+
   perspective 가짜 3D를 쓰다가 이번 세션에서 여러 렌더링 버그를 겪은 뒤 사용자 확정으로 전면
   교체함. 허수아비 자신(.dummy-scarecrow)과 타격 이펙트/데미지 팝업은 여전히 평범한 2D DOM+CSS -
   위치만 dummy-page.js가 hexScene.projectToScreen()으로 계산해서 JS로 심어줌(3D 변환은 이제
   여기 전혀 없음) */
.dummy-field-card {
  container-type: inline-size;
}

/* 시작/일시정지 버튼 줄이 그 위 대미지·경과시간 카드에 바로 붙어 보인다는 피드백 - 살짝 띄움 */
#dummyLiveModeCard .battle-controls {
  margin-top: 14px;
}

.dummy-field-wrap {
  display: grid;
  justify-items: center;
  /* 육각형/허수아비 크기에 비해 위아래 여백이 과했다는 피드백 - 여백만 줄여서 그 아래 대미지/
     경과시간 카드가 더 위로 붙게 함(육각형 자체 크기는 그대로 둠) */
  padding: clamp(10px, 4cqw, 22px) 0 clamp(16px, 5cqw, 28px);
}

.dummy-hexagon,
.dummy-popup-layer {
  grid-column: 1;
  grid-row: 1;
  width: min(300px, 78cqw);
  aspect-ratio: 1 / 0.866;
}

/* Three.js가 이 안에 canvas를 붙임(js/core/hex-scene3d.js의 mount()) - ResizeObserver가
   이 요소 크기를 직접 관찰하므로 별도 크기 지정 불필요, 위 .dummy-hexagon 규칙의 width/
   aspect-ratio가 그대로 캔버스 크기의 기준이 됨 */
.dummy-hexagon {
  position: relative;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.45));
}

/* 허수아비를 담는 평범한 2D 오버레이(3D 변환 없음) - 바닥(.dummy-hexagon)과 정확히 같은 크기·
   중심을 공유하는 자식이라, 위치는 dummy-page.js가 hexScene.projectToScreen()으로 계산해서
   .dummy-scarecrow에 직접 left/top을 심어줌 */
.dummy-target-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 허수아비의 "가장 밑부분"이 위치(left/top, JS가 심어줌)에 오도록 함. 자기 자신의 전체 높이만큼
   위로(translateY(-100%)) 밀어올리면 "이미지의 아래쪽 끝"이 정확히 그 지점에 위치하게 됨.
   추가로 translateX(6%)를 더 준 건 - 이미지 박스 자체는 정확히 그 위치에 있어도 Scarecrow_1.png
   원본 그림 안에서 실제 허수아비 그림(캐릭터)이 여백 없이 딱 붙어있지 않고 왼쪽으로 치우쳐 그려져
   있어서(오른쪽에 빈 여백이 더 많음), 그 안쪽 그림 기준으로 보정해서 육각형 중심과 맞춘 것 */
.dummy-scarecrow {
  position: absolute;
  width: 40%;
  height: auto;
  /* Scarecrow_1.png 원본 비율(366x405)을 명시해서 어떤 상황에서도(로딩 중 레이아웃, 극단적인
     컨테이너 크기 등) width%/height:auto 추론에 기대지 않고 원본 그대로의 비율이 보장되게 함
     (사용자 지적 - "찌그러지지 않은 이미지 원본을 그대로 보여줘야 함") */
  aspect-ratio: 366 / 405;
  transform: translate(-50%, -100%) translateX(6%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  user-select: none;
}

/* 맞을 때마다 살짝 떨리는 효과 - 발밑(transform-origin)을 축으로 좌우로 흔들려서 바닥에 박혀
   있는 것처럼 자연스럽게 흔들림 */
.dummy-scarecrow.dummy-shaking {
  animation: dummy-shake 0.35s ease-in-out;
}

/* 피격 흔들림 폭을 절반으로(사용자 확정 - "사이트의 모든 피격 시 떨림 정도를 절반으로 줄여") -
   위치 보정용 translate(-50%,-100%) translateX(6%)는 흔들림이 아니라서 그대로 둠 */
@keyframes dummy-shake {
  0%, 100% { transform: translate(-50%, -100%) translateX(6%) rotate(0deg); }
  20% { transform: translate(-50%, -100%) translateX(6%) rotate(-2.5deg); }
  40% { transform: translate(-50%, -100%) translateX(6%) rotate(2deg); }
  60% { transform: translate(-50%, -100%) translateX(6%) rotate(-1.5deg); }
  80% { transform: translate(-50%, -100%) translateX(6%) rotate(1deg); }
}

.dummy-popup-layer {
  position: relative;
  pointer-events: none;
}

/* 대미지 숫자는 허수아비 머리 위에서 뜨도록 배치(발이 50% 지점에 있고 그 위로 몸통 전체가
   올라가 있으므로, 머리는 50%보다 한참 위) */
.dummy-dmg-popup {
  top: -6%;
}

.dummy-hit-effect {
  position: absolute;
  left: 50%;
  top: 26%;
  width: 26%;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* 원본 이펙트 이미지(대부분 흰색/밝은 회색 + 투명 배경)를 빨갛게 물들이는 표준 CSS 트릭:
     brightness(0)로 실루엣(검정+알파)만 남긴 뒤 invert/sepia/saturate/hue-rotate로 재채색 */
  filter: brightness(0) saturate(100%) invert(20%) sepia(89%) saturate(6142%) hue-rotate(2deg) brightness(100%) contrast(112%)
    drop-shadow(0 0 10px rgba(255, 40, 30, 0.55));
  animation: dummy-hit-flash 0.4s ease-out forwards;
}

/* 다이노 배틀/타이탄/허수아비 전부 - 피격 이펙트가 대상(공룡/타이탄/허수아비)보다 뒤에 그려지는
   버그가 있었음(사용자 지적). 원인이 두 가지나 겹쳐서(① preserve-3d가 여러 겹 중첩되면 같은
   깊이의 형제 요소끼리 DOM 순서를 안 지키는 렌더링 버그, ② 피격 흔들림 애니메이션이 filter를 쓰는
   요소는 CSS 스펙상 강제로 평면화(flatten)돼서 그 요소의 preserve-3d 자체가 무시됨 - translateZ로
   깊이를 줘도 소용없어짐) - 3D 깊이 다툼을 아예 포기하고 화면 좌표(position:fixed)로 직접 튀어
   나오게 해서 모든 3D 컨텍스트를 통째로 우회함. JS가 대상의 실제 화면 좌표(getBoundingClientRect)를
   재서 left/top/width를 px로 직접 심어줌 */
.dummy-hit-effect-fixed {
  position: fixed;
  z-index: 999;
}

@keyframes dummy-hit-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--hit-angle, 0deg)) scale(0.4); }
  30% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--hit-angle, 0deg)) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--hit-angle, 0deg)) scale(1.35); }
}

/* ===== 허수아비 "최적 조합 찾기" - 보유 룬 14종 레벨 입력 목록 + 결과 ===== */

.dummy-optimizer-title {
  margin: 0 0 6px;
  font-size: 14px;
}

.dummy-owned-rune-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin: 10px 0 14px;
}

.dummy-owned-rune-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
  /* grid/flex 아이템은 기본적으로 내용물(nowrap 텍스트) 너비 밑으로 안 줄어듦 - 좁은 화면(약
     330px 이하)에서 이 행이 grid 칸보다 넓어져 카드 전체가 가로로 밀려나며 스크롤이 생기던 원인.
     min-width:0으로 줄어들 수 있게 해야 아래 이름의 ellipsis도 실제로 작동함 */
  min-width: 0;
}

.dummy-owned-rune-name {
  font-size: 12.5px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.dummy-owned-rune-level {
  width: 48px;
  height: 30px;
  padding: 4px 6px;
  text-align: center;
  flex-shrink: 0;
}

.dummy-optimize-best-tile {
  grid-column: 1 / -1;
}

/* 조합 찾기 결과 3개(생존 최고/대미지 최고/균형)를 각각 하나의 박스로 눈에 띄게 구분 - 안쪽
   타일(.report-tile)은 그대로 --input-bg를 쓰므로, 바깥 박스는 --card-bg로 둬서 테두리로만
   구분되게 하고 색이 겹쳐 밋밋해 보이지 않게 함 */
.dummy-optimize-result-box {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  background: var(--card-bg);
}

.dummy-optimize-result-box + .dummy-optimize-result-box {
  margin-top: 10px;
}

.dummy-optimize-best-combo {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.6;
  margin-top: 2px;
}

.dummy-optimize-runner-ups {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dummy-optimize-runner-up {
  font-size: 11.5px;
  color: var(--text-sub);
}