/* 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; }
/* doctrine */
.doc-top { display: flex; align-items: center; gap: 10px; }
.doc-emblem { flex: none; display: block; }
.doc-name { flex: 1; min-width: 0; line-height: 1.2; }
.doc-name b { display: block; font-family: var(--sc); font-weight: 700; font-size: 17px; }
.doc-name i { font-size: 14px; color: var(--ink-2); }
.doc-pips { display: flex; gap: 3px; }
.doc-pips i { font-style: normal; font-family: var(--sc); font-weight: 700; font-size: 12px; min-width: 22px; text-align: center; padding: 1px 3px;
  border: 1px solid var(--paper-3); color: var(--ink-3); background: var(--paper-2); }
.doc-pips i.on { background: var(--leather); border-color: var(--leather); color: #d9b36a; }
.doc .meter { margin-top: 9px; }
.doc-next { margin-top: 5px; }
.doc-ranks { list-style: none; margin: 10px 0 12px; padding: 0; }
.doc-ranks li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid var(--paper-3); }
.doc-ranks li > i { flex: none; width: 26px; height: 22px; display: grid; place-items: center; margin-top: 1px; font-style: normal;
  font-family: var(--sc); font-weight: 700; font-size: 13px; background: var(--leather); color: #d9b36a; }
.doc-ranks li > div { min-width: 0; }
.doc-ranks em { display: block; font-style: normal; font-family: var(--sc); font-weight: 700; font-size: 15px; color: var(--ink-2); letter-spacing: .02em; line-height: 1.2; }
.doc-ranks span { display: block; font-size: 17px; line-height: 1.3; color: var(--ink); }
.doc-ranks span b { font-family: var(--mono); font-size: 14.5px; font-weight: 600; }
.doc-ranks li.locked > i { background: var(--paper-3); color: var(--ink-3); }
.doc-ranks li.locked em, .doc-ranks li.locked span { color: var(--ink-3); }
.doc-card { background: #f6efdd; border: 1px solid var(--paper-3); padding: 12px 14px; margin-top: 8px; }
.doc-card .doc-name b { font-size: 21px; }
.doc-card .doc-name i { display: block; font-size: 15.5px; color: var(--ink-2); margin-top: 1px; }
.doc-card .doc-name small { display: block; font-family: var(--sc); font-size: 13px; color: var(--ink-3); letter-spacing: .04em; margin-top: 1px; }
.doc-pick { width: 100%; font-size: 15px; padding: 7px 10px; }
.doc-next { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.doc-next span { flex: 1; }
.doc-ours { font-family: var(--sc); font-weight: 700; font-size: 15px; color: var(--brass-2); padding: 7px 0 1px; text-align: center; border-top: 1px solid var(--brass); }
/* the doctrine panel beside the sidebar: every school side by side */
#docPanel, #formPanel { position: fixed; top: 66px; left: 380px; z-index: 11; width: min(760px, calc(100vw - 400px)); max-height: calc(100vh - 150px); overflow-y: auto;
  background: var(--paper); border: 1px solid var(--brass-2); box-shadow: 0 8px 30px rgba(0,0,0,.35); transition: left .22s ease; }
body.side-hidden #docPanel, body.side-hidden #formPanel { left: 28px; }
.dp-head { position: sticky; top: 0; z-index: 1; background: var(--paper); padding: 10px 44px 9px 14px; border-bottom: 1px solid var(--paper-3); }
.dp-head b { display: block; font-family: var(--sc); font-weight: 700; font-size: 21px; }
.dp-head span { font-size: 14.5px; color: var(--ink-2); }
.dp-close { position: absolute; right: 10px; top: 10px; }
.dp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; padding: 14px; }
.dp-grid .doc-card { margin: 0; display: flex; flex-direction: column; }
.dp-grid .doc-card .doc-pick, .dp-grid .doc-ours { margin-top: auto; }
.doc-card.ours { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); background: var(--paper); }
body.phone #docPanel, body.phone #formPanel { top: 50px; left: calc(env(safe-area-inset-left, 0px) + 8px); right: calc(env(safe-area-inset-right, 0px) + 8px); bottom: 8px; width: auto; max-height: none; }
body.phone .dp-grid { grid-template-columns: 1fr; padding: 10px; }
body.phone .dp-head b { font-size: 19px; }
.fm-label { font-family: var(--sc); font-weight: 700; font-size: 14px; color: var(--ink-3); letter-spacing: .03em; margin-top: 10px; }
.fm-needs { list-style: none; margin: 3px 0 0; padding: 0; }
.fm-needs li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 17px; line-height: 1.25; border-top: 1px solid var(--paper-3); }
.fm-needs b { flex: none; font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.fm-needs b.pos { color: var(--green); }
.fm-core { font-size: 16.5px; line-height: 1.3; color: var(--ink); margin: 2px 0 12px; }
.fm-btns { display: flex; gap: 8px; margin-top: auto; }
.fm-btns .btn.small { flex: none; padding: 7px 10px; font-size: 14px; }
.fm-btns .doc-pick { flex: 1; width: auto; margin-top: 0; }
.fm-ready { color: var(--green); font-style: normal; font-weight: 600; }
.fm-key { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 14px; color: var(--ink-2); }
.fm-key i { width: 12px; height: 12px; border: 1px solid #241b13; display: inline-block; }
.fm-key i.need { background: repeating-linear-gradient(-45deg, #b01810 0 2px, transparent 2px 5px); margin-left: 8px; }
.fm-key .st-link { margin-left: auto; font-size: 14px; }
.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; }
.q-cmd { display: flex; align-items: center; gap: 4px; }
.q-cmd small { font-family: var(--sc); font-size: 12.5px; color: var(--ink-3); }
.q-cmd select { font: inherit; font-size: 14px; max-width: 104px; padding: 1px 2px; background: #fbf6e8; color: var(--ink); border: 1px solid var(--paper-3); }
.qitem { display: grid; grid-template-columns: 1fr auto 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; }
#dispatch .slip:nth-child(3) { opacity: .35; }
.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; }
#dispatch .slip.fade { opacity: 0; }
@keyframes slipIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* the answer to our offer of a pact or an alliance: under the top bar, and under the peace banner while it shows */
#answers { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 30; width: min(400px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
body.in-peace #answers { top: 104px; }
.answer { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 12px; background: #f6efdc; border: 1px solid #cdbb94; padding: 9px 14px 10px; font: 500 14.5px/1.25 var(--serif);
  box-shadow: 0 4px 16px rgba(0,0,0,.35); animation: answerIn .25s ease-out; transition: opacity .6s; }
.answer > :first-child { flex: none; }
.answer .d { font: 700 12px var(--sc); color: var(--ink-3); letter-spacing: .04em; }
.answer .t { font: 700 22px/1.15 var(--sc); }
.answer.yes .t { color: var(--green); }
.answer.no .t { color: var(--red); }
.answer:nth-child(2) { opacity: .55; } /* only the newest, on top, is solid; the older the more see-through */
.answer:nth-child(3) { opacity: .22; }
.answer.fade { opacity: 0; }
@keyframes answerIn { from { transform: translateY(-10px); opacity: 0; } }

/* 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; }

/* a country's card: it slides out from the right, as tall as what it holds */
#provCard.nat { top: 66px; right: 0; bottom: auto; max-height: calc(100vh - 78px); width: 372px; z-index: 12; padding: 0; display: flex; flex-direction: column; border-width: 0 0 1px 1px; box-shadow: -8px 0 28px rgba(0,0,0,.32); animation: nat-in .2s ease-out; }
#provCard.nat.nat-out { animation: nat-out .17s ease-in forwards; }
@keyframes nat-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes nat-out { from { transform: none; } to { transform: translateX(100%); } }
body.nat-open:not(.phone) #dispatch { right: 384px; }
.nat-head { position: relative; flex: none; background: var(--leather); color: #f1e6c8; padding: 18px 20px 16px; }
.nat-head .pc-close { right: 10px; top: 8px; color: #bba982; }
.nat-head .pc-close:hover { color: #f1e6c8; }
.acct-badge { display: inline-block; margin-left: 5px; padding: 2px; vertical-align: -3px; cursor: help; line-height: 0; }
.acct-badge svg { display: block; width: 13px; height: 15px; }
.nat-big .acct-badge { margin-left: 8px; vertical-align: 0; }
.nat-big .acct-badge svg { width: 20px; height: 23px; }
.acct-plate { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 3px 11px 3px 6px; background: var(--look); border: 1px solid rgba(255,255,255,.28); color: #f8efd6; font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 20px; }
.acct-plate img, .nat-who .acct-plate img { display: block; height: 22px; width: auto; border: 0; }
.look-brass { --look: #8a6d3b; } .look-red { --look: #7c1f1c; } .look-navy { --look: #1f3a5f; } .look-green { --look: #2f5233; } .look-steel { --look: #4a5057; }
.nat-who { display: flex; gap: 14px; align-items: center; padding-right: 14px; }
.nat-who img, .nat-who canvas { flex: none; display: block; border: 1px solid #000; }
.nat-big { font-family: var(--sc); font-weight: 700; font-size: 27px; line-height: 1; }
.nat-small { font-size: 16px; color: #c9b88e; margin-top: 4px; line-height: 1.15; }
.nat-nums { display: flex; margin-top: 13px; border: 1px solid #4a3d2e; }
.nat-nums div { flex: 1; padding: 6px 4px; text-align: center; font-size: 14.5px; color: #c9b88e; line-height: 1.1; }
.nat-nums div + div { border-left: 1px solid #4a3d2e; }
.nat-nums b { display: block; color: #f1e6c8; font-family: var(--mono); font-weight: 500; font-size: 17px; margin-bottom: 2px; }
.nat-nums b.pos { color: #9ec98f; } .nat-nums b.neg { color: #e8917c; }
.nat-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 14px 20px 12px; }
.nat-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 16px; }
.nat-facts > span { color: var(--ink-3); }
.nat-facts > b { font-weight: 600; text-align: right; }
.nat-facts b.pos { color: var(--green); } .nat-facts b.neg, .nat-facts .neg { color: var(--red); }
.nat-body .nc-outlook { font-size: 15.5px; line-height: 1.28; margin-top: 11px; }
.nat-body h4 { font-family: var(--sc); font-weight: 700; font-size: 15px; color: var(--ink-3); margin: 12px 0 5px; }
.nat-body > i { color: var(--ink-3); font-size: 15px; }
.nat-list { display: flex; flex-wrap: wrap; gap: 5px 12px; }
.nat-list .nc-chip { gap: 6px; font-family: var(--serif); font-size: 15.5px; line-height: 1.1; }
.nat-foot { flex: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--paper-3); }
.nat-foot .btn { flex: 1 1 40%; padding: 7px 8px; font-size: 15px; white-space: nowrap; }
.nat-foot .btn.warn { order: 5; flex-basis: 100%; }
.nat-foot .btn[data-kind="pact"], .nat-foot .btn.primary { flex-basis: 100%; }
.nat-foot .sec-line { flex: 1 1 100%; }
body.tutorial #provCard.nat { top: 250px; max-height: calc(100vh - 262px); } /* below the general */
body.phone #provCard.nat { top: 50px; right: 0; bottom: auto; left: auto; width: min(340px, calc(100vw - 56px)); max-height: calc(100vh - 56px); display: block; overflow-y: auto; }
body.phone #provCard.nat .nat-body { overflow: visible; }
body.phone.portrait #provCard.nat { left: 0; right: 0; width: auto; top: 50px; max-height: calc(100vh - 56px); display: flex; overflow: hidden; }
body.phone.portrait #provCard.nat .nat-body { overflow-y: auto; }
body.phone.tutorial #provCard.nat { top: 190px; max-height: calc(100vh - 196px); }
body.phone .nat-head { padding: 12px 14px 10px; }
body.phone .nat-big { font-size: 22px; }
body.phone .nat-body { padding: 10px 14px 8px; }
body.phone .nat-foot { padding: 8px 14px 10px; }

/* 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; }
/* the name box, cut a little short for the Discord square on its right, the same height as the box */
.st-namerow { display: flex; align-items: flex-end; gap: 8px; margin: 4px 0 10px; }
.st-namerow .st-name { flex: 1; min-width: 0; margin: 0; }
.st-namerow .st-name input { width: 100%; box-sizing: border-box; }
#stDiscord { flex: none; align-self: flex-end; display: grid; place-items: center; width: 38px; height: 38px; background: #5865f2; color: #fff; border: 1px solid #4752c4; }
#stDiscord:hover { background: #4752c4; }
.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 */
/* the opening peace: a banner under the middle of the top bar, and the card that announces it */
#peaceBanner { position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 8px;
  padding: 6px 16px 6px 12px; background: #2f3a2a; color: #e2ecd0; border: 1px solid #7f9a62; box-shadow: 0 3px 12px rgba(0,0,0,.3);
  font-family: var(--sc); font-weight: 700; font-size: 17px; letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
#peaceBanner svg { color: #cfe0b4; flex: none; }
#peaceIntro { position: fixed; top: 46%; left: 50%; transform: translate(-50%, -50%); z-index: 35; width: min(560px, calc(100vw - 32px));
  padding: 22px 30px 24px; text-align: center; background: #2f3a2a; color: #e8efd8; border: 1px solid #9bb37c;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 0 0 4px #2f3a2a, inset 0 0 0 5px #5d7247; cursor: pointer;
  animation: pi-in .45s ease-out; }
#peaceIntro svg { color: #cfe0b4; }
@keyframes pi-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.pi-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #a9bf8a; margin-top: 6px; }
.pi-title { font-family: var(--sc); font-weight: 700; font-size: 46px; line-height: 1.05; margin: 4px 0 10px; color: #f1f5e6; }
.pi-text { font-size: 19px; line-height: 1.45; color: #d6e2c0; }
body.phone #peaceBanner { top: 50px; font-size: 14.5px; padding: 4px 11px 4px 8px; }
body.phone.in-peace #dispatch, body.phone.portrait.in-peace #dispatch, body.phone.in-peace #stackPanel { top: 88px; }
body.phone #answers { top: 50px; }
body.phone.portrait #answers { top: 78px; }
body.phone.in-peace #answers, body.phone.portrait.in-peace #answers { top: 88px; }
body.phone .answer { font-size: 13px; padding: 6px 10px 7px; gap: 10px; }
body.phone .answer .t { font-size: 18px; }
body.phone #peaceIntro { padding: 18px 18px 20px; }
body.phone .pi-title { font-size: 36px; }
body.phone .pi-text { font-size: 16.5px; }
/* 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; }
button.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; }
button.info:hover, button.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-tutorial { width: 100%; margin-top: 8px; font-size: 17px; padding: 6px 0; letter-spacing: .06em; }
.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 words ("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. No plate behind them: they stand on the
   map in a parchment halo, like its labels */
.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); padding: 10px 28px 12px; min-width: 220px; }
.lb-big b, .lb-big 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 small { display: block; font: 700 19px var(--sc); letter-spacing: .14em; color: var(--ink); }
.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); }
.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-list { position: relative; max-height: 240px; overflow-y: auto; } /* ten rows, the rest a scroll away */
.lb-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 15px; }
.lb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.lb-who small { font-size: 13px; line-height: 14px; color: var(--ink-3); }
.lb-row.acct { margin: 2px 0; padding: 3px 8px 4px 6px; background: linear-gradient(90deg, var(--look) 42%, transparent 92%); color: #f8efd6; } /* the colour of the player's cosmetic, fading away to the right */
.lb-row.acct small { color: #d6cdbf; }
.lb-row b { flex: 1; font-weight: 600; } .lb-row span { color: var(--ink-3); font-style: italic; font-size: 14px; }
.lb-row.me:not(.acct) { background: rgba(184,146,79,.18); }
.lb-row.acct.me { box-shadow: inset 0 0 0 1px rgba(184,146,79,.55); }
.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; }

/* the tutorial: the general and what he says, at the top of the map */
body.tutorial .speeds, body.tutorial #pauseBanner, body.tutorial #tbChat { display: none !important; }
#tutorial { position: fixed; z-index: 30; top: 66px; right: 12px; width: min(540px, calc(100vw - 720px)); min-width: 360px; }
#tutorial, .fv-box { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: end; padding: 14px 16px 12px 10px;
  background: var(--paper); border: 1px solid var(--brass-2); box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--paper-3); }
/* a new player's first visit: everything dark but the Tutorial button, its light, the arrow and the general */
#firstVisit { position: fixed; inset: 0; z-index: 35; }
.fv-light { position: fixed; padding: 0; border: 0; background: rgba(255,232,170,.14); cursor: pointer; box-shadow: 0 0 0 200vmax rgba(12,9,6,.74); }
.fv-light::after { content: ''; position: absolute; inset: -2px; box-shadow: 0 0 0 2px #f2c230, 0 0 20px 7px rgba(255,214,130,.85); animation: fv-glow 1.5s ease-in-out infinite; pointer-events: none; }
@keyframes fv-glow { 50% { opacity: .5; } }
.fv-arrow { position: fixed; transform: rotate(var(--turn, 0deg)); filter: drop-shadow(0 0 7px rgba(255,214,130,.8)); animation: fv-nudge 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes fv-nudge { 50% { translate: calc(-9px * cos(var(--turn, 0deg))) calc(-9px * sin(var(--turn, 0deg))); } }
.fv-box { position: fixed; animation: tut-in .25s ease-out; }
body.tutorial #dispatch { top: 320px; } /* the reports go below the general */
#tutorial.tut-in { animation: tut-in .25s ease-out; }
@keyframes tut-in { from { opacity: 0; margin-top: -8px; } to { opacity: 1; margin-top: 0; } }
.tut-general { width: 104px; height: auto; display: block; align-self: end; margin-bottom: -12px; image-rendering: pixelated; }
.tut-kicker { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--red); }
.tut-title { font-family: var(--sc); font-weight: 700; font-size: 25px; line-height: 1.1; margin: 2px 0 4px; }
.tut-text { font-size: 17px; line-height: 1.38; color: var(--ink-2); margin: 0 0 10px; }
.tut-actions { display: flex; align-items: center; gap: 12px; }
.tut-actions .st-link { font-size: 14px; margin-right: auto; }
.tut-wait { font-family: var(--sc); font-weight: 700; font-size: 15px; color: var(--brass-2); }
/* the circle on what to press next, and what could leave the lesson with nothing to press */
#tutRing { position: fixed; z-index: 32; display: none; box-sizing: border-box; border: 4px solid #f2c230; box-shadow: 0 0 0 2px rgba(40,28,10,.65), 0 0 14px 3px rgba(255,214,130,.8); pointer-events: none; animation: fv-glow 1.1s ease-in-out infinite; }
#tutArrow { z-index: 32; }
body.tutorial #tip { pointer-events: none; }
body.tutorial [data-act="cdisband"], body.tutorial [data-act="cnew"], body.tutorial [data-act="cancelgoal"], body.tutorial [data-act="ask"], body.tutorial [data-act="envoy"], body.tutorial .cmd-row:has([data-act="cfront"]) { display: none !important; }
.tut-glow { outline: 3px solid #c4261c; outline-offset: 2px; animation: tut-glow 1.3s ease-in-out infinite; }
@keyframes tut-glow { 50% { outline-color: rgba(196, 38, 28, 0.15); } }
body.phone #tutorial { top: 50px; left: calc(env(safe-area-inset-left, 0px) + 50px); right: 8px; width: auto; min-width: 0; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 12px 8px 8px; }
body.phone .fv-box { grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 12px 8px 8px; }
body.phone:not(.portrait) #tutorial { left: auto; width: min(470px, calc(100vw - 340px)); } /* sideways: on the right, clear of the stack panel */
body.phone:not(.side-hidden):not(.portrait) #tutorial { width: min(470px, calc(100vw - min(320px, 46vw) - 60px)); } /* and of the open panel */
body.phone .tut-general { width: 64px; margin-bottom: -8px; }
body.phone .tut-title { font-size: 20px; }
body.phone .tut-text { font-size: 15px; margin-bottom: 6px; }

/* the offline game: pause and speeds, and the way back to the menu; the online match and the lesson have neither */
#tbSpeeds, #tbMenu { display: none; }
body.offline #tbSpeeds { display: flex; }
body.offline #tbMenu { display: inline-block; width: auto; padding: 0 8px; font-size: 12px; }
body.offline #tbChat { display: none; }
.off-resume { width: 100%; margin-bottom: 10px; }
.off-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; max-height: 48vh; overflow-y: auto; margin-bottom: 14px; }
.off-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: transparent; border: 1px solid var(--paper-3); color: inherit; font: inherit; font-size: 15px; text-align: left; cursor: pointer; min-width: 0; }
.off-row:hover { border-color: var(--brass-2); background: rgba(138, 109, 59, .12); }
.off-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.off-row small { flex: none; opacity: .7; font-size: 12px; }