/* Meridian — war-room staff map: paper, brass, ink. */
:root {
  --paper: #efe6cf;
  --paper-2: #e6dabd;
  --paper-3: #d9caa6;
  --ink: #241b13;
  --ink-2: #4a3b2c;
  --ink-3: #7a6650;
  --brass: #b8924f;
  --brass-2: #8a6d3b;
  --leather: #1f1a15;
  --leather-2: #2c251e;
  --red: #8e2b20;
  --green: #3d6b3a;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sc: "Cormorant SC", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #a9bcbb; color: var(--ink); font-family: var(--serif); font-size: 16px; }
canvas#map { position: fixed; inset: 0; display: block; cursor: grab; }
canvas#mapgl { position: fixed; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(60,40,20,0) 58%, rgba(60,40,20,0.2) 100%); }
canvas#map.dragging { cursor: grabbing; }
.hidden { display: none !important; }
button { font: inherit; }

.btn {
  font-family: var(--sc); font-weight: 600; font-size: 15px; letter-spacing: .04em;
  background: var(--leather-2); color: #f1e6c8; border: 1px solid var(--brass-2);
  padding: 6px 12px; border-radius: 2px; cursor: pointer; transition: background .12s, color .12s;
}
.btn:hover:not(:disabled) { background: var(--brass-2); color: #fff8e6; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--brass-2); color: #fff8e6; border-color: #e0c27f; }
.btn.primary:hover:not(:disabled) { background: var(--brass); }
.btn.warn { background: var(--red); border-color: #c4614f; }
.btn.small { font-size: 13px; padding: 3px 8px; }
a.btn { display: inline-block; text-decoration: none; }

/* loading */
#loading { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; background: var(--paper); z-index: 50; }
.ld-title { display: block; width: min(520px, 80vw); height: auto; margin: 0 auto; }
.ld-sub { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-top: 8px; }

/* start screen */
#start { position: fixed; left: 28px; top: 28px; bottom: 28px; width: 400px; z-index: 20; display: flex; align-items: center; pointer-events: none; }
.start-card { pointer-events: auto; background: var(--paper); border: 1px solid var(--brass-2); box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--paper-3); padding: 28px 28px 22px; width: 100%; }
.st-kicker { font-family: var(--sc); font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--ink-3); }
.start-card h1 { margin: 8px 0 10px; }
.start-card h1 img { display: block; width: 100%; height: auto; }
.st-lede { font-size: 18px; line-height: 1.35; margin: 0 0 16px; color: var(--ink-2); }
#pick { min-height: 112px; border-top: 1px solid var(--paper-3); border-bottom: 1px solid var(--paper-3); padding: 12px 0; margin-bottom: 14px; }
.pick-empty { font-style: italic; color: var(--ink-3); display: flex; align-items: center; }
.pick-head { display: flex; gap: 12px; align-items: center; }
.pick-head canvas { border: 1px solid var(--ink); }
.pick-name { font-family: var(--sc); font-weight: 700; font-size: 22px; line-height: 1.05; }
.pick-gov { font-style: italic; color: var(--ink-3); }
.pick-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; font-family: var(--mono); font-size: 12px; }
.pick-stats div { background: var(--paper-2); padding: 4px 6px; }
.pick-stats span { display: block; font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.st-actions { display: flex; gap: 8px; }
.st-help { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }
.st-help b { color: var(--ink-2); font-weight: 600; }

/* top bar */
#top { position: fixed; left: 0; right: 0; top: 0; height: 54px; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 0 14px;
  background: linear-gradient(#2c251e, #1b1713); color: #eadfc4; border-bottom: 2px solid var(--brass-2); box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.tb-nation { display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 290px; }
.tb-nation > div { min-width: 0; }
.tb-nation canvas { border: 1px solid #000; }
#tbName { font-family: var(--sc); font-weight: 700; font-size: 17px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tbGov { font-size: 13px; font-style: italic; color: #bba982; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-res { display: flex; gap: 8px; flex: 1; justify-content: center; }
.chip { display: flex; flex-direction: column; align-items: flex-start; padding: 2px 10px; border-left: 1px solid #4a3d2e; min-width: 86px; }
.chip span { font-family: var(--sc); font-size: 12px; color: #bba982; letter-spacing: .05em; }
.chip b { font-family: var(--mono); font-weight: 500; font-size: 14px; color: #f4e9cc; }
.chip b .neg { color: #e8836f; } .chip b .pos { color: #a8cf8c; }
.chip.resolve { min-width: 150px; }
.chip.resolve .bar { width: 100%; height: 5px; background: #3b3127; margin: 2px 0 1px; }
.chip.resolve .bar i { display: block; height: 100%; background: linear-gradient(90deg, #a7442f, #c9a55c 45%, #8fb36a); }
.tb-time { display: flex; align-items: center; gap: 12px; }
#tbDate { font-family: var(--mono); font-size: 15px; min-width: 112px; text-align: right; color: #f4e9cc; }
.speeds { display: flex; border: 1px solid var(--brass-2); }
.speeds button { background: transparent; color: #cdbb94; border: 0; border-left: 1px solid #4a3d2e; width: 28px; height: 26px; cursor: pointer; font-family: var(--mono); font-size: 12px; }
.speeds button:first-child { border-left: 0; }
.speeds button.on { background: var(--brass-2); color: #fff; }
.speeds.paused button[data-speed="0"] { background: var(--red); color: #fff; }

/* side panel */
/* the panel ends where its content does (up to the screen's height, then the content scrolls) */
#side { position: fixed; left: 12px; top: 66px; max-height: calc(100% - 78px); width: 340px; z-index: 9; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--brass-2); box-shadow: 0 6px 24px rgba(0,0,0,.3); }
.tabs { display: flex; border-bottom: 1px solid var(--brass-2); }
.tabs button { flex: 1; background: var(--paper-2); border: 0; border-right: 1px solid var(--paper-3); font-family: var(--sc); font-weight: 600; font-size: 15px; padding: 8px 0; cursor: pointer; color: var(--ink-3); }
.tabs button:last-child { border-right: 0; }
.tabs button.on { background: var(--paper); color: var(--ink); box-shadow: inset 0 -3px 0 var(--brass); }
#tabBody { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 14px 14px 4px; }
#tabBody::-webkit-scrollbar { width: 8px; } #tabBody::-webkit-scrollbar-thumb { background: var(--paper-3); }
.sec { margin-bottom: 16px; }
.sec h3 { font-family: var(--sc); font-weight: 700; font-size: 16px; letter-spacing: .06em; margin: 0 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--paper-3); display: flex; justify-content: space-between; align-items: baseline; }
.sec h3 small { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--ink-3); letter-spacing: 0; }
.note { font-size: 14.5px; color: var(--ink-2); line-height: 1.35; margin: 4px 0 8px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 15px; }
.kv b { font-family: var(--mono); font-weight: 500; font-size: 13px; text-align: right; }
.meter { height: 8px; background: var(--paper-3); position: relative; margin: 4px 0; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-2); }
.meter.resolve i { background: linear-gradient(90deg, #a7442f, #c9a55c 45%, #8fb36a); }
.slider { width: 100%; accent-color: var(--brass-2); }
.split { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.ucard { display: grid; grid-template-columns: 36px 1fr auto; gap: 2px 8px; align-items: center; padding: 7px 8px; background: var(--paper-2); margin-bottom: 6px; border: 1px solid var(--paper-3); }
.ucard .nm { font-family: var(--sc); font-weight: 700; font-size: 16px; }
.ucard .uimg { grid-row: 1 / span 2; width: 36px; height: 36px; }
.ucard .nm { grid-column: 2; }
.ucard .st { font-family: var(--mono); font-size: 11px; color: var(--ink-3); grid-column: 2; }
.ucard .btn { grid-row: 1 / span 2; grid-column: 3; }
.qitem { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; font-size: 15px; padding: 4px 0; border-bottom: 1px dotted var(--paper-3); }
.qitem .meter { grid-column: 1 / -1; margin: 0; height: 5px; }
.qitem .meter i { background: var(--brass-2); }
.qitem .wait { font-family: var(--mono); font-size: 10px; color: var(--red); }
.iconbtn { background: none; border: 1px solid var(--paper-3); cursor: pointer; font-family: var(--mono); font-size: 11px; padding: 1px 5px; color: var(--ink-2); }
.iconbtn.on { background: var(--ink-2); color: var(--paper); }
.nrow { border-bottom: 1px solid var(--paper-3); padding: 7px 0; }
.nrow-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.nrow-head canvas { border: 1px solid var(--ink); flex: none; }
.nrow-name { font-family: var(--sc); font-weight: 700; font-size: 15px; line-height: 1.05; flex: 1; }
.nrow-name small { display: block; font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 13px; color: var(--ink-3); }
.rel { font-family: var(--mono); font-size: 12px; min-width: 34px; text-align: right; }
.rel.pos { color: var(--green); } .rel.neg { color: var(--red); }
.badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; padding-left: 38px; }
.badge { font-family: var(--sc); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; }
.badge + .badge::before { content: '·'; margin: 0 6px 0 2px; color: var(--ink-3); font-weight: 400; }
.badge.war { color: var(--red); } .badge.pact { color: #2f4f7a; } .badge.accord { color: var(--green); } .badge.truce { color: var(--ink-3); }
.nactions { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px 38px; }
.frow { display: grid; grid-template-columns: 1fr auto; padding: 6px 8px; margin-bottom: 4px; background: var(--paper-2); cursor: pointer; border: 1px solid transparent; }
.frow:hover { border-color: var(--brass); }
.frow .nm { font-weight: 600; }
.frow .st { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.frow .tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; align-self: center; }
.tag.battle { color: var(--red); } .tag.moving { color: #2f4f7a; } .tag.cut { color: var(--red); font-weight: 600; }

/* dispatches */
#dispatch { position: fixed; right: 12px; top: 66px; width: 300px; z-index: 8; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.slip { pointer-events: auto; background: #f6efdc; border: 1px solid #cdbb94; padding: 5px 10px 6px; font-family: var(--serif); font-size: 14.5px; font-weight: 500; line-height: 1.25;
  box-shadow: 0 3px 10px rgba(0,0,0,.25); animation: slipIn .3s ease-out; transition: opacity .6s; }
.slip .d { font-family: var(--sc); font-weight: 700; font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
.slip .tx { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.slip.war .d, .slip.loss .d { color: var(--red); } .slip.win .d { color: var(--green); } .slip.peace .d { color: #2f4f7a; }
.slip.capital, .slip.collapse { background: #efe2c2; font-weight: 600; }
.slip.fade { opacity: 0; }
@keyframes slipIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* province card */
#provCard { position: fixed; right: 12px; bottom: 12px; width: 300px; z-index: 9; background: var(--paper); border: 1px solid var(--brass-2); box-shadow: 0 6px 24px rgba(0,0,0,.3); padding: 12px 14px; }
.pc-name { font-family: var(--sc); font-weight: 700; font-size: 21px; line-height: 1.05; }
.pc-sub { font-style: italic; color: var(--ink-3); margin-bottom: 8px; }
.pc-terrain { font-size: 13.5px; line-height: 1.3; color: var(--ink-2); margin: -4px 0 8px; font-style: italic; }
.pc-close { position: absolute; right: 8px; top: 6px; background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--ink-3); }
.pc-units { margin-top: 8px; font-family: var(--mono); font-size: 11.5px; }
.pc-units div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--paper-3); padding: 2px 0; }
.pc-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.kv b.pos { color: var(--green); } .kv b.neg { color: var(--red); }

/* nation card (right-click a country) */
.nc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding-right: 16px; }
.nc-head img, .nc-chip img, .offer img { border: 1px solid var(--ink); flex: none; }
.nc-head .pc-sub { margin-bottom: 0; }
.nc-warn { margin-top: 8px; padding: 3px 7px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--red); background: #f3d9cf; border: 1px solid currentColor; }
.nc-rows { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--paper-3); font-size: 13px; }
.nc-rows > span { font-family: var(--sc); color: var(--ink-3); white-space: nowrap; }
.nc-rows > div { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.nc-rows i { color: var(--ink-3); }
.nc-chip { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-family: var(--mono); font-size: 11px; }
.nc-chip:hover { text-decoration: underline; }

/* offers */
.offer { display: flex; align-items: center; gap: 7px; padding: 6px 0; border-bottom: 1px dotted var(--paper-3); }
.offer.in { background: #f6ecd2; margin: 0 -6px; padding: 6px; }
.offer-t { flex: 1; font-size: 14px; line-height: 1.15; }
.offer-t small { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.badge.offer { color: #8a5a12; }
.tabcnt { display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 3px; font-style: normal; font-family: var(--mono); font-size: 10.5px; line-height: 16px; color: #fff; background: var(--red); border-radius: 8px; vertical-align: 2px; }

/* selection bar */
#selBar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9; background: var(--leather); color: #eadfc4; border: 1px solid var(--brass-2); padding: 6px 12px; font-family: var(--mono); font-size: 12.5px; display: flex; gap: 12px; align-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
#selBar b { color: #fff3d4; }
#selBar { width: max-content; max-width: calc(100vw - 24px); }
#selBar > b, #selBar > span { white-space: nowrap; }

/* tooltip */
#tip { position: fixed; z-index: 30; pointer-events: none; background: rgba(27,23,19,.94); color: #eadfc4; padding: 5px 8px; font-size: 14px; border: 1px solid var(--brass-2); max-width: 260px; }
#tip .t1 { font-family: var(--sc); font-weight: 700; font-size: 15px; }
#tip .t2 { font-family: var(--mono); font-size: 11px; color: #bba982; }

/* modal */
#modalWrap { position: fixed; inset: 0; z-index: 40; background: rgba(20,16,12,.45); display: grid; place-items: center; }
#modal { background: var(--paper); border: 1px solid var(--brass-2); box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--paper-3); padding: 24px 28px; max-width: 820px; width: calc(100vw - 32px); }
.m-kicker { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--red); }
.m-title { font-family: var(--sc); font-weight: 700; font-size: 32px; margin: 2px 0 6px; }
.m-text { font-size: 18px; line-height: 1.4; color: var(--ink-2); margin-bottom: 16px; }
.m-actions { display: flex; gap: 8px; justify-content: flex-end; }
.m-list { margin: 4px 0 18px; padding-left: 22px; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.m-list li { margin: 5px 0; }

/* field commands */
body.picking canvas#map { cursor: crosshair; }
.cmd { border: 1px solid var(--paper-3); border-left: 5px solid var(--cc); background: var(--paper-2); padding: 8px 9px; margin-bottom: 8px; }
.cmd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.cmd-tag { background: var(--cc); color: #1c140e; font-family: var(--sc); font-weight: 700; font-size: 13px; min-width: 28px; text-align: center; padding: 1px 4px; border: 1px solid var(--ink); }
.cmd-name { flex: 1; min-width: 0; font-family: var(--sc); font-weight: 700; font-size: 16px; cursor: pointer; line-height: 1.1; }
.cmd-name:hover { color: var(--brass-2); }
.cmd-name small { display: block; font-family: var(--mono); font-weight: 400; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.segs { display: flex; border: 1px solid var(--brass-2); }
.seg { flex: 1; background: var(--paper); border: 0; border-left: 1px solid var(--paper-3); font-family: var(--sc); font-weight: 600; font-size: 14px; padding: 3px 0; cursor: pointer; color: var(--ink-3); }
.seg:first-child { border-left: 0; }
.seg:hover { color: var(--ink); }
.seg.on { background: var(--leather-2); color: #f1e6c8; }
.cmd-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14.5px; }
.cmd-row label { font-family: var(--sc); font-weight: 600; width: 64px; flex: none; color: var(--ink-2); }
.cmd-row select { flex: 1; min-width: 0; font-family: var(--serif); font-size: 14.5px; background: #fbf6e8; border: 1px solid var(--paper-3); padding: 2px 4px; color: var(--ink); }
.cmd-row .segs { flex: 1; }
.front-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 3px 7px; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: 14.5px; color: var(--ink); background: #fbf6e8; border: 1px solid var(--paper-3); }
.front-pick:hover { border-color: var(--brass); }
.front-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.front-pick .caret { flex: none; color: var(--ink-3); font-size: 11px; }
.front-list { margin: 4px 0 2px; border: 1px solid var(--paper-3); background: #fbf6e8; max-height: 240px; overflow-y: auto; }
.front-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px; border: 0; border-bottom: 1px dotted var(--paper-3);
  background: none; cursor: pointer; text-align: left; font-family: var(--serif); font-size: 14.5px; color: var(--ink); }
.front-opt:last-child { border-bottom: 0; }
.front-opt:hover { background: #f1e7cc; }
.front-opt.on { background: #ecdcb3; font-weight: 600; }
.front-opt .badge { flex: none; }
.front-all { display: inline-block; width: 21px; text-align: center; color: var(--brass-2); flex: none; }
.front-list .note { padding: 6px 8px; }
.cmd-obj { flex: 1; min-width: 0; font-style: italic; }
.cmd-status { font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin: 8px 0 7px; padding: 4px 7px; background: rgba(255,250,236,.65); border-left: 2px solid var(--cc); line-height: 1.4; }
.cmd-actions { display: flex; gap: 6px; }
.sb-cmds { display: flex; align-items: center; gap: 3px; }
.cmdbtn { background: var(--cc, #3b3127); color: #1c140e; border: 1px solid #000; font-family: var(--sc); font-weight: 700; font-size: 12px; min-width: 24px; height: 20px; cursor: pointer; padding: 0 4px; }
.cmdbtn:not([style]) { color: #eadfc4; }
.cmdbtn:hover { filter: brightness(1.15); }

/* ---- map HUD ---- */
#side { transition: transform .22s ease; }
body.side-hidden #side { transform: translateX(-372px); }
#sideToggle { position: fixed; left: 352px; top: 76px; z-index: 10; width: 18px; height: 44px; border: 1px solid var(--brass-2); border-left: 0;
  background: var(--leather-2); color: #eadfc4; cursor: pointer; font-size: 14px; padding: 0; transition: left .22s ease; }
body.side-hidden #sideToggle { left: 0; }
/* a dropped connection or an update: what is happening, under the top bar (and over the lobby) */
.net-banner { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 70; background: rgba(31,26,21,.95); color: #f1e6c8;
  border: 1px solid var(--brass-2); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px;
  pointer-events: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.net-banner.hidden { display: none; }
body.phone .net-banner { top: 50px; font-size: 10.5px; letter-spacing: .03em; padding: 4px 9px; }
#pauseBanner { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 9; background: rgba(142,43,32,.92); color: #fff3e0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 14px; border: 1px solid #c4614f; pointer-events: none; }
#pauseBanner b { color: #fff; }
#mapbar { position: fixed; left: 364px; bottom: 12px; z-index: 9; transition: left .22s ease; white-space: nowrap; display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, rgba(44,36,28,.97), rgba(28,23,18,.97)); border: 1px solid var(--brass-2); padding: 5px 6px;
  box-shadow: 0 6px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,236,190,.08); }
.mb-group { display: flex; gap: 2px; }
.mb-group button, .mb-btn { display: flex; align-items: center; gap: 6px; background: transparent; color: #cdbb94; border: 1px solid transparent;
  font-family: var(--sc); font-weight: 600; font-size: 13.5px; padding: 4px 10px 4px 8px; cursor: pointer; transition: background .15s, color .15s; }
.mb-group button svg { flex: none; opacity: .85; }
.mb-group button:hover, .mb-btn:hover { color: #fff3d4; background: rgba(255,236,190,.06); }
.mb-group button.on { background: #a8854a; color: #fffaf0; border-color: #d9b878; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 10px rgba(216,180,110,.25); }
.mb-group button.on svg { opacity: 1; }
#mbOverlays button.on { background: #3a6688; border-color: #7fb0d4; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 10px rgba(110,170,220,.25); }
.mb-btn { border: 1px solid #4a3d2e; width: 26px; padding: 3px 0; font-family: var(--mono); justify-content: center; }
.mb-sep { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, #6a5636, transparent); margin: 0 2px; }
#mbLegend { position: absolute; left: -1px; bottom: calc(100% + 6px); min-width: 100%; max-width: min(640px, calc(100vw - 390px)); white-space: normal; pointer-events: auto;
  background: linear-gradient(180deg, rgba(36,30,24,.95), rgba(26,22,17,.95)); border: 1px solid #6a5636; padding: 6px 10px 7px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4); color: #e7dcc2; }
.lg-title { font-family: var(--sc); font-weight: 700; font-size: 14px; color: #f1e4c2; letter-spacing: .02em; margin-bottom: 4px; }
.lg-title small { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 13px; color: #b9a98a; margin-left: 8px; letter-spacing: 0; }
.lg-items { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--mono); font-size: 11px; color: #d8cdb2; }
.lg-item { display: inline-flex; align-items: center; gap: 6px; }
.lg-item i { display: inline-block; width: 13px; height: 11px; border: 1px solid rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.lg-item i.lg-line { height: 0; width: 18px; border: 0; border-top: 2px solid #2a1e15; box-shadow: none; }
.lg-item i.lg-line.front { border-top: 2.5px solid #b81e14; }
.lg-item i.lg-line.coast { border-top: 2px solid #2d3236; box-shadow: 0 0 0 1.5px rgba(236,244,240,.35); }
.lg-item i.lg-line.river { border-top: 2.5px solid #4a86b8; }
.lg-item i.lg-ramp { width: 90px; height: 9px; }
.lg-item i.lg-ingot { width: 12px; height: 7px; background: #5d6168; clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); border: 0; }
.lg-item i.lg-drop { width: 9px; height: 12px; background: #16120e; border: 0; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
body.side-hidden #mapbar { left: 30px; }
body.side-hidden #mbLegend { max-width: min(640px, calc(100vw - 56px)); }
#selBar { bottom: 132px; }
#minimapWrap { position: fixed; right: 12px; bottom: 12px; z-index: 9; border: 1px solid var(--brass-2); box-shadow: 0 6px 24px rgba(0,0,0,.3); background: rgb(58,92,124); line-height: 0; }
#minimap { display: block; cursor: crosshair; }
.mm-zoom { position: absolute; left: -31px; bottom: 0; display: flex; flex-direction: column; gap: 3px; line-height: normal; }
.mm-zoom button { width: 26px; height: 24px; background: var(--leather-2); color: #eadfc4; border: 1px solid var(--brass-2); cursor: pointer; font-size: 15px; padding: 0; }
.mm-zoom button:hover { background: var(--brass-2); }
#provCard { bottom: 196px; }
#unitsBar { position: absolute; right: -1px; bottom: 100%; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; line-height: normal;
  background: rgba(31,26,21,.94); border: 1px solid var(--brass-2); padding: 3px 5px; }
#unitsBar > span { font-family: var(--sc); font-size: 12.5px; color: #bba982; }
#unitsBar .mb-group button { font-size: 12.5px; padding: 2px 7px; white-space: nowrap; }
.tb-help { width: 26px; height: 26px; background: transparent; color: #cdbb94; border: 1px solid var(--brass-2); cursor: pointer; font-family: var(--mono); font-size: 13px; }
.tb-help:hover { background: var(--brass-2); color: #fff; }
.tb-sound { display: inline-grid; place-items: center; padding: 0; }
.start-card { position: relative; }
.st-sound { position: absolute; top: 12px; right: 12px; color: var(--ink-2); border-color: var(--paper-3); background: transparent; }
.st-sound:hover { color: #fff; }
.sound-panel { position: fixed; top: 60px; right: 14px; z-index: 60; width: 236px; padding: 10px 12px 9px; background: linear-gradient(#2c251e, #1f1a15);
  color: #eadfc4; border: 1px solid var(--brass-2); box-shadow: 0 8px 24px rgba(0,0,0,.45); font-size: 13px; }
.sound-panel.hidden { display: none; }
.snd-head { font-family: var(--sc); font-weight: 700; font-size: 15px; color: #f4e9cc; margin-bottom: 6px; letter-spacing: .02em; }
.snd-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; cursor: pointer; }
.snd-row input { accent-color: var(--brass); margin: 0; }
.snd-vol { width: 100%; margin: 6px 0 2px; accent-color: var(--brass); }
.snd-vol:disabled { opacity: .35; }
.snd-track { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 4px; font-family: var(--mono); font-size: 11px; color: #bba982; }
.snd-track span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snd-track .btn { flex: none; white-space: nowrap; }
.snd-credit { margin-top: 8px; padding-top: 6px; border-top: 1px solid #4a3d2e; font-size: 11px; color: #8c7b5c; }
.tb-alert { flex: none; height: 26px; padding: 0 9px; margin-left: 10px; background: #8e2b20; color: #fff6e0; border: 1px solid #c4614f; cursor: pointer;
  font-family: var(--mono); font-size: 13px; animation: alertPulse 1.6s ease-in-out infinite; }
.tb-alert b { font-weight: 700; }
.tb-alert:hover { background: #a83325; }
.nc-brace { margin: 6px 0 2px; font-size: 13px; line-height: 1.3; color: #6e5320; }
.tb-goal { flex: none; height: 26px; padding: 0 9px; margin-left: 8px; background: #3b2f22; color: #f1e2bd; border: 1px solid #8a6a3c; cursor: pointer;
  font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.tb-goal b { font-weight: 700; }
.tb-goal:hover { background: #4a3b2a; }
.tb-goal.ready { background: #8e2b20; border-color: #c4614f; color: #fff6e0; animation: alertPulse 1.6s ease-in-out infinite; }
@keyframes alertPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(196,97,79,0.6); } 50% { box-shadow: 0 0 0 5px rgba(196,97,79,0); } }
.m-title img { vertical-align: -3px; margin-right: 4px; }
#tip .t3 { font-family: var(--mono); font-size: 10px; color: #8c7b5c; margin-top: 3px; }

#helpWrap { position: fixed; inset: 0; z-index: 45; background: rgba(20,16,12,.5); display: grid; place-items: center; }
#help { position: relative; background: var(--paper); border: 1px solid var(--brass-2); box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--paper-3);
  padding: 22px 28px; width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; margin: 6px 0 14px; }
.help-grid h4 { font-family: var(--sc); font-weight: 700; font-size: 17px; margin: 10px 0 2px; }
.help-grid p { margin: 0 0 4px; font-size: 15.5px; line-height: 1.4; color: var(--ink-2); }
.help-grid .red { color: #a8261b; font-weight: 600; }
.keys { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.keys td { padding: 3px 6px; border-bottom: 1px dotted var(--paper-3); }
.keys td:nth-child(odd) { font-family: var(--mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
@media (max-width: 900px) {
  .help-grid { grid-template-columns: 1fr; }
  #minimapWrap { display: none; }
  #mapbar { flex-wrap: wrap; max-width: calc(100vw - 24px); }
}

/* narrow windows: the clock, speeds, sound and help always fit; the resource chips give way first */
.tb-res { min-width: 0; overflow: hidden; justify-content: safe center; } /* when squeezed, the last chip gives way, not the first */
.tb-time { flex: none; }
@media (max-width: 1100px) {
  #top { gap: 10px; padding: 0 8px; }
  .tb-nation { min-width: 150px; }
  #tbDate { min-width: 0; font-size: 13px; }
  .tb-time { gap: 6px; }
  .speeds button { width: 22px; }
}

@media (max-width: 900px) {
  #start { left: 12px; right: 12px; width: auto; top: 12px; bottom: auto; }
  #side { width: 290px; }
  #dispatch { display: none; }
  .tb-res .chip:nth-child(3), .tb-res .chip:nth-child(4) { display: none; }
}

/* ---- touch and phones ----
   body.touch: a finger is the pointer (touch wording, no hover). body.phone: a phone-sized screen (hud.js), laid out
   for landscape first; body.portrait: held upright, where the panel becomes a sheet from below. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
canvas#map { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body.touch { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body:not(.touch) .only-touch, body.touch .no-touch { display: none !important; }
.st-portrait { margin-top: 8px; font-size: 13px; font-style: italic; color: var(--brass-2); }
body:not(.portrait) .st-portrait { display: none !important; }
body.touch .btn.small { padding: 6px 10px; }
body.touch .iconbtn { padding: 4px 8px; font-size: 12px; }
#tip { max-width: min(260px, calc(100vw - 12px)); }

/* top bar */
body.phone #top { height: 44px; gap: 8px; padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); }
body.phone .tb-nation { min-width: 0; max-width: 150px; gap: 6px; flex: 0 1 auto; }
body.phone #tbFlag { width: 30px; height: 20px; flex: none; }
body.phone #tbName { font-size: 14px; }
body.phone #tbGov { display: none; }
body.phone .tb-alert, body.phone .tb-goal { margin-left: 4px; height: 30px; padding: 0 7px; }
body.phone .tb-res { gap: 0; justify-content: flex-start; }
body.phone .chip { min-width: 0; padding: 0 7px; }
body.phone .chip span { font-size: 10.5px; }
body.phone .chip b { font-size: 12px; white-space: nowrap; }
body.phone .chip.resolve { min-width: 66px; }
body.phone .tb-res .chip:nth-child(3), body.phone .tb-res .chip:nth-child(4) { display: none; }
body.phone .tb-time { gap: 5px; }
body.phone #tbDate { font-size: 12px; min-width: 0; white-space: nowrap; }
body.phone .speeds button { width: 28px; height: 30px; }
body.phone .tb-help { width: 30px; height: 30px; font-size: 14px; }
body.phone .sound-panel { top: 48px; }
body.phone.portrait .tb-res, body.phone.portrait #tbName, body.phone.portrait #tbSound { display: none; }
body.phone.portrait .tb-nation { flex: 1 0 auto; }
/* upright, the bar has no room: the warning hangs below it at the map's top right */
body.phone.portrait .tb-threat { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 50px); right: 8px; z-index: 9; padding: 0 7px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
body.phone.portrait .tb-threat img { display: none; }
body.phone.portrait .speeds button { width: 26px; }

/* the panel: a drawer from the left, or a sheet from below when upright */
body.phone #side { left: env(safe-area-inset-left, 0px); top: 44px; max-height: calc(100% - 44px); width: min(320px, 46vw); border-left: 0; }
body.phone.side-hidden #side { transform: translateX(calc(-100% - 40px)); }
body.phone .tabs button { font-size: 13.5px; padding: 10px 0; letter-spacing: 0; }
body.phone #tabBody { padding: 10px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.phone #sideToggle { left: calc(env(safe-area-inset-left, 0px) + min(320px, 46vw)); top: 52px; width: 36px; height: 44px; font-size: 18px; }
body.phone.side-hidden #sideToggle { left: env(safe-area-inset-left, 0px); }
body.phone.portrait #side { left: 0; right: 0; width: auto; top: 44vh; bottom: 0; max-height: none; border-left: 0; border-right: 0; border-bottom: 0; }
body.phone.portrait #tabBody { flex: 1; }
body.phone.portrait.side-hidden #side { transform: translateY(calc(100% + 40px)); }
body.phone.portrait #sideToggle { left: 0; top: calc(44vh - 44px); width: 44px; height: 44px; border-left: 0; }
body.phone.portrait.side-hidden #sideToggle { top: 52px; }

/* map bar: icons only; its key opens on demand (tap the active view again to close it) */
body.phone #mapbar { left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); padding: 3px; gap: 4px; flex-wrap: nowrap; max-width: none; }
body.phone:not(.side-hidden):not(.portrait) #mapbar { left: calc(env(safe-area-inset-left, 0px) + min(320px, 46vw) + 46px); }
body.phone .mb-group button { padding: 8px 9px; }
body.phone .mb-group button span { display: none; }
body.phone .mb-group button svg { width: 18px; height: 18px; }
body.phone #mbLegend { display: none; max-width: calc(100vw - 16px); }
body.phone.legend-open #mbLegend { display: block; }
body.phone .lg-title small { display: block; margin-left: 0; }
body.phone.portrait:not(.side-hidden) #mapbar { display: none; }

/* zoom buttons in place of the minimap */
body.phone #minimapWrap { display: block; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); border: 0; background: none; box-shadow: none; }
body.phone #minimap, body.phone #unitsBar { display: none; }
body.phone .mm-zoom { position: static; gap: 6px; }
body.phone .mm-zoom button { width: 40px; height: 40px; font-size: 20px; }
body.phone.portrait:not(.side-hidden) #minimapWrap { display: none; }

/* dispatches, the province card, the pause banner and the selection */
body.phone #dispatch { display: flex; top: 50px; right: max(8px, env(safe-area-inset-right)); width: min(250px, 36vw); gap: 4px; }
body.phone .slip { font-size: 12.5px; padding: 4px 8px 5px; }
body.phone .slip:nth-child(n+3) { display: none; }
body.phone.portrait #dispatch { top: 78px; width: min(260px, 66vw); }
body.phone #provCard { top: 50px; bottom: auto; right: max(56px, env(safe-area-inset-right)); width: min(290px, calc(100vw - 72px)); max-height: calc(100vh - 58px);
  overflow-y: auto; padding: 10px 12px; overscroll-behavior: contain; }
body.phone.portrait #provCard { left: 8px; right: 8px; width: auto; max-height: 46vh; }
body.phone #pauseBanner { top: 50px; font-size: 11px; padding: 3px 10px; }
body.phone #selBar { left: max(8px, env(safe-area-inset-left)); transform: none; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 50px); gap: 4px 8px; padding: 5px 8px;
  font-size: 11.5px; flex-wrap: wrap; max-width: min(480px, calc(100vw - 360px)); }
body.phone:not(.side-hidden):not(.portrait) #selBar, body.phone:not(.side-hidden):not(.portrait) #pauseBanner { left: calc(env(safe-area-inset-left, 0px) + min(320px, 46vw) + 46px); }
body.phone:not(.side-hidden):not(.portrait) #pauseBanner { transform: none; }
body.phone.portrait #selBar { left: 8px; max-width: calc(100vw - 64px); }
body.phone .cmdbtn { min-width: 30px; height: 28px; font-size: 13px; }
.sb-hint { color: #bba982; }
.sb-x { color: #eadfc4; }

/* start screen: a narrow card on the left, or a sheet from below when upright */
body.phone #start { left: max(8px, env(safe-area-inset-left)); top: 8px; bottom: 8px; width: min(330px, 48vw); align-items: flex-start; }
body.phone .start-card { padding: 14px 14px 12px; overflow-y: auto; max-height: calc(100vh - 16px); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.phone .st-kicker { display: none; }
body.phone .start-card h1 { margin: 0 0 8px; }
body.phone .start-card h1 img { width: min(100%, 240px); margin: 0 auto; }
body.phone .st-lede { font-size: 14.5px; margin-bottom: 10px; }
body.phone #pick { min-height: 0; padding: 8px 0; margin-bottom: 10px; }
body.phone .pick-stats { grid-template-columns: repeat(2, 1fr); }
body.phone .st-help { font-size: 12.5px; margin-top: 10px; }
body.phone .st-actions .btn { padding: 9px 12px; }
body.phone.portrait #start { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; align-items: flex-end; }
body.phone.portrait .start-card { max-height: 52vh; }

/* dialogs fit a short screen */
body.phone #modal { padding: 14px 16px; max-height: calc(100vh - 16px); overflow-y: auto; }
body.phone .m-title { font-size: 24px; }
body.phone .m-text { font-size: 15px; margin-bottom: 10px; }
body.phone #help { padding: 14px 16px; max-height: calc(100vh - 16px); }
body.phone .help-grid p { font-size: 14px; }
body.phone.portrait #pauseBanner { white-space: nowrap; font-size: 10.5px; letter-spacing: .03em; padding: 3px 8px; }
.nc-outlook { margin: 8px 0 2px; font-size: 13.5px; line-height: 1.3; font-style: italic; color: var(--ink-2); }

/* the stack panel: the selected stacks' corps one by one, under the top bar beside the side panel */
#stackPanel { position: fixed; top: 66px; left: 380px; z-index: 9; width: 300px; max-height: calc(100vh - 190px); display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--brass-2); box-shadow: 0 6px 24px rgba(0,0,0,.3); transition: left .22s ease; }
body.side-hidden #stackPanel { left: 28px; }
.sp-head { position: relative; padding: 7px 30px 6px 10px; border-bottom: 1px solid var(--paper-3); }
.sp-head b { font-family: var(--sc); font-weight: 700; font-size: 16px; margin-right: 8px; }
.sp-head small { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.sp-head .pc-close { top: 3px; }
.sp-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--paper-3); }
.sp-tools .iconbtn { display: inline-flex; align-items: center; gap: 3px; }
.sp-tools .iconbtn img { width: 14px; height: 14px; }
.sp-list { overflow-y: auto; padding: 4px 6px 6px; overscroll-behavior: contain; }
.sp-prov { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 3px 3px; font-family: var(--sc); font-weight: 700; font-size: 13px; color: var(--ink-2); }
.sp-prov small { font-family: var(--mono); font-weight: 400; font-size: 10.5px; color: var(--ink-3); }
.sp-row { display: grid; grid-template-columns: 26px 1fr 56px; gap: 1px 7px; align-items: center; width: 100%; margin-bottom: 3px; padding: 4px 6px;
  text-align: left; font: inherit; color: var(--ink); background: var(--paper-2); border: 1px solid transparent; cursor: pointer; }
.sp-row:hover { border-color: var(--paper-3); }
.sp-row.on { background: #f6e3ae; border-color: var(--brass); }
.sp-nm::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--cc); vertical-align: 1px; } /* its command's colour */
.sp-row img { grid-row: 1 / span 2; width: 26px; height: 26px; opacity: .55; }
.sp-row.on img { opacity: 1; }
.sp-nm { font-family: var(--sc); font-weight: 700; font-size: 14px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bars { display: flex; flex-direction: column; gap: 2px; }
.sp-bars span { display: block; height: 4px; background: var(--paper-3); }
.sp-bars i { display: block; height: 100%; }
.sp-bars .s i { background: #6f8f4e; } .sp-bars .o i { background: #4f7398; }
.sp-sub { grid-column: 2 / span 2; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-hint { padding: 5px 10px 7px; border-top: 1px solid var(--paper-3); font-size: 12.5px; line-height: 1.3; color: var(--ink-3); font-style: italic; }
/* the pause banner steps aside for it */
body.stack-open #pauseBanner { transform: none; left: 692px; }
body.stack-open.side-hidden #pauseBanner { left: 340px; }
body.phone #stackPanel { top: 50px; left: calc(env(safe-area-inset-left, 0px) + 44px); width: min(280px, 42vw); max-height: calc(100vh - 180px); } /* clear of the selection bar */
body.phone:not(.side-hidden):not(.portrait) #stackPanel { left: calc(env(safe-area-inset-left, 0px) + min(320px, 46vw) + 46px); }
body.phone.portrait #stackPanel { width: calc(100vw - 100px); max-height: 38vh; }
body.phone.stack-open #pauseBanner { display: none; }
body.phone .sp-row { padding: 6px; }
body.phone .sp-hint { display: none; }

.cmd-posture { margin: 4px 0 0 70px; font-size: 12.5px; line-height: 1.3; font-style: italic; color: var(--ink-3); }
.cmd-posture.bold { color: var(--red); font-style: normal; font-weight: 600; }


/* conscription: the law's icon on the Manpower chip, and the panel it opens */
.chip.clickable { cursor: pointer; border-radius: 3px; }
.chip.clickable:hover { background: rgba(255,236,190,.07); }
.chip b .law-ico { vertical-align: -2px; margin-right: 4px; color: #e0c27f; }
.chip b small { font-size: 11px; color: #bba982; margin-left: 2px; }
.law-panel { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 60; width: min(380px, calc(100vw - 16px)); max-height: calc(100vh - 80px); overflow-y: auto;
  padding: 10px 12px 10px; background: var(--paper); border: 1px solid var(--brass-2); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--paper-3); }
.lp-head { position: relative; font-family: var(--sc); font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.lp-head .pc-close { top: -2px; right: -2px; }
.lp-pool { font-family: var(--mono); font-size: 12px; color: var(--ink-2); line-height: 1.5; margin-bottom: 6px; }
.lp-note { font-size: 13px; font-style: italic; color: var(--red); margin-bottom: 6px; }
.law-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; margin-top: 5px; padding: 7px 8px; font: inherit; color: var(--ink);
  background: var(--paper-2); border: 1px solid transparent; cursor: pointer; }
.law-row:hover:not(:disabled) { border-color: var(--brass); }
.law-row.on { background: #f3e2b4; border-color: var(--brass); }
.law-row:disabled:not(.on) { opacity: .55; cursor: default; }
.law-row .law-ico { flex: none; color: var(--ink-2); margin-top: 2px; }
.law-row.on .law-ico { color: var(--brass-2); }
.law-row span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.law-row b { font-family: var(--sc); font-weight: 700; font-size: 15px; }
.law-row small { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); }
.law-row i { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.law-pick { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 6px 8px; font: inherit; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--paper-3); cursor: pointer; }
.law-pick:hover { border-color: var(--brass); }
.law-pick .law-ico { flex: none; color: var(--brass-2); }
.law-pick span { display: flex; flex-direction: column; }
.law-pick b { font-family: var(--sc); font-weight: 700; font-size: 15px; }
.law-pick small { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
body.phone .law-panel { top: 48px; }

/* war coming: the warning chip, and the panel it opens */
.tb-threat { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 6px; cursor: pointer;
  background: #6e2a10; color: #ffd27a; border: 1px solid #d9a21b; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.tb-threat b { color: #fff3e0; font-weight: 700; } .tb-threat small { color: #ffd27a; font-size: 11px; }
.tb-threat img { border: 1px solid #000; }
.tb-threat.ready { background: #8e2b20; color: #ffe0d4; border-color: #ff7a5c; animation: threatPulse 1.2s ease-in-out infinite; }
.tb-threat.ready small { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tb-threat:hover { filter: brightness(1.15); }
@keyframes threatPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,162,27,.65); } 50% { box-shadow: 0 0 0 6px rgba(217,162,27,0); } }
@media (max-width: 1100px) { .tb-threat img + img, .tb-threat b, .tb-threat .tl { display: none; } .tb-threat.ready small { font-size: 10px; } }
body.phone .tb-threat { height: 30px; padding: 0 6px; gap: 3px; }
body.phone .tb-threat img + img, body.phone .tb-threat b, body.phone .tb-threat .tl { display: none; }
body.phone .tb-threat small { font-size: 10px; }
.threat-panel { transform: none; border-top: 3px solid var(--red); }
.threat-panel .note { margin: 2px 0 6px; font-size: 13.5px; }
.th-row { display: flex; gap: 10px; align-items: center; padding: 7px 8px; margin-top: 5px; background: #f6ead0; }
.th-row.ready { background: #f3d9cf; }
.th-row img { flex: none; border: 1px solid var(--ink); }
.th-row span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-row b { font-family: var(--sc); font-weight: 700; font-size: 15px; }
.th-row small { font-size: 12.5px; color: var(--ink-2); line-height: 1.25; }
.th-row small + small { color: var(--ink-3); }

/* the Army tab: field commands as regimental cards */
.cmd { position: relative; border: 1px solid #b9a782; background: #f1e7cf; padding: 0 9px 9px; margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(40,28,14,.15); overflow: hidden; }
.cmd-banner { display: flex; align-items: center; gap: 8px; margin: 0 -9px 0 -9px; padding: 6px 8px 6px 12px;
  background: var(--cc); border-bottom: 1px solid rgba(0,0,0,.35); }
.cmd-badge { flex: none; width: 30px; height: 34px; display: grid; place-items: center; padding-bottom: 5px; font-family: var(--sc); font-weight: 700; font-size: 14px;
  color: var(--cc); background: #1c140e; clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.cmd-title { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; line-height: 1.05; }
.cmd-title b { font-family: var(--sc); font-weight: 700; font-size: 16.5px; color: #140e09; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-title small { font-family: var(--mono); font-size: 10.5px; color: rgba(20,14,9,.75); }
.cmd-title:hover b { text-decoration: underline; }
.cmd-comp { display: flex; gap: 4px; font-family: var(--mono); font-size: 11px; font-weight: 600; color: #1c140e; }
.cmd-comp span { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,248,230,.72); border: 1px solid rgba(20,14,9,.35); padding: 1px 5px 1px 2px; border-radius: 2px; }
.cmd-comp img { width: 16px; height: 16px; }
.cmd-comp .empty { font-style: italic; font-weight: 400; }
.cmd-star { flex: none; width: 26px; height: 26px; border: 1px solid rgba(20,14,9,.45); background: rgba(255,250,236,.25); color: rgba(20,14,9,.45); font-size: 15px; cursor: pointer; padding: 0; border-radius: 2px; }
.cmd-star.on { background: #1c140e; color: #f2c14e; border-color: #1c140e; }
.cmd-star { display: grid; place-items: center; } .ico.fill { fill: currentColor; }
.cmd-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 7px; }
.cmd-meters label { display: flex; justify-content: space-between; font-family: var(--sc); font-weight: 700; font-size: 12px; color: var(--ink-3); margin-bottom: 1px; }
.cmd-meters label b { font-family: var(--mono); font-size: 11px; color: var(--ink); font-weight: 500; }
.cmd-meters span { display: block; height: 5px; background: rgba(60,45,30,.18); box-shadow: inset 0 1px 1px rgba(0,0,0,.15); }
.cmd-meters i { display: block; height: 100%; }
.cmd-meters .s i { background: #6f8f4a; } .cmd-meters .o i { background: #4f7a9e; }
.cmd-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 7px; }
.cmd-mode { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 5px; cursor: pointer; font: inherit; color: var(--ink-3);
  background: #fbf5e4; border: 1px solid #cdbb94; transition: background .12s, color .12s, transform .08s; }
.cmd-mode b { font-family: var(--sc); font-weight: 700; font-size: 13px; letter-spacing: .03em; }
.cmd-mode:hover { color: var(--ink); border-color: var(--cc); }
.cmd-mode:active { transform: translateY(1px); }
.cmd-mode.on { color: #140e09; background: var(--cc); border-color: #2a2016; }
.cmd .segs { border-color: #b9a782; }
.cmd .seg.on { background: #2c241c; }
.cmd-status { display: flex; align-items: center; gap: 7px; margin: 9px 0 8px; padding: 0; font-family: var(--serif); font-size: 14.5px; font-weight: 500; line-height: 1.25;
  color: var(--ink-2); background: none; border: 0; }
.cmd-status .ci { flex: none; }
.cmd-status.st-hold .ci { color: #4d6b3a; } .cmd-status.st-reserve .ci, .cmd-status.st-rush .ci { color: #3f6585; }
.cmd-status.st-mass .ci, .cmd-status.st-staged .ci { color: #a8781e; } .cmd-status.st-wait .ci { color: var(--ink-3); }
.cmd-status.st-attack { color: #6e1f16; }
.cmd-status.st-attack .ci, .cmd-status.st-rush .ci { color: var(--red); }
@keyframes cmdBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.cmd.stamp { animation: cmdStamp .65s ease-out; }
.cmd.stamp .cmd-mode.on { animation: modePop .45s ease-out; }
@keyframes cmdStamp { 0% { box-shadow: 0 0 0 0 var(--cc), 0 2px 6px rgba(40,28,14,.18); } 40% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cc) 60%, transparent), 0 2px 6px rgba(40,28,14,.18); } 100% { box-shadow: 0 0 0 12px transparent, 0 2px 6px rgba(40,28,14,.18); } }
@keyframes modePop { 0% { transform: scale(.92); } 55% { transform: scale(1.06); } 100% { transform: none; } }
.cmd-new { width: 100%; padding: 7px; }

/* mobilisation: the slider sets the goal; the filled track behind it is where the factories actually stand */
.mob-track { position: relative; padding: 2px 0; }
/* solid: working for the army now; hatched: between now and the goal, still being retooled (either way) */
.mob-track::before { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; pointer-events: none;
  background: linear-gradient(90deg, #8e2b20, #b5582a) 0 0 / min(var(--cur), var(--goal)) 100% no-repeat,
    repeating-linear-gradient(135deg, rgba(142,43,32,.55) 0 3px, rgba(142,43,32,.12) 3px 6px) 0 0 / max(var(--cur), var(--goal)) 100% no-repeat,
    rgba(60,45,30,.18);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.mob-track .slider { position: relative; display: block; width: 100%; height: 24px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.mob-track .slider::-webkit-slider-runnable-track { height: 8px; background: transparent; }
.mob-track .slider::-moz-range-track { height: 8px; background: transparent; }
.mob-track .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 22px; margin-top: -7px; background: linear-gradient(180deg, #4a3b2a, #2c241c);
  border: 2px solid #e8d4a2; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.mob-track .slider::-moz-range-thumb { width: 12px; height: 18px; background: linear-gradient(180deg, #4a3b2a, #2c241c); border: 2px solid #e8d4a2; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.mob-track .slider:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 2px; }
body.touch .mob-track .slider::-webkit-slider-thumb { width: 22px; height: 28px; margin-top: -10px; }
body.touch .mob-track::before { left: 11px; right: 11px; } /* the fill ends under the centre of the wider thumb */
.mob-state { font-family: var(--serif); font-size: 14.5px; font-weight: 500; color: var(--ink-2); margin: 3px 0 5px; line-height: 1.3; }
.mob-state .ms-icon { color: var(--ink-3); font-size: 9px; }
.mob-state .ico { vertical-align: -1px; } .mob-state .ms-icon.up { color: #8e2b20; }
.mob-state .ms-icon.down { color: #3f6585; }

/* Diplomacy: finding a country */
.dip-tools { display: flex; gap: 6px; margin: 2px 0 7px; }
.dip-find { flex: 1; min-width: 0; position: relative; display: block; }
.dip-find::before { content: ''; position: absolute; left: 9px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border: 2px solid var(--ink-3); border-radius: 50%; pointer-events: none; }
.dip-find::after { content: ''; position: absolute; left: 19px; top: 50%; width: 2px; height: 6px; margin-top: 2px; background: var(--ink-3); transform: rotate(-45deg); pointer-events: none; }
.dip-find input { width: 100%; height: 30px; padding: 0 8px 0 29px; font: inherit; font-size: 14px; color: var(--ink); background: #fbf5e4; border: 1px solid #b9a782; border-radius: 2px; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.dip-find input:focus { outline: none; border-color: var(--ink-2); background: #fffaf0; }
.dip-find input::placeholder { color: var(--ink-3); font-style: italic; }
#dipSort { flex: none; max-width: 46%; height: 30px; padding: 0 4px; font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--ink-2); background: #fbf5e4; border: 1px solid #b9a782; border-radius: 2px; cursor: pointer; }
.dip-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.dip-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-family: var(--sc); font-size: 13px; color: var(--ink-2); background: #fbf5e4;
  border: 1px solid #b9a782; border-radius: 13px; cursor: pointer; transition: background .12s, color .12s; }
.dip-chip i { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.dip-chip:hover { border-color: var(--ink-2); color: var(--ink); }
.dip-chip.on { background: #2c241c; border-color: #2c241c; color: #f1e2bd; }
.dip-chip.on i { color: #d9c48e; }
.dip-chip.zero:not(.on) { opacity: .5; }
body.touch .dip-find input, body.touch #dipSort { height: 36px; font-size: 16px; } /* 16px, or a phone zooms in when the box takes the cursor */
body.touch .dip-chip { padding: 5px 11px; }

/* the drawn icons (assets/icons, cut from the artist's sheets by tools/cut-icon.py): Industry and Manpower */
.chip.has-ico { flex: none; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; justify-content: start; min-width: 0; }
.chip.has-ico .chip-ico { grid-row: 1 / 3; height: 30px; width: auto;
  filter: drop-shadow(0 0 1px rgba(255,236,196,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.6)); } /* a faint halo: the factory's dark wall on the dark bar */
.chip.has-ico > span, .chip.has-ico > b { grid-column: 2; }
.stat-ico { height: 14px; width: auto; vertical-align: -2px; margin-right: 4px; }
.h-lead { display: inline-flex; align-items: center; gap: 7px; }
.h-ico { height: 22px; width: auto; }
/* a narrow window or a phone: the icon stands in for the word */
@media (max-width: 1100px) {
  .chip.has-ico { grid-template-rows: auto; column-gap: 5px; padding: 2px 8px; }
  .chip.has-ico > span { display: none; }
  .chip.has-ico .chip-ico { grid-row: 1; height: 22px; }
  .chip.resolve { min-width: 84px; }
}
body.phone .chip.has-ico { grid-template-rows: auto; column-gap: 5px; }
body.phone .chip.has-ico > span { display: none; }
body.phone .chip.has-ico .chip-ico { grid-row: 1; height: 22px; }

/* the opening peace's countdown chip: the threat chip's place and shape, in calm colours */
.tb-threat.tb-peace { background: #2f3a2a; color: #cfe0b4; border-color: #7f9a62; animation: none; }
.tb-threat.tb-peace small { color: #cfe0b4; }
/* the victory standings (Command tab and the end of the game) */
.vs-table { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.vs-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; font-size: 14px; background: rgba(255,250,236,.5); }
.vs-row i { width: 16px; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: right; }
.vs-row span { flex: 1; }
.vs-row b { font-family: var(--mono); font-weight: 600; font-size: 12.5px; }
.vs-row.me { background: #2c241c; color: #f1e2bd; } .vs-row.me i { color: #d9c48e; }
.vs-gap { text-align: center; color: var(--ink-3); font-size: 11px; line-height: 1; }

/* the shared line icons, and the small info buttons that hold a section's rules */
.ico { flex: none; vertical-align: -2px; }
button .ico { pointer-events: none; }
.pc-close, .tb-help, #sideToggle, .iconbtn, .tb-alert, .tb-goal, .speeds button { display: inline-grid; place-items: center; }
.tb-alert, .tb-goal { grid-auto-flow: column; gap: 5px; }
.info { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; vertical-align: middle; }
.info:hover, .info.on { color: var(--ink); }
.sec h3 .h-lead, .sec h3 > span:first-child { display: inline-flex; align-items: center; }
.sec-line { font-size: 14.5px; color: var(--ink-2); margin: 0 0 6px; }

/* the title: CONQUER set small and wide above a large EUROPA */
/* the opening intelligence keeps its lines */
.slip.intel .tx { white-space: pre-line; -webkit-line-clamp: 8; }

/* the main menu */
.st-name { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 10px; }
.st-name span { font-family: var(--sc); font-weight: 700; font-size: 14px; color: var(--ink-3); }
.st-name input { font: inherit; font-size: 18px; padding: 7px 9px; background: #fbf6e8; border: 1px solid var(--paper-3); color: var(--ink); }
.st-name input:focus { outline: none; border-color: var(--ink-2); }
.st-play { width: 100%; font-size: 22px; padding: 10px 0; letter-spacing: .08em; }
.st-msg { min-height: 20px; margin: 6px 0 2px; font-size: 14px; color: var(--red); }
.st-link { border: 0; background: none; padding: 0; font: inherit; font-size: 14.5px; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
.st-link:hover { color: var(--ink); }
.st-legal { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
a.st-link { display: inline-block; }
.lb-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lb-foot .st-link { font-size: 14px; }
.st-legal a { color: inherit; }
/* the lobby */
.lb-status { font-size: 19px; margin: 2px 0 4px; } .lb-status b { font-family: var(--mono); font-weight: 600; }
.lb-status small { display: block; font-size: 13.5px; color: var(--ink-3); }
.lb-hint { font-size: 14px; font-style: italic; color: var(--ink-2); margin: 0 0 8px; transition: color .2s; }
.lb-hint.nudge { color: var(--red); }
/* the lobby's big plate ("Waiting for players", then the last 30 seconds) in the middle of the screen, or just clear of the
   lobby card (428px wide with its margin) on a screen too small for the middle */
.lb-big { position: fixed; z-index: 19; top: 50%; left: max(50%, 590px); transform: translate(-50%, -50%); pointer-events: none; text-align: center;
  color: var(--ink); background: rgba(239,230,207,.86); border: 1px solid var(--paper-3); border-radius: 2px; box-shadow: 0 4px 18px rgba(36,27,19,.18);
  padding: 10px 28px 12px; min-width: 220px; }
.lb-big small { display: block; font: 700 19px var(--sc); letter-spacing: .14em; color: var(--ink-2); }
.lb-big b { display: block; font: 700 128px/1 var(--sc); }
.lb-big.final b { color: var(--red); }
.lb-big.tick b { animation: lbTick .45s ease-out; }
/* before the countdown: "Waiting for players", its dots coming one by one */
.lb-big.waiting { left: max(50%, 730px); background: none; border-color: transparent; box-shadow: none; }
/* no plate behind "Waiting for players": the words stand on the map in a parchment halo, like its labels */
.lb-big.waiting b, .lb-big.waiting small { text-shadow: 0 0 1px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper), 0 0 14px var(--paper); }
.lb-big.waiting small { color: var(--ink); }
.lb-big.waiting b { font-size: 46px; line-height: 1.15; white-space: nowrap; }
.lb-big .dots { display: inline-block; width: 1em; text-align: left; animation: lbDots 1.6s steps(1, end) infinite; }
@keyframes lbDots { 0% { clip-path: inset(0 100% 0 0); } 25% { clip-path: inset(0 66% 0 0); } 50% { clip-path: inset(0 33% 0 0); } 75% { clip-path: inset(0 0 0 0); } }
@keyframes lbTick { from { transform: scale(1.12); opacity: .55; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 900px) { .lb-big, .lb-big.waiting { left: 50%; top: auto; bottom: 3%; transform: translateX(-50%); } .lb-big b { font-size: 92px; } .lb-big.waiting b { font-size: 32px; } } /* below the card */
body.phone .lb-big { left: calc(50% + min(330px, 48vw) / 2 + 4px); top: 50%; bottom: auto; transform: translate(-50%, -50%); }
body.phone .lb-big { min-width: 150px; padding: 6px 18px 8px; }
body.phone .lb-big b { font-size: 76px; }
body.phone .lb-big.waiting b { font-size: 24px; }
body.phone.portrait .lb-big { left: 50%; top: 18%; }
/* the lobby card's handle: the card slides off to the left (up on a narrow screen, down on a phone held upright) and the
   handle stays at the screen's edge to bring it back. Its chevron points the way the card will go. */
#start { transition: transform .22s ease; }
.start-card { transition: visibility 0s; }
.st-tuck { display: none; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 22px; height: 56px; padding: 0; pointer-events: auto;
  place-items: center; cursor: pointer; background: var(--paper); color: var(--ink-2); border: 1px solid var(--brass-2); border-left: 0; box-shadow: 4px 4px 14px rgba(0,0,0,.25); }
.st-tuck:hover { color: var(--ink); background: #f6efdc; }
.st-tuck .ico { transition: transform .22s ease; }
.st-tuck.news::after { content: ''; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
#start.in-lobby .st-tuck { display: grid; }
body.lobby-tucked #start.in-lobby { transform: translateX(calc(-100% - 28px)); }
body.lobby-tucked #start.in-lobby .start-card { visibility: hidden; transition: visibility 0s .22s; }
body.lobby-tucked .st-tuck .ico { transform: rotate(180deg); }
@media (max-width: 900px) {
  .st-tuck { left: 50%; top: 100%; transform: translateX(-50%); width: 64px; height: 26px; border: 1px solid var(--brass-2); border-top: 0; }
  .st-tuck .ico { transform: rotate(90deg); }
  body.lobby-tucked #start.in-lobby { transform: translateY(calc(-100% - 12px)); }
  body.lobby-tucked .st-tuck .ico { transform: rotate(-90deg); }
}
body.phone .st-tuck { left: 100%; top: 44px; transform: none; width: 36px; height: 48px; border: 1px solid var(--brass-2); border-left: 0; }
body.phone .st-tuck .ico { transform: none; }
body.phone.lobby-tucked #start.in-lobby { transform: translateX(calc(-100% - 8px)); }
body.phone.lobby-tucked .st-tuck .ico { transform: rotate(180deg); }
body.phone.portrait .st-tuck { left: 50%; top: auto; bottom: 100%; transform: translateX(-50%); width: 72px; height: 32px; border: 1px solid var(--brass-2); border-bottom: 0; }
body.phone.portrait .st-tuck .ico { transform: rotate(-90deg); }
body.phone.portrait.lobby-tucked #start.in-lobby { transform: translateY(calc(100% + 8px)); }
body.phone.portrait.lobby-tucked .st-tuck { bottom: calc(100% + env(safe-area-inset-bottom, 0px)); }
body.phone.portrait.lobby-tucked .st-tuck .ico { transform: rotate(90deg); }
/* with the card away, the plate takes the middle of the screen */
.lb-big { transition: left .22s ease; }
body.lobby-tucked .lb-big, body.lobby-tucked .lb-big.waiting { left: 50%; }
.lb-head { font-family: var(--sc); font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--paper-3); margin-bottom: 4px; display: flex; justify-content: space-between; }
.lb-head small { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--ink-3); }
.lb-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 15px; }
.lb-row b { flex: 1; font-weight: 600; } .lb-row span { color: var(--ink-3); font-style: italic; font-size: 14px; }
.lb-row.me { background: rgba(184,146,79,.18); }
.lb-noflag { display: inline-block; width: 24px; height: 16px; border: 1px dashed var(--ink-3); }
.lb-chat { margin: 10px 0 8px; }
.lb-log { height: 130px; overflow-y: auto; background: #fbf6e8; border: 1px solid var(--paper-3); padding: 5px 7px; font-size: 14px; line-height: 1.3; }
.lb-log .sys { font-style: italic; color: var(--ink-3); }
.lb-log .adm { color: var(--red); }
#lbChatForm { display: flex; gap: 5px; margin-top: 5px; }
.lb-log img, .cp-log img { vertical-align: -1px; }
.lb-log .me b { color: var(--brass-2); }
.chat-slow { font-size: 13px; color: var(--red); margin-top: 4px; }
.chat-slow:empty { display: none; }
/* the match's chat: a panel under the top bar */
.tb-chat { position: relative; padding: 0; }
.tb-chat.on { background: var(--brass-2); color: #fff; }
.tb-count { position: absolute; top: -7px; right: -8px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--red); color: #fff;
  font: 600 10px/16px var(--mono); text-align: center; pointer-events: none; }
.tb-count.hidden { display: none; }
.chat-panel { position: fixed; top: 60px; right: 14px; z-index: 59; width: 340px; padding: 9px 11px 10px; background: linear-gradient(#2c251e, #1f1a15);
  color: #eadfc4; border: 1px solid var(--brass-2); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.chat-panel.hidden { display: none; }
.cp-head { display: flex; align-items: baseline; gap: 8px; padding-right: 22px; font: 700 15px var(--sc); color: #f4e9cc; letter-spacing: .02em; margin-bottom: 6px; }
.cp-head small { font: 400 12px var(--mono); letter-spacing: 0; color: #a8977a; }
.chat-panel .pc-close { top: 5px; right: 6px; color: #bba982; }
.cp-log { height: 230px; overflow-y: auto; overscroll-behavior: contain; background: rgba(0,0,0,.28); border: 1px solid #4a3d2c; padding: 5px 7px;
  font-size: 14px; line-height: 1.32; overflow-wrap: anywhere; }
.cp-log .sys { font-style: italic; color: #a8977a; }
.cp-log .adm { color: #ec9a83; }
.cp-log .me b { color: var(--brass); }
#chatForm { display: flex; gap: 6px; margin-top: 7px; }
#chatIn { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 4px 7px; color: #f1e6c8; background: rgba(0,0,0,.3); border: 1px solid var(--brass-2); }
#chatIn:focus { outline: none; border-color: var(--brass); }
#chatIn::placeholder { color: #8f7f64; }
.chat-panel .chat-slow { color: #ec9a83; }
body.phone .chat-panel { top: 48px; right: max(8px, env(safe-area-inset-right)); width: min(340px, calc(100vw - 16px)); }
body.phone .cp-log { height: 30vh; }
body.touch #chatIn { font-size: 16px; } /* a phone does not zoom in on it */
#lbChatIn { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 4px 7px; background: #fbf6e8; border: 1px solid var(--paper-3); }
body.touch #lbChatIn, body.touch .st-name input { font-size: 16px; } /* a phone does not zoom in on it */
/* online: the clock cannot be paused or sped up */
.live-chip { display: none; font-family: var(--sc); font-weight: 700; font-size: 13px; color: #cfe0b4; border: 1px solid #7f9a62; padding: 3px 8px; white-space: nowrap; }
body.online .live-chip { display: inline-block; }
body.online .speeds, body.online #pauseBanner { display: none !important; }