/* Kratesia's look: dark glass panels with thin gold lines over a painted map; Cinzel
   for names and titles, Alegreya Sans for everything else. */
@font-face { font-family: Cinzel; src: url(fonts/cinzel.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url(fonts/alegreya-sans-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url(fonts/alegreya-sans-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url(fonts/alegreya-sans-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url(fonts/alegreya-sans-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url(fonts/alegreya-sans-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --text: #efe2c2;
  --dim: #a8977a;
  --faint: #7d6f58;
  --gold: #d9b36a;
  --gold-2: #f0d28a;
  --ink: #120e09;
  --glass: #100d0ae6;
  --glass-2: #ffffff0d;
  --line: #ffffff17;
  --edge: #d9b36a55;
  --good: #8fc46f;
  --bad: #e0705a;
  --warn: #f0b84a;
  --blue: #6aa6d8;
  /* Parchment, for documents inside panels (the focus tree). */
  --parchment: #efe3c4;
  --parchment-2: #e2d2aa;
  --paper-edge: #8a6b3a;
  --paper-ink: #2a2116;
  --display: Cinzel, 'Times New Roman', serif;
  font: 15px/1.35 'Alegreya Sans', 'Gill Sans', system-ui, sans-serif;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #0c1f2e; }
#map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: default; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dim { color: var(--dim); }
.bad { color: var(--bad); }
.gold { background: repeating-linear-gradient(135deg, #d99a1c 0 3px, #4a3a20 3px 6px); padding: 0 4px; font-weight: 700; color: var(--gold-2); }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px #0008; margin-right: 6px; vertical-align: -1px; flex: none; }

/* ---------------------------------------------------------------- bars */
.bar { position: relative; display: block; height: 5px; background: #0009; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px #ffffff10; }
.bar i { display: block; height: 100%; background: var(--gold); border-radius: 3px; }

/* ---------------------------------------------------------------- top bar */
#top {
  position: fixed; top: 0; left: 0; right: 0; min-height: 52px; z-index: 10;
  /* Too much for one row wraps onto a second; --top-h follows its height. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 4px 8px 4px 6px;
  background: #0d0b09ee; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #d9b36a66; box-shadow: 0 4px 18px #0008;
}
#top .spacer { flex: 1; }
.nation { display: flex; align-items: center; gap: 9px; background: linear-gradient(90deg, #ffffff10, #0000); border: 0; border-radius: 6px; padding: 3px 12px 3px 4px; margin-right: 4px; text-align: left; }
#flag { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 1px 4px #000a; display: inline-block; flex: none; }
.nation .who { display: flex; flex-direction: column; line-height: 1.1; }
.nation b { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: 0.03em; color: var(--gold-2); }
.nation small { font-size: 12.5px; color: var(--dim); }
.res { display: flex; align-items: center; gap: 2px; }
.r { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 5px; white-space: nowrap; }
.r:hover { background: var(--glass-2); }
.r > svg.i { color: var(--gold); width: 19px; height: 19px; }
.r b { font-weight: 700; font-size: 15.5px; }
.r small { font-size: 12.5px; font-weight: 500; color: var(--good); }
.r small.bad { color: var(--bad); }
.r small.zero { color: var(--dim); }
.r .stack { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.r .bar { width: 44px; height: 4px; }
#manpower .bar i { background: #c8644a; }
#rowers .bar i { background: #5a9ac8; }
#stability.bad b { color: var(--bad); }
.r.title .swatch { margin: 0; width: 14px; height: 14px; }
.r.title.mine > svg.i { color: var(--gold-2); }
.sep { width: 1px; height: 26px; margin: 0 3px; background: var(--line); }
.tabs { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.tab {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  background: var(--glass-2); border: 1px solid #ffffff1c; border-radius: 6px; color: var(--gold-2);
}
.tab svg.i { width: 20px; height: 20px; }
.tab:hover { border-color: var(--edge); background: #ffffff16; }
.tab.open { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.tab .badge { position: absolute; right: -4px; top: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font: 800 11px/17px 'Alegreya Sans', sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px #0d0b09; }
.tab .count { position: absolute; right: -3px; bottom: -4px; padding: 0 4px; border-radius: 7px; background: #0d0b09; color: var(--text); font-size: 11px; font-weight: 700; line-height: 14px; box-shadow: 0 0 0 1px #ffffff22; }
.tab .count:empty { display: none; }
.tab .ring { position: absolute; left: 5px; right: 5px; bottom: 4px; height: 3px; background: #0008; border-radius: 2px; overflow: hidden; }
.tab .ring i { display: block; height: 100%; background: var(--good); }
.tab.open .ring { background: #0004; }
.tab.idle { color: var(--warn); border-color: #f0b84a66; }
.tab.war { border-color: #e0705a88; color: #ff9a80; }
.clock { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 8px; }
#date { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--gold-2); white-space: nowrap; min-width: 118px; text-align: right; }
#season { display: grid; place-items: center; color: var(--dim); }
#season.winter { color: #9cc8e8; }
.btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; background: var(--glass-2); border: 1px solid #ffffff1c; border-radius: 6px; color: var(--gold-2); }
.btn:hover { border-color: var(--edge); }
.btn.play { width: 40px; height: 34px; background: var(--gold); border-color: var(--gold); color: var(--ink); }
body:not(.paused) .btn.play { background: var(--glass-2); color: var(--gold-2); border-color: #ffffff1c; }
#speeds { display: inline-flex; gap: 3px; }
#speeds span { width: 6px; height: 18px; border-radius: 2px; background: #0009; box-shadow: inset 0 0 0 1px #ffffff22; }
#speeds span.on { background: var(--gold); box-shadow: none; }

/* ---------------------------------------------------------------- alerts and tooltip */
#alerts { position: fixed; top: calc(var(--top-h, 52px) + 8px); left: 50%; display: flex; gap: 8px; z-index: 4; }
.al { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: #0d0b09e6; border: 1px solid #ffffff2a; box-shadow: 0 3px 10px #000a; }
.al svg.i { width: 20px; height: 20px; }
.al.good { color: var(--good); border-color: #8fc46f88; }
.al.warn { color: var(--warn); border-color: #f0b84a88; }
.al.bad { color: var(--bad); border-color: #e0705aaa; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px #e0705a33, 0 3px 10px #000a; } }
#tip {
  position: fixed; z-index: 50; min-width: 150px; max-width: 300px; padding: 7px 10px; pointer-events: none;
  background: #0d0b09f2; border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 8px 24px #000c; font-size: 13.5px;
}
#tip .h { font-family: var(--display); font-weight: 600; color: var(--gold-2); font-size: 14px; }
#tip .l { display: flex; justify-content: space-between; gap: 16px; color: var(--dim); }
#tip .l:first-of-type { margin-top: 3px; }
#tip .l b { color: var(--text); font-weight: 700; }

/* ---------------------------------------------------------------- panels */
.panel {
  position: fixed; z-index: 5; color: var(--text);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--edge); border-radius: 8px; box-shadow: 0 12px 40px #000c;
}
.panel h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: 0.03em; color: var(--gold-2); flex: 1; display: flex; align-items: center; min-width: 0; }
.panel h3 { margin: 10px 0 6px; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.panel p { margin: 4px 0; }
.ph { display: flex; align-items: center; gap: 10px; padding: 10px 10px 9px 14px; border-bottom: 1px solid var(--line); }
.pb { padding: 8px 14px 12px; overflow-y: auto; min-height: 0; }
.close { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; margin-left: auto; background: none; border: 0; border-radius: 6px; color: var(--dim); }
.close:hover { color: var(--text); background: var(--glass-2); }
.facts { color: var(--dim); font-size: 13.5px; }
.owner { font-size: 14px; }
.owner .dim { font-size: 13px; }
.status { color: var(--dim); font-size: 13.5px; }
.status:empty { display: none; }
.sect { padding: 6px 0; }
.side { left: 12px; top: calc(var(--top-h, 52px) + 12px); width: 360px; max-height: calc(100vh - var(--top-h, 52px) - 24px); display: flex; flex-direction: column; }
.centre { left: 50%; top: calc(var(--top-h, 52px) + 16px); transform: translateX(-50%); max-width: calc(100vw - 24px); max-height: calc(100vh - var(--top-h, 52px) - 32px); display: flex; flex-direction: column; z-index: 8; }

/* Buttons inside panels: dark, gold text; the main action of a panel in gold. */
.buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.buttons:empty { display: none; }
.buttons.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.buttons.list { flex-direction: column; }
.buttons.grid button, .buttons.list button { justify-content: flex-start; min-width: 0; }
.buttons.grid button > span, .buttons.list button > span { overflow: hidden; text-overflow: ellipsis; }
.buttons button, #wars button, #mn-saves .load, .mn-new button, .faction .head button, .action, #fx-ideas .idea-group button, #fx-monuments .idea-group button, #av-lines .advance button {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; padding: 6px 9px; border-radius: 6px;
  background: #ffffff0f; border: 1px solid #ffffff22; color: var(--text); font-weight: 700; font-size: 13.5px; white-space: nowrap;
}
.buttons button > svg.i { color: var(--gold-2); width: 17px; height: 17px; }
.buttons button small { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-weight: 500; font-size: 12px; color: var(--dim); }
.buttons button small svg.i { width: 12px; height: 12px; color: var(--gold); }
.buttons button:hover:not(:disabled), #wars button:hover:not(:disabled), .faction .head button:hover:not(:disabled), .action:hover:not(:disabled) { border-color: var(--edge); background: #ffffff18; }
.buttons button:disabled, #wars button:disabled, .faction .head button:disabled, .action:disabled, #fx-ideas .idea-group button:disabled, #fx-monuments .idea-group button:disabled, #av-lines .advance button:disabled { opacity: 0.42; }
.buttons button.on { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.buttons button.on > svg.i { color: var(--ink); }
.buttons button.danger, #wars button.danger { color: #ffb4a4; border-color: #e0705a66; }
.action, .primary, .buttons button.primary { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink) !important; }
.action { width: 100%; margin-top: 8px; padding: 8px; font-size: 14.5px; }

/* Meters: a label, a bar and a value. */
.meter { display: grid; grid-template-columns: 92px 1fr 70px; align-items: center; gap: 10px; font-size: 13.5px; margin: 4px 0; }
.meter > span:first-child { color: var(--dim); display: flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter.share { grid-template-columns: 130px 1fr 40px; }
.meter .bar { height: 6px; }
.meter .bar s { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: 0.7; text-decoration: none; }
.meter b { text-align: right; font-weight: 700; }
.meter.unrest .bar i { background: var(--bad); }
.siege { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 13px; color: var(--dim); }
.siege .bar { height: 6px; }
.siege .bar i { background: var(--bad); }
.march .bar i { background: var(--gold); }
#pv-training .siege .bar i, #pv-shipyard .siege .bar i { background: var(--good); }
.shrine { margin-top: 12px; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.shrine b { font-family: var(--display); font-size: 13px; letter-spacing: 0.06em; color: var(--gold); text-transform: uppercase; }

/* ---------------------------------------------------------------- the right column */
#right {
  position: fixed; right: 12px; top: calc(var(--top-h, 52px) + 12px); width: 280px;
  max-height: calc(100vh - var(--top-h, 52px) - 250px);
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 4;
}
#right > * { pointer-events: auto; }
#right .panel { position: static; width: 100%; }
#outliner { overflow-y: auto; min-height: 0; flex-shrink: 1; padding-bottom: 4px; }
.ol { border-top: 1px solid var(--line); padding: 2px 0 4px; }
.ol:first-child { border-top: 0; }
.ol h3 { display: flex; justify-content: space-between; margin: 6px 12px 3px; font-size: 11.5px; }
.ol h3 small { font-family: 'Alegreya Sans', sans-serif; letter-spacing: 0; color: var(--dim); }
.ol .row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 12px; border: 0; background: none; text-align: left; font-size: 14px; }
.ol .row:hover { background: var(--glass-2); }
.ol .row.on { background: #d9b36a22; }
.ol .row svg.i { width: 16px; height: 16px; color: var(--gold-2); }
.ol .row .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol .row small { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.ol .row .bar { width: 46px; }
.ol .row b { font-weight: 700; min-width: 34px; text-align: right; }
#events { display: flex; flex-direction: column; min-height: 0; flex-shrink: 1; max-height: 40vh; }
#events .fold { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 8px 12px; text-align: left; color: var(--gold); }
#events .fold h3 { flex: 1; margin: 0; }
#events .chev { color: var(--dim); transition: transform 0.15s; }
#events.folded .chev { transform: rotate(-90deg); }
#events.folded #log { display: none; }
#events-unread { background: var(--bad); color: #fff; border-radius: 8px; padding: 0 6px; font: 800 11px/16px 'Alegreya Sans', sans-serif; letter-spacing: 0; margin-left: 4px; }
#log { list-style: none; margin: 0; padding: 0 12px 8px; overflow-y: auto; font-size: 13.5px; }
#log li { padding: 4px 0; border-top: 1px solid var(--line); cursor: pointer; }
#log li time { color: var(--faint); font-size: 11.5px; margin-right: 4px; }
#log li.good { color: var(--good); }
#log li.bad { color: var(--bad); }
#log li.mine { font-weight: 700; }
#log li.rival { color: var(--dim); font-size: 12.5px; }
#log:empty::after { content: '—'; color: var(--faint); }

/* ---------------------------------------------------------------- bottom right */
#bottom-right { position: fixed; right: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 8px; z-index: 4; }
#mapnav { display: grid; grid-template-columns: repeat(3, 30px); grid-template-areas: '. n in' 'w home e' '. s out'; gap: 4px; }
#zoom-in { grid-area: in; } #zoom-out { grid-area: out; } #recentre { grid-area: home; }
#mapnav [data-dy="-1"] { grid-area: n; } #mapnav [data-dy="1"] { grid-area: s; } #mapnav [data-dx="-1"] { grid-area: w; } #mapnav [data-dx="1"] { grid-area: e; }
#mapnav button {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 6px;
  background: #0d0b09dd; color: var(--gold-2); border: 1px solid #ffffff22; box-shadow: 0 2px 8px #0008;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
#mapnav button:hover { border-color: var(--edge); }
#mapnav button:active, #mapnav button.held { background: var(--gold); color: var(--ink); }
#modes { position: static; width: 352px; padding: 8px; }
.mode-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.mode-head b { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; color: var(--gold-2); }
.mode-head span { color: var(--dim); font-size: 12px; }
#legend { list-style: none; margin: 6px 0 8px; padding: 0 4px; display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 13px; }
#legend:empty { display: none; }
#legend li { display: flex; align-items: center; }
#legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px #0008; margin-right: 5px; }
#legend i.open { background: repeating-linear-gradient(135deg, #d99a1c 0 3px, #f0dfae 3px 6px); }
#legend i.reach { background: repeating-linear-gradient(135deg, #b98a3a 0 1.5px, #5a4a32 1.5px 6px); }
#mode-buttons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
#mode-buttons button { display: grid; place-items: center; height: 36px; padding: 0; border-radius: 6px; background: #ffffff0a; border: 1px solid #ffffff14; color: var(--gold-2); }
#mode-buttons button:hover { border-color: var(--edge); }
#mode-buttons button.on { background: var(--gold); border-color: var(--gold); color: var(--ink); }
#mode-buttons svg.i { width: 19px; height: 19px; }

/* ---------------------------------------------------------------- toasts */
#toasts { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); width: 380px; display: flex; flex-direction: column-reverse; gap: 6px; z-index: 6; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; background: #100d0ae6; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--edge); border-radius: 8px; box-shadow: 0 8px 24px #000b; animation: toast-in 0.25s ease-out; font-size: 14px; }
.toast > svg.i { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: #ffffff10; }
.toast.good > svg.i { color: var(--good); }
.toast.bad > svg.i { color: var(--bad); }
.toast > span { display: flex; flex-direction: column; }
.toast small { color: var(--faint); font-size: 12px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- map layer */
#units { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
#labels text { font-family: var(--display); font-weight: 600; fill: #1d140bb8; stroke: #f4ead155; stroke-width: 0.05em; paint-order: stroke; letter-spacing: 0.08em; pointer-events: none; }
#units .counter { pointer-events: auto; cursor: pointer; filter: drop-shadow(0 2px 2px #000a); }
#units .counter .body { fill: #15100bf2; stroke: #ffffff2a; stroke-width: 1; }
#units .counter .plate { stroke: #0008; stroke-width: 1; }
#units .counter .icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#units .counter > text { font: 700 12.5px 'Alegreya Sans', sans-serif; fill: var(--text); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
#units .counter .badge circle { fill: var(--gold); stroke: #0d0b09; stroke-width: 1.5; }
#units .counter .badge text { font: 800 10px 'Alegreya Sans', sans-serif; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
#units .counter.mine .body { stroke: #f0d28a99; }
#units .counter.enemy .body { stroke: #ff5a40; stroke-width: 2; }
#units .counter.selected .body, #units .counter.selected .plate { stroke: var(--gold-2); stroke-width: 2.5; }
#units .counter .moving { fill: var(--gold); }
#units .path { fill: none; stroke: #f3e6c4; stroke-width: 2; stroke-dasharray: 5 4; opacity: 0.85; }
#units .path.selected { stroke: var(--gold-2); stroke-width: 3; }
#units .harbour { fill: none; stroke: #f3e6c4; stroke-width: 2.2; opacity: 0.55; pointer-events: none; }
#units .harbour.mine { stroke: var(--gold-2); opacity: 0.95; }
body.targeting #map { cursor: crosshair; }

/* ---------------------------------------------------------------- the panels one by one */
#province .owner .swatch { margin-right: 6px; }
#army h2 .swatch, #fleet h2 .swatch { width: 14px; height: 14px; margin-right: 8px; }
#standings { width: min(860px, calc(100vw - 32px)); }
#standings.over { border-color: var(--gold); box-shadow: 0 0 0 3px #d9b36a44, 0 12px 40px #000c; }
#standings .ph .facts { margin-left: 10px; }
.st-scroll { overflow-y: auto; min-height: 0; padding: 0 6px 8px; }
#standings table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#standings th { position: sticky; top: 0; background: #14100c; text-align: right; font-weight: 500; color: var(--dim); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
#standings td { text-align: right; padding: 3px 8px; border-top: 1px solid #ffffff0a; }
#standings th.name, #standings td.name { text-align: left; }
#standings td.score { font-weight: 700; color: var(--gold-2); }
#standings tr.me td { background: #d9b36a22; font-weight: 700; }
#standings tr.gone td { color: var(--faint); }
#standings tbody tr { cursor: pointer; }
#standings tbody tr:hover td { background: var(--glass-2); }

.faction { padding: 10px 0 6px; border-top: 1px solid var(--line); }
.faction .head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.faction .head b { flex: 1; font-size: 15px; }
.faction .head .tag { font-size: 12.5px; color: var(--dim); }
.faction .head button { flex: 0 0 auto; padding: 3px 10px; font-size: 12.5px; }
.pools { border-top: 1px solid var(--line); }
.ruler .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.ruler .head b { flex: 1; font-family: var(--display); font-size: 15px; color: var(--gold-2); }
.ruler .head .tag, .ruler .heir .tag { font-size: 12.5px; color: var(--dim); }
.ruler .heir { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; margin: 6px 0 2px; }
.ruler .heir > span:first-child { color: var(--dim); }
.ruler .heir b { flex: 1; }
.ruler .heir.weak b, .ruler .heir.none { color: var(--bad); }
.ruler .election { font-size: 12.5px; color: var(--gold); margin: 8px 0 2px; text-transform: uppercase; letter-spacing: 0.08em; }
.ruler .candidate { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; margin: 2px 0; }
.ruler .candidate b { flex: 1; font-weight: 500; }
.ruler .candidate .tag { color: var(--dim); }
.ruler .candidate .chance { width: 40px; text-align: right; font-weight: 700; }
.ideas { border-top: 1px solid var(--line); }
#fx-ideas .idea-group { font-size: 13px; margin: 6px 0 10px; }
#fx-ideas .idea-group > b { display: block; margin-bottom: 2px; }
#fx-ideas .idea-group button { display: flex; margin-top: 4px; flex: none; }
#fx-gods .dim { font-size: 13px; }

.war-row { padding: 10px 0 8px; border-top: 1px solid var(--line); }
.war-row:first-child { border-top: 0; }
.war-row .head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.war-row .head b { flex: 1; cursor: pointer; font-size: 15px; }
.war-row .head .tag { font-size: 12.5px; color: var(--dim); }
.war-row button { flex: 0 0 auto; padding: 3px 10px; font-size: 12.5px; }
.war-row .sides { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.war-row .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.war-row .offer { font-size: 13px; margin: 6px 0 0; color: var(--gold-2); }
.terms { margin-top: 8px; padding: 8px 10px; background: #0006; border: 1px solid var(--line); border-radius: 6px; max-height: 280px; overflow-y: auto; font-size: 13px; }
.terms label { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.terms label span { flex: 1; }
.terms label span.held { font-weight: 700; }
.terms label.slider input { flex: 2; accent-color: var(--gold); }
.terms label.slider span { flex: 0 0 56px; }
.terms input[type=checkbox] { accent-color: var(--gold); }
.terms .head { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.terms .head b { flex: 1; }
.terms .head b.over { color: var(--bad); }

#lg-threat { font-size: 13.5px; color: var(--dim); margin: 4px 0; }
.league { padding: 8px 0 6px; border-top: 1px solid var(--line); }
.league h3 { margin: 0 0 4px; font-size: 13px; text-transform: none; letter-spacing: 0.04em; color: var(--text); }
.league.mine h3 { color: var(--gold-2); }
.league ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; }
.league .meter .bar i { background: var(--gold); }
.league ol.reforms { margin: 4px 0 0; padding-left: 20px; font-size: 13px; color: var(--faint); }
.league ol.reforms li.passed { color: var(--text); }
.league ol.reforms li.passed::marker { content: '✓ '; color: var(--good); }
.league ol.reforms li.next, .league ol.reforms li.voting { color: var(--gold-2); font-weight: 700; }

#av-lines { display: flex; flex-direction: column; gap: 16px; }
#av-lines .line h3 { margin-top: 4px; }
#av-lines .advance { font-size: 13px; padding: 6px 8px; margin: 0 -8px; border-radius: 6px; cursor: pointer; }
#av-lines .advance:hover { background: var(--glass-2); }
#av-lines .advance b { display: block; }
#av-lines .advance.have b { color: var(--good); }
#av-lines .advance.picked { background: #d9b36a26; }
#av-lines .advance button { display: flex; margin-top: 4px; padding: 3px 10px; font-size: 12.5px; flex: none; }

/* The focus tree is a document: parchment inside the dark panel. */
#fc-spirits { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.fc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.fc-row > b { color: var(--dim); font-weight: 400; min-width: 56px; }
.fc-spirit { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 4px; border-radius: 12px; border: 1px solid var(--paper-edge); background: #0003; color: var(--text); font-size: 13px; }
.fc-spirit.mixed { border-color: #b07a6a; }
button.fc-spirit { cursor: pointer; }
.fc-spirit.on { border-color: var(--gold); color: var(--gold-2); background: #d39a2c22; }
.fc-spirit.on.paused { opacity: 0.55; }
.fc-tier { stroke: #6e5d44; stroke-width: 1.2; stroke-dasharray: 8 5; }
.fc-tier-name { position: absolute; left: 4px; transform: translateY(-110%); font: 700 12px 'Cinzel', serif; letter-spacing: 0.06em; color: #6e5d44; pointer-events: none; }
#fc-legend { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--dim); }
#fc-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--paper-edge); }
#fc-legend i.done { background: linear-gradient(#f2c862, #d39a2c); border-color: #5a3f1a; }
#fc-legend i.running { background: #dfe8c8; border: 2px solid #3f7a3a; }
#fc-legend i.available { background: var(--parchment); border-color: #5a3f1a; }
#fc-legend i.locked { background: var(--parchment-2); border: 1px dashed #9a8a6a; }
#fc-legend i.bypassed { background: repeating-linear-gradient(135deg, #e8b33c88 0 3px, var(--parchment) 3px 6px); border: 1px dashed #a07a2a; }
#fc-legend i.excluded { background: #d9c6a8; border: 1px solid #b07a6a; opacity: 0.6; }
#fc-legend i.historical { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); border-color: #5a3f1a; vertical-align: 0; }
.fc-body { display: flex; gap: 14px; min-height: 0; flex: 1; }
#fc-tree { flex: 1; min-width: 0; overflow: auto; border-radius: 6px; border: 1px solid var(--paper-edge); color: var(--paper-ink);
  background-color: #e8d9b4; background-image: repeating-linear-gradient(0deg, #8a6b3a14 0 1px, transparent 1px 36px), repeating-linear-gradient(90deg, #8a6b3a14 0 1px, transparent 1px 36px); }
.fc-grid { position: relative; margin: 4px 8px 8px; }
.fc-grid svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.fc-line { fill: none; stroke-width: 2; }
.fc-line.done { stroke: #b07f1e; stroke-width: 2.6; }
.fc-line.open { stroke: #6e5d44; }
.fc-line.locked { stroke: #a8966f; stroke-dasharray: 4 4; }
.fc-line.any { stroke-dasharray: 2 3; }
.fc-line.excl { stroke: #9a3324; stroke-width: 1.6; stroke-dasharray: 3 3; }
.fc-excl { position: absolute; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: #9a3324; color: #fff; font-size: 10px; font-weight: bold; display: grid; place-items: center; box-shadow: 0 1px 3px #0005; pointer-events: none; }
.fc-focus { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--paper-ink); }
.fc-focus .badge, .fc-head .badge { --k: #6a3790; position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #f6ead0; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--k) 70%, #fff) 0, var(--k) 55%, color-mix(in srgb, var(--k) 70%, #000) 100%); border: 2px solid #b8913f; box-shadow: inset 0 0 0 2px #0003, 0 0 0 1px #4a3514, 0 2px 4px #0005; }
.fc-focus .badge svg, .fc-head .badge svg { filter: drop-shadow(0 1px 0 #0007); }
.badge.k-war { --k: #9a3324; } .badge.k-sea { --k: #2c5390; } .badge.k-faith { --k: #19786f; } .badge.k-wealth { --k: #a87a22; }
.badge.k-rule { --k: #6a3790; } .badge.k-culture { --k: #4c7a35; } .badge.k-doom { --k: #3a3430; }
.fc-focus .badge .hist { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-2); border: 1.5px solid #5a3f1a; }
.fc-focus .plate { width: 100%; padding: 3px 4px; border-radius: 3px; border: 1px solid #5a3f1a; background: var(--parchment); font-size: 12px; font-weight: 700; line-height: 1.15; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 2px 4px #0003; }
.fc-focus .plate small { font-weight: 400; font-size: 11px; color: #6e5d44; }
.fc-focus .plate .bar { height: 4px; background: #0002; box-shadow: none; }
.fc-focus .plate .bar i { background: #3f7a3a; }
.fc-focus.done .badge, .fc-head.done .badge { border-color: #f2c862; box-shadow: inset 0 0 0 2px #0003, 0 0 0 1px #4a3514, 0 0 9px 2px #f2c862aa; }
.fc-focus.done .plate { background: linear-gradient(#f2c862, #d39a2c); }
.fc-focus.done .plate small { color: var(--paper-ink); }
.fc-focus.running .badge, .fc-head.running .badge { border-color: #8fd27f; box-shadow: inset 0 0 0 2px #0003, 0 0 0 3px #3f7a3a, 0 2px 4px #0005; }
.fc-focus.running .plate { border-color: #3f7a3a; background: #dfe8c8; }
.fc-focus.locked .plate { border-style: dashed; border-color: #9a8a6a; background: var(--parchment-2); color: #8a7a60; box-shadow: none; }
.fc-focus.locked .badge, .fc-head.locked .badge { filter: saturate(.55) brightness(.92); border-color: #8a7550; }
.fc-focus.bypassed .plate { border-style: dashed; border-color: #a07a2a; background: repeating-linear-gradient(135deg, #e8b33c55 0 3px, var(--parchment) 3px 6px); }
.fc-focus.bypassed .badge, .fc-head.bypassed .badge { filter: saturate(.5); border-style: dashed; border-color: #f2c862; }
.fc-focus.excluded, .fc-head.excluded .badge { opacity: 0.45; }
.fc-focus.excluded .plate { border-color: #b07a6a; background: #d9c6a8; color: #6e5d44; box-shadow: none; text-decoration: line-through; text-decoration-color: #9a332488; }
.fc-focus.excluded .badge { filter: grayscale(1); }
.fc-focus.starting .badge { box-shadow: inset 0 0 0 2px #0003, 0 0 0 3px var(--gold), 0 2px 4px #0005; }
.fc-focus.picked .badge { outline: 3px solid var(--paper-ink); outline-offset: 2px; }
.fc-focus.picked .plate { outline: 2px solid var(--paper-ink); }
.fc-focus:hover .plate { filter: brightness(1.05); }
#fc-detail { flex: 0 0 290px; overflow-y: auto; font-size: 14px; }
.fc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fc-head .badge { flex: none; width: 52px; height: 52px; }
.fc-head b { display: block; font-family: var(--display); font-size: 16px; color: var(--gold-2); }
.fc-head .dim { font-size: 12.5px; }
#fc-detail h3 { margin: 12px 0 4px; }
#fc-detail ul { list-style: none; margin: 0; padding: 0; }
#fc-detail li { padding: 1px 0 1px 16px; position: relative; }
#fc-detail li::before { content: '·'; position: absolute; left: 4px; color: var(--dim); }
#fc-detail li.met::before { content: '✓'; left: 0; color: var(--good); }
#fc-detail li.unmet { color: var(--bad); }
#fc-detail li.unmet::before { content: '✗'; left: 0; color: var(--bad); }

#menu { width: min(440px, calc(100vw - 32px)); z-index: 20; top: 50%; transform: translate(-50%, -50%); }
#mn-saves { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 40vh; }
#mn-saves li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
#mn-saves li .what { flex: 1; }
#mn-saves li small { color: var(--dim); }
#mn-saves .load { flex: 0 0 auto; padding: 4px 12px; }
#mn-saves li .del { background: none; border: 0; font-size: 18px; color: var(--dim); }
.mn-new { display: flex; align-items: center; gap: 8px; }
.mn-new select { flex: 1; font: inherit; padding: 5px 8px; border-radius: 6px; background: #0008; color: var(--text); border: 1px solid #ffffff22; }
.mn-new label { display: flex; align-items: center; gap: 4px; color: var(--dim); }
.mn-new input { accent-color: var(--gold); }
.mn-new button { flex: 0 0 auto; padding: 6px 14px; }

#intro { top: 50%; transform: translate(-50%, -50%); width: 460px; }
#intro .keys { color: var(--dim); font-size: 13px; }
#paused-banner {
  position: fixed; top: calc(var(--top-h, 52px) + 54px); left: 50%; transform: translateX(-50%); display: none; z-index: 3;
  background: #0d0b09cc; color: var(--gold-2); border: 1px solid var(--edge); border-radius: 4px; padding: 2px 14px;
  font-family: var(--display); letter-spacing: 0.25em; text-transform: uppercase; font-size: 12px;
}
body.paused #paused-banner { display: block; }
#fatal { position: fixed; inset: 0; display: grid; place-items: center; background: #0c1f2e; color: var(--text); font-size: 18px; padding: 24px; z-index: 100; }
#fatal > div { max-width: 520px; display: flex; flex-direction: column; gap: 16px; }
#mn-files { margin-top: 8px; }
#mn-saves li .del svg.i { width: 15px; height: 15px; }

/* Observing: nobody plays, so no orders. */
.observer #pv-action, .observer #pv-recruit, .observer #pv-build, .observer #pv-diplo,
.observer #ar-buttons, .observer #fl-buttons, .observer .war-row .actions, .observer .terms,
.observer .faction button, .observer #fc-detail .buttons { display: none !important; }

/* A narrower window drops the bars that only repeat a number shown beside them. */
@media (max-width: 1400px) {
  .r .bar { width: 34px; }
  #modes { width: 300px; }
  #mode-buttons button { height: 30px; }
}
@media (max-width: 1200px) {
  #outliner { display: none; }
}
/* With a country panel open on the left, the province, army and fleet panels sit beside it. */
.country-open #province, .country-open #army, .country-open #fleet { left: 384px; }

/* ---------------------------------------------------------------- tabs, windows, menus */
.ptabs { display: flex; gap: 4px; padding: 6px 14px 0; border-bottom: 1px solid var(--line); }
.ptabs button, .wtabs button {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin-bottom: -1px;
  background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; color: var(--dim); font-weight: 700; font-size: 13.5px;
}
.ptabs button:hover, .wtabs button:hover { color: var(--text); }
.ptabs button.on, .wtabs button.on { color: var(--gold-2); background: #ffffff0a; border-color: var(--line); border-bottom: 1px solid #1a1510; }
.ptabs button svg.i, .wtabs button svg.i { width: 17px; height: 17px; }
.wtabs { display: flex; gap: 2px; padding: 6px 14px 0; border-bottom: 1px solid var(--line); }
.pane[hidden] { display: none !important; }
#country { width: min(1100px, calc(100vw - 24px)); height: min(760px, calc(100vh - var(--top-h, 52px) - 32px)); }
#country .pb { flex: 1; display: flex; flex-direction: column; }
#country .pane { min-height: 0; }
#country .pane[data-pane=focus] { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
#country .pane[data-pane=focus] .fc-body { flex: 1; }
#cw-flag, #dp-flag { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 1px 3px #000a; flex: none; }
#cw-flag svg, #dp-flag svg { width: 100%; height: 100%; display: block; }
.gov-head { display: flex; align-items: baseline; gap: 12px; }
.gov-head h3 { font-size: 15px; letter-spacing: 0.08em; color: var(--gold-2); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.cols .faction:first-child { border-top: 0; padding-top: 6px; }
#fx-ideas, #fx-gods, #fx-monuments { max-width: 640px; }
#fx-monuments .idea-group { font-size: 13px; margin: 6px 0 12px; }
#fx-monuments .idea-group > b { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; color: var(--gold-2); }
#fx-monuments .idea-group > i { display: block; margin-top: 2px; line-height: 1.35; }
#fx-monuments .idea-group button { display: flex; margin-top: 6px; }
#fx-ideas .buttons, #fx-gods .buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ideas { border-top: 0; }
#diplo { width: 460px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chips:empty { display: none; }
.chip { padding: 2px 9px; border-radius: 10px; background: #ffffff10; border: 1px solid #ffffff1c; font-size: 12.5px; font-weight: 700; }
.chip.good { color: var(--good); border-color: #8fc46f55; }
.chip.bad { color: var(--bad); border-color: #e0705a66; }
#dp-actions h3 { margin-top: 14px; }
#dp-actions .buttons { margin-top: 4px; }
.mini { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px; border-radius: 6px; background: #ffffff0f; border: 1px solid #ffffff22; font-size: 13px; font-weight: 700; }
.mini svg.i { width: 15px; height: 15px; color: var(--gold-2); }
.mini:hover { border-color: var(--edge); }
#ctx { min-width: 210px; padding: 4px; z-index: 30; display: flex; flex-direction: column; }
#ctx .ctx-head { display: flex; align-items: center; padding: 6px 10px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-family: var(--display); color: var(--gold-2); }
#ctx button { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; border-radius: 5px; background: none; text-align: left; font-size: 14px; }
#ctx button:hover { background: #ffffff12; }
#ctx button.danger { color: #ffb4a4; }
#ctx button.primary { background: none !important; color: var(--gold-2) !important; }
#ctx button svg.i { color: var(--gold-2); width: 16px; height: 16px; }

/* ---------------------------------------------------------------- event windows */
#fevent { top: 22%; transform: translateX(-50%); width: 460px; padding: 0 22px 18px; text-align: center; z-index: 26; align-items: center; animation: rise 0.25s ease-out; }
#fevent h2 { justify-content: center; font-size: 22px; margin-top: 6px; }
#fe-art { width: 96px; height: 96px; margin: -48px auto 4px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #4a3a22, #15100a 70%); border: 2px solid var(--gold); box-shadow: 0 0 0 4px #0009, 0 10px 30px #000c; color: var(--gold-2); }
#fe-options { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 10px; }
.fe-option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 12px; background: #0005 !important; border: 1px solid var(--gold) !important; color: var(--text) !important; }
.fe-option:hover { background: #d39a2c22 !important; }
.fe-option b { color: var(--gold-2); font-size: 15px; }
.fe-option i { font-size: 13px; line-height: 1.35; }
#fe-text { font-size: 14px; line-height: 1.45; margin: 6px 0 2px; text-align: left; }
.fc-text { font-size: 13px; line-height: 1.45; font-style: italic; color: var(--dim); margin: 6px 0 4px; }
.fe-option small { color: var(--dim); font-size: 13px; }
#event { top: 26%; transform: translateX(-50%); width: 440px; padding: 0 22px 18px; text-align: center; z-index: 25; align-items: center; animation: rise 0.25s ease-out; }
#event h2 { justify-content: center; font-size: 22px; margin-top: 6px; }
#ev-art { width: 96px; height: 96px; margin: -48px auto 4px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #4a3a22, #15100a 70%); border: 2px solid var(--gold); box-shadow: 0 0 0 4px #0009, 0 10px 30px #000c; color: var(--gold-2); }
#ev-art svg.i { width: 48px; height: 48px; stroke-width: 1.3; }
#event.bad #ev-art { border-color: var(--bad); color: #ffb4a4; }
#event.good #ev-art { border-color: var(--good); color: #c8eab0; }
#ev-text { font-size: 16px; margin: 10px 0 2px; }
#ev-buttons { justify-content: center; width: 100%; margin-top: 14px; }
#ev-buttons button { flex: 0 1 auto; min-width: 110px; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 10px); } }
.opt { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; }
.opt input { accent-color: var(--gold); }

#keys { width: min(860px, calc(100vw - 24px)); z-index: 22; }
#help { width: min(560px, calc(100vw - 24px)); z-index: 22; }
.help { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 14px; font-size: 14px; }
.help dt { font-family: var(--display); color: var(--gold-2); }
.help dd { margin: 0; }
#ky-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 28px; }
.kgroup h3 { margin-top: 6px; }
.krow { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 2px 0; }
kbd { min-width: 28px; padding: 1px 7px; border-radius: 5px; background: #ffffff12; border: 1px solid #ffffff2a; border-bottom-width: 2px; font: 700 12px 'Alegreya Sans', sans-serif; color: var(--gold-2); text-align: center; white-space: nowrap; }

/* Cities and sea names, sized in screen px through --u (one CSS px in map units). */
#places { pointer-events: none; }
#places g { display: none; }
#places.show-cities g.city, #places.show-seas g.sea { display: inline; }
#places.show-capitals g.capital { display: inline; }
#places circle { r: calc(var(--u) * 2.6px); fill: #f4ead1; stroke: #1d140b; stroke-width: calc(var(--u) * 1.2px); }
#places g.capital circle { r: calc(var(--u) * 4px); fill: var(--gold-2); stroke-width: calc(var(--u) * 1.6px); }
#places text { font: 600 calc(var(--u) * 12px) 'Alegreya Sans', sans-serif; fill: #1d140b; stroke: #f4ead1aa; stroke-width: calc(var(--u) * 2.5px); paint-order: stroke; text-anchor: middle; }
#places g.city text { transform: translateY(calc(var(--u) * -6px)); }
#places g.capital text { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 12.5px); }
#places g.sea text { font: italic 500 calc(var(--u) * 12.5px) 'Alegreya Sans', sans-serif; fill: #cfe2ec99; stroke: none; letter-spacing: 0.06em; }
#units .siege-mark { fill: none; stroke: #ffb4a4; stroke-width: 2; filter: drop-shadow(0 1px 2px #000); }
#units .siege-mark.blockade { stroke: #9cc8e8; }
#units .siege-mark.fallen { stroke: #fff; fill: #c0443acc; stroke-width: 1.6; }

/* Motion: panels slide or rise in as they open. */
.side { animation: slide-in 0.18s ease-out; }
.centre:not(#event) { animation: pop-in 0.16s ease-out; }
#right .panel, #toasts .toast { animation: pop-in 0.2s ease-out; }
@keyframes slide-in { from { opacity: 0; translate: -14px 0; } }
@keyframes pop-in { from { opacity: 0; translate: 0 8px; } }

/* ---------------------------------------------------------------- the start screen */
.start #top .res, .start #top .tabs, .start #top .sep, .start .clock > :not(#date):not(#menu-btn):not(#account-btn), .start #right, .start #alerts,
.start #paused-banner, .start #intro, .start #toasts { display: none !important; }
#start { left: 24px; top: calc(var(--top-h, 52px) + 24px); width: 380px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; animation: slide-in 0.25s ease-out; }
.st-title { display: flex; align-items: baseline; justify-content: space-between; }
.st-title b { font-family: var(--display); font-size: 30px; letter-spacing: 0.06em; color: var(--gold-2); }
.st-title span { font-family: var(--display); color: var(--dim); font-size: 16px; }
.st-dates { display: flex; gap: 4px; }
.st-dates button { font-family: var(--display); font-size: 15px; color: var(--dim); background: none; border: 1px solid transparent; border-radius: 3px; padding: 2px 6px; cursor: pointer; }
.st-dates button:hover { color: var(--text); }
.st-dates button.on { color: var(--gold-2); border-color: var(--line); }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.suggest button { display: flex; align-items: center; gap: 2px; padding: 4px 10px; border-radius: 14px; background: #ffffff0f; border: 1px solid #ffffff22; font-size: 13px; font-weight: 700; }
.suggest button:hover { border-color: var(--edge); }
#sv-card { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #0005; }
.sv-head { display: flex; gap: 12px; align-items: center; }
#sv-flag { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 2px 6px #000a; flex: none; }
#sv-flag svg { width: 100%; height: 100%; display: block; }
.sv-head h2 { font-size: 22px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-top: 12px; font-size: 14px; }
.stats div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.stats span { color: var(--dim); }
#start .buttons { margin-top: 0; }
#sv-play { padding: 10px; font-size: 16px; font-family: var(--display); letter-spacing: 0.08em; }

/* ---------------------------------------------------------------- the chronicle */
#chronicle { width: min(1080px, calc(100vw - 24px)); }
.cb-body { padding-top: 12px; }
.cb-book { display: flex; gap: 0; height: min(640px, calc(100vh - 220px)); border: 1px solid var(--paper-edge); border-radius: 4px; overflow: hidden; }
.cb-chapters { width: 230px; flex: none; overflow-y: auto; background: #00000040; border-right: 1px solid var(--paper-edge); padding: 6px 0; }
.cb-chapters button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 12px; border: 0; border-left: 3px solid transparent; background: none; color: var(--dim); text-align: left; cursor: pointer; font: inherit; }
.cb-chapters button b { font-family: var(--display); font-weight: 400; font-size: 14px; color: var(--text); }
.cb-chapters button small { font-size: 12px; color: var(--faint); }
.cb-chapters button:hover { background: #ffffff08; }
.cb-chapters button.on { border-left-color: var(--gold); background: #ffffff0d; }
.cb-chapters button.on b { color: var(--gold-2); }
.cb-score { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 8px; color: var(--dim); }
.cb-score svg.i { width: 30px; height: 30px; color: var(--gold); }
.cb-score b { font-family: var(--display); font-size: 26px; font-weight: 400; color: var(--gold-2); }
.cb-page { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 26px 26px; background: linear-gradient(90deg, var(--parchment-2), var(--parchment) 4%, var(--parchment)); color: var(--paper-ink); }
.cb-page h3 { margin: 0 0 12px; font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--paper-ink); border-bottom: 1px solid var(--paper-edge); padding-bottom: 6px; }
.cb-entries { list-style: none; margin: 0; padding: 0; }
.cb-entries li { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border-bottom: 1px solid #8a6b3a26; font-size: 15px; line-height: 1.4; }
.cb-entries li[data-province] { cursor: pointer; }
.cb-entries li[data-province]:hover { background: #8a6b3a1a; }
.cb-entries .cy { flex: none; width: 64px; font-family: var(--display); font-size: 12.5px; color: var(--paper-edge); }
.cb-entries svg.i { flex: none; width: 16px; height: 16px; align-self: center; color: var(--paper-edge); }
.cb-entries li.world .ct { font-style: italic; }
.cb-entries li.k-war svg.i, .cb-entries li.k-battle svg.i, .cb-entries li.k-capital_fell svg.i { color: #9a3b2a; }
.cb-entries li.k-peace svg.i, .cb-entries li.k-colony svg.i { color: #4f7a35; }
.cb-entries li.cm { align-items: flex-start; }
.cb-entries li.cm.ahead { opacity: 0.5; }
.cb-entries .cmt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cb-entries .cg { font-size: 13px; color: #5a4a33; }
.cb-entries .cv { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.cb-entries .cv svg.i { width: 14px; height: 14px; }
.cb-entries .cv.same { background: #4f7a35; color: var(--parchment); }
.cb-entries .cv.other { background: #9a3b2a; color: var(--parchment); }
#cb-summary { display: flex; gap: 22px; justify-content: center; padding: 4px 0 14px; }
#cb-summary .stat { display: flex; flex-direction: column; align-items: center; }
#cb-summary .stat b { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--gold-2); }
#cb-summary .stat span { font-size: 12.5px; color: var(--dim); }

/* ---------------------------------------------------------------- the ledger */
#ledger { width: min(1040px, calc(100vw - 24px)); }
.lg2-body { display: flex; gap: 18px; align-items: flex-start; }
#lg2-chart { flex: 1; min-width: 0; height: auto; aspect-ratio: 2; }
#lg2-chart .grid { stroke: #ffffff14; }
#lg2-chart .ax { fill: var(--dim); font: 12px 'Alegreya Sans', sans-serif; }
#lg2-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; opacity: 0.85; }
#lg2-chart .line.me { stroke-width: 4; opacity: 1; filter: drop-shadow(0 0 3px #000); }
#lg2-legend { list-style: none; margin: 0; padding: 0; width: 210px; font-size: 13.5px; }
#lg2-legend li { display: flex; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--line); }
#lg2-legend li span { flex: 1; }
#lg2-legend li.me { color: var(--gold-2); font-weight: 700; }

/* A bar centred on zero: the fill runs right of the middle when positive, left when negative. */
.bar.centred { position: relative; }
.bar.centred::after { content: ''; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: #ffffff55; }
.bar.centred i { position: absolute; top: 0; bottom: 0; border-radius: 0; background: var(--good); }
.bar.centred i.neg { background: var(--bad); }
.al .n { position: absolute; right: -5px; bottom: -4px; min-width: 17px; padding: 0 4px; border-radius: 9px; background: #0d0b09; box-shadow: 0 0 0 1px #ffffff33; color: var(--text); font: 800 11px/16px 'Alegreya Sans', sans-serif; font-style: normal; text-align: center; }

/* Units fade as the map zooms out, then go: only the map shows. */
#counters, #paths, #harbours { opacity: var(--units, 1); }
.units-hidden #counters, .units-hidden #harbours { display: none; }
#units .counter.neutral { opacity: 0.72; }
#units .counter.neutral .body { fill: #15100bcc; }

#ev-list { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; max-height: 40vh; overflow-y: auto; text-align: left; }
#ev-list:empty { display: none; }
#ev-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 14px; }
#ev-list li span { flex: 1; }
#ev-list li button { flex: none; padding: 3px 10px; border-radius: 6px; background: #ffffff0f; border: 1px solid #ffffff22; color: var(--text); font-weight: 700; font-size: 12.5px; }
#ev-list li button.primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
#ev-list li button.danger { color: #ffb4a4; }
#event { width: 480px; }

#modes { width: 320px; position: static; }
#mode-buttons { grid-template-columns: repeat(7, 1fr); }
#mode-more { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
#mode-more button { display: grid; place-items: center; height: 34px; padding: 0; border-radius: 6px; background: #ffffff0a; border: 1px solid #ffffff14; color: var(--gold-2); }
#mode-more button:hover { border-color: var(--edge); }
#mode-more button.on { background: var(--gold); border-color: var(--gold); color: var(--ink); }
#mode-more-btn.on { background: var(--gold) !important; color: var(--ink) !important; }

/* Options. The UI scale zooms the chrome, never the map. */
#top, .panel, #right, #bottom-right, #alerts, #toasts, #tip, #paused-banner { zoom: var(--ui, 1); }
#options { width: 420px; z-index: 22; }
.opts label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.opts select { font: inherit; padding: 4px 8px; border-radius: 6px; background: #0008; color: var(--text); border: 1px solid #ffffff22; }
.opts input { accent-color: var(--gold); width: 18px; height: 18px; }
#places[data-names=countries] g, #places[data-names=cities] g.sea { display: none !important; }
#right .panel, #bottom-right .panel { zoom: 1; }

/* The focus tree, full screen: parchment under the top bar, dragged and zoomed. */
#country.full { left: 0; right: 0; top: var(--top-h, 52px); bottom: 0; width: auto; height: auto; max-width: none; max-height: none;
  transform: none; translate: none; border-radius: 0; border-width: 0; animation: none; }
#country.full .pb { padding: 8px 18px 14px; }
#country.full #fc-tree { overflow: hidden; cursor: grab; position: relative; touch-action: none; }
#country.full #fc-tree.dragging { cursor: grabbing; }
#country.full .fc-grid { transform-origin: 0 0; margin: 0; position: absolute; left: 0; top: 0; }
#country.full #fc-detail { flex-basis: 340px; }

/* Action prompts: pills with an icon and a label, red when urgent, gold for chances. */
#alerts { flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 6px; pointer-events: none; }
#alerts > * { pointer-events: auto; }
#alerts .al { width: auto; height: 32px; border-radius: 16px; display: flex; align-items: center; gap: 7px; padding: 0 14px 0 9px; font-weight: 700; font-size: 13.5px; color: var(--text); animation: none; }
#alerts .al svg.i { width: 18px; height: 18px; }
#alerts .al.bad { background: linear-gradient(#5a1f16f2, #3a140ef2); border-color: #e0705a; }
#alerts .al.bad svg.i { color: #ffb4a4; }
#alerts .al.gold { background: #15100bf0; border-color: #d9b36a99; }
#alerts .al.gold svg.i { color: var(--gold-2); }
#alerts .al:hover { filter: brightness(1.15); }
#alerts .al .n { position: static; margin-left: 2px; }
#alerts .al.more { padding: 0 12px; color: var(--dim); cursor: default; }
/* Ordered today, happening when time runs. */
.idea-group.queued > b { color: var(--gold-2); }
#ev-list li.done span { color: var(--dim); }
#ev-list li.done b { color: var(--good); font-size: 12.5px; padding: 3px 4px; white-space: nowrap; }
#units .harbour { pointer-events: auto; cursor: pointer; }
#units .harbour:hover { opacity: 1; stroke: var(--gold-2); }

/* Flags: a country's shield in place of its colour swatch. */
.swatch.shield { background: none; box-shadow: none; border-radius: 50%; width: 15px; height: 15px; vertical-align: -3px; }
.swatch.shield svg, #flag svg, .flag-big svg { width: 100%; height: 100%; display: block; }
.fe-option:disabled { opacity: 0.42; }

/* A province's monument and its story. */
.pv-monument { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; font-size: 13px; color: var(--gold-2); }
.pv-monument .dim { color: var(--dim); }
.pv-monument .action { flex-basis: 100%; }
#pv-history { margin: 10px 0 0; font-size: 13px; line-height: 1.4; font-style: italic; color: var(--dim); }
#units .monument-mark { fill: none; stroke: var(--gold-2); stroke-width: 1.8; pointer-events: auto; cursor: pointer; }

/* ---------------------------------------------------------------- the country window */
#diplo.cwin { left: 0; top: var(--top-h, 52px); bottom: 0; width: min(660px, calc(100vw - 24px)); border-radius: 0 8px 8px 0; border-left: 0; display: flex; flex-direction: column; animation: slide-in 0.18s ease-out; z-index: 7; }
#dp-flag { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 6px; }
#dp-flag svg { width: 40px; height: 40px; }
.dp-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dp-title small { color: var(--dim); font-size: 13px; }
#diplo .pb { flex: 1; }
.dp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 6px; }
.kvs { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13.5px; }
.kvs span { color: var(--dim); }
.kvs b { text-align: right; font-weight: 700; }
.who-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.who-list button, .dp-war .sides button { display: inline-flex; align-items: center; gap: 0; padding: 2px 8px; border-radius: 12px; background: #ffffff0d; border: 1px solid #ffffff1c; font-size: 12.5px; font-weight: 700; }
.who-list button:hover, .dp-war .sides button:hover { border-color: var(--edge); }
.who-list .none { color: var(--faint); font-size: 12.5px; }
.dp-war { padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dp-war .sides { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dp-war .vs { color: var(--dim); margin: 0 4px; }
.dp-war .bar { margin-top: 4px; height: 5px; }
#dp-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
#dp-actions h3 { margin: 0 0 6px; }
#dp-actions .buttons { flex-direction: column; margin-top: 0; }
#dp-actions .buttons button { justify-content: flex-start; white-space: normal; text-align: left; }
#dp-province #province { position: static; width: auto; max-height: none; border: 0; box-shadow: none; background: none; backdrop-filter: none; animation: none; }
#dp-province #province .ph { display: none; }
.ov { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 20px; }
.ov h3 { margin-top: 10px; }
#overview { width: min(760px, calc(100vw - 24px)); }
#dp-province .owner .mini { display: none; }

/* ---------------------------------------------------------------- round 5: top bar groups, panel row */
.grp { display: flex; flex-direction: column; justify-content: center; padding: 0 6px; border-left: 1px solid var(--line); }
.grp:first-of-type { border-left: 0; }
.grp > small { font: 600 9.5px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); padding-left: 7px; margin-bottom: 1px; }
.grp .r { padding-top: 2px; padding-bottom: 2px; }
.r.empty { opacity: 0.45; }
.r.empty .bar { visibility: hidden; }
#panels { position: fixed; left: 12px; top: calc(var(--top-h, 52px) + 8px); display: flex; gap: 6px; z-index: 6; zoom: var(--ui, 1); }
#panels .tab { width: 38px; height: 38px; border-radius: 50%; background: #0d0b09e6; border: 1px solid #ffffff2a; box-shadow: 0 3px 10px #0009; }
#panels .tab:hover { border-color: var(--edge); }
#panels .tab.open { background: var(--gold); border-color: var(--gold); color: var(--ink); }
#panels .tab .count { bottom: -5px; right: -5px; }
.side { top: calc(var(--top-h, 52px) + 58px); max-height: calc(100vh - var(--top-h, 52px) - 70px); }
#diplo.cwin { top: calc(var(--top-h, 52px) + 54px); }
#alerts { transform: none; justify-content: flex-start; }
.start #panels { display: none; }

/* Paused shows in the clock: the date dims, the play button glows. */
#paused-banner { display: none !important; }
body.paused #date { opacity: 0.55; }
body.paused .btn.play { animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px #d9b36a44, 0 0 14px #d9b36a88; } }
#news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#news li { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 6px; background: #0d0b09d9; border: 1px solid #ffffff14; font-size: 12.5px; cursor: pointer; animation: pop-in 0.2s ease-out; transition: opacity 0.6s; }
#news li.gone { opacity: 0; }
#news li svg.i { width: 15px; height: 15px; flex: none; }
#news li.good svg.i { color: var(--good); }
#news li.bad svg.i { color: var(--bad); }
#news li .t { flex: 1; min-width: 0; }
#news li small { color: var(--faint); font-size: 11px; white-space: nowrap; }

/* Advances: a technology view, a row of tiles per line. */
.tech-line header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tech-line header svg.i { color: var(--gold-2); width: 20px; height: 20px; }
.tech-line header b { font-family: var(--display); font-size: 15px; color: var(--gold-2); letter-spacing: 0.06em; }
.tech-line header small { color: var(--dim); }
.tech-line header .bar { flex: 1; max-width: 320px; height: 6px; margin-left: 10px; }
.tech-line header em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--dim); }
.tech-line .tiles { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.tile { flex: 0 0 132px; display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 8px; background: #ffffff08; border: 1px solid #ffffff18; cursor: pointer; position: relative; }
.tile:hover { border-color: var(--edge); }
.tile .medal { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #0006; border: 1px solid #ffffff22; color: var(--dim); }
.tile .medal svg.i { width: 17px; height: 17px; }
.tile .medal .unlock { position: absolute; right: -6px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #0d0b09; font-style: normal; }
.tile .medal .unlock svg.i { width: 11px; height: 11px; stroke-width: 2.2; }
.tile b { font-size: 13px; line-height: 1.15; }
.tile .what { color: var(--dim); font-size: 11.5px; min-height: 28px; }
.tile .foot { margin-top: auto; font-size: 12px; font-weight: 700; color: var(--dim); }
.tile .foot button { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 5px; background: #ffffff0f; border: 1px solid #ffffff22; color: var(--text); font-weight: 700; font-size: 12px; }
.tile .foot button svg.i { width: 12px; height: 12px; color: var(--gold); }
.tile .foot button:disabled { opacity: 0.4; }
.tile.have { background: #d9b36a1c; border-color: #d9b36a66; }
.tile.have .medal { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.tile.have .foot { color: var(--gold-2); }
.tile.studying .medal { border: 2px solid var(--good); color: var(--good); }
.tile.studying .foot { color: var(--good); }
.tile.open { border-color: #d9b36a99; box-shadow: inset 0 0 0 1px #d9b36a44; }
.tile.open .foot button { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.tile.open .foot button svg.i { color: var(--ink); }
.tile.picked { outline: 2px solid var(--gold-2); outline-offset: 1px; }

#standings th.sortable { cursor: pointer; }
#standings th.sortable:hover { color: var(--gold-2); }
#standings tr.pinned td { position: sticky; top: 27px; z-index: 1; background: #2a2114; border-bottom: 1px solid var(--edge); }
#st-search { margin-left: auto; margin-right: 6px; width: 160px; font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 6px; background: #0008; color: var(--text); border: 1px solid #ffffff22; }

/* Laptop screens: values without bars or group labels, prompts as icons (their label in
   the tooltip), the prompts row starting after the panel buttons. */
@media (max-width: 1440px) {
  .r .bar, .grp > small { display: none; }
  .r { padding: 4px 5px; }
  #alerts .al > span { display: none; }
  #alerts .al { padding: 0 9px; }
  #right { width: 240px; }
}

/* ---------------------------------------------------------------- round 6: the realm screens, graphical */
.fxs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fx { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 5px; border-radius: 10px; background: #ffffff0e; border: 1px solid #ffffff1c; font-size: 12px; }
.fx svg.i { width: 13px; height: 13px; color: var(--gold); }
.fx b { font-weight: 700; color: var(--good); }

.idea-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.idea-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #ffffff09; border: 1px solid #ffffff1c; min-height: 104px; }
.idea-card header { display: flex; align-items: center; gap: 7px; }
.idea-card header svg.i { color: var(--gold-2); }
.idea-card header b { flex: 1; font-family: var(--display); font-size: 14px; color: var(--gold-2); }
.idea-card header small { color: var(--dim); font-weight: 700; }
.idea-card.empty { display: grid; place-items: center; border-style: dashed; color: var(--faint); background: none; }
.idea-card.queued { border-color: var(--edge); }
.idea-card > button { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; background: var(--gold); border: 0; color: var(--ink); font-weight: 700; font-size: 12px; }
.idea-card > button:disabled { background: #ffffff14; color: var(--dim); }
.idea-card > button svg.i { width: 13px; height: 13px; }
.pips { display: flex; gap: 6px; }
.pip { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #0006; border: 1px solid #ffffff22; color: var(--faint); }
.pip svg.i { width: 15px; height: 15px; }
.pip.on { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.pip.next { border-color: var(--gold-2); color: var(--gold-2); box-shadow: 0 0 0 3px #d9b36a33; }
.idea-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.idea-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 9px 10px; border-radius: 8px; background: #ffffff08; border: 1px solid #ffffff18; text-align: left; }
.idea-tile:hover { border-color: var(--edge); background: #ffffff12; }
.idea-tile > svg.i { color: var(--gold-2); }
.idea-tile b { font-size: 13.5px; }
.idea-tile .pip { width: 22px; height: 22px; }
.idea-tile .pip svg.i { width: 12px; height: 12px; }
#fx-ideas, #fx-gods { max-width: none; }

.pantheon { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.patron { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px; border-radius: 12px; background: #ffffff08; border: 1px solid #ffffff18; }
.patron > b { font-family: var(--display); font-size: 18px; color: var(--gold-2); }
.patron small { color: var(--dim); }
.patron .fxs { justify-content: center; }
.medal-god { display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--god) 75%, white), var(--god) 70%); border: 2px solid var(--gold); color: #120e09; font: 700 calc(1em) var(--display); box-shadow: 0 4px 14px #000a; }
.patron .medal-god { font-size: 42px; }
.gods { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 12px; }
.god { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 0; background: none; border-radius: 8px; }
.god .medal-god { font-size: 20px; border-width: 1px; }
.god small { font-size: 11.5px; color: var(--dim); text-align: center; }
.god.far { opacity: 0.4; }
.god.open { cursor: pointer; }
.god.open .medal-god { box-shadow: 0 0 0 3px #d9b36a55, 0 4px 14px #000a; }
.god.open:hover { background: #ffffff10; }
.peoples { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.peoples ul { list-style: none; margin: 0; padding: 0; font-size: 13px; min-width: 220px; }
.peoples li { display: flex; align-items: center; padding: 2px 0; }
.peoples li span { flex: 1; }

.council { width: 100%; max-width: 320px; display: block; margin: 0 auto 6px; }
#fx-list .faction { display: grid; grid-template-columns: 14px minmax(0, 1fr) 40px 120px 36px auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
#fx-list .faction .seat { color: var(--dim); text-align: right; }
#fx-list .faction em { font-style: normal; font-weight: 700; text-align: right; }
#fx-list .faction.in-power b { color: var(--gold-2); }
#fx-list .faction.unrest { box-shadow: inset 3px 0 0 var(--bad); }
.gauge { position: relative; height: 7px; border-radius: 4px; background: #0008; overflow: hidden; }
.gauge i { display: block; height: 100%; }
.gauge s { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--text); opacity: 0.8; }
#fx-list .faction button { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 6px; background: #ffffff10; border: 1px solid #ffffff22; color: var(--text); font-size: 12px; font-weight: 700; }
#fx-list .faction button svg.i { width: 13px; height: 13px; color: var(--gold); }
#fx-list .faction button:disabled { opacity: 0.4; }
.ruler-card { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #ffffff09; border: 1px solid #ffffff1c; }
.ruler-card .shield { grid-row: 1 / 3; width: 52px; height: 52px; display: grid; place-items: center; }
.ruler-card .shield svg { width: 52px; height: 52px; }
.ruler-card .who b { display: block; font-family: var(--display); font-size: 15px; color: var(--gold-2); }
.ruler-card .who small { color: var(--dim); }
.skills { display: flex; gap: 10px; }
.skill { display: inline-flex; align-items: center; gap: 2px; }
.skill svg.i { width: 13px; height: 13px; color: var(--gold); margin-right: 2px; }
.skill i { width: 6px; height: 6px; border-radius: 50%; background: #ffffff22; }
.skill i.on { background: var(--gold-2); }
#fx-ruler .heir, #fx-ruler .candidate { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 4px; }
#fx-ruler .heir svg.i { width: 15px; height: 15px; color: var(--dim); }
#fx-ruler .heir b, #fx-ruler .candidate b { flex: 1; font-weight: 500; }
#fx-ruler .heir.weak b, #fx-ruler .heir.none b { color: var(--bad); }
#fx-ruler .candidate em { font-style: normal; font-weight: 700; width: 40px; text-align: right; }
.stab { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.stab svg.i { width: 16px; height: 16px; color: var(--gold); }
.stab .bar { flex: 1; height: 7px; }
.stab b { width: 30px; text-align: right; }
.jars { display: flex; gap: 22px; justify-content: center; padding: 10px 0 4px; }
.jar { display: grid; justify-items: center; gap: 3px; }
.jar .glass { position: relative; width: 34px; height: 64px; border-radius: 8px 8px 12px 12px; background: #0008; border: 1px solid #ffffff2a; overflow: hidden; }
.jar .glass i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(var(--gold-2), var(--gold)); }
.jar > svg.i { color: var(--gold-2); width: 16px; height: 16px; }
.jar b { font-size: 14px; }
.jar small { color: var(--good); font-size: 11.5px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mon { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: #ffffff08; border: 1px solid #ffffff18; }
.mon.ours { border-color: var(--edge); }
.mon.built { background: #d9b36a14; }
.mon .art { position: relative; width: 64px; height: 64px; display: grid; place-items: center; color: var(--gold-2); }
.mon .art .ring { position: absolute; inset: 0; width: 64px; height: 64px; }
.mon > b { font-family: var(--display); font-size: 14px; color: var(--gold-2); cursor: help; }
.mon .where { color: var(--dim); font-size: 12px; display: flex; align-items: center; }
.mon .status { color: var(--dim); font-size: 12px; }
.mon > button { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; background: var(--gold); border: 0; color: var(--ink); font-weight: 700; font-size: 12.5px; }
.mon > button:disabled { background: #ffffff14; color: var(--dim); }
.mon > button svg.i { width: 13px; height: 13px; }

.league-board { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; padding: 10px 0; }
.league-board .circle { position: relative; width: 200px; height: 200px; }
.league-board .circle svg { position: absolute; inset: 0; }
.league-board .hub, .league-board .member { position: absolute; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; }
.league-board .hub { left: 100px; top: 100px; }
.league-board .swatch.big, .league-found .swatch.big { width: 56px; height: 56px; }
.league-board .member .swatch { width: 24px; height: 24px; margin: 0; }
.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ladder li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; color: var(--faint); font-size: 13.5px; }
.ladder .step { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #ffffff22; font-size: 11.5px; font-weight: 700; }
.ladder li.passed { color: var(--text); }
.ladder li.passed .step { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.ladder li.next, .ladder li.voting { color: var(--gold-2); font-weight: 700; }
.ladder li.next .step, .ladder li.voting .step { border-color: var(--gold-2); }
.ladder small { display: flex; align-items: center; gap: 6px; color: var(--dim); font-weight: 500; }
.ladder small .bar { position: relative; width: 80px; height: 6px; }
.ladder small .bar s { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--text); text-decoration: none; }
.league-found { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; border: 1px dashed var(--edge); }
.league-found button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 0; font-weight: 700; }
.league-others { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.league-others button { display: grid; grid-template-columns: 18px 140px 1fr 90px; align-items: center; gap: 8px; padding: 5px 6px; border: 0; background: none; border-radius: 6px; text-align: left; font-size: 13px; }
.league-others button:hover { background: #ffffff0d; }
.league-others .members { display: flex; flex-wrap: wrap; gap: 2px; }
.league-others .members .swatch { margin: 0; }
#lg-threat { display: flex; align-items: center; gap: 6px; color: var(--bad); }

/* Gods: a row per pantheon, a column per god known under several names. */
.patron { flex-direction: row; align-items: center; gap: 16px; text-align: left; margin-bottom: 14px; }
.patron > div b { display: block; font-family: var(--display); font-size: 18px; color: var(--gold-2); }
.patron > div small { color: var(--dim); }
.medal-god { color: #1a130b; font-size: 0; }
.medal-god svg { filter: drop-shadow(0 1px 0 #fff6); }
.god-grid { display: grid; grid-auto-rows: 74px; align-items: center; justify-items: center; position: relative; overflow-x: auto; }
.god-grid .pname { justify-self: start; font-family: var(--display); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); grid-column: 1; }
.god-grid .god { position: relative; z-index: 1; }
.god-grid .god small { font-size: 10.5px; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.god-grid .patron-cell .medal-god { box-shadow: 0 0 0 3px var(--gold-2), 0 4px 14px #000a; }
.god-line { align-self: stretch; justify-self: center; width: 2px; margin: 24px 0 30px; background: linear-gradient(#d9b36a55, #d9b36a99, #d9b36a55); z-index: 0; }
.god-grid .god small { position: relative; z-index: 2; padding: 0 4px; border-radius: 4px; background: #15110cee; color: var(--dim); }
.god-grid .god.far { opacity: 1; }
.god-grid .god.far .medal-god { opacity: 0.5; }
.god-grid .god.open small { color: var(--gold-2); }

.fx.neg b { color: var(--bad); }
.fx.word b { color: var(--text); font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fc-detail .fxs { margin: 2px 0 6px; }
.tile .what { min-height: 24px; }
.tile .medal { color: var(--gold-2); }
.idea-tile.shut { opacity: 0.45; }
.idea-tile.line-law > svg.i, .idea-card.line-law header svg.i { color: #e6c88a; }
.idea-tile.line-envoys > svg.i, .idea-card.line-envoys header svg.i { color: #8ac0e6; }
.idea-tile.line-arms > svg.i, .idea-card.line-arms header svg.i { color: #e69a8a; }
.idea-card.line-law { box-shadow: inset 0 2px 0 #e6c88a88; }
.idea-card.line-envoys { box-shadow: inset 0 2px 0 #8ac0e688; }
.idea-card.line-arms { box-shadow: inset 0 2px 0 #e69a8a88; }

/* Government: three columns, ruler, council, pools. */
.gov-head { align-items: center; margin-bottom: 8px; }
.gov-head > svg.i { width: 22px; height: 22px; color: var(--gold-2); }
.gov-head h3 { font-size: 18px; margin: 0; }
.gov-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.8fr); gap: 16px; }
.gov-grid > section { padding: 12px 14px; border-radius: 10px; background: #ffffff06; border: 1px solid #ffffff14; }
.gov-grid > section > h3 { margin: 0 0 10px; }
.stab-dial { display: flex; flex-direction: column; align-items: center; margin-top: 12px; }
.stab-dial svg { width: 150px; }
.stab-dial b { font-size: 18px; margin-top: -6px; }
.stab-dial b.bad { color: var(--bad); }
.gov-grid .jars { padding-top: 0; }
.gov-grid .pools .mini { display: flex; margin: 14px auto 0; }

/* Tribes: cohesion, raids, hosts, reforms. */
#cohesion .bar i { background: linear-gradient(90deg, #b03426, #d6782f, #e2b048, #f0d680); }
#cohesion .bar s { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--bad); text-decoration: none; }
#cohesion.bad b { color: var(--bad); }
.clans { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.clans .mini { margin-top: 4px; }
.clans .mini.danger { color: #ffb4a4; }
.clans .mini:disabled, .reform .mini:disabled { opacity: 0.42; }
.coh-dial b { display: inline-flex; align-items: center; gap: 5px; }
.coh-dial b svg.i { width: 16px; height: 16px; color: var(--gold); }
.coh-dial b small { font-size: 12px; font-weight: 600; color: var(--good); }
.coh-dial b small.bad { color: var(--bad); }
#fx-reforms-box { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
#fx-reforms-box > h3 { margin: 0 0 8px; }
.reforms { display: flex; flex-direction: column; gap: 8px; }
.reform { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 8px; background: #ffffff08; border: 1px solid #ffffff18; }
.reform.ready { border-color: var(--edge); }
.reform .rf-head { display: flex; align-items: center; gap: 6px; cursor: help; }
.reform .rf-head b { font-family: var(--display); font-size: 13.5px; color: var(--gold-2); }
.reform .mini { align-self: flex-start; margin-top: 0; }
.fx.missing { opacity: 0.5; }
.fx.missing b { color: var(--dim); }
.meter > span svg.i { width: 13px; height: 13px; color: var(--gold); vertical-align: -2px; }
.raid-head { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }
.raid-head > svg.i { width: 17px; height: 17px; color: var(--bad); }
.raid-head > b { font-family: var(--display); color: var(--gold-2); }
.raid .buttons button > svg.i { color: #ffb4a4; }
#pv-hire button.homeless { opacity: 0.42; }
#pv-hire button small .mark, #pv-hire button small i { vertical-align: -2px; }
#ctx button small { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--dim); }
#ctx button small svg.i { width: 12px; height: 12px; }
#ar-host svg.i { width: 16px; height: 16px; color: var(--gold-2); }
#units .counter .tag { display: none; }
#units .counter.host .tag, #units .counter.raiding .tag { display: inline; }
#units .counter .tag rect { fill: #15100bf2; stroke: var(--gold); stroke-width: 1; }
#units .counter.raiding .tag rect { stroke: var(--bad); }
#units .counter .tag text { font: 700 9.5px 'Alegreya Sans', sans-serif; fill: var(--gold-2); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
#units .counter.host .body { stroke: var(--gold); stroke-dasharray: 3 2; stroke-width: 1.5; }
#units .counter.raiding .body { stroke: var(--bad); stroke-dasharray: 3 2; stroke-width: 1.5; }
.dials { display: flex; justify-content: center; align-items: flex-start; gap: 6px; }
.dials > .stab-dial, .dials > .clans > .stab-dial { margin-top: 12px; }
.dials .stab-dial svg { width: 130px; }

/* The court: medallions by kind, empty slots dashed, a detail card, seeking and abroad rows. */
.court-head { margin-bottom: 10px; }
.court { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.court .seat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 10px; background: #ffffff08; border: 1px solid #ffffff18; color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.court .seat.on { border-color: var(--gold); background: #d9b36a14; }
.court .seat > b { font-family: var(--display); font-size: 13px; color: var(--gold-2); }
.court .seat > small { color: var(--dim); font-size: 11.5px; }
.court .seat.empty { cursor: default; background: none; border-style: dashed; border-color: #ffffff22; }
.court .seat.empty .medal { background: none; border: 1.5px dashed #ffffff30; }
.medal { --m: 52px; position: relative; flex: none; width: var(--m); height: var(--m); border-radius: 50%; display: grid; place-items: center; color: var(--gold-2); background: radial-gradient(circle at 35% 30%, #3a2e1e, #15100b); border: 1.5px solid #ffffff2a; box-shadow: inset 0 0 0 3px #0006; }
.medal.hist { border: 2px solid var(--gold); box-shadow: inset 0 0 0 3px #0006, 0 0 8px #d9b36a44; }
.medal .skill { position: absolute; right: -3px; bottom: -3px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: var(--ink); font: 800 11px 'Alegreya Sans', sans-serif; font-style: normal; display: grid; place-items: center; border: 1.5px solid #0d0b09; }
.fig-detail { margin-top: 12px; padding: 12px; border-radius: 10px; background: #ffffff08; border: 1px solid var(--edge); display: flex; flex-direction: column; gap: 8px; }
.fig-head { display: flex; align-items: center; gap: 12px; }
.fig-names { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fig-names b { font-family: var(--display); font-size: 16px; color: var(--gold-2); }
.fig-names small { color: var(--dim); font-size: 12px; }
.fig-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; }
.fig-facts > span { display: inline-flex; align-items: center; gap: 6px; }
.fig-facts small { color: var(--faint); }
.fig-text { margin: 0; color: var(--text); font-size: 13px; line-height: 1.45; font-style: italic; }
.fig-detail > button { align-self: flex-start; }
#fx-court h3 { margin: 14px 0 6px; font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--dim); letter-spacing: 0.04em; }
.fig-row { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; }
.fig-row.on, .fig-row:hover { background: var(--glass-2); }
.fig-row .medal { cursor: pointer; }
.fig-row .n { display: flex; flex-direction: column; flex: 1; min-width: 0; cursor: pointer; }
.fig-row .n b { color: var(--gold-2); font-size: 13.5px; }
.fig-row .n small { color: var(--dim); font-size: 11.5px; }
.fig-row .at { display: inline-flex; align-items: center; color: var(--dim); font-size: 12px; }
.fig-row .act { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; background: var(--gold); border: 0; color: var(--ink); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.fig-row .act:disabled { background: #ffffff14; color: var(--dim); }
.picker { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.picker .lbl { display: inline-flex; align-items: center; gap: 4px; color: var(--dim); }
.picker .lbl svg.i { color: var(--gold); width: 15px; height: 15px; }
.picker select { flex: 1; font: inherit; padding: 4px 8px; border-radius: 6px; background: #0008; color: var(--text); border: 1px solid #ffffff22; }
.picker b { color: var(--gold-2); }
#units .counter.commanded .plate { stroke: var(--gold-2); stroke-width: 1.8; }
/* Ruler traits, veteran regiments, treasuries and trophies. */
.traits { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.traits .trait { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ffffff10; border: 1px solid #ffffff22; color: var(--gold); }
.traits .trait.earned { border-color: var(--gold-2); color: var(--gold-2); }
.ruler-card .who .traits { margin: 3px 0 0; }
#ar-veterans .veteran, .treasury { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 0; }
#ar-veterans .veteran svg.i { width: 15px; height: 15px; color: var(--gold-2); }
#ar-veterans .veteran b, .treasury b { font-weight: 600; }
#ar-veterans .veteran small { color: var(--dim); margin-left: auto; }
.xp { display: inline-flex; gap: 2px; }
.xp i { width: 6px; height: 6px; border-radius: 50%; background: #ffffff22; }
.xp i.on { background: var(--gold-2); }
#units .counter .laurel { fill: none; stroke: var(--gold-2); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
#units .trophy-mark { fill: none; stroke: var(--gold-2); stroke-width: 1.8; pointer-events: auto; cursor: pointer; }
/* Crises: cards with a progress ring and a stage track, claimants, exiles, ostracism. */
.crises { display: flex; flex-direction: column; gap: 14px; }
.mon.cr .art svg.i.big { width: 30px; height: 30px; }
.mon.cr.worse { border-color: #e0705a88; }
.mon.cr.worse .art { color: var(--bad); }
.cr-track { display: flex; gap: 3px; }
.cr-track span { flex: 1; min-width: 0; padding: 2px 4px; border-radius: 4px; background: #ffffff10; color: var(--dim); font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.cr-track span.past { background: #d9b36a26; }
.cr-track span.on { background: var(--gold); color: var(--ink); font-weight: 700; }
.mon.cr.worse .cr-track span.on { background: var(--bad); color: #fff; }
.cr-list .meter { grid-template-columns: 160px 1fr 50px; cursor: help; }
.cr-exile { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 4px 0; cursor: help; }
.cr-exile svg.i { color: var(--gold-2); }
.cr-exile small { color: var(--dim); display: flex; align-items: center; gap: 4px; margin-left: auto; }
.cr-ostracism { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cr-ostracism h3 { flex-basis: 100%; }
.cr-ostracism button, .mon.cr > button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; background: var(--gold); border: 0; color: var(--ink); font-weight: 700; font-size: 12.5px; }
.cr-ostracism button:disabled { background: #ffffff14; color: var(--dim); }
.cr-ostracism button svg.i { width: 13px; height: 13px; }
.cr-ostracism button small { display: inline-flex; align-items: center; gap: 2px; font-weight: 400; }

/* Unit and ship buttons: the name on its own line, what it costs under it, so no name is cut. */
#pv-recruit button, #pv-build button { flex-wrap: wrap; row-gap: 1px; padding: 5px 8px; }
#pv-recruit button > span, #pv-build button > span { flex: 1; }
#pv-recruit button small, #pv-build button small { flex-basis: 100%; margin-left: 23px; }

/* Polish: the ruler's traits clear the age; an heir's pips wrap under the name; no empty council. */
.ruler-card .who .traits { margin: 0 0 0 8px; }
#fx-ruler .heir { flex-wrap: wrap; row-gap: 4px; }
#fx-ruler .heir .skills { flex-basis: 100%; padding-left: 23px; }
.gov-grid:has(#fx-list:empty) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.gov-grid > section:has(> #fx-list:empty) { display: none; }
.court .seat.empty { justify-content: center; }
.court .seat.empty .medal { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: none; box-shadow: none; border: 1.5px dashed #ffffff38; color: #ffffff55; font-size: 22px; font-weight: 300; }
#fx-court .fig-row { max-width: 620px; }
#pv-recruit button, #pv-build button { justify-content: flex-start; text-align: left; }

/* War and peace windows: a row per enemy. */
#ev-list .foe { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
#ev-list .foe .sh { flex: none; width: 34px; height: 34px; }
#ev-list .foe .sh svg { width: 34px; height: 34px; }
#ev-list .foe .nm { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#ev-list .foe .nm b { font-family: var(--display); color: var(--gold-2); font-size: 14.5px; }
#ev-list .foe .nm small { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ev-list .foe .vs { flex: none; width: 90px; height: 8px; border-radius: 4px; background: #c0503c; overflow: hidden; }
#ev-list .foe .vs i { display: block; height: 100%; background: var(--good); }
#ev-list .foe em { flex: none; width: 38px; text-align: right; font-style: normal; font-weight: 700; color: var(--dim); }
#ev-list .foe em.good { color: var(--good); } #ev-list .foe em.bad { color: var(--bad); }

/* The court as a hall: seats in an arc over the throne; portrait cards below. */
.court-top { display: flex; gap: 16px; align-items: flex-start; }
.hall { position: relative; flex: 1; min-width: 0; height: 250px; max-width: 640px; border-radius: 12px; background: radial-gradient(ellipse at 50% 92%, #d9b36a1f, transparent 62%), #ffffff05; border: 1px solid #ffffff12; }
.hall .throne { position: absolute; left: 50%; top: 78%; width: 58px; height: 58px; transform: translate(-50%, -50%); filter: drop-shadow(0 0 10px #d9b36a55); }
.hall .throne svg { width: 58px; height: 58px; }
.hall .seat { position: absolute; transform: translate(-50%, -50%); width: 104px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.hall .seat:hover .medal, .hall .seat.on .medal { border-color: var(--gold-2); box-shadow: inset 0 0 0 3px #0006, 0 0 10px #d9b36a77; }
.hall .seat > b { font-family: var(--display); font-size: 12.5px; color: var(--gold-2); line-height: 1.1; }
.hall .seat > small { color: var(--dim); font-size: 11px; }
.hall .seat.empty { cursor: default; }
.hall .seat.empty .medal { display: grid; place-items: center; background: none; box-shadow: none; border: 1.5px dashed #ffffff38; color: #ffffff55; font-size: 22px; font-weight: 300; }
.court-top .fig-detail { margin-top: 0; flex: 0 0 300px; }
.portraits { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.portrait { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #ffffff07; border: 1px solid #ffffff14; }
.portrait.on { border-color: var(--gold); }
.portrait .ring { --c: 0%; position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold-2) var(--c), #ffffff14 0); cursor: pointer; }
.portrait .ring.plain { background: none; }
.portrait .ring .pct { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); padding: 0 5px; border-radius: 7px; background: #0d0b09; color: var(--gold-2); font: 700 10.5px 'Alegreya Sans', sans-serif; font-style: normal; }
.portrait .n { display: flex; flex-direction: column; flex: 1; min-width: 0; cursor: pointer; }
.portrait .n b { color: var(--gold-2); font-family: var(--display); font-size: 13.5px; }
.portrait .n small { color: var(--dim); font-size: 11.5px; }
.portrait .n .at { display: inline-flex; align-items: center; margin-top: 2px; }
.portrait .act { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; background: var(--gold); border: 0; color: var(--ink); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.portrait .act:disabled { background: #ffffff14; color: var(--dim); }

/* Crises: a wide row each, the stages as stairs with a marker. */
.cr-row { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #ffffff07; border: 1px solid #ffffff16; }
.cr-row.worse { border-color: #e0705a66; background: linear-gradient(90deg, #5a1f1622, #ffffff05); }
.cr-row > .art { position: relative; flex: none; width: 64px; height: 64px; display: grid; place-items: center; color: var(--gold-2); }
.cr-row.worse > .art { color: var(--bad); }
.cr-row > .art .ring { position: absolute; inset: 0; }
.cr-row > .art svg.i.big { width: 30px; height: 30px; }
.cr-row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cr-row .hd { display: flex; align-items: baseline; gap: 12px; }
.cr-row .hd b { font-family: var(--display); font-size: 16px; color: var(--gold-2); }
.cr-row .hd .where { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); cursor: help; }
.cr-row .hd .swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cr-stairs { width: 100%; max-width: 560px; height: 64px; cursor: help; }
.cr-stairs text { font: 600 11px 'Alegreya Sans', sans-serif; fill: var(--dim); }
.cr-stairs text.on { fill: var(--ink); font-weight: 800; }
.cr-row.worse .cr-stairs text.on { fill: #fff; }
.cr-row .ft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cr-row .ft > button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; background: var(--gold); border: 0; color: var(--ink); font-weight: 700; font-size: 12.5px; }
.cr-row .ft > button:disabled { background: #ffffff14; color: var(--dim); }

/* The chronicle as a book: a gutter down the left of the page, an ornamented head with the
   state's shield, a drop cap, entries marked gold where they went well and red where ill. */
.cb-page { background: linear-gradient(90deg, #8a6b3a55 0, #8a6b3a1a 18px, transparent 40px), radial-gradient(ellipse at 60% 40%, var(--parchment) 55%, var(--parchment-2)); padding: 22px 38px 30px 46px; }
.cb-page h3 { display: flex; align-items: center; gap: 12px; text-align: left; border-bottom: 0; padding-bottom: 10px; margin-bottom: 16px; background: linear-gradient(90deg, transparent, #8a6b3a88 20%, #8a6b3a88 80%, transparent) bottom / 100% 1px no-repeat; letter-spacing: 0.06em; }
.cb-page h3 .cb-shield { flex: none; width: 40px; height: 40px; }
.cb-page h3 .cb-shield svg { width: 40px; height: 40px; }
.cb-entries li { position: relative; border-bottom: 0; padding: 5px 0 5px 10px; }
.cb-entries li::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: transparent; }
.cb-entries li.win::before { background: #b8862a; }
.cb-entries li.loss::before { background: #9a3b2a; }
.cb-entries li.win svg.i { color: #a0721e; }
.cb-entries li.loss svg.i { color: #9a3b2a; }
.cb-entries li.loss .ct { color: #6e2a1e; }
.cb-entries li:first-child .ct::first-letter { float: left; font-family: var(--display); font-size: 2.7em; line-height: 0.85; margin: 3px 6px 0 0; color: #7a2a1e; }

/* Standings: medals for the first three, arrows for a year's change, score as a bar. */
#st-rows td.place { white-space: nowrap; }
#st-rows td.place span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; }
#st-rows td.place .medal-1 { background: radial-gradient(circle at 35% 30%, #fbe39a, #c9962e); color: #2a1d08; font-weight: 800; }
#st-rows td.place .medal-2 { background: radial-gradient(circle at 35% 30%, #f1f1ee, #9da2a6); color: #22252a; font-weight: 800; }
#st-rows td.place .medal-3 { background: radial-gradient(circle at 35% 30%, #f0b88a, #a2643a); color: #2a1608; font-weight: 800; }
#st-rows td.place i { font-style: normal; font-size: 10.5px; font-weight: 700; margin-left: 3px; }
#st-rows td.place i.up { color: var(--good); } #st-rows td.place i.down { color: var(--bad); }
#st-rows td.score { white-space: nowrap; }
#st-rows td.score .sbar { display: inline-block; vertical-align: middle; width: 70px; height: 6px; margin-right: 8px; border-radius: 3px; background: #ffffff12; overflow: hidden; }
#st-rows td.score .sbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }

/* Province military: Raise and Hire as sub-tabs; locked units folded; mercenary cards. */
.subtabs { display: flex; gap: 4px; padding: 3px; margin: 2px 0 6px; border-radius: 8px; background: #0005; }
.subtabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 8px; border: 0; border-radius: 6px; background: none; color: var(--dim); font: inherit; font-weight: 700; font-size: 13px; }
.subtabs button svg.i { width: 15px; height: 15px; }
.subtabs button.on { background: #ffffff14; color: var(--gold-2); }
.sub-off { display: none !important; }
.buttons.grid button.fold { grid-column: 1 / -1; justify-content: center; color: var(--dim); background: none; border-style: dashed; font-weight: 600; }
.mercs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 6px; }
.mercs:empty { display: none; }
.merc { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: #ffffff08; border: 1px solid #ffffff1c; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.merc:hover:not(:disabled) { border-color: var(--gold); }
.merc:disabled { opacity: 0.5; cursor: default; }
.merc.homeless { opacity: 0.42; }
.merc .sh { flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--gold-2); }
.merc .sh svg { width: 34px; height: 34px; }
.merc .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.merc .nm b { font-family: var(--display); font-size: 13.5px; color: var(--gold-2); }
.merc .nm small { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merc em { flex: none; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-weight: 700; }
.merc em svg.i { width: 13px; height: 13px; color: var(--gold); }
.hall.small { height: 180px; }

/* Panel buttons in two groups, the realm's and the world's, each on a faint plate. */
#panels { gap: 12px; }
#panels .pgrp { display: flex; gap: 5px; padding: 3px; border-radius: 24px; background: #0d0b0966; border: 1px solid #ffffff12; }

/* Army head: the commander as a medallion with skill pips, the regiments as tokens. */
.unit-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.unit-head .cmd { display: flex; align-items: center; gap: 10px; }
.unit-head .cmd .medal { --m: 44px; }
.unit-head .cmd .medal svg { width: 30px; height: 30px; }
.unit-head .cmd .medal.none { background: none; box-shadow: none; border: 1.5px dashed #ffffff30; }
.unit-head .cmd .who { display: flex; flex-direction: column; gap: 4px; }
.unit-head .cmd .who b { font-family: var(--display); font-size: 14px; color: var(--gold-2); }
.unit-head .cmd .medal.none + .who b { color: var(--dim); font-family: inherit; font-weight: 500; }
.unit-head .pips { display: flex; gap: 3px; }
.unit-head .pips i { width: 7px; height: 7px; border-radius: 50%; background: #ffffff22; }
.unit-head .pips i.on { background: var(--gold-2); }
.unit-head .tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-head .token { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 14px; background: #ffffff0c; border: 1px solid #ffffff1e; cursor: help; }
.unit-head .token svg.i { width: 15px; height: 15px; color: var(--gold); }
.unit-head .token b { font-size: 14px; }
.unit-head .token small { color: var(--dim); font-size: 12px; }

/* Province banner: terrain colours and outline, the owner's shield, icons, development pips. */
.pv-banner { position: relative; height: 64px; margin: -4px 0 8px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: linear-gradient(180deg, #2a3a46, #46525a); border: 1px solid #ffffff1a; }
.pv-banner.t-plains { background: linear-gradient(180deg, #5d7a8c, #93a982); }
.pv-banner.t-hills { background: linear-gradient(180deg, #5f7686, #a19672); }
.pv-banner.t-mountains { background: linear-gradient(180deg, #56677a, #8a8079); }
.pv-banner.t-arid { background: linear-gradient(180deg, #8a8a86, #d3b679); }
.pv-banner.t-wasteland { background: linear-gradient(180deg, #5a5a5c, #9a9182); }
.pv-banner.t-sea { background: linear-gradient(180deg, #2c5a7a, #1d3c56); }
.pv-banner .sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-banner .sky path { fill: #0d0b09; opacity: 0.38; }
.pv-banner .bshield { position: relative; flex: none; width: 46px; height: 46px; filter: drop-shadow(0 2px 4px #0008); }
.pv-banner .bshield svg { width: 46px; height: 46px; }
.pv-banner .bchips { position: relative; display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.pv-banner .bchip { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px; border-radius: 12px; background: #0d0b09b3; color: var(--text); cursor: help; }
.pv-banner .bchip svg.i { width: 14px; height: 14px; color: var(--gold-2); }
.pv-banner .bchip b { font-size: 12.5px; }
.pv-banner .devpips { position: relative; display: flex; gap: 3px; padding: 5px 7px; border-radius: 12px; background: #0d0b09b3; cursor: help; }
.pv-banner .devpips i { width: 8px; height: 8px; border-radius: 2px; background: #ffffff24; }
.pv-banner .devpips i.on { background: var(--gold-2); }
.pv-banner .devpips i.over { background: var(--bad); }
#pv-facts:empty { display: none; }

/* Event log: an icon for the kind, the other state's shield; ours in gold, losses red; filters. */
#log-filter { display: flex; gap: 4px; padding: 0 12px 6px; }
#events.folded #log-filter { display: none; }
#log-filter button { flex: 1; height: 24px; display: grid; place-items: center; border-radius: 6px; border: 1px solid #ffffff18; background: #ffffff08; color: var(--dim); }
#log-filter button svg.i { width: 14px; height: 14px; }
#log-filter button.on { background: #d9b36a26; border-color: var(--gold); color: var(--gold-2); }
#log li { display: flex; align-items: flex-start; gap: 6px; }
#log li .lk { flex: none; display: grid; place-items: center; width: 16px; height: 18px; color: var(--faint); }
#log li .lk svg.i { width: 13px; height: 13px; }
#log li .lsh { flex: none; width: 18px; height: 18px; }
#log li .lsh svg { width: 18px; height: 18px; }
#log li .lt { flex: 1; min-width: 0; }
#log li.mine { color: var(--gold-2); }
#log li.mine .lk, #log li.good .lk { color: var(--gold); }
#log li.bad .lk { color: var(--bad); }
#log[data-f="war"] li:not([data-k="war"]), #log[data-f="diplo"] li:not([data-k="diplo"]), #log[data-f="court"] li:not([data-k="court"]) { display: none; }

/* An oracle's answer: the god's medallion, the words on a scroll. */
#fevent.oracle .god-medal { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: #2a1d08; background: radial-gradient(circle at 35% 30%, #fbe39a, #c9962e 70%, #8a6420); box-shadow: inset 0 0 0 3px #0003, 0 0 0 2px #5a3f1a, 0 0 18px #d9b36a66; }
#fe-text.scroll { position: relative; margin: 6px 4px; padding: 16px 22px; border-radius: 4px; background: linear-gradient(90deg, #c9b07e, var(--parchment) 8%, var(--parchment) 92%, #c9b07e); color: var(--paper-ink); font-style: italic; font-size: 15px; line-height: 1.5; box-shadow: 0 2px 6px #0006; }
#fe-text.scroll::before, #fe-text.scroll::after { content: ''; position: absolute; left: -4px; right: -4px; height: 8px; border-radius: 4px; background: linear-gradient(#a8895a, #6e5532); }
#fe-text.scroll::before { top: -5px; } #fe-text.scroll::after { bottom: -5px; }

.shrine { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.favour-ring { position: relative; flex: none; width: 64px; height: 64px; display: grid; place-items: center; cursor: help; }
.favour-ring svg { position: absolute; inset: 0; width: 64px; height: 64px; }
.favour-ring b { position: relative; font-size: 15px; color: var(--gold-2); margin-top: 10px; }
.favour-ring svg.i { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; color: var(--gold); inset: auto; }

/* Action prompts as round icons: the label in the tooltip, a count badge; urgent ones pulse. */
#alerts .al { width: 38px; height: 38px; padding: 0; border-radius: 50%; justify-content: center; position: relative; box-shadow: 0 3px 10px #0009; }
#alerts .al > span { display: none; }
#alerts .al svg.i { width: 19px; height: 19px; }
#alerts .al .n { position: absolute; right: -5px; bottom: -5px; min-width: 17px; height: 17px; margin: 0; padding: 0 4px; border-radius: 9px; background: var(--gold); color: var(--ink); font: 800 11px/17px 'Alegreya Sans', sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px #0d0b09; }
#alerts .al.bad .n { background: var(--bad); color: #fff; }
#alerts .al.bad { animation: al-pulse 1.8s ease-in-out infinite; }
#alerts .al.more { width: auto; min-width: 38px; padding: 0 8px; border-radius: 19px; }
@keyframes al-pulse { 0%, 100% { box-shadow: 0 0 0 0 #e0705a00, 0 3px 10px #0009; } 50% { box-shadow: 0 0 0 6px #e0705a44, 0 3px 10px #0009; } }
@media (prefers-reduced-motion: reduce) { #alerts .al.bad { animation: none; } }

/* Top bar: each capped resource a small upright gauge beside its number, filling from the
   bottom (the bar turned on its end); the treasury's monthly change as an arrow. */
#top .r .stack { flex-direction: row-reverse; align-items: center; gap: 6px; }
#top .r .stack .bar { width: 22px; height: 7px; margin: 0 -6px; transform: rotate(-90deg); border-radius: 3px; background: #ffffff1c; box-shadow: inset 0 0 0 1px #ffffff14; }
#top .r .stack .bar i { border-radius: 3px; }
#silver small { font-size: 11.5px; letter-spacing: -0.02em; }
@media (max-width: 1440px) { #top .r .stack .bar { display: block; } #alerts .al { padding: 0; } }

/* Diplomacy: a stance dial beside the ties; actions as round icons in three groups. */
.dp-stand { display: flex; align-items: center; gap: 14px; }
#dp-dial { flex: none; display: flex; flex-direction: column; align-items: center; width: 92px; }
#dp-dial svg { width: 92px; height: 52px; }
#dp-dial b { font-size: 12.5px; margin-top: -4px; }
#dp-actions .buttons { flex-direction: row; flex-wrap: wrap; gap: 8px; }
#dp-actions .buttons button.act-icon { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; }
#dp-actions .buttons button.act-icon svg.i { width: 20px; height: 20px; color: var(--gold-2); }
#dp-actions .buttons button.act-icon.primary { background: var(--gold); border-color: var(--gold); }
#dp-actions .buttons button.act-icon.primary svg.i { color: var(--ink); }
#dp-actions .buttons button.act-icon.danger svg.i { color: #ffb4a4; }
#dp-actions .buttons button.act-icon:disabled { opacity: 0.35; }
#dp-actions > div { padding: 8px 10px; border-radius: 12px; background: #ffffff06; border: 1px solid #ffffff12; }

/* Start screen: culture chips over a grid of state cards, each with its shield and a ring
   for how hard it plays. */
#start { width: 440px; max-height: calc(100vh - var(--top-h, 52px) - 48px); }
#sv-suggest { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.cfilter { display: flex; flex-wrap: wrap; gap: 4px; }
.cfilter .cf { padding: 3px 10px; border-radius: 12px; background: #ffffff0c; border: 1px solid #ffffff1c; color: var(--dim); font-size: 12.5px; font-weight: 700; }
.cfilter .cf.on { background: #d9b36a26; border-color: var(--gold); color: var(--gold-2); }
.scards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow-y: auto; max-height: 38vh; padding-right: 2px; }
.scard { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #ffffff08; border: 1px solid #ffffff16; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.scard:hover { border-color: var(--edge); }
.scard.on { border-color: var(--gold); background: #d9b36a1c; }
.scard .sh { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
.scard .sh svg { width: 30px; height: 30px; }
.scard .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.scard .nm b { font-family: var(--display); font-size: 13px; color: var(--gold-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scard .nm small { color: var(--dim); font-size: 11px; }
.scard .dring { flex: none; width: 22px; height: 22px; }

/* The start screen as a solid sidebar the height of the screen: title and dates, culture
   tabs, the states as cards filling the middle, the picked state and Play pinned below. */
#start { left: 0; top: var(--top-h, 52px); bottom: 0; width: 470px; max-height: none; padding: 20px 22px 18px; gap: 14px; border-radius: 0; border-width: 0 1px 0 0; background: linear-gradient(180deg, #17120d, #0f0c09); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 8px 0 30px #000a; }
#start .st-title { align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#sv-suggest { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.cfilter { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; }
.cfilter .cf { height: 28px; padding: 0 6px; border-radius: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scards { flex: 1; min-height: 0; max-height: none; grid-auto-rows: 54px; align-content: start; gap: 6px; }
.scard { height: 54px; }
.st-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
#sv-card { padding: 12px 14px; border-radius: 10px; background: #ffffff07; border: 1px solid #ffffff16; }
#sv-card .sv-head h2 { font-size: 20px; }
#sv-stats.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; font-size: 13.5px; }
#sv-stats .tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border: 0; border-radius: 8px; background: #0006; cursor: help; }
#sv-stats .tile svg.i { width: 17px; height: 17px; color: var(--gold); }
#sv-stats .tile b { font-size: 14px; }
#sv-stats .tile.d-easy b { color: #8fc46f; } #sv-stats .tile.d-normal b { color: #e0b04a; } #sv-stats .tile.d-hard b { color: #e0705a; }
.st-play { display: flex; align-items: center; gap: 12px; }
.st-play .opt { flex: none; margin: 0; }
.st-play #sv-play { flex: 1; }
.st-more { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-more button { padding: 7px; border-radius: 6px; background: #ffffff0f; border: 1px solid #ffffff22; color: var(--text); font-weight: 700; }
.st-more button:hover { border-color: var(--edge); }
#sv-play { border-radius: 6px; border: 1px solid var(--gold); cursor: pointer; }
.cfilter { flex: none; grid-auto-rows: 28px; align-content: start; }
.cfilter .cf { display: flex; align-items: center; justify-content: center; }
#sv-suggest { flex-wrap: nowrap; }
.scards { min-height: 120px; }
@media (max-height: 860px) { #sv-card .sv-head { display: none; } #start { gap: 10px; padding-block: 14px 12px; } }

/* State cards: a front (shield, name, difficulty in five lit segments) and a back shown on
   hover (aim, neighbours' shields, power, development and income as bars). */
.scard { position: relative; display: block; padding: 0; perspective: 600px; background: none; border: 0; }
.scard .face { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #1e1812; border: 1px solid #ffffff16; backface-visibility: hidden; transition: transform 0.35s ease; }
.scard .back { transform: rotateY(180deg); flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; padding: 4px 10px; }
.scard:hover .front { transform: rotateY(-180deg); }
.scard:hover .back { transform: rotateY(0); }
.scard.on .face { border: 2px solid var(--gold-2); box-shadow: 0 0 0 1px #0d0b09, 0 0 14px #d9b36a66; background: #2a2116; }
.scard .dring { flex: none; width: 30px; height: 30px; }
.scard .dring text { font: 800 10px 'Alegreya Sans', sans-serif; fill: var(--text); }
.scard .aim { font-size: 11.5px; font-weight: 700; color: var(--gold-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard .near { display: flex; gap: 2px; height: 14px; }
.scard .near i { width: 14px; height: 14px; }
.scard .near i svg { width: 14px; height: 14px; }
.scard .sbars { display: flex; gap: 6px; }
.scard .sb { flex: 1; display: flex; align-items: center; gap: 3px; }
.scard .sb svg.i { width: 11px; height: 11px; color: var(--gold); flex: none; }
.scard .sb .bar { flex: 1; height: 4px; }
@media (prefers-reduced-motion: reduce) { .scard .face { transition: none; } }
#sv-stats .tile.d-easiest b { color: #6fbf5a; } #sv-stats .tile.d-hardest b { color: #d9483a; }
#sv-stats .tile.d-easy b { color: #a6c95a; } #sv-stats .tile.d-hard b { color: #e0803a; }
.scard.on { background: none; }

#start-ring { fill: none; stroke: var(--gold-2); stroke-width: 5; filter: drop-shadow(0 0 6px #d9b36acc) drop-shadow(0 1px 2px #000); animation: ring-pulse 2s ease-in-out infinite; }
@keyframes ring-pulse { 50% { stroke-width: 7; } }
@media (prefers-reduced-motion: reduce) { #start-ring { animation: none; } }

/* Wars in the right column as tugs of war: our shield, a rope with a knot, theirs, score. */
.tug { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 12px; cursor: pointer; }
.tug:hover { background: #ffffff08; }
.tug .sh { flex: none; width: 20px; height: 20px; }
.tug .sh svg { width: 20px; height: 20px; }
.tug .rope { position: relative; flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #8fc46f66, #a8977a55 50%, #e0705a66); }
.tug .knot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--dim); box-shadow: 0 0 0 2px #0d0b09; }
.tug .knot.good { background: var(--good); } .tug .knot.bad { background: var(--bad); }
.tug b { flex: none; width: 34px; text-align: right; font-size: 13px; color: var(--dim); }
.tug b.good { color: var(--good); } .tug b.bad { color: var(--bad); }
.tug .offer { position: absolute; right: 2px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 6px var(--gold-2); }

/* Map mode strip: big icons; the legend above as swatches only, each named in its tooltip. */
#modes .mode-head { display: none; }
#modes #legend { gap: 5px; margin: 0 0 8px; padding: 0; }
#modes #legend li { cursor: help; }
#modes #legend i { width: 22px; height: 16px; margin: 0; border-radius: 3px; }
#mode-buttons button { height: 44px; }
#mode-buttons svg.i { width: 22px; height: 22px; }

/* One frame for every window: a solid dark plate, a gold hairline, a header rule. */
:root { --glass: #120e0bfa; }
.panel { background: linear-gradient(180deg, #17120d, #100d0a); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #d9b36a55; box-shadow: 0 0 0 1px #0d0b09, 0 14px 40px #000c; }
.panel > .ph { border-bottom: 1px solid #d9b36a2e; }

/* ---------------------------------------------------------------- economy tab */
.econ { display: flex; flex-direction: column; gap: 7px; }
.econ:empty { display: none; }
.ec-silver { display: flex; align-items: center; gap: 8px; }
.ec-silver > svg.i { color: var(--gold-2); }
.ec-silver > b { font-size: 18px; font-weight: 800; color: var(--gold-2); min-width: 38px; }
.ec-stack { flex: 1; display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #0009; box-shadow: inset 0 0 0 1px #ffffff14; }
.ec-stack i { display: block; height: 100%; }
.k-tax { --k: var(--gold); }
.k-trade { --k: var(--blue); }
.k-bld { --k: var(--good); }
.ec-stack i.k-tax, .ec-stack i.k-trade, .ec-stack i.k-bld { background: var(--k); }
.ec-stack i.k-cut { background: repeating-linear-gradient(135deg, #e0705a99 0 3px, #0000 3px 6px); }
.ec-stack i.k-out0 { background: #b8584a; } .ec-stack i.k-out1 { background: #6a8fb8; } .ec-stack i.k-out2 { background: #7fa860; }
.ec-stack i.k-out3 { background: #a8977a; } .ec-stack i.k-out4 { background: #c98a3e; } .ec-stack i.k-out5 { background: #8a6ba8; } .ec-stack i.k-out6 { background: #5d6a5a; }
.fx.k-tax b, .fx.k-trade b, .fx.k-bld b, .fx.k-tax svg.i, .fx.k-trade svg.i, .fx.k-bld svg.i { color: var(--k); }
.econ .meter { margin: 0; }
.ec-rank { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.ec-badge { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--gold-2); background: radial-gradient(circle at 35% 30%, #4a3a20, #1a140c); border: 1px solid var(--edge); box-shadow: 0 0 0 1px #0008; }
.ec-rank > b { font-family: var(--display); font-size: 15px; color: var(--gold-2); }
.ec-rankpips { margin-left: auto; display: flex; gap: 5px; padding-right: 3px; }
.ec-rankpips i { width: 9px; height: 9px; transform: rotate(45deg); background: #0008; border: 1px solid var(--edge); }
.ec-rankpips i.on { background: var(--gold); border-color: var(--gold-2); }
.ec-rankpips i.shut { opacity: 0.3; }
#pv-grow, #pv-improve { flex: 1 1 45%; }
.slots { margin-top: 10px; }
.slots:empty { display: none; }
.ec-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; font-family: var(--display); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.ec-head b { font-family: 'Alegreya Sans', sans-serif; letter-spacing: 0; color: var(--dim); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 54px)); gap: 6px; }
.tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; color: var(--gold-2); background: linear-gradient(180deg, #ffffff12, #ffffff05); border: 1px solid var(--edge); box-shadow: inset 0 0 0 1px #0006; }
.tile.empty { background: none; border: 1px dashed #d9b36a44; box-shadow: none; }
.tile.new > svg { opacity: 0.45; }
.tile.busy { border-color: var(--gold-2); }
.tile .lv { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; }
.tile .lv i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 1px #0009; }
.tile .wbar { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 4px; border-radius: 2px; background: #000b; overflow: hidden; }
.tile .wbar i { display: block; height: 100%; width: 0; background: var(--good); }
.tile.busy .lv { bottom: 9px; }
.tile .x { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; background: #2a1a12; border: 1px solid #e0705a88; color: #ffb4a4; }
.tile .x svg.i { width: 10px; height: 10px; stroke-width: 2.4; }
.tile .x:hover { background: #4a2218; }
.buildable { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.buildable:empty { display: none; }
.ec-build { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 6px; background: #ffffff0f; border: 1px solid #ffffff22; text-align: left; }
.ec-build:hover:not(:disabled) { border-color: var(--edge); background: #ffffff18; }
.ec-build:disabled { opacity: 0.42; }
.ec-build.locked { opacity: 0.3; }
.ec-build .ic { color: var(--gold-2); display: grid; place-items: center; }
.ec-build .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-build .nm b { font-size: 13.5px; }
.ec-build .fxs { flex-wrap: nowrap; }
.ec-build .fx { padding: 0 6px 0 4px; font-size: 11.5px; }
.ec-build .fx svg.i { width: 11px; height: 11px; }
.ec-build small { display: flex; gap: 6px; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.ec-build small span { display: inline-flex; align-items: center; gap: 3px; }
.ec-build small svg.i { width: 11px; height: 11px; color: var(--gold); }
#silver { cursor: pointer; }

/* Treasury in the government window: silver in and out, and the stipends switch. */
.purse { display: flex; flex-direction: column; gap: 6px; }
#fx-pools + h3 { margin-top: 16px; }
.tr-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 13px; }
.tr-row > svg.i { width: 14px; height: 14px; color: var(--good); }
.tr-row.out > svg.i { color: var(--bad); }
.tr-row b { min-width: 34px; text-align: right; }
.tr-row.out b { color: var(--bad); }
.switch { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 44px 5px 8px; border-radius: 6px; background: #ffffff0f; border: 1px solid #ffffff22; font-weight: 700; font-size: 13px; }
.switch svg.i { width: 15px; height: 15px; color: var(--gold-2); }
.switch small { margin-left: auto; color: var(--dim); font-weight: 500; }
.switch .knob { position: absolute; right: 8px; top: 50%; width: 28px; height: 14px; margin-top: -7px; border-radius: 7px; background: #0009; box-shadow: inset 0 0 0 1px #ffffff2a; }
.switch .knob::after { content: ''; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--dim); transition: left 0.15s; }
.switch.on .knob { background: #d9b36a66; }
.switch.on .knob::after { left: 16px; background: var(--gold-2); }
.switch.on small { color: var(--bad); }
.switch.queued { border-style: dashed; }

/* Towns and cities in the wealth map mode, sized in screen px. */
#ranks { pointer-events: none; }
#ranks circle { fill: #1d140b; stroke: #f4ead1; stroke-width: calc(var(--u) * 1.4px); }
#ranks circle.rk1 { r: calc(var(--u) * 2.5px); }
#ranks circle.rk2 { r: calc(var(--u) * 4px); fill: #7a5a2a; }
#ranks circle.rk3 { r: calc(var(--u) * 5.5px); fill: var(--gold); stroke: #1d140b; stroke-width: calc(var(--u) * 1.8px); }
#legend i.rk1 { box-shadow: none; background: radial-gradient(circle, #1d140b 0 3px, #f4ead1 3px 4.5px, #0000 4.5px); }
#legend i.rk2 { box-shadow: none; background: radial-gradient(circle, #7a5a2a 0 4.5px, #f4ead1 4.5px 6px, #0000 6px); }
#legend i.rk3 { box-shadow: none; background: radial-gradient(circle, var(--gold) 0 5.5px, #1d140b 5.5px 7px, #0000 7px); }

/* The banner heads the province panel on every tab. */
#province > .pv-banner { margin: 10px 12px 2px; }

/* Buildings: a free slot opens a picker of tiles beneath. */
.slots .tile.pick { cursor: pointer; display: grid; place-items: center; color: var(--gold); font-size: 22px; font-weight: 300; }
.slots .tile.pick:hover, .slots .tile.pick.on { border-color: var(--gold); border-style: solid; background: #d9b36a1a; }
#pv-buildable { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; padding: 8px; border-radius: 10px; background: #0005; border: 1px solid #d9b36a33; }
#pv-buildable .ec-build { display: flex; flex-direction: column; align-items: center; gap: 4px; height: auto; padding: 8px 4px; text-align: center; }
#pv-buildable .ec-build .nm b { font-size: 12px; white-space: normal; line-height: 1.1; }
#pv-buildable .ec-build .fxs { justify-content: center; }
#pv-buildable .ec-build small { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin: 0; }
/* City rank as a ladder of pictures: ours lit, the next with its price. */
.ec-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; margin: 8px 0; }
.ec-ladder .rung { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 5px; border-radius: 8px; background: #ffffff06; border: 1px solid #ffffff12; color: var(--faint); cursor: help; }
.ec-ladder .rung i { display: grid; place-items: center; height: 28px; }
.ec-ladder .rung small { font-size: 10.5px; text-align: center; line-height: 1.1; }
.ec-ladder .rung.past { color: var(--gold); }
.ec-ladder .rung.on { color: var(--ink); background: linear-gradient(var(--gold-2), var(--gold)); border-color: var(--gold-2); box-shadow: 0 0 10px #d9b36a55; }
.ec-ladder .rung.on small { font-weight: 800; }
.ec-ladder .rung.next { color: var(--text); border-color: var(--gold); border-style: dashed; }
.ec-ladder .rung.shut { opacity: 0.35; }
.ec-ladder .rung em { display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--gold-2); }
.ec-ladder .rung em svg.i { width: 10px; height: 10px; }

/* The treasury as a balance: income left, costs right, the net in the middle. */
.balance { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; margin: 4px 0 8px; cursor: help; }
.balance svg { grid-column: 1 / -1; width: 100%; max-width: 240px; justify-self: center; height: auto; }
.balance .bal-in, .balance .bal-out { font-size: 12.5px; color: var(--dim); text-align: center; }
.balance .bal-net { font-size: 16px; text-align: center; color: var(--dim); }
.balance .bal-net.good { color: var(--good); } .balance .bal-net.bad { color: var(--bad); }

#ranks g.rk circle { fill: #1d140bdd; stroke: #f4ead1; stroke-width: 1.2; }
#ranks g.rk svg { color: #f4ead1; }
#ranks g.rk2 circle { fill: #7a5a2a; }
#ranks g.rk3 circle { fill: var(--gold); stroke: #1d140b; stroke-width: 1.6; }
#ranks g.rk3 svg { color: #1d140b; }
#alerts .al-gap { width: 10px; flex: none; }

/* ---------------------------------------------------------------- the account */
/* The top bar's account button; its dot is the cloud's state: gold idle, pulsing while
   saves go up, red when the last request failed. */
#account-btn { position: relative; }
#account-btn.out { color: var(--dim); }
#account-btn .cloud-dot { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px #0d0b09; display: none; }
#account-btn.c-idle .cloud-dot, #account-btn.c-busy .cloud-dot, #account-btn.c-error .cloud-dot, #account-btn.c-full .cloud-dot { display: block; }
#account-btn.c-busy .cloud-dot { animation: glow 1.2s ease-in-out infinite; }
#account-btn.c-error .cloud-dot, #account-btn.c-full .cloud-dot { background: var(--bad); }
#account { width: min(400px, calc(100vw - 32px)); z-index: 23; }
#account .buttons button { flex: 1; }
.ac-new { display: flex; gap: 8px; }
.ac-new input { flex: 1; min-width: 0; font: inherit; padding: 6px 9px; border-radius: 6px; background: #0008; color: var(--text); border: 1px solid #ffffff22; }
.ac-new input:focus { outline: none; border-color: var(--edge); }
.ac-new button { flex: none; padding: 6px 14px; border-radius: 6px; background: #ffffff0f; border: 1px solid #ffffff22; color: var(--text); font-weight: 700; font-size: 13.5px; }
.ac-new button:hover:not(:disabled) { border-color: var(--edge); background: #ffffff18; }
.ac-who { display: flex; align-items: center; gap: 10px; padding: 4px 0 2px; }
.ac-who svg.i { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: #ffffff10; color: var(--gold-2); }
.ac-who b { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--gold-2); }
.ac-cloud { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 13.5px; }
.ac-cloud svg.i { width: 16px; height: 16px; color: var(--gold); }
.ac-cloud.bad svg.i { color: var(--bad); }
#ac-status.bad { color: var(--bad); }
#ac-status.good { color: var(--good); }
#account button:disabled { opacity: 0.42; }

/* Saves only in the cloud, and a ranked game's save. */
#mn-saves .mark { display: inline-flex; vertical-align: -3px; margin-left: 4px; color: var(--gold); }
#mn-saves .mark svg.i { width: 15px; height: 15px; }
#mn-saves li.cloud .what { opacity: 0.8; }
#mn-ranked-line { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
#mn-ranked-line svg.i { width: 16px; height: 16px; color: var(--gold); }
#mn-ranked-line.bad svg.i { color: var(--bad); }
.st-play #sv-ranked-opt { color: var(--gold-2); }
#sv-status { margin: 0; color: var(--bad); }

/* ---------------------------------------------------------------- the leaderboard */
#leaderboard { width: min(720px, calc(100vw - 32px)); z-index: 23; }
#leaderboard .ph select { font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 6px; background: #0008; color: var(--text); border: 1px solid #ffffff22; max-width: 190px; }
#leaderboard .ph h2 { flex: 1; }
#leaderboard .st-scroll { max-height: min(560px, calc(100vh - 200px)); }
#leaderboard table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#leaderboard th { position: sticky; top: 0; background: #14100c; text-align: right; font-weight: 500; color: var(--dim); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
#leaderboard td { text-align: right; padding: 4px 8px; border-top: 1px solid #ffffff0a; white-space: nowrap; }
#leaderboard th.name, #leaderboard td.name { text-align: left; }
#leaderboard td.who { font-weight: 700; }
#leaderboard td.score { font-weight: 700; color: var(--gold-2); }
#leaderboard td.when { color: var(--dim); }
#leaderboard tr.me td { background: #d9b36a22; }
#leaderboard tr.me td.who { color: var(--gold-2); }
#leaderboard td.place { width: 40px; }
#leaderboard td.place span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; }
#leaderboard td.place .medal-1 { background: radial-gradient(circle at 35% 30%, #fbe39a, #c9962e); color: #2a1d08; font-weight: 800; }
#leaderboard td.place .medal-2 { background: radial-gradient(circle at 35% 30%, #f1f1ee, #9da2a6); color: #22252a; font-weight: 800; }
#leaderboard td.place .medal-3 { background: radial-gradient(circle at 35% 30%, #f0b88a, #a2643a); color: #2a1608; font-weight: 800; }
#lb-note { padding: 14px 8px 6px; text-align: center; }
#lb-note:empty { display: none; }