:root {
  --bg: #f4f6f9;
  --fg: #2c3542;
  --muted: #7b8698;
  --line: #cdd5e0;
  --board-bg: #e7ecf3;
  --rock: #b9c3d2;
  --mine: #3f8f63;
  --mine-soft: #cfe6d9;
  --foe: #c2567a;
  --foe-soft: #f0d3dd;
  --btn-bg: #55637a;
  --btn-fg: #f2f5f9;
  --sheet-bg: #ffffff;
  --scrim: rgba(244, 246, 249, 0.72);
  --pad-x: clamp(10px, 4vmin, 28px);
  --app-max: 440px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c;
    --fg: #dfe5ee;
    --muted: #8892a3;
    --line: #333c49;
    --board-bg: #1b212a;
    --rock: #46505f;
    --mine: #5fbd88;
    --mine-soft: #274536;
    --foe: #e07a9c;
    --foe-soft: #472734;
    --btn-bg: #4a5568;
    --sheet-bg: #212832;
    --scrim: rgba(18, 22, 28, 0.74);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  display: flex;
  justify-content: center;
  padding: clamp(10px, 3vmin, 24px) var(--pad-x);
}

.app {
  width: min(100%, var(--app-max));
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vmin, 14px);
}

/* 헤더 배치는 모든 게임이 같다. 양옆을 1fr로 묶으면 좌우 폭이 달라도 이름이
   가운데에 온다. */
.title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.title-row h1 { text-align: center; }
.title-row .head-nav { justify-self: start; }
.head-nav { display: flex; align-items: center; gap: 14px; }
.title-row .head-actions { justify-self: end; }

h1 {
  margin: 0;
  font-size: clamp(24px, 6vmin, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.head-actions { display: flex; align-items: baseline; gap: 14px; }

.toggle {
  border: 0; background: none; padding: 0;
  color: inherit; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; opacity: 0.6;
}
.toggle:hover { opacity: 1; }
.toggle.sound { font-size: 12px; }
.toggle.sound[aria-pressed="false"] { opacity: 0.38; text-decoration: line-through; }

.back {
  color: inherit; opacity: 0.6; text-decoration: none;
  font-size: 14px; font-weight: 600;
}
.back:hover { opacity: 1; }

.picker-row { display: flex; align-items: center; gap: 10px; }
.picker-row #new-game { margin-left: auto; }
.picker { display: flex; gap: 4px; }

.pick {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
}

.pick[aria-pressed="true"] {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}

.row-label { font-size: 11px; font-weight: 600; color: var(--muted); }

.tally { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.tally b { color: var(--mine); }
.tally i { color: var(--foe); font-style: normal; }

.board-wrap { position: relative; }

.board {
  display: block;
  width: 100%;
  height: auto;
  background: var(--board-bg);
  border-radius: 14px;
  /* 판을 누를 곳이 곧 거점이라 click으로 짠다. touch-action을 none으로 두면
     touchend가 취소돼 click이 나지 않는다(공용 base.js). 끌어서 하는 조작이
     없으므로 기본값 그대로 둔다. */
}

/* 거점. 색이 곧 주인이라 채우기만 바꾼다. */
.rock { fill: var(--rock); }
.rock.p1 { fill: var(--mine); }
.rock.p2 { fill: var(--foe); }

.hit { fill: transparent; cursor: pointer; }

/* 코어. 다 차 있으면 그리지 않고, 깎이는 동안만 테두리가 준다. */
.core { fill: none; stroke: #f2c14e; stroke-width: 3; stroke-linecap: round; }

.count {
  font-size: 11px; font-weight: 800;
  text-anchor: middle; dominant-baseline: central;
  fill: #ffffff; paint-order: stroke;
  pointer-events: none;
}
.count.tint0 { fill: var(--fg); }
.count.small { font-size: 10px; }
.tint1 { fill: var(--mine); }
.tint2 { fill: var(--foe); }

.build { fill: #f3f6fa; opacity: 0.92; pointer-events: none; }

.dot { pointer-events: none; }
.dot.p1 { fill: var(--mine); }
.dot.p2 { fill: var(--foe); }

.link { stroke: var(--mine); stroke-width: 1; opacity: 0.35; stroke-dasharray: 3 4; }

/* 걸어 둔 집결지. 사거리 선(점선)과 헷갈리지 않게 실선으로 긋고 화살촉을 붙인다. */
.rally { stroke: var(--mine); stroke-width: 1.4; opacity: 0.5; }
.rally-head { fill: var(--mine); opacity: 0.7; }
.ring { fill: none; stroke: var(--mine); stroke-width: 2; opacity: 0.9; }

.flight.p1 { fill: var(--mine); }
.flight.p2 { fill: var(--foe); }

.panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 84px;
  display: flex;
  align-items: center;
}

.panel-empty { margin: 0; font-size: 13px; color: var(--muted); }
.panel-body { width: 100%; display: flex; flex-direction: column; gap: 10px; }

.stats { display: flex; gap: 12px; font-size: 12px; }
.stat { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.stat-name { color: var(--muted); font-weight: 600; }
.stat-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.stat-fill { display: block; height: 100%; background: var(--mine); }

.panel-actions { display: flex; align-items: center; gap: 8px; }
.panel-row { display: flex; align-items: center; gap: 8px; }
.panel-row .picker { margin-left: auto; }
.panel-hint { font-size: 11px; font-weight: 600; color: var(--muted); }

.btn {
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
}
.btn:disabled { opacity: 0.35; cursor: default; }

/* 집결지 단추는 건설과 나란히 서지만 하는 일이 달라 테두리만 두른다. */
.btn.ghost {
  background: none;
  color: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn.ghost[aria-pressed="true"] {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: none;
}

/* 도움말 시트. 껍데기는 shared/sheet.css, 결과 덮개는 shared/result.css. */
.sheet {
  background: var(--sheet-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}

#help { border: 0; padding: 0; }

.sheet-title { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.sheet-note { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.sheet-actions { display: flex; gap: 8px; }

.help-list { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.help-list li { margin-bottom: 6px; }