/* Combat Patrol: Proving Grounds. One stylesheet for the whole game.
   Look: a field commander's data-slate. Blackened steel, brass trim, parchment
   text, and the two armies' colours doing the talking. */

@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-var.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlowc-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlowc-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlowc-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlowc-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #090b0e; --bg2: #10141a; --panel: #151a21; --panel2: #1c232c; --panel3: #242d38;
  --line: #2b3440; --line2: #3c4857;
  --ink: #ece6d6; --ink2: #b3ad9c; --ink3: #7d7a70;
  --brass: #c9a24a; --brass2: #f2d382; --brass3: #8a6d2c;
  --blood: #d9432f; --good: #5cc970; --warn: #f0a93a; --shock: #b98cff; --cyan: #6fd3ff;
  --marines: #3d7be6; --marines2: #9cc0ff; --orks: #5fae2e; --orks2: #b6ea7a;
  --p0: var(--marines); --p1: var(--orks);
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cut: 10px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  --topbar: 64px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--body); overflow: hidden; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
#app { height: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0 0 0.7em; }
a { color: var(--brass2); }
::selection { background: var(--brass); color: #111; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #33404d; border: 2px solid transparent; background-clip: padding-box; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #4b5b6c; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
.ico { display: inline-flex; vertical-align: middle; }
.term { border-bottom: 1px dotted var(--brass); color: var(--brass2); cursor: help; }
.term:hover, .term:focus { color: #fff; outline: none; }
b, strong { font-weight: 600; color: #fff; }
.hide { display: none !important; }
.eyebrow { font: 600 12px/1 var(--cond); letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); }
.display { font-family: var(--display); letter-spacing: 0.02em; }
.muted { color: var(--ink2); }
.small { font-size: 13px; }

/* ---------- buttons -------------------------------------------------------- */
.btn {
  --c: var(--panel3); --b: var(--line2); --t: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 18px; border: 0; cursor: pointer; user-select: none;
  font: 600 15px/1 var(--cond); letter-spacing: 0.09em; text-transform: uppercase; color: var(--t);
  background: var(--b);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform 0.08s, filter 0.15s; isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--c);
  clip-path: polygon(calc(var(--cut) - 0.5px) 0, 100% 0, 100% calc(100% - var(--cut) + 0.5px), calc(100% - var(--cut) + 0.5px) 100%, 0 100%, 0 calc(var(--cut) - 0.5px));
  transition: background 0.15s;
}
.btn:hover { filter: brightness(1.18); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--brass2); outline-offset: 2px; }
.btn[disabled] { opacity: 0.38; cursor: not-allowed; filter: none; }
.btn.primary { --c: linear-gradient(180deg, #e5c26c, #b98f35 60%, #9a7426); --b: #f6e2a6; --t: #1b1406; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); font-weight: 700; }
.btn.primary::before { background: linear-gradient(180deg, #e9c874, #bd9338 55%, #9a7426); }
.btn.danger { --b: #ff7a66; --t: #fff; }
.btn.danger::before { background: linear-gradient(180deg, #c8402f, #8f2418); }
.btn.go { --b: #9af0aa; --t: #062008; }
.btn.go::before { background: linear-gradient(180deg, #6fd883, #2f9a48); }
.btn.ghost { --b: var(--line2); }
.btn.ghost::before { background: rgba(20, 26, 33, 0.85); }
.btn.big { min-height: 54px; padding: 12px 30px; font-size: 19px; --cut: 14px; }
.btn.sm { min-height: 32px; padding: 5px 12px; font-size: 13px; --cut: 7px; }
.btn .cost { font-size: 12px; padding: 2px 6px; background: rgba(0, 0, 0, 0.35); border-radius: 3px; letter-spacing: 0.04em; }
.btn .key { font: 600 11px/1 var(--cond); padding: 3px 5px; border: 1px solid currentColor; border-radius: 3px; opacity: 0.6; }
.btn.pulse { animation: btnpulse 1.6s infinite; }
@keyframes btnpulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.28) drop-shadow(0 0 10px rgba(242, 211, 130, 0.55)); } }
.iconbtn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(21, 26, 33, 0.8); color: var(--ink2); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.iconbtn:hover { color: #fff; border-color: var(--brass); background: var(--panel2); }
.iconbtn.on { color: var(--brass2); border-color: var(--brass3); }

/* ---------- panels / cards ------------------------------------------------- */
.panel {
  position: relative; background: linear-gradient(180deg, rgba(28, 35, 44, 0.96), rgba(17, 21, 27, 0.97));
  border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.panel.trim::before, .panel.trim::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--brass); pointer-events: none; }
.panel.trim::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel.trim::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font: 600 12px/1.5 var(--cond); letter-spacing: 0.07em; text-transform: uppercase; border: 1px solid var(--line2); border-radius: 3px; color: var(--ink2); background: rgba(0, 0, 0, 0.25); white-space: nowrap; }
.chip.kw { cursor: help; color: var(--brass2); border-color: var(--brass3); }
.chip.kw:hover { background: rgba(201, 162, 74, 0.18); color: #fff; }
.chip.good { color: var(--good); border-color: #2c6a39; }
.chip.bad { color: #ff9a8c; border-color: #7a2a20; }
.chip.warn { color: var(--warn); border-color: #7a5417; }
.chip.shock { color: var(--shock); border-color: #5a3f8a; }
.tag0 { color: var(--p0); } .tag1 { color: var(--p1); }

/* ---------- tooltip ---------------------------------------------------------- */
.tip { position: fixed; z-index: 900; max-width: 340px; padding: 12px 14px; pointer-events: none; background: #0d1116; border: 1px solid var(--brass3); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7); font-size: 13.5px; line-height: 1.45; color: var(--ink); opacity: 0; transform: translateY(4px); transition: opacity 0.12s, transform 0.12s; }
.tip.show { opacity: 1; transform: none; }
.tip h5 { margin: 0 0 4px; font: 700 14px/1.2 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass2); }
.tip .ref { float: right; font: 500 11px var(--cond); color: var(--ink3); letter-spacing: 0.1em; }
.tip .exact { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink2); font-size: 12.5px; font-style: italic; }

/* ---------- main menu --------------------------------------------------------- */
.menu { position: relative; height: 100%; overflow: hidden; display: grid; grid-template-columns: minmax(380px, 560px) 1fr; }
.menu-bg { position: absolute; inset: 0; z-index: 0; }
.menu-bg canvas { width: 100%; height: 100%; display: block; }
.menu-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 11, 14, 0.97) 0%, rgba(9, 11, 14, 0.88) 30%, rgba(9, 11, 14, 0.25) 62%, rgba(9, 11, 14, 0.55) 100%), linear-gradient(0deg, rgba(9, 11, 14, 0.9), transparent 35%); }
.menu-main { position: relative; z-index: 1; padding: clamp(24px, 5vh, 64px) clamp(24px, 4vw, 64px); display: flex; flex-direction: column; gap: 22px; overflow-y: auto; }
.menu h1 { font: 900 clamp(40px, 5.4vw, 76px)/0.92 var(--display); letter-spacing: 0.01em; color: #f6efdc; text-shadow: 0 2px 0 #000, 0 0 40px rgba(201, 162, 74, 0.25); }
.menu h1 span { display: block; font-size: 0.44em; letter-spacing: 0.34em; color: var(--brass2); margin-bottom: 0.5em; font-weight: 700; }
.menu .tagline { font-size: 18px; color: var(--ink2); max-width: 30em; }
.menu-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.menu-item { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 16px; padding: 14px 18px; text-align: left; cursor: pointer; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(28, 35, 44, 0.92), rgba(17, 21, 27, 0.7)); color: var(--ink); transition: 0.16s; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.menu-item:hover, .menu-item:focus-visible { border-color: var(--brass); background: linear-gradient(90deg, rgba(60, 48, 20, 0.9), rgba(24, 28, 34, 0.8)); transform: translateX(6px); outline: none; }
.menu-item .mi-ico { width: 54px; height: 54px; display: grid; place-items: center; color: var(--brass2); border: 1px solid var(--brass3); background: radial-gradient(circle, rgba(201, 162, 74, 0.2), transparent 70%); }
.menu-item h3 { font: 700 22px/1.1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; }
.menu-item p { margin: 3px 0 0; color: var(--ink2); font-size: 14px; }
.menu-item .mi-go { color: var(--brass); opacity: 0; transform: translateX(-8px); transition: 0.16s; }
.menu-item:hover .mi-go { opacity: 1; transform: none; }
.menu-item.hero { border-color: var(--brass3); background: linear-gradient(90deg, rgba(92, 70, 22, 0.75), rgba(24, 28, 34, 0.75)); }
.menu-item .badge { font: 600 11px var(--cond); letter-spacing: 0.14em; color: #111; background: var(--brass2); padding: 2px 7px; margin-left: 8px; vertical-align: middle; }
.menu-foot { margin-top: auto; color: var(--ink3); font-size: 12.5px; max-width: 46em; }
.menu-side { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: flex-end; padding: 40px; pointer-events: none; }
.tipcard { pointer-events: auto; max-width: 400px; padding: 16px 18px; background: rgba(13, 17, 22, 0.86); border-left: 3px solid var(--brass); backdrop-filter: blur(6px); }
.tipcard .eyebrow { margin-bottom: 6px; }

/* ---------- generic screen (setup, codex) ------------------------------------------ */
.screen { height: 100%; display: flex; flex-direction: column; background: radial-gradient(1200px 700px at 70% -10%, #1a222c 0%, var(--bg) 60%); }
.screen-head { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: rgba(13, 17, 22, 0.8); }
.screen-head h2 { font: 700 26px/1 var(--display); letter-spacing: 0.04em; }
.screen-head .spacer { flex: 1; }
.screen-body { flex: 1; overflow: auto; padding: 26px clamp(16px, 4vw, 56px) 60px; }
.steps { display: flex; gap: 4px; }
.steps span { font: 600 12px var(--cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); padding: 6px 12px; border-bottom: 2px solid var(--line); }
.steps span.on { color: var(--brass2); border-color: var(--brass); }
.steps span.done { color: var(--ink2); border-color: var(--brass3); }

/* setup: army pick */
.armies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; }
.army-card { --ac: var(--marines); position: relative; padding: 0; cursor: pointer; text-align: left; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(28, 35, 44, 0.9), rgba(13, 17, 22, 0.95)); transition: 0.18s; overflow: hidden; color: var(--ink); }
.army-card.orks { --ac: var(--orks); }
.army-card:hover, .army-card.sel { border-color: var(--ac); transform: translateY(-3px); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--ac), 0 0 40px color-mix(in srgb, var(--ac) 28%, transparent); }
.army-card .art { height: 190px; background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--ac) 45%, transparent), transparent 70%), #0c1015; position: relative; border-bottom: 1px solid var(--line); }
.army-card .art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.army-card .body { padding: 18px 20px 20px; }
.army-card h3 { font: 800 30px/1 var(--display); color: #fff; }
.army-card .sub { font: 600 13px var(--cond); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ac); margin: 6px 0 10px; }
.army-card ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 14px; color: var(--ink2); }
.army-card li b { color: var(--ink); }
.army-card .pick { position: absolute; top: 12px; right: 12px; font: 700 12px var(--cond); letter-spacing: 0.16em; padding: 4px 10px; background: var(--ac); color: #06100a; opacity: 0; transition: 0.15s; }
.army-card.sel .pick { opacity: 1; }
.opts { max-width: 1180px; margin: 22px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.opt { padding: 16px 18px; }
.opt h4 { font: 700 14px var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass2); margin-bottom: 10px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1 1 auto; padding: 9px 12px; border: 1px solid var(--line2); background: rgba(0, 0, 0, 0.25); color: var(--ink2); cursor: pointer; font: 600 14px var(--cond); letter-spacing: 0.06em; text-transform: uppercase; transition: 0.12s; }
.seg button:hover { color: #fff; border-color: var(--brass3); }
.seg button.on { background: linear-gradient(180deg, rgba(201, 162, 74, 0.32), rgba(201, 162, 74, 0.12)); color: #fff; border-color: var(--brass); }
.opt .hint { font-size: 13px; color: var(--ink2); margin-top: 9px; min-height: 2.9em; }
.screen-foot { flex: none; padding: 12px clamp(16px, 4vw, 56px) 14px; border-top: 1px solid var(--line); background: rgba(9, 11, 14, 0.92); box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.45); }
.setup-go { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; }

/* ---------- battle screen -------------------------------------------------------------- */
.battle { position: relative; height: 100%; display: flex; flex-direction: column; background: #07090b; }
.topbar { position: relative; z-index: 30; height: var(--topbar); flex: none; display: grid; grid-template-columns: auto minmax(180px, 1fr) minmax(300px, auto) minmax(180px, 1fr) auto; align-items: stretch; gap: 0; background: linear-gradient(180deg, #171d25, #0e1217); border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(201, 162, 74, 0.35), 0 8px 30px rgba(0, 0, 0, 0.5); }
.topbar .tb-left, .topbar .tb-right { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.score { --pc: var(--p0); position: relative; display: flex; align-items: center; gap: 14px; padding: 0 18px; overflow: hidden; }
.score::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 34%, transparent), transparent 75%); opacity: 0.55; transition: opacity 0.4s; }
.score.p1 { --pc: var(--p1); flex-direction: row-reverse; text-align: right; }
.score.p1::before { transform: scaleX(-1); }
.score.active::before { opacity: 1; }
.score.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pc); box-shadow: 0 0 16px var(--pc); }
.score > * { position: relative; }
.score .who { min-width: 0; }
.score .who .nm { font: 700 17px/1.05 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score .who .sub { font: 500 11.5px/1.2 var(--cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
.score .vp { display: flex; align-items: baseline; gap: 4px; font: 800 38px/1 var(--display); color: #fff; text-shadow: 0 0 22px color-mix(in srgb, var(--pc) 70%, transparent); }
.score .vp small { font: 600 12px var(--cond); letter-spacing: 0.16em; color: var(--ink2); }
.score .vp.bump { animation: bump 0.6s; }
@keyframes bump { 30% { transform: scale(1.45); color: var(--brass2); } }
.score .cp { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.score.p1 .cp { align-items: flex-end; }
.score .cp .pips { display: flex; gap: 3px; }
.score .cp i { width: 9px; height: 13px; background: var(--brass2); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: 0 0 6px var(--brass); }
.score .cp i.new { animation: cpnew 0.7s; }
@keyframes cpnew { from { transform: scale(2.4); opacity: 0; } }
.score .cp small { font: 600 11px var(--cond); letter-spacing: 0.16em; color: var(--ink2); }
.track { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 16px; border-left: 1px solid #000; border-right: 1px solid #000; background: rgba(0, 0, 0, 0.25); }
.track .round { font: 600 12px/1 var(--cond); letter-spacing: 0.26em; color: var(--ink2); text-transform: uppercase; }
.track .round b { color: var(--brass2); font-size: 15px; }
.phases { display: flex; gap: 3px; }
.phases .ph { display: flex; align-items: center; gap: 5px; padding: 5px 9px; font: 600 12px/1 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); background: rgba(255, 255, 255, 0.03); border-bottom: 2px solid transparent; transition: 0.25s; white-space: nowrap; }
.phases .ph.done { color: var(--ink2); border-color: var(--brass3); }
.phases .ph.on { color: #111; background: linear-gradient(180deg, var(--brass2), var(--brass)); border-color: #fff; box-shadow: 0 0 18px rgba(201, 162, 74, 0.55); }
.phases .ph .ico svg { width: 14px; height: 14px; }

.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.board-host { position: absolute; inset: 0; }
.board-canvas { display: block; outline: none; cursor: crosshair; touch-action: none; }
.board-canvas.panning { cursor: grabbing; }

.rail { position: absolute; top: 10px; bottom: calc(var(--console-h, 112px) + 20px); z-index: 12; display: flex; flex-direction: column; gap: 8px; pointer-events: none; transition: transform 0.25s; }
.rail > * { pointer-events: auto; }
.rail.right { bottom: max(calc(var(--console-h, 112px) + 20px), 152px); } /* also clear of the zoom buttons */
.rail.left { left: 10px; width: 246px; }
.rail.right { right: 10px; width: 330px; }
.rail-tabs { display: flex; gap: 2px; }
.rail-tabs button { flex: 1; padding: 7px 6px; border: 1px solid var(--line); border-bottom: 0; background: rgba(13, 17, 22, 0.9); color: var(--ink3); cursor: pointer; font: 600 12px var(--cond); letter-spacing: 0.14em; text-transform: uppercase; }
.rail-tabs button.on { color: var(--brass2); background: var(--panel2); border-color: var(--brass3); }
.rail-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; background: rgba(15, 19, 25, 0.93); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.rail.collapsed.left { transform: translateX(-262px); }
.rail.collapsed.right { transform: translateX(346px); }
.rail-toggle { position: absolute; top: 4px; width: 22px; height: 46px; display: grid; place-items: center; background: rgba(15, 19, 25, 0.93); border: 1px solid var(--line); color: var(--ink2); cursor: pointer; pointer-events: auto; }
.rail.left .rail-toggle { right: -24px; } .rail.right .rail-toggle { left: -24px; }

/* roster */
.roster { display: flex; flex-direction: column; }
.ru { --pc: var(--p0); display: grid; grid-template-columns: 40px 1fr; gap: 9px; align-items: center; padding: 7px 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; position: relative; transition: background 0.12s; }
.ru.p1 { --pc: var(--p1); }
.ru:hover { background: rgba(255, 255, 255, 0.05); }
.ru.sel { background: linear-gradient(90deg, rgba(201, 162, 74, 0.24), transparent); box-shadow: inset 3px 0 0 var(--brass2); }
.ru.can::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--brass2); box-shadow: 0 0 10px var(--brass2); animation: blip 1.4s infinite; }
@keyframes blip { 50% { opacity: 0.25; } }
.ru.dead { opacity: 0.35; filter: grayscale(1); }
.ru.off { opacity: 0.6; }
.ru canvas { width: 40px; height: 40px; }
.ru .nm { font: 600 14px/1.15 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-right: 14px; }
.ru .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; margin-top: 3px; font: 500 12px var(--cond); color: var(--ink2); letter-spacing: 0.04em; }
.pips { display: inline-flex; flex: none; gap: 2px; flex-wrap: wrap; max-width: 120px; }
.pips i { width: 7px; height: 7px; background: var(--pc); border-radius: 1px; }
.pips i.x { background: #2a2f36; }
.pips i.h { background: linear-gradient(90deg, var(--pc) 50%, #7a2a20 50%); }
.ru .st { margin-left: auto; display: flex; gap: 3px; padding-right: 16px; }
.ru .st span { font: 700 9.5px var(--cond); letter-spacing: 0.06em; padding: 1px 4px; border-radius: 2px; background: #2a3038; color: var(--ink2); }
.ru .st span.on { background: var(--brass3); color: #fff; }
.ru .st span.shk { background: #4a2f7a; color: #e3d1ff; }
.ru .st span.eng { background: #7a2a20; color: #ffd0c8; }

/* unit card */
.ucard { padding: 0; }
.ucard-head { --pc: var(--p0); display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; padding: 12px 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 30%, transparent), transparent 80%); border-bottom: 1px solid var(--line); }
.ucard-head.p1 { --pc: var(--p1); }
.ucard-head canvas { width: 58px; height: 58px; }
.ucard-head h3 { font: 700 20px/1.05 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.ucard-head .role { font: 500 12px var(--cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); margin-top: 3px; }
.statline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.statline div { background: var(--panel); padding: 6px 2px 7px; text-align: center; cursor: help; }
.statline small { display: block; font: 600 10.5px var(--cond); letter-spacing: 0.14em; color: var(--brass); }
.statline b { font: 700 19px/1.1 var(--cond); color: #fff; }
.statline b.mod { color: var(--good); }
.statline b.low { color: #ff9a8c; }
.statrow-name { padding: 5px 12px 3px; font: 600 11.5px var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); background: rgba(0, 0, 0, 0.2); display: flex; justify-content: space-between; }
.usec { padding: 9px 12px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.usec h4 { font: 700 11.5px var(--cond); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin-bottom: 6px; }
.wtable { width: 100%; border-collapse: collapse; font: 500 13px var(--cond); }
.wtable th { font: 600 10.5px var(--cond); letter-spacing: 0.1em; color: var(--ink3); text-align: center; padding: 0 3px 3px; }
.wtable th:first-child, .wtable td:first-child { text-align: left; }
.wtable td { text-align: center; padding: 3px 3px; color: var(--ink); border-top: 1px solid rgba(255, 255, 255, 0.05); white-space: nowrap; }
.wtable td:first-child { white-space: normal; font-weight: 600; letter-spacing: 0.02em; }
.wtable tr.wab td { border-top: 0; padding-top: 0; text-align: left; white-space: normal; }
.wtable .chip { font-size: 10.5px; padding: 0 5px; margin: 0 3px 2px 0; }
.wtable .n { color: var(--ink3); font-weight: 500; }
.abil { margin-bottom: 7px; font-size: 13.5px; color: var(--ink2); }
.abil b { display: inline-block; font: 700 13.5px var(--cond); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-right: 4px; }
.abil .tagx { font: 600 10px var(--cond); letter-spacing: 0.08em; color: var(--warn); border: 1px solid #7a5417; padding: 0 4px; margin-right: 4px; border-radius: 2px; text-transform: uppercase; }
.kwline { font: 500 11.5px var(--cond); letter-spacing: 0.09em; color: var(--ink3); text-transform: uppercase; }
.ucard .empty { padding: 26px 18px; color: var(--ink3); text-align: center; font-size: 14px; }
.models-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.models-grid .mm { width: 30px; height: 36px; position: relative; }
.models-grid canvas { width: 30px; height: 30px; display: block; }
.models-grid .mm.dead canvas { filter: grayscale(1) brightness(0.4); }
.models-grid .mm .hp { position: absolute; left: 2px; right: 2px; bottom: 0; height: 4px; background: #401813; border-radius: 2px; overflow: hidden; }
.models-grid .mm .hp i { display: block; height: 100%; background: var(--good); }

/* mission tab */
.mission { padding: 12px 14px; }
.mission h4 { font: 700 17px/1.1 var(--display); color: #fff; margin-bottom: 2px; }
.mission .mwho { font: 600 11.5px var(--cond); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
.mrow { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 13.5px; color: var(--ink2); }
.mrow .tick { width: 20px; height: 20px; border: 1px solid var(--line2); display: grid; place-items: center; color: transparent; border-radius: 3px; }
.mrow.met .tick { background: var(--good); border-color: var(--good); color: #062008; }
.mrow.met { color: var(--ink); }
.mrow .pts { font: 700 16px var(--cond); color: var(--brass2); white-space: nowrap; }
.mrow small { display: block; color: var(--ink3); font-size: 12px; margin-top: 2px; }
.objtable { width: 100%; table-layout: fixed; margin-top: 10px; border-collapse: collapse; font: 500 13px var(--cond); }
.objtable td { padding: 5px 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); overflow-wrap: anywhere; vertical-align: top; }
.objtable td:nth-child(1) { width: 42%; } .objtable td:nth-child(2) { width: 30%; } .objtable td:nth-child(3) { width: 28%; text-align: right; }
.objtable .bar { display: flex; height: 8px; margin-top: 4px; background: #0b0e12; border: 1px solid var(--line); min-width: 0; }
.objtable .bar i { display: block; height: 100%; }
.scorelog { margin-top: 10px; font-size: 12.5px; color: var(--ink2); }
.scorelog div { display: flex; justify-content: space-between; padding: 2px 0; }

/* console (coach + actions) */
.console { position: absolute; left: 50%; bottom: 10px; z-index: 20; transform: translateX(-50%); width: min(900px, calc(100% - 20px)); display: grid; grid-template-columns: 74px 1fr; gap: 0; align-items: stretch; background: linear-gradient(180deg, rgba(26, 33, 42, 0.97), rgba(13, 17, 22, 0.98)); border: 1px solid var(--line2); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px #000; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.console .who { position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(201, 162, 74, 0.28), transparent 70%), #0d1116; border-right: 1px solid var(--line); }
.console .who canvas { width: 62px; height: 62px; }
.console .who .nm { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font: 700 9.5px var(--cond); letter-spacing: 0.18em; color: var(--brass); }
.console .say { padding: 11px 16px 12px; min-width: 0; }
.console .head { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.console .head .ttl { font: 700 13px/1 var(--cond); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass2); }
.console .head .stepinfo { font: 500 12px var(--cond); letter-spacing: 0.1em; color: var(--ink3); text-transform: uppercase; }
.console .head .x { margin-left: auto; display: flex; gap: 6px; }
.console .msg { font-size: 15.5px; line-height: 1.4; color: var(--ink); min-height: 2.8em; }
.console .msg .why { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink2); }
.console .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; align-items: center; }
.console .acts .spacer { flex: 1; }
.console .err { margin-top: 6px; color: #ffb3a6; font-size: 13.5px; display: flex; gap: 6px; align-items: flex-start; }
.console.ai .msg { color: var(--ink2); }
.console.quiet { visibility: hidden; }
.console.duo { box-shadow: inset 0 3px 0 var(--pc), 0 18px 50px rgba(0, 0, 0, 0.6); }
.console.duo .who .nm { color: #fff; }
.score.asking .who .sub { color: #fff; }
.score.asking .who .sub::after { content: " · deciding"; color: var(--brass2); }
.card-who { padding: 7px 22px; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 55%, transparent), transparent 85%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); font: 700 12.5px var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.console.flash { animation: consoleflash 0.5s; }
@keyframes consoleflash { 0% { box-shadow: 0 0 0 2px var(--brass2), 0 20px 60px rgba(0, 0, 0, 0.75); } }
.thinking { display: inline-flex; gap: 4px; margin-left: 6px; }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--brass2); animation: think 1s infinite; }
.thinking i:nth-child(2) { animation-delay: 0.15s; } .thinking i:nth-child(3) { animation-delay: 0.3s; }
@keyframes think { 0%, 100% { opacity: 0.2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* view tools */
.viewtools { position: absolute; right: 12px; bottom: 12px; z-index: 13; display: flex; flex-direction: column; gap: 5px; }
.speedtools { position: absolute; left: 12px; bottom: 12px; z-index: 13; display: flex; gap: 5px; align-items: center; }
.speedtools .lbl { font: 600 11px var(--cond); letter-spacing: 0.14em; color: var(--ink3); text-transform: uppercase; }

/* banners */
.banner-layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.banner { position: absolute; left: 0; right: 0; top: 30%; padding: 22px 0 24px; text-align: center; background: linear-gradient(90deg, transparent, rgba(6, 8, 10, 0.92) 18%, rgba(6, 8, 10, 0.92) 82%, transparent); border-top: 1px solid var(--bc, var(--brass)); border-bottom: 1px solid var(--bc, var(--brass)); animation: banner 1.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.banner .b1 { font: 600 14px/1 var(--cond); letter-spacing: 0.5em; text-transform: uppercase; color: var(--bc, var(--brass2)); margin-bottom: 10px; }
.banner .b2 { font: 900 clamp(34px, 6vw, 68px)/1 var(--display); color: #fff; letter-spacing: 0.06em; text-shadow: 0 0 40px var(--bc, rgba(201, 162, 74, 0.6)); }
.banner .b3 { font: 500 16px var(--cond); letter-spacing: 0.12em; color: var(--ink2); margin-top: 10px; text-transform: uppercase; }
.banner.quick { animation-duration: 1.15s; top: 34%; padding: 14px 0 16px; }
.banner.quick .b2 { font-size: clamp(26px, 4vw, 44px); }
@keyframes banner { 0% { opacity: 0; transform: scaleY(0.2); } 12% { opacity: 1; transform: none; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scaleY(0.6) translateY(-14px); } }
.banner.waaagh { --bc: #9dff4d; background: linear-gradient(90deg, transparent, rgba(16, 40, 4, 0.94) 15%, rgba(16, 40, 4, 0.94) 85%, transparent); animation: banner 2.4s forwards, wshake 0.09s 14; }
.banner.waaagh .b2 { font-size: clamp(60px, 12vw, 150px); color: #c8ff7a; text-shadow: 0 0 60px #6dff1f, 0 6px 0 #1a3a05; letter-spacing: 0.02em; }
@keyframes wshake { 0% { margin-left: -8px; } 50% { margin-left: 8px; } 100% { margin-left: -8px; } }

/* toasts */
.toasts { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 35; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { padding: 8px 16px; background: rgba(8, 10, 13, 0.93); border: 1px solid var(--line2); border-left: 3px solid var(--brass); font: 500 15px var(--cond); letter-spacing: 0.04em; color: var(--ink); animation: toast 3.4s forwards; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); max-width: 86vw; }
.toast.good { border-left-color: var(--good); } .toast.bad { border-left-color: var(--blood); } .toast.vp { border-left-color: var(--brass2); color: var(--brass2); font-weight: 700; font-size: 17px; }
.toast.p0 { border-left-color: var(--p0); } .toast.p1 { border-left-color: var(--p1); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-10px); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

/* ---------- dice tray ------------------------------------------------------------- */
.dice-layer { position: absolute; left: 50%; bottom: 146px; z-index: 22; transform: translateX(-50%); width: min(760px, calc(100% - 20px)); pointer-events: none; }
/* an attack's tray is wider, as far as the side panels leave room */
.dice-layer:has(.tray.duel) { width: min(840px, max(760px, calc(100% - 612px)), calc(100% - 20px)); }
.tray.duel .tray-rows { max-height: 50vh; }
.tray { pointer-events: auto; background: linear-gradient(180deg, rgba(24, 16, 12, 0.97), rgba(12, 9, 8, 0.98)); border: 1px solid #5a4424; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(0, 0, 0, 0.6); animation: trayin 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes trayin { from { opacity: 0; transform: translateY(20px) scale(0.97); } }
.tray-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid rgba(201, 162, 74, 0.25); background: rgba(0, 0, 0, 0.3); }
.tray-head .vs { font: 700 16px/1.1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-head .vs i { font-style: normal; color: var(--brass); margin: 0 7px; }
.tray-rows { padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 5px; max-height: 44vh; overflow-y: auto; }
.trow { display: grid; grid-template-columns: 82px 1fr auto; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); animation: rowin 0.25s; }
.trow:first-child { border-top: 0; }
@keyframes rowin { from { opacity: 0; transform: translateX(-12px); } }
.trow .lab { font: 700 13px/1.1 var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass2); }
.trow .lab small { display: block; margin-top: 3px; font: 500 11.5px var(--cond); letter-spacing: 0.05em; color: var(--ink2); text-transform: none; }
.trow .dice { display: flex; flex-wrap: wrap; gap: 5px; min-height: 34px; align-items: center; }
.trow .res { text-align: right; font: 700 26px/1 var(--cond); color: #fff; min-width: 76px; }
.trow .res small { display: block; font: 600 11px var(--cond); letter-spacing: 0.14em; color: var(--ink2); text-transform: uppercase; margin-top: 2px; }
.trow .res.zero { color: var(--ink3); }
.trow .why { grid-column: 2 / 4; font-size: 13px; color: var(--ink2); margin-top: -2px; }
.trow .why b { color: var(--ink); }
.trow.sub .lab { color: var(--ink2); }
.die { --dc: #efe6d0; --pc: #1a1410; position: relative; width: 32px; height: 32px; border-radius: 6px; background: linear-gradient(145deg, #fffaf0, var(--dc) 55%, #c9bea3); box-shadow: 0 3px 0 #8c8269, 0 5px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 #fff; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 5px; gap: 1px; transition: opacity 0.3s, transform 0.3s, filter 0.3s; flex: none; }
.die i { width: 100%; height: 100%; border-radius: 50%; background: transparent; }
.die i.p { background: radial-gradient(circle at 35% 35%, #4a4038, var(--pc) 60%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6); }
.die.rolling { animation: tumble 0.5s linear infinite; }
@keyframes tumble { 0% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-9px) rotate(110deg); } 50% { transform: translateY(0) rotate(200deg); } 75% { transform: translateY(-5px) rotate(290deg); } 100% { transform: translateY(0) rotate(360deg); } }
.die.land { animation: land 0.26s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes land { from { transform: translateY(-12px) rotate(-25deg) scale(1.15); } }
.die.fail { opacity: 0.34; filter: saturate(0.3); transform: scale(0.88); box-shadow: 0 2px 0 #5c5545, 0 3px 6px rgba(0, 0, 0, 0.5); }
.die.ok { box-shadow: 0 3px 0 #8c8269, 0 0 0 2px var(--good), 0 0 14px rgba(92, 201, 112, 0.55); }
.die.crit { --dc: #ffe9a0; background: linear-gradient(145deg, #fff8d8, #ffd95a 55%, #d9a520); box-shadow: 0 3px 0 #96700f, 0 0 0 2px #fff3b8, 0 0 20px rgba(255, 210, 80, 0.95); animation: critpop 0.5s; }
@keyframes critpop { 30% { transform: scale(1.35) rotate(8deg); } }
.die.enemy { --dc: #d94a36; --pc: #fff; background: linear-gradient(145deg, #ff8a70, #c8402f 55%, #7f1e12); box-shadow: 0 3px 0 #5a130b, 0 5px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 #ffb3a0; }
.die.enemy i.p { background: #fff3e6; box-shadow: none; }
.die.p-orks { --pc: #0d1f05; background: linear-gradient(145deg, #c9f08f, #7cc23a 55%, #3f7a14); box-shadow: 0 3px 0 #2b5a0c, 0 5px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 #e5ffc0; }
.die.p-marines { --pc: #fff; background: linear-gradient(145deg, #7fb0ff, #2f6fd6 55%, #173f8a); box-shadow: 0 3px 0 #0f2c63, 0 5px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 #b8d4ff; }
.die.p-marines i.p { background: #fff; box-shadow: none; }
.die.p-orks.fail, .die.p-marines.fail { opacity: 0.3; }
.die.pick { cursor: pointer; outline: 2px dashed var(--brass2); outline-offset: 2px; }
.die.pick:hover { transform: translateY(-3px) scale(1.08); opacity: 1; filter: none; }
.die .was { position: absolute; top: -8px; right: -7px; font: 700 10px var(--cond); background: #111; color: var(--brass2); border: 1px solid var(--brass3); border-radius: 8px; padding: 0 4px; }
.die.sm { width: 24px; height: 24px; padding: 4px; border-radius: 5px; }
.auto-hits { font: 700 15px var(--cond); letter-spacing: 0.08em; color: var(--warn); text-transform: uppercase; }
/* -- the sum behind each roll (matchup.js) -- */
.a-marines { --sc: var(--marines); --sc2: var(--marines2); }
.a-orks { --sc: var(--orks); --sc2: var(--orks2); }
.sc { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 7px 2px; border: 1px solid color-mix(in srgb, var(--sc, var(--brass)) 80%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--sc, var(--brass)) 30%, rgba(0, 0, 0, 0.5)); font: 700 15px/1.25 var(--cond); color: #fff; white-space: nowrap; cursor: help; }
.sc small { font: 700 10.5px var(--cond); letter-spacing: 0.1em; color: var(--sc2, var(--brass2)); text-transform: uppercase; }
.sc b { font-weight: 700; }
.sc.mod b { color: var(--warn); }
.eq-word { font: 500 13.5px var(--body); color: var(--ink2); }
.eq-arrow { color: var(--brass); font: 700 15px var(--cond); }
.eq-out { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.eq-out.wrap { white-space: normal; }
.eq-need { display: inline-block; font: 700 18px/1 var(--cond); color: #14100a; background: linear-gradient(180deg, var(--brass2), var(--brass)); padding: 3px 8px 4px; border-radius: 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); white-space: nowrap; }
.eq-need.none { background: rgba(163, 53, 42, 0.25); color: #ffb3a6; box-shadow: none; border: 1px solid #7a2a20; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; }
.eq-need.plain { background: transparent; color: #fff; box-shadow: none; padding: 0; font-size: 17px; }
.eq-fact { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1.45 var(--cond); letter-spacing: 0.03em; padding: 1px 7px; border: 1px dashed var(--line2); border-radius: 3px; color: var(--ink); background: rgba(0, 0, 0, 0.3); }
.eq-fact i { font-style: normal; font-size: 9px; }
.eq-fact.good { border-color: #2c6a39; color: #a9e8b4; } .eq-fact.good i { color: var(--good); }
.eq-fact.bad { border-color: #7a2a20; color: #ffb3a6; } .eq-fact.bad i { color: #ff7a66; }
.eq-fact.rider { border-style: solid; border-color: var(--brass3); color: var(--brass2); }
.trow.has-eq { grid-template-columns: 70px minmax(0, 1fr) auto; grid-template-areas: "lab eq res" "lab dice res" "lab why why"; gap: 6px 12px; align-items: start; padding: 8px 0 7px; }
.trow.has-eq .lab { grid-area: lab; padding-top: 6px; }
.trow.has-eq .eq { grid-area: eq; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; min-height: 26px; }
.trow.has-eq .dice { grid-area: dice; }
.trow.has-eq .res { grid-area: res; align-self: center; }
.trow.has-eq .why { grid-area: why; grid-column: auto; margin-top: 0; }
.trow.no-dice { grid-template-areas: "lab eq res"; padding: 5px 0; align-items: center; }
.trow.no-dice .lab { padding-top: 0; }
.trow.no-dice .res { font-size: 21px; display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.trow.no-dice .res small { margin-top: 0; }
.trow.has-eq .eq .wtab { margin: 0 0 0 auto; }
.trow.inline { grid-template-columns: 70px auto minmax(0, 1fr) auto; grid-template-areas: "lab eq dice res"; align-items: center; padding: 5px 0; }
.trow.inline .lab { padding-top: 0; }
.trow.inline .res { font-size: 21px; display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.trow.inline .res small { margin-top: 0; }
.trow.inline .die { width: 26px; height: 26px; padding: 4px; }
.trow .res small { white-space: nowrap; }
.tray-head.duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; }
.duel-side { min-width: 0; display: flex; }
.duel-mid { display: grid; place-items: center; padding: 0 10px; color: var(--brass); font-size: 18px; }
.mu-side { flex: 1; min-width: 0; padding: 7px 12px 8px; display: flex; flex-direction: column; gap: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 22%, transparent), transparent 85%); border-left: 3px solid var(--sc); }
.mu-side.def { align-items: flex-end; text-align: right; background: linear-gradient(270deg, color-mix(in srgb, var(--sc) 22%, transparent), transparent 85%); border-left: 0; border-right: 3px solid var(--sc); }
.mu-head { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; }
.mu-head canvas { flex: none; }
.mu-id { min-width: 0; }
.mu-name { font: 700 16px/1.1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-sub { font: 500 12px var(--cond); letter-spacing: 0.06em; color: var(--ink2); }
.mu-weapon { display: flex; flex-direction: column; gap: 4px; }
.mu-wname { font: 700 14.5px/1.1 var(--cond); letter-spacing: 0.04em; color: var(--brass2); margin-right: 3px; }
.mu-wname .n { color: var(--ink2); font-weight: 600; }
.mu-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mu-side.def .mu-stats { justify-content: flex-end; }
.mu-who { font: 500 12px var(--cond); color: var(--ink2); letter-spacing: 0.04em; margin: 0 2px; }
.mu-abil { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mu-abil .chip { font-size: 10.5px; padding: 0 6px; }
.mu-side.def .mu-abil { justify-content: flex-end; }
.tray-foot { display: flex; align-items: center; gap: 8px; padding: 8px 14px 10px; border-top: 1px solid rgba(201, 162, 74, 0.2); background: rgba(0, 0, 0, 0.25); }
.tray-foot .sum { font: 600 15px var(--cond); letter-spacing: 0.04em; color: var(--ink); min-width: 0; }
.tray-foot .sum b { color: var(--brass2); }
.tray-foot .spacer { flex: 1; }
.tray-teach { padding: 8px 14px; background: rgba(201, 162, 74, 0.09); border-top: 1px solid rgba(201, 162, 74, 0.2); font-size: 13.5px; color: var(--ink); display: flex; gap: 9px; align-items: flex-start; }
.tray-teach .ico { color: var(--brass2); margin-top: 1px; }
.wtab { display: inline-grid; grid-template-columns: repeat(5, auto); gap: 2px; margin-top: 5px; font: 600 11px var(--cond); }
.wtab span { padding: 2px 6px; background: rgba(255, 255, 255, 0.06); color: var(--ink2); text-align: center; }
.wtab span.on { background: var(--brass); color: #111; }

/* ---------- modal / decision cards ---------------------------------------------------- */
.modal-layer { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(4, 6, 8, 0.66); backdrop-filter: blur(3px); animation: fade 0.2s; padding: 14px; overflow: auto; }
.modal-layer.soft { background: rgba(4, 6, 8, 0.25); backdrop-filter: none; place-items: end center; padding-bottom: 150px; pointer-events: none; }
.modal-layer.soft > * { pointer-events: auto; }
@keyframes fade { from { opacity: 0; } }
.card { width: min(620px, 100%); max-height: 100%; overflow: auto; background: linear-gradient(180deg, #1d252f, #10141a); border: 1px solid var(--line2); box-shadow: var(--shadow); animation: cardin 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15); position: relative; }
.card.wide { width: min(880px, 100%); }
@keyframes cardin { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--cc, var(--brass)), transparent); }
.card-head { padding: 18px 22px 0; }
.card-head .eyebrow { margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.card-head h2 { font: 800 28px/1.08 var(--display); color: #fff; }
.card-body { padding: 12px 22px 6px; color: var(--ink2); font-size: 15px; }
.card-body p { margin-bottom: 0.75em; }
.card-body .rule { margin: 10px 0; padding: 10px 12px; background: rgba(0, 0, 0, 0.3); border-left: 3px solid var(--brass3); font-size: 13.5px; font-style: italic; color: var(--ink2); }
.card-body .rule b { font-style: normal; }
.card-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 14px 22px 20px; }
.choices { display: grid; gap: 8px; margin: 10px 0 4px; }
.choice { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; text-align: left; padding: 12px 14px; border: 1px solid var(--line2); background: rgba(0, 0, 0, 0.28); cursor: pointer; color: var(--ink); transition: 0.12s; }
.choice:hover, .choice:focus-visible { border-color: var(--brass); background: rgba(201, 162, 74, 0.14); outline: none; }
.choice h4 { font: 700 17px/1.15 var(--cond); letter-spacing: 0.07em; text-transform: uppercase; }
.choice p { margin: 0; font-size: 13.5px; color: var(--ink2); grid-column: 1 / 2; }
.choice .right { grid-row: 1 / 3; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.choice.rec { border-color: var(--brass3); }
.choice .recb { font: 700 10.5px var(--cond); letter-spacing: 0.14em; background: var(--brass2); color: #111; padding: 2px 6px; }
.choice .costb { font: 700 13px var(--cond); letter-spacing: 0.06em; color: var(--brass2); border: 1px solid var(--brass3); padding: 1px 7px; }
.choice[disabled] { opacity: 0.4; cursor: not-allowed; }
.concept { display: grid; grid-template-columns: 1fr; gap: 0; }
.concept .dia { background: #0b0e12; border: 1px solid var(--line); margin: 6px 0 10px; }
.concept .dia canvas { display: block; width: 100%; height: auto; }
.concept ul { margin: 6px 0 4px; padding-left: 1.2em; }
.concept li { margin-bottom: 4px; }

/* ---------- attack planner (shoot / fight) -------------------------------------------- */
.plan { padding: 10px 12px 12px; }
.plan h4 { font: 700 12px var(--cond); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin-bottom: 6px; display: flex; justify-content: space-between; }
.plan-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 7px 8px; margin-bottom: 4px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); border-left: 3px solid var(--ink3); font: 500 13.5px var(--cond); }
.reserve-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 10px; }
.reserve-list .choice { margin: 0; }
.plan-row.on { border-left-color: var(--good); }
.plan-target { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 4px; font: 700 12.5px var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.plan button.up { padding: 0 6px; margin-left: 4px; border: 1px solid var(--line2); background: transparent; color: var(--brass2); font: 700 10px var(--cond); cursor: pointer; line-height: 1.6; }
.plan button.up:hover { border-color: var(--brass); background: rgba(201, 162, 74, 0.15); }
.plan-err { margin: 6px 0; padding: 6px 8px; border: 1px solid #a3352a; background: rgba(163, 53, 42, 0.18); color: #ffd0c8; font-size: 13px; }
.fine { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.fine-toggle { display: block; padding: 3px 0; border: 0; background: none; color: var(--brass2); font: 600 12.5px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.fine-toggle:hover { color: #fff; }
.fine-row { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 5px 0; font-size: 12.5px; }
.fine-row b { color: var(--ink); } .fine-row i { color: var(--ink3); font-style: normal; }
.fine-row select, .fine-row input { width: 100%; padding: 4px 6px; background: #0b0e12; color: var(--ink); border: 1px solid var(--line2); font: 500 13px var(--body, inherit); }
.fine-row .split { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; color: var(--ink2); }
.fine-row .split input { width: 3.4em; text-align: right; }
.plan-row.off { opacity: 0.55; }
.plan-row .w { font-weight: 700; letter-spacing: 0.03em; color: var(--ink); }
.plan-row .t { color: var(--ink2); font-size: 12.5px; grid-column: 1 / 3; }
.plan-row .math { grid-column: 1 / 3; color: var(--ink2); font-size: 12.5px; }
.plan-row .math b { color: var(--brass2); }
.plan-row .tog { display: flex; gap: 3px; }
.plan-row .tog button { padding: 2px 7px; border: 1px solid var(--line2); background: transparent; color: var(--ink2); font: 600 11.5px var(--cond); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.plan-row .tog button.on { background: var(--brass); border-color: var(--brass2); color: #111; }
.plan-row .tog button.haz.on { background: var(--warn); }
.steps { grid-column: 1 / 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: 5px; background: var(--line); border: 1px solid var(--line); }
.step { background: #10151b; padding: 4px 2px 5px; text-align: center; cursor: help; min-width: 0; }
.step small { display: block; font: 700 9.5px var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.step b { display: block; font: 700 18px/1.15 var(--cond); color: #fff; }
.step.none b { color: #ff9a8c; font-size: 14px; line-height: 1.5; text-transform: uppercase; }
.step .of { display: block; font: 600 11.5px/1.3 var(--cond); letter-spacing: 0.02em; color: var(--ink3); white-space: nowrap; text-transform: none; overflow: hidden; text-overflow: clip; }
.step .of.a-marines, .step .of.a-orks { color: var(--sc2); }
.step .of.up { color: var(--good); } .step .of.down { color: #ff9a8c; }
.plan-row .facts { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.plan-row .facts .eq-fact { font-size: 11.5px; padding: 0 6px; white-space: normal; }
.tcard { margin-bottom: 8px; padding: 8px 9px 9px; border: 1px solid var(--line); border-left: 3px solid var(--sc, var(--brass)); background: linear-gradient(90deg, color-mix(in srgb, var(--sc, var(--brass)) 16%, transparent), rgba(0, 0, 0, 0.25) 70%); display: flex; flex-direction: column; gap: 6px; }
.tcard.pick { cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.tcard.pick:hover, .tcard.pick:focus-visible { border-color: var(--brass2); border-left-color: var(--sc, var(--brass)); background: linear-gradient(90deg, color-mix(in srgb, var(--sc, var(--brass)) 30%, transparent), rgba(201, 162, 74, 0.1) 70%); outline: 0; }
.tcard.no { opacity: 0.62; border-left-color: var(--ink3); }
.tcard-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tcard-top canvas { flex: none; }
.tcard-top .mu-id { flex: 1; }
.tcard .mu-name { font-size: 14.5px; }
.tcard-fc { text-align: right; font: 700 16px/1.1 var(--cond); color: #fff; white-space: nowrap; }
.tcard-fc small { display: block; font: 600 10.5px var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink2); }
.tcard .sc { font-size: 13.5px; padding: 0 6px 1px; }
.tcard-lines { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; font: 500 12.5px var(--cond); color: var(--ink2); }
.tcard-lines b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard-lines span { white-space: nowrap; }
.tcard-lines span i { font-style: normal; color: var(--brass2); font-weight: 700; }
.tcard-why { font-size: 12.5px; color: var(--ink2); }
.plan-note { font-size: 12.5px; color: var(--ink2); }
.plan-note b { color: var(--ink); }
.forecast { margin: 0 0 8px; padding: 9px 10px; background: linear-gradient(90deg, rgba(201, 162, 74, 0.16), transparent); border-left: 3px solid var(--brass); }
.forecast .big { font: 700 22px/1 var(--cond); color: #fff; }
.forecast .big small { font: 600 12px var(--cond); letter-spacing: 0.12em; color: var(--ink2); text-transform: uppercase; margin-left: 6px; }
.forecast .pipe { display: flex; gap: 4px; margin-top: 7px; font: 600 12px var(--cond); color: var(--ink2); align-items: center; flex-wrap: wrap; }
.forecast .pipe span { padding: 2px 6px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); }
.forecast .pipe span b { color: var(--ink); }

/* ---------- log drawer ------------------------------------------------------------------ */
.drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 50; width: min(440px, 100%); background: #0e1217; border-left: 1px solid var(--line2); box-shadow: -30px 0 80px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; animation: drawer 0.22s; }
@keyframes drawer { from { transform: translateX(40px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { font: 700 20px var(--display); flex: 1; }
.drawer-body { flex: 1; overflow: auto; padding: 10px 16px 30px; }
.logline { padding: 4px 0 4px 10px; border-left: 2px solid var(--line2); margin-bottom: 3px; font-size: 13.5px; color: var(--ink2); }
.logline.kill { border-color: var(--blood); color: var(--ink); } .logline.vp { border-color: var(--brass2); color: var(--brass2); } .logline.big { border-color: var(--cyan); color: #fff; } .logline.good { border-color: var(--good); } .logline.bad { border-color: #a14a3e; } .logline.objective { border-color: var(--warn); }
.loghead { margin: 14px 0 6px; font: 700 12px var(--cond); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.setrow { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.setrow h4 { font: 700 14px var(--cond); letter-spacing: 0.12em; text-transform: uppercase; }
.setrow p { margin: 0; font-size: 13px; color: var(--ink2); }

/* ---------- end screen --------------------------------------------------------------------- */
.endcard { text-align: center; }
.endcard .result { font: 900 clamp(44px, 8vw, 86px)/1 var(--display); letter-spacing: 0.06em; margin: 8px 0 4px; }
.endcard .result.win { color: var(--brass2); text-shadow: 0 0 60px rgba(242, 211, 130, 0.6); }
.endcard .result.lose { color: #c9655a; }
.endcard .final { display: flex; justify-content: center; gap: 30px; margin: 14px 0; align-items: center; }
.endcard .final .fs { font: 800 60px/1 var(--display); }
.endcard .final small { display: block; font: 600 13px var(--cond); letter-spacing: 0.16em; color: var(--ink2); text-transform: uppercase; }
.endgrid { display: grid; grid-template-columns: repeat(6, auto); gap: 1px; background: var(--line); margin: 12px auto; width: fit-content; font: 600 14px var(--cond); }
.endgrid div { background: var(--panel); padding: 6px 14px; }
.endgrid .hd { color: var(--brass); letter-spacing: 0.14em; font-size: 12px; }
.lessons { text-align: left; margin-top: 12px; }
.lessons li { margin-bottom: 6px; }

/* ---------- codex ---------------------------------------------------------------------------- */
.codex { display: grid; grid-template-columns: 250px 1fr; height: 100%; min-height: 0; }
.codex-nav { border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 0; background: rgba(13, 17, 22, 0.6); }
.codex-nav .grp { padding: 12px 18px 4px; font: 700 11.5px var(--cond); letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); }
.codex-nav button { display: block; width: 100%; text-align: left; padding: 7px 18px; border: 0; background: transparent; color: var(--ink2); cursor: pointer; font: 500 15px var(--cond); letter-spacing: 0.04em; border-left: 3px solid transparent; }
.codex-nav button:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.codex-nav button.on { color: #fff; border-left-color: var(--brass2); background: rgba(201, 162, 74, 0.12); }
.codex-main { overflow-y: auto; padding: 26px clamp(18px, 4vw, 54px) 80px; }
.codex-main h2 { font: 800 34px/1.05 var(--display); margin-bottom: 6px; }
.codex-main .lede { font-size: 17px; color: var(--ink2); max-width: 46em; margin-bottom: 18px; }
.rulecard { max-width: 860px; margin: 0 0 12px; padding: 14px 18px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--brass3); }
.rulecard h3 { font: 700 19px/1.2 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; display: flex; gap: 10px; align-items: baseline; }
.rulecard h3 .ref { font: 600 12px var(--cond); color: var(--brass); letter-spacing: 0.12em; }
.rulecard .sum { color: var(--ink); margin: 5px 0 6px; font-size: 15.5px; }
.rulecard ul { margin: 4px 0; padding-left: 1.2em; color: var(--ink2); font-size: 14.5px; }
.rulecard li { margin-bottom: 3px; }
.rulecard .eg { margin-top: 8px; padding: 8px 10px; background: rgba(0, 0, 0, 0.25); font-size: 14px; color: var(--ink2); }
.rulecard .eg b, .rulecard .gotcha b { font: 700 11.5px var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-right: 6px; }
.rulecard .gotcha { margin-top: 6px; padding: 8px 10px; background: rgba(217, 67, 47, 0.1); border-left: 2px solid var(--blood); font-size: 14px; color: var(--ink); }
.rulecard .gotcha b { color: #ff9a8c; }
.sheet { max-width: 900px; margin-bottom: 22px; background: var(--panel); border: 1px solid var(--line); }
.sheet .ucard-head { grid-template-columns: 84px 1fr; }
.sheet .ucard-head canvas { width: 84px; height: 84px; }
.sheet .ucard-head h3 { font-size: 26px; }
.sheet .blurb { padding: 10px 16px; color: var(--ink2); border-bottom: 1px solid var(--line); }
.sheet .wtable { font-size: 14.5px; }
.sheet .usec { padding: 12px 16px; }
.seq { max-width: 900px; counter-reset: s; }
.seq .ph-block { margin-bottom: 18px; border: 1px solid var(--line); background: var(--panel); }
.seq .ph-block > h3 { padding: 10px 16px; font: 700 19px var(--cond); letter-spacing: 0.1em; text-transform: uppercase; background: linear-gradient(90deg, rgba(201, 162, 74, 0.22), transparent); border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.seq .ph-block > p { padding: 8px 16px 0; color: var(--ink2); }
.seq .st { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 9px 16px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.seq .st::before { counter-increment: s; content: counter(s); width: 26px; height: 26px; display: grid; place-items: center; font: 700 13px var(--cond); color: var(--brass2); border: 1px solid var(--brass3); }
.seq .ph-block { counter-reset: s; }
.seq .st h4 { font: 700 15px var(--cond); letter-spacing: 0.06em; text-transform: uppercase; }
.seq .st p { margin: 2px 0 0; font-size: 14.5px; color: var(--ink2); }
.seq .st .fac { margin-top: 5px; font-size: 13.5px; padding: 4px 8px; border-left: 2px solid var(--marines); background: rgba(61, 123, 230, 0.1); color: var(--ink); }
.seq .st .fac.o { border-color: var(--orks); background: rgba(95, 174, 46, 0.1); }
.gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; max-width: 1100px; }
.gloss div { padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; color: var(--ink2); }
.gloss b { display: block; font: 700 14.5px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass2); margin-bottom: 2px; }
.search { width: 100%; max-width: 420px; padding: 9px 12px; background: #0b0e12; border: 1px solid var(--line2); color: var(--ink); font: 500 15px var(--body); margin-bottom: 14px; }
.search:focus { outline: none; border-color: var(--brass); }

/* ---------- table mode ---------------------------------------------------------------------------- */
.tm { display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: 100%; min-height: 0; }
.tm-main { overflow-y: auto; padding: 20px clamp(14px, 3vw, 40px) 80px; }
.tm-side { border-left: 1px solid var(--line); overflow-y: auto; background: rgba(13, 17, 22, 0.7); }
.tm-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; margin-bottom: 16px; }
.tm-round { align-self: center; }
.tm-p h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tm-p h3 .chip { margin-left: 0 !important; }
.tm-p { --pc: var(--marines); padding: 12px 16px; border: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 26%, transparent), var(--panel) 70%); }
.tm-p.o { --pc: var(--orks); }
.tm-p h3 { font: 700 18px var(--cond); letter-spacing: 0.12em; text-transform: uppercase; }
.tm-p .nums { display: flex; gap: 18px; margin-top: 8px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper b { font: 800 34px/1 var(--display); min-width: 1.6em; text-align: center; }
.stepper small { font: 600 11px var(--cond); letter-spacing: 0.16em; color: var(--ink2); display: block; text-align: center; }
.stepper button { width: 32px; height: 32px; border: 1px solid var(--line2); background: #0b0e12; color: var(--ink); font: 700 18px var(--cond); cursor: pointer; }
.stepper button:hover { border-color: var(--brass); }
.tm-round { text-align: center; }
.tm-round .r { font: 800 44px/1 var(--display); color: var(--brass2); }
.tm-round small { font: 600 12px var(--cond); letter-spacing: 0.2em; color: var(--ink2); text-transform: uppercase; }
.tm-steps .st { cursor: pointer; }
.tm-steps .st.done { opacity: 0.45; }
.tm-steps .st.done h4 { text-decoration: line-through; }
.tm-steps .st.now { background: rgba(201, 162, 74, 0.12); box-shadow: inset 3px 0 0 var(--brass2); }
.calc { padding: 14px 16px; }
.calc h3 { font: 700 15px var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass2); margin-bottom: 10px; }
.calc label { display: block; font: 600 11.5px var(--cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); margin: 10px 0 4px; }
.calc select, .calc input[type="number"] { width: 100%; padding: 8px 10px; background: #0b0e12; border: 1px solid var(--line2); color: var(--ink); font: 500 15px var(--body); }
.calc .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 8px; font-size: 13.5px; color: var(--ink2); }
.calc .checks label { margin: 0; font: inherit; letter-spacing: 0; text-transform: none; display: flex; gap: 6px; align-items: center; color: var(--ink2); }
.needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.needs div { text-align: center; padding: 10px 4px; background: #0b0e12; border: 1px solid var(--line); }
.needs b { display: block; font: 800 30px/1 var(--display); color: #fff; }
.needs small { font: 600 11px var(--cond); letter-spacing: 0.14em; color: var(--brass); text-transform: uppercase; }
.needs .x { font: 500 11.5px var(--cond); color: var(--ink2); margin-top: 3px; }
.eqs { margin-top: 10px; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.eqline { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 8px; background: #0b0e12; }
.eqline > small { font: 700 11px var(--cond); letter-spacing: 0.14em; color: var(--brass); text-transform: uppercase; }
.eqline .eq { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; }

/* ---------- boot camp ------------------------------------------------------------------------------ */
.camp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; margin-top: 22px; }
.camp-card { position: relative; text-align: left; padding: 20px 22px 18px; cursor: pointer; color: var(--ink); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(34, 43, 54, 0.95), rgba(14, 18, 23, 0.97)); transition: 0.16s; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); min-height: 190px; }
.camp-card:hover, .camp-card:focus-visible { border-color: var(--brass); transform: translateY(-3px); outline: none; background: linear-gradient(160deg, rgba(70, 56, 24, 0.9), rgba(18, 22, 27, 0.97)); }
.camp-card .camp-n { position: absolute; top: 14px; right: 18px; font: 900 44px/1 var(--display); color: rgba(201, 162, 74, 0.28); }
.camp-card.done .camp-n { color: var(--good); }
.camp-card .camp-ico { width: 52px; height: 52px; display: grid; place-items: center; color: var(--brass2); border: 1px solid var(--brass3); background: radial-gradient(circle, rgba(201, 162, 74, 0.22), transparent 70%); margin-bottom: 12px; }
.camp-card h3 { font: 700 24px/1.1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; }
.camp-card p { margin: 6px 0 12px; color: var(--ink2); font-size: 14.5px; }
.camp-card .camp-meta { display: flex; gap: 10px; align-items: center; font: 600 12px var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3); }
.camp-card .badge { background: var(--brass2); color: #111; padding: 2px 8px; }
.camp-card.next { border-color: var(--brass3); box-shadow: 0 0 0 1px var(--brass3), 0 0 30px rgba(201, 162, 74, 0.18); }
.lesson { padding: 10px 12px 12px; background: linear-gradient(180deg, rgba(48, 38, 16, 0.96), rgba(17, 21, 27, 0.97)); border-color: var(--brass3); }
.lesson h3 { font: 700 19px/1.1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; margin: 4px 0 8px; }
.goal { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 13.5px; color: var(--ink); line-height: 1.35; }
.goal .tick { width: 18px; height: 18px; border: 1px solid var(--brass3); border-radius: 3px; display: grid; place-items: center; color: transparent; margin-top: 1px; }
.goal.done { color: var(--ink3); }
.goal.done .tick { background: var(--good); border-color: var(--good); color: #062008; }
.goal small { display: block; color: var(--ink2); font-size: 12.5px; margin-top: 2px; }
.goal.done small { display: none; }

/* ---------- responsive ----------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .rail.right { width: 290px; }
  .rail.left { width: 210px; }
  .topbar { grid-template-columns: auto 1fr auto 1fr auto; }
  .phases .ph span.lbl { display: none; }
  .score .who .sub { display: none; }
}
@media (max-width: 900px) {
  :root { --topbar: 54px; }
  .menu { grid-template-columns: 1fr; }
  .menu-side { display: none; }
  .armies { grid-template-columns: 1fr; }
  .rail.left, .rail.right { top: 6px; }
  .rail.left { width: 200px; } .rail.right { width: min(300px, 82vw); }
  .score .vp { font-size: 28px; }
  .score { padding: 0 8px; gap: 8px; }
  .score .who .nm { font-size: 13px; }
  .track { padding: 0 6px; }
  .codex { grid-template-columns: 1fr; }
  .codex-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0; }
  .codex-nav .grp { display: none; }
  .codex-nav button { white-space: nowrap; width: auto; border-left: 0; border-bottom: 3px solid transparent; }
  .codex-nav button.on { border-bottom-color: var(--brass2); }
  .tm { display: block; overflow-y: auto; }
  .tm-main { overflow: visible; padding-bottom: 24px; }
  .tm-side { overflow: visible; border-left: 0; border-top: 1px solid var(--line); padding-bottom: 60px; }
  .console { grid-template-columns: 1fr; }
  .console .who { display: none; }
  .console .msg { font-size: 14.5px; }
  .dice-layer { bottom: 170px; }
  .viewtools { display: none; }
}
@media (max-width: 620px) {
  /* phone: scores on the first row of the top bar, the phase track on the second */
  .topbar { height: auto; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-rows: 46px 38px; }
  .topbar .tb-left { grid-area: 1 / 1; padding: 0 6px; }
  .score.p0 { grid-area: 1 / 2; } .score.p1 { grid-area: 1 / 3; }
  .topbar .tb-right { grid-area: 1 / 4; padding: 0 6px; gap: 4px; }
  .topbar .tb-right .iconbtn:nth-child(1), .topbar .tb-right .iconbtn:nth-child(3) { display: none; }
  .track { grid-area: 2 / 1 / 3 / 5; flex-direction: row; justify-content: space-between; gap: 8px; padding: 0 8px; border: 0; border-top: 1px solid #000; }
  .track .round { font-size: 11px; letter-spacing: 0.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .score { padding: 0 6px; gap: 6px; }
  .score .who .sub, .score .cp small, .score .vp small { display: none; }
  .score .who .nm { font-size: 11.5px; letter-spacing: 0.05em; white-space: normal; line-height: 1.05; }
  .score .vp { font-size: 24px; }
  .toast, .toasts > * { font-size: 13px; }
  .screen-head h2 { font-size: 20px; }
  .tm-main h2.display { font-size: 26px !important; }
  .tm-score { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .tm-round { grid-column: 1 / -1; order: -1; display: flex; align-items: center; justify-content: center; gap: 12px; }
  .tm-round .r { font-size: 34px; }
  .tm-round > div { margin-top: 0 !important; }
  .tm-p { padding: 10px; }
  .tm-p h3 { font-size: 15px; }
  .tm-p .nums { gap: 8px; flex-wrap: wrap; }
  .stepper { gap: 4px; }
  .stepper b { font-size: 26px; min-width: 1.3em; }
  .stepper button { width: 34px; height: 34px; }
}
@media (max-height: 980px) {
  /* a laptop screen: keep the whole menu, footer included, on one page */
  .menu-main { gap: 14px; padding-top: 30px; padding-bottom: 20px; }
  .menu h1 { font-size: clamp(36px, 4.4vw, 60px); }
  .menu .tagline { font-size: 16.5px; }
  .menu-item { padding: 10px 16px; gap: 14px; }
  .menu-item .mi-ico { width: 46px; height: 46px; }
  .menu-item h3 { font-size: 20px; }
  .menu-item p { font-size: 13.5px; }
  .army-card .art { height: 150px; }
  .army-card .body { padding: 14px 18px 14px; }
  .screen-body { padding-top: 18px; }
}
@media (max-height: 620px) {
  .console .msg { min-height: 0; }
}
.heights { max-width: 560px; }
.heights input { width: 5.2em; padding: 5px 6px; background: #0b0e12; color: var(--ink); border: 1px solid var(--line2); font: 600 15px var(--cond); text-align: right; }
.heights input:focus { outline: none; border-color: var(--brass); }
.cheat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1180px; }
.cheat .rulecard { margin: 0; max-width: none; }
.cheat .rulecard:nth-child(1) { grid-row: span 2; }
.cheat .rulecard:nth-child(n+4) { grid-column: 1 / -1; }
.cheat-turn { margin: 4px 0 0; padding-left: 1.25em; color: var(--ink2); font-size: 14.5px; line-height: 1.42; }
.cheat-turn li { margin: 3px 0; }
.cheat-turn b { color: var(--ink); }
.cheat-units { width: 100%; font-size: 14px; }
.cheat-units td { padding: 2px 8px 2px 0; border: 0; }
@media (max-width: 900px) { .cheat { grid-template-columns: 1fr; } .cheat .rulecard:nth-child(1) { grid-row: auto; } }
@media print {
  body.codex-open #app { display: none !important; }
  .codex-layer { position: static !important; }
  @page { margin: 11mm; }
  .cheat { gap: 6px; grid-template-columns: 1fr 1fr !important; }
  .cheat .rulecard:nth-child(1) { grid-row: span 2 !important; }
  .codex-main h2 { margin: 0 0 6px; }
  .cheat .rulecard { padding: 6px 10px; border-width: 1px; }
  .cheat-turn, .cheat-units, .cheat .sum { font-size: 9.5pt !important; line-height: 1.25; color: #111 !important; }
  .cheat h3 { font-size: 11.5pt; margin-bottom: 2px; }
  .cheat-turn b, .cheat .sum b { color: #000 !important; }
  html, body { overflow: visible; background: #fff; color: #111; height: auto; }
  .screen-head, .codex-nav, .no-print { display: none !important; }
  .screen, .codex, .codex-main { display: block; height: auto; overflow: visible; background: #fff; }
  .rulecard, .sheet, .seq .ph-block, .gloss div { background: #fff; color: #111; border-color: #999; break-inside: avoid; }
  .rulecard .sum, .rulecard ul, .seq .st p, .abil, .wtable td, .codex-main .lede { color: #222; }
  b, strong, .rulecard h3, .codex-main h2, .seq .st h4, .ucard-head h3, .statline b { color: #000; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}