:root {
  --ink: #23201b;
  --muted: #6b6457;
  --paper: #efe9d6;
  --panel: #faf7ee;
  --line: #cfc6ad;
  --accent: #b5402e;
  --german: #3b4046;
  --soviet: #a8382a;
  --reach: rgba(64, 140, 70, 0.32);
  --target: #e0262a;
  --select: #ffcc00;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #d9d2bd;
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; }

header {
  display: flex; align-items: center; gap: 24px;
  padding: 8px 16px;
  background: #2b2a26; color: #f3eedf;
}
header h1 { font-size: 18px; margin: 0; letter-spacing: 0.04em; text-transform: uppercase; }
#status { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
#status .pill { padding: 2px 10px; border-radius: 10px; background: #44423b; }
#status .you-act { background: #3e7d3a; font-weight: 600; }
#status .german { color: #cfd6dd; }
#status .soviet { color: #ffb4a3; }

button {
  font: inherit; padding: 4px 10px; border: 1px solid #8f8670; border-radius: 4px;
  background: #fffdf6; cursor: pointer;
}
button:hover:not(:disabled) { background: #f1ead4; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); color: #fff; border-color: #7d2a1e; }
button.primary:hover:not(:disabled) { background: #9b3424; }
button.on { background: #ffe680; }

/* lobby */
#lobby { padding: 24px 16px; overflow: auto; }
.card { max-width: 720px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px; }
.card h2 { margin-top: 0; }
.card label { display: block; margin: 6px 0; }
.card fieldset { border: 1px solid var(--line); margin: 12px 0; }
.notes { color: var(--muted); margin: 8px 0; }
.notes ul { margin: 4px 0; padding-left: 20px; }
.seat { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.seat b { width: 80px; }
.seat input { flex: 1; min-width: 0; font: 12px monospace; padding: 3px; }

/* game */
#game { flex: 1; display: flex; min-height: 0; }
#map-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#map-tools { display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: #e6dfca; border-bottom: 1px solid var(--line); }
#hover-info { margin-left: 12px; color: var(--muted); font-size: 13px; }
#map-scroll { flex: 1; overflow: auto; background: #cbc3aa; }
#map { display: block; background: var(--paper); }

#side {
  width: 360px; flex: none; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line); min-height: 0;
}
#side section { padding: 10px 12px; border-bottom: 1px solid var(--line); }
#side h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
#actions .row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
#actions .phase { font-size: 16px; font-weight: 600; }
#actions .hint { color: var(--muted); margin-top: 4px; }
#actions .result { font-weight: 600; color: var(--accent); }
#unit-card:empty, #pool:empty { display: none; }
#unit-card .stats { font-family: ui-monospace, monospace; }
#unit-card table { border-collapse: collapse; margin-top: 4px; width: 100%; }
#unit-card td { padding: 1px 4px; vertical-align: top; }
#unit-card td:first-child { color: var(--muted); white-space: nowrap; }
.shot-line { font-size: 13px; }

#pool .group { margin-bottom: 8px; }
#pool .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  font-size: 12px; padding: 2px 6px; border-radius: 3px; border: 1px solid transparent;
  color: #fff; cursor: default; user-select: none;
}
.chip.german { background: var(--german); }
.chip.soviet { background: var(--soviet); }
.chip.can { cursor: pointer; outline: 2px solid #7ccf6f; }
.chip.sel { outline: 3px solid var(--select); }
.chip.gone { opacity: 0.5; text-decoration: line-through; }

#log-wrap { flex: 1; min-height: 120px; display: flex; flex-direction: column; }
#log { flex: 1; overflow: auto; margin: 0; padding: 0 0 0 4px; list-style: none; font-size: 12.5px; }
#log li { padding: 2px 0; border-bottom: 1px dotted #e1d9c2; }
#log li.turn { font-weight: 700; margin-top: 6px; }
#log li.fire { color: #5a1c12; }
#log li.result { font-weight: 700; color: var(--accent); }
#log li.skip, #log li.end { color: var(--muted); }

#toast {
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
  background: #5a1c12; color: #fff; padding: 8px 14px; border-radius: 4px; z-index: 10; max-width: 80vw;
}

/* map svg */
.hex { stroke: #a99f86; stroke-width: 0.8; }
.t-clear { fill: #efe9d6; }
.t-woods { fill: #c9d3a6; }
.t-hill { fill: #dcc28d; }
.t-swamp { fill: #c4d6cf; }
.t-building { fill: #e7d8c3; }
.hexlabel { font-size: 6.5px; fill: #8a8069; text-anchor: middle; pointer-events: none; }
.road { stroke: #7a6f58; stroke-width: 7; stroke-linecap: round; fill: none; pointer-events: none; }
.road-inner { stroke: #f5f0e0; stroke-width: 4; stroke-linecap: round; fill: none; pointer-events: none; }
.stream { stroke: #2d4f9b; stroke-width: 2.2; fill: none; stroke-linecap: round; pointer-events: none; }
.glyph { pointer-events: none; }
.reach { fill: var(--reach); stroke: #3c7d3f; stroke-width: 1.2; cursor: pointer; }
.reach-cost { font-size: 9px; fill: #1f4d22; text-anchor: middle; font-weight: 700; pointer-events: none; }
.entry-edge { fill: rgba(255, 220, 90, 0.25); pointer-events: none; }
.arc { fill: rgba(255, 204, 0, 0.13); pointer-events: none; }
.hover { fill: rgba(0, 0, 0, 0.07); pointer-events: none; }
.counter { cursor: pointer; }
.counter rect { stroke: #111; stroke-width: 0.8; }
.counter.german rect { fill: var(--german); }
.counter.soviet rect { fill: var(--soviet); }
.counter text { fill: #fff; text-anchor: middle; pointer-events: none; }
.counter .barrel { stroke: #111; stroke-width: 3.2; stroke-linecap: round; }
.counter.spent { opacity: 0.55; }
.counter.selected rect { stroke: var(--select); stroke-width: 3; }
.counter.can rect { stroke: #7ccf6f; stroke-width: 2; }
.target-ring { fill: none; stroke: var(--target); stroke-width: 2.5; pointer-events: none; }
.target-label { font-size: 10px; font-weight: 700; fill: #fff; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--target); stroke-width: 3px; }
.facing-btn { fill: #ffcc00; stroke: #5b4700; stroke-width: 1; cursor: pointer; }
.facing-btn:hover { fill: #fff07a; }
.facing-btn.off { fill: #aaa; opacity: 0.35; cursor: default; }
.facing-cost { font-size: 9px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.los-line { stroke-width: 2.5; stroke-dasharray: 6 4; pointer-events: none; }
.los-line.clear { stroke: #1d8a2b; }
.los-line.blocked { stroke: #d01f1f; }
.shot-line-fx { stroke: #ff3b1f; stroke-width: 3; pointer-events: none; animation: fade 2.2s forwards; }
@keyframes fade { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 800px) {
  #game { flex-direction: column; }
  #side { width: auto; border-left: 0; max-height: 45vh; }
}