/*
 * css/style.css — ui-dev 소유 (레이아웃 시드: system-architect).
 * 구조 계약(§7): #app 폭 960, HUD 바 + 960×640 캔버스(#stage) + 상점 바 세로 스택.
 * v2 모바일 계약(§11, AC-33~35): 뷰포트 < 960px에서 CSS만으로 캔버스 종횡비 축소
 * (논리 좌표계 960×640 불변 — 입력 역보정은 core/input), HUD 상단/상점 하단 스택 유지,
 * 가로 스크롤 금지, 터치 타깃 ≥ 44px, 게임 영역 touch-action:none/버튼 manipulation.
 * 톤: 어두운 슬레이트 크롬 + 수정(시안/보라) 포인트 — 밝은 카툰 판타지 필드와 대비.
 */
: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; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  display: flex;
  justify-content: center;
  padding: 12px 0;
  user-select: none; /* 게임 UI — 텍스트 드래그 방지 */
}

#app {
  width: min(960px, 100%); /* 데스크톱 960 고정과 동일, 좁은 화면은 축소 — 가로 스크롤 금지 */
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.hidden { display: none !important; }

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

#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;
  cursor: pointer;
  touch-action: manipulation; /* 더블탭 줌 차단 (§11) */
  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 (상단 48px) ---------- */

#hud {
  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); } /* (v3) 점수 — 아케인 보라 */
#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); }

/* ---------- 스테이지 (논리 960×640 — CSS 폭 추종 축소, §11) ---------- */

#stage {
  position: relative;
  width: 100%;
  background: #0d0f14;
  touch-action: none; /* 게임 영역 — 스크롤/더블탭 줌 차단 (§11) */
  /* 필드(960×640 캔버스) 아래 컨트롤 밴드 — 배치 취소 버튼 전용.
     캔버스는 width:100%로 #stage 콘텐츠 폭을 꽉 채우므로 필드 위 어떤 절대배치도
     타일 건설 클릭을 가로챈다. 밴드를 상시 확보(레이아웃 시프트 0)해 버튼을 필드 밖에
     둔다. 밴드는 #stage 내부라 §7 "#stage 내" 계약 유지 — DOM 구조 불변, CSS만. */
  padding-bottom: 56px;
}

#game-canvas {
  display: block;
  width: 100%;      /* 종횡비 3:2는 캔버스 고유 크기(960×640 × DPR)가 유지 */
  height: auto;
  touch-action: none;
}

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

/* 배치 취소 버튼 — 배치 모드 중에만 노출(.hidden 토글은 placement.js), 터치 필수 취소 수단.
   필드(캔버스) 아래 컨트롤 밴드(#stage padding-bottom) 하단 중앙에 배치 — 필드 타일 위에
   있지 않아 상단 중앙(col 6~8 등) 건설 클릭을 더 이상 가로채지 않는다. bottom:6px는 56px
   밴드에서 44px 버튼을 수직 중앙(6px 여백)에 맞춘 값. */
#btn-cancel-placement {
  position: absolute;
  bottom: 6px;
  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); /* 390px 폭에서도 한 줄 유지 — 데스크톱은 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;
}

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

.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; } /* 점수 시스템 부재 시(§1) 빈 패널 숨김 */

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

/* ---------- (v3) 스테이지 선택 화면 ---------- */

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

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

#shop {
  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);
}

.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)); /* 좁은 화면에서도 뷰포트 안 (§11 클램프) */
  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 shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { 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; }
.shake { animation: shake 0.3s; }

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

@media (max-width: 720px) {
  body { padding: 0; }

  #app {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* HUD: 스탯 줄 + 버튼 줄 2단 랩 — 높이 고정 해제 */
  #hud {
    height: auto;
    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 {
    height: auto;
    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-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; }

  /* (v3) 스테이지 선택: 세로에서 2열 유지 — 5카드가 스크롤 가능·잘림 없음(AC-34) */
  #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; }

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

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