/* (2026-10-16) the game's two faces, bundled with their SIL Open Font Licences (assets/fonts): Rye for titles and
   section headings, Besley for everything else (buttons, numbers, unit names, descriptions). Regular weights only: the
   headings are set at that weight; bold text elsewhere is the browser's own emboldening of Besley */
@font-face { font-family: "Rye"; src: url("assets/fonts/Rye-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Besley"; src: url("assets/fonts/Besley-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
/* Black Hills 1876. The HUD is an 1870s Army survey sheet: tracing linen, engraver's ink, watercolour washes. */
:root {
  --linen: #dfe3d8;
  --linen-hi: #eaede4;
  --linen-lo: #c8cfc0;
  --ink: #1e2226;
  --ink-2: #3b4147;
  --ink-3: #5d646a;
  --sepia: #6b4a2b;
  --army: #2f5f8a;
  --army-wash: rgba(47, 95, 138, .2);
  --lakota: #b4492d;
  --lk-rgb: 180, 73, 45;
  --lakota-wash: rgba(var(--lk-rgb), .2);
  --good: #3d6b3a;
  --warn: #9a6d16;
  --font: "Besley", "Iowan Old Style", Georgia, serif;
  --shadow: 0 7px 20px rgba(18, 22, 26, .34), 0 1px 2px rgba(18, 22, 26, .38);
  --weave: repeating-linear-gradient(0deg, rgba(30, 34, 38, .028) 0 1px, transparent 1px 3px),
           repeating-linear-gradient(90deg, rgba(30, 34, 38, .022) 0 1px, transparent 1px 3px);
}
html { font-size: clamp(14px, .42vw + 9px, 18px); }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--ink); font-family: var(--font); font-synthesis: none; }
body { display: flex; flex-direction: column; overflow: hidden; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
::selection { background: var(--army); color: var(--linen-hi); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caps { font-variant-caps: all-small-caps; letter-spacing: .14em; font-weight: 400; }
.ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.2em; }
#i-vp, .ic.fill { fill: none; }

#app { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #6f8696; user-select: none; -webkit-user-select: none; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: default; image-rendering: pixelated; }
#view.aim { cursor: crosshair; }
/* troops selected and the pointer is on an enemy: a gun-sight in the Lakota vermilion with a linen halo */
#view.target { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23eaede4%22%20stroke-width%3D%224%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M16%201v9M16%2022v9M1%2016h9M22%2016h9%22/%3E%3C/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b4492d%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M16%202v8M16%2022v8M2%2016h8M22%2016h8%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%221.6%22%20fill%3D%22%23b4492d%22/%3E%3C/svg%3E") 16 16, crosshair; }

.legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.1rem; padding: .25rem .8rem calc(.25rem + env(safe-area-inset-bottom));
  background: var(--ink); font-size: .74rem; letter-spacing: .06em; }
.legal a { color: #a9b2a3; text-decoration: none; }
.legal a:hover, .legal a:focus-visible { color: var(--linen-hi); text-decoration: underline; text-underline-offset: .2em; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 1.5rem; font-style: italic; color: var(--linen); background: var(--ink); z-index: 60; }

/* ---------------------------------------------------------------- the sheet (every panel) */
.sheet {
  position: absolute; box-sizing: border-box; background-color: var(--linen); background-image: var(--weave);
  border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -5px;
  box-shadow: var(--shadow); padding: .55rem .75rem .6rem; color: var(--ink);
}
.sheet h2 { margin: 0 0 .25rem; font-size: .82rem; color: var(--ink-2); display: flex; align-items: baseline; gap: .5em; }
.sheet h2 small { font-variant-caps: normal; letter-spacing: 0; font-style: italic; font-size: .82rem; color: var(--ink-3); }
.tnum { font-variant-numeric: lining-nums tabular-nums; }

/* stores (top left) */
#stores { left: .6rem; top: .6rem; display: grid; grid-template-columns: repeat(3, auto); column-gap: 1rem; row-gap: .1rem; align-items: center; }
#stores h2 { grid-column: 1 / -1; }
.store { display: flex; align-items: baseline; gap: .3rem; cursor: help; }
.store .ic { width: 1.25rem; height: 1.25rem; align-self: center; }
.store b { font-size: 1.32rem; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; min-width: 2.2ch; }
.store i { font-size: .78rem; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
.store.short b { color: var(--lakota); }
.pop { grid-column: 1 / -1; font-size: .78rem; font-style: italic; color: var(--ink-3); border-top: 1px solid rgba(30, 34, 38, .25); margin-top: .2rem; padding-top: .15rem; cursor: help; }
.pop b { font-style: normal; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }

/* scale bar (tickets) */
#scale { top: .6rem; left: 50%; transform: translateX(-50%); width: min(36rem, 46vw); padding: .4rem .7rem .55rem; }
.scale-names { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; gap: .5rem; }
.scale-names span:first-child, .scale-names span:last-child { font-variant-caps: all-small-caps; letter-spacing: .12em; }
.scale-mid { color: var(--ink-3); font-size: .74rem; }
.scale-bars { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: .45rem; margin-top: .15rem; }
.scale-bars .tnum { font-size: 1.1rem; font-weight: 700; min-width: 3ch; text-align: center; }
.bar { position: relative; height: .62rem; border: 1px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 10%, var(--linen-hi) 10% 20%); }
.bar i { position: absolute; inset: 0; background: var(--army); mix-blend-mode: multiply; opacity: .9; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.bar.left i { transform-origin: right center; }
.bar.right i { transform-origin: left center; background: var(--lakota); }
.bar.left { transform: scaleX(1); }
.vps { display: flex; gap: .25rem; }
.vp { width: 1.15rem; height: 1.15rem; color: var(--ink-3); }
.vp svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.vp.us svg, .vp.lk svg { fill: currentColor; fill-opacity: .25; }

/* corner tools */
#corner { position: absolute; top: .6rem; right: .6rem; display: flex; gap: .35rem; }
.tool { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background-color: var(--linen); background-image: var(--weave); border: 1.5px solid var(--ink);
  outline: 1px solid var(--ink); outline-offset: -4px; box-shadow: var(--shadow); cursor: pointer; padding: 0; }
.tool:hover { background-color: var(--linen-hi); }
.tool:focus-visible, .btn:focus-visible, .rollrow:focus-visible, .stamp:focus-visible, .chips button:focus-visible, .side:focus-visible { outline: 2px solid var(--army); outline-offset: 2px; }

/* muster roll (left, under the stores) */
#roll { left: .6rem; top: 6.3rem; width: 16.5rem; padding-bottom: .55rem; }
#rollList { display: flex; flex-direction: column; }
.rollrow { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 2rem 1fr; grid-template-rows: auto auto; column-gap: .5rem;
  padding: .32rem .25rem .3rem; border-top: 1px solid rgba(30, 34, 38, .28); cursor: pointer; }
.rollrow:first-child { border-top: 1.5px solid var(--ink); }
.rollrow .nm { font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: .98rem; font-weight: 700; }
.rollrow .pic { grid-row: 1 / 3; grid-column: 1; align-self: center; width: 2rem; height: 2rem; image-rendering: pixelated;
  background: var(--linen-hi); border: 1px solid rgba(30, 34, 38, .35); box-sizing: border-box; }
.rollrow span.pic { display: grid; place-items: center; }
.rollrow span.pic svg { width: 1.45rem; height: 1.45rem; }
.rollrow .nm, .rollrow .cost { grid-column: 2; }
.rollrow .key { font-variant-caps: normal; letter-spacing: 0; font-size: .72rem; font-weight: 400; color: var(--ink-3); }
.rollrow .cost { display: flex; gap: .55rem; font-size: .8rem; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.rollrow .cost span { display: inline-flex; align-items: center; gap: .15rem; }
.rollrow .cost .ic { width: .95rem; height: .95rem; }
.rollrow .cost .no { color: var(--lakota); }
.rollrow:hover:not([aria-disabled="true"]) { background: rgba(47, 95, 138, .1); }
.rollrow[aria-disabled="true"] { cursor: not-allowed; }
.rollrow[aria-disabled="true"] .nm { color: var(--ink-3); }
.rollrow.callin { border-top: 1.5px solid var(--ink); margin-top: .35rem; }
.rollrow.callin.armed { background: rgba(var(--lk-rgb), .14); }
#roll.shut { display: none; }
#queue { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; min-height: 0; }
.qi { position: relative; display: flex; align-items: center; gap: .25rem; font-size: .76rem; font-style: italic; border: 1px solid var(--ink); padding: .1rem .35rem .1rem .3rem;
  background: var(--linen-hi); cursor: pointer; overflow: hidden; }
/* (2026-10-13: "the recruiting bar should be solid fill") */
.qi .fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(47, 95, 138, .4); pointer-events: none; }
.qi span { position: relative; }
#roll.lk .qi .fill { background: rgba(var(--lk-rgb), .4); }

/* register of the selection (bottom centre) */
#register { left: 50%; bottom: .6rem; transform: translateX(-50%); transition: bottom .12s; min-width: 23rem; max-width: min(42rem, 60vw); padding: .5rem .75rem .6rem; }
.reg-head { display: flex; align-items: baseline; gap: .6rem; }
.reg-head h3 { margin: 0; font-size: 1.05rem; font-variant-caps: all-small-caps; letter-spacing: .1em; }
.reg-head .state { font-style: italic; font-size: .85rem; color: var(--ink-2); }
.reg-head .state.bad { color: var(--lakota); }
.reg-head .vet { margin-left: auto; display: flex; gap: .15rem; }
/* deselect: a small x at the right of the panel head, big enough for a finger (2026-10-04) */
.reg-head .desel { margin-left: .4rem; align-self: center; flex: none; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--ink-2); border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 1.2rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
.reg-head .state + .desel { margin-left: auto; }
.reg-head .desel:hover, .reg-head .desel.pressed { background: var(--ink-2); color: var(--linen-hi); }
.rank { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-style: italic; color: var(--ink-2); }
.rank svg { width: 1.1rem; height: 1.2rem; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rank.us svg { stroke: #b0861f; }
.rank.lk svg { stroke: var(--ink); }
.rank.lk svg .tip { stroke: var(--lakota); }
.rank.none { color: var(--ink-3); }
.rankpic { display: flex; align-items: center; justify-content: center; gap: .15rem; flex: none; width: 2.6rem; height: 2.6rem; }
.rankpic .rank { font-size: 0; gap: 0; }
.rankpic .rank svg { width: 1rem; height: 1.3rem; }
.reg-body { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; margin-top: .3rem; }
.men { display: flex; gap: .2rem; align-items: flex-end; }
.man { width: .5rem; height: 1.4rem; border: 1px solid var(--ink); position: relative; background: var(--linen-hi); }
.man i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink-2); }
.man.gone { border-style: dashed; border-color: var(--ink-3); background: transparent; }
.reg-info { font-size: .8rem; color: var(--ink-2); line-height: 1.35; min-width: 0; }
.reg-acts { display: flex; flex-wrap: wrap; gap: .35rem; }
.stamp { all: unset; box-sizing: border-box; position: relative; width: 4.3rem; min-height: 3.7rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -4px; background: var(--linen-hi); cursor: pointer; text-align: center; padding: .25rem .1rem; }
.stamp .ic { width: 1.4rem; height: 1.4rem; }
.stamp .lb { font-size: .74rem; font-variant-caps: all-small-caps; letter-spacing: .06em; line-height: 1.05; }
.stamp .co { display: inline-flex; align-items: center; gap: .1rem; font-size: .7rem; font-variant-numeric: lining-nums tabular-nums; }
.stamp .co .ic { width: .8rem; height: .8rem; }
.stamp .k { position: absolute; top: .18rem; right: .3rem; font-size: .62rem; font-weight: 700; }
.stamp .cd { position: absolute; inset: 0; background: rgba(30, 34, 38, .55); transform-origin: bottom; pointer-events: none; }
.stamp:hover:not([aria-disabled="true"]) { background: #d5dfe8; }
.stamp.locked { border-style: dashed; opacity: .55; }
/* a skill on standing orders: a gold frame and a small turning arrow in the corner (2026-10-04) */
.stamp.standing { box-shadow: inset 0 0 0 2px #c9a227; }
.stamp .so { position: absolute; top: .1rem; left: .28rem; font-size: .8rem; font-weight: 700; line-height: 1; color: #a8801a; }
.reg-sp { display: flex; flex-wrap: wrap; gap: .15rem .7rem; margin: .25rem 0 .1rem; font-size: .78rem; line-height: 1.25; }
.reg-sp b { font-variant-caps: all-small-caps; letter-spacing: .05em; }
.reg-sp .gone { color: var(--ink-3); }
.stamp[aria-disabled="true"] { cursor: not-allowed; color: var(--ink-3); border-color: var(--ink-3); outline-color: var(--ink-3); }
.stamp.on { background: var(--ink); color: var(--linen-hi); }
.multi { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.chip { all: unset; cursor: pointer; display: grid; gap: .1rem; padding: .2rem .4rem; border: 1px solid var(--ink); background: var(--linen-hi); font-size: .74rem; min-width: 4.6rem; }
.chip b { font-variant-caps: all-small-caps; letter-spacing: .08em; }
.chip .hp { height: .25rem; background: var(--linen-lo); position: relative; }
.chip .hp i { position: absolute; inset: 0 auto 0 0; background: var(--ink-2); }

/* the map sheet (minimap) */
#sheetmap { left: .6rem; bottom: .6rem; margin: 0; padding: .45rem .45rem .3rem; }
#mini { display: block; width: 15rem; height: auto; aspect-ratio: 48 / 30; border: 1px solid var(--ink); image-rendering: pixelated; cursor: pointer; touch-action: none; }
#sheetmap figcaption { display: flex; align-items: center; gap: .35rem; font-size: .78rem; margin-top: .2rem; }
#sheetmap .north { width: .9rem; height: .9rem; }

/* marginal notes (events) */
#notes { position: absolute; right: .6rem; top: 3.9rem; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; max-width: 19rem; pointer-events: none; }
#notes li { background: #eaede4; border: 1px solid var(--ink); padding: .2rem .5rem; font-size: .84rem; font-style: italic; box-shadow: 0 3px 8px rgba(18, 22, 26, .25);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
#notes li.us { box-shadow: inset 0 -2px 0 var(--army), 0 3px 8px rgba(18, 22, 26, .25); }
#notes li.lk { box-shadow: inset 0 -2px 0 var(--lakota), 0 3px 8px rgba(18, 22, 26, .25); }
#notes li.fade { opacity: 0; transform: translateX(.6rem); }
#hint { position: absolute; left: 50%; top: 4.6rem; transform: translateX(-50%); background: var(--ink); color: var(--linen-hi); padding: .3rem .8rem; font-size: .88rem; font-style: italic; pointer-events: none; }

/* tooltip */
#tip { position: absolute; z-index: 40; max-width: 17rem; background: var(--linen-hi); background-image: var(--weave); border: 1px solid var(--ink); padding: .45rem .6rem;
  font-size: .8rem; line-height: 1.4; box-shadow: var(--shadow); pointer-events: none; color: var(--ink); }
#tip b { font-variant-caps: all-small-caps; letter-spacing: .08em; font-size: .95rem; display: block; }
#tip .c { display: flex; gap: .6rem; margin-top: .2rem; font-variant-numeric: lining-nums tabular-nums; }
#toast { position: absolute; left: 50%; bottom: calc(var(--bar, 6rem) + .6rem); transform: translateX(-50%); background: var(--ink); color: var(--linen-hi); padding: .35rem .9rem; font-style: italic; z-index: 30; }

/* ---------------------------------------------------------------- screens */
.screen { position: absolute; inset: 0; display: flex; align-items: safe center; justify-content: center; z-index: 20; padding: 1rem; overflow: auto; }
#menu { justify-content: flex-start; padding-left: clamp(1rem, 7vw, 7rem); background: linear-gradient(90deg, rgba(20, 24, 28, .55), rgba(20, 24, 28, 0) 62%); }
.cartouche { position: relative; background-color: var(--linen); background-image: var(--weave); border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -7px;
  box-shadow: var(--shadow); padding: 1.6rem 2rem 1.6rem; text-align: center; width: min(29rem, 92vw); box-sizing: border-box; }
.cartouche::before, .cartouche::after { content: ""; position: absolute; left: 1.2rem; right: 1.2rem; height: 6px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 4px); }
.cartouche::before { top: 12px; }
.cartouche::after { bottom: 12px; }
.title .cart-top { display: block; font-size: .95rem; font-weight: 400; letter-spacing: .14em; text-transform: none; font-variant-caps: all-small-caps; color: var(--ink-2); margin: .3rem 0 .15rem; }
.title { margin: .1rem 0 0; font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1.05; white-space: nowrap; }
.cart-sub { margin: .45rem 0 1.15rem; font-style: italic; color: var(--ink-2); font-size: .98rem; }
.menu-buttons { --vm-gap: .45rem; --vm-accent: var(--army); --vm-muted: var(--ink-3); --vm-danger: var(--lakota); --vm-width: 19rem; }
.btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .35rem 1.2rem;
  border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -4px; background: var(--linen-hi); cursor: pointer;
  font-variant-caps: all-small-caps; letter-spacing: .14em; font-size: 1.12rem; color: var(--ink); text-align: center; }
.btn:hover { background: #d5dfe8; }
.btn.primary { background: var(--ink); color: var(--linen-hi); outline-color: var(--linen); }
.btn.primary:hover { background: var(--army); }
.btn.danger:hover { background: #f0d9d1; }
.vm-menu .btn { width: 100%; }
.vm-menu input[type="range"] { accent-color: var(--army); }

.sheet.big { position: relative; width: min(54rem, 96vw); max-height: 92%; overflow: auto; padding: 1.2rem 1.6rem 1.3rem; outline-offset: -7px; border-width: 2px; }
.sheet-title { font-size: 1.35rem !important; color: var(--ink) !important; justify-content: center; margin-bottom: .8rem !important; }
.sheet h3 { margin: 0 0 .35rem; font-size: .92rem; color: var(--ink-2); }
.note { margin: .35rem 0 0; font-style: italic; font-size: .86rem; color: var(--ink-2); }
.row.end { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: 1rem; }
.side { all: unset; box-sizing: border-box; cursor: pointer; border: 1.5px solid var(--ink); padding: .8rem 7.4rem .9rem .9rem; min-height: 9rem; position: relative; background: var(--linen-hi); }
.side.us { background-image: linear-gradient(var(--army-wash), var(--army-wash)); }
.side.lk { background-image: linear-gradient(var(--lakota-wash), var(--lakota-wash)); }
.side[aria-pressed="true"] { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.side h4 { margin: 0; font-size: 1.15rem; font-variant-caps: all-small-caps; letter-spacing: .1em; }
.side p { margin: .2rem 0 .5rem; font-size: .86rem; font-style: italic; color: var(--ink-2); }
.side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .12rem; font-size: .84rem; }
.side li b { font-variant-caps: all-small-caps; letter-spacing: .08em; }
.side canvas { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 108px; height: 96px; image-rendering: pixelated; }
.setrow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chips button { all: unset; cursor: pointer; border: 1px solid var(--ink); padding: .3rem .8rem; background: var(--linen-hi); font-variant-caps: all-small-caps; letter-spacing: .1em; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--linen-hi); }
/* campaign */
.camp-intro { font-style: italic; color: var(--ink-2); line-height: 1.55; margin: 0 0 1rem; max-width: 46rem; }
.camp-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: .4rem 0 .8rem; }
.camp-cont { border: 1.5px solid var(--ink); padding: .7rem .9rem; margin-bottom: .9rem; background: var(--linen-hi); display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.camp-cont p { margin: 0; font-style: italic; color: var(--ink-2); }
/* ---- the war map and the briefing, Ultimate General style: dark lamp-lit panels around a sepia map (2026-10-04) */
#war, #brief, #hist, #army, #atlas { --d-bg: #1b1713; --d-panel: rgba(30, 25, 20, .94); --d-line: #8a7148; --d-text: #e8dcc0; --d-dim: #b9a989; --d-gold: #d9b56a;
  padding: .6rem; box-sizing: border-box; align-items: stretch; color: var(--d-text);
  background: radial-gradient(ellipse at 50% 40%, #3a2a20 0%, #1b1713 65%, #0f0c0a 100%); }
.panel-d { background: var(--d-panel); border: 1px solid var(--d-line); box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 6px 24px rgba(0,0,0,.5); padding: .8rem .9rem; }
#war .btn, #brief .btn, #hist .btn, #army .btn, #atlas .btn { background: #2b241d; color: var(--d-text); border-color: var(--d-line); }
#war .btn:hover, #brief .btn:hover, #hist .btn:hover, #army .btn:hover, #atlas .btn:hover { background: #3a3027; }
#war .btn.primary, #brief .btn.primary, #hist .btn.primary, #army .btn.primary, #atlas .btn.primary { background: linear-gradient(#b8913f, #8a6a2a); color: #1b1713; border-color: #e0c27a; font-weight: 700; }
#war .btn.primary:disabled, #brief .btn.primary:disabled, #hist .btn.primary:disabled, #army .btn.primary:disabled, #atlas .btn.primary:disabled { background: #3a3027; color: var(--d-dim); border-color: var(--d-line); cursor: progress; }
#war .btn.quiet, #brief .btn.quiet, #hist .btn.quiet, #army .btn.quiet, #atlas .btn.quiet { background: transparent; border-color: transparent; color: var(--d-dim); font-size: .85rem; text-decoration: underline; text-underline-offset: .2em; }
.btn.start { min-height: 2.8rem; font-size: 1.15rem; font-variant-caps: all-small-caps; letter-spacing: .14em; }
.war-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: .7rem; width: 100%; height: 100%; max-width: 96rem; margin: 0 auto; }
.war-map { position: relative; padding: .35rem; display: flex; align-items: center; justify-content: center; min-height: 0;
  background: #2a211a; border: 1px solid var(--d-line); box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.war-map svg { width: 100%; height: 100%; max-height: calc(100vh - 4.4rem); display: block; }
.war-side { position: relative; overflow: auto; max-height: calc(100vh - 3.6rem); display: flex; flex-direction: column; gap: .6rem; background: transparent; border: 0; padding: 0; }
.war-side .intel, .war-side .bcard { background: var(--d-panel); border: 1px solid var(--d-line); box-shadow: inset 0 0 0 3px rgba(0,0,0,.35); padding: .65rem .8rem; }
.war-side .ih { text-align: center; font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--d-gold); font-weight: 700; margin-bottom: .35rem; }
.war-side .ig { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; font-size: .88rem; }
.war-side .ig span { color: var(--d-dim); }
#war b, #brief b, #hist b, #army b, #atlas b, #war h4 + .day { color: var(--d-text); }
.war-side .ig b { font-weight: 700; }
.war-side .bt { display: flex; gap: .6rem; align-items: center; }
.war-side .bs { width: 2.4rem; height: 2.4rem; flex: none; }
.war-side h4 { margin: 0; font-variant-caps: all-small-caps; letter-spacing: .08em; font-size: 1.25rem; color: var(--d-gold); }
.war-side .day { font-size: .82rem; color: var(--d-dim); font-style: italic; }
.war-side p { margin: .5rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--d-text); }
.war-side .stakes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin: .7rem 0 .6rem; text-align: center; }
.war-side .stakes div { border: 1px solid rgba(138,113,72,.6); padding: .3rem .2rem; display: flex; flex-direction: column; }
.war-side .stakes .h { font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--d-gold); font-size: .85rem; }
.war-side .stakes b { font-size: 1.1rem; font-variant-numeric: lining-nums tabular-nums; }
.war-side .stakes small { font-size: .68rem; color: var(--d-dim); line-height: 1.2; }
.war-side .start { width: 100%; }
.war-side .res { font-style: italic; color: var(--d-dim); }
.war-side .res.won { color: #9ec2ea; } .war-side .res.lost { color: #f09a7c; }
.war-side .foot { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; }
.war-side .foot .btn { flex: 1; min-height: 2.2rem; padding: .2rem .6rem; font-size: .9rem; }
/* the briefing */
.brief-wrap { display: grid; grid-template-columns: 19rem minmax(0, 1fr) 17rem; gap: .8rem; width: 100%; height: 100%; max-width: 100rem; margin: 0 auto; }
.brief-text { overflow: auto; }
.brief-text h2 { margin: 0; font-size: 1.9rem; line-height: 1.1; color: var(--d-gold); font-weight: 700; }
.brief-text .day { font-size: 1.05rem; text-align: center; margin: .3rem 0 .8rem; color: var(--d-text); }
.brief-text .body p { font-size: .9rem; line-height: 1.55; margin: 0 0 .7rem; color: var(--d-text); }
.brief-text .goal { color: var(--d-gold) !important; font-style: italic; }
.brief-mid { display: flex; flex-direction: column; gap: 0; min-height: 0; justify-content: flex-start; }
/* (2026-10-06) the objectives over the briefing map */
.brief-obj { text-align: center; padding: .2rem 0 .9rem; }
.brief-obj h2 { margin: 0 0 .35rem; font-size: 2.3rem; line-height: 1.05; color: var(--d-gold); font-weight: 700; letter-spacing: .08em; }
.brief-obj ul { list-style: none; margin: 0; padding: 0; }
.brief-obj li { font-size: 1.12rem; line-height: 1.45; color: var(--d-text); }
.army-bar { display: flex; align-items: stretch; justify-content: center; gap: 0; background: var(--d-panel); border: 1px solid var(--d-line); min-height: 3rem; }
.army-bar .t { writing-mode: horizontal-tb; align-self: center; padding: 0 .8rem; font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--d-gold); font-weight: 700; }
.army-bar .n { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .25rem .7rem; border-left: 1px solid rgba(138,113,72,.5); }
.army-bar .n b { font-size: 1rem; font-variant-numeric: lining-nums tabular-nums; }
.army-bar .n.sk b { font-size: .78rem; max-width: 15rem; text-align: center; line-height: 1.2; }
.army-bar .n small { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--d-dim); }
.brief-map { background: #2a211a; border-left: 1px solid var(--d-line); border-right: 1px solid var(--d-line); padding: .4rem; display: flex; justify-content: center; min-height: 0; }
.brief-map canvas { width: 100%; height: auto; max-height: calc(100vh - 19rem); object-fit: contain; display: block; }
.brief-forces { display: flex; flex-direction: column; gap: .4rem; overflow: auto; }
.brief-forces h3 { margin: 0 0 .2rem; text-align: center; font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--d-gold); }
.brief-forces .fr { display: flex; align-items: center; gap: .5rem; border: 1px solid rgba(138,113,72,.55); background: rgba(0,0,0,.18); padding: .25rem .4rem; }
.brief-forces .fr img { width: 2.4rem; height: 2.4rem; image-rendering: pixelated; flex: none; background: #3a3027; }
.brief-forces .fr div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.brief-forces .fr b { font-size: .88rem; }
.brief-forces .fr small { font-size: .72rem; color: var(--d-dim); }
.brief-forces kbd { font-size: .7rem; color: var(--d-dim); border: 1px solid var(--d-line); padding: 0 .3rem; }
.brief-forces .grow { flex: 1; }
@media (max-width: 1100px), (max-height: 600px) { .brief-wrap { grid-template-columns: 1fr; height: auto; } #brief { overflow: auto; } .brief-text { max-height: none; } .brief-map canvas { max-height: 85vh; width: auto; max-width: 100%; } .army-bar { flex-wrap: wrap; } .brief-forces { overflow: visible; } }
.ter { cursor: pointer; transition: fill-opacity .15s; }
.ter:hover { fill-opacity: .55; }
.ter.target { stroke-dasharray: 7 4; animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .ter.target { animation: none; } }
@media (max-width: 900px) { .war-wrap { grid-template-columns: 1fr; height: auto; } .war-map svg { max-height: 60vh; } .war-side { max-height: none; } #war { overflow: auto; } }
/* save and load */
.saves-sheet { width: min(52rem, 96vw) !important; }
.saves-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; min-height: 16rem; }
.saves-list { list-style: none; margin: 0; padding: 0; border: 1.5px solid var(--ink); background: var(--linen-hi); max-height: 22rem; overflow: auto; }
.saves-list li { padding: .45rem .7rem; border-bottom: 1px solid rgba(30, 34, 38, .2); cursor: pointer; display: grid; gap: .05rem; }
.saves-list li b { font-weight: 700; }
.saves-list li small { color: var(--ink-3); font-style: italic; }
.saves-list li[aria-selected="true"] { background: var(--ink); color: var(--linen-hi); }
.saves-list li[aria-selected="true"] small { color: var(--linen-lo); }
.saves-list .empty { cursor: default; font-style: italic; color: var(--ink-3); }
.saves-info { font-size: .9rem; line-height: 1.55; }
.saves-info dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0; }
.saves-info dt { font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 700; }
.saves-info dd { margin: 0; }
.saves-name { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; margin-top: .9rem; }
.saves-name input { font: inherit; padding: .35rem .5rem; border: 1.5px solid var(--ink); background: var(--linen-hi); color: var(--ink); }
@media (max-width: 700px) { .saves-grid, .camp-row { grid-template-columns: 1fr; } }
.row .grow { flex: 1; }
.howto { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem 1.6rem; }
.sign { display: grid; grid-template-columns: 2.6rem 1fr; gap: .6rem; align-items: start; padding: .4rem 0; border-top: 1px solid rgba(30, 34, 38, .25); }
.sign canvas, .sign svg.big { width: 2.6rem; height: 2.6rem; }
.sign svg.big { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sign h4 { margin: 0; font-size: .95rem; font-variant-caps: all-small-caps; letter-spacing: .08em; }
.sign p { margin: .1rem 0 0; font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.keys { grid-column: 1 / -1; font-size: .84rem; font-style: italic; color: var(--ink-2); margin: .6rem 0 0; line-height: 1.6; }
kbd { font-family: var(--font); font-style: normal; font-weight: 700; border: 1px solid var(--ink); padding: 0 .3em; font-size: .78rem; background: var(--linen-hi); }

#modal { position: absolute; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; background: rgba(20, 24, 28, .45); padding: 1rem; }
#modal .sheet { position: relative; width: min(26rem, 92vw); text-align: center; padding: 1.2rem 1.4rem 1.3rem; outline-offset: -7px; border-width: 2px; }
#modal h2 { justify-content: center; font-size: 1.3rem; color: var(--ink); }
#modal p { margin: .3rem 0 .8rem; font-style: italic; color: var(--ink-2); }
#modal .stack { display: flex; flex-direction: column; gap: .45rem; }
.tally { display: grid; grid-template-columns: 1fr auto auto; gap: .2rem .9rem; text-align: left; margin: .4rem 0 1rem; font-size: .9rem; }
.tally .h { font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--ink-3); }
.tally .n { font-variant-numeric: lining-nums tabular-nums; text-align: right; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 900px) {
  html { font-size: 13px; }
  #roll { top: 5.4rem; width: 13.5rem; }
  #register { left: 13.6rem; transform: none; bottom: .6rem; right: .6rem; min-width: 0; max-width: none; }
  #mini { width: 11rem; }
  #notes { top: 3.6rem; max-width: 14rem; }
  .howto, .sides, .setrow { grid-template-columns: 1fr; }
}
@media (max-width: 640px), (max-height: 460px) {
  #roll { display: none; }
  #roll.open { display: block; left: .4rem; top: 3.6rem; bottom: auto; z-index: 15; }
  #register { left: .4rem; right: .4rem; bottom: .4rem; }
  #sheetmap { display: none; }
  .scale-mid { display: none; }
  #stores { column-gap: .6rem; }
  .pop { display: none; }
  .store i { display: none; }
  .store b { font-size: 1.05rem; }
  #stores { padding: .35rem .55rem .4rem; }
  #scale { left: auto; right: 6.1rem; width: min(44vw, 24rem); }
  #notes li:nth-child(n+4) { display: none; }
  #notes { top: 3.4rem; }
}
@media (max-height: 460px) {
  .cartouche { padding: 1rem 1.4rem; }
  .cart-sub { margin-bottom: .6rem; }
  .menu-buttons { --vm-gap: .3rem; }
  .vm-menu .btn { min-height: 2.2rem; padding-block: .15rem; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bar i, #notes li, #hud .sheet, #hud .card, #hud .tool { transition: none; }
}
@media (max-height: 460px) { .cartouche::before, .cartouche::after { display: none; } }

/* a press that went through: the button greys for a quarter second */
.pressed, .stamp.pressed, .rollrow.pressed { background: #a9ada6 !important; color: var(--ink) !important; transform: translateY(1px); transition: none; }
.scale-bars .tnum sup.drain { font-size: .62rem; font-weight: 700; color: var(--lakota); margin-left: .15rem; letter-spacing: .02em; vertical-align: super; }

/* ---------------------------------------------------------------- squad cards (one per squad you field) */
/* the panels are solid (2026-10-04: "Don't make the UI's see through anymore") */
#cards { position: absolute; left: 17rem; right: .6rem; bottom: 0; display: flex; justify-content: center; gap: .35rem;
  overflow-x: auto; scrollbar-width: none; padding: .7rem .6rem .55rem; pointer-events: none; }
#cards::-webkit-scrollbar { display: none; }
/* a finger can scroll the card row sideways; an upward drag carries the squad onto the field (2026-10-04) */
#cards { touch-action: pan-x; }
#hud.has-cards #register { bottom: 5.6rem; }
.card { all: unset; pointer-events: auto; box-sizing: border-box; position: relative; flex: none; width: 3.9rem; height: 4.5rem; cursor: pointer;
  display: grid; grid-template-rows: 2.2rem auto auto; justify-items: center; align-content: start; padding: .15rem .2rem .25rem;
  background-color: var(--linen-hi); border: 1px solid var(--ink); box-shadow: inset 0 0 0 2px var(--linen-hi), inset 0 0 0 3px rgba(30,34,38,.35); }
.card .pic { width: 2.2rem; height: 2.2rem; image-rendering: pixelated; }
.card .rk { position: absolute; top: .15rem; right: .15rem; }
.card .rk .rank svg { width: .75rem; height: .85rem; }
.card .rk .rank.lk svg { width: .7rem; height: .8rem; }
.card .nm { font-size: .64rem; font-variant-caps: all-small-caps; letter-spacing: .05em; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.card .hp { width: 100%; height: .32rem; margin-top: .18rem; border: 1px solid var(--ink); background: var(--linen); position: relative; }
/* health: blue, then yellow at 40%, red at 20% */
.card .hp i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--army); }
.card.hp-mid .hp i { background: #e0b234; }
.card.hp-low .hp i { background: #c8321e; }
.card .ct { position: absolute; top: .1rem; left: .2rem; font-size: .6rem; font-variant-numeric: lining-nums tabular-nums; color: var(--ink-2); }
.card.sel { background-color: #d5dfe8; box-shadow: inset 0 0 0 2px var(--army); }
.card.lk.sel { background-color: #f0dcd2; box-shadow: inset 0 0 0 2px var(--lakota); }
/* under fire: a red glow behind the card */
.card.fire { box-shadow: 0 0 6px 2px rgba(214, 52, 28, .9), 0 0 14px 4px rgba(214, 52, 28, .45), inset 0 0 0 2px var(--linen-hi), inset 0 0 0 3px rgba(30,34,38,.35);
  animation: cardfire .9s ease-in-out infinite alternate; }
.card.fire.sel { box-shadow: 0 0 6px 2px rgba(214, 52, 28, .9), 0 0 14px 4px rgba(214, 52, 28, .45), inset 0 0 0 2px var(--army); }
@keyframes cardfire { from { filter: none; } to { filter: drop-shadow(0 0 3px rgba(214, 52, 28, .8)); } }
@media (prefers-reduced-motion: reduce) { .card.fire { animation: none; } }
.card.slain, .card.slain.fire { background: #c8321e; box-shadow: 0 0 8px 3px rgba(214, 52, 28, .85), inset 0 0 0 2px #e35a3e; }
.card.slain .nm, .card.slain .ct { color: #fff; }
.card .skull { position: absolute; left: 50%; top: .2rem; width: 2rem; height: 2rem; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.card .skull svg { width: 100%; height: 100%; }
.card.back { opacity: .62; }
.card.rest .ct::after { content: " \2022"; color: var(--army); }
.card:hover { background-color: #e3e8ee; }
.card:focus-visible { outline: 2px solid var(--army); outline-offset: 1px; }
@media (max-width: 900px) {
  #cards { left: 12.4rem; right: .6rem; justify-content: flex-start; }
  #hud.has-cards #register { bottom: 5.4rem; }
}
@media (max-width: 640px), (max-height: 460px) {
  #cards { left: .4rem; right: .4rem; bottom: 0; padding: .55rem .4rem .35rem; }
  .card { width: 3.2rem; height: 3.6rem; grid-template-rows: 1.7rem auto auto; }
  .card .pic { width: 1.7rem; height: 1.7rem; }
  #hud.has-cards #register { bottom: 4.3rem; }
}

/* the main menu: the choices alone, no notes under them (2026-10-04) */
#mainMenu .vm-sub { display: none; }

/* ---- one long bar across the top (2026-10-04): stores left, the scale of resolve in the middle, camp and pause right */
#topbar { left: .6rem; right: .6rem; top: .6rem; display: flex; align-items: center; gap: 1.1rem; padding: .35rem .55rem .35rem .8rem; }
#topbar #stores, #topbar #scale { position: static; transform: none; left: auto; right: auto; top: auto; border: 0; outline: 0; box-shadow: none; background: none; padding: 0; }
#topbar #stores { display: flex; align-items: center; gap: .9rem; flex: none; }
/* commanders' portraits: small in the top bar, larger on the briefing bars (2026-10-04) */
.cmdr-top { width: 2.6rem; height: 2.6rem; flex: none; image-rendering: pixelated; border: 1.5px solid var(--ink); margin: -.15rem -.4rem -.15rem -.35rem; }
.army-bar .cmdr { width: 3.6rem; height: 3.6rem; align-self: center; image-rendering: pixelated; border: 1px solid var(--d-line); margin: .3rem 0 .3rem .4rem; }
#topbar #stores h2 { margin: 0; }
#topbar .pop { border: 0; margin: 0; padding: 0 0 0 .7rem; border-left: 1px solid rgba(30, 34, 38, .3); }
#topbar #scale { flex: 1; min-width: 0; max-width: 40rem; margin: 0 auto; width: auto; }
#topbar #corner { position: static; flex: none; }
#topbar .tool { box-shadow: none; }
#notes { top: 4.3rem; }
/* the camp's muster roll is a small box that opens beside the camp flag */
#hud #roll { top: auto; z-index: 14; width: 16.5rem; }
#hud #roll.shut { display: none; }
#hud #roll:not(.shut) { display: block; }
#roll h2 .x { all: unset; margin-left: auto; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 .2rem; color: var(--ink-2); }
#roll h2 .x:hover { color: var(--ink); }
@media (max-width: 900px) {
  #topbar { gap: .6rem; padding: .3rem .45rem; }
  #topbar #stores h2, #topbar .pop { display: none; }
  #topbar .scale-mid { display: none; }
}
@media (max-width: 640px), (max-height: 460px) {
  #topbar .store i { display: none; }
  #topbar .store b { font-size: 1rem; }
  #notes { top: 3.6rem; }
}

/* the side cards (2026-10-04): the side's flag faint behind each card; the one you pick turns darker and glows */
.side { background-repeat: no-repeat; transition: box-shadow .2s ease-out, background-color .2s ease-out; }
.side.us { background-image: var(--flag, none), linear-gradient(var(--army-wash), var(--army-wash)); background-position: right 1.2rem center, 0 0; background-size: auto 78%, auto; }
.side.lk { background-image: var(--flag, none), linear-gradient(var(--lakota-wash), var(--lakota-wash)); background-position: right 1.2rem center, 0 0; background-size: auto 78%, auto; }
.side[aria-pressed="false"] { opacity: .78; }
.side[aria-pressed="false"]:hover { opacity: 1; }
.side.us[aria-pressed="true"] { background-color: #aebfcd; box-shadow: 0 0 0 1px var(--ink), 0 0 22px 4px rgba(47, 95, 138, .45); outline: 2.5px solid var(--ink); outline-offset: 3px; }
.side.lk[aria-pressed="true"] { background-color: #d6b6a4; box-shadow: 0 0 0 1px var(--ink), 0 0 22px 4px rgba(var(--lk-rgb), .45); outline: 2.5px solid var(--ink); outline-offset: 3px; }
/* the big sheets: a solid double rule that nothing scrolls across (content scrolls inside it); Skirmish fills the screen */
.sheet.big { outline: 0; border: 7px double var(--ink); }
#setup { padding: .6rem; }

/* New Game choices: the same cartouche as the main menu */
#newgame .ng { min-width: min(24rem, 92vw); }
#newgame .ng-title { font-size: 2.2rem; margin-bottom: .6rem; }
#newgame .ng-list, #cmode .ng-list { display: flex; flex-direction: column; gap: .55rem; }
#newgame .ng-list .btn, #cmode .ng-list .btn { justify-content: center; }
/* the tutorial's instruction card, under the top bar */
#tut { top: 4.4rem; left: 50%; transform: translateX(-50%); width: min(30rem, 92vw); z-index: 13; padding: .6rem .9rem .55rem; }
#tut .tut-n { font-size: .74rem; font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--ink-3); }
#tut p { margin: .15rem 0 .45rem; font-size: .98rem; line-height: 1.45; }
#tut .tut-acts { display: flex; gap: .5rem; justify-content: flex-end; }
#tut .btn { min-height: 2rem; padding: .15rem .8rem; font-size: .88rem; }
#tut .btn.quiet { background: none; border-color: transparent; text-decoration: underline; text-underline-offset: .2em; color: var(--ink-2); }

/* ---- the bottom bar (2026-10-04): map left, your squads in the middle, the selected company and its skills right */
/* the bar runs edge to edge along the bottom and the battlefield ends at its top edge, so no map lies under it
   (2026-10-04: "the solid UI at the bottom should end at the map"); the map sheet is bigger */
#app { --bar: 11rem; }
#app:has(#hud:not([hidden])) #view { bottom: var(--bar); height: calc(100% - var(--bar)); }
#bottombar { left: 0; right: 0; bottom: 0; height: var(--bar); border-width: 1.5px 0 0; outline: 0; box-shadow: 0 -3px 10px rgba(18, 22, 26, .25); display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(19rem, 31rem);
  gap: .8rem; padding: .45rem .6rem; align-items: stretch; }
#bottombar #sheetmap, #bottombar #register, #bottombar #cards { position: static; transform: none; left: auto; right: auto; bottom: auto; border: 0; outline: 0;
  box-shadow: none; background: none; min-width: 0; max-width: none; margin: 0; }
#bottombar #sheetmap { padding: 0; display: flex; flex-direction: column; min-height: 0; }
/* the sheet keeps the field's shape: a fixed height, the width follows (the game sets aspect-ratio per map) */
#bottombar #mini { height: 8.5rem; width: auto; max-width: 26rem; flex: none; image-rendering: auto; }
#bottombar #sheetmap figcaption { margin-top: .15rem; white-space: nowrap; overflow: hidden; }
#bottombar #register { border-left: 1px solid rgba(30, 34, 38, .3); padding: 0 .2rem 0 .8rem; overflow: hidden; }
#bottombar #register .empty { height: 100%; display: grid; place-items: center; font-style: italic; color: var(--ink-3); font-size: .9rem; }
#bottombar .reg-body { grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: start; }
#bottombar .men { flex-wrap: wrap; gap: .14rem; max-width: 15rem; }
#bottombar .man { width: .42rem; height: 1rem; }
#bottombar .reg-info { margin-top: .3rem; font-size: .8rem; }
#bottombar .reg-sp { display: block; margin: .2rem 0 0; font-size: .76rem; }
#bottombar .reg-sp span { display: inline; margin-right: .6rem; }
#bottombar .stamp { width: 3.7rem; min-height: 3.3rem; }
#bottombar .stamp .lb { font-size: .68rem; }
/* the squad cards: one row in the middle of the bar, our card pictures large; arrows when there are more than fit,
   Ctrl 1 to 9 makes a group (its number shows on the card) */
#cardRow { display: flex; align-items: stretch; gap: .25rem; min-width: 0; border-left: 1px solid rgba(30, 34, 38, .3); padding-left: .6rem; }
#bottombar #cards { position: static; padding: .1rem 0; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: safe center; gap: .35rem;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: 1; min-width: 0; }
.cardnav { all: unset; flex: none; width: 1.4rem; display: grid; place-items: center; cursor: pointer; font-size: 1.6rem; line-height: 1; color: var(--ink);
  border: 1.5px solid var(--ink); background: var(--linen-hi); align-self: center; height: 5.5rem; }
.cardnav:hover { background: #d5dfe8; }
#bottombar .card { width: 4.6rem; height: 7.9rem; display: grid; grid-template-rows: 5.5rem auto auto; justify-items: center; align-content: start; padding: .15rem .2rem .25rem; }
#bottombar .card .pic { width: 4.1rem; height: 4.9rem; object-fit: contain; object-position: bottom; margin-top: .45rem; }
#bottombar .card .nm { font-size: .7rem; margin-top: .1rem; }
#bottombar .card .ct { font-size: .66rem; }
#bottombar .card .grp { position: absolute; right: .2rem; bottom: 1.15rem; min-width: .8rem; height: .85rem; padding: 0 .15rem; box-sizing: border-box; display: grid; place-items: center;
  font-size: .62rem; font-weight: 700; color: var(--linen-hi); background: var(--ink); }
#bottombar .card .skull { top: 1.4rem; }
/* groups (2026-10-04): a group's cards stand together under a bar; tap the bar to select the group */
#bottombar #cards { align-items: flex-end; }
#cards, #cards * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cgroup { flex: none; display: flex; flex-direction: column; gap: .15rem; }
.gcards { display: flex; gap: .35rem; }
.gbar { all: unset; pointer-events: auto; box-sizing: border-box; cursor: pointer; text-align: center; height: 1.15rem; line-height: 1.05rem;
  font-size: .68rem; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--linen-hi); background: var(--ink-2); border: 1.5px solid var(--ink); }
.gbar:hover { background: var(--ink); }
.gbar.sel { background: var(--army); }
.gbar.lk.sel { background: var(--lakota); }
#gmenu { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: .2rem; min-width: 10rem; padding: .45rem .5rem .5rem; }
#gmenu[hidden] { display: none; }
#gmenu h4 { margin: 0 0 .15rem; font-size: .8rem; font-variant-caps: all-small-caps; letter-spacing: .1em; }
#gmenu button { all: unset; cursor: pointer; padding: .35rem .5rem; font-size: .85rem; border: 1px solid rgba(30,34,38,.35); background: var(--linen-hi); }
#gmenu button:hover, #gmenu button:active { background: #d5dfe8; }
#gmenu button[data-ga="close"] { font-style: italic; color: var(--ink-2); }
#hud.has-cards #register { bottom: auto; }
#notes { top: 4.3rem; }
/* global skills: small squares down the left side */
#globals { position: absolute; left: .6rem; top: calc((100% - var(--bar, 0rem)) / 2); transform: translateY(-50%); display: flex; flex-direction: column; gap: .35rem; }
.gsk { all: unset; box-sizing: border-box; position: relative; width: 3rem; height: 3rem; display: grid; place-items: center; cursor: pointer;
  background-color: var(--linen); background-image: var(--weave); border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -4px; box-shadow: var(--shadow); }
.gsk:hover { background-color: var(--linen-hi); }
.gsk svg { width: 1.6rem; height: 1.6rem; }
.gsk .k { position: absolute; top: .1rem; right: .25rem; font-size: .6rem; font-weight: 700; }
.gsk .cd { position: absolute; inset: 0; background: rgba(30, 34, 38, .55); transform-origin: bottom; pointer-events: none; }
.gsk[aria-disabled="true"] { color: var(--ink-3); }
.gsk.armed { background-color: rgba(var(--lk-rgb), .22); }
.gsk.cmd { border-top: 2px solid var(--d-gold); }
.gsk[hidden] { display: none; }
.hint.cmdpick { display: flex; gap: .5rem; align-items: flex-start; }
.hint.cmdpick img { width: 3.2rem; height: 3.2rem; border-radius: 4px; image-rendering: pixelated; flex: none; }
#hud #roll .rollrow.callin { display: none; }
@media (max-width: 900px) {
  #app { --bar: 8rem; }
  #bottombar { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  #cardRow { border-left: 0; padding-left: 0; }
  #bottombar #sheetmap { display: none; }
}
@media (max-width: 640px), (max-height: 460px) {
  #app { --bar: 7rem; }
  #bottombar { grid-template-columns: minmax(0, 1fr); padding: .3rem .45rem; }
  #bottombar .stamp { width: 3.1rem; min-height: 2.9rem; }
  #bottombar .stamp .lb { font-size: .6rem; }
  #bottombar .reg-head h3 { font-size: .92rem; }
  #bottombar.has-sel #cardRow { display: none; }
  #bottombar .card { width: 3.5rem; height: 5.7rem; grid-template-rows: 3.7rem auto auto; }
  #bottombar .card .pic { width: 3.1rem; height: 3.5rem; margin-top: .2rem; }
  #bottombar .card .skull { top: .6rem; }
  .cardnav { height: 3.8rem; }
  #bottombar #register { border-left: 0; padding-left: 0; }
  #bottombar:not(.has-sel) #register { display: none; }
  #globals { top: auto; bottom: calc(var(--bar) + .5rem); }
  .gsk { width: 2.5rem; height: 2.5rem; }
}
#bottombar .reg-left { min-width: 0; }
#bottombar .reg-head { margin-bottom: .1rem; }

/* vm-mute room (2026-10-04): the site-wide mute button from /assets/menu.js sits in the top right corner. */
#corner{right:calc(.6rem + 50px)}
#topbar{right:calc(.6rem + 50px)}
/* an upright phone (2026-10-11, bug test): the top bar's buttons wrap under the stores instead of running off under the
   mute button, and the scale of resolve takes its own row, so Pause (the only way to the menu on a phone) stays reachable */
@media (max-width: 560px) {
  #topbar { flex-wrap: wrap; row-gap: .25rem; }
  #topbar #corner { margin-left: auto; }
  #topbar #scale { order: 9; flex: 1 1 100%; max-width: none; }
  #hud #notes, #hud #prod { top: 9.6rem; }
  #hud #objLine { top: 9.2rem; }
}

/* squads being raised: a small box at the top left under the top bar */
#prod { left: .6rem; top: 4.2rem; padding: .3rem .35rem; display: flex; flex-direction: column; gap: .25rem; width: 11rem; z-index: 6; }
#prod .pq { all: unset; cursor: pointer; display: grid; grid-template-columns: 1.7rem 1fr; grid-template-rows: auto .32rem; column-gap: .35rem; align-items: center; }
#prod .pq img { grid-row: 1 / 3; width: 1.7rem; height: 1.7rem; image-rendering: pixelated; border: 1px solid var(--ink); background: var(--linen-hi); }
#prod .pn { font-size: .74rem; font-variant-caps: all-small-caps; letter-spacing: .05em; display: flex; justify-content: space-between; gap: .3rem; }
#prod .pn small { font-variant-caps: normal; font-style: italic; color: var(--ink-2); }
#prod .pb { height: .32rem; border: 1px solid var(--ink); background: var(--linen); position: relative; }
#prod .pb i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--army); }
#hud.lk-side #prod .pb i { background: var(--lakota); }
#prod .pq:hover .pn { text-decoration: line-through; }
@media (max-width: 640px), (max-height: 460px) { #prod { top: 3.4rem; width: 9rem; } }

/* colour-blind colours (Settings): the Lakota & Cheyenne in orange instead of vermilion */
:root.cb { --lakota: #c8780f; --lk-rgb: 222, 132, 24; }
:root.cb .card.lk.sel { background-color: #f6e6c8; }

/* a squad wiped out: its card stays a moment, dark red with the skull */
#bottombar .card.gone { background: #7a1c12; box-shadow: inset 0 0 0 2px #c8321e; cursor: default; }
#bottombar .card.gone .pic { filter: grayscale(1) brightness(.6); }
#bottombar .card.gone .nm, #bottombar .card.gone .ct { color: #fff; }
#scale .dead { font-style: italic; font-size: .72rem; color: var(--ink-2); letter-spacing: .02em; text-transform: none; font-variant-caps: normal; }

/* ---- modes, company sizes, the army screen and the historical battles (2026-10-05) */
.skbtn { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; border: 1px solid var(--ink); background: var(--linen-hi); padding: .25rem .6rem; font-size: .92rem; }
.skbtn:hover { background: #d5dfe8; }
.sizes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; margin-top: .6rem; }
.szrow { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; font-size: .86rem; padding: .12rem 0; }
.szrow select { font: inherit; }
.stack.row2 { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .8rem; }
#modal .sheet:has(.sizes-grid) { width: min(44rem, 94vw); }
.rollnote { margin: .3rem .2rem; font-style: italic; font-size: .86rem; line-height: 1.45; color: var(--ink-2); max-width: 15rem; }
#objLine { position: absolute; left: 50%; top: 3.85rem; transform: translateX(-50%); background: var(--linen-hi); border: 1px solid var(--ink); box-shadow: var(--shadow);
  padding: .2rem .8rem; font-size: .84rem; white-space: nowrap; pointer-events: none; z-index: 5; }
#objLine span { font-style: italic; color: var(--ink-3); margin-left: .5rem; }
.cm-list .cm-note { margin: -.1rem 0 .55rem; font-size: .84rem; font-style: italic; color: var(--ink-2); line-height: 1.4; }
.hist-wrap { grid-template-columns: minmax(0, 22rem) minmax(0, 30rem); justify-content: center; }
.hist-list { background: var(--d-panel); border: 1px solid var(--d-line); padding: .65rem .7rem; overflow: auto; max-height: calc(100vh - 3.6rem); display: flex; flex-direction: column; gap: .3rem; }
.hist-list .ih, #histSide .ih { text-align: center; font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--d-gold); font-weight: 700; margin: .2rem 0 .35rem; }
.hrow { all: unset; cursor: pointer; display: grid; grid-template-columns: 6.6rem 1fr auto auto; gap: .4rem; align-items: baseline; padding: .45rem .55rem; border: 1px solid rgba(138,113,72,.45); color: var(--d-text); }
.hrow:hover { background: rgba(217,181,106,.08); }
.hrow.on { border-color: var(--d-gold); background: rgba(217,181,106,.14); }
.hrow .hd { font-size: .78rem; font-style: italic; color: var(--d-dim); }
.hrow b { font-variant-caps: all-small-caps; letter-spacing: .06em; font-size: 1.05rem; }
.hm { font-size: .66rem; border: 1px solid; padding: 0 .3rem; font-variant-caps: all-small-caps; letter-spacing: .08em; }
.hm.us { color: #9ec2ea; } .hm.lk { color: #f09a7c; }
.chips.dark button { border-color: var(--d-line); background: #2b241d; color: var(--d-text); }
.chips.dark button[aria-pressed="true"] { background: var(--d-gold); color: #1b1713; }
.hcmd { display: flex; gap: .6rem; align-items: center; margin: .6rem 0 .2rem; }
.hcmd img { width: 3.2rem; height: 3.2rem; image-rendering: pixelated; border: 1px solid var(--d-line); }
.hcmd small { display: block; color: var(--d-dim); font-style: italic; font-size: .8rem; }
.hgoal { color: var(--d-gold) !important; }
.hf { font-size: .84rem !important; }
.hf span { display: block; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--d-gold); font-size: .85rem; }
.war-side .btn.sm.wide { width: 100%; margin-top: .5rem; min-height: 2.1rem; font-size: .92rem; }
.lostlist { text-align: left; }
/* the army screen as cards (2026-10-05): recruiting cards on the table, the army in a row at the bottom */
#army { align-items: safe center; }
.army-wrap { width: min(84rem, 100%); display: flex; flex-direction: column; gap: .65rem; }
.army-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem .2rem .45rem; border-bottom: 1px solid var(--d-line); }
.army-head h2 { margin: 0; color: var(--d-gold); font-size: 1.5rem; font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 700; }
.army-gold { display: inline-flex; align-items: center; gap: .45rem; color: var(--d-dim); font-size: 1rem; }
.army-gold .coin { width: 1.45rem; height: 1.45rem; }
.army-gold b { font-size: 1.7rem; color: var(--d-gold) !important; font-variant-numeric: lining-nums tabular-nums; line-height: 1; }
.army-note { margin: -.25rem 0 0; font-style: italic; font-size: .86rem; color: var(--d-dim); max-width: 70ch; }
.army-shop { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; padding: .4rem 0 .2rem; }
.rcard { --wash: var(--army-wash); position: relative; box-sizing: border-box; width: 10.6rem; display: flex; flex-direction: column; align-items: stretch;
  background-color: var(--linen); background-image: var(--weave); color: var(--ink); border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -5px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .5); padding: .55rem .55rem .55rem; transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s; }
#army.lk .rcard, #army.lk .tcard { --wash: var(--lakota-wash); }
.rcard:hover { transform: translateY(-3px); box-shadow: 0 16px 28px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .5); }
.rc-pic { height: 12.4rem; display: grid; place-items: end center; background: linear-gradient(var(--wash), var(--wash)), var(--linen-hi); border: 1px solid rgba(30, 34, 38, .35); }
.rc-pic img { width: 164px; height: 196px; image-rendering: pixelated; }
.rc-pic { position: relative; }
.rc-pic img.gunov { position: absolute; right: .2rem; bottom: .2rem; width: 88px; height: 88px; filter: drop-shadow(0 2px 1px rgba(30, 34, 38, .35)); }
.rcard h4 { margin: .45rem 0 0; font-size: 1.02rem; line-height: 1.1; font-variant-caps: all-small-caps; letter-spacing: .06em; text-align: center; text-wrap: balance; min-height: 2.2em; display: grid; place-items: center; }
.rc-w { margin: .05rem 0 .4rem; font-size: .74rem; font-style: italic; color: var(--ink-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-size { margin-top: auto; display: grid; grid-template-columns: 1.9rem 1fr 1.9rem; align-items: center; border: 1px solid var(--ink); background: var(--linen-hi); margin-bottom: .4rem; }
.rc-size span { text-align: center; white-space: nowrap; font-size: .92rem; font-variant-numeric: lining-nums tabular-nums; }
.rc-size button { all: unset; box-sizing: border-box; height: 1.9rem; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.rc-size button:first-child { border-right: 1px solid var(--ink); } .rc-size button:last-child { border-left: 1px solid var(--ink); }
.rc-size button svg { width: .8rem; height: .8rem; }
.rc-size button:hover { background: var(--wash); }
.rc-size button:disabled { color: var(--ink-3); opacity: .45; cursor: default; background: none; }
.rc-buy { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .4rem .55rem;
  background: var(--ink); color: var(--linen-hi); border: 1px solid var(--ink); outline: 1px solid var(--linen); outline-offset: -4px; }
.rc-buy:hover { background: var(--army); }
#army.lk .rc-buy:hover { background: var(--lakota); }
.rc-p { display: inline-flex; align-items: center; gap: .3rem; font-size: 1rem; font-variant-numeric: lining-nums tabular-nums; color: #f0d79a; }
.rc-p .coin { width: 1rem; height: 1rem; }
.rc-a { font-variant-caps: all-small-caps; letter-spacing: .12em; font-size: .98rem; }
.rcard.cant { box-shadow: 0 6px 14px rgba(0, 0, 0, .4); }
.rcard.cant .rc-pic img { opacity: .55; filter: grayscale(.6); }
.rcard.cant .rc-buy { background: transparent; color: var(--ink-3); border-color: var(--ink-3); outline-color: transparent; cursor: not-allowed; }
.rcard.cant .rc-p { color: #a5402c; }
.army-tray { background: var(--d-panel); border: 1px solid var(--d-line); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35); padding: .5rem .7rem .6rem; }
.army-tray h3 { margin: 0 0 .4rem; font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--d-gold); font-size: 1.05rem; display: flex; gap: .7rem; align-items: baseline; }
.army-tray h3 small { font-variant-caps: normal; letter-spacing: 0; font-style: italic; color: var(--d-dim); font-size: .82rem; }
.tray-body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: .8rem; align-items: stretch; }
.tray-row { display: flex; gap: .4rem; overflow-x: auto; padding: .35rem .1rem .45rem; scrollbar-width: thin; scrollbar-color: var(--d-line) transparent; }
.tcard { all: unset; --wash: var(--army-wash); box-sizing: border-box; position: relative; flex: none; width: 4.6rem; height: 6.4rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background-color: var(--linen); background-image: linear-gradient(var(--wash), var(--wash)); border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -4px; padding: .2rem .25rem .3rem; color: var(--ink);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.tcard img { width: 41px; height: 49px; image-rendering: pixelated; margin-bottom: .1rem; }
.tcard img.gun { width: 44px; height: 44px; }
.tcard:hover { transform: translateY(-2px); }
.tcard.on { transform: translateY(-4px); outline: 2px solid var(--d-gold); outline-offset: 2px; }
.tcard:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 2px; }
.tc-n { position: absolute; top: .15rem; left: .25rem; font-size: .68rem; font-variant-numeric: lining-nums tabular-nums; color: var(--ink-2); }
.tc-rk { position: absolute; top: .15rem; right: .2rem; }
.tc-rk svg { width: .75rem; height: .85rem; }
.tc-nm { font-size: .66rem; font-variant-caps: all-small-caps; letter-spacing: .05em; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tc-bar { width: 100%; height: .3rem; margin-top: .2rem; border: 1px solid var(--ink); background: var(--linen-hi); position: relative; }
.tc-bar i { position: absolute; inset: 0 auto 0 0; background: var(--army); }
#army.lk .tc-bar i { background: var(--lakota); }
.tcard.short .tc-n { color: #a5402c; font-weight: 700; }
.tslot { flex: none; width: 4.6rem; height: 6.4rem; box-sizing: border-box; border: 1px dashed rgba(138, 113, 72, .45); }
.tcard.fresh { animation: enlist .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes enlist { from { transform: translateY(-2.6rem) scale(.86); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tcard.fresh { animation: none; } .rcard, .tcard { transition: none; } }
.tray-detail { border-left: 1px solid rgba(138, 113, 72, .5); padding-left: .8rem; display: flex; flex-direction: column; gap: .3rem; justify-content: center; }
.tray-detail h4 { margin: 0; color: var(--d-gold); font-variant-caps: all-small-caps; letter-spacing: .06em; font-size: 1.1rem; }
.td-line { margin: 0; font-size: .84rem; font-style: italic; color: var(--d-dim); }
.td-hint { margin: 0; font-size: .86rem; font-style: italic; color: var(--d-dim); }
.td-acts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.td-max { font-size: .8rem; font-style: italic; color: var(--d-dim); align-self: center; }
#army .btn.sm { min-height: 1.95rem; padding: .1rem .55rem; font-size: .86rem; letter-spacing: .06em; gap: .35rem; }
#army .btn.sm .gp { display: inline-flex; align-items: center; gap: .2rem; color: var(--d-gold); font-variant-numeric: lining-nums tabular-nums; }
#army .btn.sm .coin { width: .85rem; height: .85rem; }
#army .btn:disabled { opacity: .45; cursor: not-allowed; }
#army .btn.quiet { font-size: .8rem; }
.army-foot { display: flex; gap: .6rem; align-items: center; }
.army-foot .grow { flex: 1; }
.army-foot .start { min-width: 12rem; }
#objLine b.warn { color: #a5402c; }
/* (2026-10-09) the objective line under the scale: plain text over the field, no box (shown only while it carries a
   timer, a count, a warning or a mission's objective) */
#objLine { top: 4.35rem; background: none; border: 0; box-shadow: none; padding: .1rem .4rem; font-size: 1rem; color: #f6eedb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .75), 0 0 12px rgba(0, 0, 0, .45); }
#objLine b { font-weight: 700; }
#objLine b.warn { color: #ffb59e; }
#objLine .tm { font: 700 1.1rem/1 "Besley", Georgia, serif; color: #f3d98a; margin-left: .5rem; font-variant-numeric: tabular-nums; }
/* the objective in the middle of the screen as a battle (or a mission's step) begins */
#objCall { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 24vh;
  text-align: center; cursor: pointer; background: radial-gradient(ellipse at 50% 30%, rgba(18, 14, 10, .42), rgba(18, 14, 10, 0) 60%); }
#objCall[hidden] { display: none; }
#objCall .t { font: 700 1rem/1.2 "Besley", Georgia, serif; font-variant-caps: all-small-caps; letter-spacing: .14em; color: #e8dcc0; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
#objCall .o { margin: .35rem 1rem 0; max-width: 46rem; font: 700 clamp(1.5rem, 3.2vw, 2.4rem)/1.25 "Besley", Georgia, serif; color: #f6eedb;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .95), 0 0 18px rgba(0, 0, 0, .6); }
#objCall .hint { margin-top: .9rem; font-style: italic; font-size: .85rem; color: rgba(246, 238, 219, .78); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
#objCall.in .t, #objCall.in .o, #objCall.in .hint { animation: objcall-in .5s cubic-bezier(.16, 1, .3, 1) both; }
#objCall.in .o { animation-delay: .08s; } #objCall.in .hint { animation-delay: .5s; }
@keyframes objcall-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #objCall.in .t, #objCall.in .o, #objCall.in .hint { animation: none; } }
/* the compass beside the day dial: north is up the screen */
.tool.compass { cursor: default; color: var(--ink); }
.tool.compass svg { width: 2.05rem; height: 2.05rem; overflow: visible; }
.tool.compass .cr { fill: none; stroke: currentColor; stroke-width: 1.1; opacity: .55; }
.tool.compass .nn { fill: #a5402c; } .tool.compass .sn { fill: currentColor; opacity: .5; } .tool.compass .hub { fill: currentColor; }
.tool.compass text { font: 700 6.4px/1 "Besley", Georgia, serif; text-anchor: middle; fill: currentColor; }
.tool.compass .cn { fill: #a5402c; font-size: 7.4px; }
/* a mission's cut-scene: black bars, the speaker's line, Skip; the HUD steps aside */
#mScene { position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: space-between; pointer-events: auto; }
#mScene[hidden] { display: none; }
#mScene .lb { background: #0b0907; height: 12vh; min-height: 3.5rem; animation: lb-in .5s cubic-bezier(.16, 1, .3, 1) both; }
#mScene .lb.bot { display: flex; align-items: center; justify-content: center; padding: 0 1.5rem; }
@keyframes lb-in { from { height: 0; min-height: 0; } }
#mScene .cap { margin: 0; max-width: 52rem; text-align: center; font: 1.12rem/1.4 "Besley", Georgia, serif; color: #f1e8d4; }
#mScene .cap .who { font-variant-caps: all-small-caps; letter-spacing: .1em; color: #e3c27a; margin-right: .45rem; }
#mScene .skip { position: absolute; top: calc(12vh + .6rem); right: .8rem; font: italic .9rem "Besley", Georgia, serif; color: #f1e8d4; background: rgba(11, 9, 7, .6);
  border: 1px solid rgba(241, 232, 212, .5); padding: .3rem .8rem; cursor: pointer; }
#mScene .skip:hover { background: rgba(11, 9, 7, .85); }
#app.cine #hud > * { visibility: hidden; }
@media (max-width: 960px) { .army-head { padding-right: 3.8rem; } }
@media (max-width: 760px) {
  .sizes-grid { grid-template-columns: 1fr; }
  .tray-body { grid-template-columns: 1fr; } .tray-detail { border-left: 0; padding-left: 0; border-top: 1px solid rgba(138, 113, 72, .5); padding-top: .5rem; }
  .hist-wrap { grid-template-columns: 1fr; height: auto; }
  .hist-list, .hist-wrap .war-side { max-height: none; }
  #objLine { top: 4.4rem; font-size: .76rem; white-space: normal; width: max-content; max-width: 90vw; }
}
@media (max-width: 1240px) { .army-shop { gap: .55rem; } .rcard { width: 7.6rem; padding: .45rem; } .rc-pic { height: 6.6rem; } .rc-pic img { width: 82px; height: 98px; } .rc-pic img.gunov { width: 44px; height: 44px; } .rcard h4 { font-size: .9rem; } .rc-buy { padding: .35rem .4rem; } .rc-a { font-size: .86rem; } .rc-p { font-size: .9rem; } }
@media (max-height: 760px) and (min-width: 1241px) { .rc-pic { height: 6.8rem; } .rc-pic img { width: 82px; height: 98px; } .rc-pic img.gunov { width: 44px; height: 44px; } .rcard { width: 9rem; } }
@media (max-width: 960px) { .army-shop { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; scrollbar-color: var(--d-line) transparent; } .rcard { flex: none; } }
@media (max-width: 1240px) { .rc-size { grid-template-columns: 1.55rem 1fr 1.55rem; } .rc-size span { font-size: .8rem; } .rc-size button { height: 1.7rem; }
  .rc-buy { padding: .32rem .35rem; gap: .2rem; } .rc-p { font-size: .82rem; gap: .2rem; } .rc-p .coin { width: .8rem; height: .8rem; } .rc-a { font-size: .78rem; letter-spacing: .06em; } .rc-w { font-size: .68rem; } }
#fmenu { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: .2rem; width: 17rem; padding: .45rem .5rem .5rem; }
#fmenu[hidden] { display: none; }
#fmenu h4 { margin: 0 0 .15rem; font-size: .8rem; font-variant-caps: all-small-caps; letter-spacing: .1em; }
#fmenu button { all: unset; cursor: pointer; display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: center; padding: .35rem .5rem; border: 1px solid rgba(30,34,38,.35); background: var(--linen-hi); }
#fmenu button:hover, #fmenu button:active { background: #d5dfe8; }
#fmenu button[aria-pressed="true"] { background: var(--ink); color: var(--linen-hi); }
#fmenu button[aria-pressed="true"] small { color: var(--linen-lo); }
#fmenu svg { width: 1.6rem; height: 1.6rem; }
/* (2026-10-06) the wagon formations: their own heading, greyed out with no wagon near */
#fmenu h5 { margin: .3rem 0 0; font-size: .72rem; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--ink-3); }
#fmenu button[disabled] { cursor: default; opacity: .45; background: transparent; }
#fmenu button[disabled]:hover { background: transparent; }
#fmenu b { display: block; font-size: .86rem; font-variant-caps: all-small-caps; letter-spacing: .06em; }
#fmenu small { display: block; font-size: .72rem; font-style: italic; color: var(--ink-3); line-height: 1.3; }

/* ================================================================ 2026-10-05: the campaign map, the army in
   battalions (Ultimate General style), the menu's map pan and the campaign's chapters */

/* ---- the menu background: the live battle, then a pan across the campaign map */
.menu-pan { position: absolute; inset: 0; overflow: hidden; z-index: 0; opacity: 0; pointer-events: none; background: #1b1713;
  transition: opacity 2.4s cubic-bezier(.4, 0, .2, 1); }
.menu-pan.on { opacity: 1; }
.menu-pan-map { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.menu-pan-map img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.menu-pan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 24, 28, .62), rgba(20, 24, 28, .1) 58%), radial-gradient(ellipse at 70% 50%, transparent 40%, rgba(15, 12, 10, .55)); }
#menu > .cartouche { position: relative; z-index: 1; }
/* (2026-10-16) the "playing now" line sits at the foot of the menu banner, in the middle */
.cartouche .vim-live:not([hidden]) { display: flex; justify-content: center; margin: .85rem auto .15rem; font-style: italic; font-size: .95rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .menu-pan { transition: none; } }

/* ---- the campaign start: chapters */
.camp-ch { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .4rem; }
.camp-ch button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: .1rem; padding: .45rem .7rem; border: 1px solid var(--ink); background: var(--linen-hi); }
.camp-ch button b { font-variant-caps: all-small-caps; letter-spacing: .08em; font-size: 1.02rem; }
.camp-ch button span { font-size: .8rem; font-style: italic; color: var(--ink-3); }
.camp-ch button:hover { background: var(--linen); }
.camp-ch button[aria-checked="true"] { background: var(--ink); color: var(--linen-hi); }
.camp-ch button[aria-checked="true"] span { color: #c9c2b0; }
.camp-ch button:focus-visible { outline: 2px solid var(--army); outline-offset: 2px; }

/* ---- the campaign map */
#atlas { padding: 0; overflow: hidden; display: block; background: #15110e; }
.atlas-view { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; outline: none; }
.atlas-view.dragging { cursor: grabbing; }
.atlas-view:focus-visible { box-shadow: inset 0 0 0 2px var(--d-gold); }
.atlas-map { position: absolute; left: 0; top: 0; will-change: transform; }
.atlas-map img { display: block; width: 100%; height: 100%; image-rendering: pixelated; user-select: none; -webkit-user-drag: none; }
.atlas-pins { position: absolute; inset: 0; }
.atlas-pins .lm { position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); white-space: pre; text-align: center; pointer-events: none;
  font: italic 700 18px var(--font); letter-spacing: .04em; color: #2a1c12; line-height: 1;
  --halo: rgba(240, 232, 208, .97);
  text-shadow: 2px 0 0 var(--halo), -2px 0 0 var(--halo), 0 2px 0 var(--halo), 0 -2px 0 var(--halo), 1.5px 1.5px 0 var(--halo), -1.5px 1.5px 0 var(--halo),
    1.5px -1.5px 0 var(--halo), -1.5px -1.5px 0 var(--halo), 0 0 6px rgba(240, 232, 208, .9); }
/* the place names by kind (2026-10-05): survey-map lettering, territories in spaced capitals, water in blue italic */
.atlas-pins .lm.k-terr { font: 700 20px var(--font); letter-spacing: .14em; text-transform: uppercase; color: #8a2a18; line-height: 1.1; }
.atlas-pins .lm.k-mtn { font: 700 19px var(--font); letter-spacing: .08em; color: #241810; }
.atlas-pins .lm.k-wood { font: italic 700 18px var(--font); letter-spacing: .03em; color: #1c3a14; }
.atlas-pins .lm.k-river { font: italic 700 17px var(--font); letter-spacing: .03em; color: #143c66; }
.atlas-pins .lm.k-land { font: italic 700 17px var(--font); letter-spacing: .02em; color: #4a2416; }
.pin { all: unset; position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); cursor: pointer; display: grid; place-items: center; z-index: 1; }
.pin svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
.pin .pd { fill: #5a5048; stroke: #e8dcc0; stroke-width: 1.4; }
.pin .ps { stroke: #e8dcc0; stroke-width: 2.1; stroke-linecap: square; fill: none; }
.pin .pg { stroke: #c9a96a; stroke-width: 2.2; }
.pin.major { width: 34px; height: 34px; z-index: 4; }
.pin.major .pd { fill: #9a2b20; stroke-width: 1.8; }
.pin.major::before { content: ""; position: absolute; inset: -7px; border: 2px solid rgba(244, 231, 196, .85); border-radius: 50%; animation: atlas-call 1.8s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes atlas-call { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.pin.side { width: 26px; height: 26px; z-index: 3; }
.pin.side .pd { fill: #b5762a; }
.pin.won.us .pd { fill: #2f5f8a; } .pin.won.lk .pd { fill: #8a2f22; }
.pin.won, .pin.lost { width: 22px; height: 22px; z-index: 2; }
.pin.passed { width: 14px; height: 14px; }
.pin.passed .pd { fill: rgba(42, 33, 26, .55); stroke-dasharray: 2 2; }
.pin.hist { width: 15px; height: 15px; }
.pin.k-massacre { width: 18px; height: 18px; }
.pin.k-massacre .pd { fill: #141110; stroke: #e8dcc0; }
.pin.k-raid .pd { fill: #c2561e; stroke: #2a211a; stroke-width: 1.1; }
.pin.k-event .pd, .pin.k-incident .pd { fill: #2a211a; stroke: #e8dcc0; stroke-width: 1.2; }
.pin:hover svg, .pin:focus-visible svg { transform: scale(1.18); }
.pin svg { transition: transform .18s cubic-bezier(.16, 1, .3, 1); }
.pin:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 4px; border-radius: 50%; }
.pin.on::after { content: ""; position: absolute; inset: -6px; border: 2px dashed #f4e7c4; border-radius: 50%; }
.pin .pl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; white-space: nowrap; font: 700 15px var(--font); font-variant-caps: all-small-caps; letter-spacing: .06em;
  color: #f4e7c4; paint-order: stroke; -webkit-text-stroke: 3px #2a211a; pointer-events: none; }
.pin.major .pl { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .pin.major::before { animation: none; opacity: .8; } }
.atlas-top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: .8rem; padding: .45rem 4rem .45rem .8rem;
  background: linear-gradient(rgba(21, 17, 14, .95), rgba(21, 17, 14, .82)); border-bottom: 1px solid var(--d-line); box-shadow: 0 4px 18px rgba(0, 0, 0, .45); }
.atlas-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.atlas-title h2 { margin: 0; font-size: 1.2rem; color: var(--d-gold); font-variant-caps: all-small-caps; letter-spacing: .08em; line-height: 1.1; text-wrap: balance; }
.atlas-title span { font-size: .82rem; font-style: italic; color: var(--d-dim); }
.atlas-tabs { display: flex; gap: .2rem; flex-wrap: wrap; }
.atlas-tabs button { all: unset; cursor: pointer; position: relative; padding: .35rem .75rem; border: 1px solid var(--d-line); color: var(--d-dim); font-variant-caps: all-small-caps; letter-spacing: .08em; font-size: .95rem; }
.atlas-tabs button:hover { color: var(--d-text); background: #2b241d; }
.atlas-tabs button[aria-selected="true"] { color: #1b1713; background: linear-gradient(#d9b56a, #b8913f); border-color: #e0c27a; font-weight: 700; }
.atlas-tabs button:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 2px; }
.tab-dot { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: #c2402c; box-shadow: 0 0 0 2px #15110e; }
#atlas .army-gold b { font-size: 1.35rem; }
.atlas-side { position: absolute; right: 0; top: 3.6rem; bottom: 0; width: min(25rem, 100%); z-index: 5; overflow: auto; box-sizing: border-box; padding: .6rem; display: flex; flex-direction: column; gap: .55rem;
  background: linear-gradient(90deg, rgba(21, 17, 14, .2), rgba(21, 17, 14, .9) 1.2rem); scrollbar-width: thin; scrollbar-color: var(--d-line) transparent; }
.atlas-side > section { background: var(--d-panel); border: 1px solid var(--d-line); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .45); padding: .7rem .85rem; }
.atlas-side h3 { margin: 0 0 .35rem; color: var(--d-gold); font-variant-caps: all-small-caps; letter-spacing: .07em; font-size: 1.2rem; line-height: 1.15; text-wrap: balance; }
.atlas-side p { margin: .3rem 0; font-size: .9rem; line-height: 1.45; }
.as-day { font-style: italic; color: var(--d-dim); margin-top: 0 !important; }
.as-kind { border: 1px solid rgba(138, 113, 72, .7); padding: .4rem .55rem; background: rgba(0, 0, 0, .25); }
.as-loc { font-size: .8rem !important; font-style: italic; color: var(--d-dim); }
.as-src { display: flex; flex-direction: column; gap: .15rem; }
.as-src a { color: #e0c27a; font-size: .82rem; text-underline-offset: .18em; }
.as-src a:hover { color: #f4e7c4; }
.as-hint { font-style: italic; color: var(--d-dim); }
.as-fights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.as-fights button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; padding: .35rem .45rem; border: 1px solid transparent; }
.as-fights button:hover { background: rgba(255, 240, 200, .06); border-color: rgba(138, 113, 72, .6); }
.as-fights button.on { border-color: var(--d-gold); background: rgba(217, 181, 106, .1); }
.as-fights button:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 1px; }
.as-fights button.done { opacity: .7; }
.as-fights .nm { display: flex; flex-direction: column; min-width: 0; }
.as-fights .nm b { font-size: .95rem; line-height: 1.2; }
.as-fights .nm small { font-size: .76rem; font-style: italic; color: var(--d-dim); }
.as-fights .tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; padding: .1rem .35rem; border: 1px solid; }
.as-fights .tag.t-major { color: #f4c7b4; border-color: #9a2b20; background: rgba(154, 43, 32, .35); }
.as-fights .tag.t-side { color: #e9c58a; border-color: #b5762a; }
.atlas-side .res { font-weight: 700; font-variant-caps: all-small-caps; letter-spacing: .08em; }
.atlas-side .res.won { color: #9cc28a; } .atlas-side .res.lost { color: #e08a74; }
.as-intel { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: .5rem 0 .6rem; }
.as-intel > div { border: 1px solid rgba(138, 113, 72, .6); padding: .35rem .5rem; display: flex; flex-direction: column; }
.as-intel span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--d-dim); }
.as-intel b { font-size: 1.25rem; font-variant-numeric: lining-nums tabular-nums; line-height: 1.15; }
.as-intel small { font-size: .74rem; color: var(--d-dim); }
.atlas-side .btn.start { width: 100%; }
.atlas-side .btn.quiet { width: 100%; margin-top: .25rem; }
.as-news { border-color: var(--d-gold) !important; }
.as-news.lost { border-color: #a5402c !important; }
.as-meanwhile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.as-meanwhile button { all: unset; cursor: pointer; font-size: .86rem; line-height: 1.35; display: block; padding: .15rem .2rem; }
.as-meanwhile button:hover { background: rgba(255, 240, 200, .06); }
.as-meanwhile button:focus-visible { outline: 2px solid var(--d-gold); }
.as-meanwhile small { color: var(--d-dim); font-style: italic; }
.as-meanwhile .k { display: inline-block; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; margin-right: .4rem; padding: 0 .3rem; border: 1px solid var(--d-line); color: var(--d-dim); }
.as-meanwhile .k-massacre { color: #f4e7c4; background: #141110; border-color: #e8dcc0; }
.as-meanwhile .k-raid { color: #f3c39e; border-color: #c2561e; }
.as-foot { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .2rem; }
.as-foot .btn { flex: 1 1 auto; }
@media (max-width: 760px) {
  .atlas-top { flex-wrap: wrap; gap: .4rem .6rem; }
  .atlas-tabs { order: 3; width: 100%; }
  .atlas-side { top: auto; height: 46%; width: 100%; background: rgba(21, 17, 14, .94); border-top: 1px solid var(--d-line); }
}

/* ---- the army in battalions */
.army-wrap.ug { width: min(88rem, 100%); }
.army-wrap.ug .army-head { gap: .9rem; padding-right: 3.2rem; }
.army-wrap.ug .army-head h2 { flex: 1; }
.army-sum { font-size: .86rem; font-style: italic; color: var(--d-dim); }
.ug-body { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: .8rem; align-items: start; }
.ug-org { display: flex; flex-direction: column; gap: .5rem; }
.ubn { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); background: var(--d-panel); border: 1px solid var(--d-line); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35); }
.ubn header { display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding: .5rem .7rem; border-right: 1px solid rgba(138, 113, 72, .55); background: rgba(0, 0, 0, .22); position: relative; }
.ubn h3 { margin: 0; color: var(--d-gold); font-variant-caps: all-small-caps; letter-spacing: .08em; font-size: 1.12rem; line-height: 1.1; }
.ubn header span { font-size: .78rem; font-style: italic; color: var(--d-dim); }
.ubn kbd { position: absolute; top: .4rem; right: .45rem; font: 700 .72rem var(--font); color: var(--d-dim); background: transparent; border: 1px solid var(--d-line); box-shadow: none; padding: 0 .3rem; }
.uslots { display: flex; gap: .45rem; padding: .5rem .6rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--d-line) transparent; }
.ucard { all: unset; --wash: var(--army-wash); box-sizing: border-box; position: relative; flex: none; width: 7.6rem; height: 10.6rem; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  background-color: var(--linen); background-image: linear-gradient(var(--wash), var(--wash)); border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -4px; padding: .3rem .35rem .35rem; color: var(--ink);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35); transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s; }
#army.lk .ucard { --wash: var(--lakota-wash); }
.ucard:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, .45); }
.ucard.on { outline: 2px solid var(--d-gold); outline-offset: 2px; transform: translateY(-3px); }
.ucard:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 2px; }
.uc-nm { font-size: .8rem; font-weight: 700; font-variant-caps: all-small-caps; letter-spacing: .06em; line-height: 1.05; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-pic { flex: 1; display: grid; place-items: end center; min-height: 0; }
.uc-pic img { width: 82px; height: 98px; image-rendering: pixelated; }
.uc-pic img.gun { width: 88px; height: 88px; }
.uc-ty { font-size: .7rem; font-style: italic; color: var(--ink-2); line-height: 1.1; text-align: center; }
.uc-row { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: .15rem; }
.uc-n { font-size: .74rem; font-variant-numeric: lining-nums tabular-nums; }
.ucard.short .uc-n { color: #a5402c; font-weight: 700; }
.uc-rk svg { width: .8rem; height: .9rem; }
.uc-bar { width: 100%; height: .32rem; margin-top: .18rem; border: 1px solid var(--ink); background: var(--linen-hi); position: relative; }
.uc-bar i { position: absolute; inset: 0 auto 0 0; background: var(--army); }
#army.lk .uc-bar i { background: var(--lakota); }
.ucard.fresh { animation: enlist .5s cubic-bezier(.16, 1, .3, 1); }
/* dragging a company card to another battalion, or onto another card to swap them (2026-10-06) */
.ucard { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ucard.dragging { opacity: .35; transform: none; box-shadow: none; }
.ughost { position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none; cursor: grabbing; box-shadow: 0 14px 26px rgba(0, 0, 0, .55); transition: none; outline: 1px solid var(--ink); }
#army.dragging, #army.dragging .ucard { cursor: grabbing; }
.ucard.dropon { outline: 2px dashed var(--d-gold); outline-offset: 3px; transform: translateY(-3px); }
.ubn.dropon { border-color: var(--d-gold); box-shadow: inset 0 0 0 3px rgba(217, 181, 106, .28); }
.uadd { all: unset; box-sizing: border-box; flex: none; width: 7.6rem; height: 10.6rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  border: 1.5px dashed var(--d-line); color: var(--d-dim); font-size: .8rem; font-variant-caps: all-small-caps; letter-spacing: .08em; transition: color .2s, border-color .2s, background .2s; }
.uadd svg { width: 2rem; height: 2rem; }
.uadd:hover, .uadd.on { color: var(--d-gold); border-color: var(--d-gold); border-style: solid; background: rgba(217, 181, 106, .08); }
.uadd:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 2px; }
.uempty { flex: none; width: 7.6rem; height: 10.6rem; box-sizing: border-box; border: 1px solid rgba(138, 113, 72, .22); background: rgba(0, 0, 0, .12); }
.ug-side { position: sticky; top: 0; background: var(--d-panel); border: 1px solid var(--d-line); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35); padding: .7rem .8rem; display: flex; flex-direction: column; gap: .45rem;
  max-height: calc(100vh - 9rem); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--d-line) transparent; }
.us-h { margin: 0; color: var(--d-gold); font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 1.2rem; text-align: center; }
.us-for { margin: -.3rem 0 .1rem; text-align: center; font-size: .82rem; font-style: italic; color: var(--d-dim); }
.utypes { display: flex; flex-direction: column; gap: .35rem; }
.utype { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: .1rem .6rem; align-items: center; padding: .4rem .45rem; border: 1px solid rgba(138, 113, 72, .55); background: rgba(0, 0, 0, .2); }
.utype:hover { border-color: var(--d-gold); }
.utype > img { grid-row: span 2; width: 41px; height: 49px; image-rendering: pixelated; justify-self: center; background: var(--linen); border: 1px solid var(--ink); padding: 2px; }
.utype > img.gun { width: 44px; height: 44px; }
.ut-txt { display: flex; flex-direction: column; min-width: 0; }
.ut-txt b { font-size: .95rem; font-variant-caps: all-small-caps; letter-spacing: .05em; line-height: 1.1; }
.ut-txt small { font-size: .74rem; color: var(--d-dim); line-height: 1.3; }
.ut-buy { display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.ut-buy .rc-size { margin: 0; }
.utype.cant > img { opacity: .55; filter: grayscale(.6); }
.us-co { display: flex; gap: .7rem; align-items: center; }
.us-co img { width: 49px; height: 59px; image-rendering: pixelated; background: var(--linen); border: 1px solid var(--ink); padding: 3px; }
.us-co img.gun { width: 52px; height: 52px; }
.us-co h3 { margin: 0; color: var(--d-gold); font-variant-caps: all-small-caps; letter-spacing: .07em; font-size: 1.25rem; }
.us-co p { margin: 0; font-size: .82rem; font-style: italic; color: var(--d-dim); }
.us-facts { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: .1rem 0; font-size: .88rem; }
.us-facts dt { color: var(--d-dim); }
.us-facts dd { margin: 0; display: flex; align-items: center; gap: .3rem; }
.us-facts svg { width: .8rem; height: .9rem; }
.us-role { margin: 0; font-size: .84rem; line-height: 1.4; }
.us-acts { display: flex; flex-wrap: wrap; gap: .3rem; }
.us-max { font-size: .8rem; font-style: italic; color: var(--d-dim); align-self: center; }
.us-move { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .82rem; color: var(--d-dim); }
.us-move .chip { all: unset; cursor: pointer; border: 1px solid var(--d-line); padding: .15rem .5rem; color: var(--d-text); font-variant-caps: all-small-caps; letter-spacing: .06em; }
.us-move .chip:hover { border-color: var(--d-gold); color: var(--d-gold); }
.us-move .chip:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 1px; }
.us-foot { display: flex; justify-content: space-between; align-items: center; gap: .4rem; border-top: 1px solid rgba(138, 113, 72, .45); padding-top: .45rem; }
@media (max-width: 1000px) {
  .ug-body { grid-template-columns: 1fr; }
  .ug-side { position: static; max-height: none; }
  .ubn { grid-template-columns: 1fr; }
  .ubn header { border-right: 0; border-bottom: 1px solid rgba(138, 113, 72, .55); flex-direction: row; align-items: baseline; gap: .7rem; }
}
.ut-buy .rc-size { border-color: var(--d-line); background: rgba(0, 0, 0, .25); }
.ut-buy .rc-size span { color: var(--d-text); min-width: 4.6rem; text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.ut-buy .rc-size button { color: var(--d-text); }
.ut-buy .rc-size button:disabled { color: var(--d-line); }
#army .btn.sm.primary .gp { color: #1b1713; }
#army .btn.sm.primary .coin circle:first-child { stroke: #1b1713; }
.ut-buy .rc-size button:first-child, .ut-buy .rc-size button:last-child { border-color: var(--d-line); }
@media (max-width: 760px) {
  .army-wrap.ug .army-head { flex-wrap: wrap; row-gap: .3rem; }
  .army-wrap.ug .army-head h2 { font-size: 1.15rem; flex: 1 1 10rem; }
  .army-wrap.ug .army-sum { order: 3; width: 100%; }
  .atlas-title h2 { font-size: 1rem; }
  .atlas-tabs button { font-size: .8rem; padding: .22rem .5rem; }
  .ucard, .uadd, .uempty { width: 6.6rem; height: 9.6rem; }
  .uc-pic img { width: 66px; height: 78px; } .uc-pic img.gun { width: 66px; height: 66px; }
}

/* ---- main menu (2026-10-05, the developer): the menu sheet runs from the top of the screen to the bottom; New Game opens
   its list in the same place */
#menu, #newgame { justify-content: flex-start; align-items: stretch; padding: 0 0 0 clamp(1rem, 7vw, 7rem); }
#newgame { background: linear-gradient(90deg, rgba(20, 24, 28, .55), rgba(20, 24, 28, 0) 62%); }
#menu > .cartouche, #newgame > .cartouche { height: 100%; display: flex; flex-direction: column; justify-content: center; border-top: 0; border-bottom: 0;
  width: min(30rem, 92vw); padding-block: 3rem; }
#menu > .cartouche::before { top: 22px; }
#menu > .cartouche::after { bottom: 22px; }
#menu .title { font-size: clamp(2rem, 3.4vw, 2.8rem); }
#menu .menu-buttons { margin-top: 1.4rem; }
#newgame .ng-title { margin-bottom: 1.4rem; }
#newgame .ng-list .btn { min-height: 3rem; }
@media (max-width: 560px) { #menu, #newgame { padding: 0; justify-content: center; } }

/* ---- Options: three tabs */
.opt-sheet { width: min(40rem, 94vw); }
.opt-tabs { display: flex; gap: .3rem; border-bottom: 1.5px solid var(--ink); margin: .2rem 0 1rem; }
.opt-tabs button { all: unset; cursor: pointer; padding: .45rem .95rem; font-variant-caps: all-small-caps; letter-spacing: .12em; font-size: 1.06rem; color: var(--ink-2);
  border: 1.5px solid transparent; border-bottom: 0; margin-bottom: -1.5px; }
.opt-tabs button[aria-selected="true"] { color: var(--ink); background: var(--linen-hi); border-color: var(--ink); }
.opt-tabs button:focus-visible { outline: 2px solid var(--army); }
.opt-body { min-height: 15rem; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dotted var(--ink-3); }
.opt-row > span { font-size: 1.02rem; }
#optAudio .vm-panel { border: 0; box-shadow: none; background: none; padding: 0; margin: 0 0 .3rem; width: auto; }
.opt-keys { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 0; }
.opt-keys dt { text-align: right; } .opt-keys dd { margin: 0; }
.opt-keys kbd { font: inherit; font-size: .9rem; padding: .05rem .45rem; border: 1px solid var(--ink-2); background: var(--linen-hi); }
#hist .hrand b { font-style: italic; }

/* ---- a new campaign, one choice at a time (2026-10-05, after Ultimate General: Civil War) */
#cflow { padding: 0; display: block; overflow: hidden; background: #0e0b0a; color: #e9dfc8; }
#cflow[hidden] { display: none; }
.cf-bg { position: absolute; inset: 0; background-size: cover; background-position: 50% 55%; image-rendering: pixelated; filter: sepia(.6) brightness(.5) contrast(1.08); }
#cflow::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 34% 70% at 50% 30%, rgba(150, 40, 24, .55), transparent 70%),
    linear-gradient(90deg, rgba(12, 18, 34, .88), rgba(12, 10, 10, .2) 30%, rgba(12, 10, 10, .15) 70%, rgba(26, 10, 8, .85)); }
.cf-head { position: absolute; left: 0; right: 0; top: 0; height: 4.4rem; z-index: 3; display: grid; place-items: center;
  border-top: 1px solid rgba(232, 220, 192, .25); border-bottom: 1px solid rgba(232, 220, 192, .35);
  background: linear-gradient(90deg, rgba(10, 8, 8, .9), rgba(100, 22, 16, .8) 50%, rgba(10, 8, 8, .9)); }
.cf-head h2 { margin: 0; font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: .08em; text-transform: uppercase; color: #f3e8cf; }
.cf-cols { position: absolute; top: 4.4rem; bottom: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 1.9rem; padding: 0 4rem; }
.cf-cols[data-n="4"], .cf-cols[data-n="5"] { gap: 1rem; }
.cf-col { all: unset; box-sizing: border-box; width: clamp(12rem, 17vw, 17.5rem); height: 100%; display: flex; flex-direction: column; text-align: center;
  padding: 0 1.1rem 2rem; color: #e9dfc8; cursor: pointer; transition: background .25s;
  background: linear-gradient(180deg, rgba(8, 6, 6, .92), rgba(14, 10, 9, .78) 45%, rgba(14, 10, 9, .62)); }
.cf-cols[data-n="5"] .cf-col { width: clamp(10.5rem, 15.5vw, 15rem); }
.cf-col:hover, .cf-col:focus-visible, .cf-col.on { background: linear-gradient(180deg, rgba(8, 6, 6, .9), rgba(110, 28, 18, .55) 55%, rgba(158, 44, 26, .78)); }
.cf-col:focus-visible { outline: 1px solid #e8c45a; outline-offset: -1px; }
.cf-col.wide { width: min(25rem, 92vw); cursor: default; }
.cf-col.wide:hover { background: linear-gradient(180deg, rgba(8, 6, 6, .92), rgba(14, 10, 9, .78) 45%, rgba(14, 10, 9, .62)); }
.cf-pic { height: 36vh; flex: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.1rem; box-sizing: border-box; }
.cf-col h3 { margin: 0 -1.1rem; padding: .75rem .6rem; border-top: 1px solid rgba(232, 220, 192, .6); border-bottom: 1px solid rgba(232, 220, 192, .6);
  font-weight: 400; font-size: clamp(1.15rem, 1.7vw, 1.6rem); letter-spacing: .03em; line-height: 1.2; color: #f3e5c4; }
.cf-sub { margin-top: .75rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #cdb88e; }
.cf-col p { margin: 1rem 0 0; font-size: .97rem; line-height: 1.55; color: #ddd0b4; }
.cf-map { width: calc(100% + 2.2rem); margin: 0 -1.1rem -1.1rem; height: 100%; max-height: 15rem; background-size: 1500px auto; background-position: 54% 56%;
  image-rendering: pixelated; filter: sepia(.75) contrast(1.1) brightness(.9); border-top: 1px solid rgba(232, 220, 192, .6); }
.cf-flag { width: 100%; max-width: 13rem; image-rendering: pixelated; box-shadow: 0 4px 14px rgba(0, 0, 0, .6); }
.cf-portrait { width: 8.5rem; height: 8.5rem; object-fit: cover; image-rendering: pixelated; border: 1px solid rgba(232, 220, 192, .6); box-shadow: 0 4px 14px rgba(0, 0, 0, .6); }
.cf-badge { height: 2.8rem; width: auto; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }
.cf-stats { list-style: none; padding: 0; margin: 1.4rem 0 0; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #e6d5ae; line-height: 1.9; }
.cf-acts { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; padding-top: 1.4rem; }
.cf-btn { all: unset; cursor: pointer; padding: .75rem 1rem; text-align: center; font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase; color: #f3e5c4;
  border: 1px solid rgba(232, 220, 192, .35); background: rgba(0, 0, 0, .3); }
.cf-btn:hover, .cf-btn:focus-visible { background: rgba(158, 44, 26, .7); border-color: rgba(232, 220, 192, .7); }
.cf-name { all: unset; box-sizing: border-box; width: 100%; padding: .75rem; border: 1px solid #c9a96a; background: rgba(0, 0, 0, .4);
  font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; color: #f3e5c4; text-align: center; }
.cf-name::placeholder { color: #b9a682; }
.cf-sum { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1rem; margin: 1.3rem 0 0; text-align: left; }
.cf-sum dt { text-align: right; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #b9a682; padding-top: .15rem; }
.cf-sum dd { margin: 0; color: #f0e3c4; }
.cf-back { all: unset; position: absolute; right: 1.2rem; bottom: 1.2rem; z-index: 4; cursor: pointer; padding: .5rem 2.4rem; letter-spacing: .1em; text-transform: uppercase;
  color: #efe6cf; background: linear-gradient(#6d6556, #4a4438); border: 1px solid #b9ad8e; }
.cf-back:hover, .cf-back:focus-visible { background: linear-gradient(#857b69, #5a5345); }
.cf-ribbons { position: absolute; left: 1.4rem; top: 4.4rem; bottom: 0; z-index: 3; display: flex; gap: .3rem; align-items: flex-end; }
.cf-rib { all: unset; box-sizing: border-box; width: 2.8rem; height: 62%; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  background: linear-gradient(180deg, transparent, rgba(128, 26, 18, .85) 30%, #8e1d14); }
.cf-rib.us { background: linear-gradient(180deg, transparent, rgba(34, 62, 104, .85) 30%, #24456f); }
.cf-rib span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: #f0e4c6; margin-bottom: 1rem; }
.cf-rib img { width: 100%; image-rendering: pixelated; margin-bottom: 1rem; }
.cf-rib:hover span, .cf-rib:focus-visible span { color: #fff; text-decoration: underline; }
@media (max-width: 900px), (max-height: 560px) {
  .cf-cols { flex-wrap: wrap; align-content: flex-start; overflow-y: auto; padding: 1rem 1rem 5rem; gap: .8rem; }
  .cf-col, .cf-cols[data-n="5"] .cf-col { width: min(100%, 22rem); height: auto; padding-bottom: 1.2rem; }
  .cf-pic { height: auto; min-height: 5rem; padding-top: 1rem; }
  .cf-map { height: 9rem; }
  .cf-ribbons { display: none; }
}

/* weapon sprites (2026-10-06): the company's arms as pixel icons, and each battalion's or band's crossed-arms badge */
.arms { display: inline-flex; gap: 2px; align-items: center; align-self: center; }
img.wpn, img.bn-emb { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.reg-head .arms img.wpn { width: 32px; height: 32px; margin: -8px 0; }
.us-facts dd .arms { margin-right: .35rem; vertical-align: middle; }
.ubn header img.bn-emb { align-self: flex-start; margin: 0 0 .1rem -2px; }

/* ---- our painted unit cards (2026-10-06): the picture is the card; the count, rank, name and strength sit over it */
#bottombar .card.art { padding: 0; overflow: hidden; display: block; background: #23201b; border: 1px solid var(--ink); box-shadow: none; }
#bottombar .card.art .pic { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 50% 28%; image-rendering: auto; transform: scale(1.08); }
#bottombar .card.art .nm { position: absolute; left: 0; right: 0; bottom: .5rem; margin: 0; padding: .7rem .15rem .1rem; text-align: center; color: #f6f1e4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9); background: linear-gradient(rgba(16, 14, 11, 0), rgba(16, 14, 11, .82) 55%); max-width: none; }
#bottombar .card.art .hp { position: absolute; left: .2rem; right: .2rem; bottom: .2rem; width: auto; margin: 0; }
#bottombar .card.art .ct { top: .12rem; left: .12rem; padding: 0 .22rem; color: #f6f1e4; background: rgba(16, 14, 11, .72); line-height: 1.25; }
#bottombar .card.art .rk { top: .12rem; right: .12rem; padding: .05rem .1rem; background: rgba(16, 14, 11, .55); }
#bottombar .card.art .grp { bottom: 1.6rem; }
#bottombar .card.art:hover .pic { filter: brightness(1.08); }
#bottombar .card.art.sel { box-shadow: inset 0 0 0 3px var(--army), 0 0 0 1px var(--army); }
#bottombar .card.art.lk.sel { box-shadow: inset 0 0 0 3px var(--lakota), 0 0 0 1px var(--lakota); }
#bottombar .card.art.sel::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--army); pointer-events: none; }
#bottombar .card.art.lk.sel::after { box-shadow: inset 0 0 0 3px var(--lakota); }
#bottombar .card.art.fire { box-shadow: 0 0 6px 2px rgba(214, 52, 28, .9), 0 0 14px 4px rgba(214, 52, 28, .45); }
#bottombar .card.art.slain .pic { filter: sepia(1) saturate(4) hue-rotate(-30deg) brightness(.75); }
#bottombar .card.art.gone .pic { filter: grayscale(1) brightness(.5); }
#bottombar .card.art.rest .ct::after { color: #9cc3ea; }
.ucard.art { padding: 0; overflow: hidden; outline: none; background: #23201b; color: #f6f1e4; justify-content: space-between; }
.ucard.art .uc-pic { position: absolute; inset: 0; display: block; }
.ucard.art .uc-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; image-rendering: auto; transform: scale(1.06); }
.ucard.art .uc-nm { position: relative; width: 100%; padding: .3rem .3rem .7rem; box-sizing: border-box; background: linear-gradient(rgba(16, 14, 11, .85) 45%, rgba(16, 14, 11, 0)); text-shadow: 0 1px 2px #000; }
.ucard.art .uc-ty { position: relative; margin-top: auto; width: 100%; padding-top: .9rem; color: #e9e2cf; background: linear-gradient(rgba(16, 14, 11, 0), rgba(16, 14, 11, .85) 60%); text-shadow: 0 1px 2px #000; }
.ucard.art .uc-row { position: relative; padding: 0 .35rem; box-sizing: border-box; margin-top: 0; background: rgba(16, 14, 11, .85); }
.ucard.art .uc-n { color: #f6f1e4; }
.ucard.art .uc-bar { position: relative; width: auto; margin: 0; border-width: 0; border-top: 1px solid rgba(16, 14, 11, .85); box-shadow: 0 0 0 .25rem rgba(16, 14, 11, .85); margin: 0 .25rem .25rem; }
.ucard.art.on { outline: 2px solid var(--d-gold); outline-offset: 2px; }
.ughost.art { outline: none; }
.us-co img.art { width: 52px; height: 78px; object-fit: cover; image-rendering: auto; padding: 0; }
.utype > img.art { width: 41px; height: 56px; object-fit: cover; object-position: 50% 25%; image-rendering: auto; padding: 0; }
.rollrow .pic.art { object-fit: cover; object-position: 50% 22%; image-rendering: auto; border-radius: 2px; }
#prod .pq img.art { object-fit: cover; object-position: 50% 22%; image-rendering: auto; }
.brief-forces .fr img.art { object-fit: cover; object-position: 50% 22%; image-rendering: auto; }
#bottombar .card.art .rk:not(:has(svg)) { display: none; }
@media (max-width: 760px) { #bottombar .card.art .nm { font-size: .56rem; bottom: .42rem; padding-top: .5rem; } #bottombar .card.art .ct { font-size: .56rem; } }
.ucard.art .uc-pic { z-index: 0; }
.ucard.art .uc-nm, .ucard.art .uc-ty, .ucard.art .uc-row, .ucard.art .uc-bar { z-index: 1; }
.ucard.art .uc-pic img { object-position: 50% 0%; transform: none; }
.ucard.art .uc-bar { width: auto; height: .32rem; margin: 0; border: 1px solid #000; box-shadow: none; background: #e8dcc0; outline: .3rem solid rgba(16, 14, 11, .85); }
.ucard.art .uc-row { padding-bottom: .3rem; }
.ucard.art .uc-bar { display: block; align-self: stretch; margin: 0 .35rem .4rem; outline: none; box-shadow: 0 0 0 .35rem rgba(16, 14, 11, .85); }
.ucard.art .uc-row { align-self: stretch; padding-bottom: .35rem; }

/* (2026-10-06, the developer) the muster roll as a row of the painted cards, each with its name and cost along the foot */
#roll, #hud #roll { width: auto; max-width: calc(100vw - 1rem); }
#rollList { flex-direction: row; gap: .35rem; overflow-x: auto; padding: .1rem .05rem .2rem; }
.rollrow.rcard { position: relative; display: block; flex: none; width: 5.6rem; height: 8.6rem; padding: 0; border: 1.5px solid var(--ink); overflow: hidden;
  background: #2a2722; box-shadow: 0 1px 0 rgba(30, 34, 38, .25); }
.rollrow.rcard:first-child { border-top: 1.5px solid var(--ink); }
.rollrow.rcard .pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; border: 0; background: #2a2722; }
.rollrow.rcard .pic:not(.art) { image-rendering: pixelated; object-fit: contain; object-position: center 30%; }
.rollrow.rcard .key { position: absolute; top: .15rem; right: .25rem; font-size: .66rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
.rollrow.rcard .foot { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem .25rem .2rem; color: #f6f1e4;
  background: linear-gradient(to bottom, rgba(16, 14, 11, 0), rgba(16, 14, 11, .82) 42%); }
.rollrow.rcard .nm { display: block; font-size: .7rem; letter-spacing: .06em; line-height: 1.1; color: #fff; }
.rollrow.rcard .cost { display: flex; flex-wrap: wrap; gap: .05rem .35rem; font-size: .62rem; color: #e9e2d0; margin-top: .1rem; }
.rollrow.rcard .cost .ic { width: .7rem; height: .7rem; }
.rollrow.rcard .cost .no { color: #ff9a85; }
.rollrow.rcard:hover:not([aria-disabled="true"]) { background: #2a2722; outline: 2px solid var(--army); outline-offset: -2px; }
.rollrow.rcard[aria-disabled="true"] .pic { filter: grayscale(.85) brightness(.75); }
.rollrow.rcard[aria-disabled="true"] .nm { color: #cfc8b8; }
#roll.lk .rollrow.rcard:hover:not([aria-disabled="true"]) { outline-color: var(--lakota); }
@media (max-width: 760px) { .rollrow.rcard { width: 4.6rem; height: 7rem; } .rollrow.rcard .nm { font-size: .6rem; } }
/* (2026-10-06: "The 100/100 make it more to the top left. and remove the black background so keep it just white") */
#bottombar .card.art .ct { top: .04rem; left: .08rem; padding: 0; background: none; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .85), 0 1px 1px rgba(0, 0, 0, .7); }

/* (2026-10-06) a stretch of fort wall picked: its strength */
#register .wallhp { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
#register .wallhp .hp { flex: 1; height: .55rem; background: rgba(30, 34, 38, .18); position: relative; display: block; }
#register .wallhp .hp i { position: absolute; left: 0; top: 0; bottom: 0; background: #6b8f3a; }
#register .wallhp b { font-variant-numeric: lining-nums tabular-nums; font-size: .9rem; }
#register .wallnote { margin: .3rem 0 0; font-size: .8rem; font-style: italic; color: var(--ink-2); }
/* (2026-10-06: "When selecting a troop their card needs to be highlighted better I can barely see who I have
   selected") a picked card: a bright brass frame with a dark keyline inside it and a warm glow over the picture, its name
   on a brass band; the other cards dim while anything is picked */
.card.sel, .card.lk.sel { background-color: #fbe9b0; box-shadow: inset 0 0 0 3px #e8b528, inset 0 0 0 4px rgba(30, 26, 18, .8); }
#bottombar .card.art.sel, #bottombar .card.art.lk.sel { box-shadow: 0 0 0 1px #1e1a12; border-color: #ffd24a; }
#bottombar .card.art.sel::after, #bottombar .card.art.lk.sel::after { box-shadow: inset 0 0 0 3px #ffd24a, inset 0 0 0 5px rgba(20, 16, 10, .85), inset 0 0 22px 6px rgba(255, 210, 74, .38); }
#bottombar .card.art.sel .nm { color: #1e1a12; background: #ffd24a; text-shadow: none; padding-top: .12rem; bottom: .42rem; }
#bottombar .card.art.fire.sel { box-shadow: 0 0 6px 2px rgba(214, 52, 28, .9), 0 0 14px 4px rgba(214, 52, 28, .45); }
#cards.picked .card:not(.sel):not(.slain) { opacity: .78; }
#cards.picked .card.art:not(.sel):not(.slain) { opacity: 1; }
#cards.picked .card.art:not(.sel):not(.slain) .pic { filter: brightness(.55) saturate(.55); }
#cards.picked .card.art:not(.sel):not(.slain) .nm { color: rgba(246, 241, 228, .7); }
/* (2026-10-06: "Only keep the troop controls") the panel holds the controls alone: the skills of every squad picked,
   the formation, group, halt and retreat; the small x in the corner lets go of them */
#bottombar .reg-ctl { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-content: center; gap: .35rem; padding-right: 2.2rem; }
#bottombar .reg-ctl .desel { position: absolute; top: .1rem; right: 0; width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--ink-2); border-radius: 50%;
  background: transparent; color: var(--ink-2); font-size: 1.1rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
#bottombar .reg-ctl .desel:hover, #bottombar .reg-ctl .desel.pressed { background: var(--ink-2); color: var(--linen-hi); }
#bottombar .reg-ctl.many { gap: .25rem; }
#bottombar .reg-ctl.many .stamp { width: 3.15rem; min-height: 2.95rem; }
#bottombar .reg-ctl.many .stamp .lb { font-size: .6rem; }
/* (2026-10-06) the muster flag's note at the top of the muster roll */
#rollTip { margin: -.1rem 0 .4rem; font-size: .78rem; font-style: italic; color: var(--ink-2); }

/* (2026-10-07) the squad's footing under its count on the card: in a building, on the walls, in cover */
.card .cond { position: absolute; top: 1.02rem; left: .12rem; width: .95rem; height: .95rem; pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .95)) drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.card .cond svg { display: block; width: 100%; height: 100%; }
.card .cond path { fill: currentColor; stroke: rgba(20, 16, 12, .85); stroke-width: .7; stroke-linejoin: round; }
.card .cond-house, .card .cond-wall { color: #f0d9a6; }
.card .cond-shield { color: #cfe6ff; }
#bottombar .card.art .cond { top: .98rem; left: .08rem; }
@media (max-width: 760px) { .card .cond { width: .76rem; height: .76rem; top: .86rem; } }

/* (2026-10-07) the day dial in the top bar: the sun, the sun on the skyline at dusk and dawn, the moon */
.tool.daydial { cursor: default; }
.tool.daydial[data-ph="dusk"], .tool.daydial[data-ph="dawn"] { background-color: #ecd2a8; }
.tool.daydial[data-ph="night"] { background-color: #2c3452; color: #ece6d2; }

/* (2026-10-08) the muster roll's Foot / Mounted / Guns tabs */
.rolltabs { display: flex; gap: .25rem; margin: .1rem 0 .35rem; }
.rolltabs[hidden] { display: none; }
.rtab { all: unset; box-sizing: border-box; cursor: pointer; padding: .18rem .55rem; border: 1.5px solid var(--ink); font-variant-caps: all-small-caps; letter-spacing: .08em; font-size: .86rem; font-weight: 700; color: var(--ink-2); background: transparent; }
.rtab.on { background: var(--ink); color: #f6f1e4; }
.rtab:hover:not(.on) { background: rgba(47, 95, 138, .1); }
.rtab:focus-visible { outline: 2px solid var(--army); outline-offset: 2px; }
#roll.lk .rtab:hover:not(.on) { background: rgba(var(--lk-rgb), .14); }

/* (2026-10-08) battle speed button in the top bar: x1, x2, x3 */
.tool.speed b { font: 700 1rem/1 "Besley", Georgia, serif; letter-spacing: .02em; }
.tool.speed[data-rate="2"], .tool.speed[data-rate="3"] { background-color: #ecd2a8; }
.tool.speed[data-rate="3"] { background-color: #e2b98a; }

/* (2026-10-08, night: "an option on the top right of each card that looks like a page slightly turned. If clicked
   it flips and shows the units stats like bars going left to right, from the top of the card down ... a little flip
   animation") the turned corner and the paper back with the stat bars; .statcard = the muster roll's cards and (
   "Add this option when purchasing troops for the other mode as well") the army builder's troop rows */
.statcard { --persp: 420px; }
.utype.statcard { --persp: 1100px; position: relative; overflow: hidden; }
.statcard .flipc { position: absolute; top: 0; right: 0; z-index: 3; width: 1.15rem; height: 1.15rem; cursor: pointer; transition: width .15s, height .15s; }
.statcard .flipc::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom left, rgba(16, 14, 11, .92) 50%, transparent 50%); }
.statcard .flipc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom left, transparent 50%, #cdbf9c 50%, #f3ecda 88%);
  filter: drop-shadow(-1.5px 1.5px 1.2px rgba(0, 0, 0, .6)); }
.statcard .flipc:hover, .statcard:focus-visible .flipc { width: 1.45rem; height: 1.45rem; }
.statcard.flipped .flipc::before { background: linear-gradient(to bottom left, rgba(30, 34, 38, .5) 50%, transparent 50%); }
.statcard.flipped .flipc::after { background: linear-gradient(to bottom left, transparent 50%, #2a2722 50%, #4a443a 88%); }
.statcard .back { display: none; }
.statcard.flipped { cursor: pointer; }
.rollrow.rcard.flipped, .rollrow.rcard:hover:not([aria-disabled="true"]).flipped { background: #efe8d6; }
.statcard.flipped > .pic, .statcard.flipped > .foot, .statcard.flipped > img, .statcard.flipped > .ut-txt, .statcard.flipped > .ut-buy { visibility: hidden; }
.statcard.flipped .back { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: .28rem .3rem .32rem;
  color: var(--ink); background: var(--weave), linear-gradient(#f3ecda, #e6dcc3); }
.statcard .bk-nm { display: block; padding-right: .95rem; font-size: .62rem; font-weight: 700; line-height: 1.1; letter-spacing: 0; font-variant-caps: all-small-caps;
  border-bottom: 1px solid rgba(30, 34, 38, .35); padding-bottom: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statcard .st { display: block; }
.statcard .st-l { display: flex; justify-content: space-between; align-items: baseline; font-size: .54rem; line-height: 1.05; letter-spacing: .04em; font-variant-caps: all-small-caps; color: var(--ink-2); }
.statcard .st-l b { font-size: .52rem; font-variant-caps: normal; letter-spacing: 0; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.statcard .st-b { display: block; height: .24rem; margin-top: .06rem; background: rgba(30, 34, 38, .14); box-shadow: inset 0 0 0 .5px rgba(30, 34, 38, .25); }
.statcard .st-b i { display: block; height: 100%; background: var(--army); transform-origin: left center; }
#roll.lk .statcard .st-b i, #army.lk .statcard .st-b i { background: var(--lakota); }
.statcard.flipped .st-b i { animation: rcstat .42s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(60ms + var(--n) * 45ms); }
/* the army builder's rows are wide: the bars sit in two columns, read top to bottom down the first and then the second */
/* (the back sits in the row's place, so the row grows to fit it) */
.utype.statcard.flipped > img, .utype.statcard.flipped > .ut-txt, .utype.statcard.flipped > .ut-buy { display: none; }
.utype.statcard.flipped { padding: 0; }
.utype.statcard.flipped .back { position: relative; inset: auto; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column;
  grid-template-rows: auto repeat(4, auto); gap: .18rem 1rem; padding: .4rem 1.5rem .5rem .6rem; }
.utype.statcard .bk-nm { grid-column: 1 / -1; grid-row: 1; font-size: .86rem; padding-right: 0; margin-bottom: .1rem; }
.utype.statcard .st-l { font-size: .7rem; }
.utype.statcard .st-l b { font-size: .68rem; }
#army .statcard .back, #army .statcard .st-l b, #army .statcard .bk-nm { color: var(--ink); }
#army .statcard .st-l { color: var(--ink-2); }
.utype.statcard .st-b { height: .32rem; }
.statcard.flip-out { animation: rcflipout .14s ease-in forwards; }
.statcard.flip-in { animation: rcflipin .2s ease-out; }
@keyframes rcflipout { from { transform: perspective(var(--persp)) rotateY(0); } to { transform: perspective(var(--persp)) rotateY(90deg) translateY(-2px); } }
@keyframes rcflipin { from { transform: perspective(var(--persp)) rotateY(-90deg) translateY(-2px); } to { transform: perspective(var(--persp)) rotateY(0); } }
@keyframes rcstat { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .statcard.flipped .st-b i { animation: none; } }
@media (max-width: 760px) {
  .rollrow.rcard .flipc { width: 1rem; height: 1rem; }
  .rollrow.rcard.flipped .back { padding: .2rem .22rem .24rem; }
  .rollrow.rcard .bk-nm { font-size: .54rem; }
  .rollrow.rcard .st-l { font-size: .47rem; }
  .rollrow.rcard .st-l b { font-size: .46rem; }
  .rollrow.rcard .st-b { height: .2rem; margin-top: .04rem; }
}

/* (2026-10-08: "In this menu add tabs for selecting unit types instead of listing everyone") the army builder's
   New company list by kind: Foot / Mounted / Guns */
.utabs { display: flex; gap: .3rem; margin: .55rem 0 .5rem; }
.utab { all: unset; box-sizing: border-box; flex: 1; cursor: pointer; text-align: center; padding: .28rem .5rem; border: 1px solid var(--d-line); color: var(--d-dim);
  font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: .95rem; font-weight: 700; background: rgba(0, 0, 0, .2); }
.utab:hover:not(.on) { color: var(--d-text); border-color: var(--d-gold); }
.utab.on { background: var(--d-gold); border-color: var(--d-gold); color: #1b1713; }
.utab:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 2px; }

/* (2026-10-08) the campaign's fight pins: crossed sabres on a round plinth, pixel art */
.pin svg.px rect { stroke: none; }
.pin svg.px .po { fill: #16120e; }
.pin svg.px .pb { fill: #ece7da; }
.pin svg.px .pgx { fill: #d9b56a; }
.pin svg.px .ph { fill: #6b4a2b; }
.pin svg.px .pd { fill: #8d7f6c; stroke: none; }
.pin svg.px .pdk { fill: rgba(0, 0, 0, .38); }
.pin.major svg.px .pd { fill: #b0352a; }
.pin.side svg.px .pd { fill: #c58a34; }
.pin.won.us svg.px .pd { fill: #3a74a8; } .pin.won.lk svg.px .pd { fill: #a83a2a; }
/* (2026-10-09: "make the crossed swords float above the base. And make the circle go around the base of the trophy")
   the sabres bob a pixel over the plinth; the pulse and the picked ring lie flat round the plinth, behind it */
.pin svg.px .psh { fill: rgba(0, 0, 0, .34); }
.pin.trophy svg { position: relative; z-index: 1; }
.pin.trophy svg.px .tsw { animation: trophy-float 1.8s steps(1, end) infinite; }
@keyframes trophy-float { 0% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .pin.trophy svg.px .tsw { animation: none; } }
.pin.trophy::before, .pin.trophy::after { inset: auto; left: -16%; width: 132%; top: 79%; height: 48%; z-index: 0; }
.pin.trophy .pl { margin-top: 36%; }
.pin.lost svg.px .pd { fill: #4a423a; } .pin.lost svg.px .pb { fill: #9a958a; }
.pin svg.px { image-rendering: pixelated; }

/* (2026-10-08) raise another battalion (bought in the campaign) */
.ubn-new { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; margin-top: .35rem; padding: .6rem;
  border: 1px dashed var(--d-line); color: var(--d-dim); cursor: pointer; font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 1rem; }
.ubn-new svg { width: 1.1rem; height: 1.1rem; }
.ubn-new .gp { display: inline-flex; align-items: center; gap: .2rem; color: var(--d-gold); }
.ubn-new .gp .coin { width: .9rem; height: .9rem; }
.ubn-new:hover:not(:disabled) { color: var(--d-text); border-color: var(--d-gold); }
.ubn-new:disabled { opacity: .5; cursor: not-allowed; }

/* (2026-10-08: "This menu bounces up and down to accommodate the size of the companies available for purchase.
   this menu should anchored and not move and there should be a permanent slider if it exceeds the screen") the army
   screen fills the window: the battalions scroll on the left, the side panel keeps its full height on the right with
   a scrollbar always there */
#army { align-items: stretch; overflow: hidden; }
#army .army-wrap.ug { height: 100%; min-height: 0; }
#army .ug-body { flex: 1; min-height: 0; align-items: stretch; }
#army .ug-org { min-height: 0; overflow-y: auto; padding-right: .3rem; }
#army .ug-side { position: relative; top: auto; height: 100%; max-height: none; min-height: 0; box-sizing: border-box; overflow-y: scroll; }
#army .army-foot { flex: none; }

/* ("The slider should match the UI. All slides should match the UI") every scrollbar in the game: ink on linen
   on the light screens and the battle, gold on dark wood on the dark screens */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #d8dccf; border: 1px solid rgba(30, 34, 38, .35); }
::-webkit-scrollbar-thumb { background: #3b4147; border: 2px solid #d8dccf; }
::-webkit-scrollbar-thumb:hover { background: #1e2226; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
:is(#war, #brief, #hist, #army, #atlas, #cflow, #camp, #saves) ::-webkit-scrollbar-track { background: #15110e; border: 1px solid #8a7148; }
:is(#war, #brief, #hist, #army, #atlas, #cflow, #camp, #saves) ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #8a6a2a, #d9b56a 50%, #8a6a2a); border: 2px solid #15110e; }
:is(#war, #brief, #hist, #army, #atlas, #cflow, #camp, #saves) ::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(#8a6a2a, #d9b56a 50%, #8a6a2a); }
:is(#war, #brief, #hist, #army, #atlas, #cflow, #camp, #saves) ::-webkit-scrollbar-thumb:hover { background: #e0c27a; }
/* Chromium draws the styled bars above only where no standard scrollbar colour is set */
@supports not (-moz-appearance: none) {
  .ug-side, .uslots, .tray-row, .atlas-side, .army-shop { scrollbar-width: auto; scrollbar-color: auto; }
}
@supports (-moz-appearance: none) {
  html { scrollbar-color: #3b4147 #d8dccf; }
  :is(#war, #brief, #hist, #army, #atlas, #cflow, #camp, #saves), :is(#war, #brief, #hist, #army, #atlas, #cflow, #camp, #saves) * { scrollbar-color: #d9b56a #15110e; }
}
/* (narrow screens: one column that scrolls as a whole, as before) */
@media (max-width: 1000px) {
  #army { overflow: auto; align-items: safe center; }
  #army .army-wrap.ug { height: auto; }
  #army .ug-org { overflow: visible; }
  #army .ug-side { height: auto; overflow-y: visible; }
}
/* (2026-10-08) a battalion of up to ten companies wraps onto a second row instead of scrolling sideways */
.uslots { flex-wrap: wrap; overflow-x: visible; }

/* (2026-10-09) names that can be changed on the army screen: the name is a button with a small pen; it turns into a box */
.rn { all: unset; cursor: text; display: inline-flex; align-items: center; gap: .35rem; border-bottom: 1px dashed transparent; max-width: 100%; }
.rn:hover, .rn:focus-visible { border-bottom-color: currentColor; }
.rn:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 3px; }
.rn .pen { width: .85em; height: .85em; flex: none; opacity: .5; }
.rn:hover .pen, .rn:focus-visible .pen { opacity: 1; }
.rn-in { box-sizing: border-box; width: 100%; max-width: 15rem; font: inherit; letter-spacing: inherit; font-variant-caps: inherit; color: var(--d-text);
  background: rgba(0, 0, 0, .45); border: 1px solid var(--d-gold); padding: .1rem .35rem; outline: none; }
.rn-in:focus { box-shadow: 0 0 0 2px rgba(217, 181, 106, .35); }

/* (2026-10-09) the Objectives tab at the top of the skill column, and the panel that opens out of it (Objectives, Intel) */
#globals { align-items: flex-start; }
.gsk.gobj { display: flex; align-items: center; gap: .45rem; width: 9.4rem; padding: 0 .7rem; font-variant-caps: all-small-caps; letter-spacing: .12em; font-weight: 700; font-size: 1.02rem; }
.gsk.gobj svg { width: 1.25rem; height: 1.25rem; flex: none; }
.gsk.gobj.open { visibility: hidden; }
.gsk.gobj:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#objPanel { left: 0; top: 0; width: min(26rem, calc(100vw - 1.2rem)); display: flex; flex-direction: column; padding: .45rem .75rem .7rem; z-index: 6; }
#objPanel[hidden] { display: none; }
.op-head { display: flex; align-items: center; gap: .5rem; border-bottom: 1.5px solid var(--ink); padding-bottom: .35rem; margin-bottom: .5rem; }
.op-tabs { display: flex; gap: .2rem; }
.op-tabs button { all: unset; cursor: pointer; padding: .15rem .65rem .25rem; font-variant-caps: all-small-caps; letter-spacing: .12em; font-weight: 700; font-size: 1.02rem; color: var(--ink-3); border: 1px solid transparent; }
.op-tabs button:hover { color: var(--ink); }
.op-tabs button.on { color: var(--ink); border-color: var(--ink); background: var(--linen-hi); }
.op-tabs button:focus-visible, #objMin:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#objMin { all: unset; margin-left: auto; cursor: pointer; font-size: 1.45rem; line-height: 1; padding: 0 .3rem .1rem; color: var(--ink-2); }
#objMin:hover { color: var(--ink); }
.op-body { overflow: auto; overscroll-behavior: contain; min-height: 0; }
.op-name { margin: 0; font-size: .82rem; letter-spacing: .12em; color: var(--ink-3); }
.op-now { margin: .1rem 0 .45rem; font: 700 1.2rem/1.3 "Besley", Georgia, serif; text-wrap: balance; }
.op-body h4 { margin: .6rem 0 .15rem; font-size: .8rem; letter-spacing: .12em; color: var(--ink-3); }
.op-body ul { margin: 0; padding-left: 1.1rem; }
.op-body li { margin: .12rem 0; line-height: 1.38; }
.op-done li { text-decoration: line-through; color: var(--ink-3); }
.op-intel { margin: 0; display: grid; grid-template-columns: 7rem 1fr; column-gap: .75rem; row-gap: .5rem; }
.op-intel dt { font-variant-caps: all-small-caps; letter-spacing: .1em; font-weight: 700; color: var(--ink-2); line-height: 1.38; }
.op-intel dd { margin: 0; line-height: 1.38; }
#objPanel.in { animation: op-in .26s cubic-bezier(.16, 1, .3, 1) both; transform-origin: top left; }
@keyframes op-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #objPanel.in { animation: none; } }
@media (max-width: 640px), (max-height: 460px) {
  .gsk.gobj { width: 8.6rem; font-size: .9rem; padding: 0 .5rem; letter-spacing: .08em; }
  .op-intel { grid-template-columns: 1fr; row-gap: .1rem; }
  .op-intel dd { margin-bottom: .35rem; }
}

/* (2026-10-09) after a battle: looking over the whole field, and the way back to the results */
#mapView { left: 50%; top: 4.6rem; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 1rem; padding: .5rem .6rem .5rem .9rem; max-width: calc(100vw - 1.2rem); }
#mapView[hidden] { display: none; }
#mapView p { margin: 0; line-height: 1.3; }
#mapView p span { font-style: italic; color: var(--ink-3); margin-left: .35rem; }
#mapView .btn { flex: none; }
#app.mapview #globals, #app.mapview #roll, #app.mapview #prod, #app.mapview #objLine, #app.mapview #register, #app.mapview #cardRow { visibility: hidden; }
#view.grab { cursor: grabbing; }
@media (max-width: 640px) { #mapView p span { display: none; } }
/* (2026-10-09) a short screen (a phone on its side): the skill column, Objectives tab on top, hangs from under the top
   bar so the tab never runs into it */
@media (max-height: 460px) {
  #globals { top: 3.45rem; bottom: auto; transform: none; gap: .2rem; }
  .gsk { width: 2.3rem; height: 2.3rem; }
  .gsk.gobj { width: 8.6rem; height: 2.3rem; }
}

/* (2026-10-10, Platte Ferry) a mission's count, white, just under the Objectives tab */
#objStat { margin: -.1rem 0 .15rem .15rem; font: 700 .95rem/1.2 "Besley", Georgia, serif; color: #f6eedb; white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .75), 0 0 12px rgba(0, 0, 0, .45); font-variant-numeric: tabular-nums; }
#objStat[hidden] { display: none; }
#app.cine #objStat { visibility: hidden; }
#app.cine { background: #0b0907; }   /* a mission's cut-scene: black where the bottom bar stood */
.op-det { margin: -.2rem 0 .45rem; line-height: 1.4; color: var(--ink-2); }
.op-orders li { color: var(--ink-2); }
/* a mission's orders: a box in the middle of the screen, one page at a time, a click anywhere turns the page (the field
   stands still behind it); during the camera's look round the layer stays, empty, so no click reaches the field */
#mInstr { position: absolute; inset: 0; z-index: 44; display: grid; place-items: center; padding: 1rem; cursor: pointer;
  background: radial-gradient(ellipse at 50% 46%, rgba(14, 11, 8, .5), rgba(14, 11, 8, .18) 70%); }
#mInstr[hidden] { display: none; }
#mInstr.tour { background: none; }
#mInstr.tour .mi-box { display: none; }
#mInstr .mi-box { box-sizing: border-box; width: min(34rem, calc(100vw - 2rem)); padding: 1rem 1.3rem .75rem; text-align: center;
  background-color: var(--linen-hi); background-image: var(--weave); border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -5px; box-shadow: var(--shadow), 0 18px 48px rgba(0, 0, 0, .45); }
#mInstr .mi-t { display: block; font: 700 .9rem/1.2 "Besley", Georgia, serif; font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--ink-3); }
#mInstr .mi-p { margin: .45rem 0 .7rem; font: 700 clamp(1.2rem, 2.4vw, 1.6rem)/1.32 "Besley", Georgia, serif; color: var(--ink); text-wrap: balance; }
#mInstr .mi-foot { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(30, 34, 38, .25); padding-top: .4rem; }
#mInstr .mi-n { font-variant-numeric: tabular-nums; color: var(--ink-3); }
#mInstr .mi-hint { font-style: italic; color: var(--ink-3); margin-left: auto; }
#mInstr .mi-box.in { animation: objcall-in .4s cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { #mInstr .mi-box.in { animation: none; } }
/* a mission's fade to black (the closing scene) */
#mFade { position: absolute; inset: 0; z-index: 47; background: #050403; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
#mFade.on { opacity: 1; }
@media (max-height: 460px) { #objStat { font-size: .8rem; } }

/* briefing narration (moved from narrative.css 2026-10-12, when the story campaign screen was removed) */
#briefBody .brief-narrator{color:var(--d-gold);font-size:1.1rem;font-weight:700;margin-bottom:1rem}#briefBody p{font-weight:400;line-height:1.65}#briefAudio audio{display:block;width:100%;margin-top:1rem}

/* (2026-10-13) a structure clicked on: its name, whose it is, health, progress and what it does */
#register .bld-info { position: relative; padding: .1rem 1.6rem .1rem 0; }
#register .bld-info .bi-head { display: flex; align-items: baseline; gap: .6rem; }
#register .bld-info .bi-head b { font-size: 1rem; }
#register .bld-info .bi-head span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #2f5f8a; }
#register .bld-info.foe .bi-head span { color: #b2342a; }
#register .bld-info .bi-does { margin: .25rem 0 0; font-size: .8rem; color: var(--ink-2); }
#register .bld-info .desel { position: absolute; top: 0; right: 0; }

/* (2026-10-13) the enemy company clicked on: its card, top left over the map, the stats on its back */
#foeCard { position: absolute; left: .6rem; top: 4.4rem; z-index: 6; pointer-events: auto; }
#foeCard .rollrow.rcard { width: 7.4rem; height: 11.2rem; border-color: #6e1f12; box-shadow: 0 0 0 2px rgba(224, 83, 58, .85), 0 10px 22px rgba(0, 0, 0, .5); cursor: pointer; }
#foeCard .rollrow.rcard .nm { font-size: .82rem; }
#foeCard .rollrow.rcard .cost { font-size: .66rem; }
#foeCard .statcard .st-b i { background: #b2342a; }
#foeCard .statcard.us .st-b i { background: var(--army); }
#foeCard .statcard.lk .st-b i { background: var(--lakota); }
#foeCard .statcard .st-l { font-size: .62rem; }
#foeCard .statcard .st-l b { font-size: .6rem; }
#foeCard .statcard .bk-nm { font-size: .72rem; }
@media (max-width: 720px) { #foeCard { top: 3.8rem; } #foeCard .rollrow.rcard { width: 5.6rem; height: 8.6rem; } }

/* (2026-10-13) Survival: the gold on the line under the scale, and the shop between waves */
#objLine .sv-gold { font: 700 1rem/1 "Besley", Georgia, serif; font-style: normal; color: #f3d98a; margin-left: .45rem; }
/* (2026-10-14) Survival: the army screen over the battle between waves, as before it (the field shows faintly round it) */
#army.live { z-index: 25; background: radial-gradient(ellipse at 50% 40%, rgba(58, 42, 32, .97) 0%, rgba(27, 23, 19, .97) 65%, rgba(15, 12, 10, .98) 100%); }
.army-live { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .45rem .7rem; background: var(--d-panel); border: 1px solid var(--d-line); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35); }
.army-live[hidden] { display: none; }
.army-live .grow { flex: 1; }
.army-live .al-clock { font-size: 1rem; color: var(--d-dim); }
.army-live .al-clock b { color: var(--d-gold); font-variant-caps: all-small-caps; letter-spacing: .06em; font-size: 1.1rem; }
.army-live .al-clock .al-t { font-variant: normal; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
#objLine .sv-open { pointer-events: auto; margin-left: .6rem; font: inherit; font-size: .85rem; padding: .1rem .55rem; background: var(--linen-hi); color: var(--ink); border: 1px solid var(--ink); cursor: pointer; }

/* (2026-10-13: footer on the main menu only) the site links show on the title menu, nowhere else */
body:has(#menu[hidden]) > .legal { display: none; }

/* ---- (2026-10-13) Skirmish: Quick setup and Battle options (the developer's mockup). The survey-sheet world kept: linen,
   engraver's ink, the side washes; one tight left column for the three choices that matter, the rest folded away */
#setup .sk-sheet { width: 100% !important; max-width: none; height: 100%; max-height: none; display: flex; flex-direction: column; overflow: hidden;
  padding: .9rem 1.4rem 1rem; }
#setup .sheet-title { margin-bottom: .55rem !important; font-size: 1.5rem !important; }
.sk-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.sk-body.opts-open { grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 1fr); }
.sk-main { min-height: 0; display: flex; flex-direction: column; gap: .7rem; width: 100%; max-width: 62rem; margin: 0 auto; }
.sk-body.opts-open .sk-main { max-width: none; }
.sk-head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.sk-h { margin: 0 !important; font-size: 1.55rem !important; font-weight: 700; color: var(--ink) !important; letter-spacing: .01em; }
.sk-sub { margin: 0; font-style: italic; color: var(--ink-2); font-size: .95rem; }

/* your side against theirs */
.sk-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; border: 1.5px solid var(--ink);
  background: linear-gradient(90deg, var(--side-a) 0 50%, var(--side-b) 50% 100%), var(--linen-hi); --side-a: var(--army-wash); --side-b: var(--lakota-wash); }
.sk-match:has(.sk-side.me.lk) { --side-a: var(--lakota-wash); --side-b: var(--army-wash); }
.sk-side { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: .9rem; padding: .35rem 1rem; min-height: 5.6rem; min-width: 0; }
.sk-sart { position: relative; flex: none; width: 9.5rem; height: 5rem; }
.sk-flag { position: absolute; left: 0; top: .35rem; height: 3.2rem; image-rendering: pixelated; filter: drop-shadow(0 1px 1px rgba(18, 22, 26, .35)); }
.sk-sart canvas { position: absolute; right: -.4rem; bottom: -.2rem; width: 108px; height: 96px; transform: scale(.82); transform-origin: right bottom; image-rendering: pixelated; }
.sk-stxt { display: flex; flex-direction: column; min-width: 0; }
.sk-stxt b { font-size: 1.3rem; font-weight: 700; line-height: 1.15; }
.sk-stxt small { font-size: .9rem; font-style: italic; color: var(--ink-2); }
.sk-side.foe { opacity: .9; }
.sk-side.foe:hover, .sk-side.foe:focus-visible { opacity: 1; background: rgba(234, 237, 228, .45); }
.sk-side:focus-visible, .sk-swap:focus-visible, .sk-optbtn:focus-visible, .sk-btnsel:focus-visible { outline: 2px solid var(--army); outline-offset: -4px; }
.sk-swap { all: unset; cursor: pointer; align-self: center; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--linen-hi); transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .2s; }
.sk-swap .ic { width: 1.3rem; height: 1.3rem; }
.sk-swap:hover { background: #d5dfe8; transform: rotate(180deg); }

/* the three choices that matter: a tile each, the native picker laid over it */
.sk-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.sk-pick { position: relative; display: flex; align-items: center; gap: .75rem; padding: .55rem .8rem; min-height: 3.6rem; border: 1.5px solid var(--ink);
  background: var(--linen-hi); cursor: pointer; transition: background-color .15s; }
.sk-pick:hover { background: #e2e8e6; }
.sk-pick:focus-within { outline: 2px solid var(--army); outline-offset: 2px; }
.sk-pi { width: 1.9rem; height: 1.9rem; stroke-width: 1.4; }
.sk-pt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sk-pl { font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 1rem; font-weight: 700; line-height: 1.1; }
.sk-pv { font-size: .98rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-chev { width: 1.1rem; height: 1.1rem; transition: transform .2s; }
.sk-psel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; font-size: 1rem; }

/* the gold and the army (the modes bought with gold) */
.sk-army { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .45rem .7rem; border: 1.5px solid var(--ink); background: rgba(154, 109, 22, .12); }
.sk-arow { display: flex; align-items: center; gap: .55rem; font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 700; }
.sk-army .sk-sel { width: auto; }
.sk-armyb { min-height: 2.3rem; margin-left: auto; gap: .5rem; font-size: 1rem; }

/* the map */
.sk-preview { flex: 1; min-height: 9rem; margin: 0; position: relative; }
.sk-preview canvas { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; image-rendering: pixelated; display: block;
  border: 1.5px solid var(--ink); box-sizing: border-box; box-shadow: 0 6px 16px rgba(18, 22, 26, .22); }
.sk-under { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.sk-cap { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sk-cap b { font-size: 1.45rem; font-weight: 700; line-height: 1.15; }
.sk-meta { font-size: .95rem; color: var(--ink-2); }
.sk-note { font-size: .85rem; font-style: italic; color: var(--ink-2); }
.sk-note:empty { display: none; }
.sk-optbtn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: .7rem; padding: .5rem .85rem; border: 1.5px solid var(--ink);
  background: var(--linen-hi); min-width: min(19rem, 100%); }
.sk-optbtn:hover { background: #e2e8e6; }
.sk-optbtn > .ic:first-child { width: 1.45rem; height: 1.45rem; }
.sk-ob-t { display: flex; flex-direction: column; flex: 1; }
.sk-ob-t b { font-size: 1.05rem; font-weight: 700; }
.sk-ob-t small { font-size: .85rem; color: var(--ink-2); font-variant-numeric: lining-nums; }
.sk-optbtn .sk-chev { transform: rotate(-90deg); }
.sk-optbtn[aria-expanded="true"] .sk-chev { transform: rotate(90deg); }

/* Battle options */
.sk-opts { min-height: 0; display: flex; flex-direction: column; border: 1.5px solid var(--ink); background: var(--linen-hi); animation: skIn .28s cubic-bezier(.16, 1, .3, 1); }
@keyframes skIn { from { opacity: 0; transform: translateX(.8rem); } }
@media (prefers-reduced-motion: reduce) { .sk-opts { animation: none; } .sk-swap:hover { transform: none; } }
.sk-opts-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem .6rem; border-bottom: 1.5px solid var(--ink); }
.sk-opts-head .ic { width: 1.45rem; height: 1.45rem; }
.sk-opts-head h3 { margin: 0 !important; font-size: 1.2rem !important; font-weight: 700; color: var(--ink) !important; flex: 1; }
.sk-opts-head small { font-size: .85rem; color: var(--ink-2); }
.sk-x { all: unset; cursor: pointer; display: grid; place-items: center; width: 2rem; height: 2rem; margin-right: -.3rem; }
.sk-x:hover { background: rgba(30, 34, 38, .08); }
.sk-x:focus-visible { outline: 2px solid var(--army); }
.sk-settings { flex: 1; min-height: 0; overflow: auto; padding: .2rem .9rem .9rem; scrollbar-color: var(--ink-3) transparent; scrollbar-width: thin; }
.sk-group { margin-top: .7rem; }
.sk-group h4 { margin: .2rem 0 .15rem; font-size: .95rem; font-weight: 700; color: var(--ink-2); letter-spacing: .12em; }
.sk-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) minmax(8.5rem, 11.5rem); gap: .2rem .7rem; align-items: center; padding: .42rem 0;
  border-top: 1px solid rgba(30, 34, 38, .14); }
.sk-row > .ic { width: 1.35rem; height: 1.35rem; color: var(--ink-2); }
.sk-row label { font-size: 1rem; }
.sk-row.changed label::after { content: ""; display: inline-block; width: .42rem; height: .42rem; margin-left: .45rem; border-radius: 50%; background: var(--army); vertical-align: .12em; }
.sk-row .hint { grid-column: 2 / -1; font-size: .82rem; font-style: italic; color: var(--ink-2); }
.sk-row .hint.cmdpick { display: flex; align-items: center; gap: .5rem; }
.sk-row .hint.cmdpick img { width: 1.9rem; height: 1.9rem; image-rendering: pixelated; border: 1px solid var(--ink); }
.sk-sel { font: inherit; font-size: .95rem; color: var(--ink); background: var(--linen); border: 1px solid var(--ink); padding: .32rem .45rem; min-width: 0; width: 100%;
  box-sizing: border-box; cursor: pointer; accent-color: var(--army); }
.sk-sel:focus-visible { outline: 2px solid var(--army); outline-offset: 1px; }
.sk-btnsel { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .3rem; font-size: .95rem;
  border: 1px solid var(--ink); background: var(--linen); padding: .32rem .45rem; }
.sk-btnsel .ic { width: .95rem; height: .95rem; transform: rotate(-90deg); }
.sk-adv { margin-top: 1rem; border: 1.5px solid var(--ink); background: var(--linen); }
.sk-adv summary { list-style: none; display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; cursor: pointer; }
.sk-adv summary::-webkit-details-marker { display: none; }
.sk-adv summary:focus-visible { outline: 2px solid var(--army); outline-offset: -3px; }
.sk-adv summary > .ic:first-child { width: 1.4rem; height: 1.4rem; }
.sk-adv summary span { display: flex; flex-direction: column; flex: 1; font-weight: 700; }
.sk-adv summary small { font-weight: 400; font-size: .82rem; color: var(--ink-2); }
.sk-adv summary .sk-chev { transform: rotate(-90deg); }
.sk-adv[open] summary .sk-chev { transform: none; }
.sk-adv .sk-row { padding-left: .7rem; padding-right: .7rem; }

/* the actions */
.sk-actions { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.sk-actions .grow { flex: 1; }
.sk-ib { gap: .5rem; }
.sk-ib .ic { width: 1.15rem; height: 1.15rem; }
.sk-go { min-width: 12rem; gap: .6rem; font-size: 1.25rem; }
.sk-go .ic { width: 1.4rem; height: 1.4rem; }

@media (max-width: 980px) {
  .sk-body.opts-open { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; overflow: auto; }
  .sk-body.opts-open .sk-opts { animation: none; }
  .sk-body { overflow: auto; }
  .sk-preview { min-height: 0; flex: none; }
  .sk-preview canvas { position: static; width: 100%; height: auto; max-height: none; }
  .sk-main, .sk-opts { min-height: auto; }
  .sk-settings { overflow: visible; }
  .sk-optbtn .sk-chev { transform: none; }
  .sk-optbtn[aria-expanded="true"] .sk-chev { transform: rotate(180deg); }
}
@media (max-width: 640px) {
  #setup { padding: .3rem; }
  #setup .sk-sheet { padding: .7rem .75rem .8rem; }
  .sk-picks { grid-template-columns: minmax(0, 1fr); }
  .sk-sart { width: 4.6rem; height: 4.2rem; }
  .sk-flag { display: none; }
  .sk-sart canvas { transform: scale(.62); right: -.6rem; }
  .sk-side { padding: .3rem .5rem; gap: .5rem; min-height: 4.6rem; }
  .sk-stxt b { font-size: 1.02rem; }
  .sk-stxt small { font-size: .8rem; }
  .sk-swap { width: 2.1rem; height: 2.1rem; }
  .sk-optbtn { width: 100%; }
  .sk-row { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .sk-row .sk-sel, .sk-row .sk-btnsel { grid-column: 2; }
  .sk-actions .btn { padding: .3rem .8rem; }
  .sk-go { min-width: 0; flex: 1 1 100%; order: 9; }
}
.sk-sheet:has(.sk-body:not(.opts-open)) .sk-actions { width: 100%; max-width: 62rem; margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* (2026-10-13: "increase the mini map size by 15% it is allowed to go outside of the current UI border") the map sheet is
   15% taller (8.5rem to 9.8rem) and rises out of the top of the bottom bar as a tab, on its own linen with the bar's rule */
#bottombar #mini { height: 9.775rem; max-width: 29.9rem; }
#bottombar #sheetmap { align-self: end; position: relative; z-index: 2; margin: 0 0 0 -.25rem; padding: .4rem .4rem 0;
  background-color: var(--linen); background-image: var(--weave); border: 1.5px solid var(--ink); border-bottom: 0;
  box-shadow: 0 -4px 10px rgba(18, 22, 26, .22); }
#bottombar #sheetmap figcaption { padding-bottom: .1rem; }

/* ---- (2026-10-16) online battles: the Multiplayer sheet, the battle room, and the bars over the field. The survey world
   kept: linen and ink, engraved small caps, the side washes; each commander's colour is a ribbon on their line */
#online .on-sheet { width: min(60rem, 96vw); }
.on-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.4rem; margin-top: .4rem; }
.on-main { display: flex; flex-direction: column; gap: .9rem; }
.on-name { display: flex; flex-direction: column; gap: .25rem; font-size: 1rem; }
.on-name input, .on-join input, .rm-chat input, .net-chat { font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--linen-hi); border: 1.5px solid var(--ink);
  padding: .45rem .6rem; box-sizing: border-box; min-width: 0; caret-color: var(--army); }
.on-name input:focus-visible, .on-join input:focus-visible, .rm-chat input:focus-visible, .net-chat:focus-visible { outline: 2px solid var(--army); outline-offset: 1px; }
.on-name input::placeholder, .rm-chat input::placeholder, .net-chat::placeholder { color: var(--ink-3); font-style: italic; }
.on-way { border-top: 1.5px solid var(--ink); padding-top: .7rem; display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; }
.on-way h3, .on-games h3 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.on-way p { margin: 0; font-style: italic; color: var(--ink-2); font-size: .95rem; }
.on-way .btn .ic { margin-right: .5rem; }
.on-check { display: flex; align-items: center; gap: .5rem; font-size: .95rem; cursor: pointer; }
.on-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--army); margin: 0; }
.on-join { display: flex; gap: .5rem; }
.on-join input { width: 7.5rem; text-transform: uppercase; letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; }
.on-msg { margin: 0; min-height: 1.3em; font-style: italic; color: var(--lakota); }
.on-games { border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -5px; background: var(--linen-hi); padding: .8rem .9rem; min-height: 14rem; display: flex; flex-direction: column; }
.on-games h3 { display: flex; align-items: baseline; gap: .6rem; padding-bottom: .4rem; border-bottom: 1.5px solid var(--ink); }
.on-games h3 small { font-weight: 400; font-style: italic; font-size: .85rem; color: var(--ink-2); }
.on-list { list-style: none; margin: 0; padding: 0; overflow: auto; max-height: 22rem; scrollbar-color: var(--ink-3) transparent; scrollbar-width: thin; }
.on-list li { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid rgba(30, 34, 38, .16); }
.on-list .og-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.on-list .og-t b { font-size: 1.05rem; }
.on-list .og-t small { font-style: italic; color: var(--ink-2); font-size: .88rem; }
.on-list .btn { min-height: 2.2rem; padding: .15rem .9rem; }
.on-list .og-none { border: 0; font-style: italic; color: var(--ink-2); padding-top: 1rem; }

#room .rm-sheet { width: 100% !important; max-width: none; height: 100%; max-height: none; display: flex; flex-direction: column; overflow: hidden; padding: .9rem 1.4rem 1rem; }
.rm-title { display: flex !important; align-items: center !important; gap: .9rem !important; font-size: 1.5rem !important; margin-bottom: .6rem !important; }
.rm-code { font-variant-caps: normal; font-size: 1.7rem; font-weight: 700; letter-spacing: .32em; color: var(--ink); border: 1.5px solid var(--ink); padding: .05rem .2rem .05rem .5rem;
  background: var(--linen-hi); font-variant-numeric: tabular-nums; user-select: all; }
.rm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 1fr); gap: 1.3rem; }
.rm-left { min-height: 0; display: flex; flex-direction: column; gap: .9rem; }
.rm-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-content: start; }
.rm-team { border: 1.5px solid var(--ink); background: linear-gradient(var(--team-wash), var(--team-wash)), var(--linen-hi); --team-wash: var(--army-wash); }
.rm-team.lk { --team-wash: var(--lakota-wash); }
.rm-team h3 { margin: 0; display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-bottom: 1.5px solid var(--ink); font-size: 1.2rem; font-weight: 700; }
.rm-team h3 span { display: flex; flex-direction: column; line-height: 1.15; }
.rm-team h3 small { font-weight: 400; font-style: italic; font-size: .9rem; color: var(--ink-2); }
.rm-flag { height: 2.1rem; image-rendering: pixelated; filter: drop-shadow(0 1px 1px rgba(18, 22, 26, .35)); }
.rm-flag[src=""] { display: none; }
.rm-team ol { list-style: none; margin: 0; padding: 0; }
.rm-slot { display: flex; align-items: center; gap: .55rem; min-height: 3rem; padding: .3rem .8rem .3rem 0; border-bottom: 1px solid rgba(30, 34, 38, .16); background: rgba(234, 237, 228, .55); }
.rm-slot:last-child { border-bottom: 0; }
.rm-slot.me { background: rgba(234, 237, 228, .95); }
.rm-sw { align-self: stretch; width: .45rem; flex: none; }
.rm-slot.closed .rm-sw, .rm-slot.open .rm-sw { opacity: .3; }
.rm-who { flex: 1; min-width: 0; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-who small { font-style: italic; color: var(--ink-2); font-size: .85rem; }
.rm-who .rm-host { font-style: normal; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--ink); }
.rm-who .rm-off { color: var(--lakota); }
.rm-open { font-style: italic; color: var(--ink-2); }
.rm-closed { font-style: italic; color: var(--ink-3); }
.rm-ready, .rm-notready { font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: .95rem; }
.rm-ready { color: var(--good); }
.rm-notready { color: var(--ink-3); }
.rm-slot select { font: inherit; font-size: .9rem; color: var(--ink); background: var(--linen); border: 1px solid var(--ink); padding: .2rem .3rem; max-width: 8.5rem; cursor: pointer; }
.rm-slot .btn { min-height: 2rem; padding: .1rem .7rem; font-size: .92rem; }
.rm-wait { grid-column: 1 / -1; margin: 0; font-style: italic; color: var(--ink-2); }
.rm-chat { flex: 1; min-height: 6rem; display: flex; flex-direction: column; border: 1.5px solid var(--ink); background: var(--linen-hi); }
.rm-chat ol { flex: 1; min-height: 0; overflow: auto; list-style: none; margin: 0; padding: .45rem .7rem; font-size: .95rem; scrollbar-color: var(--ink-3) transparent; scrollbar-width: thin; }
.rm-chat li { padding: .1rem 0; }
.rm-chat ol:empty::before { content: "Messages to the room show here."; font-style: italic; color: var(--ink-3); }
.rm-chat li b { font-variant-caps: all-small-caps; letter-spacing: .06em; margin-right: .3rem; }
.rm-chat input { border-width: 1.5px 0 0; }
.rm-side { min-height: 0; display: flex; flex-direction: column; gap: .5rem; overflow: auto; scrollbar-color: var(--ink-3) transparent; scrollbar-width: thin; }
.rm-preview { flex: none; height: clamp(9rem, 26vh, 17rem); }
.rm-mapname { font-size: 1.3rem; }
.rm-settings { display: flex; flex-direction: column; border-top: 1.5px solid var(--ink); }
.rm-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 12rem); align-items: center; gap: .7rem; padding: .32rem 0; border-bottom: 1px solid rgba(30, 34, 38, .14); font-size: .98rem; }
.rm-set select { font: inherit; font-size: .95rem; color: var(--ink); background: var(--linen); border: 1px solid var(--ink); padding: .28rem .4rem; width: 100%; cursor: pointer; }
.rm-set select:disabled { cursor: default; opacity: 1; color: var(--ink); background: transparent; border-color: transparent; appearance: none; text-align: right; padding-right: 0; }
.rm-slot select:focus-visible, .rm-set select:focus-visible { outline: 2px solid var(--army); outline-offset: 1px; }
.rm-actions { flex-wrap: wrap; }
.rm-why { font-style: italic; color: var(--ink-2); font-size: .95rem; max-width: 24rem; text-align: right; }
.rm-actions .btn .ic { margin-right: .45rem; }

/* over the field: the room and the connection, top left; a notice while the battle waits; the line to talk */
.net-bar { position: absolute; left: .6rem; top: 4.3rem; z-index: 12; display: flex; align-items: center; gap: .4rem; padding: .12rem .55rem;
  font-size: .8rem; font-style: italic; color: var(--ink-2); background: var(--linen-hi); border: 1px solid var(--ink); pointer-events: none; white-space: nowrap; }
.nb-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--good); }
.nb-dot.off { background: var(--lakota); animation: nbBlink 1s steps(2) infinite; }
@keyframes nbBlink { 50% { opacity: .2; } }
.net-wait { position: absolute; left: 50%; top: 5.2rem; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .3rem .7rem;
  max-width: min(44rem, 92vw); padding: .6rem 1rem; background: var(--linen-hi); background-image: var(--weave); border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -5px;
  box-shadow: var(--shadow); font-size: 1rem; text-align: center; }
.net-wait [data-left] { font-variant-numeric: lining-nums tabular-nums; }
.net-wait .nw-btns { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.net-wait .btn { min-height: 2.2rem; padding: .15rem .8rem; font-size: .92rem; }
.net-chat { position: absolute; left: 50%; bottom: 12rem; transform: translateX(-50%); z-index: 31; width: min(32rem, 90vw); box-shadow: var(--shadow); }
#notes li.chat { font-style: normal; box-shadow: inset 0 -2px 0 var(--ink-3), 0 3px 8px rgba(18, 22, 26, .25); }

@media (max-width: 760px) {
  .on-body, .rm-body, .rm-teams { grid-template-columns: minmax(0, 1fr); }
  #room .rm-sheet { overflow: auto; height: auto; min-height: 100%; }
  .rm-side { overflow: visible; }
  .rm-code { font-size: 1.35rem; }
  .rm-actions .rm-why { order: -1; flex-basis: 100%; text-align: left; max-width: none; }
}

/* ---- (2026-10-16, evening) our HUD round ------------------------------------------------------------------ */
/* the compass: N, E, S and W the same size, each the same way in from the ring, the needles clear of them */
.tool.compass text { font-size: 6.6px; dominant-baseline: central; }
.tool.compass .cn { font-size: 6.6px; }
/* the Objectives button by the compass; it flashes when the objectives change */
.tool.objbtn { position: relative; }
.tool.objbtn[aria-expanded="true"] { background-color: var(--linen-hi); box-shadow: inset 0 0 0 2px var(--ink); }
.tool.objbtn.flash { animation: obj-flash 1s ease-in-out 0s 8; }
.tool.objbtn.land { animation: obj-land .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes obj-flash { 0%, 100% { background-color: var(--linen); box-shadow: none; } 50% { background-color: #f3d98a; box-shadow: 0 0 0 3px #d39b1d, 0 0 14px 3px rgba(243, 217, 138, .9); } }
@keyframes obj-land { 0% { transform: scale(1.25); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tool.objbtn.flash { animation: none; background-color: #f3d98a; } .tool.objbtn.land { animation: none; } }
/* the panel and a mission's count open under the top right corner */
#objDock { position: absolute; right: .6rem; top: 4.2rem; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; z-index: 7; pointer-events: none; }
#objDock > * { pointer-events: auto; }
#objDock #objPanel { position: relative; left: auto; top: auto; }
#objDock #objPanel.in { transform-origin: top right; }
#objDock #objStat { margin: 0 .1rem 0 0; pointer-events: none; }
#app.mapview #objDock { visibility: hidden; }
#hud:has(#objStat:not([hidden])) #notes { top: 5.9rem; }
/* the objectives card at the start of a battle; a click anywhere sends it into the button */
#objPop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(12, 14, 16, .3); cursor: pointer; transition: background .35s ease; }
#objPop[hidden] { display: none; }
#objPop .op-card { position: relative; width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 6rem); overflow: auto; padding: 1rem 1.4rem 1rem; animation: op-pop-in .34s cubic-bezier(.16, 1, .3, 1) both; }
#objPop .op-hint { display: block; margin-top: .8rem; font-style: italic; color: var(--ink-3); text-align: center; font-size: .85rem; }
#objPop.out { background: rgba(12, 14, 16, 0); pointer-events: none; }
#objPop.out .op-card { transition: transform .5s cubic-bezier(.6, 0, .85, .4), opacity .5s ease-in; }
@keyframes op-pop-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #objPop .op-card { animation: none; } #objPop.out .op-card { transition: opacity .2s; } }
/* the global skills: a column just above the map sheet, so the muster queue at the top left can grow down */
#globals { top: auto; bottom: calc(var(--bar, 0rem) + 1.6rem); transform: none; }
/* the troops being raised (top left): 10% smaller */
#prod { transform: scale(.9); transform-origin: top left; }
/* the enemy company clicked on: top right, under the top bar; the notes move down while it shows */
#foeCard { left: auto; right: .6rem; top: 4.3rem; }
#hud:has(#foeCard:not([hidden])) #notes { top: calc(4.3rem + 12rem); }
#hud:has(#foeCard:not([hidden])) #objDock { top: calc(4.3rem + 12rem); }

/* (2026-10-16) the Open games list's Refresh button, at the right of its heading */
.on-games h3 .on-refresh { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; padding: .25rem .6rem; }
.on-games h3 .on-refresh .ic { width: 1rem; height: 1rem; }

/* (2026-10-16) voice chat: the speaker mark by a name (lit while they talk), Mute buttons, the battle's voice panel */
.vc-mark { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-left: .35rem; vertical-align: -.2rem; color: var(--ink-3); border-radius: 50%; transition: color .1s, box-shadow .1s; }
.vc-mark svg { width: .95rem; height: .95rem; }
.vc-mark.talk { color: #2f7a3a; box-shadow: 0 0 0 2px rgba(47, 122, 58, .35); }
.vc-mark.muted { color: #a5402c; opacity: .7; }
.btn.rm-mute { font-size: .78rem; padding: .1rem .5rem; margin-left: .35rem; }
.btn.rm-voice.on { background: var(--linen-hi); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.rm-voice .ic { width: 1rem; height: 1rem; }
.net-voice { position: absolute; right: .6rem; bottom: calc(var(--bar, 0rem) + .6rem); z-index: 12; background: var(--linen); border: 1.5px solid var(--ink); box-shadow: var(--shadow); padding: .35rem .45rem; min-width: 11rem; max-width: 16rem; font-size: .84rem; }
.net-voice[hidden] { display: none; }
.net-voice .nv-head { display: flex; gap: .3rem; justify-content: flex-end; }
.net-voice ul { list-style: none; margin: .35rem 0 0; padding: .3rem 0 0; border-top: 1px solid var(--ink-3); display: flex; flex-direction: column; gap: .2rem; }
.net-voice li { display: flex; align-items: center; gap: .3rem; }
.net-voice li .vc-mark { margin-left: 0; }
.net-voice .nv-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-voice .nv-b { font-size: .76rem; padding: .1rem .45rem; }
.net-voice .nv-b.off { color: #a5402c; }
#app.mapview .net-voice, #app.cine .net-voice { visibility: hidden; }

/* ---- (2026-10-16) the top bars solid ("make them solid not black/blue black/red"): the share in the side's
   colour, the rest plain paper */
.bar { background: var(--linen-hi); }
.bar i { mix-blend-mode: normal; opacity: 1; }

/* the compass in the map's corner (its place in the top bar went to Diplomacy) */
#sheetmap { position: relative; }
.tool.compass.mini-compass { position: absolute; top: .75rem; right: .75rem; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; outline: 0;
  box-shadow: 0 1px 3px rgba(18, 22, 26, .35); border-radius: 50%; background: rgba(244, 240, 228, .88); background-image: none; pointer-events: none; z-index: 2; }
.tool.compass.mini-compass svg { width: 1.9rem; height: 1.9rem; }

/* Diplomacy */
.tool.dipbtn[aria-expanded="true"] { background-color: var(--linen-hi); box-shadow: inset 0 0 0 2px var(--ink); }
#dipPanel { position: absolute; left: 50%; top: 4.4rem; transform: translateX(-50%); z-index: 25; width: min(46rem, calc(100% - 2rem)); max-height: calc(100% - var(--bar) - 5.5rem);
  overflow: auto; padding: .7rem .9rem .8rem; background-color: var(--linen); background-image: var(--weave); border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -5px; box-shadow: var(--shadow); }
#dipPanel[hidden] { display: none; }
.dip-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1.5px solid var(--ink); padding-bottom: .35rem; margin-bottom: .4rem; }
.dip-head h2 { margin: 0; font-size: 1.25rem; letter-spacing: .04em; }
.dip table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.dip th { font-weight: 400; font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--ink-2); text-align: center; padding: .15rem .3rem; border-bottom: 1px solid var(--ink-3); }
.dip th:first-child, .dip td:first-child { text-align: left; }
.dip td { text-align: center; padding: .28rem .3rem; border-bottom: 1px solid rgba(30, 34, 38, .12); }
.dip tr.me td { background: rgba(234, 237, 228, .9); }
.dip .dn { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.dip .sw { width: .8rem; height: .8rem; border: 1px solid var(--ink); flex: none; }
.dip .dn small { color: var(--ink-2); font-style: italic; }
.dip .st { font-style: italic; }
.dip .st.ally { color: #2f6b3a; } .dip .st.enemy { color: var(--lakota); } .dip .st.neutral { color: var(--ink-2); }
.dip input[type="radio"] { width: 1rem; height: 1rem; accent-color: var(--ink); cursor: pointer; }
.dip input[type="radio"]:disabled { cursor: default; opacity: .45; }
.dip .tr { display: inline-flex; gap: .25rem; }
.dip .tr button { display: inline-flex; align-items: center; gap: .15rem; font: inherit; font-size: .8rem; padding: .12rem .35rem; border: 1px solid var(--ink); background: var(--linen-hi); cursor: pointer; }
.dip .tr button .ic { width: .95rem; height: .95rem; }
.dip .tr button:disabled { opacity: .4; cursor: default; }
.dip .tr button:not(:disabled):hover { background: #f3e7c2; }
.dip .stores { display: inline-flex; gap: .55rem; font-size: .82rem; }
.dip .stores span { display: inline-flex; align-items: center; gap: .15rem; } .dip .stores .ic { width: .9rem; height: .9rem; }
.dip .asks { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .6rem; padding-top: .45rem; border-top: 1px solid var(--ink-3); }
.dip .asks span { font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--ink-2); margin-right: .2rem; }
.dip .note { margin: .45rem 0 0; font-size: .8rem; font-style: italic; color: var(--ink-2); }

/* the players, bottom right above the bar; voice chat stacks above them */
#brDock { position: absolute; right: .6rem; bottom: calc(var(--bar, 0rem) + .6rem); z-index: 12; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; pointer-events: none; }
#brDock > * { pointer-events: auto; }
#brDock .net-voice { position: static; }
#plist { position: static; padding: .3rem .5rem; min-width: 11rem; max-width: 17rem; font-size: .82rem; background-color: var(--linen); border: 1.5px solid var(--ink); box-shadow: var(--shadow); }
#plist:empty { display: none; }
#plist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .12rem; }
#plist li { display: flex; align-items: center; gap: .35rem; }
#plist .sw { width: .7rem; height: .7rem; border: 1px solid var(--ink); flex: none; }
#plist .pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plist .pn small { color: var(--ink-2); font-style: italic; }
#plist .ps { font-size: .74rem; font-style: italic; color: var(--ink-2); }
#plist .ps.ally { color: #2f6b3a; } #plist .ps.enemy { color: var(--lakota); }
#plist .ph { font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--ink-2); font-size: .78rem; border-bottom: 1px solid var(--ink-3); margin-bottom: .15rem; }
#app.mapview #brDock, #app.cine #brDock, #app.mapview #dipPanel, #app.cine #dipPanel { visibility: hidden; }

/* (2026-10-16) the asks offered in the battle chat */
.net-chat-sug { position: absolute; left: 50%; bottom: calc(12rem + 2.9rem); transform: translateX(-50%); z-index: 31; width: min(32rem, 90vw); margin: 0; padding: .2rem 0;
  list-style: none; background: var(--linen-hi); border: 1.5px solid var(--ink); box-shadow: var(--shadow); }
.net-chat-sug[hidden] { display: none; }
.net-chat-sug li { padding: .3rem .7rem; cursor: pointer; font-style: italic; }
.net-chat-sug li.on, .net-chat-sug li:hover { background: #f3e7c2; }
.net-chat-sug li.wait { opacity: .5; }

/* =====================================================================================================================
   (2026-10-16: "New set of UI and icons has been generated add them to the game") FRONTIER ARSENAL
   blackhills/new UI: dark tobacco leather, blued gunmetal, aged brass, warm ivory lettering. The paper sheet's tokens
   are re-pointed to the new palette (style-tokens.json), and the main pieces wear the new art as nine-slice frames
   (nine-slice.json: border-image over the old 1.5 px border, so no layout moves). Art: assets/ui/.
   ===================================================================================================================== */
:root {
  --linen: #20201d; --linen-hi: #2c2c28; --linen-lo: #1b1b18;
  --ink: #efdfb9; --ink-2: #c9b994; --ink-3: #978a70;
  --sepia: #dfbb70; --brass: #ad8446; --brass-hi: #dfbb70;
  --army: #5d92c6; --army-wash: rgba(93, 146, 198, .22);
  --lakota: #d4704f; --lk-rgb: 212, 112, 79;
  --good: #9db365; --warn: #dfbb70;
  --shadow: 0 7px 20px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .6);
  --weave: none;
  --fa-panel: url("assets/ui/panel-gunmetal.png");
  --fa-leather: url("assets/ui/panel-leather.png");
}
html, body { background: #161614; color: var(--ink); }
::selection { background: var(--brass); color: #161614; }

/* every panel: gunmetal plate in a brass-riveted frame */
.sheet { outline: 0; border-color: transparent; border-image: var(--fa-panel) 48 fill / 14px / 3px stretch; }
#topbar { border-image: url("assets/ui/header-bar.png") 40 fill / 12px / 3px stretch; }
#bottombar { border-image: var(--fa-leather) 48 fill / 14px / 0 stretch; }
#tip { border-color: transparent; background: none; border-image: url("assets/ui/tooltip-panel.png") 40 fill / 11px / 2px stretch; color: var(--ink); }
#sheetmap { border-image: none; background: none; box-shadow: none; }
#sheetmap #mini { border: 0; }
#sheetmap::after { content: ""; position: absolute; inset: .05rem .05rem 1.3rem; pointer-events: none; border: 12px solid transparent; border-image: url("assets/ui/minimap-frame.png") 48 / 12px / 0 stretch; }

/* square tools and skill squares: riveted tiles */
.tool, .gsk { outline: 0; border-color: transparent; background: none; border-image: url("assets/ui/tile-default.png") 32 fill / 8px / 0 stretch; color: var(--ink); }
.tool:hover, .gsk:hover { background: none; border-image-source: url("assets/ui/tile-hover.png"); }
.tool[aria-expanded="true"], .tool.on, .gsk.armed { border-image-source: url("assets/ui/tile-hover.png"); box-shadow: 0 0 0 2px var(--brass-hi), var(--shadow); }
.gsk[aria-disabled="true"] { border-image-source: url("assets/ui/tile-disabled.png"); }
.gsk[aria-disabled="true"] svg, .stamp[aria-disabled="true"] .ic { opacity: .55; }
.tool .ic, .gsk svg { width: 1.6rem; height: 1.6rem; }
.tool.compass.mini-compass { border-image: none; }
@keyframes obj-flash { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px var(--brass-hi), 0 0 14px rgba(223, 187, 112, .8); } }

/* buttons: leather plates in brass, brighter on hover, inset when pressed, steel when off */
.btn { outline: 0; border-color: transparent; background: none; color: var(--ink); border-image: url("assets/ui/button-default.png") 30 fill / 9px / 0 stretch; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.btn:hover { background: none; border-image-source: url("assets/ui/button-hover.png"); }
.btn:active, .btn[aria-pressed="true"] { border-image-source: url("assets/ui/button-pressed.png"); }
.btn:disabled, .btn[aria-disabled="true"] { border-image-source: url("assets/ui/button-disabled.png"); color: #cfcabd; opacity: .75; }
.btn.primary { border-image-source: url("assets/ui/button-hover.png"); color: #fff3d6; }
.btn.danger { color: #ffb59c; }

/* the company's skill and order buttons */
.stamp { outline: 0; border-color: transparent; background: none; border-image: url("assets/ui/tile-default.png") 32 fill / 8px / 0 stretch; color: var(--ink); }
.stamp:hover { background: none; border-image-source: url("assets/ui/tile-hover.png"); }
.stamp.pressed, .stamp.on { border-image-source: url("assets/ui/button-pressed.png"); }
.stamp[aria-disabled="true"] { border-image-source: url("assets/ui/tile-disabled.png"); color: #d6d0c2; }
.stamp .ic { width: 1.7rem; height: 1.7rem; }
.stamp .lb { text-shadow: 0 1px 0 rgba(0, 0, 0, .7); }

/* chips, tabs and the muster roll rows */
.chips button { border-color: var(--brass); background: var(--linen-lo); color: var(--ink); }
.chips button[aria-pressed="true"], .opt-tabs button[aria-selected="true"], .op-tabs button.on { border-image: url("assets/ui/tab-selected.png") 30 fill / 8px / 0 stretch; color: #1b1407; text-shadow: none; }
.rollrow { background: var(--linen-lo); border-color: var(--brass); }
.rollrow:hover { background: #2f2520; }

/* fields */
select, .sk-sel, .rm-slot select, .rm-set select { color: var(--ink); background-color: #161614; border-color: var(--brass); }
input:not([type]), input[type="text"], .on-name input, .on-join input, .rm-chat input, .net-chat, .saves-name input { color: var(--ink); background: #161614; border-color: var(--brass); }
input::placeholder { color: var(--ink-3); }

/* round and square choices */
.dip input[type="radio"], input[type="radio"].fa { appearance: none; -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin: 0; background: url("assets/ui/radio-off.png") center / contain no-repeat; vertical-align: middle; }
.dip input[type="radio"]:checked { background-image: url("assets/ui/radio-on.png"); }
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin: 0 .3rem 0 0; background: url("assets/ui/checkbox-off.png") center / contain no-repeat; vertical-align: middle; cursor: pointer; }
input[type="checkbox"]:checked { background-image: url("assets/ui/checkbox-on.png"); }

/* sliders (sound) */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 1.1rem; background: url("assets/ui/slider-track.png") center / 100% 70% no-repeat; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; border: 0; background: url("assets/ui/slider-knob.png") center / contain no-repeat; cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border: 0; background: url("assets/ui/slider-knob.png") center / contain no-repeat; cursor: pointer; }

/* scrollbars */
* { scrollbar-color: var(--brass) #161614; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #161614 url("assets/ui/scrollbar-track.png") center / 100% 100% no-repeat; }
::-webkit-scrollbar-thumb { background: url("assets/ui/scrollbar-thumb.png") center / 100% 100% no-repeat; }

/* unit cards in the bottom bar: the portrait frame, brass when picked, steel when slain */
.card { border-color: transparent; background: #161614; border-image: url("assets/ui/portrait-frame.png") 48 / 7px / 1px stretch; box-shadow: none; }
.card.sel { border-image-source: url("assets/ui/portrait-selected-overlay.png"); box-shadow: 0 0 10px rgba(223, 187, 112, .65); }
.card.slain { border-image-source: url("assets/ui/portrait-disabled-overlay.png"); }
/* the muster queue's slots */
#prod .pq img { border-color: transparent; background: #161614; border-image: url("assets/ui/queue-slot.png") 30 fill / 5px / 0 stretch; }

/* the title */
.title.fa-logo { font-size: 0; line-height: 0; }
.title.fa-logo img { display: block; width: min(34rem, 86vw); height: auto; margin: 0 auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }

/* light colours that were set by hand on the paper sheet */
#notes li { background: var(--linen); color: var(--ink); border-color: var(--brass); }
#toast { background: #0f1213; color: var(--ink); border: 1px solid var(--brass); }
#topbar .pop { border-left-color: rgba(223, 187, 112, .35); }
.dip .tr button, .dip tr.me td { background: var(--linen-lo); color: var(--ink); border-color: var(--brass); }
.dip .tr button:not(:disabled):hover, .net-chat-sug li.on, .net-chat-sug li:hover { background: #4a3a22; }
.dip .st.ally, #plist .ps.ally { color: #a8c47a; }
.net-chat-sug { background: #161614; border-color: var(--brass); color: var(--ink); }
.dip tr td { border-bottom-color: rgba(223, 187, 112, .14); }
/* the menus' cartouche: the leather panel in its brass frame */
.cartouche { outline: 0; border-color: transparent; background: none; border-image: var(--fa-leather) 48 fill / 16px / 0 stretch; }
.cartouche::before, .cartouche::after { opacity: .35; }
.title.fa-logo img { width: min(34rem, 100%); }
#war .btn.primary, #brief .btn.primary, #hist .btn.primary, #army .btn.primary, #atlas .btn.primary { background: none; color: #fff3d6; border-color: transparent; font-weight: 700; }
#war .btn.primary:disabled, #brief .btn.primary:disabled, #hist .btn.primary:disabled, #army .btn.primary:disabled, #atlas .btn.primary:disabled { background: none; border-image-source: url("assets/ui/button-disabled.png"); color: #cfcabd; }
/* (Frontier Arsenal, fixes after the first look) */
.rtab { border-color: var(--brass); color: var(--ink); }
.rtab.on { background: none; border-color: transparent; border-image: url("assets/ui/tab-selected.png") 30 fill / 7px / 0 stretch; color: #1b1407; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 236, 190, .5); }
.rtab:hover:not(.on), #roll.lk .rtab:hover:not(.on) { background: rgba(223, 187, 112, .12); }
.chips button[aria-pressed="true"], .opt-tabs button[aria-selected="true"], .op-tabs button.on { font-weight: 700; text-shadow: 0 1px 0 rgba(255, 236, 190, .5); }
/* the sound sliders: the brass track and knob */
input[type="range"], .vm-slider input[type="range"] { background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: .7rem; border: 0; background: url("assets/ui/slider-track.png") center / 100% 100% no-repeat; }
input[type="range"]::-moz-range-track { height: .7rem; border: 0; background: url("assets/ui/slider-track.png") center / 100% 100% no-repeat; }
input[type="range"]::-webkit-slider-thumb { margin-top: -.28rem; }
/* bigger pictures in the square tools, the global skills and the company's buttons */
#corner .tool svg, #corner .tool .ic { width: 1.75rem; height: 1.75rem; }
.gsk svg { width: 2.15rem !important; height: 2.15rem !important; }
.stamp .ic { width: 1.95rem; height: 1.95rem; }
/* small icons on the dark bars: a soft light behind them so the darker ones (the supply crate) read */
#stores .ic, .rollrow .ic, .card .ic, #plist .ic, .dip .ic, #prod .ic { filter: drop-shadow(0 0 1.5px rgba(255, 228, 170, .55)); }
#stores .ic { width: 1.35em; height: 1.35em; }
/* the equipment painting on the back of a card, and the stat bars in brass */
.back .bk-wpn { display: block; width: 86%; height: 1.9rem; object-fit: contain; margin: .05rem auto .15rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.back .st-b { background: #121412; border: 1px solid rgba(173, 132, 70, .7); }
.back .st-b i { background: url("assets/ui/meter-fill-gold.png") left center / auto 100% repeat-x; }
.statcard.flipped .back { color: var(--ink); background: linear-gradient(#262622, #1b1b18); box-shadow: inset 0 0 0 1px rgba(173, 132, 70, .55); }
.statcard .bk-nm { color: var(--brass-hi); }
.utype.statcard .bk-wpn { display: none; }

/* (2026-10-16: "Some of the UI's look stretched to fit and they lose quality. I don't want that") nothing is
   stretched any more: the frames repeat their edges (round) and draw no middle; the middle is a seamless texture made
   from the same art (assets/ui/tex-*.png: the panel's middle, mirrored into a tile), shown at its own size or smaller */
.sheet, .cartouche, #dipPanel { border-image-slice: 48; border-image-repeat: round; background: url("assets/ui/tex-gunmetal.png") 0 0 / 284px auto repeat; }
#bottombar { border-image-slice: 48; border-image-repeat: round; background: url("assets/ui/tex-leather.png") 0 0 / 297px auto repeat; }
.cartouche { background-image: url("assets/ui/tex-leather.png"); background-size: 297px auto; }
#topbar { border-image-slice: 40; border-image-repeat: round; background: url("assets/ui/tex-leather.png") 0 0 / 297px auto repeat; }
#tip { border-image-slice: 40; border-image-repeat: round; background: url("assets/ui/tex-gunmetal.png") 0 0 / 284px auto repeat; }
.btn { border-image-slice: 30; border-image-repeat: round; background: url("assets/ui/tex-button.png") center / 290px auto repeat; }
.btn:hover { background-image: url("assets/ui/tex-button-hover.png"); }
.btn:active, .btn[aria-pressed="true"] { background-image: url("assets/ui/tex-button-pressed.png"); }
.btn:disabled, .btn[aria-disabled="true"], #war .btn.primary:disabled, #brief .btn.primary:disabled, #hist .btn.primary:disabled, #army .btn.primary:disabled, #atlas .btn.primary:disabled { background-image: url("assets/ui/tex-button-disabled.png"); }
.btn.primary, #war .btn.primary, #brief .btn.primary, #hist .btn.primary, #army .btn.primary, #atlas .btn.primary { background-image: url("assets/ui/tex-button-hover.png"); }
.rtab.on, .chips button[aria-pressed="true"], .opt-tabs button[aria-selected="true"], .op-tabs button.on { border-image-repeat: round; }
#topbar #stores, #topbar #scale, #topbar #corner { background: none; }
/* (second pass) the frames' plain brass strips may run long (stretch) but never their decorated middles: no fill, and
   the middle is the seamless texture at its own size */
.sheet, .cartouche, #dipPanel, #bottombar, #topbar, #tip, .btn, .rtab.on, .chips button[aria-pressed="true"], .opt-tabs button[aria-selected="true"], .op-tabs button.on { border-image-repeat: stretch; }
.sheet, #dipPanel, #tip { background-size: 210px auto; }
#bottombar, #topbar, .cartouche { background-size: 220px auto; }
.btn { background-size: 203px auto; background-position: center; }
.back .bk-wpn { height: 1.25rem; margin: 0 auto .05rem; }

/* (2026-10-16) the loading screen: the Paha Sapa at dusk, the logo, the bar, a Regular marching along its top */
#loading { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; margin: 0; padding: 0 1rem; background: #0f1314 url("assets/ui/black-hills-scene.svg") center bottom / cover no-repeat; color: var(--ink); font-size: 1rem; font-style: normal; transition: opacity .35s ease; }
#loading.done { opacity: 0; pointer-events: none; }
#loading .sv-box { width: min(44rem, 92vw); display: grid; justify-items: center; gap: .9rem; transform: translateY(6vh); }
#loading .sv-logo { width: min(30rem, 84vw); height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7)); margin-bottom: 1.2rem; }
#loading .sv-bar { position: relative; width: 100%; padding-top: 88px; }
#loading .sv-track { position: relative; height: 16px; background: #121412; border: 2px solid #ad8446; border-radius: 8px; overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .8), 0 0 0 1px #000, 0 6px 16px rgba(0, 0, 0, .6); }
#loading .sv-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); background: url("assets/ui/kit/meter-fill-gold-frame.png") left center / auto 100% repeat-x;
  box-shadow: 2px 0 6px rgba(255, 214, 140, .7); transition: width .25s linear; }
/* the soldier: the Regulars' march (assets/units/vi1_March.png, 16 x 29 frames, 8 a row; row 5 faces east) at 3x */
#loading .sv-man { position: absolute; left: calc(var(--p) * (100% - 48px)); bottom: 3px; width: 48px; height: 87px; z-index: 2;
  background: url("assets/units/vi1_March.png") 0 -435px / 384px 696px no-repeat; image-rendering: pixelated; image-rendering: crisp-edges;
  animation: sv-march .88s steps(8) infinite; transition: left .25s linear; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .55)); }
@keyframes sv-march { from { background-position-x: 0; } to { background-position-x: -384px; } }
#loading .sv-text { margin: .2rem 0 0; font-size: 1.2rem; font-style: italic; color: #efdfb9; text-shadow: 0 2px 6px #000, 0 0 2px #000; letter-spacing: .02em; }
#loading .sv-pct { font-style: normal; font-variant-numeric: tabular-nums; color: #dfbb70; margin-left: .2rem; }
@media (prefers-reduced-motion: reduce) { #loading .sv-man { animation: none; } }
#loading .sv-fill { background: linear-gradient(#f6d98e, #d8a64b 45%, #a8792c 70%, #7a561c); }

/* ==== KIT: built by blackhills/tools/build_ui_kit.py from blackhills/new UI/modular-kit (do not edit by hand; rerun the script) ==== */
.sheet, #dipPanel, .panel-d, .sk-opts, .sk-adv, .sk-match, .on-games, .rm-team, .rm-chat, .saves-list { border-color: transparent; border-image: url("assets/ui/kit/panel-gunmetal-frame.png") 56 56 56 56 / 14.6px 14.6px 14.6px 14.6px / 0 round; background: #20201d url("assets/ui/kit/steel-fill.png") center / 512px 512px repeat; background-clip: padding-box; }
.sk-pick, .sk-optbtn, .side, .camp-cont, .sk-pick:hover, .sk-optbtn:hover, .side:hover, .side[aria-pressed="false"]:hover { border-color: transparent; border-image: url("assets/ui/kit/panel-leather-frame.png") 64 64 64 64 / 15.4px 15.4px 15.4px 15.4px / 0 round; background: url("assets/ui/kit/panel-leather-fill.png") center / 136.8px 73.4px repeat; background-clip: padding-box; }
#bottombar, .cartouche { border-color: transparent; border-image: url("assets/ui/kit/panel-leather-frame.png") 64 64 64 64 / 17.9px 17.9px 17.9px 17.9px / 0 round; background: url("assets/ui/kit/panel-leather-fill.png") center / 159.6px 85.7px repeat; background-clip: padding-box; }
#topbar { border-color: transparent; border-image: url("assets/ui/kit/header-bar-frame.png") 56 64 56 64 / 16.8px 19.2px 16.8px 19.2px / 0 round; background: url("assets/ui/kit/header-bar-fill.png") center / 206.4px 36.0px repeat; background-clip: padding-box; }
#tip { border-color: transparent; border-image: url("assets/ui/kit/tooltip-panel-frame.png") 40 40 40 40 / 11.2px 11.2px 11.2px 11.2px / 0 round; background: url("assets/ui/kit/tooltip-panel-fill.png") center / 98.6px 53.8px repeat; background-clip: padding-box; }
.btn, #war .btn, #brief .btn, #hist .btn, #army .btn, #atlas .btn { border-color: transparent; border-image: url("assets/ui/kit/button-default-frame.png") 50 54 50 54 / 14.0px 15.1px 14.0px 15.1px / 0 round; background: url("assets/ui/kit/button-default-fill.png") center / 142.2px 27.4px repeat; background-clip: padding-box; }
.btn:hover, #war .btn:hover, #brief .btn:hover, #hist .btn:hover, #army .btn:hover, #atlas .btn:hover, .btn.primary, #war .btn.primary, #brief .btn.primary, #hist .btn.primary, #army .btn.primary, #atlas .btn.primary, .btn.primary:hover, #war .btn.primary:hover, #brief .btn.primary:hover, #hist .btn.primary:hover, #army .btn.primary:hover, #atlas .btn.primary:hover, .btn.danger:hover { border-color: transparent; border-image: url("assets/ui/kit/button-hover-frame.png") 50 54 50 54 / 14.0px 15.1px 14.0px 15.1px / 0 round; background: url("assets/ui/kit/button-hover-fill.png") center / 143.4px 27.4px repeat; background-clip: padding-box; }
.btn:active, #war .btn:active, #brief .btn:active, #hist .btn:active, #army .btn:active, #atlas .btn:active, .btn[aria-pressed="true"] { border-color: transparent; border-image: url("assets/ui/kit/button-pressed-frame.png") 50 54 50 54 / 14.0px 15.1px 14.0px 15.1px / 0 round; background: url("assets/ui/kit/button-pressed-fill.png") center / 145.0px 27.4px repeat; background-clip: padding-box; }
.btn:disabled, #war .btn:disabled, #brief .btn:disabled, #hist .btn:disabled, #army .btn:disabled, #atlas .btn:disabled, .btn.primary:disabled, #war .btn.primary:disabled, #brief .btn.primary:disabled, #hist .btn.primary:disabled, #army .btn.primary:disabled, #atlas .btn.primary:disabled, .btn[aria-disabled="true"] { border-color: transparent; border-image: url("assets/ui/kit/button-disabled-frame.png") 50 54 50 54 / 14.0px 15.1px 14.0px 15.1px / 0 round; background: url("assets/ui/kit/button-disabled-fill.png") center / 142.2px 27.4px repeat; background-clip: padding-box; }
.tool, .gsk, .stamp { border-color: transparent; border-image: url("assets/ui/kit/tile-default-frame.png") 64 64 64 64 / 12.8px 12.8px 12.8px 12.8px / 0 round; background: url("assets/ui/kit/tile-default-fill.png") center / 68.4px 62.4px repeat; background-clip: padding-box; }
.tool:hover, .gsk:hover, .stamp:hover, .stamp:hover:not([aria-disabled="true"]) { border-color: transparent; border-image: url("assets/ui/kit/tile-hover-frame.png") 64 64 64 64 / 12.8px 12.8px 12.8px 12.8px / 0 round; background: url("assets/ui/kit/tile-hover-fill.png") center / 68.8px 62.4px repeat; background-clip: padding-box; }
.tool[aria-expanded="true"], .tool.on, .gsk.armed, .stamp.on, .stamp.standing { border-color: transparent; border-image: url("assets/ui/kit/tile-selected-frame.png") 78 78 78 78 / 15.6px 15.6px 15.6px 15.6px / 0 round; background: url("assets/ui/kit/tile-selected-fill.png") center / 60.0px 51.6px repeat; background-clip: padding-box; }
.gsk[aria-disabled="true"], .stamp[aria-disabled="true"] { border-color: transparent; border-image: url("assets/ui/kit/tile-disabled-frame.png") 64 64 64 64 / 12.8px 12.8px 12.8px 12.8px / 0 round; background: url("assets/ui/kit/tile-disabled-fill.png") center / 66.8px 62.4px repeat; background-clip: padding-box; }
.stamp.pressed { border-color: transparent; border-image: url("assets/ui/kit/button-pressed-frame.png") 50 54 50 54 / 10.0px 10.8px 10.0px 10.8px / 0 round; background: url("assets/ui/kit/button-pressed-fill.png") center / 103.6px 19.6px repeat; background-clip: padding-box; }
.rtab.on, .chips button[aria-pressed="true"], .opt-tabs button[aria-selected="true"], .op-tabs button.on { border-color: transparent; border-image: url("assets/ui/kit/tab-selected-frame.png") 40 56 40 56 / 8.0px 11.2px 8.0px 11.2px / 0 round; background: url("assets/ui/kit/tab-selected-fill.png") center / 99.2px 21.2px repeat; background-clip: padding-box; }
select, .sk-sel, .rm-slot select, .rm-set select { border-color: transparent; border-image: url("assets/ui/kit/dropdown-field-frame.png") 32 96 32 38 / 8.0px 24.0px 8.0px 9.5px / 0 round; background: url("assets/ui/kit/dropdown-field-fill.png") center / 116.0px 31.0px repeat; background-clip: padding-box; appearance: none; -webkit-appearance: none; color: var(--ink); padding: .2rem 1.9rem .2rem .55rem; min-height: 2.1rem; cursor: pointer; }
#skPreview { border-color: transparent; border-image: url("assets/ui/kit/equipment-frame-frame.png") 60 60 60 60 / 14.4px 14.4px 14.4px 14.4px / 0 round;  border-style: solid; border-width: 14px; box-sizing: border-box; }
#sheetmap::after { border-color: transparent; border-image: url("assets/ui/kit/minimap-frame-frame.png") 68 68 68 68 / 12.2px 12.2px 12.2px 12.2px / 0 round;  }
.card { border-color: transparent; border-image: url("assets/ui/kit/portrait-frame-frame.png") 64 64 64 64 / 7.7px 7.7px 7.7px 7.7px / 0 round;  background-color: #161614; }
.card.sel { border-color: transparent; border-image: url("assets/ui/kit/portrait-selected-overlay-frame.png") 40 40 40 40 / 6.8px 6.8px 6.8px 6.8px / 0 round;  background-color: #161614; }
.card.slain { border-color: transparent; border-image: url("assets/ui/kit/portrait-disabled-overlay-frame.png") 40 40 40 40 / 6.8px 6.8px 6.8px 6.8px / 0 round;  background-color: #161614; }
#prod .pq img { border-color: transparent; border-image: url("assets/ui/kit/queue-slot-frame.png") 44 44 44 44 / 5.3px 5.3px 5.3px 5.3px / 0 round; background: url("assets/ui/kit/queue-slot-fill.png") center / 35.5px 32.6px repeat; background-clip: padding-box; }
.tool.compass.mini-compass { border-image: none; background: radial-gradient(circle, #2c2c28 0 60%, #161614 100%); box-shadow: 0 0 0 1.5px #ad8446, 0 1px 3px rgba(0, 0, 0, .6); border-radius: 50%; color: #efe3c4; }
#sheetmap::after { border-width: 12px; }
input[type="range"]::-webkit-slider-runnable-track { height: .7rem; border: solid transparent; border-width: 0 6px; border-image: url("assets/ui/kit/slider-track-frame.png") 0 30 0 30 fill / 0 6px / 0 round; background: none; }
input[type="range"]::-moz-range-track { height: .7rem; border: solid transparent; border-width: 0 6px; border-image: url("assets/ui/kit/slider-track-frame.png") 0 30 0 30 fill / 0 6px / 0 round; background: none; }
::-webkit-scrollbar-thumb { border: solid transparent; border-width: 7px 0; border-image: url("assets/ui/kit/scrollbar-thumb-frame.png") 64 0 64 0 fill / 7px 0 / 0 round; background: none; }
::-webkit-scrollbar-track { border: solid transparent; border-width: 7px 0; border-image: url("assets/ui/kit/scrollbar-track-frame.png") 42 0 42 0 fill / 7px 0 / 0 round; background: #141513; }
.back .st-b i { background: url("assets/ui/kit/meter-fill-gold-frame.png") left center / auto 100% repeat-x; }
:is(.btn, .sk-pick, .sk-optbtn, .sk-side, .side, .chips button, .rollrow, .camp-ch button, .cf-col, .cf-btn, .cf-back, .as-fights button, .as-meanwhile button, .utype, .ucard, .tcard, #fmenu button, #gmenu button, .skbtn, .cardnav, .rtab, .utab, .opt-tabs button, .atlas-tabs button, .hrow, .tool, .gsk, .stamp, .card, select, .sk-swap, .uadd, .ubn-new, .dip .tr button, .rc-buy):hover:not(:disabled):not([aria-disabled="true"]) { box-shadow: 0 0 14px 4px rgba(255, 206, 108, .85), 0 0 34px 10px rgba(232, 172, 72, .5), inset 0 0 14px rgba(255, 206, 108, .35); outline: 0; }
:is(.btn, .sk-pick, .sk-optbtn, .sk-side, .side, .chips button, .rollrow, .camp-ch button, .cf-col, .cf-btn, .cf-back, .as-fights button, .as-meanwhile button, .utype, .ucard, .tcard, #fmenu button, #gmenu button, .skbtn, .cardnav, .rtab, .utab, .opt-tabs button, .atlas-tabs button, .hrow, .tool, .gsk, .stamp, .card, select, .sk-swap, .uadd, .ubn-new, .dip .tr button, .rc-buy):focus-visible { box-shadow: 0 0 14px 4px rgba(255, 206, 108, .85), 0 0 34px 10px rgba(232, 172, 72, .5), inset 0 0 14px rgba(255, 206, 108, .35); outline: 0; }
.rollrow.rcard:hover:not([aria-disabled="true"]), #roll.lk .rollrow.rcard:hover:not([aria-disabled="true"]) { outline: 0; background: #2a2722; }
.sk-match { background: linear-gradient(90deg, var(--side-a) 0 50%, var(--side-b) 50% 100%), url("assets/ui/kit/steel-fill.png") center / 512px 512px repeat; background-clip: padding-box; }
.card:hover, #bottombar .card:hover { background-color: #1b1b18; }
.cardnav:hover, #gmenu button:hover, #gmenu button:active, #fmenu button:hover, #fmenu button:active, .skbtn:hover, .sk-swap:hover, .sk-x:hover, .camp-ch button:hover, .rc-size button:hover, .reg-head .desel:hover { background: rgba(223, 187, 112, .14); }
.sk-side.foe:hover, .sk-side.foe:focus-visible { background: rgba(223, 187, 112, .06); }
.rollrow.rcard.flipped, .rollrow.rcard:hover:not([aria-disabled="true"]).flipped { background: #262622; }
.sk-btnsel .ic { display: none; }
select option { background: #1d1d1a; color: var(--ink); }
.rm-team, .rm-chat, .on-games, .saves-list, .sk-opts, .sk-adv { background: #121412 url("assets/ui/kit/steel-inset.png") center / 512px 512px repeat; background-clip: padding-box; }
/* ==== /KIT ==== */

/* (2026-10-16: "For the background of the U.S. Army and Lakota & Cheyenne can we make the entire background their
   flags?") each side's half shows its flag (game.js sideFlagBg, drawn at the half's own size, never stretched); a dark wash
   keeps the names readable, lighter on your own side */
.sk-side { background-repeat: no-repeat; background-position: left top; position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .7); }
.sk-side::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 14, 12, .25), rgba(14, 14, 12, .55)); pointer-events: none; }
.sk-side.foe::before { background: rgba(14, 14, 12, .58); }
.sk-side > * { position: relative; }
.sk-side .sk-stxt small { color: #efe3c4; }
.sk-side.foe:hover::before, .sk-side.foe:focus-visible::before { background: rgba(14, 14, 12, .4); }
.sk-side .sk-flag { display: none; }


/* (2026-10-16) the numbered commands to an ally, in the battle chat and the Diplomacy box */
.net-chat-sug li { display: flex; align-items: baseline; gap: .55rem; font-style: normal; }
.net-chat-sug li b { flex: none; width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; border: 1px solid var(--brass); border-radius: 3px; color: #f2d68f; font-size: .85rem; font-variant-numeric: tabular-nums; }
.net-chat-sug li.sug-h { cursor: default; font-style: italic; font-size: .85rem; color: var(--ink-2); padding-top: .25rem; }
.net-chat-sug li.sug-h:hover { background: none; }
.dip .asks .ask-n { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-right: .35rem; border: 1px solid var(--brass); border-radius: 3px; font-size: .78rem; color: #f2d68f; }

/* (2026-10-16) the speaker by each player's name: a button; lit green while they talk, red and crossed out when muted */
button.vc-mark { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-left: .4rem; vertical-align: -.25rem; border-radius: 50%; color: #8c8574; transition: color .1s, box-shadow .1s, background .1s; }
button.vc-mark svg { width: 1rem; height: 1rem; }
button.vc-mark:hover, button.vc-mark:focus-visible { color: #f2d68f; background: rgba(242, 214, 143, .12); }
button.vc-mark.talk { color: #7fd36b; box-shadow: 0 0 0 2px rgba(127, 211, 107, .45), 0 0 8px rgba(127, 211, 107, .5); }
button.vc-mark.muted { color: #e0614c; opacity: 1; }
#plist li button.vc-mark { margin: 0 .3rem 0 0; flex: none; }

/* (2026-10-16: "Check all text and UI to ensure it acts smoothly and doesn't have these jarring white/grey boxes")
   the battle room's places on the dark panels: your own row lit with brass, the rest a shade darker, every word readable;
   settings the host alone can change shown as plain words at the left (no dropdown to click); the legal footer dark */
.rm-slot { background: rgba(12, 12, 10, .35); border-bottom-color: rgba(223, 187, 112, .14); color: var(--ink); }
.rm-slot.me { background: linear-gradient(90deg, rgba(223, 187, 112, .16), rgba(223, 187, 112, .05)); }
.rm-slot.open, .rm-slot.closed { background: rgba(12, 12, 10, .2); }
.rm-who, .rm-who b { color: #efe3c4; }
.rm-who small { color: #b9ad8d; }
.rm-who .rm-host { color: #dfbb70; }
.rm-who .rm-off { color: #e0846f; }
.rm-open { color: #c9bd9a; }
.rm-closed { color: #8f8875; }
.rm-ready { color: #9fd37f; }
.rm-notready { color: #b9ad8d; }
.rm-set > span { color: #efe3c4; }
.rm-set select:disabled { border-image: none; border: 0; background: none; color: #efe3c4; text-align: left; text-align-last: left; padding: .28rem .1rem; appearance: none; -webkit-appearance: none; pointer-events: none; }
.rm-old { grid-column: 1 / -1; color: #b9ad8d; font-style: italic; font-size: .85rem; }
.legal { background: rgba(14, 12, 10, .82); border-top: 1px solid rgba(223, 187, 112, .25); }
.legal a { color: #cdbb92; }
.legal a:hover, .legal a:focus-visible { color: #f2d68f; }
/* the compass in the corner of the map: a dark brass-rimmed dial, its letters light (it was a pale disc, letters lost) */
.tool.compass.mini-compass { background: radial-gradient(circle, #2c2c28 0 60%, #171715 100%); box-shadow: 0 0 0 1.5px #ad8446, 0 1px 3px rgba(0, 0, 0, .6); border-radius: 50%; color: #efe3c4; }
.tool.compass.mini-compass .nn, .tool.compass.mini-compass .cn { fill: #e0614c; }
/* a dropdown's words sit in the middle of its box (they rode high) */
select, .sk-sel, .rm-slot select, .rm-set select { line-height: 1.25; padding-top: .3rem; padding-bottom: .12rem; }

/* (2026-10-16) the yellow cooldown sweep over a reloading skill (over the grey shade): the part still to wait, lit,
   with a bright hand at its leading edge */
.stamp .cdw, .gsk .cdw { position: absolute; inset: 3px; pointer-events: none; border-radius: 3px;
  background: conic-gradient(from 0deg, rgba(255, 190, 40, .26) 0deg, rgba(255, 190, 40, .26) calc(var(--p) * 360deg - 4deg), rgba(255, 226, 120, .9) calc(var(--p) * 360deg - 4deg), rgba(255, 226, 120, .9) calc(var(--p) * 360deg), transparent calc(var(--p) * 360deg));
  box-shadow: inset 0 0 0 1px rgba(255, 200, 60, .55); }
/* (2026-10-16) the army screen's Raise buttons wear the kit's dark button now: their price was near-black on it */
#army .btn.sm.primary .gp { color: #f2c14e; }
/* and they wore the bright hover frame all the time, too small for the price: the plain frame (the bright one on
   hover), wide enough for "Raise" and a four-figure price */
#army .btn.sm.primary { border-image: url("assets/ui/kit/button-default-frame.png") 50 54 50 54 / 14.0px 15.1px 14.0px 15.1px / 0 round; background: url("assets/ui/kit/button-default-fill.png") center / 142.2px 27.4px repeat; background-clip: padding-box; color: #f7e3a6; min-width: 8.2rem; padding: .1rem .9rem; white-space: nowrap; justify-content: center; }
#army .btn.sm.primary:hover { border-image-source: url("assets/ui/kit/button-hover-frame.png"); box-shadow: 0 0 12px rgba(242, 193, 78, .55); }
#army .btn.sm.primary .coin circle:first-child { stroke: #f2c14e; }
/* (2026-10-16) the battle room's team panels: the team's flag fills the panel (set by the game), under a dark wash */
.rm-team.flagged { background-color: #121412; background-size: auto, auto; background-repeat: no-repeat; background-position: left top; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .7); }
.rm-team.flagged .rm-slot { background: rgba(12, 12, 10, .28); }
.rm-team.flagged .rm-slot.me { background: linear-gradient(90deg, rgba(223, 187, 112, .22), rgba(12, 12, 10, .2)); }
.rm-team.flagged .rm-slot.open, .rm-team.flagged .rm-slot.closed { background: rgba(12, 12, 10, .14); }
.rm-team.flagged h3 small, .rm-team.flagged .rm-closed, .rm-team.flagged .rm-open, .rm-team.flagged .rm-who small { color: #e6dcc4; }
/* (2026-10-16) the command panel's "more" button: the next page of buttons (skills, orders, building) */
.stamp.more .ar { font-size: 1.55rem; line-height: 1; font-weight: 700; color: var(--brass, #dfbb70); text-shadow: 0 1px 0 rgba(0, 0, 0, .7); }
.stamp.more .k { font-weight: 400; }
#bottombar .reg-ctl { overflow: hidden; }
/* (2026-10-16) every framed button: its text in the middle, well clear of the brass rivets in the frame's corners (the
   frame is 14-15 px deep at each end, so the sides need more than that before the text) */
.btn { padding-left: max(1.35rem, 23px) !important; padding-right: max(1.35rem, 23px) !important; justify-content: center; text-align: center; line-height: 1.12; }
.btn > * { flex: none; }
#army .btn.sm, .war-side .foot .btn, #tut .btn, .rm-slot .btn, .on-list .btn, .net-wait .btn, .sk-actions .btn, .btn.rm-mute { min-height: max(2.2rem, 34px); padding-top: .22rem; padding-bottom: .16rem; }
/* (2026-10-16) titles and section headings in Rye (one weight, its own capitals: no small caps or faux bold) */
:root { --font-head: "Rye", "Besley", Georgia, serif; }
h1, h2, h3, .fa-logo, .ng-title, .sheet-title, #briefTitle, #cfTitle, #armyTitle, #atlasTitle { font-family: var(--font-head) !important; font-weight: 400 !important; font-variant-caps: normal !important; letter-spacing: .03em; }
h1 small, h2 small, h3 small, h2 .rm-code, h2 button, h3 button, h2 span:not([class]), .rm-code { font-family: var(--font, "Besley"), Georgia, serif; font-variant-caps: normal; }

/* (2026-10-17) the line under "Share anonymous battle data" in Options */
.opt-note { margin: .35rem 0 .2rem; font-size: .88rem; color: var(--ink-2); line-height: 1.4; }
.opt-note a { color: inherit; text-decoration: underline; }
/* (2026-10-17) the painted flags fill the side boxes of the Skirmish setup and the online room's team panels */
.sk-side { background-size: cover; background-position: center; }
.rm-team.flagged { background-size: cover, cover; background-position: center, center; }
.cf-flag.painted { image-rendering: auto; box-shadow: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
/* (2026-10-17: "increase minimap size by 10%") */
#bottombar #mini { height: 10.75rem; max-width: 32.9rem; }
@media (max-width: 900px) { #mini { width: 12.1rem; } }
/* (2026-10-17) every button in the command panel is the same height, so a page of building buttons (a longer label and
   a price) is no taller than a page of skills and the pages keep the same number of buttons */
#bottombar .reg-ctl .stamp { height: 3.95rem; overflow: hidden; }
#bottombar .reg-ctl.many .stamp { height: 3.5rem; }
@media (max-width: 640px), (max-height: 460px) { #bottombar .reg-ctl .stamp { height: 3.4rem; } }
#bottombar .reg-ctl .stamp[data-act^="bld:"] { gap: 0; }
#bottombar .reg-ctl .stamp[data-act^="bld:"] .ic { width: 1.3rem; height: 1.3rem; }
#bottombar .reg-ctl .stamp[data-act^="bld:"] .lb { line-height: 1; }
#bottombar .reg-ctl .stamp[data-act^="bld:"] .lb small { display: block; font-size: .9em; opacity: .9; }
/* (2026-10-17) a campaign under construction on Choose Your Side: greyed, a plank sign across its flag, a hard hat on a
   nail at the corner swinging a little, and a builder hammering at a lodge underneath. Not a button. */
.cf-col.wip { cursor: not-allowed; }
.cf-col.wip:hover { background: linear-gradient(180deg, rgba(8, 6, 6, .9), rgba(60, 46, 20, .5) 55%, rgba(90, 70, 26, .6)); }
.cf-col.wip h3 { color: #cfc3a6; }
.cf-col.wip .cf-sub { color: #f2c230; font-weight: 700; letter-spacing: .04em; }
.cf-wipwrap { position: relative; display: grid; justify-items: center; width: 100%; padding-top: .6rem; }
.cf-wipwrap .cf-flag { filter: grayscale(.55) brightness(.75) drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
.cf-wipsign { position: absolute; top: 2.6rem; left: 50%; transform: translateX(-50%) rotate(-7deg); white-space: nowrap; padding: .35rem .8rem .3rem;
  font: 400 1.05rem/1 "Rye", Georgia, serif; letter-spacing: .03em; color: #2a1a0c; text-shadow: 0 1px 0 rgba(255, 236, 190, .4);
  background: linear-gradient(180deg, #c99a5b, #a8783f 55%, #8e6230); border: 2px solid #4a2f15; border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 230, 170, .45); }
.cf-wipsign::before, .cf-wipsign::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #3a2a1a; box-shadow: inset 0 1px 0 #8a7a66; }
.cf-wipsign::before { left: 5px; } .cf-wipsign::after { right: 5px; }
.cf-hat { position: absolute; top: -.35rem; right: .1rem; width: 3.6rem; height: 3.6rem; transform-origin: 50% 8%; animation: cf-hat 3.2s ease-in-out infinite; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5)); }
@keyframes cf-hat { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } }
.cf-builder { width: 188px; height: 120px; image-rendering: pixelated; margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) { .cf-hat { animation: none; transform: rotate(-4deg); } }
/* (2026-10-17) the loading screen: the pine clearing scene fills the screen (pixels kept square) and the bar, with its
   marching soldier, stands on the meadow near the bottom */
#loading { background: #90b6c4; place-items: end center; overflow: hidden; }
#loadScene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; image-rendering: pixelated; z-index: 0; }
#loading .sv-box { position: relative; z-index: 1; transform: none; margin-bottom: max(4vh, 1.5rem); width: min(40rem, 88vw); }
#loading .sv-logo { display: none; }
#loading .sv-text { color: #f4ead0; text-shadow: 0 2px 4px #0c1a10, 0 0 3px #0c1a10; }
@media (max-aspect-ratio: 1/1) { #loading { background: linear-gradient(#90b6c4 0 45%, #3d5a33 45%); } #loadScene { object-fit: contain; object-position: 50% 38%; } }
/* (2026-10-17) the command panel: "more" (and Back on the Build page) at the far right of the last row */
#bottombar .reg-ctl .stamp.more, #bottombar .reg-ctl .stamp[data-act="regback"] { margin-left: auto; }
/* (2026-10-18) the formation menu's turn row: Wheel left, About face, Wheel right */
#fmenu .fturn { display: flex; gap: .2rem; }
#fmenu .fturn button { flex: 1; grid-template-columns: 1fr; justify-items: center; gap: .1rem; padding: .3rem .2rem; text-align: center; }
#fmenu .fturn svg { width: 1.3rem; height: 1.3rem; }
#fmenu .fturn b { font-size: .7rem; font-weight: 600; white-space: nowrap; }
#fmenu .fturn small { font-size: .68rem; opacity: .7; }