/* styles.css — 紙與墨的克制視覺。地圖是主角；對話流一次只問一件事。
 * 手機直式為主場景：地圖佔滿，卡片為底部浮層；桌機卡片置右欄。 */
:root {
  --paper: #faf8f3;
  --ink: #1a1a1a;
  --faint: #b8b2a7;
  --red: #c0392b;
  --blue: #2c5aa0;
  --neutral: #8a8378;
  --gold: #d4a017;
  --paper-2: #f3efe6;
  --line-soft: #e4ded2;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  --serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

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

/* ── 頂部狀態列 ────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.topbar-title {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 1rem;
}
.topbar-stats { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.85rem;
}
.stat-label { color: var(--neutral); font-size: 0.72rem; letter-spacing: 0.1em; }
.stat-value { font-weight: 600; }
.stat-name { font-family: var(--serif); font-weight: 600; }
.stat-pair { display: inline-flex; gap: 3px; align-items: baseline; }
.stat-pair .ico { font-family: var(--serif); font-size: 0.68rem; color: var(--neutral); }
.muted { color: var(--neutral); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-red { background: var(--red); }
.dot-blue { background: var(--blue); }
.stat.active-player {
  background: var(--paper-2);
  border-radius: 6px;
  padding: 3px 8px;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.topbar-tools { display: flex; gap: 6px; }
.tool-btn {
  font-family: var(--serif);
  font-size: 0.82rem;
  padding: 5px 10px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--neutral);
  cursor: pointer;
}
.tool-btn:hover { background: var(--paper-2); color: var(--ink); }
.tool-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── 主版面 ───────────────────────────────────────────── */
.main { display: flex; flex: 1; min-height: 0; position: relative; }
.map-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
}
#map {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
#map:active { cursor: grabbing; }

/* ── 連結（折線）─────────────────────────────────────── */
.link-line {
  fill: none;
  stroke: var(--faint);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 0.35s ease, stroke-width 0.35s ease;
}
.link-line.built { stroke-width: 4; }
.link-line.unbuilt { stroke-dasharray: 6 7; }
.link-line.unbuilt.river { stroke-dasharray: 2 8; opacity: 0.85; }
.link-line.highlight { stroke: var(--gold) !important; stroke-width: 4; }
.link-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 20;
  stroke-linejoin: round;
  cursor: pointer;
}
.link-label {
  fill: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.link-label.show { opacity: 1; }

/* ── 城池（節點）──────────────────────────────────────── */
.city { cursor: pointer; outline: none; }
.city-circle {
  stroke: var(--paper);
  stroke-width: 2;
  transition: r 0.4s cubic-bezier(0.34, 1.4, 0.5, 1), fill 0.35s ease;
}
.city-circle.level-hub { stroke-width: 3; }
.city-circle.orphan { stroke: var(--gold); stroke-dasharray: 3 3; }
.city-halo {
  fill: var(--gold);
  opacity: 0;
  transition: opacity 0.4s ease, r 0.4s ease;
  pointer-events: none;
}
.city-halo.show { opacity: 0.1; }
.city-ring {
  fill: none;
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.3s ease, r 0.4s ease;
}
.city-ring.show { opacity: 0.85; }
.city-troops {
  fill: #fff;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.18);
  stroke-width: 0.4;
}
.city-name {
  fill: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 13px;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3;
}
.city.highlight .city-circle { stroke: var(--gold); stroke-width: 3.5; }
.city.selected .city-circle { stroke: var(--ink); stroke-width: 3.5; }
.city:focus-visible .city-circle { stroke: var(--gold); stroke-width: 3.5; }

/* ── 回合橫幅 ─────────────────────────────────────────── */
.turn-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--ink);
  color: var(--paper);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
}
.turn-banner.show { opacity: 0.95; transform: translateX(-50%) translateY(0); }

/* ── 對話卡 host ──────────────────────────────────────── */
.card-host {
  width: 340px;
  flex-shrink: 0;
  border-left: 1px solid var(--line-soft);
  padding: 16px;
  display: flex;
  align-items: flex-start;
  overflow-y: auto;
}
.card {
  width: 100%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-tag {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--neutral);
  text-transform: uppercase;
}
.card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.card.thin .card-title { font-size: 1rem; font-weight: 500; }
.card-sub { font-size: 0.85rem; color: var(--neutral); }
.card-body { font-size: 0.9rem; }
.report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.report-list li {
  padding: 6px 10px;
  background: var(--paper-2);
  border-radius: 7px;
  line-height: 1.5;
  border-left: 3px solid var(--line-soft);
}
.thinking { font-size: 2rem; text-align: center; color: var(--neutral); letter-spacing: 0.2em; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.act-btn {
  flex: 1 1 auto;
  min-width: 84px;
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 500;
  padding: 11px 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s;
}
.act-btn:hover:not(:disabled) { background: var(--paper-2); border-color: var(--neutral); }
.act-btn:active:not(:disabled) { transform: translateY(1px); }
.act-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.act-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.act-btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.act-btn.primary:hover:not(:disabled) { background: #000; }
.act-btn.ghost { color: var(--neutral); flex: 0 1 auto; }

/* ── modal ────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.overlay[hidden] { display: none; }
.modal {
  background: var(--paper);
  border-radius: 14px;
  padding: 22px;
  width: min(360px, 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.modal h3 { margin: 0 0 6px; font-size: 1.15rem; }
.modal-sub { margin: 0 0 14px; color: var(--neutral); font-size: 0.88rem; }
.stepper { display: flex; gap: 8px; align-items: center; justify-content: center; }
.stepper button {
  width: 46px; height: 46px;
  font-size: 1.3rem;
  border: 1px solid var(--line-soft);
  background: var(--paper);
  border-radius: 8px;
  cursor: pointer;
}
.stepper button:hover { background: var(--paper-2); }
.stepper input {
  width: 92px;
  text-align: center;
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 600;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
}
.modal-meta {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--neutral);
  margin: 12px 0 4px;
  min-height: 1.1em;
}
.modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.modal-btns .act-btn { flex: 1; }

/* ── 攻城判定 modal ───────────────────────────────────── */
.combat-grid { display: flex; align-items: stretch; gap: 10px; margin: 6px 0 4px; }
.combat-side { flex: 1; text-align: center; padding: 12px 8px; border-radius: 10px; background: var(--paper-2); }
.combat-side.attacker { box-shadow: inset 0 0 0 1px rgba(192, 57, 43, 0.3); }
.combat-side.defender { box-shadow: inset 0 0 0 1px rgba(44, 90, 160, 0.3); }
.cs-label { font-size: 0.75rem; color: var(--neutral); letter-spacing: 0.1em; }
.cs-formula { font-family: var(--mono); font-size: 0.8rem; margin: 6px 0; color: #4a463f; }
.cs-total { font-family: var(--mono); font-size: 2rem; font-weight: 600; }
.combat-vs { align-self: center; color: var(--neutral); font-family: var(--mono); }
.dice { text-align: center; font-size: 3rem; line-height: 1; margin: 10px 0 4px; color: var(--ink); }
.combat-result { text-align: center; font-size: 1.05rem; font-weight: 700; padding: 8px; margin-top: 6px; }
.combat-result.win { color: var(--red); }
.combat-result.lose { color: var(--neutral); }

.end-msg { text-align: center; font-size: 1.05rem; margin: 8px 0 4px; }

/* ── 戰報 log ─────────────────────────────────────────── */
.log-modal { width: min(420px, 100%); }
.log { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; font-size: 0.85rem; line-height: 1.5; }
.log li { padding: 5px 2px; border-bottom: 1px solid var(--line-soft); color: #4a463f; }
.log li .lg-turn { font-family: var(--mono); font-size: 0.68rem; color: var(--faint); margin-right: 6px; }
.log li.red-ev { border-left: 2px solid var(--red); padding-left: 6px; }
.log li.blue-ev { border-left: 2px solid var(--blue); padding-left: 6px; }

/* ── 手機直式：卡片改為底部浮層 ───────────────────────── */
@media (max-width: 820px) {
  .main { display: block; }
  .map-wrap { position: absolute; inset: 0; }
  #map { max-height: none; }
  .card-host {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--line-soft);
    background: var(--paper);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
    max-height: 52vh;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(110%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
    z-index: 20;
  }
  .card-host.show { transform: translateY(0); }
  .topbar-stats { gap: 10px; font-size: 0.8rem; }
  .topbar-title { display: none; }
}

/* ── 尊重 prefers-reduced-motion ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card-host { transition: none !important; }
}