/* Future Skirmishing — the board and play UI (desktop only). Layout E (D2a, docs/briefs/D2a-battle-screen-layout.md):
   top bar · [dice tray | board] · one right rail · the log as a bar under everything. Nothing scrolls at 1600 x 900. */
:root {
  --bg: #15171a; --panel: #1d2024; --panel2: #24282d; --ink: #e8e6e0; --muted: #969a9f; --line: #33383e;
  --p0: #4f8fe8; --p0bg: #1c2a3d; --p1: #e0604a; --p1bg: #3b211c;
  --good: #7fd88f; --bad: #ff7b6e; --accent: #e3c46c;
  /* the one accent for "the current thing" (the lit phase, the default button's ring, the selected unit's name): the
     palette's brass, as on the dice tray's plate — not Aging Skirmish's gold (owner, 9 Nov 2026) */
  --gold: #e3c46c;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  /* the display face (owner, 8 Nov 2026: a local stack only, no web fonts): the round, the banner, prompt titles */
  --display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --logH: 36px;              /* the log bar folded; raised it is --logUp (the board gives up that height) */
  --logUp: 150px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
button { font: inherit; color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
button:hover:not(:disabled) { border-color: #59606a; background: #2c3137; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: #2f5d3a; border-color: #43824f; }
button.primary:hover:not(:disabled) { background: #377044; }
button.pass { background: transparent; border-style: dashed; }
button.wide { display: block; width: 100%; text-align: left; margin: 4px 0; }
button.mini { padding: 0 6px; font-size: 11px; }
input, select { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
/* every button that has a key shows it, in this one style (owner, 8 Nov 2026) */
kbd.key { display: inline-block; font: 10.5px/1 var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; margin-left: 6px; vertical-align: 1px; }
button.primary kbd.key { color: #d8ead9; border-color: rgba(255,255,255,.3); }
button.isDefault kbd.key { color: var(--gold); border-color: rgba(227,196,108,.5); }

/* ---------- the page grid ---------- */
#app { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: 44px minmax(0, 1fr) var(--logH); height: 100vh; }
#app.logUp { grid-template-rows: 44px minmax(0, 1fr) var(--logUp); }
#top { grid-column: 1 / 3; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); position: relative; z-index: 8; white-space: nowrap; }
#main { grid-column: 1; grid-row: 2; display: flex; min-width: 0; min-height: 0; background: #101214; position: relative; }
#right { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-left: 1px solid var(--line); }
#logBar { grid-column: 1 / 3; grid-row: 3; background: var(--panel); border-top: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* ---------- top bar ---------- */
#top .brand { font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
#top .phase { color: var(--gold); font-weight: 600; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; flex: 0 0 auto; }
/* the phase strip (UX proposal 11, js/ui/strip.js): round · whose turn · Command · Movement · Shooting · Charge · Fight */
#top .stripRound { color: var(--ink); font: 700 15px/1 var(--display); letter-spacing: .01em; }
#top .stripStep { font-family: var(--display); font-size: 14px; }
#top .stripTurn { padding: 2px 8px; border-radius: 5px; font-weight: 600; color: var(--ink); }
#top .stripTurn.s0 { background: var(--p0bg); color: #9fc2ff; } #top .stripTurn.s1 { background: var(--p1bg); color: #ffab9b; }
#top .stripPhases { display: inline-flex; align-items: center; gap: 6px; }
#top .stripPhase { color: var(--muted); font-weight: 500; padding: 2px 7px; border-radius: 5px; }
#top .stripPhase.lit { color: #1b0d00; background: var(--gold); font-weight: 700; }
#top .stripDot { color: var(--line); }
#top .stripPhase .short { display: none; }
/* the score chips never lose their CP and VP: the faction name is the part that gives way */
#top .side { flex: 0 0 auto; white-space: nowrap; padding: 3px 9px; border-radius: 6px; display: inline-flex; align-items: baseline; gap: 4px; }
#top .side.s0 { background: var(--p0bg); } #top .side.s1 { background: var(--p1bg); }
#top .side .fac { display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
#top .side .ctl { color: var(--muted); font-size: 11px; }
#top .side .cp { color: var(--accent); margin-left: 2px; } #top .side .vp { color: var(--good); margin-left: 2px; font-weight: 600; }
@media (max-width: 1700px) { #top .side .ctl { display: none; } #top .side .fac { max-width: 100px; } }
#top .grow { flex: 1; }
#top button { flex: 0 0 auto; }
#top .saveWarn { color: #1b0d00; background: var(--gold); font-weight: 700; padding: 2px 8px; border-radius: 5px; cursor: help; }
#top .saveWarn[hidden] { display: none; }
/* narrower desktop windows (D1b review): short phase names, tighter gaps, then the faction names and "human" /
   "computer" go before anything is cut; Undo and Menu never leave the bar */
@media (max-width: 1540px) {
  #top { gap: 8px; }
  #top .phase { gap: 6px; }
  #top .stripPhase { padding: 2px 5px; }
  #top .stripPhase .long { display: none; } #top .stripPhase .short { display: inline; }
}
@media (max-width: 1440px) {
  #top .side .fac, #top .side .ctl { display: none; }
  #top .missionsBar .word { display: none; }
}
@media (max-width: 1300px) {
  #top .brand { display: none; }
}

/* Missions in the top bar (owner, 8 Nov 2026): a button with your VP, the full panel in a dropdown under it */
#top .missionsBar { position: relative; flex: 0 0 auto; }
#top .missionsBar[hidden] { display: none; }
#top .missionsBar .vp { color: var(--good); font-weight: 700; }
#top .missionsBar .caret { color: var(--muted); margin-left: 2px; }
#top #missionsBtn.on { border-color: var(--gold); background: var(--panel2); }
#top #missionsBtn.flash { animation: mFlash 1.2s ease-in-out 3; }
@keyframes mFlash { 0%, 100% { box-shadow: none; border-color: var(--line); } 50% { box-shadow: 0 0 0 3px rgba(227,196,108,.45); border-color: var(--gold); } }
.mDrop { position: absolute; right: 0; top: 36px; width: 900px; max-height: calc(100vh - 100px); overflow: auto; background: var(--panel); border: 1px solid var(--gold); border-radius: 0 0 10px 10px; padding: 10px 12px; box-shadow: 0 14px 40px rgba(0,0,0,.6); font-size: 12px; white-space: normal; text-align: left; z-index: 9; }
.mDrop[hidden] { display: none; }
/* the two sides as two columns, so the panel fits 900 px tall with every card section open (review round 1) */
.mDrop #missions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; align-items: start; }
.mDrop #missions .mHead { grid-column: 1 / 3; }
.mDropFoot { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------- the board and what floats over it ---------- */
/* the board's column: the board box (the canvas and what floats over it) above the move strip's row */
#boardWrap { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #101214; }
#boardBox { flex: 1 1 auto; position: relative; min-width: 0; min-height: 0; }
#board { display: block; }
#board.rulerHeld { cursor: crosshair !important; }   /* D held: the ruler's cursor over the board's own (js/ui/ruler.js) */
#app.aiTurn #prompt { opacity: .85; }
/* the phase banner: over the top of the board, never in the way of a click or a key, gone by itself (1.5 s) */
/* never wider than the board area (a combined banner naming several phases wraps to a second line, review of the
   combined branches, 9 Nov 2026) */
#boardBox .banner { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; text-align: center; white-space: normal;   /* max-content: a box at left 50% would otherwise fit itself into half the width */
  padding: 10px 26px; border-radius: 10px; font: 700 24px/1.2 var(--display); letter-spacing: .01em; color: var(--ink);
  background: rgba(20,22,25,.92); border: 1px solid #4a5058; box-shadow: 0 8px 28px rgba(0,0,0,.55); opacity: 0; }
#boardBox .banner.long { font-size: 18px; padding: 8px 20px; }   /* a combination of several phases: two lines at most */
#boardBox .banner.s0 { border-color: var(--p0); } #boardBox .banner.s1 { border-color: var(--p1); }
#boardBox .banner[hidden] { display: none; }
#boardBox .banner.show { animation: bannerFade 1.5s ease-out forwards; }
@keyframes bannerFade { 0% { opacity: 0; transform: translateX(-50%) translateY(-6px); } 12% { opacity: 1; transform: translateX(-50%) translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; } }
/* the result of the current action (Aging Skirmish idea, owner 8 Nov 2026): the action's log lines in the board's corner for 9 s */
.result { position: absolute; right: 12px; top: 96px; width: 290px;   /* below the phase banner's place */ z-index: 5; pointer-events: none; background: rgba(10,14,20,.9); border: 1px solid #46556a; border-top: 3px solid #b58a2e; border-radius: 8px; padding: 7px 11px; font-size: 12.5px; transition: opacity .6s; }
.result[hidden] { display: none; }
.result.fade { opacity: 0; }
.result .rTitle { display: block; font: 700 14px/1.3 var(--display); border-bottom: 1px solid var(--line); padding-bottom: 3px; margin-bottom: 3px; }
.result .rLine { padding: 1px 0; }
.result .rLine.prev { color: var(--muted); opacity: .75; }
.result .rLine.t-destroyed, .result .rLine.t-mortal { color: var(--bad); }
.result .rLine.t-batch { color: var(--good); }
.result .rLine.t-vp, .result .rLine.t-cp, .result .rLine.t-reaction { color: var(--accent); }
/* D5: an attack's block in the panel: the attacker's colour down its side, the heading first, "… n more" muted */
.result .rTitle.s0 { color: #9fc2ff; } .result .rTitle.s1 { color: #ffab9b; }
.result .rBlock { border-left: 3px solid transparent; padding-left: 7px; }
.result .rBlock.s0 { border-color: var(--p0); } .result .rBlock.s1 { border-color: var(--p1); }
.result .rLine.t-head { font-weight: 700; }
.result .rLine.t-more { color: var(--muted); font-style: italic; }
/* the move strip under the board (D1a's placement controls, moved out of the prompt): one row in the board's column,
   always there so the board never changes size when a move starts; the move's buttons while a move is in hand, a
   quiet legend of the keys otherwise; it never covers a model; it tightens, never wraps */
.moveStrip { flex: 0 0 auto; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 6px; min-width: 0; height: 35px; overflow: hidden; background: rgba(8,11,16,.96); border-top: 1px solid #2c333b; padding: 4px 8px; }
.moveStrip[hidden], #app.noBattle .moveStrip { display: none; }
.moveStrip.idle .stripIdle { color: var(--muted); opacity: .6; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.moveStrip:not(.idle) { border-top-color: #46556a; }
.moveStrip button { padding: 3px 9px; font-size: 12.5px; white-space: nowrap; flex: 0 0 auto; }
.moveStrip button.isDefault { outline: 2px solid var(--gold); outline-offset: 1px; }
.moveStrip.tight { gap: 3px; padding: 4px 4px; }
.moveStrip.tight button { padding: 3px 5px; font-size: 11.5px; }
.moveStrip.tight kbd.key { margin-left: 4px; padding: 2px 3px; }
/* the dice when the tray is folded away (narrow windows): today's roll card, bottom-left of the board, gone after a
   few seconds so it never hides a unit for good */
.trayMini { position: absolute; left: 10px; bottom: 10px; z-index: 4; max-width: 300px; background: rgba(20,22,25,.92); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; pointer-events: none; transition: opacity .6s; }
.trayMini.fade { opacity: 0; }
.trayMini[hidden] { display: none; }
#main:not(.trayFolded) .trayMini { display: none; }

/* ---------- the dice tray (left of the board; folds away when the window leaves no room) ---------- */
/* a fixed 240 px: long captions never widen the tray at the board's cost (min-width 0 beats a flex item's min-content) */
#tray { flex: 0 0 240px; width: 240px; max-width: 240px; min-width: 0; overflow: hidden; padding: 12px 0 12px 12px; display: flex; flex-direction: column; min-height: 0; }
.trayBox > * { min-width: 0; }
#main.trayFolded #tray, #app.noBattle #tray { display: none; }
.trayBox { flex: 1; min-height: 0; border-radius: 12px; padding: 10px; background: linear-gradient(160deg, #6a4527, #3a2313 60%, #2a190d); box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(181,138,46,.55), 0 14px 30px rgba(0,0,0,.6); color: #f4e3b2; display: flex; flex-direction: column; gap: 8px; }
.plate { background: linear-gradient(#20180f, #17110a); border: 1px solid rgba(181,138,46,.45); border-radius: 7px; padding: 6px 9px 7px; flex: 0 0 auto; }
.plate .pRow1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plate h4 { margin: 0; font: 700 16px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate .need { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #e9c46a; white-space: nowrap; }
.plate .cause { font-size: 11.5px; color: #c9bfa5; margin-top: 2px; line-height: 1.3; max-height: 48px; overflow: hidden; }
/* the felt keeps at least 110 px and asks for 170; the ladder's older attacks and the small history give way first
   (overflow hidden at their foot), so the tray never grows past its box and no die is lost (js/ui/tray-dice.js sizes
   the dice to the felt). D4: Aging Skirmish's felt, the rendered dice drawn on a canvas over it; a click skips. */
.felt { flex: 1 1 170px; min-height: 110px; border-radius: 9px; position: relative; overflow: hidden; cursor: pointer;
  background: radial-gradient(ellipse at 45% 30%, #7a2a36, #4a1620 62%, #2c0c12);
  box-shadow: inset 0 6px 18px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.6); }
.felt::before { content: ''; position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.felt canvas, .felt .flat { position: absolute; inset: 0; width: 100%; height: 100%; }
.felt .d3 { position: absolute; width: 34px; height: 34px; border-radius: 7px; background: #e8e2d2; color: #1a1a1a; font: 700 18px/34px system-ui; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,.6); }
.felt.many .d3 { border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,.6); }
.felt .d3.hit { background: #bfeac6; } .felt .d3.miss { background: #f2c3bd; color: #6b1d14; }
.felt .d3.tumble { background: #fff7d6; }
.felt .d3.rr { outline: 2px solid var(--gold); }
.felt .d3.more { background: rgba(0,0,0,.35); color: #f4e3b2; box-shadow: none; }   /* "+n": the dice there was no room for */
/* the tally under the felt (D4, as Aging Skirmish's): hidden while the dice are in the air, keeping its height */
.trayBox > .tally { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: center; gap: 0 8px; min-height: 30px; white-space: nowrap; overflow: hidden; transition: opacity .2s, transform .2s; }
.trayBox > .tally b { font: 700 26px/1 var(--display); color: #fbf1d4; text-shadow: 0 2px 10px rgba(233,196,106,.35); }
.trayBox > .tally small { font: 600 10.5px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #e9c46a; }
.trayBox > .tally.wait { opacity: 0; transform: scale(.85); }
.felt .empty { position: absolute; left: 0; right: 0; top: 40%; text-align: center; color: #c9bfa5; opacity: .7; font-size: 12px; }
.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.ladder li { display: flex; justify-content: space-between; gap: 6px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.28); font-size: 12px; color: #c9bfa5; }
.ladder li b { color: #f4e3b2; white-space: nowrap; }
.ladder li.on { background: linear-gradient(90deg, rgba(233,196,106,.28), rgba(233,196,106,.06)); box-shadow: inset 2px 0 0 #e9c46a; color: #f4e3b2; }
.ladder li.done { opacity: .85; }
.ladder .lHead { font-size: 11px; color: #c9bfa5; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trayHist { flex: 0 10 auto; min-height: 0; overflow: hidden; font-size: 11px; color: #c9bfa5; }
.trayHist .rollCard { border-left: 3px solid rgba(181,138,46,.5); padding: 2px 6px; margin: 3px 0; }
.trayHist .rollCard.s0 { border-color: var(--p0); } .trayHist .rollCard.s1 { border-color: var(--p1); }
.trayHist .die { width: 16px; height: 16px; font-size: 10px; }
.trayHist .rollKind { color: #c9bfa5; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rollCard { border-left: 3px solid var(--line); padding: 3px 8px; margin: 4px 0; }
.rollCard.s0 { border-color: var(--p0); } .rollCard.s1 { border-color: var(--p1); }
.rollKind { color: var(--muted); font-size: 11px; }
.dice { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 3px 0; }
.die { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; background: #ece8dc; color: #1a1a1a; font-weight: 700; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.die.hit { background: #bfeac6; } .die.miss { background: #f2c3bd; color: #6b1d14; }
.die.tumble { transform: rotate(12deg); background: #fff7d6; }
.die.rr { outline: 2px solid var(--gold); }
.total { font-weight: 700; margin-left: 4px; }
.rollCap { font-size: 11.5px; color: #c9c5ba; }

/* ---------- the right rail: prompt, docked missions, datasheet, off the battlefield ---------- */
.panel { padding: 10px; min-height: 0; }
#right .panel { border-bottom: 1px solid var(--line); }
#prompt { flex: 0 1 auto; overflow: auto; }          /* js/ui/rail.js keeps it whole while a datasheet folds; it scrolls only as a last resort */
#missionsDock { flex: 0 0 auto; font-size: 12px; padding: 6px 10px 8px; }
#missionsDock[hidden] { display: none; }
#missionsDock .mDockMini { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#missionsDock.mini .mSide { display: none; }      /* a short rail: the dock folded to one line (js/ui/rail.js) */
#missionsDock.mini .mDockMini { display: block; }
#card { flex: 1 1 auto; overflow: hidden; }
#offboard { flex: 0 0 auto; border-bottom: 0; padding: 6px 10px; }
#offboard[hidden] { display: none; }

/* toasts and the modal */
#toasts { position: fixed; left: 50%; bottom: 84px;   /* above the move strip's row and the log bar */ transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 50; pointer-events: none; }
.toast { background: #23272c; border: 1px solid var(--line); padding: 7px 14px; border-radius: 8px; max-width: 720px; box-shadow: 0 4px 16px rgba(0,0,0,.5); transition: opacity .5s; }
.toast.bad { border-color: #a5463c; color: #ffd2cc; } .toast.good { border-color: #3f7d4a; color: #d4ffdc; }
.toast.fade { opacity: 0; }
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 40; }
#modal[hidden] { display: none; }
.modalBox { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; min-width: 360px; max-width: 560px; max-height: 88vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.modalBox.wide { max-width: 860px; width: 860px; }
.modalBox h2 { margin: 0 0 10px; font: 700 19px/1.2 var(--display); }
.modalButtons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.modalBody .big { font-size: 20px; font-weight: 700; }
#builderHost { position: fixed; inset: 0; z-index: 45; background: var(--bg); overflow: auto; }
#builderHost[hidden] { display: none; }
.help li { margin: 6px 0; }
.menu button { margin: 5px 0; }
.settings .check, .settings .field { display: block; margin: 8px 0; }

/* setup */
.setupCols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.setupSide { min-width: 0; }
.setupSide select { width: 100%; max-width: 100%; min-width: 0; }
.setupSide .muted { overflow-wrap: anywhere; }
.setupSide { border-radius: 8px; padding: 10px 12px; }
.setupSide.s0 { background: var(--p0bg); } .setupSide.s1 { background: var(--p1bg); }
.setupSide h3 { margin: 0 0 8px; font-size: 14px; }
.field { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: center; margin: 6px 0; }
.setupRow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.setupRow .field { grid-template-columns: auto 1fr; }

/* decision panel */
.pHead { margin-bottom: 8px; }
.pSide { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.pSide.s0 { background: var(--p0); color: #061223; } .pSide.s1 { background: var(--p1); color: #250905; }
.pTitle { margin: 4px 0 2px; font: 700 16px/1.25 var(--display); }
.pHelp { margin: 0; color: var(--muted); }
.pRow { display: flex; gap: 6px; align-items: center; margin: 8px 0; }
.pRow.wrap { flex-wrap: wrap; }
.pErr { color: var(--bad); min-height: 0; margin: 4px 0; }
.pStatus { padding: 6px 8px; border-radius: 6px; margin: 6px 0; }
.pStatus.good { background: rgba(127,216,143,.12); color: var(--good); } .pStatus.bad { background: rgba(255,123,110,.12); color: var(--bad); }
.pInfo { color: var(--muted); }
.pFacts { background: var(--panel2); border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; }
.rollLine { font-family: var(--mono); color: #c8b8ff; }
.keys { color: var(--muted); font-size: 11.5px; margin: 6px 0 0; }
.unitList { display: flex; flex-direction: column; gap: 3px; }
.unitBtn { text-align: left; padding: 3px 9px; }
.unitBtn .tags { display: inline; color: var(--muted); font-size: 11px; margin-left: 6px; }   /* on the name's line: a long unit list stays short */
button .sub { display: block; color: var(--muted); font-size: 11.5px; }
.whyNot { margin-top: 10px; color: var(--muted); }
.whyNot summary { cursor: pointer; }
.whyRow { padding: 2px 0 2px 8px; font-size: 12px; }
.waiting { color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.checks .check { display: block; padding: 3px 0; cursor: pointer; }
.diceChoice { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.diceChoice .die { width: 34px; height: 34px; font-weight: 700; font-size: 16px; padding: 0; }
.diceChoice .die.on { background: #6a5a1c; border-color: var(--gold); }
.count { color: var(--muted); }
.rank { margin: 6px 0; padding-left: 22px; }
.rankItem { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
.rankLabel { flex: 1; } .rankSub { color: var(--muted); font-size: 11px; }
.split .splitRow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; }
.split input[type=number] { width: 64px; }
.weapons .wRow, .targets .tRow { padding: 4px 0; border-bottom: 1px solid var(--line); }
.wName { font-weight: 600; }
.wProf { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.wMode, .tSel { margin: 3px 0; max-width: 100%; }
.excluded { margin-top: 6px; font-size: 12px; }
/* the unit picks (owner, 9 Nov 2026): the selected unit's block — its name in the accent, then its choices as buttons
   in a grid with a chip (6", +D6", 3 enemy units within 12") and a key; refused choices greyed with why */
.selBlock { margin: 8px 0 4px; padding: 7px 10px 9px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; }
.selBlock[hidden] { display: none; }
.selName { font: 700 15px/1.25 var(--display); color: var(--gold); }
.selName.muted { color: var(--muted); }
.selName .cardSub { font: 12px/1.3 system-ui, sans-serif; color: var(--muted); font-weight: 400; margin-left: 6px; }
.selBlock .badges { margin: 3px 0 0; }
.selBlock .dragNote, .selBlock .pInfo { margin: 0 0 6px; font-size: 12px; }
.acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-top: 7px; }
.acts .actBtn { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; text-align: left; padding: 5px 9px; min-width: 0; }
.acts .actBtn .chip { margin-left: auto; flex: 0 0 auto; font-size: 11px; color: var(--muted); background: rgba(0,0,0,.28); border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
.acts .actBtn kbd.key { flex: 0 0 auto; margin-left: 0; }
.acts .actBtn.wide2 { grid-column: 1 / -1; }     /* a button whose label, chip and key do not fit one cell takes the row (UI.fitActs) */
.leaveRow { margin-top: 7px; font-size: 12px; color: var(--muted); }
.leaveRow .leaveLink { font-size: 12px; }
.leaveRow.only .leaveLink.isDefault { outline: none; text-decoration-color: var(--gold); color: var(--gold); }
.acts .actBtn.primary .chip { color: #d8ead9; }
.actOff { color: var(--muted); font-size: 12px; margin-top: 5px; }
.actOff b { font-weight: 600; opacity: .85; }
/* the units that can still act this phase (Aging Skirmish idea): buttons that select them on the board (white ring) */
.canAct { color: var(--muted); font-size: 12px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.canAct button { padding: 1px 7px; font-size: 11.5px; }

/* ---------- the battle log as a bar (folded to its latest line; raised to read back) ---------- */
.logRow { display: flex; gap: 8px; align-items: center; padding: 0 10px; height: calc(var(--logH) - 1px); flex: 0 0 auto; }   /* the bar's border-top takes the other pixel */
.logRow #logToggle { flex: 0 0 auto; padding: 2px 8px; font-size: 11.5px; }
.logRow .logLast { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
.logRow .logLast b { color: var(--ink); font-weight: 600; }
.logRow .logLast .who.s0 { color: var(--p0); } .logRow .logLast .who.s1 { color: var(--p1); }
.logRow .logLast .ph { color: var(--accent); }
.logRow input[type=search] { flex: 0 0 220px; min-width: 0; padding: 2px 6px; }
.logRow label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.logOut { overflow: auto; padding: 2px 10px 14px; flex: 1 1 auto; min-height: 0; display: none; }
#app.logUp .logOut { display: block; }
/* unit names in the log are links: a click rings the unit on the board and shows its datasheet */
.lu { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }
.lu:hover { color: var(--gold); }
details.lg { margin: 2px 0; }
details.lg > summary { cursor: pointer; padding: 1px 4px; border-radius: 4px; }
details.lg.round > summary { font-weight: 700; }
details.lg.turn { margin-left: 6px; } details.lg.turn.s0 > summary { color: var(--p0); } details.lg.turn.s1 > summary { color: var(--p1); }
details.lg.phase { margin-left: 8px; } details.lg.phase > summary { color: var(--accent); }
.lgBody { padding-left: 6px; }
.le { padding: 1px 0 1px 6px; font-size: 12px; white-space: pre-wrap; border-left: 2px solid transparent; }
.le.s0 { border-color: rgba(79,143,232,.6); } .le.s1 { border-color: rgba(224,96,74,.6); }
.le.t-roll { font-family: var(--mono); font-size: 11.5px; color: #c8b8ff; }
.le.t-batch { color: var(--good); font-weight: 600; }
.le.t-destroyed, .le.t-mortal, .le.t-hazard { color: var(--bad); }
.le.t-reaction, .le.t-cp, .le.t-vp { color: var(--accent); }
.le.t-charge, .le.t-fight { font-weight: 600; }
/* D5: one attack is one block, in the attacker's colour; its lines indented under its heading; rule numbers greyed */
.atk { margin: 2px 0; padding: 1px 0 2px; border-left: 3px solid transparent; border-radius: 2px; }
.atk.s0 { border-color: var(--p0); background: rgba(79,143,232,.06); } .atk.s1 { border-color: var(--p1); background: rgba(224,96,74,.06); }
.atk > .le { border-left: none; padding-left: 16px; }
.atk > .le.head { padding-left: 6px; font-weight: 600; }
.atk.s0 > .le.head { color: #9fc2ff; } .atk.s1 > .le.head { color: #ffab9b; }
.le .rn, .logLast .rn, .result .rn { color: var(--muted); opacity: .7; }

/* ---------- the datasheet, folded (stat tiles, one weapons table, ability chips, keywords on one line) ---------- */
.cardHead { border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; }
.cardHead.s0 { background: var(--p0bg); } .cardHead.s1 { background: var(--p1bg); }
.cardName { font: 700 15px/1.25 var(--display); }
.cardName.sel { color: var(--gold); }        /* gold for the current thing: the selected unit */
.cardName .cardSub { font: 12px/1.3 system-ui, sans-serif; color: var(--muted); font-weight: 400; margin-left: 6px; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.badge { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--panel2); border: 1px solid var(--line); cursor: help; }
.badge.b-shocked { background: #5a4710; border-color: var(--gold); } .badge.b-engaged { background: #5b2e10; }
.badge.abilChip { color: var(--accent); cursor: pointer; }
.badge.abilChip.on { border-color: var(--accent); background: #2e2a1c; }
.abilText { font-size: 12px; color: #cfcac0; padding: 4px 8px; margin: 4px 0; background: var(--panel2); border-radius: 6px; white-space: pre-wrap; }
.abilText b { color: var(--accent); }
/* an ability opened from the rail: its whole text in a floating panel beside the rail (never folded away or cut off) */
.abilPop { width: 380px; padding: 8px 12px 10px; border-color: var(--accent); }
.abilPop .apHead { font: 700 14px/1.3 var(--display); color: var(--accent); margin-bottom: 4px; }
.abilPop .apHead .apUnit { color: var(--muted); font: 12px/1.3 system-ui, sans-serif; margin-left: 6px; }
.abilPop .apText { font-size: 12.5px; color: #d8d3c8; white-space: pre-wrap; }
.abilPop .apKind { color: var(--muted); font-size: 11px; margin-top: 6px; }
.tiles { display: flex; gap: 4px; margin: 6px 0 2px; }
.tile { flex: 1; text-align: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 0 2px; min-width: 0; }
.tile b { display: block; font-size: 14px; } .tile span { display: block; font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.profLine { color: var(--muted); font-size: 11.5px; margin: 2px 0 4px; }
.woundList { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0; }
.wchip { font-size: 11px; background: var(--panel2); padding: 0 5px; border-radius: 3px; }
.wchip.hurt { background: #5a1f1a; }
table.card-t { border-collapse: collapse; width: 100%; margin: 4px 0; font-size: 11.5px; }
table.card-t th { color: var(--muted); font-weight: 600; text-align: center; border-bottom: 1px solid var(--line); padding: 1px 3px; }
table.card-t td { text-align: center; padding: 1px 3px; white-space: nowrap; } table.card-t td.l, table.card-t th.l { text-align: left; white-space: normal; }
table.card-t td.kw { text-align: left; color: var(--muted); font-size: 10.5px; white-space: normal; }
table.card-t.noKw td.kw, table.card-t.noKw th.kwh { display: none; }
.foldLine { font-size: 12px; color: var(--accent); cursor: pointer; padding: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foldLine:hover { color: var(--gold); }
.kw { color: var(--muted); font-size: 11px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cardSub { font-weight: 600; margin-bottom: 4px; }
/* a folded section opened: the whole datasheet in a floating panel beside the rail (Esc or a click outside closes it) */
.cardPop { position: fixed; z-index: 30; width: 420px; max-height: calc(100vh - 120px); overflow: auto; background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.cardPop[hidden] { display: none; }

/* hover card */
#hover { position: absolute; z-index: 5; background: rgba(20,22,25,.96); border: 1px solid #4a5058; border-radius: 8px; padding: 7px 10px; max-width: 330px; pointer-events: none; box-shadow: 0 6px 20px rgba(0,0,0,.5); font-size: 12px; }
.hvHead { font-weight: 700; margin-bottom: 3px; }
.hvLine.good { color: var(--good); } .hvLine.bad { color: var(--bad); } .hvLine.muted { color: var(--muted); }

/* ending your phases and Enter (UX proposals 1, 4) */
.formations { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; max-height: 40vh; overflow: auto; }
.fRow { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.fRow .fName { font-size: 13px; }
.fRow select { width: 100%; }
.endBar { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.endBar button.endPhase { width: 100%; }
.endBar .endWhy { color: var(--muted); font-size: 12px; }
#prompt button.isDefault { outline: 2px solid var(--gold); outline-offset: 1px; }
.endWarn .endUnits { margin: 6px 0 8px 18px; padding: 0; }
button.linkish { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* off the battlefield (M4b): one line naming the units and where they are; a click opens the list */
#offboard .obLine { font-size: 12px; line-height: 1.35; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#offboard .obLine b { font-weight: 600; } #offboard .obLine .obArrow { float: right; color: var(--muted); }
#offboard .obHead { margin: 2px 0 4px; font-size: 13px; }
#offboard .obRow { padding: 3px 4px; border-radius: 4px; font-size: 12px; }
#offboard .obRow .obWhy { color: var(--muted); }
#offboard .obRow.obPick { cursor: pointer; outline: 1px solid rgba(255,214,90,.6); }
#offboard .obRow.obPick:hover { background: rgba(255,214,90,.12); }

/* missions (M5b, js/ui/missions.js): the full panel (in the dropdown) and the folded dock in the rail */
#missions { font-size: 12px; }
#missions .mHead { margin: 0 0 4px; font-size: 13px; }
#missions .mSide, .mDock .mSide { padding: 4px 6px; margin: 4px 0; border-radius: 6px; }
#missions .mSide.s0, .mDock .mSide.s0 { background: var(--p0bg); } #missions .mSide.s1, .mDock .mSide.s1 { background: var(--p1bg); }
#missions .mVp, .mDock .mVp { color: var(--good); margin: 2px 0; }
#missions .mMode, .mDock .mMode { margin-top: 4px; color: var(--accent); }
#missions details summary { cursor: pointer; }
#missions .mCard { margin: 2px 0 2px 6px; }
#missions .mCard .vp { color: var(--good); }
.mLines { margin: 2px 0 4px 16px; padding: 0; } .mLines li { margin: 1px 0; }
.mModePick .check { display: block; margin: 4px 0; } .mFixedPick { margin-left: 18px !important; }
.mGuard { display: block; margin: 4px 0; } .mGuard select { max-width: 200px; }
.mDock .mDockHead { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 2px; }
.mDock .mDockHead .linkish { font-size: 11.5px; margin-left: 8px; }
.mDock .mSide { padding: 3px 6px; margin: 3px 0; }
.mDock .mVp { float: right; margin: 0; font-weight: 700; }
.mDock .mMode { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mDock .mLine { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.vpTable { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: 12px; }
table.vpTable caption { text-align: left; font-weight: 700; padding: 2px 0; }
table.vpTable.s0 caption { color: var(--p0); } table.vpTable.s1 caption { color: var(--p1); }
table.vpTable th, table.vpTable td { border-bottom: 1px solid var(--line); padding: 2px 6px; text-align: right; }
table.vpTable th:first-child, table.vpTable td:first-child { text-align: left; }
table.vpTable tr.tot td { font-weight: 700; border-top: 1px solid var(--muted); }

/* ---------- D3: Shoot / Split fire (js/ui/shoot-flow.js, js/ui/prompts-attack.js) ---------- */
.aimBlock .aimTargets { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; }
.aimBlock .aimT { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; }
.aimBlock .aimT .chip { font-size: 11px; color: var(--muted); background: rgba(0,0,0,.28); border-radius: 10px; padding: 1px 7px; }
.aimBlock .aimT.on { border-color: var(--gold); }
.aimBlock .aimRow { display: flex; gap: 6px; margin-top: 8px; }
.sfNum { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 9px; background: var(--gold); color: #1d2024; font: 700 11px/18px system-ui, sans-serif; }
/* the boxes: a dialog centred on the screen over the board (owner, 9 Nov 2026); it fits 1366 x 768 without scrolling */
.sfBack { position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.32); display: flex; align-items: center; justify-content: center; }
.sfBox { background: var(--panel); border: 1px solid var(--gold); border-radius: 10px; padding: 14px 18px 12px; min-width: 380px; max-width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 14px 44px rgba(0,0,0,.65); }
.sfTitle { margin: 0 0 8px; font: 700 17px/1.25 var(--display); }
.sfWarn { color: #ffb08a; margin: 0 0 8px; }
.sfFire, .sfHold { margin: 4px 0; } .sfHold { color: var(--muted); }
.sfInd { margin: 6px 0; font-size: 12px; }
.sfProfiles { margin: 4px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.sfProf { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: center; }
.sfButtons { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sfButtons button.on { border-color: var(--gold); }
.sfGridWrap { max-height: calc(100vh - 240px); overflow: auto; }
table.sfGrid { border-collapse: collapse; }
table.sfGrid th, table.sfGrid td { border-bottom: 1px solid var(--line); padding: 5px 8px; vertical-align: middle; }
table.sfGrid th { font-weight: 600; text-align: center; white-space: nowrap; }
table.sfGrid th.sfWh { text-align: left; }
table.sfGrid .sfD { color: var(--muted); font-weight: 400; font-size: 11.5px; }
table.sfGrid td.sfW { min-width: 210px; max-width: 300px; }
table.sfGrid td.sfCell { text-align: center; white-space: nowrap; }
table.sfGrid td.sfCell.on { background: rgba(227,196,108,.08); }
table.sfGrid td.sfOff { text-align: center; color: var(--muted); opacity: .6; cursor: help; }
table.sfGrid button.sfN { min-width: 30px; margin: 0 3px; font-weight: 700; }
table.sfGrid th.hold, table.sfGrid td.hold { color: var(--muted); }
.sfChanged ul { margin: 4px 0 0; padding-left: 18px; }