:root {
  --ink: #1a1310;
  --lacquer: #4a1411;
  --lacquer-2: #6b1d17;
  --gold: #c9a24a;
  --gold-2: #e6c774;
  --parch: #f3e8cb;
  --parch-2: #e7d6aa;
  --parch-3: #d8c28c;
  --text: #2a1d12;
  --muted: #7a6446;
  --seal: #a3231a;
  --good: #2e7d32;
  --bad: #b3261e;
  --sea: #4d6b7a;
  --head: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --body: 'Noto Serif', Georgia, 'Times New Roman', serif;
}
/* Vietnamese (the user, 2026-10-07): Cinzel has no Vietnamese letters, so titles use Spectral SC */
html[lang="vi"] { --head: 'Spectral SC', 'Noto Serif', Georgia, serif; font-variant-numeric: lining-nums; } /* (Spectral's old-style figures read 190 as "19o") */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink) radial-gradient(ellipse at top, #3a1a14 0%, #140e0b 70%);
  color: var(--text);
  font: 14px/1.4 var(--body);
  overflow: hidden;
}
[hidden] { display: none !important; }
/* drop-downs in the game's style: parchment, a gold edge and a lacquer chevron (the user, 2026-10-13); the list
   that opens is the browser's own, given parchment colours */
select {
  appearance: none; -webkit-appearance: none; font: 14px var(--body); color: var(--text); cursor: pointer;
  padding: 3px 26px 3px 8px; border: 1px solid #b89458; border-radius: 4px; max-width: 100%; text-overflow: ellipsis;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b1d17' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 10px 6px, linear-gradient(#fffaf0, #f0e2bd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 1px rgba(60, 30, 10, .12); transition: border-color .1s, box-shadow .1s;
}
select:hover { border-color: var(--gold); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b1d17' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 10px 6px, linear-gradient(#fffdf6, #f6e8c4); }
select:focus-visible { outline: none; border-color: var(--seal); box-shadow: 0 0 0 2px rgba(163, 35, 26, .22); }
select:disabled { opacity: .55; cursor: default; }
select option { background: #fbf4e0; color: var(--text); }
select option:disabled { color: #a8987a; }
.screen { position: fixed; inset: 0; }

/* ---------- buttons ---------- */
.btn {
  font: 600 13px var(--body);
  color: var(--parch);
  background: linear-gradient(#6b1d17, #4a1411);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, .25), 0 1px 2px rgba(0, 0, 0, .4);
  transition: filter .12s, transform .05s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { filter: brightness(1.2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: linear-gradient(#c9a24a, #9a7426); color: #2a1a08; border-color: #f3dc98; }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn.big { padding: 10px 26px; font-size: 16px; font-family: var(--head); letter-spacing: .04em; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--parch-3); box-shadow: none; }
.btn.cmd { width: 100%; text-align: left; padding: 6px 10px; }

/* ---------- title ---------- */
#title-screen { display: flex; align-items: center; justify-content: center; overflow: auto; padding: 24px 16px; }
.title-wrap { text-align: center; max-width: 1100px; width: 100%; margin: auto; }
.title-seal {
  display: inline-block; font-size: 30px; color: #fbe9c4; background: var(--seal);
  padding: 14px 12px; border-radius: 6px; writing-mode: vertical-rl; letter-spacing: .1em;
  box-shadow: 0 0 0 3px #7a150f, 0 6px 20px rgba(0, 0, 0, .6);
}
h1 { font: 800 clamp(28px, 5vw, 54px) var(--head); color: var(--gold-2); margin: 18px 0 4px; text-shadow: 0 3px 12px rgba(0, 0, 0, .8); letter-spacing: .03em; }
.subtitle { color: #d8c49a; font-style: italic; margin: 0 0 26px; }
.title-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
#lang-pick { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
#lang-pick .btn { opacity: .75; }
#lang-pick .btn.on { opacity: 1; border-color: var(--gold-2); }
#scenario-pick { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
#scenario-pick .btn { opacity: .75; }
#scenario-pick .btn.on { opacity: 1; border-color: var(--gold-2); }
.title-actions[hidden] ~ #lang-pick { display: none; } /* (not while choosing a ruler) */
#setup { margin-top: 26px; background: var(--parch); border: 2px solid var(--gold); border-radius: 8px; padding: 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
#setup h2 { font-family: var(--head); margin: 0 0 6px; color: var(--lacquer); }
.hint { color: var(--muted); margin: 0 0 14px; }
#ruler-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; text-align: left; }
.ruler-card {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--parch-3); border-radius: 6px;
  background: #fbf4e0; cursor: pointer; user-select: none; transition: background .1s, border-color .1s;
}
.ruler-card:hover { background: #fff8e6; border-color: var(--gold); }
.ruler-card.sel { background: #f6e3b0; border-color: var(--seal); box-shadow: 0 0 0 2px var(--seal) inset; }
.ruler-card .nm { font-weight: 700; }
.rc-face .face { box-shadow: 0 0 0 3px var(--fc), 0 0 0 4px rgba(0, 0, 0, .35); margin: 3px; }
.ruler-card .meta { font-size: 12px; color: var(--muted); }
.ruler-card .diff { font-size: 11px; font-weight: 700; }
.chip { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .55); box-shadow: 0 0 0 1px rgba(255, 240, 205, .75); vertical-align: -2px; flex: none; }
.chip.lg { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #1c100d; box-shadow: 0 0 0 2px var(--gold-2); margin: 0 2px; }
/* an officer's name in log and report text, coloured by their force in the markup (UI.rich) */
.nm { font-weight: 600; }
.nm.free { color: #5a3a1a; }
#log .nm.free, .rep-events .nm.free { color: #fff3d6; }
/* portraits */
.item-img { border-radius: 3px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(60, 30, 10, .4); flex: none; }
.who .item-img { margin-left: 1px; }
.item-chip { display: inline-flex; align-items: center; gap: 6px; margin: 2px 10px 2px 0; }
.tbl.items td { vertical-align: middle; }
.tbl td.boosted { color: var(--good); font-weight: 700; }
#face-card .fc-items { display: flex; gap: 3px; margin-top: 4px; }
.budget-line { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-size: 12.5px; color: var(--muted); margin: 2px 0 4px; }
.budget-line > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.summary b.good { color: var(--good); } .summary b.badc { color: var(--bad); }
.budget-line .btn { margin-left: auto; padding: 1px 8px; }
#budget-tbl tr.row.checked td { background: rgba(163, 35, 26, .12); }
.calc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .calc-cols { grid-template-columns: 1fr; } }
table.calc { width: 100%; border-collapse: collapse; font-size: 13px; }
table.calc td { padding: 2px 4px; border-bottom: 1px dotted #dccaa0; }
table.calc td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.calc tr.total td { border-top: 1px solid var(--parch-3); font-weight: 700; }
.calc-notes { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; }
h4 { margin: 10px 0 4px; font: 700 13px var(--head); color: var(--lacquer); letter-spacing: .03em; }
.skill-tag { display: inline-block; font-size: 10.5px; line-height: 1.5; padding: 0 5px; border-radius: 3px; background: #f1dfaa; color: #5a3d0a; border: 1px solid #d9bd72; white-space: nowrap; cursor: help; }
.skill-mark { color: #b8860b; margin-left: 3px; font-size: 11px; cursor: help; }
.unit-skills { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
#face-card .fc-skill { margin-top: 4px; font-size: 11.5px; line-height: 1.3; }
.face { display: inline-block; flex: none; object-fit: cover; border-radius: 4px; vertical-align: middle; background: #3a2a1c; box-shadow: 0 0 0 1px rgba(60, 30, 10, .5); }
.face.blank { display: inline-flex; align-items: center; justify-content: center; color: var(--gold-2); font-family: var(--head); font-weight: 700; }
.face.big { border-radius: 6px; box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(0, 0, 0, .35); }
.face.tb { box-shadow: 0 0 0 1px var(--gold); margin-right: 2px; }
.who { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.tbl td .who .face { margin: -1px 0; }
.officer-card { display: flex; gap: 16px; align-items: flex-start; }
/* the officer dialog: the full figure on a stage in the faction's colour, the record beside it */
.oc { display: flex; gap: 18px; align-items: stretch; }
.oc-stage {
  --fc: #9c8a6a; position: relative; flex: none; width: 320px; min-height: 520px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--gold); box-shadow: inset 0 0 44px rgba(90, 60, 20, .28), 0 2px 10px rgba(0, 0, 0, .18);
  background:
    radial-gradient(ellipse 70% 40% at 50% 38%, color-mix(in srgb, var(--fc) 42%, transparent), transparent 72%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 160' preserveAspectRatio='none'><path d='M0 92 L34 70 L62 84 L104 40 L146 78 L188 52 L228 82 L266 58 L320 86 L320 160 L0 160 Z' fill='%23a58c5e' fill-opacity='.32'/><path d='M0 128 L46 100 L92 120 L138 92 L186 118 L236 98 L282 116 L320 106 L320 160 L0 160 Z' fill='%23866b40' fill-opacity='.34'/></svg>") bottom / 100% 34% no-repeat,
    linear-gradient(180deg, #f8f0da 0%, #ecdcb3 58%, #d6bd88 100%);
}
.oc-stage::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 7px; background: var(--fc); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.oc-stage::after { content: ''; position: absolute; left: 50%; bottom: 12px; width: 230px; height: 30px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(55, 32, 10, .5), transparent 70%); }
.oc-figure { position: absolute; z-index: 1; bottom: 10px; left: 50%; transform: translateX(-50%); height: calc(100% - 24px); width: auto; max-width: none; filter: drop-shadow(0 6px 10px rgba(40, 20, 5, .35)); }
.oc-bust { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
.oc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.oc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oc-name { margin: 0; font-family: var(--head); font-size: 26px; font-weight: 700; color: var(--lacquer); display: flex; align-items: center; gap: 9px; }
.oc-name .chip { width: 14px; height: 14px; }
.oc-sub { color: var(--muted); margin-top: -6px; }
.oc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.oc-stat { background: linear-gradient(180deg, #fbf4e0, var(--parch-2)); border: 1px solid var(--parch-3); border-radius: 6px; padding: 6px 9px 8px; text-align: center; }
.oc-stat .oc-l { display: block; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.oc-stat b { display: block; font-family: var(--head); font-size: 26px; line-height: 1.1; color: var(--ink); }
.oc-stat.boosted b { color: var(--good); }
.oc-stat .bar { margin-top: 5px; }
.oc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; font-size: 13px; }
.oc-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 1px dotted var(--parch-3); padding-bottom: 1px; }
.oc-facts > div.wide { grid-column: 1 / -1; }
.oc-facts span { color: var(--muted); }
.oc-facts .oc-stars { color: var(--seal); letter-spacing: 1px; }
.oc-sec h4 { margin: 0 0 4px; font-family: var(--head); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--parch-3); padding-bottom: 2px; }
.oc-skill { background: rgba(201, 162, 74, .12); border-left: 3px solid var(--gold); padding: 4px 8px; border-radius: 0 4px 4px 0; }
.oc .bond-list > div > b { white-space: nowrap; flex: none; }
.oc .item-chip .hint { margin: 0; }
.meet { display: flex; gap: 12px; align-items: center; }
.meet .pair { display: flex; align-items: center; gap: 4px; flex: none; }
.meet .arrow { color: var(--gold); font-size: 18px; }
.next-player { display: flex; gap: 16px; align-items: center; justify-content: center; }
.duel-faces { display: flex; gap: 18px; align-items: center; justify-content: center; margin-bottom: 6px; }
.duel-faces .vs { font: 800 26px var(--head); color: var(--gold); }
.face.duel { display: block; margin: 0 auto 6px; }
#face-card { position: fixed; z-index: 300; pointer-events: none; display: flex; gap: 12px; width: 330px; padding: 10px; background: var(--parch); border: 2px solid var(--gold); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); font-size: 12.5px; }
#face-card .nm { font: 800 16px var(--head); color: var(--lacquer); }
#face-card table { border-collapse: collapse; margin: 4px 0; width: 100%; }
#face-card td { padding: 0 4px 0 0; } #face-card td:first-child { color: var(--muted); width: 32px; } #face-card td.num { width: 24px; text-align: right; font-weight: 700; }
#face-card .bar { height: 6px; }
.setup-actions { display: flex; justify-content: space-between; margin-top: 14px; }

/* ---------- main layout ---------- */
#game-screen { display: flex; flex-direction: column; }
#topbar {
  display: flex; align-items: center; gap: 14px; padding: 6px 12px; flex-wrap: wrap;
  background: linear-gradient(#2a1612, #1c100d); border-bottom: 2px solid var(--gold); color: var(--parch);
}
.tb-date { font-family: var(--head); font-size: 17px; color: var(--gold-2); display: flex; flex-direction: column; line-height: 1.1; }
#tb-season { font-size: 11px; color: #bba57a; font-family: var(--body); }
.tb-ruler { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tb-stats { display: flex; gap: 2px 16px; font-size: 14px; color: #e0cfa6; flex-wrap: wrap; flex: 1 1 0; min-width: 0; }
.tb-stats b { color: #fff3d2; }
.tb-stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: default; }
.tb-stat.city { color: #e0cfa6; } .tb-stat.soldiers { color: #f09a7a; } .tb-stat.gold { color: var(--gold-2); } .tb-stat.food { color: #b9d77a; }
.tb-faces { display: flex; gap: 6px; }
.tb-adv { position: relative; display: inline-flex; }
.tb-badge { position: absolute; right: -6px; bottom: -6px; width: 18px; height: 18px; border-radius: 50%; background: #2a1612; box-shadow: 0 0 0 1px var(--gold); color: var(--gold-2); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.face.tb.none { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: transparent; box-shadow: none; border: 1px dashed rgba(201, 162, 74, .6); color: rgba(201, 162, 74, .6); }
.tb-buttons { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
#main { flex: 1; display: flex; min-height: 0; }
#map-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#map-wrap { flex: 1; position: relative; overflow: hidden; background: var(--sea); min-height: 200px; }
#map { width: 100%; height: 100%; display: block; cursor: grab; }
#map.dragging { cursor: grabbing; }
#map-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
/* tooltips (UI: every title="" shows here, in the map's style) */
#tip { position: fixed; z-index: 1000; pointer-events: none; max-width: 300px; padding: 5px 9px; background: rgba(26, 19, 16, .95); color: var(--parch); border: 1px solid var(--gold); border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); font: 12px/1.4 var(--body); white-space: pre-line; }
/* scrollbars in the game's colours: a gold-brown thumb on a faint track (dark where the panel is dark) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(140, 105, 50, .12); border-radius: 6px; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #b48a3e, #8a6526); border: 2px solid transparent; background-clip: padding-box; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #8c1c13, #6a140e); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
#log::-webkit-scrollbar-track, .rep-events::-webkit-scrollbar-track { background: rgba(0, 0, 0, .35); }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #9a7426 rgba(140, 105, 50, .12); } }
#map-tip {
  position: absolute; pointer-events: none; background: rgba(26, 19, 16, .92); color: var(--parch); border: 1px solid var(--gold);
  border-radius: 4px; padding: 6px 8px; font-size: 12px; max-width: 240px; z-index: 5;
}
#ai-banner {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(26, 19, 16, .9); color: var(--gold-2);
  border: 1px solid var(--gold); border-radius: 20px; padding: 4px 16px; font-size: 13px;
}
#log {
  height: 150px; overflow-y: auto; background: #20150f; color: #d9c7a0; border-top: 2px solid var(--gold);
  padding: 6px 10px; font-size: 12.5px;
}
#log .e { padding: 1px 0; border-bottom: 1px dotted rgba(201, 162, 74, .12); }
#log .d { color: #8f7a56; margin-right: 6px; font-variant-numeric: tabular-nums; }
#log .war { color: #f0b37a; }
#log .major { color: var(--gold-2); font-weight: 700; }
#log .bad { color: #ef8a80; }
#log .minor { color: #9c8b6b; }
#log .mine { color: #fff1cc; }

#side {
  width: 400px; flex: none; background: var(--parch); border-left: 2px solid var(--gold); overflow-y: auto; padding: 10px 12px;
  background-image: linear-gradient(rgba(255, 255, 255, .25), rgba(0, 0, 0, .03));
}
.side-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.side-head h2 { font: 800 22px var(--head); margin: 0; color: var(--lacquer); }
.side-head .own { font-size: 12px; color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; margin-bottom: 10px; font-size: 13px; }
.stat-grid div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--parch-3); }
.stat-grid span { color: var(--muted); }
.bar { height: 6px; background: #dccaa0; border-radius: 3px; overflow: hidden; margin-top: 2px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #8c1c13, #c9a24a); }
h3 { font: 700 14px var(--head); color: var(--lacquer); margin: 12px 0 6px; border-bottom: 1px solid var(--parch-3); padding-bottom: 2px; letter-spacing: .03em; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 400; font-size: 11px; border-bottom: 1px solid var(--parch-3); padding: 2px 4px; cursor: default; }
.tbl th.sortable { cursor: pointer; }
.tbl td { padding: 3px 4px; border-bottom: 1px dotted #dccaa0; font-variant-numeric: tabular-nums; }
.tbl tr.row:hover td { background: rgba(201, 162, 74, .18); cursor: pointer; }
.tbl tr.acted td { color: #a38f6c; }
.tbl tr.disabled td { opacity: .45; }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl .hl { font-weight: 700; color: var(--lacquer); }
.tag { display: inline-block; font-size: 10px; padding: 0 4px; border-radius: 3px; background: var(--seal); color: #fff; margin-left: 4px; vertical-align: 1px; }
.tag.gold { background: #9a7426; }
.tag.grey { background: #8a7a60; }
/* the city panel: resources as icons, development bars with their assignments, compact commands */
.res-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px 4px; margin: 2px 0 6px; padding: 4px 8px; background: rgba(201, 162, 74, .14); border: 1px solid var(--parch-3); border-radius: 5px; }
.res { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; cursor: default; }
.res b { color: var(--ink); font-variant-numeric: tabular-nums; }
.res-gold { color: #9a7426; } .res-food { color: #5f7f2a; } .res-soldiers { color: #a5402a; } .res-people { color: #6b5a3e; }
.res-arms { color: var(--muted); font-size: 12px; } .res-arms b { font-weight: 400; }
/* development: an icon and the value; in your city, a line each with its assignment */
.dv { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; cursor: default; font-variant-numeric: tabular-nums; }
.dv svg { color: #8a6a2c; flex: none; }
.dv small { color: var(--muted); font-size: 11px; }
.dev { margin-bottom: 4px; }
.dev-row { display: grid; grid-template-columns: 80px 1fr 58px; gap: 6px; align-items: center; min-height: 25px; border-bottom: 1px dotted var(--parch-3); }
.dev-line { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 2px 6px; }
.dwho { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; white-space: nowrap; }
.dwho .hint { display: inline; margin: 0 0 0 4px; font-size: 11.5px; line-height: 1; }
.dbtn { text-align: right; }
.dbtn .btn { width: 100%; padding: 1px 0; }
h3.with-btn { display: flex; align-items: flex-end; justify-content: space-between; }
h3.with-btn .btn { padding: 0 8px; margin-bottom: 2px; font-family: var(--body); letter-spacing: 0; }
.cmds { display: flex; flex-direction: column; gap: 2px; }
.cmd-row h4 { margin: 2px 0 2px; font: 700 10.5px var(--head); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.cmd-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.btn.cmd { display: flex; align-items: center; gap: 5px; padding: 2px 6px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.btn.cmd svg { flex: none; opacity: .9; }
.tbl td.st { text-align: center; }
.tbl td.st.task svg { color: #8a6a2c; }
.tbl td.st.done svg { color: #a38f6c; }
.ready-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4f8a2e; box-shadow: 0 0 0 2px rgba(79, 138, 46, .2); }
/* tabs (the Officers dialog) */
.tabs { display: flex; gap: 3px; border-bottom: 2px solid var(--lacquer); margin: -4px 0 8px; position: sticky; top: -12px; z-index: 3; background: var(--parch); padding-top: 4px; }
.tabs .tab { font: 700 13px var(--head); padding: 6px 14px; border: 1px solid var(--parch-3); border-bottom: none; border-radius: 6px 6px 0 0; background: #e6d6ad; color: var(--muted); cursor: pointer; }
.tabs .tab .n { font: 400 11px var(--body); opacity: .8; margin-left: 3px; }
.tabs .tab.on { background: var(--lacquer); color: #fff3d6; border-color: var(--lacquer); }
#all-officers td { white-space: nowrap; }
a.city-link { color: var(--lacquer); text-decoration: none; }
a.city-link:hover { text-decoration: underline dotted; }
.notice { background: #efe0b8; border: 1px solid var(--parch-3); border-radius: 4px; padding: 8px 10px; color: var(--muted); font-size: 13px; }
.good { color: var(--good); } .badc { color: var(--bad); }

/* ---------- modal ---------- */
#modal-root .overlay {
  position: fixed; inset: 0; background: rgba(10, 6, 4, .6); display: flex; align-items: center; justify-content: center; z-index: 50;
  padding: 16px; animation: fade .12s;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  background: var(--parch); border: 2px solid var(--gold); border-radius: 8px; width: min(560px, 100%); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; box-shadow: 0 16px 60px rgba(0, 0, 0, .7);
}
.modal.wide { width: min(900px, 100%); }
.modal.xwide { width: min(1240px, 100%); }
/* a dialog with a fixed size (UI.modal height): its body takes the rest and scrolls */
.modal.fixed { height: min(var(--fixed-h), calc(100vh - 32px)); }
.modal.fixed .body { flex: 1 1 auto; min-height: 0; }
/* the officer dialog: the figure fills the stage; the record beside it scrolls if it runs long */
.modal.officer-modal .body { display: flex; flex-direction: column; overflow: hidden; }
.modal.officer-modal .oc { flex: 1 1 auto; min-height: 0; }
.modal.officer-modal .oc-stage { min-height: 0; }
/* (a scrolling box clips what sticks out of it on every side: 2 px on the left keep the treasure pictures' outline) */
.modal.officer-modal .oc-info { overflow-y: auto; padding: 0 6px 0 2px; }
/* winning an officer over (Recruit's second step, the prisoner envoy, Persuade): the officer on the left, figure and
   compact record; who goes and the advisor's words on the right */
.modal.win-modal { width: min(1000px, 100%); }
.modal.win-modal .body { display: flex; flex-direction: column; overflow: hidden; }
.win { display: flex; gap: 16px; flex: 1 1 auto; min-height: 0; }
.win-who { flex: 0 0 470px; display: flex; gap: 12px; min-height: 0; }
.win .oc-stage { width: 190px; min-height: 0; }
.win .oc-stage::after { width: 150px; }
.win .oc-info { overflow-y: auto; padding: 0 6px 0 2px; gap: 8px; }
.win .oc-name { font-size: 21px; }
.win .oc-stats { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.win .oc-stat { padding: 3px 8px 5px; }
.win .oc-stat b { font-size: 20px; }
.win .oc-facts { grid-template-columns: 1fr; }
.win-envoy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.win-envoy h3 { margin: 0; }
.win-envoy .pick-wrap.fixed { height: auto; flex: 1 1 auto; min-height: 0; }
.win-envoy .summary p { margin: 0 0 6px; }
.modal.win-list .body { display: flex; flex-direction: column; overflow: hidden; }
.modal.win-list .body > div { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.win-targets.pick-wrap.fixed { height: auto; flex: 1 1 auto; min-height: 0; }
.win-targets tbody tr.row { cursor: pointer; }
.win-targets tbody td:first-child input { display: none; } /* (a click on the row opens the officer: no choosing first) */
/* the event dialog: the whole picture; the news below it takes the rest and scrolls */
/* the event dialog (the user, 2026-10-07): the 16:9 picture fills its width edge to edge, right under the title, and
   the news takes a fixed strip below it (scrolling if long). The dialog is as wide as the window lets the picture,
   the strip, the title and the buttons fit (--ev-chrome), so it keeps its size and the picture its whole frame. */
.modal.event-modal { --ev-text: 132px; --ev-chrome: 100px; width: min(960px, calc(100vw - 32px), calc((100vh - 32px - var(--ev-text) - var(--ev-chrome)) * 16 / 9)); }
.modal.event-modal .body { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
/* dialogs of the game with a picture on top and more to say below: a taller strip (city fallen, battle result; talent found) */
.modal.event-modal.ev-tall { --ev-text: 220px; }
.modal.event-modal.ev-taller { --ev-text: 300px; }
.modal.event-modal .event-text > .big-msg:first-child, .modal.event-modal .event-text > p:first-child { margin-top: 6px; }
/* single combat: the picture faded behind the two fighters, their portraits on either side, the bouts below */
.duel-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1c100d; border-bottom: 2px solid var(--gold); flex: none; }
.duel-stage .duel-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.duel-stage .duel-arena { position: relative; height: 100%; box-sizing: border-box; padding: 0 7%; }
.duel-stage .face.duel { box-shadow: 0 0 0 3px var(--gold), 0 10px 26px rgba(0, 0, 0, .55); }
.duel-stage .duel-arena .nm { color: #fff3d6; text-shadow: 0 1px 4px #000; margin-top: 4px; }
.duel-stage .duel-arena .war { color: #f3e0b0; text-shadow: 0 1px 3px #000; }
.duel-stage .duel-arena .vs { font-size: 46px; color: var(--gold-2); text-shadow: 0 2px 8px #000; }
.duel-stage .duel-arena .hp { background: rgba(0, 0, 0, .45); border-color: var(--gold); max-width: 200px; margin: 6px auto 0; }
.duel-text { display: flex; flex-direction: column; }
.duel-text .duel-log { flex: 1 1 auto; height: auto; min-height: 0; border-top: 0; }
.duel-text .big-msg { margin: 2px 0 0; }
.modal.event-modal .event { display: flex; flex-direction: column; }
/* turn report */
.rep-events { list-style: none; margin: 0 0 10px; padding: 6px 10px; background: #20150f; color: #d9c7a0; border-radius: 6px; max-height: 220px; overflow-y: auto; font-size: 13px; }
.rep-events li { padding: 2px 0; border-bottom: 1px dotted rgba(201, 162, 74, .15); }
.rep-events .d { color: #8f7a56; margin-right: 8px; font-variant-numeric: tabular-nums; }
.rep-events .war { color: #f0b37a; } .rep-events .major { color: var(--gold-2); font-weight: 700; }
.rep-events .bad { color: #ef8a80; } .rep-events .minor { color: #9c8b6b; } .rep-events .mine { color: #fff1cc; }
.rep-cities td { vertical-align: top; }
.rep-cities .dl { font-size: 11px; line-height: 1.1; color: var(--muted); }
.rep-cities .dl.up { color: var(--good); } .rep-cities .dl.down { color: var(--bad); }
.rep-cities tr.new td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.rep-cities tr.has-ended td { background: #f7e7b4; }
.rep-cities .city-link { color: var(--lacquer); font-weight: 700; text-decoration: none; }
.rep-cities .city-link:hover { text-decoration: underline; }
.rep-cities .tasks { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.task-chip { font-size: 11px; padding: 0 6px; border-radius: 9px; background: var(--parch-2); color: var(--muted); white-space: nowrap; }
.task-chip.ending { background: #efdca6; color: var(--text); }
.task-chip.ended { background: var(--seal); color: #fff; font-weight: 700; }
.modal header { background: linear-gradient(#6b1d17, #4a1411); color: var(--gold-2); font: 700 17px var(--head); padding: 8px 14px; border-radius: 5px 5px 0 0; letter-spacing: .03em; }
.modal .body { padding: 12px 14px; overflow-y: auto; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--parch-3); flex-wrap: wrap; }
.modal label.row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.modal label.row > span:first-child { min-width: 90px; color: var(--muted); }
.modal input[type=number] { font: 14px var(--body); padding: 3px 6px; border: 1px solid var(--parch-3); background: #fffaf0; border-radius: 3px; }
.modal input[type=range] { flex: 1; accent-color: var(--seal); }
.pick-wrap.fixed { height: 260px; max-height: none; } /* officer pickers: the same size whatever the city holds */
.pick-wrap { max-height: 300px; overflow-y: auto; border: 1px solid var(--parch-3); border-radius: 4px; background: #fbf4e0; }
.pick-wrap .tbl tr.row.checked td { background: rgba(163, 35, 26, .12); }
.pick-wrap input { accent-color: var(--seal); }
.summary { margin-top: 8px; font-size: 13px; color: var(--muted); }
.summary b { color: var(--text); }
.big-msg { font-size: 16px; text-align: center; padding: 10px 0; }

/* ---------- toast ---------- */
#toast-root { position: fixed; left: 50%; top: 58px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast {
  background: rgba(26, 19, 16, .95); color: var(--parch); border: 1px solid var(--gold); padding: 8px 14px; border-radius: 6px;
  max-width: 560px; font-size: 13.5px; animation: toast 3.8s forwards; box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
.toast.success { border-color: #8fd18f; }
.toast.failed, .toast.err { border-color: #ef8a80; }
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 6% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- map svg ---------- */
.land { fill: #d9c79c; stroke: #8a7550; stroke-width: 2; }
.river { fill: none; stroke: #5f8497; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.road { stroke: #7a6446; stroke-width: 2.4; stroke-dasharray: 6 5; opacity: .75; }
.road.hot { stroke: #a3231a; stroke-width: 4; stroke-dasharray: none; opacity: .9; }
.city { cursor: pointer; }
.city circle.body { stroke: #1a1310; stroke-width: 2.5; }
.city.mine circle.body { stroke: #fff3c4; stroke-width: 3.5; }
.city.neutral circle.body { stroke-dasharray: 4 3; stroke: #5b4a33; stroke-width: 2; }
.city .agent { fill: #ffd24a; stroke: #1a1310; stroke-width: 1.5; pointer-events: none; }
.tbl.assign td { vertical-align: middle; }
.prisoner { padding: 5px 4px; border-bottom: 1px dotted #dccaa0; font-size: 12.5px; cursor: pointer; }
.prisoner:hover { background: rgba(201, 162, 74, .18); }
.prisoner .pl1 .hint { display: block; font-size: 11.5px; margin-top: 1px; }
.prisoner .pl2 { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.city .ring { fill: none; stroke: #fff; stroke-width: 3; opacity: 0; }
.city.sel .ring { opacity: 1; animation: pulse 1.2s infinite; }
.city.target .ring { opacity: 1; stroke: #ff5a4a; }
@keyframes pulse { 50% { stroke-opacity: .3; } }
.city text { font: 700 15px var(--body); fill: #1a1310; paint-order: stroke; stroke: #f3e8cb; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.city text.cnt { font-size: 12px; fill: #fff; stroke: none; }
.city.hot circle.body { filter: drop-shadow(0 0 6px #ff6a3d); }
.city circle.body { transition: fill .8s ease; }
/* the officer card's bonds */
.bond-list { margin: 2px 0 0; display: flex; flex-direction: column; gap: 2px; }
.bond-list > div { display: flex; align-items: center; gap: 6px; }
.bond-list .hint { margin: 0; }
.bond-unbreakable { color: var(--lacquer); }
.bond-strong { color: #8a5a00; }
/* wars on the map */
#map .war-fx { pointer-events: none; }
.march-trail { stroke-width: 5; stroke-dasharray: 10 6; stroke-linecap: round; opacity: .9; filter: drop-shadow(0 0 1.5px #1a1310); }
.march-token circle { stroke: #fff3d2; stroke-width: 2.5; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.march-label { font: 700 13px var(--body); paint-order: stroke; stroke: #f3e8cb; stroke-width: 4px; stroke-linejoin: round; fill: #1a1310; }
.war-result rect { stroke: #1a1310; stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.war-result text { font: 800 16px var(--body); letter-spacing: .3px; }
.war-burst { fill: none; stroke: #ff6a3d; stroke-width: 5; }
#war-anim { display: flex; align-items: center; justify-content: center; gap: 1px; }
#war-anim.off { opacity: .45; }
#war-anim.off svg { filter: grayscale(1); }

/* ---------- battle ---------- */
#battle-screen { display: flex; background: #140e0b; z-index: 40; }
#battle-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#battle-head {
  display: flex; gap: 18px; align-items: center; padding: 8px 14px; color: var(--parch); white-space: nowrap;
  background: linear-gradient(#2a1612, #1c100d); border-bottom: 2px solid var(--gold);
}
/* the hint takes what room is left on the one line (the whole text is its tooltip), so the header never changes height */
#battle-head .bh-hint { margin-left: auto; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; font-size: 12px; color: #bba57a; }
#battle-head .ttl { font: 800 18px var(--head); color: var(--gold-2); }
#battle-head .phase { padding: 1px 10px; border-radius: 10px; font-weight: 700; font-size: 12px; }
#battle-head .phase.day { background: #e9c46a; color: #3a2600; }
#battle-head .phase.night { background: #1d2a55; color: #cfd8ff; box-shadow: 0 0 0 1px #6c7fc9 inset; }
#battle-canvas-wrap { flex: 1; position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; }
#bcanvas { display: block; }
.bpan { position: absolute; z-index: 5; border: 1px solid rgba(201, 162, 74, .7); background: rgba(26, 19, 16, .72); color: var(--gold-2); font-size: 18px; cursor: pointer; border-radius: 8px; padding: 0; user-select: none; }
.bpan:hover { background: rgba(60, 40, 24, .9); }
.bpan[data-pan="left"], .bpan[data-pan="right"] { top: 50%; width: 34px; height: 76px; transform: translateY(-50%); }
.bpan[data-pan="left"] { left: 8px; } .bpan[data-pan="right"] { right: 8px; }
.bpan[data-pan="up"], .bpan[data-pan="down"] { left: 50%; width: 76px; height: 30px; transform: translateX(-50%); font-size: 15px; }
.bpan[data-pan="up"] { top: 8px; } .bpan[data-pan="down"] { bottom: 8px; }
#btip { position: absolute; left: 10px; bottom: 10px; background: rgba(26, 19, 16, .9); color: var(--parch); border: 1px solid var(--gold); border-radius: 4px; padding: 5px 9px; font-size: 12px; pointer-events: none; }
#battle-side { width: 360px; flex: none; background: var(--parch); border-left: 2px solid var(--gold); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
/* the panel's sections keep their own height (squeezed, the unit card ran over the castle's); the log takes what is
   left, at least a few lines, and the whole panel scrolls when there is not room for everything */
#bs-forces, #bs-unit, #bs-camp, #bs-actions { flex: none; }
#bs-forces { padding: 10px 12px; border-bottom: 1px solid var(--parch-3); }
.force { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: 4px; font-size: 13px; }
.force .relief-line { flex-basis: 100%; padding-left: 26px; font-size: 11.5px; color: #2f6b2a; }
.force .who { font-weight: 700; flex: 1; }
.force.active .who::after { content: ' ◀ ' attr(data-acting); color: var(--seal); font-size: 11px; } /* (the word, in the player's language) */
#bs-unit { padding: 10px 12px; border-bottom: 1px solid var(--parch-3); min-height: 110px; font-size: 13px; }
#bs-unit .nm { font: 800 17px var(--head); color: var(--lacquer); }
#bs-camp { padding: 8px 12px; border-bottom: 1px solid var(--parch-3); font-size: 12.5px; }
#bs-camp:empty { display: none; }
#bs-camp .ch { font: 700 13px var(--head); color: var(--lacquer); }
#bs-camp .stock { color: var(--muted); margin: 2px 0 4px; }
#bs-camp .offs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0; }
#bs-camp .offs .back { opacity: .55; }
#bs-camp .dep { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; margin-top: 4px; }
#bs-camp .dep select, #bs-camp .dep input { width: 100%; font-size: 12px; }
#bs-camp .dep .full { grid-column: 1 / -1; }
#bs-camp .dep .ambush-opt { display: flex; align-items: center; gap: 5px; cursor: pointer; }
#bs-camp .dep .ambush-opt input { width: auto; }
#bs-unit .lurk { color: #2e6b3a; font-size: 12px; line-height: 1.35; }
#bs-camp .trap-panel { margin-top: 8px; }
/* events with pictures */
/* the whole picture: full width, its own proportions; on a small window it shrinks (never cropped) so the news still fits */
.event .event-art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; flex: none; border-bottom: 2px solid var(--gold); }
.event .event-text { flex: none; height: var(--ev-text); overflow-y: auto; padding: 4px 14px 8px; box-sizing: border-box; }
.event .event-when { margin: 2px 0 4px; }
.event .event-list { display: flex; flex-direction: column; gap: 8px; }
.event .event-item { display: flex; gap: 10px; align-items: flex-start; }
.event .event-faces { display: flex; gap: 4px; flex: none; }
.event .event-msg { font-weight: 600; }
.event .event-effect { font-size: 13px; color: var(--muted); margin-top: 2px; }
.event .event-effect b { color: var(--ink, inherit); }
.event .ev-loss { color: #b3261e; }
.event-modal footer { align-items: center; }
/* a scenario's story (UI.storyDialog): the scene, the people in it along its foot, the tale below */
.story-stage { position: relative; flex: none; }
.story-stage .event-art { margin: 0; }
.story-faces { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 12px; }
.story-faces > div { text-align: center; }
.story-faces .face.story { box-shadow: 0 0 0 2px var(--gold), 0 6px 18px rgba(0, 0, 0, .55); }
.story-faces .nm { margin-top: 3px; font: 700 13px var(--head); color: #fff3d6; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.story .story-text { line-height: 1.5; }
.event-modal .event-pref { margin: 0 auto 0 0; font-size: 12px; display: flex; align-items: center; gap: 5px; }
#bs-camp .trap-panel .hint { margin: 0 0 4px; font-size: 12px; line-height: 1.35; }
#bs-camp .trap-panel .wicon { vertical-align: -2px; }
#bs-unit .lurk .wicon, #bs-camp .ambush-opt .wicon { vertical-align: -2px; }
#bs-actions { padding: 8px 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; border-bottom: 1px solid var(--parch-3); }
#bs-actions .btn.on { background: linear-gradient(#c9a24a, #9a7426); color: #2a1a08; }
#bs-log { flex: 1 0 120px; overflow-y: auto; padding: 8px 12px; font-size: 12px; background: #efe2c0; }
#bs-log .l { padding: 1px 0; border-bottom: 1px dotted #d8c28c; }
#bs-log .l .dy { color: var(--muted); margin-right: 4px; }
#bs-log .fire { color: #c2410c; }
#bs-log .duel { color: #6b21a8; font-weight: 700; }
#bs-log .rout { color: var(--bad); font-weight: 700; }
#bs-log .plot { color: #1d4ed8; }
#bs-log .end { color: var(--lacquer); font-weight: 800; }
#bs-log .relief { color: #2f6b2a; font-weight: 700; }
.roster { font-size: 12px; }
.duel-arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; text-align: center; padding: 8px 0; }
.duel-arena .nm { font: 800 18px var(--head); color: var(--lacquer); }
.duel-arena .hp { height: 14px; background: #dccaa0; border-radius: 7px; overflow: hidden; margin-top: 6px; border: 1px solid var(--parch-3); }
.duel-arena .hp i { display: block; height: 100%; background: linear-gradient(90deg, #a3231a, #e0663a); transition: width .15s; }
.duel-arena .vs { font: 800 26px var(--head); color: var(--gold); }
.duel-log { height: 120px; overflow-y: auto; font-size: 12px; color: var(--muted); border-top: 1px solid var(--parch-3); padding-top: 6px; }

@media (max-width: 900px) {
  #main { flex-direction: column; }
  #side { width: auto; height: 45%; border-left: 0; border-top: 2px solid var(--gold); }
  #log { height: 90px; }
  #battle-screen { flex-direction: column; }
  #battle-side { width: auto; height: 45%; border-left: 0; border-top: 2px solid var(--gold); }
  .cmd-btns { grid-template-columns: repeat(2, 1fr); }
}

/* advisor opinion */
.advice { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 10px; border-radius: 5px; background: #efe0b8; border: 1px solid var(--parch-3); border-left: 4px solid var(--muted); color: var(--text); }
.advice.yes { border-left-color: var(--good); }
.advice.no { border-left-color: var(--bad); }
.advice.none { color: var(--muted); }
.advice .adv-who { font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.advice .adv-say { flex: 1; font-style: italic; }
.advice .adv-say .good, .advice .adv-say .badc { font-weight: 600; } /* the Search dialog: rumours confirmed (green) or denied (red) */
.advice .adv-say .adv-warn { display: block; margin-top: 4px; }

/* weapon aptitude badges */
.apt { display: inline-block; min-width: 26px; text-align: center; font-size: 11px; font-weight: 700; padding: 0 4px; margin-right: 3px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); }
.apt-S { background: #e8c35a; color: #3a2600; }
.apt-A { background: #b9d8a4; color: #1d3a10; }
.apt-B { background: #e2d6b8; color: #4a3c22; }
.apt-C { background: #e6b3a8; color: #5a1a10; }
select.gear { font: 12.5px var(--body); padding: 1px 22px 1px 5px; }
.wicon { vertical-align: -3px; flex: none; }
.wl { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.apt .wicon { vertical-align: -2px; margin-right: 1px; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--lacquer); }
.tbl th.sorted-asc::after { content: ' ▲'; font-size: 9px; }
.tbl th.sorted-desc::after { content: ' ▼'; font-size: 9px; }
.tbl th.apt-h { padding: 2px 3px; color: var(--text); }
.apt.solo { min-width: 16px; padding: 0 3px; margin: 0; }
.tbl.officers td, .tbl.officers th { padding: 3px 3px; }
.tbl.units select { font: 12.5px var(--body); padding: 1px 22px 1px 5px; max-width: 150px; }
.tbl.units td { vertical-align: middle; }
.unit-offs { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 12.5px; }
.unit-offs > span { display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
.unit-offs .lead { font-weight: 700; }
#bs-actions .btn small { opacity: .75; font-size: 10px; margin-left: 2px; }
#bs-actions .btn .wicon { vertical-align: -2px; }
#bs-log .special { color: #9a5b00; font-weight: 700; }


.bond-dot { color: var(--seal); font-size: 10px; margin-left: 1px; vertical-align: 2px; }

/* reinforcements (War, Enemy Attack and Call for Help dialogs) */
.relief { margin: 2px 0 6px; }
.relief-city { border: 1px solid var(--parch-3); border-radius: 4px; padding: 4px 8px; margin: 4px 0; background: rgba(255,255,255,.25); }
.relief-city .rc-head { display: block; cursor: pointer; }
.relief-city .rc-body { margin-top: 6px; }
.relief-city .rc-units select { width: 100%; font-size: 12px; }
.relief-city .rc-units input[type=number] { width: 72px; }
.relief-city .rc-units td { padding: 2px 3px; }
.relief-city .rc-foot { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.relief .rc-allies { display: block; margin: 6px 0 2px; }

/* sound: the speaker button in the top bar and the Sound dialog */
.btn.icon { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; }
.btn.icon .wicon { display: block; }
.snd-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }
/* the Settings dialog */
.settings { min-width: 420px; }
.settings h3 { margin: 4px 0 6px; }
.settings h3 ~ h3 { margin-top: 16px; }
.set-go { display: flex; gap: 8px; }
.set-go .btn { min-width: 90px; }
.set-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.set-sound .snd-row { margin: 4px 0 6px; }
.set-sound .hint { margin: 2px 0 0; }
.snd-row input[type=range] { flex: 1; max-width: 220px; }

/* the bug-report button (js/bugreport.js): small, in the bottom-left corner, above dialogs */
.bug-btn { position: fixed; left: 8px; bottom: 8px; z-index: 70; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: rgba(74, 20, 17, .88); color: var(--gold-2); opacity: .55; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.bug-btn:hover { opacity: 1; }
#btip { left: 50px; } /* (the battlefield's hex tooltip, beside the button) */
/* the War confirmation (the user, 2026-10-13): what goes, then the advisor's counsel, one line each */
.modal.war-confirm { width: min(620px, 100%); }
.war-sum { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.war-sum th { text-align: left; font-weight: 400; color: var(--muted); padding: 3px 12px 3px 0; white-space: nowrap; vertical-align: top; width: 1%; }
.war-sum td { padding: 3px 0; border-bottom: 1px dotted var(--parch-3); }
.advice .adv-say .adv-line { display: block; }
.advice .adv-say .adv-line + .adv-line { margin-top: 4px; }
.war-warn { margin: 0 0 8px; padding-left: 18px; }
.modal label.row .of-stock { align-self: center; white-space: nowrap; }