/* Dark only (Matt works in a dark room): no white surfaces, soft grey text. */
:root {
  color-scheme: dark;
  --bg: #121418; --panel: #1b1e24; --raised: #252932; --ink: #cfd2d8; --muted: #8b919c; --line: #2e333d;
  --plains: #3a4430; --forest: #24402a; --mountain: #4d4336; --river: #1f3a57; --bridge: #47443f;
  --p1: #e07a6e; --p1-soft: #3a2022; --p2: #7aa6e0; --p2-soft: #1d2a3e; --neutral: #5d6068;
  --move: rgba(245, 195, 60, .46); --threat: rgba(230, 70, 70, .36); --dest: rgba(245, 150, 40, .7);
  --move-edge: rgba(255, 220, 100, .95); --threat-edge: rgba(255, 120, 120, .8);
  --zoc: rgba(170, 120, 230, .55); --bad: #e0705f; --good: #7cc48a; --focus: #d8dbe0;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.4 system-ui, sans-serif; }
header { padding: 8px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
header h1 { font-size: 16px; margin: 0; }
.side { padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.side.s1 { background: var(--p1-soft); color: var(--p1); } .side.s2 { background: var(--p2-soft); color: var(--p2); }
.side.toMove { outline: 2px solid currentColor; }
main { display: flex; gap: 16px; padding: 12px 16px; flex-wrap: wrap; align-items: flex-start; }
#boardWrap { overflow-x: auto; max-width: 100%; position: relative; }
#board { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); user-select: none; }
.axis { background: var(--bg); color: var(--muted); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.cell { width: var(--cell, 60px); height: var(--cellH, 56px); position: relative; cursor: pointer; }
.t-plains { background: var(--plains); } .t-forest { background: var(--forest); } .t-mountain { background: var(--mountain); }
.t-river { background: var(--river); } .t-bridge { background: var(--bridge); }
.cell .terr { position: absolute; left: 3px; top: 1px; font-size: 10px; color: rgba(255,255,255,.35); }
.cell .prop { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; font-size: 9.5px; font-weight: 700; white-space: nowrap;
              overflow: hidden; text-align: center; color: #e6e2da; background: var(--neutral); }
.cell .prop.o1 { background: var(--p1); } .cell .prop.o2 { background: var(--p2); }
.cell .unit { position: absolute; left: 8px; right: 8px; top: 13px; height: 25px; border-radius: 5px; display: flex;
              align-items: center; justify-content: center; font-weight: 700; font-size: 12px; border: 2px solid; }
.cell .unit.o1 { border-color: var(--p1); color: var(--p1); background: var(--p1-soft); }
.cell .unit.o2 { border-color: var(--p2); color: var(--p2); background: var(--p2-soft); }
.cell .unit.spent { opacity: .45; }
.cell .hp { position: absolute; right: 2px; top: 1px; font-size: 10px; font-weight: 700; }
.cell .cap { position: absolute; left: 2px; bottom: 15px; font-size: 9px; background: var(--raised); border-radius: 3px; padding: 0 2px; }
.cell.move::after, .cell.threat::after, .cell.dest::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cell.move::after { background: var(--move); box-shadow: inset 0 0 0 2px var(--move-edge); }
.cell.threat::after { background: var(--threat); box-shadow: inset 0 0 0 1px var(--threat-edge); }
.cell.dest::after { background: var(--dest); }
.cell.target { box-shadow: inset 0 0 0 3px var(--bad); }
.cell.selected { outline: 3px solid var(--focus); outline-offset: -3px; z-index: 1; }
.cell.lastMove { box-shadow: inset 0 0 0 2px var(--focus); }
/* ZOC overlay: hatched where an enemy zone would stop the selected unit. */
.cell.zoc::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
                    background: repeating-linear-gradient(45deg, var(--zoc) 0 3px, transparent 3px 9px); }
aside { flex: 1; min-width: 300px; max-width: 480px; display: flex; flex-direction: column; gap: 10px; }
#toolbox { flex: none; width: 290px; }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 4px 0; }
.stats span:nth-child(odd) { color: var(--muted); }
.abil { margin: 4px 0 6px 16px; padding: 0; } .abil li { margin: 1px 0; }
.dmg { border-collapse: collapse; width: 100%; margin: 2px 0 6px; font-size: 13px; }
.dmg td { padding: 1px 4px; border-bottom: 1px solid var(--line); } .dmg td:last-child { text-align: right; font-weight: 600; }
.o1t { color: var(--p1); } .o2t { color: var(--p2); }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.box h2 { font-size: 12px; margin: 0 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
button, select, input { font: inherit; padding: 5px 10px; margin: 2px 4px 2px 0; border: 1px solid var(--line); border-radius: 6px;
                 background: var(--raised); color: var(--ink); cursor: pointer; }
button:hover { border-color: var(--muted); }
button.primary { background: #3a4252; color: var(--ink); border-color: #4a5466; }
button:disabled { opacity: .5; cursor: default; }
#message { min-height: 1.4em; font-weight: 600; }
#message.bad { color: var(--bad); } #message.good { color: var(--good); }
.why { color: var(--muted); font-size: 12px; }
#log { height: 220px; overflow-y: auto; font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
#log .bot { color: var(--muted); }
#tip { position: fixed; pointer-events: none; background: #0b0c0f; color: var(--ink); border: 1px solid var(--line); font-size: 12px; padding: 6px 8px;
       border-radius: 6px; max-width: 260px; display: none; z-index: 10; }
#summary { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: none; align-items: center; justify-content: center; z-index: 20; }
#summary .card { background: var(--panel); border-radius: 10px; padding: 18px 22px; min-width: 340px; }
#summary table { border-collapse: collapse; width: 100%; margin: 10px 0; }
#summary td, #summary th { padding: 3px 8px; border-bottom: 1px solid var(--line); text-align: right; }
#summary td:first-child, #summary th:first-child { text-align: left; }

/* Tabs (D-053): Play and Bench share the board; Tune and Lab use the full width. */
#tabs { display: flex; gap: 2px; }
#tabs button { margin: 0; border-radius: 6px 6px 0 0; }
#tabs button.on { background: #3a4252; border-color: #5a6478; }
.badge { padding: 2px 8px; border-radius: 10px; background: #4a3a1e; color: #e8c27a; font-size: 12px; font-weight: 600; }
.badge:empty { display: none; }
#benchSide, #tuneMain, #labMain { display: none; }
body[data-tab="bench"] #benchSide { display: flex; }
body[data-tab="bench"] #playSide, body[data-tab="bench"] #toolbox, body:not([data-tab="play"]) .playOnly { display: none; }
body[data-tab="tune"] #tuneMain, body[data-tab="lab"] #labMain { display: block; flex: 1; min-width: 0; }
body[data-tab="tune"] #boardWrap, body[data-tab="tune"] aside, body[data-tab="lab"] #boardWrap, body[data-tab="lab"] aside { display: none; }
.cell.brushOk:hover { outline: 2px dashed var(--focus); outline-offset: -2px; }
.cell.danger::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(220, 70, 70, .16); }
.prev { color: #e8c27a; }
.row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 3px 0; }
.chip { padding: 3px 8px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--raised); font-size: 12px; }
.chip.on { border-color: var(--focus); background: #3a4252; }
table.grid { border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { padding: 2px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
table.grid th:first-child, table.grid td:first-child { text-align: left; }
table.grid th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--panel); }
table.grid input { width: 64px; padding: 1px 4px; margin: 0; text-align: right; }
table.grid input[type=checkbox] { width: auto; }
table.grid input.changed, table.grid select.changed { border-color: #c9a250; background: #3a321e; }
.cols { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.cols > .box { flex: 1; min-width: 320px; }
.delta-up { color: var(--good); } .delta-down { color: var(--bad); }
svg text { fill: var(--muted); font-size: 11px; }
.good { color: var(--good); } .bad { color: var(--bad); }
#benchMsg { min-height: 1.4em; font-weight: 600; }
#tuneMsg { min-height: 1.4em; font-weight: 600; }
table.grid input[data-k="json"], table.grid input[data-k="text"] { width: 170px; text-align: left; font: 12px ui-monospace, Consolas, monospace; }
.cols > .box { overflow-x: auto; }

/* Phone build (body.phone, set by PhoneView's engine.js; touch.js adds the bar). The board
   fits the screen width; orders live in a bar fixed to the bottom. */
body.phone header { padding: 6px 8px; gap: 6px; font-size: 12px; }
body.phone #endTurn, body.phone #tip, body.phone #playSide > .box.why, body.phone #toBench,
body.phone #saveMatch, body.phone #matchPick, body.phone #loadMatch { display: none !important; }
body.phone main { padding: 8px; gap: 8px; padding-bottom: 45vh; }
body.phone #boardWrap { overflow: visible; }
body.phone #board { --axis: 0px; --cell: min(60px, calc((100vw - 18px - var(--cols) * 1px) / var(--cols))); --cellH: var(--cell); }
body.phone .axis { font-size: 0; height: 0; }
body.phone .cell .terr { display: none; }
body.phone .cell .unit { left: 1px; right: 1px; top: 22%; height: 44%; font-size: 9px; border-width: 1px; border-radius: 3px; }
body.phone .cell .hp { font-size: 8px; right: 1px; top: 0; }
body.phone .cell .prop { height: 26%; font-size: 6.5px; }
body.phone .cell .cap { font-size: 7px; bottom: 26%; }
body.phone aside, body.phone #toolbox { min-width: 0; width: 100%; max-width: none; }
#touchBar { position: fixed; left: 0; right: 0; bottom: 0; max-height: 42vh; overflow-y: auto; z-index: 15;
            background: var(--panel); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
#touchBar #touchOrders { margin: 2px 0; }
#touchBar button { padding: 8px 12px; }
#touchBar .row button { flex: 1; }