/*
 * css/style.css — ui-dev 소유 (레이아웃 시드: system-architect, 3D 리뉴얼 확장).
 * 구조 계약(§9): HUD 상단 / #stage(3D 캔버스 #game-canvas + DOM 오버레이) 중앙 / 상점 하단 세로 스택.
 * 3D 캔버스는 #stage를 꽉 채우고, DOM 오버레이(패널·화면·취소 버튼)가 그 위에 절대배치된다.
 * 배치 프리뷰 고스트·사거리 링은 CSS가 아니라 3D 씬 'ghost' 그룹(ui/placement) — 여기선 DOM 오버레이만.
 * 톤: 어두운 슬레이트 크롬 + 수정(시안/보라) 포인트 — 밝은 카툰 판타지 3D 필드와 대비.
 * 모바일(§9·AC-46): 세로 스택 유지, 가로 스크롤 금지, 터치 타깃 ≥ 44px, 게임 영역 touch-action:none.
 */
:root {
  --bg: #14161d;
  --chrome: #232735;
  --chrome-2: #2c3145;
  --line: #3b415a;
  --text: #e8ecf5;
  --text-dim: #9aa3bd;
  --accent: #57d7ff;   /* 수정 시안 */
  --accent-2: #9a7bff; /* 아케인 보라 */
  --gold: #ffd15c;
  --lives: #ff7a7a;
  --good: #58d68d;
  --bad: #f05454;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  overscroll-behavior: none;
  user-select: none; /* 게임 UI — 텍스트 드래그 방지 */
}

#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  max-width: 1280px;
  margin: 0 auto;
}

.hidden { display: none !important; }

/* ---------- 공통 버튼 ---------- */

button {
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation; /* 더블탭 줌 차단 (§9) */
}

#hud button,
#tower-panel button,
#btn-cancel-placement,
.screen button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--chrome-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 14px;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s, transform 0.05s;
}

/* hover 연출은 hover가 실재하는 장치에만 — 터치의 sticky hover 방지 */
@media (hover: hover) {
  #hud button:hover:not(:disabled),
  #tower-panel button:hover:not(:disabled),
  #btn-cancel-placement:hover,
  .screen button:hover {
    border-color: var(--accent);
    filter: brightness(1.12);
  }
}

#hud button:active:not(:disabled),
#tower-panel button:active:not(:disabled),
.screen button:active {
  transform: translateY(1px);
}

#hud button:disabled { opacity: 0.45; cursor: not-allowed; }

/* 비활성 클릭도 감지해야 하므로(에러음·흔들림) 클릭을 컨테이너로 통과시킨다 */
.shop-item:disabled,
#tower-panel button:disabled { pointer-events: none; }

/* ---------- HUD (상단) ---------- */

#hud {
  flex: 0 0 auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  background: linear-gradient(var(--chrome-2), var(--chrome));
  border-bottom: 1px solid var(--line);
}

.hud-stat { display: inline-flex; align-items: baseline; gap: 6px; }

.hud-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.hud-value {
  display: inline-block; /* transform 애니메이션용 */
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#hud-gold .hud-value { color: var(--gold); }
#hud-lives .hud-value { color: var(--lives); }
#hud-wave .hud-value { color: var(--accent); }
#hud-score .hud-value { color: var(--accent-2); } /* 점수 — 아케인 보라 */
#hud-lives .hud-value.danger { animation: blink 1s step-end infinite; }

#hud-countdown {
  font-size: 12px;
  color: var(--accent);
  min-width: 116px; /* 카운트다운 등장 시 레이아웃 밀림 방지 */
}

#btn-wave-start { margin-left: auto; min-width: 96px; }

#btn-wave-start:not(:disabled) {
  background: linear-gradient(#5fd9ff, #2fa8d8);
  border-color: #7fe3ff;
  color: #06283a;
  font-weight: 700;
}

#btn-speed.active,
#btn-mute.active { border-color: var(--accent); color: var(--accent); }

#btn-to-stages { background: var(--chrome-2); border-color: var(--line); }

/* ---------- 스테이지 (3D 캔버스 + 오버레이) ---------- */

#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #0d0f14;
  touch-action: none; /* 게임 영역 — 스크롤/더블탭 줌 차단, 3D 픽킹 전용 (§9) */
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.placing #game-canvas { cursor: crosshair; }

/* 배치 취소 버튼 — 배치 모드 중에만 노출(.hidden 토글은 placement.js), 터치 필수 취소 수단.
   캔버스 위 하단 중앙에 떠 있는다(작은 영역만 가림). */
#btn-cancel-placement {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  background: rgba(80, 51, 57, 0.95);
  border-color: #8a5560;
}

#btn-cancel-placement:active {
  transform: translateX(-50%) translateY(1px); /* 공통 :active가 translateX를 지우지 않도록 */
}

/* ---------- 오버레이 화면 ---------- */

.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  background: radial-gradient(ellipse at center,
    rgba(21, 26, 40, 0.88), rgba(10, 12, 18, 0.96));
}

.screen-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.logo {
  font-size: clamp(34px, 10vw, 56px);
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #bff0ff, var(--accent) 55%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(87, 215, 255, 0.35));
}

.logo-sub {
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 0.5em;
  margin-left: 0.5em; /* letter-spacing 좌우 비대칭 보정 */
  text-transform: uppercase;
}

.howto {
  list-style: none;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 2;
  text-align: left;
}

.howto li::before { content: '◆ '; color: var(--accent); }

.result-title { font-size: clamp(30px, 9vw, 48px); font-weight: 800; }
.result-title.win { color: var(--good); filter: drop-shadow(0 0 16px rgba(88, 214, 141, 0.4)); }
.result-title.lose { color: var(--bad); filter: drop-shadow(0 0 16px rgba(240, 84, 84, 0.4)); }

.result-sub { color: var(--text-dim); font-size: 14px; }
.stats { font-size: 15px; }

.screen button {
  font-size: 15px;
  font-weight: 700;
  padding: 10px 28px;
  background: linear-gradient(#5fd9ff, #2fa8d8);
  border-color: #7fe3ff;
  color: #06283a;
}

/* ---------- 결과 화면 점수 분해 패널 ---------- */

.score-panel {
  width: min(340px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  background: rgba(30, 34, 49, 0.7);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.score-panel:empty { display: none; } /* 점수 시스템 부재 시 빈 패널 숨김 */

.score-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.score-total-label { font-size: 12px; letter-spacing: 0.08em; color: var(--text-dim); }

.score-total-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 0 12px rgba(154, 123, 255, 0.4));
}

.score-breakdown {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}

.score-breakdown li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-dim);
}

.score-breakdown b { color: var(--text); font-variant-numeric: tabular-nums; }

.score-best {
  font-size: 12.5px;
  color: var(--text-dim);
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}

.score-best b { color: var(--gold); font-variant-numeric: tabular-nums; }

.new-record {
  font-size: 17px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-align: center;
  filter: drop-shadow(0 0 14px rgba(255, 209, 92, 0.55));
  animation: record-pop 0.5s ease-out;
}

@keyframes record-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); opacity: 1; }
}

/* 결과 화면 액션 버튼 행 (다음/재도전/스테이지 선택) — 세로에서 랩 */
.result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

#btn-next-victory {
  background: linear-gradient(#9a7bff, #6f4fe0);
  border-color: #b7a2ff;
  color: #120a2e;
}

#btn-stages-victory,
#btn-stages-defeat {
  background: var(--chrome-2);
  border-color: var(--line);
  color: var(--text);
}

/* ---------- 스테이지 선택 화면 ---------- */

#screen-stage-select {
  /* .screen 상속 — 카드가 많아 세로 정렬 + 내부 스크롤 허용 */
  justify-content: flex-start;
  padding: 22px 16px;
  overflow-y: auto;
}

.stage-select-body { width: 100%; max-width: 720px; gap: 18px; }

.stage-select-title {
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text);
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  width: 100%;
}

.stage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--chrome-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  touch-action: manipulation;
  transition: border-color 0.12s, transform 0.08s, box-shadow 0.12s, opacity 0.12s;
}

@media (hover: hover) {
  .stage-card:not(.locked):hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 0 16px rgba(87, 215, 255, 0.2);
  }
}

.stage-card:not(.locked):active { transform: translateY(0); }

.stage-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #0d0f14;
  image-rendering: pixelated; /* 미니맵 축소 시 또렷하게 */
}

.stage-meta { display: flex; flex-direction: column; gap: 2px; }

.stage-num {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.stage-name { font-size: 15px; font-weight: 700; }

.stage-best {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  min-height: 15px; /* 미기록↔기록 전환 시 카드 높이 밀림 방지 */
}

/* 클리어 표식 — 우상단 배지 (해금+클리어 시에만) */
.stage-cleared-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #06301b;
  background: linear-gradient(#58d68d, #2e9e63);
  border-radius: 6px;
  padding: 3px 7px;
  display: none;
}

.stage-card.cleared .stage-cleared-badge { display: block; }

/* 잠금 오버레이 — 미니맵 위에 어둡게 + 자물쇠 안내 */
.stage-lock {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(13, 15, 20, 0.82);
  border-radius: 12px;
}

.stage-card.locked {
  cursor: not-allowed;
  opacity: 0.92;
  filter: saturate(0.5);
}

.stage-card.locked .stage-lock { display: flex; }

/* ---------- 상점 (하단) ---------- */

#shop {
  flex: 0 0 auto;
  min-height: 96px;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(var(--chrome), #1d2130);
  border-top: 1px solid var(--line);
}

.shop-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-family: inherit;
  color: var(--text);
  background: var(--chrome-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.12s, background 0.12s, transform 0.08s, opacity 0.12s;
}

@media (hover: hover) {
  .shop-item:hover:not(:disabled) {
    border-color: var(--accent);
    background: #333952;
    transform: translateY(-2px);
  }
}

.shop-item.selected {
  border-color: var(--accent);
  background: #31405c;
  box-shadow: 0 0 0 2px rgba(87, 215, 255, 0.35), 0 0 18px rgba(87, 215, 255, 0.25);
}

.shop-item:disabled { opacity: 0.4; filter: saturate(0.4); }

.shop-icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  object-fit: contain; /* 렌더 아이콘 PNG 비율 유지 */
}

/* 아이콘 부재 폴백 — 타워명 이니셜 뱃지(§4.6 강등) */
.shop-icon-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  background: rgba(87, 215, 255, 0.12);
}

.shop-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.shop-name { font-size: 13px; font-weight: 700; white-space: nowrap; }

.shop-cost {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ---------- 타워 정보 패널 ---------- */

#tower-panel {
  position: absolute;
  z-index: 5;
  min-width: min(200px, calc(100vw - 24px));
  max-width: min(244px, calc(100vw - 24px)); /* 좁은 화면에서도 뷰포트 안 (§9 클램프) */
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(30, 34, 49, 0.96);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.panel-title { font-size: 15px; font-weight: 800; }
.panel-level { color: var(--accent); font-size: 12.5px; margin-left: 6px; }

#panel-info { display: flex; flex-direction: column; gap: 4px; }

.panel-stat {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-dim);
}

.panel-stat b { color: var(--text); font-variant-numeric: tabular-nums; }

.panel-next {
  font-size: 11.5px;
  color: var(--accent);
  border-top: 1px dashed var(--line);
  padding-top: 6px;
  margin-top: 2px;
}

/* Lv3 고유 메커니즘 텍스트 (AC-28) — 활성(현재 Lv3) / 해금 예고(Lv2→3) 공용 */
.panel-mech {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
  border-top: 1px dashed var(--line);
  padding-top: 6px;
  margin-top: 2px;
}

.panel-mech b { color: var(--accent-2); }
.panel-mech.unlock b { color: var(--gold); }

#btn-upgrade, #btn-sell { width: 100%; }

#btn-upgrade:not(:disabled) {
  background: linear-gradient(#58d68d, #2e9e63);
  border-color: #7fe0a8;
  color: #06301b;
  font-weight: 700;
}

#btn-upgrade:disabled { opacity: 0.45; }

#btn-sell { background: #503339; border-color: #8a5560; }

/* ---------- 피드백 애니메이션 ---------- */

@keyframes pulse-gain {
  0% { transform: scale(1.25); filter: brightness(1.6); }
  100% { transform: scale(1); }
}

@keyframes pulse-spend {
  0% { transform: scale(0.85); filter: brightness(0.5); }
  100% { transform: scale(1); }
}

@keyframes pulse-hit {
  0%, 100% { transform: none; }
  25% { transform: translateX(-3px); filter: brightness(1.8); }
  75% { transform: translateX(3px); }
}

@keyframes blink {
  50% { opacity: 0.35; }
}

.pulse-gain { animation: pulse-gain 0.3s ease-out; }
.pulse-spend { animation: pulse-spend 0.3s ease-out; }
.pulse-hit { animation: pulse-hit 0.35s ease-out; }

/* ---------- 모바일: 세로 화면 반응형 (기준 390×844 — §9, AC-46) ---------- */

@media (max-width: 720px) {
  /* HUD: 스탯 줄 + 버튼 줄 2단 랩 */
  #hud {
    min-height: 48px;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 8px 10px;
  }

  #hud button { min-height: 44px; }
  #hud-countdown { min-width: 96px; font-size: 11.5px; }

  /* 상점: 4카드 유지, 카드 내부를 세로 배치로 전환 */
  #shop {
    min-height: 96px;
    gap: 8px;
    padding: 8px;
  }

  .shop-item {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    min-width: 0;
    min-height: 88px;
  }

  .shop-icon { width: 36px; height: 36px; }
  .shop-icon-fallback { font-size: 18px; }
  .shop-info { align-items: center; gap: 2px; }
  .shop-name { font-size: 11px; }
  .shop-cost { font-size: 11.5px; }

  #tower-panel button,
  .screen button { min-height: 44px; }

  .howto { font-size: 12.5px; padding: 0 14px; }

  /* 스테이지 선택: 세로에서 2열 유지 — 5카드가 스크롤 가능·잘림 없음(AC-46) */
  #screen-stage-select { padding: 16px 12px; }
  .stage-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stage-card { padding: 8px; }
  .stage-name { font-size: 13px; }
  .stage-lock { font-size: 11px; }

  /* 결과 액션 버튼 — 세로에서 폭 채워 44px 타깃 보장 */
  .result-actions { width: 100%; padding: 0 16px; }
  .result-actions button { flex: 1 1 44%; min-height: 44px; }
  .score-panel { width: 100%; }
}

/* 터치 장치 — 폭과 무관하게 44px 터치 타깃 보장 (§9) */
@media (pointer: coarse) {
  #hud button,
  #tower-panel button,
  .screen button,
  .shop-item {
    min-height: 44px;
  }
}