:root {
  /* 공통 등급 색상 */
  --일반: #9e9e9e;
  --희귀: #4caf50;
  --에픽: #ff9800;
  --유니크: #eb5f0e;
  --전설: #ba0000;

  /* 베이스: 다크 사파이어 / 서브(인터랙티브) 컬러: 골드로 통일 */
  --primary: #d1a44f;
  --accent: #d1a44f;
  --accent-strong: #b98a37;
  --brand-blue: #3f66c9;

  /* 다크 모드 (기본) */
  --bg-color: #141b26;
  --card-bg: #1c2636;
  --input-bg: #263243;
  --text-main: #eef1f6;
  --text-sub: #949cb0;
  --border-color: rgba(255, 255, 255, 0.10);
  --slot-border: #303c50;
  --recessed-bg: rgba(0, 0, 0, 0.2);
  /* 화면 비율 설정 */
  --p-base: clamp(6px, 3vw, 24px);
  --container-max: 600px; 
  --card-max: 560px;
  /* 폰트 크기 설정 */
 --fs-notice: clamp(11px, 0.5vw + 10px, 14px);
  --m-notice: clamp(4px, 1vh, 12px);
  --fs-h2: clamp(16px, 1.2vw + 12px, 20px);
  --fs-label: clamp(12px, 0.5vw + 10px, 14px);
  --m-bottom: clamp(8px, 2vh, 20px);
}

/* 라이트 모드 클래스
   예전엔 배경/카드/입력칸이 다 거의 흰색 한 덩어리라(#f1f3f7/#ffffff/#edf0f5) 층 구분이 안 되고
   눈부심만 있었음. 페이지 배경을 확실히 더 어둡게 잡아서 카드가 그 위에 "떠 보이게" 하고,
   테두리/보조 텍스트도 더 진하게 해서 흰 바탕 위에서도 구획이 또렷하게 보이도록 다시 잡음. */
body.light-mode {
  --primary: #a8762a;
  --accent: #a8762a;
  --accent-strong: #8f6120;
  --brand-blue: #2c4a92;
  --bg-color: #e4e9f1;
  --card-bg: #ffffff;
  --input-bg: #edf1f7;
  --text-main: #1a2130;
  --text-sub: #576079;
  --border-color: rgba(15, 25, 55, 0.16);
  --slot-border: #c7cee0;
  --recessed-bg: rgba(15, 25, 55, 0.06);
}

/* 사이트 전체(HTML, BODY) 스크롤 바 숨기기 */
html, body {
  -ms-overflow-style: none;
  /* IE, Edge */
  scrollbar-width: none;
  /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

body {
  font-family: "Pretendard", sans-serif;
  background: var(--bg-color);
  color: var(--text-main);
  padding: clamp(10px, 3vh, 30px) clamp(4px, 1vw, 10px);
  display: flex;
  flex-direction: column;
  /* 세로 방향으로 쌓이게 */
  align-items: center;
  /* 가로축 중앙 정렬 */
  margin: 0;
  min-height: 100vh;
  transition: background 0.5s, color 0.5s;
  overflow-x: hidden;
  /* 가로 스크롤 방지 */
  -webkit-user-select: none;  /* Safari */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* IE/Edge */
  user-select: none;          /* 표준 */
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.container {
  /* 인라인 스타일 30px 대신 아래와 동일한 변수 사용 */
  margin-top: var(--m-notice);
  width: min(100%, 600px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--p-base);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* 페이지 콘텐츠(#app)가 카드 여러 개로 구성될 때 카드 사이 간격을 일괄 적용 */
#app {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* 내 공룡 페이지는 입력 항목이 많아 PC 화면에서 세로로 과하게 길어지므로,
   넓은 화면에서만 컨테이너 폭을 넓혀 좌우 여백을 활용함 (모바일은 기존 그대로) */
@media (min-width: 860px) {
  body[data-page="my-dino"] .container {
    width: min(100%, 860px);
  }
}

.card {
  container-type: inline-size;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: var(--p-base); 
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

.button-group,
.grid-2col {
  display: flex;
  flex-wrap: nowrap;
  /* 가로 배열 유지 */
  gap: 8px;
  width: 100%;
}

.button-group button,
.grid-2col > div {
  flex: 1;
  /* 모든 요소가 동일한 비율로 너비를 나눠 가짐 */
  min-width: 0;
  /* flex 아이템이 칸을 뚫고 나가는 현상 방지 */
}

.warning {
  text-align: center;
  color: var(--text-sub);
  font-size: var(--fs-notice);
  margin: var(--m-notice) 0;
  line-height: 1.3;
  word-break: keep-all;
}

/* .card 안에 있는 h2라고 명시하여 우선순위를 높입니다 */
.card h2 {
  display: block;
  width: 100%;
  font-size: clamp(10px, 4cqw, 20px);
  font-weight: 500;
  color: var(--text-main);
  margin-top: 0;
  margin-bottom: calc(var(--m-notice) + 10px) !important;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  word-break: keep-all;
}

.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

/* 내 공룡 탭 패널 전용 여백 조정(타이탄 페이지의 .input-grid는 위에 h2가 있어서 건드리지 않음).
   패널 자체가 이미 위쪽 padding(--p-base)을 갖고 있어서, 각 패널의 첫 행 label까지 추가로
   margin-top을 주면 다른 여백보다 이중으로 커짐 -> 첫 행만 0으로. */
.dino-tab-panel .input-grid > div:first-child label {
  margin-top: 0;
}

/* 첫 자식이 VIP처럼 한 줄을 통째로 차지(.full-width)하는 게 "아니라" 별자리/둥지·알스킨처럼
   처음부터 두 칸이 나란히 첫 행을 이루는 경우엔, 옆 칸(둘째 자식)도 같은 첫 행이라 0으로 맞춤 */
.dino-tab-panel .input-grid > div:first-child:not(.full-width) + div label {
  margin-top: 0;
}

/* 기본 스탯 패널의 VIP(첫 행) 바로 다음 행(체력/공격력)은 전역 label 여백이 과해서 스코프 축소.
   별자리/둥지·알스킨 패널의 2·3번째 행은 원래 여백을 그대로 둬야 다른 행과 정렬이 맞음. */
.dino-tab-panel[data-panel="base"] .input-grid > div:nth-child(2) label,
.dino-tab-panel[data-panel="base"] .input-grid > div:nth-child(3) label {
  margin-top: 6px;
}

.custom-dropdown .selected-value {
  font-weight: 400;
}

label {
  display: block;
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 18px;
  margin-bottom: 6px;
  font-weight: 500;
}

input, select {
  width: 100%;
  /* 카드 폭(cqw) 기준으로 PC 화면 값(48px)을 상한선 삼아 그대로 비례 축소됨 */
  height: clamp(34px, 8cqw, 48px);
  padding: clamp(8px, 2cqw, 12px) clamp(10px, 2.33cqw, 14px);
  background: var(--input-bg);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: clamp(11px, 2.5cqw, 15px);
  color: var(--text-main);
  box-sizing: border-box;
  outline: none;
  transition: background 0.2s, border 0.2s;
}

input:focus, select:focus {
  border-color: var(--primary);
}

/* +값 / +값% 형태로 표시하는 접두/접미 입력창 (별자리, 둥지·알스킨에서 사용) */
.affix-input {
  position: relative;
}

.affix-input input {
  padding-left: 26px;
}

.affix-input.has-suffix input {
  padding-right: 28px;
}

.affix-input .affix-prefix,
.affix-input .affix-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-sub);
  font-size: 15px;
  pointer-events: none;
}

.affix-input .affix-prefix {
  left: 14px;
}

.affix-input .affix-suffix {
  right: 14px;
}

.full-width {
  grid-column: 1 / -1;
}

.slot-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0px;
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

.slot {
  aspect-ratio: 1;
  background-image: url("../assets/rune slot image folder/RuneSlot.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  /* 레이아웃 설정 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.slot-img {
  width: 70%; /* 슬롯 이미지보다 작게 설정하여 룬이 중앙에 오게 함 */
  height: 70%;
  object-fit: contain;
  pointer-events: none;
}

.slot-plus-img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.85;
}
/* 선택된 슬롯에 적용될 스타일 */
.slot.active {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 65%, transparent));
  z-index: 5;
  transition: filter 0.2s ease;
}

/* 슬롯 내 컨테이너 설정 */
.slot .rune-img-container {
  position: relative; /* 배지의 기준점 */
  overflow: visible !important; 
}

.slot-lv-tag {
  position: absolute;
  top: 5%;
  right: 5%;
  
  /* 배지 크기: 슬롯의 약 35% (기존 28px 대신 비율로) */
  width: 35%;
  height: 35%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  
  font-size: clamp(9px, 3.2cqw, 16px);
  font-weight: 900;
  line-height: 1;
  
  color: white;
  text-shadow: 1px 1px 2px #000;
  
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  /* 숫자가 이미지 정중앙에 오도록 미세 조정 (이미지 모양에 따라 필요시 사용) */
  padding-top: 1px; 
}

/* 5레벨 단위 배경 이미지 매핑 */
.slot-lv-tag.lv-5  { background-image: url("../assets/rune image folder/RuneLevelGrade_0.png"); }
.slot-lv-tag.lv-10 { background-image: url("../assets/rune image folder/RuneLevelGrade_1.png"); }
.slot-lv-tag.lv-15 { background-image: url("../assets/rune image folder/RuneLevelGrade_2.png"); }
.slot-lv-tag.lv-20 { background-image: url("../assets/rune image folder/RuneLevelGrade_3.png"); }
.slot-lv-tag.lv-25 { background-image: url("../assets/rune image folder/RuneLevelGrade_4.png"); }
.slot-lv-tag.lv-30 { background-image: url("../assets/rune image folder/RuneLevelGrade_5.png"); }
.slot-lv-tag.lv-31 { background-image: url("../assets/rune image folder/RuneLevelGrade_6.png"); }

/* 룬 프리셋 버튼 (가로 스크롤, 9개 고정) */
.preset-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 2px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
  cursor: grab;
  user-select: none;
}

.preset-row.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.preset-row::-webkit-scrollbar {
  height: 4px;
}

.preset-row::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}

.preset-btn {
  flex: 0 0 auto;
  /* 가로 스크롤 대상이라 폭이 카드 크기와 무관하게 고정돼 있었음 -> 다른 요소처럼 카드 폭 비례로 축소.
     드래그 스크롤은 마우스 이동량(pageX)과 scrollLeft 차이만 쓰므로 버튼 크기와는 무관해서 영향 없음.
     최소치가 룬 슬롯(.slot, 하한 없이 그리드 비례로 계속 줄어듦)보다 높아서 좁은 화면에서 프리셋만
     유독 안 줄고 커 보인다는 피드백 - 최소치를 살짝 낮춤 */
  width: clamp(44px, 12.67cqw, 76px);
  aspect-ratio: 153 / 119;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.preset-btn-name {
  max-width: 82%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  pointer-events: none;
  /* 배지 이미지 아래쪽에 그림자 여백이 있어서 이미지의 실제 중심이 살짝 위쪽에 있음 -> 글자를 그만큼 올려서 맞춤 */
  margin-top: -3px;
}

.preset-edit-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.preset-name-input {
  width: 82%;
  font-size: 11px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: #fff;
  padding: 1px 2px;
}

/* 룬 목록 스크롤 영역 */
.rune-scroll-container {
  max-height: 300px;
  /* 목록의 최대 높이 (이후 스크롤 발생) */
  overflow-y: auto;
  /* 세로 스크롤 활성화 */
  padding-right: 5px;
  /* 스크롤바 디자인 (선택 사항) */
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}

/* 크롬, 사파리용 스크롤바 숨기기 혹은 디자인 */
.rune-scroll-container::-webkit-scrollbar {
  width: 4px;
}

.rune-scroll-container::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}

#runePicker {
  display: none;
  margin-top: 15px;
  background: var(--input-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 15px;
}

.rune-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 2vw, 15px);
  width: 100%;
  padding: 0 !important;
  margin: 0 auto !important;
  justify-items: center;
  box-sizing: border-box;
  align-items: start;
}

.rune-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 5px 0;
  box-sizing: border-box;
}

/* 현재 컨텍스트(타이탄 등)에 적합하지 않은 룬: 구분선 아래에 흐리게 표시 */
.rune-item-dim {
  opacity: 0.4;
  filter: grayscale(50%);
}

.rune-img-container {
  width: 90%;
  aspect-ratio: 1 / 1;
  margin: 0 auto 8px;
  max-width: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  /* [추가] 기존 선과 배경색 강제 제거 */
  border: none !important;
  background-color: transparent !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.rune-img-container[style*="일반"] { background-image: url("../assets/rune slot image folder/RuneSlotBG_Normal.png"); }
.rune-img-container[style*="희귀"] { background-image: url("../assets/rune slot image folder/RuneSlotBG_Rare.png"); }
.rune-img-container[style*="에픽"] { background-image: url("../assets/rune slot image folder/RuneSlotBG_Epic.png"); }
.rune-img-container[style*="유니크"] { background-image: url("../assets/rune slot image folder/RuneSlotBG_Unique.png"); }
.rune-img-container[style*="전설"] { background-image: url("../assets/rune slot image folder/RuneSlotBG_Legendary.png"); }

.rune-img-container img {
  width: 75% !important; 
  height: 75% !important;
  object-fit: contain;
  display: block;
}

.rune-label {
  /* 글자 크기도 화면이 작아지면 미세하게 조정 */
  font-size: clamp(9px, 2.5vw, 11px);
  font-weight: bold;
  color: var(--text-main);
  text-align: center;
  width: 100%;
  word-break: keep-all;
  line-height: 1.2;
}

/* 기존 로직 유지 */
#unsuitableGrid .rune-img-container {
  filter: grayscale(0.5) opacity(0.8);
}

#runeDetail {
  display: none;
  margin-top: 15px;
  padding: 15px;
  background: var(--card-bg);
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

/* 모바일 전용 미세 조정 (미디어 쿼리 최소화) */
@media (max-width: 480px) {
  .rune-img-container {
    /* 모바일에서는 테두리 두께를 살짝 줄여 공간 확보 */
    border-width: 1.5px;
    border-radius: 8px;
  }
}

.desc-box {
  font-size: 13px;
  color: var(--text-main);
  margin: 10px 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--input-bg);
  white-space: pre-line;
}

.btn-apply {
  width: 100%;
  padding: 13px;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s;
}

.btn-apply:active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.btn-simulate {
  width: 100%;
  font-size: clamp(16px, 1.2vw + 12px, 20px);
  padding: 1em 0;
  min-height: 3em;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #1a1206;
  border: none;
  border-radius: 8px; /* 8px 혹은 0.5em */
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-simulate:active {
  transform: scale(0.98);
  background: color-mix(in srgb, var(--accent-strong) 85%, black);
}

/* 전투가 진행 중일 때(전투 시작 버튼을 누른 뒤) 버튼이 계속 눌려있는 상태처럼 보이도록 함.
   ":active"는 마우스를 누르고 있는 그 순간만 적용되는 데 반해, 이건 battlePhase가 idle을
   벗어나 있는 동안 JS로 계속 유지되는 상태 */
.btn-simulate.is-pressed {
  background: color-mix(in srgb, var(--accent-strong) 88%, black);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(1px);
}

/* .report-box는 .card와 함께 붙어서 카드와 동일한 배경/테두리를 쓰고, 표시 여부만 제어함 */
.report-box {
  display: none;
  line-height: 1.6;
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 1.67cqw, 10px);
}

.report-tile {
  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;
}

.metric-value.accent {
  color: var(--accent);
}

.report-chart-section {
  margin-top: 20px;
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
}

.report-chart-label {
  color: var(--text-main);
  font-size: 14px;
  margin-bottom: 10px;
}

.report-chart-box {
  background: var(--recessed-bg);
  border-radius: 8px;
  padding: 10px;
  height: clamp(150px, 45cqw, 240px);
  position: relative;
}

.chart-tooltip {
  display: none;
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.chart-tooltip-time {
  font-size: 10px;
  color: var(--text-sub);
}

.chart-tooltip-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.report-survival {
  text-align: center;
  margin-top: 10px;
  color: var(--accent);
  font-weight: bold;
  font-size: 1.1em;
}

.app-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 1000;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.3s;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-btn {
  background: none;
  border: none;
  color: var(--text-main);
  cursor: pointer;
}

.app-title .brand {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-blue);
}

.app-title .sub {
  font-size: 11px;
  color: var(--text-main);
}

/* ===== 설정 목록 행 (아이콘 + 라벨 + 컨트롤) ===== */
.setting-list {
  margin-top: 20px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border-color);
}

.setting-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  color: var(--text-main);
}

.setting-control {
  width: auto;
  max-width: 140px;
}

.setting-control input {
  padding-right: 40px;
}

/* ===== 타이탄 페이지: 관련 수치 카드 ===== */
.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;

  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;
}

.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;
}

.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;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  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-empty {
  font-size: 13px;
  color: var(--text-sub);
  text-align: center;
  padding: 6px 0;
}

/* ===== 내 공룡 페이지 전용: 공통 스탯 리드아웃 ===== */
.stat-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
}

.stat-readout-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-readout-label {
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
}

.stat-readout-value {
  font-size: clamp(14px, 4.2cqw, 19px);
  font-weight: 600;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.stat-readout-value.accent {
  color: var(--accent);
}

/* 사이드바 애니메이션 및 스타일 */
.side-menu {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100%;
  background: var(--card-bg);
  z-index: 2000;
  transition: 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.side-menu.open {
  left: 0;
}

.side-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
  flex-shrink: 0;
}

/* 정체성(닉네임)+주 내비게이션은 위, 설정류(테마/로그)는 항상 맨 아래로 고정 -
   흔히 쓰는 앱 사이드바 구성(계정 → 메뉴 → 설정) */
.menu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding-top: 10px;
}

.menu-bottom {
  margin-top: auto;
}

.menu-footer-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border: none;
  border-top: 1px solid var(--border-color);
  background: none;
  color: var(--text-sub);
  font-size: 11px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}


.menu-footer-link:hover {
  color: var(--text-main);
}

/* ===== 개인정보처리방침 페이지 ===== */
.privacy-updated {
  color: var(--text-sub);
  font-size: 12px;
  margin: 4px 0 12px;
}

.privacy-lead {
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

.privacy-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1.6;
}

.privacy-note a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}

.privacy-note b {
  color: var(--text-main);
}

.privacy-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1.7;
}

.privacy-list li {
  margin-bottom: 6px;
}

.privacy-list b {
  color: var(--text-main);
}

.privacy-contact {
  font-weight: 700;
  color: var(--accent);
}

/* ===== 프로필 페이지 ===== */
.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-avatar {
  width: 48px;
  height: 48px;
  font-size: 20px;
  flex-shrink: 0;
}

.profile-nickname {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
}

.profile-email {
  font-size: 13px;
  color: var(--text-sub);
  margin-top: 2px;
}

.profile-meta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-sub);
}

.profile-danger-zone {
  border: 1px solid color-mix(in srgb, #ff4444 35%, var(--border-color));
}

.profile-delete-btn {
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #ff4444;
  background: color-mix(in srgb, #ff4444 12%, transparent);
  color: #ff4444;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.profile-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 프로필의 친구 목록 카드 - 한 페이지에 5명씩, 넘치면 화살표로 페이지 단위 슬라이드(책장 넘기듯) */
.profile-friend-viewport {
  overflow: hidden;
}

.profile-friend-track {
  display: flex;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.profile-friend-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  min-width: 0;
}

.profile-friend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.profile-friend-avatar {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

.profile-friend-name {
  max-width: 100%;
  font-size: 11.5px;
  color: var(--text-main);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-friend-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.profile-friend-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-main);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-friend-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.profile-friend-page-indicator {
  font-size: 12px;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}

.stat-visibility-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 4px;
}

.stat-visibility-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
}

.stat-visibility-item input {
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
}

.menu-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

/* 다크/라이트 모드 전환: 안으로 살짝 파인 알약 트랙에 "다크모드"/"라이트모드"를 양쪽에 항상
   써두고, 트랙보다 2배 넓은 그라데이션 이미지(가운데만 노란 "봉우리", 양 끝은 투명한 모양) 하나를
   배경으로 깔아서 background-position만 슬라이드시킴. 이 봉우리가 오른쪽 끝 -> 트랙 한가운데 ->
   왼쪽 끝으로 전환 내내 끊김 없이 쭉 이어서 이동하는 것처럼 보임(테두리 있는 도형이 움직이는 게
   아니라 경계 없는 빛 덩어리가 흘러가는 느낌). 글자는 opacity로 따로 켜고 끔. */
.theme-slider {
  position: relative;
  display: flex;
  width: 100%;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: var(--input-bg);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);
  padding: 3px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}

.theme-slider-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(
    to right,
    rgb(from var(--accent) r g b / 0) 0%,
    rgb(from var(--accent) r g b / 0) 25%,
    var(--accent) 50%,
    rgb(from var(--accent) r g b / 0) 75%,
    rgb(from var(--accent) r g b / 0) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 0% 0; /* 기본(다크모드): 봉우리가 트랙 오른쪽 끝에 딱 붙어 있음 */
  transition: background-position 1.15s ease;
  pointer-events: none;
}

.theme-slider.is-light .theme-slider-glow {
  background-position: 100% 0; /* 라이트모드: 봉우리가 트랙 왼쪽 끝으로 이동 */
}

.theme-slider-label {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-main);
  transition: opacity 0.15s ease;
}

.theme-slider-label-light {
  opacity: 0;
}

.theme-slider.is-light .theme-slider-label-dark {
  opacity: 0;
}

.theme-slider.is-light .theme-slider-label-light {
  opacity: 1;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1999;
}

.menu-divider {
  border-top: 1px solid var(--border-color);
  margin: 16px 0;
}

.login-btn {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #1a1206;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: transform 0.15s ease;
}

.login-btn:active {
  transform: scale(0.98);
  background: color-mix(in srgb, var(--accent-strong) 85%, black);
}

/* 로그인 상태 표시줄: 아바타+닉네임+액션을 각자 테두리 박스로 나누지 않고 한 줄로 흐르게 구성 */
#authRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auth-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  cursor: pointer;
}

.auth-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #1a1206;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

.auth-username {
  min-width: 0;
  color: var(--text-main);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.auth-text-btn {
  flex-shrink: 0;
  padding: 6px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-sub);
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.auth-text-btn:hover {
  background: var(--input-bg);
  color: var(--text-main);
}

/* ===== 로그인/회원가입/비밀번호 찾기 모달 ===== */
#authModalOverlay {
  /* .menu-overlay(1999)보다 위, .side-menu(2000)보다도 위에 항상 뜨도록 */
  z-index: 2099;
}

.auth-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  z-index: 2100;
  container-type: inline-size;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.auth-modal.open {
  display: block;
}

/* ===== 친구 초대 배너 (친구 기능 3단계) =====
   어느 페이지에 있든, 심지어 다른 모달이 열려 있어도 위에 뜨도록 z-index를 가장 높게 잡음.
   화면 상단 고정 바 형태 - 토스트처럼 사라지지 않고 수락/거절할 때까지 유지됨. */
.friend-invite-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2200;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  flex-wrap: wrap;
}

.friend-invite-text {
  color: #1a1206;
  font-size: 13px;
  font-weight: 700;
}

.friend-invite-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.friend-invite-actions button {
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.friend-invite-accept {
  background: #1a1206;
  color: var(--accent);
}

.friend-invite-decline {
  background: rgba(26, 18, 6, 0.15);
  color: #1a1206;
}

/* 친구 요청 등 "그냥 알림"용 짧게 떴다 사라지는 토스트. 수락/거절이 필요한
   .friend-invite-banner(상단 고정)와 달리 화면 하단에 살짝 떴다가 자동으로 사라짐 */
.friend-toast {
  display: none;
  align-items: center;
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2200;
  max-width: min(90vw, 360px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
}

.auth-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.auth-modal-header span {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
}

.auth-field {
  margin-bottom: 14px;
}

.auth-field label {
  display: block;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 6px;
}

.auth-field input {
  width: 100%;
  box-sizing: border-box;
}

.auth-nickname-hint {
  font-size: 12px;
  margin-top: 6px;
}

.friend-search-row {
  display: flex;
  gap: 8px;
}

.friend-search-row input {
  flex: 1;
  min-width: 0;
}

.friend-search-btn {
  flex-shrink: 0;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #1a1206;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.friend-search-btn:active {
  transform: scale(0.97);
  background: color-mix(in srgb, var(--accent-strong) 85%, black);
}

.auth-nickname-hint-good {
  color: #2ecc71;
}

.auth-nickname-hint-bad {
  color: #ff4444;
}

/* ===== 친구 목록 행 ===== */
.friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
}

.friend-row:first-child {
  border-top: none;
}

.friend-row-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.friend-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.friend-row-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.auth-submit-btn {
  margin-top: 6px;
}

.auth-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.5;
  cursor: pointer;
}

.auth-consent-row input {
  width: 16px;
  height: 16px;
  padding: 0;
  margin-top: 2px;
  background: none;
  flex-shrink: 0;
}

.auth-consent-row span {
  flex: 1;
  min-width: 0;
}

.auth-consent-row a {
  color: var(--accent);
}

.auth-modal-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 13px;
}

.auth-modal-links a {
  color: var(--text-sub);
  text-decoration: none;
}

.auth-modal-links a:hover {
  color: var(--accent);
}

.auth-modal-error {
  color: #ff4444;
  background: rgba(255, 68, 68, 0.1);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 14px;
}

.auth-modal-success {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 4px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 6px;
}

/* 토글 스위치 디자인 */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  margin: 0; /* 전역 label { margin-top:18px; margin-bottom:6px } 상속 차단 - .switch도 label이라 안 막으면 밀림 */
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 22px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* ON 상태일 때의 배경색을 골드 악센트로 변경 */
input:checked + .slider {
  background-color: var(--accent);
}

/* ON 상태일 때 동그라미(before)가 이동하는 로직 */
input:checked + .slider:before {
  transform: translateX(22px);
}

.hp-bar-container {
  background: #444;
  border-radius: 10px;
  height: 20px;
  width: 100%;
  margin: 10px 0;
  position: relative;
  overflow: hidden;
}

.hp-bar-fill {
  background: linear-gradient(90deg, #e74c3c, #2ecc71);
  height: 100%;
  width: 0%;
  transition: width 0.5s ease;
}

.min-record-text {
  font-size: 11px;
  color: var(--text-sub);
  text-align: right;
  display: block;
  margin-top: -5px;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 20px;
  cursor: pointer;
}

.custom-dropdown {
  position: relative;
  width: 100%;
}

.selected-value {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  /* input/select와 같은 기준으로 카드 폭에 비례해서 줄어듦(PC 값이 상한선) */
  height: clamp(34px, 8cqw, 48px);
  padding: clamp(8px, 2cqw, 12px) clamp(10px, 2.33cqw, 14px);
  line-height: clamp(16px, 3.67cqw, 22px);
  font-size: clamp(11px, 2.5cqw, 15px);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  color: var(--text-main);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.selected-value::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-sub);
}

.dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  z-index: 10000;
  padding: 0;
  margin: 0;
  list-style: none;
  -ms-overflow-style: none;
  /* IE, Edge */
  scrollbar-width: none;
  /* Firefox */
}

b .dropdown-list::-webkit-scrollbar {
  display: none;
}

.dropdown-list li {
  padding: clamp(7px, 1.67cqw, 10px);
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  font-size: clamp(11px, 2.33cqw, 14px);
}

.dropdown-list li:hover {
  background: var(--input-bg);
  color: var(--primary);
}

/* VIP 드롭다운: 항목마다 배지 이미지 + 설명 텍스트가 함께 들어감.
   닫힌 상태 박스는 다른 입력칸/드롭다운과 높이를 맞춰야 해서 세로 패딩을 거의 없애고
   그만큼 아이콘이 박스 안을 거의 꽉 채우도록 함. 모든 크기는 카드 폭(cqw) 기준으로
   PC 화면 값을 상한선 삼아 비례 축소되어, 폭이 좁아져도 세로만 뚱뚱해지지 않음 */
.vip-selected-value {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.67cqw, 10px);
  text-align: left;
  padding: clamp(0px, 0.5cqw, 2px) clamp(24px, 5.67cqw, 34px) clamp(0px, 0.5cqw, 2px) clamp(8px, 2cqw, 12px);
}

.vip-dropdown-list li.vip-option {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.67cqw, 10px);
  padding: clamp(4px, 1cqw, 6px) clamp(7px, 1.67cqw, 10px);
}

.vip-option-icon {
  position: relative;
  width: clamp(46px, 11.17cqw, 67px);
  height: clamp(46px, 11.17cqw, 67px);
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 평소(닫힌 상태)에 보이는 아이콘: 세로 패딩을 거의 없앤 만큼 박스 높이에 거의 꽉 차게 */
.vip-option-icon.small {
  width: clamp(30px, 7.33cqw, 44px);
  height: clamp(30px, 7.33cqw, 44px);
}

.vip-option-num {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 800;
  font-size: clamp(15px, 3.67cqw, 22px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.vip-option-icon.small .vip-option-num {
  font-size: clamp(12px, 2.83cqw, 17px);
}

.vip-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  min-width: 0;
}

.vip-option-title {
  font-weight: 700;
  font-size: clamp(10px, 2.17cqw, 13px);
  color: var(--text-main);
}

.vip-option-desc {
  font-size: clamp(9px, 1.83cqw, 11px);
  color: var(--text-sub);
  white-space: nowrap;
}

/*피해 감소량, 흡혈량 표시 전환*/
#resRed,
#resVamp {
  position: relative;
  display: inline-block;
  padding-right: 18px;
}

#resRed:active::after,
#resVamp:active::after {
  opacity: 1;
  color: var(--accent);
}

.chart-container {
  width: 100%;
  /* 가로가 좁아지면 세로도 비율에 맞춰 줄어들게 함 */
  aspect-ratio: 2 / 1; 
  position: relative;
  background: #111; /* 배경색 예시 */
  padding: 0;
  margin: 10px 0;
}

#hpChart {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
  cursor: crosshair;
}
/* ===== 페이지 내비게이션(드로어 안) ===== */
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-link {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-main);
  text-decoration: none;
  font-size: 14px;
}

.nav-link.active {
  background: var(--input-bg);
  font-weight: bold;
  color: var(--primary);
}

.nav-link-soon {
  opacity: 0.55;
}

.nav-soon-tag {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-sub);
  margin-left: 6px;
}

/* ===== 홈 화면: 히어로 + 벤토 그리드 =====
   모바일(기본): 위아래로 긴 화면에 맞춰 히어로 배너 + 카드 세로 1열 나열.
   데스크톱(900px+): 컨테이너를 넓히고, 완성된 3개 시뮬레이터는 3열로 크게, 준비 중인 3개는
   그 아래 작고 흐리게 둬서 위계를 나눔. 완성된 카드는 커서를 따라 살짝 기울어지는 3D 틸트 효과. */
/* <button>으로 눌러서 게임 소개/다운로드 링크 모달을 열 수 있게 함 - 버튼 기본 스타일(테두리
   색/폰트 등)을 지우고 기존 div였을 때와 똑같아 보이게 리셋 */
.home-hero {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--card-bg)), var(--card-bg));
  border: 1px solid var(--border-color);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.home-hero:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color));
  transform: translateY(-2px);
}

.home-hero-glow {
  position: absolute;
  top: -55%;
  left: 50%;
  width: 440px;
  height: 440px;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%);
  pointer-events: none;
}

.home-hero-title {
  position: relative;
  margin: 0 0 8px;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

.home-hero-title span {
  display: block;
  font-size: 0.42em;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 3px;
  margin-top: 6px;
}

.home-hero-sub {
  position: relative;
  margin: 0;
  color: var(--text-sub);
  font-size: clamp(12px, 1.2vw, 14px);
}

/* 홈 히어로를 눌렀을 때 뜨는 "시뮬레이터 소개 + 공식 게임 다운로드/스킨 미리보기" 모달 */
.game-info-modal {
  width: min(360px, calc(100vw - 32px));
  text-align: left;
}

.game-info-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-sub);
  margin: 0 0 16px;
}

.game-info-section + .game-info-section {
  margin-top: 16px;
}

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

.game-info-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.game-info-link-btn {
  flex: 1 1 auto;
  text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.game-info-link-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.home-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.home-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  padding: 18px;
  text-decoration: none;
  color: var(--text-main);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  opacity: 0;
  animation: home-tile-in 0.45s ease forwards;
  animation-delay: calc(var(--i) * 0.06s);
}

@keyframes home-tile-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-tile-main {
  background: linear-gradient(155deg, var(--input-bg), color-mix(in srgb, var(--accent) 7%, var(--input-bg)));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  will-change: transform;
}

.home-tile-main:hover {
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

.home-tile-glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.home-tile-main:hover .home-tile-glare {
  opacity: 1;
}

.home-tile-soon {
  padding: 14px 18px;
  opacity: 0.6;
}

.home-tile-title {
  position: relative;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}

.home-tile-soon .home-tile-title {
  font-size: 14px;
}

.home-tile-desc {
  position: relative;
  font-size: 12px;
  color: var(--text-sub);
}

@media (min-width: 900px) {
  body[data-page="home"] .container {
    width: min(100%, 1100px);
  }

  .home-hero {
    padding: 54px 40px;
  }

  .home-hero-title {
    font-size: clamp(28px, 3vw, 42px);
  }

  .home-bento {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .home-tile-main {
    padding: 28px 24px;
    min-height: 150px;
  }

  .home-tile-main .home-tile-title {
    font-size: 19px;
  }

  .home-tile-main .home-tile-desc {
    font-size: 13px;
  }

  .home-tile-soon {
    padding: 16px 20px;
  }
}

/* ===== 내 공룡: 요약바+탭을 한 패널로 통합 =====
   overflow:hidden을 쓰면 안의 드롭다운 목록(체력/공룡 수 등)이 카드 경계에 잘려서
   overflow는 안 씀. 대신 라운드 처리가 필요한 요소는 각자 border-radius로 처리. */
.dino-panel {
  padding: 0 !important;
}

.dino-summary-bar {
  padding: 18px var(--p-base);
  border-bottom: 1px solid var(--border-color);
  border-radius: 16px 16px 0 0;
}

.dino-summary-bar .stat-readout {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.dino-summary-bar .stat-readout-item {
  align-items: center;
  text-align: center;
  gap: 2px;
}

.dino-summary-bar .stat-readout-label {
  font-size: 10.5px;
  white-space: normal;
}

.dino-summary-bar .stat-readout-value {
  font-size: clamp(11px, 3.2cqw, 15px);
  white-space: normal;
  word-break: keep-all;
  line-height: 1.2;
}

/* 친구와 함께(3단계): 상대 쪽 읽기 전용 요약 카드. 편집 폼과 구분되도록 점선 테두리 + 잠금 태그 */
.dino-panel-readonly {
  border: 1px dashed var(--border-color);
}

.dino-panel-readonly-tag {
  padding: 10px var(--p-base) 0;
  font-size: 11px;
  color: var(--text-sub);
}

.readonly-slot-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 10px var(--p-base) 16px;
}

.slot-readonly {
  cursor: default;
}

/* 친구 스냅샷 관찰 모드에서 로컬로만 프리셋을 미리 볼 수 있는 선택기 */
.readonly-preset-switcher {
  padding: 0 var(--p-base) 16px;
}

.readonly-preset-switcher-label {
  font-size: 10.5px;
  color: var(--text-sub);
  margin-bottom: 6px;
}

/* ===== 내 공룡: 탭 (슬라이딩 밑줄 인디케이터) ===== */
.dino-tabs {
  display: flex;
  position: relative;
  border-bottom: 1px solid var(--border-color);
}

.dino-tab {
  flex: 1;
  padding: 14px 0;
  background: none;
  border: none;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
}

.dino-tab.active {
  color: var(--primary);
}

.dino-tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--primary);
  transition: transform 0.25s ease, width 0.25s ease;
}

.dino-tab-panel {
  padding: var(--p-base);
}

/* ===== 내 공룡: 룬 프리셋 칩 ===== */
.preset-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0 4px;
}

.preset-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--input-bg);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.preset-chip-add {
  color: var(--primary);
  border: 1px dashed var(--primary);
  background: none;
}

.preset-chip-remove {
  opacity: 0.6;
  font-size: 11px;
}

/* ===== 공룡 대전 페이지 =====
   모바일(기본): 가운데 전투 화면만 보이고, 내 공룡/상대 공룡 설정은 화면 밖에 숨겨뒀다가
   좌우 가장자리의 탭(peek 버튼)을 누르면 슬라이드 패널로 들어옴.
   데스크톱(1100px 이상): 컨테이너 폭을 넓혀서 좌-내공룡 / 중앙-전투 / 우-상대공룡 3단 그리드로 항상 다 보이게 함. */

/* 타일 설정 카드: 제목을 위에 두고, 그 아래 항목들은 라벨+컨트롤이 붙은 작은 덩어리(chip)로
   만들어서 폭이 남으면 한 줄에 여러 개, 좁으면 자동 줄바꿈되게 함(항목이 4개로 늘어나도 안정적) */
.battle-tile-card {
  padding: 12px 16px;
}

.battle-tile-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  margin: 0 0 10px;
}

.battle-tile-card .setting-list {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.battle-tile-card .setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: none;
  padding: 0;
}

.battle-tile-card .setting-control {
  width: 96px;
  max-width: 96px;
}

/* 이 카드 안 드롭다운은 다른 페이지의 큰 입력칸용 높이를 그대로 쓰기엔 과해서 한 줄짜리로 축소 */
.battle-tile-card .selected-value {
  height: 30px;
  padding: 0 26px 0 10px;
  line-height: 30px;
  font-size: 12px;
}

/* 항목이 늘어날수록(버프 타워 추가 등) 한 덩어리로 뭉쳐 보이지 않도록 "환경"/"진영별 설정"으로
   묶고, 그룹 사이는 얇은 구분선으로 나눔 */
.tile-group + .tile-group {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.tile-group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

/* 진영별 설정(배치/버프 타워)은 내 공룡·상대 공룡을 좌우로 나란히 둬서 대칭 비교가 쉽게 함 */
.tile-side-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
}

.tile-side-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.tile-side-col-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.tile-side-col-label::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
}

.tile-side-col-label.my-side-label::before {
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent);
}

.tile-side-col-label.opp-side-label::before {
  background: #e0473f;
  box-shadow: 0 0 6px rgba(224, 71, 63, 0.6);
}

.tile-side-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tile-side-field label {
  margin: 0;
  font-size: 11px;
  color: var(--text-sub);
}

@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: 14px;
  font-weight: bold;
}

.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;
  flex: 1;
  padding: 9px 0;
  border-radius: 7px;
  border: none;
  background: none;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
}

.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-arena {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 4cqw, 24px);
  padding: clamp(24px, 10cqw, 64px) 0;
  min-height: clamp(160px, 46cqw, 320px);
}

.battle-fighter {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  transition: opacity 0.4s ease;
}

.battle-fighter.defeated .battle-avatar {
  filter: grayscale(1) brightness(0.6);
  transform: rotate(90deg) scale(0.85);
}

.battle-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 3cqw, 14px);
  color: var(--text-sub);
  font-weight: 700;
}

.battle-name::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
}

#myFighter .battle-name::before {
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent);
}

#oppFighter .battle-name::before {
  background: #e0473f;
  box-shadow: 0 0 6px rgba(224, 71, 63, 0.6);
}

.battle-hp-bar {
  width: 100%;
  max-width: 160px;
  height: 10px;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.battle-hp-fill {
  height: 100%;
  width: 100%;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 999px;
}

.my-hp-fill {
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
}

.opp-hp-fill {
  background: linear-gradient(90deg, #a4241f, #e0473f);
}

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

.battle-avatar {
  position: relative;
  width: clamp(56px, 20cqw, 96px);
  height: clamp(56px, 20cqw, 96px);
  border-radius: 50%;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

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

/* 무대 조명 느낌을 주는 바닥 스포트라이트: 현재 맞붙고 있는 앞줄 공룡(.battle-avatar) 발밑에만 표시 */
.battle-avatar.my-avatar::after,
.battle-avatar.opp-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 72%;
  height: 8px;
  border-radius: 50%;
  filter: blur(3px);
  pointer-events: none;
}

.battle-avatar.my-avatar::after {
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 55%, transparent), transparent 75%);
}

.battle-avatar.opp-avatar::after {
  background: radial-gradient(ellipse, rgba(224, 71, 63, 0.55), transparent 75%);
}

.battle-avatar.lunge-right {
  animation: battle-lunge-right 0.35s ease;
}

.battle-avatar.lunge-left {
  animation: battle-lunge-left 0.35s ease;
}

.battle-avatar.hit-shake {
  animation: battle-hit-shake 0.35s ease;
}

@keyframes battle-lunge-right {
  0% { transform: translateX(0) scale(1); }
  45% { transform: translateX(28px) scale(1.08); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes battle-lunge-left {
  0% { transform: translateX(0) scale(1); }
  45% { transform: translateX(-28px) scale(1.08); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes battle-hit-shake {
  0%, 100% { transform: translateX(0); filter: brightness(1); }
  20% { transform: translateX(-6px); filter: brightness(1.8); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* 타일 위에 여러 마리가 대기 중임을 보여주는 스택 표현: 맨 앞(현재 싸우는 중)만 크게,
   대기 중인 나머지는 뒤에 작고 흐리게 겹쳐 보이게 함 */
.battle-stack {
  position: relative;
  width: clamp(56px, 20cqw, 96px);
  height: clamp(56px, 20cqw, 96px);
}

.stack-dino {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}

.stack-dino.front {
  z-index: 3;
}

.stack-dino.behind-1 {
  z-index: 2;
  transform: scale(0.6) translate(28%, 28%);
  opacity: 0.55;
  filter: saturate(0.7);
}

.stack-dino.behind-2 {
  z-index: 1;
  transform: scale(0.42) translate(52%, 52%);
  opacity: 0.32;
  filter: saturate(0.5);
}

/* 스택(대표 공룡) + 대기 중인 나머지 공룡들의 미니 체력바를 나란히 배치. 항상 무대 바깥쪽으로 붙도록
   내 쪽은 바가 오른쪽(무대 중앙 방향)이 아니라 왼쪽에, 상대 쪽은 반대로 둠.
   타일 배치 설정에 따라 점선 테두리로 "같은 타일(전부 하나로 묶임)"인지 "다른 타일(전투 공룡과
   대기 공룡이 분리됨)"인지 시각적으로 보여줌(순수 표시용, 실제 분리 여부는 엔진 쪽에서 처리). */
.battle-stack-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.battle-stack-row.tile-same {
  padding: 6px;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-main) 3%, transparent);
}

.battle-stack-row.tile-separate {
  gap: 14px;
}

/* .battle-stack는 내부 공룡 원들이 position:absolute; top:0; left:0으로 자기 자신(패딩 없는
   0,0 기준)에 딱 맞춰 앉아있어서, 여기에 직접 padding을 주면 그 아이들도 패딩 안쪽으로 같이
   밀려 들어가 테두리와 어긋나 보임. 그래서 장식용 점선 테두리는 별도의 감싸는 .tile-box에
   주고, .battle-stack 자체는 손대지 않음(대기 체력바 쪽은 절대위치 자식이 없어서 그대로 둬도 됨) */
.battle-stack-row.tile-separate .tile-box,
.battle-stack-row.tile-separate .reserve-bars {
  padding: 6px;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-main) 3%, transparent);
}

.my-stack-row {
  flex-direction: row-reverse;
}

/* 스택(.battle-stack)과 정확히 같은 높이로 고정해서 대기 마릿수와 무관하게 박스 크기/위치가
   항상 일정하게 유지되도록 함(다른 타일 모드에서 점선 박스가 들쭉날쭉해 보이던 문제 해결).
   최대 12마리(공룡 수 상한 13 - 앞장 1)까지도 스크롤 없이 다 들어가도록 바를 얇게 잡음. */
.reserve-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  height: clamp(56px, 20cqw, 96px);
  overflow: hidden;
}

.reserve-bar {
  width: clamp(20px, 8cqw, 34px);
  height: 3px;
  border-radius: 1.5px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  overflow: hidden;
  flex-shrink: 0;
}

.reserve-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.battle-avatar.front-defeated {
  animation: battle-front-defeated 0.4s ease;
}

@keyframes battle-front-defeated {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(0.7) rotate(30deg); filter: brightness(2) grayscale(1); }
  100% { transform: scale(1); filter: brightness(1); }
}

.battle-arena.area-flash {
  animation: battle-area-flash 0.4s ease;
}

@keyframes battle-area-flash {
  0%, 100% { background: transparent; }
  40% { background: color-mix(in srgb, var(--accent) 16%, transparent); }
}

.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;
}

.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;
}

/* 세션 중 "상대 공룡" 쪽 배치/버프타워 드롭다운 잠금(상대가 직접 정하는 값이라 여기선 편집 불가) */
.dropdown-locked {
  pointer-events: none;
  opacity: 0.55;
}

/* ===== 친구 선택 팝업(초대/설정 불러오기 공용) ===== */
.friend-picker-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.friend-picker-modal {
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  /* 아레나 슬롯 편집 팝업(.arena-slot-edit-modal)의 프리셋 버튼이 cqw로 반응형 축소를 하는데,
     그 계산 기준이 될 컨테이너가 없으면(부모 쪽 어디에도 container-type이 없으면) 깨짐 - 여기서
     잡아줌. 다른 friend-picker-modal 용도(친구 초대 등)엔 cqw를 쓰는 요소가 없어서 영향 없음 */
  container-type: inline-size;
}

.friend-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.friend-picker-item {
  padding: 12px 8px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.friend-picker-item:first-child {
  border-top: none;
}

.friend-picker-item:hover {
  color: var(--accent);
}

.friend-picker-empty {
  padding: 20px 8px;
  text-align: center;
  color: var(--text-sub);
  font-size: 13px;
}

/* ===== 친구 스탯 확인(카테고리별 부분 공개 대응) ===== */
/* 룬 아이콘이 작다는 피드백 반영 - 모달 자체를 넓히고 슬롯 그리드의 최대 폭도 같이 키움 */
#friendStatOverlay .friend-picker-modal {
  width: min(420px, calc(100vw - 32px));
}

.friend-stat-section {
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
}

.friend-stat-section:first-child {
  border-top: none;
  padding-top: 0;
}

.friend-stat-section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 8px;
}

.friend-stat-section-hint {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-sub);
  opacity: 0.75;
}

.friend-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.friend-stat-grid > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.friend-stat-grid span {
  color: var(--text-sub);
}

.friend-stat-grid b {
  color: var(--text-main);
}

.friend-stat-slot-row {
  padding: 0;
  max-width: 340px;
}

.friend-stat-hidden-text {
  font-size: 13px;
  color: var(--text-sub);
  font-style: italic;
}

.friend-preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.friend-preset-item {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--input-bg);
  font-size: 12px;
  color: var(--text-main);
  cursor: pointer;
}

.friend-preset-item:hover {
  color: var(--accent);
}

.friend-preset-item.active {
  background: color-mix(in srgb, var(--accent) 18%, var(--input-bg));
  color: var(--accent);
  font-weight: 700;
}

.friend-preset-detail-slots {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
}

/* 친구 스탯 확인의 "아레나 프리셋" - 배치 하나를 고르면 5개 슬롯을 세로로 나열, 각 슬롯마다
   어떤 룬 프리셋이 배정됐는지 이름 + 룬 아이콘 미리보기 */
#friendArenaFormationDetail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.friend-arena-slot-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.friend-arena-slot-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-sub);
}

/* ===== 아레나(5:5 진영전) =====
   공룡 대전과 같은 3단 레이아웃(.battle-layout/.battle-side-panel/.battle-main-card 등)을
   그대로 재사용하고, 아레나 전용인 소환 배치 위젯 + 10마리 전투 화면만 새로 추가함. */
@media (min-width: 1100px) {
  /* PC 실사용 화면(1440~1920px대 모니터)에서 열어보면 1240px 고정 폭은 화면 양옆에 큰 여백이 남아
     전체적으로 작아 보인다는 피드백 반영 - 뷰포트 폭에 비례해서 거의 끝까지 채우되(96vw), 초광각
     모니터에서 과하게 늘어지지 않도록 상한만 넉넉히 둠 */
  body[data-page="arena"] .container {
    width: min(96vw, 1760px);
  }
  /* 좌우 진영 설정 패널(기본 스탯/별자리/둥지·알스킨/룬 조합 탭 + 소환 배치까지 있어 세로로 김)이
     전투 카드보다 훨씬 길어서, 그리드의 기본 정렬(align-items:start)을 그대로 쓰면 전투 카드가
     맨 위에 붙어 화면 위쪽으로 쏠려 보임 - 가운데 열만 그 행의 전체 높이 안에서 수직 중앙에 오도록
     별도 지정(공룡 대전 페이지는 카드 구성이 달라 그대로 둠 - 아레나 스코프로만 한정)     */
  body[data-page="arena"] .battle-arena-wrap {
    align-self: center;
  }
  /* 전투 화면이 핵심인데 공룡 대전과 같은 1:1.15:1 비율(.battle-layout 공용 규칙)을 그대로 쓰면
     설정 패널과 크기 차이가 거의 없어서 안 부각됨 - 아레나만 가운데 열 비중을 크게 키움 */
  body[data-page="arena"] .battle-layout {
    grid-template-columns: 0.82fr 1.7fr 0.82fr;
  }
  /* VS 배지도 커진 아바타에 맞춰 같이 키움(공용 .battle-vs 규칙은 공룡 대전용 크기라 그대로 둠) */
  body[data-page="arena"] .battle-vs {
    width: clamp(40px, 10.5cqw, 82px);
    height: clamp(40px, 10.5cqw, 82px);
  }
  body[data-page="arena"] .battle-vs span {
    font-size: clamp(13px, 3.2cqw, 23px);
  }
}

/* 탭이 4개->5개로 늘고("아레나 배치") 요약 칸도 4개->5개로 늘면서("치명타 확률"/"치명타 피해") 좁은
   패널 폭에서 글자가 줄바꿈되던 문제 - 줄바꿈 대신 글자 크기를 줄여서 한 줄에 들어가게 함(모바일도
   해당되는 문제라 min-width 미디어쿼리 밖에서 페이지 스코프로만 적용) */
body[data-page="arena"] .dino-tab {
  font-size: 9.5px;
  padding: 14px 0;
  letter-spacing: -0.3px;
}

body[data-page="arena"] .dino-summary-bar .stat-readout-label {
  font-size: 9px;
  white-space: nowrap;
}

/* 공룡 대전의 "공룡 수" 드롭다운은 아레나에선 항상 5마리 고정이라 의미가 없어서 숨김
   (renderMyDinoPage를 그대로 재사용하는 대신, 아레나 페이지 스코프에서만 CSS로 감춤). 요약 카드의
   "공룡 수" 항목은 CSS로 숨기는 대신 renderMyDinoPage(splitCritStat:true)가 애초에 치확/치피
   분리 항목으로 대체해서 5칸을 그대로 채우므로 여기서 따로 감출 필요 없음(감추면 마지막 칸인
   "치명타 피해"가 대신 잘려서 안 보이게 됨) */
body[data-page="arena"] .dino-tab-panel[data-panel="base"] .input-grid > div:last-child {
  display: none;
}

/* 상대 진영이 읽기 전용(친구 세션/스냅샷)일 때만 쓰는 독립 배치 카드 - 그 외(내 진영, 상대 진영
   직접 편집 모드)엔 소환 배치가 "아레나 배치" 탭 안에 들어있어서 이 클래스 자체가 안 쓰임 */
.arena-formation-standalone {
  margin-top: 12px;
}

/* ===== "아레나 배치" 탭: 원형 슬롯 5개(전투 화면과 동일한 좌우 배치) + 그 아래 "아레나 프리셋"
   (완성된 5슬롯 배치 통째 저장) 목록. 설명 문구 없이 원/버튼만으로 바로 알아볼 수 있게 최소한으로
   구성. 두 칼럼의 "전체 높이"는 항상 같지만(같은 grid 안), 3칸이 들어가는 칼럼은 원이 작게
   3등분되고 2칸이 들어가는 칼럼은 크게 2등분됨(LCM(3,2)=6행 그리드에서 3칸 칼럼은 칸당 2행씩,
   2칸 칼럼은 칸당 3행씩 차지 - 전열이 후열보다 큼직하게 보이는 배틀필드와 같은 위계). 전체 크기는
   이 비율 그대로 유지한 채 이미지 축소하듯 한 단계 작게 줄인 값(원래 clamp(210px,58cqw,300px)의
   약 0.55배) */
.arena-fmt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 8px;
  height: clamp(116px, 32cqw, 165px);
  margin-bottom: 16px;
}

.arena-fmt-square.col-0 { grid-column: 1; }
.arena-fmt-square.col-1 { grid-column: 2; }
.arena-fmt-square.of-3.pos-0 { grid-row: 1 / 3; }
.arena-fmt-square.of-3.pos-1 { grid-row: 3 / 5; }
.arena-fmt-square.of-3.pos-2 { grid-row: 5 / 7; }
.arena-fmt-square.of-2.pos-0 { grid-row: 1 / 4; }
.arena-fmt-square.of-2.pos-1 { grid-row: 4 / 7; }

/* 유리 재질(glassmorphism) - 배경은 거의 비치고 얇은 테두리만 도드라지게, 선택 안 된 상태는
   최대한 존재감을 낮추고 배정된 원만 accent 테두리+은은한 글로우로 "포인트"를 줌.
   모양은 원형 - 칼럼 셀 자체는 계속 사각 그리드 영역(전열 칸이 후열 칸보다 큼)을 차지하되, 그 안에
   셀의 짧은 변(칸 높이) 기준의 진짜 원을 가운데 정렬해서 타원으로 찌그러지지 않게 함 */
.arena-fmt-square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  justify-self: center;
  align-self: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--text-main) 14%, transparent);
  background: color-mix(in srgb, var(--card-bg) 38%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-sub);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

/* 배정된 원엔 슬롯 번호 대신 프리셋 이름이 들어가는데, 원보다 글자가 길어져도 줄임표로 자르지
   않고 그대로 다 보여줌(원 밖으로 튀어나가는 건 괜찮다는 지시). 단, 일반 flex 자식으로 두면
   내용 너비가 원의 지름을 넘는 순간 원 자체가 옆으로 늘어나 타원이 되어버림(flex-item의
   min-width:auto가 콘텐츠 너비만큼 강제로 확보되기 때문) - position:absolute로 레이아웃
   흐름에서 완전히 빼서, 글자는 원 중앙에 고정해두고 시각적으로만 밖으로 삐져나가게 함(원의
   박스 크기 계산에는 전혀 영향을 안 줌) */
.arena-fmt-square-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(10px, 3.6cqw, 13px);
  font-weight: 700;
  opacity: 0.55;
  transition: opacity 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

/* 배정된 원엔 슬롯 번호 대신 프리셋 이름이 들어가서 숫자 하나보다 글자 수가 많음 - 원 안에서 잘리지
   않고 최대한 보이도록 조금 더 작게 */
.arena-fmt-square.assigned .arena-fmt-square-num {
  font-size: clamp(8.5px, 3cqw, 11px);
}

.arena-fmt-square:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* 배정 완료 상태 - 배경은 계속 유리 재질을 유지하고 accent 테두리 + 옅은 색 틴트 + 은은한 글로우만
   더해서 "포인트"만 줌(전면 단색 채움 대신) */
.arena-fmt-square.assigned {
  border-width: 1.5px;
}

.arena-fmt-square.assigned .arena-fmt-square-num {
  opacity: 1;
}

.arena-fmt-square.my-fmt-square.assigned {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, color-mix(in srgb, var(--card-bg) 38%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}

.arena-fmt-square.my-fmt-square.assigned .arena-fmt-square-num {
  color: var(--accent);
}

.arena-fmt-square.opp-fmt-square.assigned {
  border-color: #e0473f;
  background: color-mix(in srgb, #e0473f 16%, color-mix(in srgb, var(--card-bg) 38%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(224, 71, 63, 0.3), 0 4px 14px rgba(224, 71, 63, 0.28);
}

.arena-fmt-square.opp-fmt-square.assigned .arena-fmt-square-num {
  color: #ff6b61;
}

/* CSS 전용 프리셋 버튼(이미지 배지 대신) - "아레나 프리셋"(5개, 배치 탭) 및 슬롯 편집 팝업의
   "룬 프리셋"(9개) 양쪽에서 공용으로 씀. 사각형과 같은 유리 재질 언어를 씀 - 어차피 가로 스크롤
   이라 폭을 좁게 고정할 필요는 없지만, 사각형보다도 더 작고 담백하게(포인트는 activee 상태의
   accent 테두리로만) */
.arena-preset-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
  cursor: grab;
  user-select: none;
}

.arena-preset-row.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.arena-preset-row::-webkit-scrollbar {
  height: 4px;
}

.arena-preset-row::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}

.arena-preset-btn {
  flex: 0 0 auto;
  position: relative;
  /* 예전엔 고정 픽셀(86px/36px)이라 화면이 좁아져도 전혀 안 줄어서 다른 요소들(다 cqw로 비례
     축소됨)과 다르게 유독 커 보였음 - clamp로 바꿔서 반응형으로 줄어들게 하고, 기본 크기도
     살짝 줄임 */
  min-width: clamp(58px, 16cqw, 82px);
  height: clamp(30px, 8cqw, 36px);
  padding: 0 clamp(10px, 3cqw, 14px);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text-main) 14%, transparent);
  background: color-mix(in srgb, var(--card-bg) 38%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.arena-preset-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, color-mix(in srgb, var(--card-bg) 38%, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 3px 10px color-mix(in srgb, var(--accent) 25%, transparent);
}

.arena-preset-btn-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(10px, 3.2cqw, 12px);
  font-weight: 600;
  color: var(--text-sub);
  pointer-events: none;
}

.arena-preset-btn.active .arena-preset-btn-name {
  color: var(--accent);
  font-weight: 700;
}

.arena-preset-edit-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.arena-preset-name-input {
  width: 82%;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: #fff;
  padding: 1px 3px;
}

/* 슬롯 편집 팝업(사각형 클릭 시) - 기존 친구 선택 모달 구조를 재사용하되 룬 편집기가 들어갈 수
   있게 폭/높이를 넓힘 */
#arenaSlotEditOverlay .arena-slot-edit-modal {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
}

.arena-slot-edit-hint {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-sub);
  opacity: 0.75;
}

/* 전투 화면: 10마리(5+5)가 한 화면에 다 들어가야 해서 공룡 대전의 큰 1:1 아바타보다 훨씬 작고
   조밀하게 배치. 룬 아이콘은 상시 노출하지 않고(소환 배치 위젯에서만 확인) 원형 아바타 + 얇은
   체력바만 둬서 화면이 복잡해지지 않게 함(사용자가 직접 언급한 "화면이 꽉 차 보일 수 있다"는
   우려에 대한 대응) */
.arena-battlefield {
  position: relative;
  display: flex;
  align-items: center;
  /* space-between이었을 때 카드가 넓은 데스크톱에서 두 진영이 화면 양 끝까지 벌어져 보였음(자식이
     3개뿐이라 남는 공간이 전부 my팀<->VS<->opp팀 사이에 분산됨) - center로 모아서 VS 배지를
     기준으로 항상 붙어있게 함 */
  justify-content: center;
  gap: clamp(28px, 9cqw, 104px);
  padding: clamp(16px, 9cqw, 64px) 0;
  container-type: inline-size;
}

/* 공격자<->피격자를 잇는 선(누가 누구를 때리는지 명확하게 보이도록) - getBoundingClientRect로
   두 아바타 중심을 잰 뒤 JS가 left/top/width(공격자~피격자 전체 길이)/--strike-angle을 인라인으로
   계산해서 넣어줌. 예전엔 선이 처음부터 전체 길이로 "뙇" 나타나서 어느 쪽이 쏜 건지 방향을 알기
   어렵다는 피드백 -> "쏜다"는 개념으로: transform-origin이 공격자 쪽(왼쪽)에 있으니 scaleX를
   0->1로 키우면 공격자 지점에서 피격자 쪽으로 자라나는 것처럼 보임 + 그라디언트도 공격자 쪽은
   흐리고 피격자 쪽(탄두)은 진하게 해서 진행 방향이 분명하게 드러남 + 탄두 끝에 작은 발광 점을 더해
   투사체가 날아가 꽂히는 느낌을 줌 */
.arena-strike-line {
  position: absolute;
  height: 2px;
  transform-origin: 0 50%;
  border-radius: 2px;
  pointer-events: none;
  z-index: 5;
  animation: arena-strike-shoot 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.arena-strike-line::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.arena-strike-line.my {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), var(--accent));
}

.arena-strike-line.my::after {
  background: var(--accent);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--accent) 70%, transparent);
}

.arena-strike-line.opp {
  background: linear-gradient(90deg, color-mix(in srgb, #e0473f 35%, transparent), #e0473f);
}

.arena-strike-line.opp::after {
  background: #ff6b61;
  box-shadow: 0 0 8px 2px rgba(224, 71, 63, 0.7);
}

@keyframes arena-strike-shoot {
  0% { transform: rotate(var(--strike-angle)) scaleX(0); opacity: 0.95; }
  55% { transform: rotate(var(--strike-angle)) scaleX(1); opacity: 1; }
  100% { transform: rotate(var(--strike-angle)) scaleX(1); opacity: 0; }
}

/* 진영당 2열(전열/후열) x 최대 3행 세로 배치(사용자 지정). 전열 열은 항상 VS 배지와 가까운 쪽에
   오도록 팀별로 열 순서를 뒤집음(내 진영: 후열열-전열열, 상대 진영: 전열열-후열열) - 실제 순서는
   arena-page.js가 마크업을 만들 때 컬럼 자체를 그 순서로 배치해서 넣어주므로 여기선 단순히 "행
   컨테이너를 가로로 나열"만 하면 됨. 전열은 2칸뿐이라 후열(3칸)보다 짧은데, 위쪽부터 채워지도록
   상단 정렬함(사용자 다이어그램의 빈 칸이 항상 맨 아래에 오는 것과 일치) */
.arena-team-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 2.5cqw, 14px);
  min-width: 0;
}

/* 친구 초대/설정 불러오기로 실제 상대가 있을 때만 채워짐(js에서 display 토글) - 닉네임 + 전투력
   (레벨×5)을 그 진영 5마리 위에 표시. 혼자 테스트할 땐 화면이 깔끔하도록 숨김 */
.arena-power-label {
  font-size: clamp(11px, 3.4cqw, 15px);
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  text-align: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
}

.arena-team {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(6px, 2cqw, 18px);
  min-width: 0;
}

.arena-col {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1.6cqw, 14px);
}

.arena-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: opacity 0.15s ease;
}

/* 이번 턴 공격자/피격자가 아닌 나머지 8마리를 잠깐 흐리게 죽여서 시선이 그 둘에게만 쏠리게 함 */
.arena-slot.arena-dimmed {
  opacity: 0.3;
}

.arena-slot-avatar {
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}

.arena-col-front .arena-slot-avatar {
  width: clamp(36px, 11.5cqw, 96px);
  height: clamp(36px, 11.5cqw, 96px);
}

.arena-col-back .arena-slot-avatar {
  width: clamp(27px, 8.6cqw, 72px);
  height: clamp(27px, 8.6cqw, 72px);
  opacity: 0.72;
  filter: saturate(0.75);
}

.my-slot-avatar {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, white), var(--accent-strong) 75%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}

.opp-slot-avatar {
  background: radial-gradient(circle at 35% 30%, #ff8a80, #a4241f 75%);
  box-shadow: 0 0 10px rgba(224, 71, 63, 0.5);
}

.arena-slot-hpbar {
  width: clamp(26px, 8.5cqw, 56px);
  height: 5px;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

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

.arena-slot-hpfill.my-hp-fill {
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
}

.arena-slot-hpfill.opp-hp-fill {
  background: linear-gradient(90deg, #a4241f, #e0473f);
}

.arena-slot-avatar.arena-dead {
  filter: grayscale(1) brightness(0.55);
  transform: scale(0.8) rotate(75deg);
}

/* 공격/피격 모션이 비슷해 보인다는 피드백 반영: 공격측은 상대 팀 쪽(중앙 VS 방향)으로 튀어나가는
   방향성 있는 돌진 + 밝은 확대(어느 슬롯이 때렸는지가 "움직임의 방향"으로 바로 읽히게), 피격측은
   흔들림에 더해 빨간 링 플래시를 얹어서 "맞았다"가 색으로도 분명히 구분되게 함(공격=중립 밝기
   증가, 피격=빨간색 - 대미지를 나타내는 통상적인 색 연상 재사용) */
.my-slot-avatar.arena-attacking {
  animation: arena-lunge-toward-center 0.35s ease;
}

.opp-slot-avatar.arena-attacking {
  animation: arena-lunge-toward-center-rev 0.35s ease;
}

@keyframes arena-lunge-toward-center {
  0% { transform: scale(1) translateX(0); filter: brightness(1); }
  45% { transform: scale(1.3) translateX(10px); filter: brightness(1.6); }
  100% { transform: scale(1) translateX(0); filter: brightness(1); }
}

@keyframes arena-lunge-toward-center-rev {
  0% { transform: scale(1) translateX(0); filter: brightness(1); }
  45% { transform: scale(1.3) translateX(-10px); filter: brightness(1.6); }
  100% { transform: scale(1) translateX(0); filter: brightness(1); }
}

.arena-slot-avatar.arena-hit {
  animation: battle-hit-shake 0.35s ease, arena-hit-ring-flash 0.35s ease;
}

@keyframes arena-hit-ring-flash {
  0% { box-shadow: 0 0 0 0 rgba(255, 60, 60, 0); }
  35% { box-shadow: 0 0 0 4px rgba(255, 60, 60, 0.9); }
  100% { box-shadow: 0 0 0 0 rgba(255, 60, 60, 0); }
}

.arena-slot-avatar.arena-death-flash {
  animation: battle-front-defeated 0.4s ease;
}

.arena-battlefield.area-flash {
  animation: battle-area-flash 0.4s ease;
}

.arena-dmg-popup {
  font-size: 11px;
}

.arena-dmg-popup.crit:not(.skill) {
  font-size: 13px;
}

.arena-dmg-popup.skill.crit {
  font-size: 13px;
}

/* ===== 허수아비 =====
   정육각형은 순수하게 "바닥" 역할만 함(3D로 앞으로 기울인 clip-path 도형, 그 자체엔 내용물이 없음).
   허수아비/타격 이펙트/대미지 숫자는 전부 그 바닥과는 별개인 평평한 2D 레이어들로, 같은 grid 칸에
   포개서 육각형과 정확히 같은 위치·크기를 공유함 - 이러면 "육각형 안에 갇힌" 것처럼 보이는 3D 겹침
   문제 없이, 그냥 평평한 스프라이트가 기울어진 바닥 그림 위에 얹힌 것처럼 자연스럽게 보임(2D
   아이소메트릭 게임에서 흔히 쓰는 방식 - 캐릭터 스프라이트 자체는 기울이지 않음) */
.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);
  perspective: 1000px;
}

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

.dummy-hexagon {
  position: relative;
  transform: rotateX(55deg);
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.45));
}

/* clip-path + border 조합은 대각선 변에서 테두리가 끊겨 보이는 고질적인 문제가 있어서(border는
   클리핑 전의 사각 박스 기준으로 그려짐), 진짜 육각형 다각형을 그리는 SVG polygon으로 바꿈 -
   stroke가 꼭짓점을 그대로 잇는 하나의 이어진 선이라 테두리가 절대 끊기지 않음 */
.dummy-hexagon-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 육각형 자체(바닥)는 3D로 기울지만, 그 위에 놓이는 것들(허수아비/이펙트/대미지 숫자)은 전부
   평평한 2D 레이어로 별도 grid 칸에 포개져 있을 뿐 회전하지 않음 - 캐릭터 스프라이트 자체를
   기울이거나 비율을 바꾸지 않는, 2D 아이소메트릭 게임에서 흔한 방식 */
.dummy-target-layer {
  position: relative;
  pointer-events: none;
}

/* 허수아비의 "가장 밑부분"이 육각형의 기하학적 중심(마주보는 꼭짓점끼리 이은 대각선들의 교차점 -
   정육각형이라 바운딩 박스의 정중앙과 같음)에 오도록 함. top:50%에 이미지 자기 자신의 전체 높이만큼
   위로(translateY(-100%)) 밀어올리면 "이미지의 아래쪽 끝"이 정확히 그 50% 지점에 위치하게 됨.
   추가로 translateX(6%)를 더 준 건 - 이미지 박스 자체는 정확히 중앙에 있어도 Scarecrow_1.png
   원본 그림 안에서 실제 허수아비 그림(캐릭터)이 여백 없이 딱 붙어있지 않고 왼쪽으로 치우쳐 그려져
   있어서(오른쪽에 빈 여백이 더 많음), 그 안쪽 그림 기준으로 보정해서 육각형 중심과 맞춘 것 */
.dummy-scarecrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  height: auto;
  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;
}

@keyframes dummy-shake {
  0%, 100% { transform: translate(-50%, -100%) translateX(6%) rotate(0deg); }
  20% { transform: translate(-50%, -100%) translateX(6%) rotate(-5deg); }
  40% { transform: translate(-50%, -100%) translateX(6%) rotate(4deg); }
  60% { transform: translate(-50%, -100%) translateX(6%) rotate(-3deg); }
  80% { transform: translate(-50%, -100%) translateX(6%) rotate(2deg); }
}

.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;
}

@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);
}

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

.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;
}

.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);
}