:root {
  --ui: 1;
  --panel: rgba(16, 20, 18, 0.88);
  --panel-2: rgba(30, 36, 32, 0.94);
  --line: rgba(196, 180, 120, 0.26);
  --ink: #e6e2d3;
  --dim: #9a9786;
  --accent: #e8c547;
  --blue: #4a7ad8;
  --bad: #ff5a48;
  --warn: #e9b23a;
  --good: #7cc46a;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --head: 'Rajdhani', 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0f1214; color: var(--ink); font: 500 13px/1.4 var(--head); user-select: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* Blank until the first world is drawn; the menu's demo country fades in behind the menu. */
#view.cold { opacity: 0; }
#view.fade { transition: opacity 0.8s ease-out; }
#view.pick { cursor: pointer; }
#view.build { cursor: crosshair; }
#view.target { cursor: cell; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
kbd { font: 600 11px var(--mono); background: #2c312c; border: 1px solid #4a4f45; border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; color: var(--ink); }
.panel { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); }
h2, h3 { font-family: var(--head); letter-spacing: 0.08em; margin: 0; }
.hint { color: var(--dim); font-size: 12px; margin: 5px 0 0; line-height: 1.3; }
.bad { color: var(--bad); } .warn { color: var(--warn); } .good { color: var(--good); }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */
#top { position: fixed; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 12px; border-width: 0 0 1px; z-index: 10; }
.brand { font: 700 19px var(--head); letter-spacing: 0.18em; white-space: nowrap; }
.brand span { color: var(--accent); margin-left: 5px; }
.clock { font-family: var(--mono); line-height: 1.05; min-width: 92px; }
.clock .d { font-weight: 600; color: var(--accent); }
.clock .h { color: var(--dim); font-size: 12px; }
.clock .act { font: 600 12px var(--head); letter-spacing: 0.1em; color: var(--dim); text-transform: uppercase; }
/* The threat chip beside the clock: the rhythm of the fight in a word and a colour (the word carries it alone too),
   the place and hours under it, stacked like the clock so it stays narrow in a full bar. */
.threat { flex: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 92px; padding: 3px 9px; background: var(--panel-2); border: 1px solid; font: 600 12px/1.15 var(--mono); white-space: nowrap; text-align: left; }
.threat b { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.threat span:empty { display: none; }
.threat.calm { color: var(--good); border-color: rgba(124, 196, 106, 0.55); }
.threat.rumour { color: var(--warn); border-color: var(--warn); background: #2a2414; }
.threat.contact { color: #ff9a5a; border-color: #ff9a5a; background: #2e1d14; }
.threat.breach { color: #1a1a14; border-color: var(--bad); background: var(--bad); }
.threat.quiet { color: #9cc0f2; border-color: var(--blue); background: #172030; }
.threat.outbreak { color: #f0b860; border-color: #c08a3a; background: #2a2014; }
/* Nothing to look at in the calm: no pointer, and no gold hover edge promising a click. */
.threat.calm, .threat.quiet { cursor: default; }
#hud .threat.calm:hover { border-color: rgba(124, 196, 106, 0.55); }
#hud .threat.quiet:hover { border-color: var(--blue); }
.threat-row { display: flex; gap: 8px; margin-top: 4px; padding-left: 6px; border-left: 2px solid transparent; color: var(--dim); }
.threat-row.on { border-left-color: var(--accent); color: var(--ink); }
.threat-k { flex: 0 0 64px; font: 700 12px var(--mono); }
.threat-k.calm { color: var(--good); } .threat-k.rumour { color: var(--warn); } .threat-k.contact { color: #ff9a5a; }
.threat-k.breach { color: var(--bad); } .threat-k.quiet { color: #9cc0f2; } .threat-k.outbreak { color: #f0b860; }
.speeds { display: flex; align-items: center; gap: 2px; }
.speeds button { background: #262b27; border: 1px solid #3c4239; padding: 4px 7px; font-size: 12px; letter-spacing: -2px; }
.speeds button.on { background: var(--accent); color: #1a1a14; border-color: var(--accent); }
/* The current speed in words beside the buttons; paused reads as a chip. */
.speeds .spd { min-width: 58px; margin-left: 6px; font: 700 13px var(--mono); color: var(--accent); text-align: center; }
.speeds .spd.paused { background: var(--warn); color: #1a1a14; padding: 1px 4px; }
.res { display: flex; gap: 5px; }
.chip { display: flex; align-items: baseline; gap: 4px; padding: 3px 8px; background: var(--panel-2); border: 1px solid #353b33; font-family: var(--mono); white-space: nowrap; cursor: default; }
.chip .ic { font-size: 13px; }
.chip b { font-size: 13px; }
.chip.low { border-color: var(--bad); animation: lowpulse 1s infinite alternate; }
@keyframes lowpulse { to { background: #3a1a16; } }
.rate { font-size: 11px; }
.rate.pos { color: var(--good); } .rate.neg { color: var(--bad); }
.meters { display: flex; gap: 10px; }
.meter { min-width: 120px; }
.meter label { font: 600 12px var(--head); letter-spacing: 0.12em; color: var(--dim); display: flex; justify-content: space-between; gap: 6px; }
.bar { height: 7px; background: #2a2e2a; border: 1px solid #3a3f38; position: relative; }
.bar i { display: block; height: 100%; transition: width 0.3s; }
.bar .tick { position: absolute; top: -2px; bottom: -2px; width: 1px; background: rgba(255, 255, 255, 0.35); }
.topbtn { width: 32px; height: 32px; border-radius: 50%; background: #262b27; border: 1px solid #4a4f45; font-weight: 700; }
.spacer { flex: 1; }

/* ---------- ticker ---------- */
/* The ticker is a marquee: its text scrolls through a clipped window rather than being cut short. */
#ticker { position: fixed; top: 54px; left: 0; right: 0; height: 22px; background: rgba(10, 12, 11, 0.8); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; clip-path: inset(0); z-index: 9; font: 12px var(--serif); font-style: italic; color: #cbc6b4; }
#ticker .tag { font: 700 12px var(--mono); font-style: normal; background: #8a1f18; color: #fff; padding: 1px 6px; margin-left: 8px; letter-spacing: 0.1em; }
#ticker-text { white-space: nowrap; animation: tick 40s linear infinite; }
@keyframes tick { from { transform: translateX(60vw); } to { transform: translateX(-100%); } }

/* ---------- left: minimap + alerts ---------- */
#left { position: fixed; top: 86px; left: 12px; width: 236px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
#mm-wrap { padding: 6px; }
#minimap { display: block; width: 222px; height: 222px; image-rendering: pixelated; cursor: pointer; }
.legend { display: flex; gap: 1px 8px; font-size: 12px; line-height: 1.35; color: var(--dim); margin-top: 4px; flex-wrap: wrap; }
.legend .row { display: flex; flex-wrap: wrap; gap: 1px 8px; width: 100%; }
.legend em { font-style: normal; color: var(--ink); }
.legend i { display: inline-block; width: 8px; height: 8px; margin-right: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
/* The feed scrolls while hovered; the clear button shows beside it then. */
#feed { position: relative; }
#alerts { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
#feed:hover #alerts { overflow-y: auto; scrollbar-width: thin; }
#alerts-clear { display: none; position: absolute; left: 100%; top: 0; font: 600 12px var(--mono); padding: 3px 8px; white-space: nowrap; background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
#alerts-clear:hover { background: var(--panel-2); border-color: var(--accent); }
#feed:hover #alerts:not(:empty) + #alerts-clear { display: block; }
.alert { flex: none; background: var(--panel); border: 1px solid var(--line); border-left: 2px solid #6a8aa0; padding: 4px 7px; font-size: 13px; line-height: 1.25; display: flex; gap: 6px; align-items: flex-start; animation: slide 0.25s ease-out; transition: opacity 1s; }
.alert .ai { font-size: 13px; width: 16px; text-align: center; }
.alert .at { flex: 1; }
.alert small { font-family: var(--mono); color: var(--dim); font-size: 12px; }
.alert .cnt { font: 600 12px var(--mono); background: #444; padding: 0 4px; border-radius: 6px; }
/* The left bar is the weight: routine lines keep a thin bar in their level's colour, important ones a thick amber
   bar, critical ones a thick red bar on a red ground that stays lit until clicked or jumped to. */
.alert.bad { border-left-color: var(--bad); } .alert.warn { border-left-color: var(--warn); } .alert.good { border-left-color: var(--good); }
.alert.w-important { border-left: 4px solid var(--warn); }
.alert.w-critical { border-left: 6px solid #ff3b2a; background: rgba(70, 16, 12, 0.9); color: #ffe2dc; }
.alert.w-critical.live { border-color: #ff5a48; border-left-color: #ff3b2a; box-shadow: 0 0 10px rgba(255, 59, 42, 0.45); }
.alert.jump { cursor: pointer; } .alert.jump:hover { background: var(--panel-2); }
.alert.old { opacity: 0.5; }
@keyframes slide { from { transform: translateX(-16px); opacity: 0; } }

/* ---------- right: tabs ---------- */
#right { position: fixed; top: 86px; right: 12px; width: 312px; display: flex; flex-direction: column; z-index: 5; }
.tabs { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.tabrow { display: flex; }
.tabrow + .tabrow { border-top: 1px solid rgba(196, 180, 120, 0.12); }
.tabrow .tg { flex: 0 0 82px; display: flex; align-items: center; padding-left: 8px; font: 600 12px var(--head); letter-spacing: 0.02em; color: #7d7a6c; border-right: 1px solid rgba(196, 180, 120, 0.12); }
.tabs button { flex: 1; background: none; border: 0; padding: 7px 0; font-weight: 700; letter-spacing: 0.04em; font-size: 12px; color: var(--dim); position: relative; }
.tabs button.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.tabs button .dot { position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.tabbody { padding: 10px 12px; overflow-y: auto; }
.tabbody h3 { font-size: 12px; color: var(--accent); margin: 10px 0 6px; display: flex; justify-content: space-between; }
.tabbody h3:first-child { margin-top: 0; }
.tabbody h3 small { font: 500 12px var(--head); letter-spacing: 0.02em; color: var(--dim); }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.seg button { background: #262b27; border: 1px solid #3c4239; padding: 6px 0; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; }
.seg button:disabled { color: var(--dim); }
.seg button.on[data-p="open"] { background: #3d7a4a; border-color: #5aa06a; }
.seg button.on[data-p="screened"] { background: #8a6e1e; border-color: #c49a2a; }
.seg button.on[data-p="closed"] { background: #8a2a22; border-color: #c4443a; }
.seg button.on[data-p="shoot"] { background: #3a0c0c; border-color: #ff3020; color: #ff8070; }
.law { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 8px; margin-bottom: 4px; background: #1d211d; border: 1px solid #343a32; }
.law .ln { font-weight: 700; }
.law .lc { font: 12px var(--mono); color: var(--dim); }
.law .pros, .law .cons { grid-column: 1 / -1; font-size: 12px; line-height: 1.25; }
.law .pros { color: #9fd08a; } .law .cons { color: #e08a7a; }
.law button { grid-column: 1 / -1; margin-top: 4px; background: #2e3428; border: 1px solid #4a5240; padding: 3px; font-weight: 700; letter-spacing: 0.06em; }
.law.passed { border-color: #6a5a20; background: #24220f; opacity: 0.85; }
.law.locked { opacity: 0.6; }
.chain { font: 600 12px var(--head); letter-spacing: 0.12em; color: var(--dim); margin: 8px 0 3px; text-transform: uppercase; }
.tree { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tree .bh { font: 700 12px var(--head); letter-spacing: 0.06em; text-align: center; padding-bottom: 2px; }
.tech { padding: 5px 5px 4px; background: #1f231f; border: 1px solid #343a32; cursor: pointer; min-height: 52px; font-size: 12px; line-height: 1.15; display: flex; flex-direction: column; justify-content: space-between; }
.tech:hover { border-color: #6a7060; }
.tech.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tech.done { background: #1f2a1f; border-color: #4a7a4a; }
.tech.locked { opacity: 0.6; cursor: default; }
.tech .tc { font: 12px var(--mono); color: var(--dim); }
.tech .tb { height: 3px; background: #333; margin-top: 3px; }
.tech .tb i { display: block; height: 100%; background: #9fd6a8; width: 0; }
.req { padding: 8px; margin-bottom: 6px; background: #1d211d; border: 1px solid #343a32; border-left: 3px solid var(--blue); }
.req .who { font: 700 12px var(--head); letter-spacing: 0.06em; display: flex; justify-content: space-between; }
.req .what { font: 13px var(--serif); margin: 4px 0; }
.req .rw { font: 12px var(--mono); color: var(--good); }
.req .rw.cost { color: #e08a7a; }
.req .row { display: flex; gap: 4px; margin-top: 6px; }
.req .row button { flex: 1; padding: 4px; background: #2a3028; border: 1px solid #4a5240; font-weight: 700; }
.req.kept { border-left-color: var(--good); opacity: 0.6; } .req.broken { border-left-color: var(--bad); opacity: 0.6; }
.req .timer { font: 12px var(--mono); color: var(--warn); }
.news { font: 13px var(--serif); padding: 6px 0; border-bottom: 1px dashed #333a32; }
.news small { display: block; font: 12px var(--mono); color: var(--dim); }

/* ---------- right: FORCES ---------- */
.forces .hn { font: 600 12px var(--mono); color: var(--dim); letter-spacing: 0; }
.forces kbd { font-size: 11px; }
.forces .chev { font-size: 12px; }
.forces .pl { font-size: 12px; color: var(--dim); white-space: nowrap; }
.frow, .sq, .trq { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 2px 6px; padding: 4px 6px; margin-bottom: 3px; background: #1d211d; border: 1px solid #343a32; line-height: 1.2; }
.frow, .sq { cursor: pointer; }
.frow:hover, .sq:hover { border-color: var(--accent); }
.frow .bi, .sq .bi { font-size: 16px; grid-row: span 2; text-align: center; }
.frow .fn b { font-size: 13px; }
.frow .fc { font: 600 13px var(--mono); color: var(--accent); }
.frow .fs { font-size: 12px; color: var(--dim); text-align: right; }
.frow .hp, .frow .fq { grid-column: 2 / 4; }
.frow .fq { text-align: left; }
.frow.none { cursor: default; }
.frow.none:hover { border-color: #343a32; }
.hp.hurt i { background: var(--warn); }
.hp.dying i { background: var(--bad); }
.sq { padding: 3px 6px; margin-bottom: 2px; }
.sq.ng { margin-top: 8px; }
.sq.hurt { background: #29251a; border-color: #5e4e26; }
.sq.dying { background: #301815; border-color: #7a3a32; }
.sq .sn { font-size: 13px; font-weight: 700; }
.sq .st, .sq .pl { font-size: 12px; text-align: right; }
.st-idle { color: var(--dim); } .st-moving { color: var(--ink); } .st-fighting { color: var(--bad); } .st-holding { color: var(--accent); } .st-setting-up { color: var(--warn); }
.trq { font-size: 13px; }
.trq .bi { font-size: 16px; text-align: center; }
.trq .tl { font: 600 13px var(--mono); text-align: right; }
.trq .tl .pl { font-family: var(--head); font-weight: 500; }
.ffoot { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); }

/* ---------- right: ECONOMY ---------- */
.economy .hn { font: 600 12px var(--mono); color: var(--dim); letter-spacing: 0; }
.economy .pl { font-size: 12px; color: var(--dim); }
.wbar { display: flex; height: 18px; background: #262b27; border: 1px solid #343a32; overflow: hidden; }
.wbar i { display: block; min-width: 0; overflow: hidden; font: 700 12px/18px var(--mono); font-style: normal; color: #121512; text-align: center; white-space: nowrap; }
.wbar i + i { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.5); }
.wbar .w-free { background: repeating-linear-gradient(135deg, #2b302b 0 4px, #343a34 4px 8px); color: var(--dim); }
.wbar .w-idle { color: #fff; box-shadow: inset 2px 0 0 #121512; }
.wleg { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 5px 0 2px; font-size: 12px; color: var(--dim); }
.wleg i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; vertical-align: -1px; }
.prow { border-left-width: 3px; }
.prow .tw { display: inline-block; width: 9px; font-size: 12px; color: var(--dim); }
.prow .eo, .pitem .eo { font: 600 12px var(--mono); color: var(--good); text-align: right; white-space: nowrap; }
.prow .fs { grid-column: 2 / 4; text-align: left; }
.pitem { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; margin: -1px 0 3px 16px; padding: 2px 6px; background: #181b18; border: 1px solid #2e332c; font-size: 12px; cursor: pointer; }
.pitem:hover { border-color: var(--accent); }
.pitem .pl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-working { color: var(--good); } .ps-idle { color: var(--bad); } .ps-damaged { color: var(--warn); } .ps-under-construction { color: var(--dim); }
.flow { margin-bottom: 4px; padding: 4px 6px; background: #1d211d; border: 1px solid #343a32; }
.flow .fh { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; }
.flow .fh .rate { font: 600 12px var(--mono); }
.fcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; margin-top: 2px; }
.fl { display: flex; justify-content: space-between; gap: 4px; font-size: 12px; color: var(--dim); }
.fl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl b { font: 600 12px var(--mono); }
.fl.none { font-style: italic; }
.town { display: grid; grid-template-columns: 1fr auto; gap: 0 6px; padding: 3px 6px; margin-bottom: 2px; background: #1d211d; border: 1px solid #343a32; line-height: 1.25; cursor: pointer; }
.town:hover { border-color: var(--accent); }
.town .tn { font-size: 13px; font-weight: 700; }
.town .ts { font-size: 12px; text-align: right; }
.town .pl { grid-column: 1 / 3; }
.ts-ok { color: var(--dim); } .ts-outbreak { color: var(--warn); } .ts-quarantined { color: #8fb0e8; } .ts-sacrifice-zone { color: var(--bad); }

/* ---------- letters ---------- */
/* Its height is fitted above the bottom row (fitPanels); more letters than fit scroll. */
#letters { position: fixed; right: 336px; top: 86px; width: 300px; display: flex; flex-direction: column; gap: 6px; z-index: 6; pointer-events: none; overflow-y: auto; scrollbar-width: thin; }
.letter { flex: none; pointer-events: auto; background: #e9e3cf; color: #1f1d16; padding: 9px 11px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); border-left: 4px solid #8a6a2a; animation: slide 0.3s ease-out; }
.letter h4 { margin: 0 0 3px; font: 700 14px var(--head); letter-spacing: 0.04em; display: flex; justify-content: space-between; }
.letter h4 small { font: 12px var(--mono); color: #7a6a4a; }
.letter p { margin: 0 0 6px; font: 12.5px/1.35 var(--serif); }
.letter button { display: block; width: 100%; text-align: left; margin-top: 3px; background: #2a2c22; color: #f1ecd8; border: 1px solid #2a2c22; padding: 4px 7px; }
.letter button small { display: block; font: 12px var(--mono); color: #c9c19c; }

/* ---------- bottom ---------- */
#bottom { position: fixed; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 10px; z-index: 6; pointer-events: none; }
#bottom > * { pointer-events: auto; }
#selection { width: 340px; padding: 10px 12px; max-height: 42vh; overflow: auto; }
#selection:empty { display: none; }
#selection h2 { font-size: 17px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline; }
#selection h2 small { font: 12px var(--mono); color: var(--dim); }
#build { margin: 0 auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.btabs { display: flex; align-items: center; gap: 2px; }
.btabs .hint { margin: 0 0 0 8px; white-space: nowrap; }
.btabs .hint kbd { font-size: 11px; }
.btabs .fold { margin-left: auto; background: #222722; border: 1px solid #3a4036; color: var(--dim); font-size: 14px; line-height: 1; }
.btabs button { background: #222722; border: 1px solid #3a4036; padding: 3px 12px; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: var(--dim); }
.btabs button.on { color: var(--accent); border-color: var(--accent); }
.bgrid { display: grid; grid-template-columns: repeat(4, 86px); gap: 4px; }
.bbtn { height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; background: #232823; border: 1px solid #3a4036; position: relative; padding: 7px 0 0; overflow: hidden; }
.bbtn.on { border-color: var(--accent); background: #3a3a22; box-shadow: inset 0 0 0 1px var(--accent); }
.bi { font-size: 21px; line-height: 1; }
.bn { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.05; padding: 0 3px; }
.bbtn kbd, .abtn kbd, .cbtn kbd { position: absolute; top: 2px; right: 2px; z-index: 1; }
.bbtn .qn { position: absolute; top: 2px; left: 4px; font: 600 12px var(--mono); font-style: normal; color: var(--good); }
#actions { padding: 6px; display: flex; gap: 4px; }
.abtn { width: 80px; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 7px 0 0; background: #232823; border: 1px solid #3a4036; position: relative; overflow: hidden; }
.abtn.on { border-color: #ff6040; box-shadow: inset 0 0 0 1px #ff6040; }
/* Why a button cannot be used, on the button: 🔒 and what unlocks it, or a red chip per resource short. The face
   dims; the reason does not. */
.why { font: 600 12px/1 var(--head); white-space: nowrap; }
.why:empty { display: none; }
/* In flow at the foot of the button, so a two-line name above it is never covered. */
.bbtn .why, .abtn .why { margin-top: auto; align-self: stretch; padding: 2px 0; text-align: center; background: rgba(8, 10, 9, 0.78); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.need { display: inline-block; margin: 0 1px; padding: 0 3px; font-size: 12px; line-height: 14px; background: #8a1f18; border: 1px solid #ff4030; border-radius: 3px; }
.bbtn.short .bi, .bbtn.short .bn, .bbtn.locked .bi, .bbtn.locked .bn, .abtn.short .bi, .abtn.short .bn, .abtn.locked .bi, .abtn.locked .bn { opacity: 0.45; }
.bbtn.short .why, .abtn.short .why { background: rgba(70, 16, 12, 0.85); }
/* Cooldown: a ring in the icon's place that empties as it runs out, the hours left inside it. */
.abtn .cd { display: none; position: relative; flex: none; width: 30px; height: 30px; margin: -4px 0 -3px; border-radius: 50%; place-items: center; background: conic-gradient(var(--warn) var(--cd, 0deg), #3a3f38 0); }
.abtn .cd::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #181c18; }
.abtn .cd b { position: relative; font: 600 12px var(--mono); color: var(--ink); }
.abtn.cool .cd { display: grid; }
.abtn.cool .bi { display: none; }
.urow { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 1px 6px; margin-bottom: 5px; }
.urow .bi { font-size: 17px; grid-row: span 2; }
.hp { height: 5px; background: #3a2a2a; }
.hp i { display: block; height: 100%; background: var(--good); }
.hp.big { height: 7px; margin-bottom: 6px; }
/* The command card: icon top left, key top right, the label under them, then a cost or a reason. */
.ccard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.cbtn { position: relative; min-height: 48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px; padding: 4px 6px 5px; background: #232823; border: 1px solid #3a4036; text-align: left; }
.cbtn .ci { font-size: 16px; line-height: 1.1; }
.cbtn .cl { font-size: 13px; font-weight: 600; line-height: 1.15; }
.cbtn .cs { font-size: 12px; color: var(--dim); line-height: 1.2; }
.cbtn .why { margin-top: 2px; }
.cbtn.on { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cbtn.danger { background: #3a1f1c; border-color: #7a3a32; }
.cbtn.short .ci, .cbtn.short .cl, .cbtn:disabled .ci { opacity: 0.5; }
.train { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; }
.tbtn { background: #232823; border: 1px solid #3a4036; padding: 5px; display: flex; align-items: center; gap: 6px; font-weight: 600; text-align: left; font-size: 12px; }
.tbtn .bi { font-size: 17px; }
.tbtn .tn { flex: 1; }
.tbtn.short .bi, .tbtn.short .tn, .tbtn.locked .bi, .tbtn.locked .tn { opacity: 0.5; }
.queue { display: flex; gap: 4px; margin-top: 8px; min-height: 32px; }
.qi { position: relative; width: 32px; height: 32px; display: grid; place-items: center; background: #1c201c; border: 1px solid #3a4036; font-size: 16px; overflow: hidden; cursor: pointer; }
.qi i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); }
.kv { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dashed #333a32; font-family: var(--mono); font-size: 12px; }
.kv span { color: var(--dim); }
.chev { color: var(--accent); font-size: 12px; letter-spacing: -2px; }

/* ---------- lesson ---------- */
#lesson { position: fixed; top: 86px; left: 260px; width: 330px; padding: 10px 12px; z-index: 7; display: none; border-left: 3px solid var(--accent); }
#lesson.show { display: block; animation: slide 0.3s ease-out; }
#lesson.fade { opacity: 0; transition: opacity 0.6s ease-in; pointer-events: none; }
#lesson h4 small { font-size: 12px; }
#lesson h4 { margin: 0 0 4px; font: 700 14px var(--head); letter-spacing: 0.06em; color: var(--accent); display: flex; justify-content: space-between; }
#lesson p { margin: 0; font-size: 13px; line-height: 1.35; }
#lesson .x { background: none; border: 0; color: var(--dim); font-size: 14px; }

/* ---------- world labels & arrows ---------- */
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.clabel { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; background: rgba(14, 18, 16, 0.8); border: 1px solid rgba(232, 197, 71, 0.35); padding: 2px 7px; text-align: center; white-space: nowrap; display: flex; flex-direction: column; align-items: center; line-height: 1.12; }
.clabel b { font-size: 13px; letter-spacing: 0.06em; }
.clabel b .sp { font-size: 12px; margin-right: 3px; }
.clabel.cap b { color: var(--accent); }
.clabel .pop { font: 12px var(--mono); color: var(--dim); }
.clabel .st { font: 600 12px var(--mono); padding: 0 4px; margin-top: 1px; }
.clabel .st.bad { background: #8a1f18; color: #fff; animation: pulse 1s infinite alternate; }
.clabel .st.warn { background: #6a4a10; color: #fff; }
.clabel .st.fallen { background: #000; color: var(--bad); }
.clabel .st.q { background: #6a5a1a; color: #fff; }
.clabel .st.sac { background: #3a0a3a; color: #f0a0f0; }
.clabel .st.rec { background: #1a4a2a; color: #a0f0b0; }
.clabel.sel { border-color: var(--accent); }
.slabel { position: absolute; left: 0; top: 0; font: 600 12px var(--mono); color: #d8cfb4; background: rgba(30, 24, 18, 0.72); border: 1px solid #6a5a40; padding: 1px 6px; white-space: nowrap; pointer-events: none; }
.req .what .jump { margin-left: 6px; padding: 2px 8px; font: 600 12px var(--mono); white-space: nowrap; background: #2a3028; border: 1px solid #4a5240; color: var(--accent); }
.req .what .jump:hover { border-color: var(--accent); }
.xlabel { position: absolute; left: 0; top: 0; font: 12px var(--mono); background: rgba(40, 30, 10, 0.82); border: 1px solid #a08030; padding: 1px 6px; white-space: nowrap; }
.hlabel { position: absolute; left: 0; top: 0; font: 700 12px var(--mono); background: rgba(90, 10, 10, 0.85); border: 1px solid #ff4030; color: #fff; padding: 1px 6px; white-space: nowrap; }
/* Status markers over buildings: building, idle, damaged (pulsing when badly), training. */
.bmark { position: absolute; left: 0; top: 0; margin-top: -3px; font: 600 12px var(--mono); background: rgba(14, 18, 16, 0.82); border: 1px solid rgba(232, 197, 71, 0.35); color: var(--ink); padding: 1px 5px; white-space: nowrap; line-height: 1.25; }
.bmark .ic { margin-right: 4px; }
.bmark.warn { background: #6a4a10; border-color: #e0a040; color: #fff; }
.bmark.bad { background: #8a1f18; border-color: #ff4030; color: #fff; animation: pulse 1s infinite alternate; }
@keyframes pulse { to { background: #d0362a; } }
#arrows { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.edge { position: absolute; width: 0; height: 0; pointer-events: auto; cursor: pointer; }
.edge .tri { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; background: var(--bad); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.edge .lbl { position: absolute; left: -14px; top: 14px; font: 700 12px var(--mono); color: #fff; background: rgba(90, 10, 10, 0.85); padding: 0 3px; white-space: nowrap; }
.edge.warn .tri { background: var(--warn); }
/* On the right half the label runs leftward, clear of the right panel. */
.edge.east .lbl { left: auto; right: -14px; }
/* Pinned to a critical alert's spot until the camera has looked there. */
.edge.pin .tri { left: -15px; top: -15px; width: 30px; height: 30px; background: #ff3b2a; animation: pinpulse 0.7s infinite alternate; }
.edge.pin .lbl { top: 18px; background: #8a1f18; border: 1px solid #ff4030; }
@keyframes pinpulse { to { background: #ffd0c8; } }
/* A critical alert off screen flashes the edge toward it (all four when it has no place). */
#edgeflash i { position: fixed; pointer-events: none; opacity: 0; z-index: 7; }
#edgeflash .l { left: 0; top: 0; bottom: 0; width: 110px; background: linear-gradient(to right, rgba(255, 50, 30, 0.8), rgba(255, 50, 30, 0)); }
#edgeflash .r { right: 0; top: 0; bottom: 0; width: 110px; background: linear-gradient(to left, rgba(255, 50, 30, 0.8), rgba(255, 50, 30, 0)); }
#edgeflash .t { left: 0; right: 0; top: 0; height: 90px; background: linear-gradient(to bottom, rgba(255, 50, 30, 0.8), rgba(255, 50, 30, 0)); }
#edgeflash .b { left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to top, rgba(255, 50, 30, 0.8), rgba(255, 50, 30, 0)); }
#edgeflash i.on { animation: edgeflash 1.2s ease-out; }
@keyframes edgeflash { 0% { opacity: 0; } 10% { opacity: 1; } 40% { opacity: 0.3; } 55% { opacity: 0.9; } 100% { opacity: 0; } }

#selbox { position: fixed; border: 1px solid #7cff8a; background: rgba(124, 255, 138, 0.1); display: none; pointer-events: none; z-index: 8; }
#tip { position: fixed; z-index: 60; max-width: 290px; background: #0f1210; border: 1px solid var(--accent); padding: 7px 9px; font-size: 12px; display: none; pointer-events: none; line-height: 1.35; }
#tip .tipcost { margin-top: 5px; display: flex; gap: 8px; flex-wrap: wrap; }
/* Hover card: what is under the cursor on the map. */
#hovercard { position: fixed; z-index: 20; min-width: 150px; max-width: 260px; background: rgba(14, 18, 16, 0.92); border: 1px solid var(--accent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); padding: 6px 9px 7px; font-size: 13px; line-height: 1.3; display: none; pointer-events: none; }
#hovercard h4 { margin: 0 0 4px; font: 700 14px var(--head); letter-spacing: 0.06em; white-space: nowrap; }
#hovercard h4 .ic { margin-right: 5px; }
#hovercard .hp { height: 5px; background: #2a2e2a; margin: 0 0 2px; }
#hovercard .hp i { display: block; height: 100%; }
#hovercard p { margin: 0; }
#hovercard .num { font: 12px var(--mono); color: var(--dim); }
#hovercard .out { font: 600 12px var(--mono); color: var(--good); display: flex; gap: 8px; margin-top: 2px; }
.cost { font-family: var(--mono); white-space: nowrap; }
.cost.short { color: var(--bad); }
#ghost-msg { position: fixed; pointer-events: none; font: 600 12px var(--mono); color: #fff; padding: 2px 6px; display: none; z-index: 20; }
#pausebanner { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); font: 700 14px var(--head); letter-spacing: 0.4em; color: var(--accent); background: var(--panel); border: 1px solid var(--line); padding: 3px 16px; display: none; z-index: 8; }
#banner { position: fixed; top: 32%; left: 0; right: 0; text-align: center; pointer-events: none; opacity: 0; z-index: 30; }
#banner.show { animation: banner 5.5s ease-in-out forwards; }
#banner h1 { font: 700 46px var(--head); letter-spacing: 0.12em; margin: 0; color: #f4efe0; text-shadow: 0 3px 20px #000; }
#banner p { font: italic 20px var(--serif); color: #d8d0b8; margin: 6px 0 0; text-shadow: 0 2px 12px #000; }
#banner .line { width: 0; height: 2px; background: var(--accent); margin: 10px auto; animation: line 5.5s ease-in-out forwards; }
@keyframes banner { 0% { opacity: 0; transform: translateY(10px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes line { 0% { width: 0; } 30% { width: 420px; } 100% { width: 420px; } }

/* ---------- loading: index.html paints it before any script runs; the main menu replaces it ---------- */
#boot { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 42%, #1b201c, #0f1214 70%); }
#boot .card { width: min(520px, 92vw); }
/* The automatic interface size the menu card will have (app.js applySettings), before any script has run. */
@media (min-width: 1700px) { #boot .card { zoom: 1.05; } }
@media (min-width: 2100px) { #boot .card { zoom: 1.15; } }
#boot p { margin: 0; color: #5a5640; }
/* Hazard tape crawling along; moved by transform so it keeps moving while the scripts start up. */
#boot .load { height: 8px; margin-top: 14px; overflow: hidden; background: #21241c; }
#boot .load i { display: block; height: 100%; margin-left: -22.63px; background: repeating-linear-gradient(-45deg, #e9b23a 0 8px, #21241c 8px 16px); animation: tape 0.7s linear infinite; }
@keyframes tape { to { transform: translateX(22.63px); } }

/* ---------- modals ---------- */
#modal { position: fixed; inset: 0; background: rgba(5, 8, 6, 0.62); display: none; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(2px); }
#modal.show { display: flex; }
.card { width: min(600px, 92vw); max-height: 90vh; overflow: auto; background: #e9e3cf; color: #1f1d16; padding: 24px 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); position: relative; font-size: 15px; }
.card h1 { font: 700 28px var(--head); letter-spacing: 0.05em; margin: 6px 0 10px; }
.card h1 span { color: #a8322a; }
.card p { line-height: 1.5; margin: 0 0 10px; font-family: var(--serif); }
.stamp { display: inline-block; font: 700 12px var(--mono); letter-spacing: 0.15em; color: #a8322a; border: 2px solid #a8322a; padding: 2px 8px; transform: rotate(-1.5deg); }
.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.choices button { text-align: left; background: #26291f; color: #f1ecd8; border: 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.choices button:hover { background: #3a3f2c; }
.choices button b { font: 700 16px var(--head); letter-spacing: 0.04em; }
.choices button small { font: 12px var(--mono); color: #c9c19c; }
.menu { width: min(520px, 92vw); }
.menu .opts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 8px 0 14px; }
.menu .opts button { background: #d8d0b8; border: 2px solid transparent; padding: 8px; font-weight: 700; color: #1f1d16; }
.menu .opts button.on { border-color: #26291f; background: #f4efe0; }
.menu .opts button small { display: block; font: 12px var(--mono); font-weight: 400; color: #5a5640; }
.menu label.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; }
.menu .slot { font: 12px var(--mono); color: #5a5640; }
.record { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; text-align: center; }
.record b { display: block; font: 700 22px var(--head); }
.record span { font-size: 12px; color: #5a5640; }
.decisions { font: 12px var(--mono); color: #3a3628; max-height: 140px; overflow: auto; border-top: 1px solid #c8c0a8; padding-top: 6px; }
.over.won .stamp { color: #2a7a3a; border-color: #2a7a3a; }
.keys { font-size: 13px; display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.keys kbd { background: #2a2d24; }
.settings label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0; font-size: 14px; }
.settings input[type=range] { width: 200px; }
.manual { width: min(760px, 94vw); }
.manual .cols { display: grid; grid-template-columns: 200px 1fr; gap: 14px; }
.manual .idx button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 3px 4px; font: 600 13px var(--head); color: #3a3628; }
.manual .idx button.on { background: #26291f; color: #f1ecd8; }
.manual .idx button.unseen { color: #9a9070; }
.manual table { width: 100%; border-collapse: collapse; font-size: 13px; }
.manual td { padding: 3px 4px; border-bottom: 1px dashed #c8c0a8; vertical-align: top; }
.manual small { font-size: 12px; }

/* The top bar folds by its own width, which the interface scale shrinks (a 4K screen at 150% leaves it ~1460 px):
   first the brand gets smaller, then it goes (early: the threat chip needs the room on a 4K screen at the automatic
   115%, a ~1900 px bar), then the rates on the chips, last the speed in words. */
#top { container: topbar / inline-size; }
@container topbar (max-width: 2100px) { .brand { font-size: 15px; letter-spacing: 0.1em; } }
@container topbar (max-width: 1960px) { .brand { display: none; } }
@container topbar (max-width: 1720px) {
  .chip small { display: none; }
  .meter { min-width: 90px; }
}
@container topbar (max-width: 1260px) { .speeds .spd { display: none; } }
@container topbar (max-width: 1220px) { .meter { min-width: 70px; } }

/* UI scale (Settings, or automatic by screen width). Every layer with text follows it: the HUD and the cards, and
   the layers over the map whose positions come from the view (labels and markers, edge arrows and their flash, the
   tooltip, the hover card, the placement message, toasts); their scripts divide screen positions by --ui. */
#hud, #modal, #labels, #arrows, #edgeflash, #tip, #hovercard, #ghost-msg, .toast { zoom: var(--ui); }

/* One button language across the HUD: a gold edge on hover, a press that sinks, and a disabled look that never
   carries the meaning alone (the reason is written on the button). Hit targets are at least 32 px. */
#hud button { min-width: 32px; min-height: 32px; }
#hud button:not(:disabled):hover { border-color: var(--accent); }
#hud button:not(:disabled):active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
#hud button:disabled { cursor: not-allowed; color: var(--dim); border-style: dashed; }
#hud .tabs button:not(:disabled):hover { color: var(--ink); box-shadow: inset 0 -2px 0 rgba(232, 197, 71, 0.5); }
#hud .tabs button.on:hover { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
#hud .bbtn.locked, #hud .abtn.locked, #hud .tbtn.locked, #hud .bbtn.short, #hud .abtn.short, #hud .cbtn.short, #hud .tbtn.short { border-style: dashed; }
#lesson .x:not(:disabled):hover { color: var(--accent); }

/* ---------- tutorial ---------- */
#tutorial { position: fixed; top: 86px; left: 50%; transform: translateX(-50%); width: 520px; padding: 10px 14px; z-index: 12; border-top: 3px solid var(--accent); }
#tutorial h3 { font-size: 17px; color: var(--accent); margin: 4px 0; }
#tutorial p { margin: 0; font-size: 14px; line-height: 1.4; }
.tut-head { display: flex; align-items: center; gap: 10px; font: 600 12px var(--mono); color: var(--dim); letter-spacing: 0.1em; }
.tut-bar { flex: 1; height: 3px; background: #333; }
.tut-bar i { display: block; height: 100%; background: var(--accent); }
.tut-keys { margin-top: 6px; display: flex; gap: 4px; }
.tut-btns { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }
.tut-btns button { background: #262b27; border: 1px solid #3c4239; padding: 3px 10px; font-weight: 600; }
.tut-btns button.primary { background: var(--accent); color: #1a1a14; border-color: var(--accent); }
#tut-hl { position: fixed; display: none; border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(232, 197, 71, 0.25), 0 0 18px rgba(232, 197, 71, 0.6); pointer-events: none; z-index: 45; animation: hlpulse 1s infinite alternate; }
@keyframes hlpulse { to { box-shadow: 0 0 0 8px rgba(232, 197, 71, 0.1), 0 0 28px rgba(232, 197, 71, 0.9); } }

/* Music lab (?musiclab) */
#musiclab { position: fixed; left: 12px; top: 12px; z-index: 90; width: 700px; max-height: calc(100vh - 24px); overflow: auto; zoom: var(--ui);
  background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); padding: 10px 12px; }
#musiclab.folded { width: auto; padding: 0; }
#musiclab h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 2px; font: 700 15px var(--head); letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; }
#musiclab .ml-hint { margin: 0 0 8px; color: var(--dim); font-size: 12px; }
#musiclab .ml-row { display: grid; grid-template-columns: 76px 1fr; gap: 8px; align-items: start; margin: 5px 0; }
#musiclab .ml-row > span { color: var(--dim); padding-top: 4px; }
#musiclab .ml-row > div { display: flex; flex-wrap: wrap; gap: 4px; }
#musiclab button { background: #262b26; border: 1px solid #454a40; padding: 3px 8px; font-size: 12px; }
#musiclab button:hover { border-color: var(--accent); }
#musiclab button.on { background: #4a4221; border-color: var(--accent); color: #fff3c4; }
#musiclab button.def::after { content: ' ●'; color: var(--accent); }
#musiclab button.ev { background: #2e2622; border-color: #6a4a3a; }
#musiclab button.ev:hover { border-color: var(--accent); }
#musiclab button.ev:active { background: #5a3a2a; }
#musiclab .ml-now { margin: 8px 0 6px; font: 12px var(--mono); color: var(--good); white-space: pre-line; }
#musiclab .ml-sum { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#musiclab .ml-sum code { flex: 1 1 100%; font: 11px var(--mono); color: var(--ink); background: #141714; padding: 4px 6px; user-select: text; }

/* Control-group badges above the build bar */
#groups { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 6px); display: flex; gap: 4px; pointer-events: auto; }
#groups button { display: flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line); padding: 2px 7px 2px 4px; font-size: 12px; }
#groups button b { font: 600 12px var(--mono); }
#groups button.on { border-color: var(--accent); background: #3a3420; }

/* ---------- map overlays (O) ---------- */
.legend i.ring { background: none; border: 2px solid; border-radius: 50%; width: 10px; height: 10px; vertical-align: -1px; box-shadow: none; }
.legend span i + i { margin-left: -2px; }
#overlay-label { margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--line); font-size: 12px; }
#overlay-label .name { display: flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; letter-spacing: 0.05em; }
#overlay-label .name kbd { margin-left: auto; font: 600 12px var(--head); }
#overlay-label.off .name { color: var(--dim); font-weight: 400; }
#overlay-label .legend { margin-top: 2px; }
/* A town's specialty under the economy overlay, edged in the producer colour of what it makes. */
.clabel .econ { display: flex; align-items: center; gap: 4px; margin-top: 2px; padding: 1px 6px 1px 4px; border-left: 3px solid var(--dim); background: rgba(0, 0, 0, 0.35); font: 600 12px var(--mono); }
.clabel .econ .sp { font-size: 16px; line-height: 1; }
.clabel .econ.off { color: var(--dim); }