/* Wildscan — 밝은 자연. 텍스트 0.
 * ★ 밝고 채도 높은 자연 = 미학이 아니라 "플레이 가능성" 그 자체 (핸드오프 49행)
 *   코어 루프가 지형을 한눈에 읽는 것이므로, 어두운 아트는 게임을 죽인다.
 * ⚠️ egg-webapp 교훈: cqh 금지(삼성 인터넷 미적용). vw/dvh/%/flex 만 쓴다. */

:root {
  --sky:      #eaf6ff;
  --paper:    #fffdf5;
  --ink:      #2f3b30;
  --line:     #d8e3d2;
  --hit:      #3fbf5f;   /* 🟢 반응 */
  --miss:     #e8564a;   /* 🔴 무반응 */
  --gold:     #ffc23c;
  --shadow:   0 2px 0 rgba(0,0,0,.10);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--sky); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  user-select: none; touch-action: manipulation;
}

#app { display: flex; flex-direction: column; height: 100dvh; }

/* ───────── 지도 */
#stage { position: relative; flex: 1; min-height: 0; }
#map   { display: block; width: 100%; height: 100%; }

/* ───────── HUD */
#hud {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; pointer-events: none;
}
#hud > * { pointer-events: auto; }

.pips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-content: center; }
.pip {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); box-shadow: var(--shadow);
}
.pip.used { background: #fff; opacity: .45; box-shadow: none; }
/* 예산이 바닥나면 = "확신을 살 수 없다". 클리어는 여전히 가능(도박). */
.pips.empty .pip { background: var(--miss); }

.iconbtn {
  position: relative; border: 0; border-radius: 14px;
  width: 46px; height: 46px; font-size: 22px;
  background: var(--paper); box-shadow: var(--shadow); cursor: pointer;
}
.iconbtn:active { transform: translateY(1px); }
.iconbtn:disabled { opacity: .35; }
.ad {
  position: absolute; right: -3px; bottom: -3px;
  background: var(--gold); color: #fff; font-size: 9px;
  border-radius: 6px; padding: 1px 4px; font-weight: 700;
}

/* ───────── 탐지기 */
#tools {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; gap: 2vw; padding: 12px 8px;
}
.det {
  border: 0; border-radius: 18px; cursor: pointer;
  /* 탐지기 최대 4대 + ✕ + 🎯 = 6개가 좁은 폰에서도 한 줄에 들어와야 한다 */
  width: clamp(44px, 13vw, 60px); height: 56px;
  font-size: clamp(20px, 5.6vw, 26px);
  background: var(--paper); box-shadow: var(--shadow);
  transition: transform .08s, box-shadow .08s;
}
.det.on {
  transform: translateY(-6px);
  box-shadow: 0 6px 0 rgba(0,0,0,.12), 0 0 0 3px var(--ink) inset;
}
.det.declare { background: var(--gold); }
.det.declare.on { box-shadow: 0 6px 0 rgba(0,0,0,.12), 0 0 0 3px #b8791a inset; }
/* 배제 표시(✕) = 노노그램의 X 칠하기. 무료·드래그 가능. 원작에서 보드를 뒤덮던 큐브 그 자체. */
.det.mark-tool { color: var(--miss); font-weight: 900; font-size: 24px; }

/* ───────── 장부(소거 UI) = 이 게임의 진짜 플레이 화면
 * 행 = 단서(인쇄된 목록) · 열 = 탐지기.  플레이어가 직접 X를 친다.
 * ★ 게임이 자동 소거하면 안 된다 — 그게 플레이다. */
#ledger {
  flex: 0 0 clamp(180px, 34dvh, 320px);
  background: var(--paper); border-top: 2px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
#ledgerHead {
  display: grid; grid-template-columns: 1fr repeat(var(--nd, 3), 40px);
  gap: 2px; padding: 6px 10px 5px; text-align: center;
  border-bottom: 2px solid var(--line); align-items: center;
}
.lhead-l { text-align: left; }
.modebtn {
  border: 1px solid var(--line); background: #fff; border-radius: 9px;
  padding: 3px 8px; font-size: 15px; cursor: pointer;
}
.thead { font-size: 17px; line-height: 1; }
/* 흔적별 "남은 습성 수" = 추적 모드의 핵심 정보 */
.thead .cnt {
  display: block; font-size: 11px; font-weight: 800;
  color: #7a8a78; margin-top: 1px;
}
.thead .cnt.solved { color: var(--hit); }
.thead .cnt.solved::after { content: " ✓"; }

#clues { overflow-y: auto; padding: 2px 10px 12px; }

/* 계열 헤더 — 23행을 통으로 훑지 않게 지형/야생동물/구조물로 묶는다 */
.famhead {
  font-size: 11px; font-weight: 800; color: #93a08f;
  padding: 7px 0 3px; letter-spacing: .5px;
}

.clue {
  display: grid; grid-template-columns: 1fr repeat(var(--nd, 3), 40px);
  gap: 2px; align-items: center;
  padding: 2px 0; border-bottom: 1px solid #f2f2ea;
  cursor: pointer;
}
.clue.dead { opacity: .3; }                        /* 힌트로 소거된 부류 */
.clue.gone { opacity: .32; }                       /* 자동 소거: 모든 흔적에서 탈락 */
.clue.gone .face { text-decoration: line-through; }

.face { font-size: 13.5px; padding-left: 2px; line-height: 1.3; word-break: keep-all; }
.face.neg { color: #b0483f; font-weight: 600; }

/* 소거 칸 */
.mark {
  height: 24px; border-radius: 7px; cursor: pointer;
  background: #f4f4ec; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: var(--miss);
}
.mark.x::after  { content: "✕"; }
.mark.o { background: #e6f7ea; border-color: var(--hit); }
.mark.o::after  { content: "●"; color: var(--hit); font-size: 10px; }
/* 자동 소거(추적 모드) — 관측이 반박한 것. 플레이어가 계산할 수 있는 것을 대신해줄 뿐 = 정보 손실 0 */
.mark.autox {
  background: #efefe8; border-color: #e2e2d8; color: #c3c3b6; cursor: default;
}
.mark.autox::after { content: "✕"; }

/* 탭 → 지도에 그 습성의 영역 하이라이트 (모바일엔 hover가 없다 = 유일한 해독기) */
.clue.lit { background: #fff3cc; box-shadow: inset 3px 0 0 var(--gold); }

/* ───────── 결과 */
#over {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: rgba(20,30,20,.45); backdrop-filter: blur(2px);
}
#over.hidden { display: none; }
#overCard {
  background: var(--paper); border-radius: 22px; padding: 22px 28px;
  text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
#overIcon  { font-size: 54px; line-height: 1; }
#overStars { font-size: 30px; margin: 6px 0 14px; letter-spacing: 2px; }
#overBtns  { display: flex; gap: 10px; justify-content: center; }
.big {
  border: 0; border-radius: 16px; cursor: pointer;
  padding: 12px 20px; font-size: 20px; font-weight: 700;
  background: var(--gold); box-shadow: var(--shadow);
}
.big.ghost { background: #fff; border: 2px solid var(--line); }

/* ───────── 가로 화면: 지도 | 장부 */
@media (orientation: landscape) and (min-width: 700px) {
  #app { flex-direction: row; }
  #ledger {
    flex: 0 0 clamp(300px, 34vw, 440px);
    border-top: 0; border-left: 2px solid var(--line);
  }
}