/* HEGEMON - field-ledger UI: opaque bars docked to the screen edges, one dark ground, 1px dividers,
   big tabular figures, colour only on data and on the one primary action. Bahnschrift ships with Windows.
   No webfonts, no CDNs, no gradients, no glass, no resting shadows. */
:root {
  /* ground and tone steps */
  --bg0: #0d0f12; --bg1: #13161a; --bg2: #1a1e23; --bg3: #23282e; --bg4: #2d333a;   /* neutral slate: the map carries the colour */
  /* solid dividers in three steps */
  --line: #22272d; --line2: #30363e; --line3: #48505a;
  /* text: primary, secondary, meta (all >= 4.5:1 on --bg1) */
  --tx: #e8eaed; --tx2: #b1b7bf; --tx3: #8b929b;
  /* the one accent (primary action only) */
  --brass: #c9a34d; --brass2: #ddb963; --brass3: #8f7234; --brassdim: #2a2618; --brassdim2: #3a3322;
  /* data colours */
  --pos: #93c27c; --neg: #e2735c; --warn: #ddb05a; --info: #86afc6;
  /* legacy names kept for scripts that reference them, now flat */
  --glass: var(--bg1); --glass2: var(--bg2);
  --shadow: 0 8px 24px rgba(0, 0, 0, .45);          /* only for things that float: menus, dialogs, toasts */
  --hi: none;
  --font: Bahnschrift, "Segoe UI", "SF Pro Text", "Avenir Next", "Roboto", "Arimo", "DejaVu Sans", system-ui, sans-serif;
  --font-cond: "Bahnschrift SemiCondensed", Bahnschrift, "Avenir Next Condensed", "DIN Alternate", "Roboto Condensed", "Arimo", "DejaVu Sans Condensed", "Segoe UI", sans-serif;
  --font-title: "Bahnschrift Condensed", "Bahnschrift SemiCondensed", Bahnschrift, "DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arimo", "DejaVu Sans Condensed", "Segoe UI", sans-serif;
  --r: 4px;
  --uis: 1;
  --cmdh: 116px;      /* height of the bottom command strip */
}
html, body { margin: 0; height: 100%; background: #0a0c0e; overflow: hidden; color: var(--tx); font-family: var(--font); }
#map { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#map.cur-build, #map.cur-boat { cursor: crosshair; }
#map.cur-drag { cursor: grabbing; }
#map.cur-spawn { cursor: cell; }

#ui { font-variant-numeric: tabular-nums; position: fixed; inset: 0; pointer-events: none; font-size: 14px; line-height: 1.4; user-select: none; -webkit-user-select: none; zoom: var(--uis); }
#ui *, #ui *::before, #ui *::after { box-sizing: border-box; }
#ui .pe, #ui button, #ui input, #ui select, #ui .ovl, #ui .dlg { pointer-events: auto; }
#ui .layer-menu .panel { pointer-events: auto; }   /* menu screens (New Game setup...): plain rows like the Rules switches must take clicks, not pass them to the live map behind */
#ui input, #ui select, #ui textarea { user-select: text; -webkit-user-select: text; }
#ui ::selection { background: var(--brassdim2); }
#ui svg { display: block; }
#ui .num, #ui .tn { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
#ui .sc { font-weight: 600; }
#ui .muted { color: var(--tx2); } #ui .faint { color: var(--tx3); }
#ui .pos { color: var(--pos); } #ui .neg { color: var(--neg); } #ui .warn { color: var(--warn); } #ui .info { color: var(--info); }
#ui .hidden { display: none !important; }
#ui :focus-visible { outline: 2px solid var(--tx2); outline-offset: 1px; }

/* scrollbars */
#ui ::-webkit-scrollbar { width: 10px; height: 10px; }
#ui ::-webkit-scrollbar-thumb { background: var(--line2); border: 3px solid var(--bg1); border-radius: 6px; }
#ui ::-webkit-scrollbar-thumb:hover { background: var(--line3); }
#ui ::-webkit-scrollbar-track { background: transparent; }

/* ---------- primitives ---------- */
.panel { background: var(--bg1); border: 0; border-radius: 0; }   /* surfaces differ by one tone step, not by outlines */
.ic { display: inline-flex; width: 16px; height: 16px; flex: none; align-items: center; justify-content: center; }
.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic svg .f { fill: currentColor; stroke: none; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.sw.lg { width: 20px; height: 20px; border-radius: 3px; }
.hd { font-weight: 600; color: var(--tx); font-size: 14px; }
.kbd { display: inline-block; min-width: 18px; padding: 0 5px; text-align: center; font-size: 12px; line-height: 18px; border-radius: 3px; color: var(--tx2); background: var(--bg3); }

.btn { font: inherit; font-size: 14px; color: var(--tx); background: var(--bg3); border: 0; border-radius: var(--r); padding: 7px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; justify-content: center; transition: background .12s, color .12s, transform .06s; white-space: nowrap; }
.btn:hover { background: var(--bg4); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.off { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { color: #17130d; font-weight: 600; background: var(--brass); }
.btn.primary:hover { background: var(--brass2); }
.btn.ghost { background: transparent; color: var(--tx2); }
.btn.ghost:hover { color: var(--tx); background: var(--bg3); }
.btn.danger { color: #f6d3c9; background: #4a2620; }
.btn.danger:hover { background: #5c2e25; }
.btn.sm { padding: 5px 10px; font-size: 13px; gap: 5px; }
.btn.block { width: 100%; }
.ibtn { width: 34px; height: 34px; padding: 0; border-radius: var(--r); font: inherit; color: var(--tx2); background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; transition: background .12s, color .12s; }
.ibtn .ic { width: 18px; height: 18px; }
.ibtn:hover { color: var(--tx); background: var(--bg3); }
.ibtn.on { color: var(--tx); background: var(--bg4); }
.ibtn .badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brass); color: #17130d; font-size: 12px; font-weight: 700; line-height: 16px; text-align: center; }

/* attitude / status: pale tint of the hue with text of the same hue */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 3px; font-size: 13px; font-weight: 600; color: var(--tx2); background: var(--bg3); white-space: nowrap; flex: none; }
.pill.allied { color: #b9dba3; background: #22301d; }
.pill.friendly { color: #b6cfa5; background: #1f281b; }
.pill.neutral { color: var(--tx2); background: var(--bg3); }
.pill.wary { color: #ecc988; background: #33291a; }
.pill.hostile { color: #f0a893; background: #3a211b; }
.pill.war { color: #ffd0c3; background: #5a241b; }
.pill.brass { color: var(--brass2); background: var(--brassdim); }

/* segmented control: as wide as its options, the selected one is a tone step */
.seg { display: inline-flex; border-radius: var(--r); overflow: hidden; background: var(--bg2); }
.seg button { font: inherit; font-size: 13px; background: transparent; color: var(--tx2); border: 0; padding: 6px 13px; cursor: pointer; transition: background .12s, color .12s; }
.seg button:hover { color: var(--tx); background: var(--bg3); }
.seg button.on { color: var(--tx); background: var(--bg4); font-weight: 600; }
.seg.fill { display: flex; } .seg.fill button { flex: 1; }

.chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; padding: 4px 10px; border-radius: var(--r); background: var(--bg2); border: 0; color: var(--tx2); cursor: pointer; transition: background .12s, color .12s; }
.chip:hover { color: var(--tx); background: var(--bg3); }
.chip.on { color: var(--tx); background: var(--bg4); }
.chip.dis { text-decoration: line-through; opacity: .6; }

input.fld, select.fld, textarea.fld { font: inherit; font-size: 14px; color: var(--tx); background: var(--bg0); border: 1px solid var(--line2); border-radius: var(--r); padding: 6px 9px; outline: none; transition: border-color .12s; min-width: 0; }
input.fld:focus, select.fld:focus { border-color: var(--tx3); }
input.fld.sm, select.fld.sm { padding: 4px 8px; font-size: 13px; }
select.fld { padding-right: 26px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23b5ac9a' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; }
select.fld option { background: var(--bg2); color: var(--tx); }
input.fld[type=number] { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
input.fld[type=number]::-webkit-inner-spin-button { opacity: .35; }

input[type=range].rng { -webkit-appearance: none; appearance: none; height: 20px; background: transparent; margin: 0; width: 100%; cursor: pointer; }
input[type=range].rng::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line2); }
input[type=range].rng::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; margin-top: -5px; background: var(--tx); border: 0; }
input[type=range].rng:hover::-webkit-slider-thumb { background: #fff; }

.tog { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; cursor: pointer; border-bottom: 1px solid var(--line); }
.tog:last-child { border-bottom: 0; }
.tog .tt { color: var(--tx); } .tog .ts { color: var(--tx3); font-size: 13px; }
.tog .sw2 { width: 32px; height: 18px; border-radius: 9px; background: var(--bg4); position: relative; flex: none; transition: background .15s; }
.tog .sw2::after { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--tx2); transition: transform .15s, background .15s; }
.tog.on .sw2 { background: #3d5a32; }
.tog.on .sw2::after { transform: translateX(14px); background: var(--tx); }

.tip { position: fixed; z-index: 60; pointer-events: none; padding: 8px 11px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line2); box-shadow: var(--shadow); font-size: 13px; max-width: 340px; white-space: nowrap; } /* taste-skill-ignore: floating overlay */
.tip .tl { display: flex; align-items: center; gap: 6px; }
.tip .tl.wrap { white-space: normal; align-items: flex-start; } .tip .tl.wrap canvas { flex: none; margin-top: 2px; }   /* long lines (sphere info) wrap instead of being clipped */
.tip .th { color: var(--tx3); font-size: 12px; margin-top: 4px; }
.tip b { font-weight: 600; }

/* ---------- layers ---------- */
.layer { position: absolute; inset: 0; pointer-events: none; }
#ui .layer-backdrop { pointer-events: auto; background: #0c0b09; }
#ui .layer-backdrop canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.mode-game .layer-backdrop, body.mode-game .layer-menu { display: none; }
body.mode-menu .layer-hud { display: none; }

/* ---------- main menu ---------- */
.layer-menu { display: flex; align-items: center; justify-content: center; }
/* a solid panel on the left, the live war on the right (drawn by the game renderer, see menu.js) */
.menu-main { align-self: stretch; margin-right: auto; width: min(560px, max(380px, 38vw)); box-sizing: border-box; padding: 0 56px;
  display: flex; flex-direction: column; justify-content: center; background: var(--bg0); animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.brand h1 { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: 84px; line-height: .92; letter-spacing: -0.01em; color: var(--tx); }
.brand p { margin: 22px 0 0; color: var(--tx2); font-size: 18px; line-height: 1.45; max-width: 26ch; }
.menu-list { margin-top: 44px; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 340px; }
.mbtn { font: inherit; font-family: var(--font-cond); font-size: 18px; font-weight: 600; color: var(--tx); text-align: left; padding: 15px 18px; display: flex; align-items: center; background: var(--bg2); border: 0; border-radius: 0; cursor: pointer; transition: background .15s ease, transform .12s ease; }
/* short windows (game-portal iframes are 800x450 to 1080x607): everything must fit without clipping */
@media (max-height: 720px) {
  .menu-main { padding: 16px 40px; overflow-y: auto; justify-content: flex-start; }
  .brand h1 { font-size: 56px; }
  .brand p { margin-top: 10px; font-size: 15px; }
  .menu-list { margin-top: 18px; gap: 4px; }
  .mbtn { padding: 10px 16px; font-size: 16px; }
  #ui .mbtn.daily { padding: 7px 16px; }
  #ui .recs { margin-top: 12px; }
}
@media (max-height: 500px) {
  .brand h1 { font-size: 40px; }
  .brand p { display: none; }
  .menu-list { margin-top: 10px; }
  .mbtn { padding: 7px 14px; font-size: 15px; }
  #ui .recs { display: none; }
}
.mbtn .ic { margin-left: auto; color: var(--tx3); transition: transform .15s, color .15s; }
.mbtn:hover, .mbtn:focus-visible { background: var(--bg3); outline: none; } .mbtn:active { transform: translateY(1px); }
.mbtn:hover .ic { color: var(--tx); transform: translateX(3px); }
.mbtn.main { background: var(--brass); color: #17130d; } .mbtn.main .ic { color: #17130d; } .mbtn.main:hover { background: var(--brass2); }

/* ---------- setup ---------- */
.setup { width: min(1120px, 95vw); height: min(88vh, 800px); display: flex; flex-direction: column; animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; background: var(--bg1); border: 1px solid var(--line); }
.setup-head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.setup-head h2 { margin: 0; font-weight: 600; font-size: 22px; }
.setup-head .sub { color: var(--tx3); font-size: 13px; margin-left: 4px; }
.setup-head .sp { flex: 1; }
.setup-body { flex: 1; overflow-y: auto; padding: 20px 22px 12px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-content: start; }
.setup-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sec > .hd { margin-bottom: 10px; }
.mapcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mcard { font: inherit; text-align: left; color: var(--tx); padding: 6px; border-radius: var(--r); border: 0; background: var(--bg2); cursor: pointer; transition: background .14s; display: flex; flex-direction: column; gap: 5px; }
.mcard:hover { background: var(--bg3); }
.mcard.on { background: var(--bg4); outline: 2px solid var(--tx2); outline-offset: -2px; }
.mcard canvas { width: 100%; aspect-ratio: 3 / 2; border-radius: 2px; background: #121a1f; display: block; image-rendering: auto; }
.mcard .mn { font-weight: 600; padding: 0 3px; }
.mcard .md { color: var(--tx3); font-size: 12px; padding: 0 3px 2px; line-height: 1.3; min-height: 30px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.sb { justify-content: space-between; }
.fieldrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 0; }
.fieldrow .fl { color: var(--tx); } .fieldrow .fs { color: var(--tx3); font-size: 13px; }
.slrow { display: grid; grid-template-columns: 90px 1fr 50px; gap: 12px; align-items: center; padding: 4px 0; }
.slrow .sv { text-align: right; color: var(--tx); font-variant-numeric: tabular-nums; font-weight: 600; }
.diffnote { margin-top: 8px; color: var(--tx3); font-size: 13px; min-height: 18px; }
.palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pal { aspect-ratio: 1; border-radius: var(--r); border: 0; cursor: pointer; padding: 0; transition: transform .12s; }
.pal:hover { transform: scale(1.06); }
.pal.on { outline: 2px solid var(--tx); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.setup-foot { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--bg2); }
.setup-foot .sum { flex: 1; color: var(--tx2); font-size: 14px; }
.setup-foot .btn.primary { padding: 10px 30px; font-size: 15px; }

/* ---------- modal / dialog ---------- */
.ovl { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(8, 6, 4, .66); animation: fade .15s ease-out both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.dlg { min-width: 340px; max-width: min(560px, 92vw); padding: 22px 24px 18px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: var(--shadow); animation: pop .16s cubic-bezier(.2, .9, .3, 1.05) both; } /* taste-skill-ignore: floating overlay */
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }
.dlg h3 { margin: 0 0 8px; font-weight: 600; font-size: 18px; }
.dlg .body { color: var(--tx2); line-height: 1.5; }
.dlg .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.dlg.wide { max-width: min(860px, 94vw); width: 860px; max-height: 86vh; overflow: auto; }
.howto { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; margin-top: 14px; }
.howto h4 { margin: 0 0 4px; color: var(--tx); font-size: 15px; font-weight: 600; }
.howto p { margin: 0; color: var(--tx2); line-height: 1.5; }
.howto .full { grid-column: 1 / -1; }
.keys { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 12px; align-items: center; color: var(--tx2); }

/* =====================================================================================================
   HUD - every bar is docked to a screen edge: no floating cards.
   ===================================================================================================== */
.layer-hud > * { position: absolute; }

/* standings: docked to the top-left corner, a plain table */
.leftcol { top: 0; left: 0; width: 360px; display: flex; flex-direction: column; gap: 0; }
.lb { background: var(--bg1); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lb .lb-h { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 14px 6px; }
.lb .lb-h .hd { font-size: 15px; }
.lb .lb-h .cnt { color: var(--tx3); font-size: 13px; }
.lb-cols, .lb-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 44px 50px 52px; align-items: center; padding: 0 14px 0 12px; gap: 6px; }
.lb-cols { font-size: 12px; color: var(--tx3); padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.lb-cols span { cursor: pointer; text-align: right; white-space: nowrap; }
.lb-cols span:first-child, .lb-cols span:nth-child(2) { text-align: left; cursor: default; }
.lb-cols span.on { color: var(--tx); }
.lb-cols span.on::after { content: " \25BE"; }
.lb-cols span:hover:not(:first-child):not(:nth-child(2)) { color: var(--tx); }
.lb-row { height: 30px; cursor: pointer; font-size: 13px; }
.lb-row:hover { background: var(--bg2); }
.lb-row.me { background: var(--bg3); font-weight: 600; }
.lb-row.sep { border-top: 1px solid var(--line2); }
.lb-row .rk { color: var(--tx3); font-size: 12px; }
.lb-row .nm { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.lb-row .nm span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .v { text-align: right; color: var(--tx2); }
.lb-row .v:nth-child(3) { color: var(--tx); }
.lb-row.atwar .nm::after { content: "war"; color: var(--neg); font-size: 12px; font-weight: 600; flex: none; }
.lb-pad { height: 6px; }

/* top bar: docked to the top-right corner */
.topbar { top: 0; right: 0; display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 16px; background: var(--bg1); border: 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.topbar .clock { font-size: 20px; font-weight: 600; min-width: 60px; font-variant-numeric: tabular-nums; }
.topbar .paused { font-size: 13px; color: var(--warn); font-weight: 600; display: none; }
.topbar.is-paused .paused { display: block; }
.topbar .vr { width: 1px; height: 22px; background: var(--line2); margin: 0 6px; }
.spd { display: flex; border-radius: var(--r); overflow: hidden; background: var(--bg2); }
.spd button { font: inherit; font-size: 13px; min-width: 34px; height: 30px; padding: 0 6px; color: var(--tx2); background: transparent; border: 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.spd button:hover { color: var(--tx); background: var(--bg3); }
.spd button.on { color: var(--tx); background: var(--bg4); font-weight: 600; }

.setpop { position: absolute; top: 47px; right: 0; width: 270px; padding: 14px 16px 10px; z-index: 30; background: var(--bg2); border: 1px solid var(--line2); box-shadow: var(--shadow); } /* taste-skill-ignore: floating overlay */

/* selected / hovered player: docked to the top edge, centred */
.pcard { top: 0; left: 50%; transform: translateX(-50%); width: 420px; padding: 12px 16px 12px; background: var(--bg1); border: 1px solid var(--line); border-top: 0; transition: opacity .12s; }
.pcard .pc-top { display: flex; align-items: center; gap: 10px; }
.pcard .pc-name { font-weight: 600; font-size: 17px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .pc-kind { font-size: 13px; color: var(--tx3); }
.pcard .pc-top .sp { flex: 1; }
.pcard .pc-ruler { color: var(--tx2); font-size: 13px; margin: 2px 0 10px 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .pc-grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 6px 14px; padding: 0 0 2px; }
.pcard .pc-grid div { display: flex; flex-direction: column-reverse; }
.pcard .pc-grid b { display: block; font-weight: 600; font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pcard .pc-grid i { font-style: normal; font-size: 12px; color: var(--tx3); }
.pcard .pc-tr { display: flex; align-items: center; gap: 4px 10px; margin-top: 9px; min-height: 18px; color: var(--tx2); font-size: 13px; flex-wrap: wrap; }
.pcard .pc-tr .bad { color: var(--neg); font-weight: 600; }
.pcard .pc-ai { color: var(--tx3); font-size: 13px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .pc-act { display: flex; gap: 6px; margin-top: 11px; }
.pcard .pc-act .btn { flex: 1; }
.pcard .pc-act .btn .ic { display: none; }

.spawnban { bottom: calc(var(--cmdh) + 18px); left: 50%; transform: translateX(-50%); padding: 12px 24px; text-align: center; background: var(--bg1); border: 1px solid var(--line2); }
.spawnban .sb1 { font-size: 18px; font-weight: 600; }
.spawnban .sb2 { color: var(--tx2); margin-top: 2px; font-size: 13px; }
.spawnban .cd { color: var(--tx); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 22px; margin-left: 12px; }

/* command deck: one bar docked across the bottom edge.
   columns: troops (lead) | send per attack (the weapon setting) | gold | build slots (fill the rest).
   The three left blocks sit on one tone step (--bg2); no hairline boxes, only a 2px seam of the bar ground. */
.cmd { left: 0; right: 0; bottom: 0; height: var(--cmdh); transform: none; width: auto; min-width: 0; padding: 0; display: grid;
  grid-template-columns: 276px 312px 204px minmax(0, 1fr); background: var(--bg1); border: 0; border-top: 1px solid var(--line2); }
.cmd-top { display: contents; }
.stat, .ratio { background: var(--bg2); border-right: 2px solid var(--bg1); padding: 9px 18px 11px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.st-l { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; font-size: 13px; color: var(--tx3); line-height: 20px; }
.st-s { font-size: 14px; color: var(--tx2); }
.st-troops:has(.gauge[data-z="peak"]) .st-s { color: var(--pos); }
.st-troops:has(.gauge[data-z="high"]) .st-s { color: var(--warn); }
.st-troops:has(.gauge[data-z="full"]) .st-s { color: var(--neg); }
.st-h { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.st-v { font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tx); }
.st-troops .st-v { font-size: 40px; line-height: 1; }
.st-m { color: var(--tx3); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-r { margin-left: auto; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-n { font-size: 14px; color: var(--tx2); line-height: 18px; height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-n.ok { color: var(--pos); }
/* troops gauge: the pale band is the 30-55% growth sweet spot, the tick is the 40% peak */
.gauge { position: relative; height: 12px; background: var(--bg0); }
.gauge > s { position: absolute; left: 30%; width: 25%; top: 0; bottom: 0; background: #2d3a28; }
.gauge > i { position: absolute; left: 0; top: 3px; bottom: 3px; background: var(--tx2); width: 0; transition: width .25s, background-color .2s; }
.gauge > u { position: absolute; left: 40%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--tx3); text-decoration: none; }
.gauge[data-z="peak"] > i { background: var(--pos); }
.gauge[data-z="high"] > i { background: var(--warn); }
.gauge[data-z="full"] > i { background: var(--neg); }
/* send per attack: big troop count, preset steps, a heavy slider */
.ratio .st-h { flex: 1; align-items: center; }
.ratio .rt-pct { margin-left: auto; font-size: 17px; font-weight: 600; color: var(--tx); font-variant-numeric: tabular-nums; }
.rt-pre { display: flex; gap: 2px; margin-right: -6px; }
.pre { font: inherit; font-size: 13px; line-height: 18px; padding: 1px 7px; border: 0; border-radius: 3px; background: transparent; color: var(--tx3); cursor: pointer; font-variant-numeric: tabular-nums; }
.pre:hover { background: var(--bg3); color: var(--tx); }
.pre.on { background: var(--bg4); color: var(--tx); }
#ui .ratio input[type=range].rng { height: 20px; margin: 0; }
#ui .ratio input[type=range].rng::-webkit-slider-runnable-track { height: 10px; border-radius: 0; background:
  linear-gradient(90deg, var(--bg2) 0 2px, transparent 2px) 25% 0 / 2px 100% no-repeat,
  linear-gradient(90deg, var(--bg2) 0 2px, transparent 2px) 50% 0 / 2px 100% no-repeat,
  linear-gradient(90deg, var(--bg2) 0 2px, transparent 2px) 75% 0 / 2px 100% no-repeat,
  linear-gradient(90deg, var(--brass) var(--v, 20%), var(--bg0) var(--v, 20%)); }
#ui .ratio input[type=range].rng::-webkit-slider-thumb { width: 8px; height: 20px; border-radius: 0; margin-top: -5px; background: var(--tx); box-shadow: 0 0 0 2px var(--bg2); }
#ui .ratio input[type=range].rng:hover::-webkit-slider-thumb, #ui .ratio input[type=range].rng:active::-webkit-slider-thumb { background: #fff; }
/* active attacks sit on top of the bar, left-aligned */
.cmd-mid { position: absolute; left: 0; bottom: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 0 8px 12px; max-width: calc(100vw - 420px); pointer-events: none; }
.cmd-mid > * { pointer-events: auto; }
.cmd-mid:empty { display: none; }
.atk { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; padding: 5px 9px 5px 11px; border-radius: var(--r); color: var(--tx); background: var(--bg1); border: 1px solid var(--line2); cursor: pointer; font-variant-numeric: tabular-nums; }
.atk:hover { background: var(--bg3); }
.atk .ic { width: 14px; height: 14px; color: var(--tx3); }
.atk:hover .ic { color: var(--neg); }
.atk b { font-weight: 600; }
.atk.foe { color: #ffd0c3; background: #3a1d17; border-color: #6a2c21; cursor: default; }
.atk.foe .ic { color: var(--neg); }
/* build strip: hotkey + glyph, name, price + owned count, and a thin bar showing how close you are to affording it */
/* build bar tabs */
.bsec { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.btabs { display: flex; align-items: center; gap: 2px; flex: none; height: 22px; padding: 0 8px; }
.bt { font: inherit; font-size: 13px; font-weight: 600; color: var(--tx2); background: transparent; border: 0; border-bottom: 2px solid transparent; height: 22px; padding: 0 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.bt .hk { min-width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 11px; color: var(--tx2); background: var(--bg3); border-radius: 3px; }
.bt:hover { color: var(--tx); }
.bt.on { color: var(--tx); border-bottom-color: var(--brass, #d9b45a); }
.bt.on .hk { background: var(--bg4); color: var(--tx); }
.bt-hint { margin-left: auto; font-size: 12px; color: var(--tx3); }
.builds { flex: 1 1 0; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; min-width: 0; padding: 0 4px; }
.bb { position: relative; font: inherit; color: var(--tx); padding: 10px 8px 14px; border-radius: 0; background: transparent; border: 0; cursor: pointer; min-width: 0; text-align: left;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "hk ic" "bn bn" "bc ct"; align-content: center; align-items: center; column-gap: 6px; row-gap: 3px; transition: background .12s; }
.bb .hk { grid-area: hk; justify-self: start; min-width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 13px; font-weight: 600; color: var(--tx2); background: var(--bg3); border-radius: 3px; font-variant-numeric: tabular-nums; }
.bb .ic { grid-area: ic; justify-self: end; width: 20px; height: 20px; color: var(--tx2); }
.bb .bn { grid-area: bn; font-size: 14px; font-weight: 600; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb .bc { grid-area: bc; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tx); }
.bb .ct { grid-area: ct; justify-self: end; font-size: 13px; color: var(--tx2); font-variant-numeric: tabular-nums; }
.bb .pg { position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px; background: var(--bg3); }
.bb .pg > i { display: block; height: 100%; width: 0; background: var(--pos); }
.bb.poor .pg > i { background: var(--tx3); }
.bb:hover { background: var(--bg3); }
.bb:hover .hk { background: var(--bg4); }
.bb.poor .bn, .bb.poor .bc, .bb.poor .ic { color: var(--tx3); }
.bb.hire { background: rgba(217, 180, 90, 0.16); box-shadow: inset 0 0 0 2px var(--brass, #d9b45a); }
.bb.hire .bn, .bb.hire .ic { color: var(--brass, #d9b45a); }
.bb.hire:hover { background: rgba(217, 180, 90, 0.26); }
.bb.armed { background: var(--tx); }
.bb.armed .bn, .bb.armed .bc, .bb.armed .ct, .bb.armed .ic { color: #17130d; }
.bb.armed .hk { background: #17130d; color: var(--tx); }
.bb.armed .pg { background: #c8c3b8; }
.bb.locked { cursor: not-allowed; }
.bb.locked .bn, .bb.locked .bc, .bb.locked .ic { color: #5f584c; }
.bb.locked .pg { display: none; }
/* hover card for a build slot (same dark, compact look as the right-click menu) */
.cmd-tip { position: absolute; bottom: calc(100% + 8px); width: max-content; max-width: 340px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--line3); box-shadow: var(--shadow); pointer-events: none; z-index: 5; font-size: 14px; }
.cmd-tip .tp-h { display: flex; align-items: baseline; gap: 10px; }
.cmd-tip .tp-h b { font-size: 16px; font-weight: 600; }
.cmd-tip .tp-p { color: var(--tx); font-weight: 600; margin-left: auto; padding-left: 14px; white-space: nowrap; }
.cmd-tip .tp-c { color: var(--tx3); font-size: 13px; white-space: nowrap; }
.cmd-tip .tp-d { color: var(--tx2); margin-top: 4px; line-height: 1.35; }
.cmd-tip .tp-s { color: var(--tx3); margin-top: 6px; font-size: 13px; }
.cmd-tip .tp-s.bad { color: var(--warn); }

/* event feed: docked to the right edge above the strip, plain time + text lines */
.feed { bottom: var(--cmdh); right: 0; width: 380px; height: 236px; display: flex; flex-direction: column; overflow: hidden; background: var(--bg1); border: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.feed-tabs { display: none; }
.feed-list { flex: 1; overflow-y: auto; padding: 6px 0; }
/* the feed grows with its messages instead of sitting there as a tall empty box */
.feed { height: auto; max-height: 236px; }
/* first minute (classes set by hud.js): picking a start shows only the map, the top bar and the start banner;
   the build row waits until the first building is affordable */
.hud-spawn .lb, .hud-spawn .feed, .hud-spawn .coach, .hud-spawn .lcol, .hud-spawn .leftcol { display: none !important; }
.hud-nobuild { --cmdh: 86px; }
.hud-nobuild .cmd .bsec { display: none !important; }
/* ...and the side panels stay small: top 5 nations, the claim goal; Hegemony and the colour legend come later */
.hud-nobuild .lb-row:nth-child(n+6), .hud-nobuild .hegp, .hud-nobuild .layer-hud > div:has(> .pl-row) { display: none !important; }
/* portal-size windows (CrazyGames iframes are 607px tall or less): the map must stay the biggest thing on screen */
@media (max-height: 720px) {
  .feed { max-height: 92px; width: 300px; }
  .lb-row:nth-child(n+6), .hegp { display: none !important; }
}
.fe { display: grid; grid-template-columns: 42px 1fr; gap: 8px; padding: 3px 14px; font-size: 13px; color: var(--tx2); line-height: 1.4; }
.fe .ft { color: var(--tx3); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 1px; }
.fe.c-war .tx, .fe.c-nuke .tx { color: #f0a893; }
.fe.imp .tx { color: var(--tx); }
.fe.imp.c-war .tx, .fe.imp.c-nuke .tx { color: #ffc2b3; }
.fe.has-tile { cursor: pointer; } .fe.has-tile:hover { background: var(--bg2); }
.feed[data-f="war"] .fe:not(.c-war):not(.c-nuke), .feed[data-f="diplo"] .fe:not(.c-diplo), .feed[data-f="combat"] .fe:not(.c-combat), .feed[data-f="econ"] .fe:not(.c-econ) { display: none; }

/* toasts float under the top bar: the only HUD element besides menus that floats */
.toasts { top: 58px; right: 206px; width: 320px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; z-index: 14; }   /* LEFT of the relations legend (top-right, ~185 px wide) so neither covers the other */
.toast { padding: 9px 13px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line2); display: flex; align-items: baseline; gap: 9px; box-shadow: var(--shadow); font-size: 13px; animation: tin .2s cubic-bezier(.2, .9, .3, 1) both; pointer-events: auto; } /* taste-skill-ignore: floating overlay */
.toast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tx3); flex: none; align-self: center; }
.toast.bad::before { background: var(--neg); } .toast.good::before { background: var(--pos); } .toast.info::before { background: var(--info); }
.toast.out { animation: tout .25s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes tin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes tout { to { opacity: 0; transform: translateY(-6px); } }

/* incoming proposal: one line under the standings, answer with Y / N, the bar underneath runs out */
.prop { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px 11px 14px; border-radius: 0;
  background: var(--bg1); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; animation: tin .2s both; overflow: hidden; }
.prop .pr-l { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.prop .pr-l b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop .pr-l span { color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop .btn { flex: none; gap: 6px; }
.prop kbd { font: inherit; font-size: 12px; opacity: .7; }
.prop .pr-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tx3); transform-origin: left; transition: transform .25s linear; }
.dchip { font-size: 13px; padding: 2px 8px; border-radius: 3px; background: var(--bg3); color: var(--tx); }
/* quick-diplomacy prediction dot in the right-click menu */
.qd { width: 8px; height: 8px; border-radius: 50%; background: var(--tx3); margin-left: auto; flex: none; }
.qd.yes { background: var(--pos); } .qd.no { background: var(--neg); }

.endcard { width: 480px; padding: 28px 28px 22px; text-align: center; }
.endcard h2 { margin: 0; font-family: var(--font-title); font-size: 44px; font-weight: 700; line-height: 1; }
.endcard.win h2 { color: var(--tx); } .endcard.lose h2 { color: var(--neg); }
.endcard .es { color: var(--tx2); margin: 10px 0 20px; }
.endcard .eg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--line); margin-bottom: 22px; }
.endcard .eg div { background: var(--bg2); padding: 12px 6px; display: flex; flex-direction: column-reverse; }
.endcard .eg b { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.endcard .eg i { font-style: normal; font-size: 12px; color: var(--tx3); }
.endcard .acts { display: flex; gap: 8px; justify-content: center; }
.specpill { top: 0; left: 50%; transform: translateX(-50%); padding: 6px 18px; font-size: 13px; color: var(--tx2); background: var(--bg1); border: 1px solid var(--line); border-top: 0; }

/* context menu (floats: may cast a shadow) */
.ctx { position: fixed; z-index: 55; min-width: 230px; padding: 4px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: var(--shadow); animation: pop .1s both; pointer-events: auto; } /* taste-skill-ignore: floating overlay */
.ctx .ch { padding: 7px 10px 8px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; color: var(--tx2); font-size: 13px; }
.ctx .ci { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 3px; cursor: pointer; color: var(--tx); font-size: 14px; }
.ctx .ci:hover { background: var(--bg4); }
.ctx .ci .ic { color: var(--tx3); } .ctx .ci:hover .ic { color: var(--tx); }
.ctx .ci .r { margin-left: auto; color: var(--tx3); font-size: 13px; font-variant-numeric: tabular-nums; }
.ctx .ci.dis { opacity: .45; cursor: not-allowed; } .ctx .ci.dis:hover { background: transparent; }
.ctx .ci.dis:hover .ic { color: var(--tx3); }
.ctx .sub { margin: 2px 0 4px 16px; padding-left: 8px; border-left: 1px solid var(--line2); }
.ctx .pcts { display: flex; gap: 4px; margin-left: auto; }
.ctx .pcts button { font: inherit; font-size: 13px; padding: 2px 7px; border-radius: 3px; border: 0; background: var(--bg3); color: var(--tx2); cursor: pointer; }
.ctx .pcts button:hover { color: var(--tx); background: var(--bg4); }
.ctx hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* ---------- diplomacy screen ---------- */
.dip { z-index: 35; background: rgba(8, 6, 4, .8); padding: 0; }
.dip-panel { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--bg1); border: 0; animation: fade .15s both; }
.dip-head { display: flex; align-items: center; gap: 22px; padding: 0 16px 0 22px; height: 56px; border-bottom: 1px solid var(--line); }
.dip-head h2 { margin: 0; font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.dip-head h2 .ic { display: none; }
.dip-tabs { display: flex; gap: 0; align-self: stretch; }
.dip-tabs button { font: inherit; font-size: 14px; padding: 0 16px; color: var(--tx2); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.dip-tabs button:hover { color: var(--tx); }
.dip-tabs button.on { color: var(--tx); border-bottom-color: var(--tx); font-weight: 600; }
.dip-tabs .cnt { font-size: 12px; min-width: 17px; padding: 0 5px; border-radius: 9px; background: var(--brass); color: #17130d; font-weight: 700; text-align: center; line-height: 17px; }
.dip-head .sp { flex: 1; }
.dip-body { flex: 1; min-height: 0; display: flex; }
.dip-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(380px, 1fr) minmax(420px, 1.05fr); }
.dip-col { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.dip-col:last-child { border-right: 0; }
.dip-col .scroll { flex: 1; overflow-y: auto; min-height: 0; }
.dip-left .tools { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.dip-left .tools .r2 { display: flex; gap: 6px; }
.srch { position: relative; } .srch .ic { position: absolute; left: 10px; top: 9px; color: var(--tx3); width: 15px; height: 15px; }
.srch input { width: 100%; padding-left: 32px; }
.nrow { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.nrow:hover { background: var(--bg2); }
.nrow.sel { background: var(--bg3); }
.nrow .nn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrow .n2 { display: flex; align-items: center; gap: 6px; margin-top: 3px; min-height: 20px; }
.nrow .op { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 16px; }
.nrow .tr { display: flex; gap: 4px; justify-content: flex-end; margin-top: 3px; color: var(--tx3); min-height: 14px; }
.nrow .tr .ic { width: 14px; height: 14px; } .nrow .tr .ic.bad { color: var(--neg); }
.empty { padding: 30px 20px; text-align: center; color: var(--tx3); }

.dossier { padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 22px; }
.ds-head { display: flex; gap: 14px; align-items: center; }
.ds-head .sw { width: 44px; height: 44px; border-radius: 4px; }
.ds-head h3 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.15; }
.ds-head .rl { color: var(--tx2); margin-top: 2px; }
.ds-head .sp { flex: 1; }
.ds-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ds-stats div { background: var(--bg1); padding: 10px 12px 10px 0; display: flex; flex-direction: column-reverse; }
.ds-stats div + div { padding-left: 12px; }
.ds-stats b { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ds-stats i { font-style: normal; font-size: 12px; color: var(--tx3); }
.ds-sec > .hd { margin-bottom: 10px; }
.traits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.trait .tn2 { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx2); margin-bottom: 4px; text-transform: capitalize; }
.trait .tb { height: 4px; border-radius: 2px; background: var(--bg3); position: relative; }
.trait .tb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--tx2); }
.opin { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.opin .big { font-size: 36px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 80px; line-height: 1; }
.opin .meter { flex: 1; } .opin .meter .lab { display: flex; justify-content: space-between; font-size: 12px; color: var(--tx3); margin-top: 5px; }
.meter .mt { position: relative; height: 4px; border-radius: 2px; background: var(--bg3); }
.meter .mt::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line3); }
.meter .mt i { position: absolute; top: -4px; width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; background: var(--tx); }
.brk { display: flex; flex-direction: column; }
.brk .bl { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--tx2); }
.brk .bl b { font-variant-numeric: tabular-nums; font-weight: 600; }
.rel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.rel > em { font-style: normal; width: 80px; color: var(--tx3); font-size: 13px; flex: none; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 3px; font: inherit; font-size: 13px; color: var(--tx); background: var(--bg2); border: 0; cursor: pointer; }
.pchip:hover { background: var(--bg3); }
.tlist { display: flex; flex-direction: column; }
.tl-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tl-item .ic { color: var(--tx3); }
.tl-item .tx { flex: 1; } .tl-item .tx small { color: var(--tx3); display: block; font-size: 12px; }
.warbox { padding: 12px 14px; border-radius: var(--r); background: #2a1814; }
.warbox .wr { display: flex; justify-content: space-between; padding: 3px 0; color: #e8c4b9; } .warbox .wr b { color: var(--tx); font-variant-numeric: tabular-nums; }
.hist { display: flex; flex-direction: column; }
.hist .hi { padding: 4px 0; color: var(--tx2); font-size: 13px; display: grid; grid-template-columns: 46px 1fr; gap: 8px; }
.hist .hi time { color: var(--tx3); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px; }

.dealwrap { padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 16px; }
.dcols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dcol { position: relative; background: var(--bg1); display: flex; flex-direction: column; min-height: 140px; }
.dcol .dh { padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.dcol .dh .hd { color: var(--tx); }
.dcol .dl2 { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dcol .none { color: var(--tx3); text-align: center; padding: 18px 6px; font-size: 13px; }
.ditem { padding: 8px 10px; border-radius: 3px; background: var(--bg2); display: flex; flex-direction: column; gap: 6px; }
.ditem .dt { display: flex; align-items: center; gap: 8px; font-weight: 600; } .ditem .dt .ic { color: var(--tx3); }
.ditem .dt .x { margin-left: auto; cursor: pointer; color: var(--tx3); width: 20px; height: 20px; border-radius: 3px; display: flex; align-items: center; justify-content: center; } .ditem .dt .x:hover { color: var(--neg); background: var(--bg3); }
.ditem .df { display: flex; align-items: center; gap: 6px; color: var(--tx3); font-size: 13px; flex-wrap: wrap; }
.ditem .df input, .ditem .df select { flex: 1; min-width: 0; }
.ditem .df input[type=number] { width: 76px; flex: none; }
.addmenu { position: absolute; z-index: 5; width: 280px; max-height: 340px; overflow-y: auto; padding: 4px; margin-top: 4px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: var(--shadow); } /* taste-skill-ignore: floating overlay */
.addmenu div { padding: 7px 10px; border-radius: 3px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.addmenu div:hover { background: var(--bg4); }
.addmenu .ic { color: var(--tx3); } .addmenu small { display: block; color: var(--tx3); font-size: 12px; }
.eval { border: 1px solid var(--line); background: var(--bg1); }
.eval .ev-h { padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.eval .ev-h .vd { font-weight: 600; font-size: 17px; flex: 1; }
.eval.yes .vd { color: var(--pos); } .eval.no .vd { color: var(--neg); } .eval.idle .vd { color: var(--tx3); font-weight: 500; }
.eval .ev-s { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 17px; }
.eval .ev-b { padding: 4px 14px 10px; max-height: 200px; overflow-y: auto; }
.eval .er { display: flex; justify-content: space-between; padding: 4px 0; color: var(--tx2); font-size: 13px; border-bottom: 1px solid var(--line); }
.eval .er b { font-variant-numeric: tabular-nums; }
.eval .res { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.acts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.acts-grid .ar { display: flex; gap: 5px; align-items: stretch; }
.acts-grid .ar .btn { flex: 1; justify-content: flex-start; }
.acts-grid .ar .btn .ic { display: none; }
.acts-grid .ar input, .acts-grid .ar select { width: 80px; flex: none; }
.acts-grid .ar.wide { grid-column: 1 / -1; }
.acts-grid .ar.wide select { flex: 1; width: auto; }

.dip-world { flex: 1; overflow-y: auto; padding: 22px 26px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-content: start; }
.dip-world .ws > .hd { margin-bottom: 10px; }
.wrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.wrow .vs { color: var(--tx3); font-size: 13px; }
.wrow .rt { margin-left: auto; color: var(--tx3); font-size: 13px; }
.news { display: flex; flex-direction: column; } .news .nw { padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--tx2); font-size: 13px; display: grid; grid-template-columns: 46px 1fr; gap: 8px; } .news time { color: var(--tx3); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.dip-inbox { flex: 1; overflow-y: auto; padding: 22px 26px; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 440px)); gap: 8px; align-content: start; }
.dip-inbox .prop { animation: none; border: 1px solid var(--line); }

@media (max-width: 1500px) {
  .cmd { grid-template-columns: 250px 270px 176px minmax(0, 1fr); }
  .stat, .ratio { padding-left: 14px; padding-right: 14px; }
  .st-troops .st-v { font-size: 36px; }
  .st-v { font-size: 28px; }
  .bb { padding: 10px 6px 14px; column-gap: 4px; }
  .bb .pg { left: 6px; right: 6px; }
  .feed { width: 330px; }
}
@media (max-width: 1100px) {
  :root { --cmdh: 172px; }
  .cmd { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 88px 84px; }
  .bsec { grid-column: 1 / -1; border-top: 1px solid var(--line2); }
  .bb { grid-template-areas: "hk bn" "bc ct"; grid-template-columns: auto minmax(0, 1fr); padding: 6px 6px 10px; }
  .bb .ic { display: none; }
  .leftcol { width: 280px; }
  .pcard { width: 360px; }
  .feed { width: 300px; height: 200px; }
}
/* narrow screens: the centred nation card would run under the top bar (speed controls) - dock it right of the standings */
@media (max-width: 1500px) {
  .pcard { left: 300px; transform: none; width: min(380px, calc(100vw - 300px - 580px)); min-width: 300px; }
}

/* ---------- typography: Bahnschrift (ships with Windows 10/11) ---------- */
#ui button, #ui input, #ui select, #ui textarea { font-family: var(--font); font-variant-numeric: tabular-nums; }
#ui .hd, #ui h2, #ui h3, #ui h4, #ui .btn, #ui .mbtn, #ui .chip, #ui .pill, #ui .seg button, #ui .dip-tabs button,
#ui .lb-row .nm, #ui .pc-name, #ui .nrow .nn, #ui .kbd, #ui .bb .bn, #ui .spd button { font-family: var(--font-cond); }

/* live war behind the menu: let the game's own map canvas show through on the right */
body.demo-live #ui .layer-backdrop { background: transparent; pointer-events: auto; }
body.demo-live #ui .layer-backdrop canvas { display: none; }

/* Settings screen: two columns of sections, label left / control right, same field-ledger rules */
.setbody { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; margin-top: 6px; }
.setsec { min-width: 0; }
.setsec h4 { margin: 14px 0 4px; font-family: var(--font-cond); font-weight: 600; font-size: 15px; color: var(--tx); padding-bottom: 6px; border-bottom: 1px solid var(--line2); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.setrow .tt { color: var(--tx); } .setrow .ts { color: var(--tx3); font-size: 13px; margin-top: 2px; }
.setl { min-width: 0; flex: 1; } .setc { flex: none; }
.setc .seg { flex-wrap: wrap; justify-content: flex-end; }
.setinl { display: flex; align-items: center; gap: 10px; } .setinl .rng { width: 150px; }
.setv { min-width: 44px; text-align: right; color: var(--tx2); font-variant-numeric: tabular-nums; }
.setkeys { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; padding: 10px 0 2px; font-size: 13px; }
.setkeys .kr { display: contents; }
.setkeys .k { color: var(--tx); font-family: var(--font-cond); font-weight: 600; white-space: nowrap; }
.setkeys .d { color: var(--tx2); }
@media (max-width: 900px) { .setbody { grid-template-columns: 1fr; } }


/* incoming proposals: docked above the command strip, readable at a glance */
.propdock { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--cmdh) + 12px); width: min(580px, 62vw);
  display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; z-index: 6; }
.propdock .prop { pointer-events: auto; font-size: 14px; padding: 10px 10px 12px 12px; }
.propdock .prop .pr-l b { font-size: 15px; }
.propdock .prop .pr-c { font-style: normal; color: var(--warn); font-size: 13px; }
/* standings: flip sort + show all */
.lb-h .lb-all { margin-left: auto; font: inherit; font-size: 12px; color: var(--tx2); background: var(--bg3); border: 0; border-radius: var(--r); padding: 3px 8px; cursor: pointer; }
.lb-h .lb-all:hover { color: var(--tx); background: var(--bg4); }
.lb.all .lb-body { max-height: min(56vh, 520px); overflow-y: auto; }
.lb-cols span[title] { cursor: pointer; }

/* ---------- portal-size windows: kept LAST so these override the width-based rules above ---------- */
@media (max-height: 720px) {
  /* messages live together on the right edge, above the feed, never over the middle of the map */
  .toasts { top: auto; right: 0; bottom: calc(var(--cmdh) + 100px); width: 300px; flex-direction: column-reverse; }
}
/* small portal window (1080x607 and below): a slimmer command strip */
@media (max-height: 720px) and (max-width: 1100px) {
  :root { --cmdh: 132px; }
  .cmd { grid-template-rows: 70px 62px; }
  .stat, .ratio { padding-top: 6px; padding-bottom: 6px; }
  .st-troops .st-v { font-size: 28px; }
  .st-v { font-size: 22px; }
  .bb { padding: 4px 6px 8px; }
  .btabs { height: 18px; } .bt { height: 18px; font-size: 12px; }
}
/* the smallest portal frame (800x450): only what is needed to play */
@media (max-height: 500px) {
  :root { --cmdh: 116px; }
  .cmd { grid-template-rows: 62px 54px; }
  .st-troops .st-v { font-size: 24px; }
  .st-v { font-size: 19px; }
  .stat, .ratio { padding-top: 4px; padding-bottom: 4px; }
  .bb { padding: 2px 6px 6px; font-size: 13px; }
  .lb-row:nth-child(n+4), .feed, .layer-hud > div:has(> .pl-row) { display: none !important; }
  .toasts { bottom: calc(var(--cmdh) + 8px); }
  /* one line per build button: key, name, price */
  .bb { grid-template-areas: "hk bn bc" !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center; }
  .bb .ct { display: none !important; }
}
/* build bar icons: big enough to recognise at a glance, and never hidden (kept last so they win over the rules above) */
.bb .ic { width: 28px; height: 28px; }
.bb .ic svg { stroke-width: 1.8; }
@media (max-width: 1100px) {
  .bb { grid-template-areas: "ic hk bn" "ic bc ct" !important; grid-template-columns: 26px auto minmax(0, 1fr) !important; }
  .bb .ic { display: inline-flex !important; width: 24px; height: 24px; justify-self: center; }
}
@media (max-height: 500px) {
  .bb { grid-template-areas: "ic bn bc" !important; grid-template-columns: 22px minmax(0, 1fr) auto !important; }
  .bb .ic { width: 20px; height: 20px; }
  .bb .hk { display: none; }
}

/* calmer play screen at every size: standings top 5 (+ you), feed 5 lines */
.lb:not(.all) .lb-row:nth-child(n+6):not(.me) { display: none !important; }
.feed { max-height: 128px; }