/* Age of Mist — panel theme. Dark by design (a spectator broadcast, like the reference), no external assets:
   fonts are local stacks, textures are inline SVG data URIs (allowed by img-src data:), and every dynamic value
   arrives through CSS custom properties set via CSSOM (the strict CSP blocks style="" attributes, not CSSOM). */

:root {
  --bg: #06080c;
  --bg-2: #0a0e14;
  --surface: rgba(17, 25, 36, 0.78);
  --surface-2: rgba(23, 33, 48, 0.9);
  --surface-solid: #0f1620;
  --line: #1c2837;
  --line-2: #2a3a50;
  --text: #dbe3ec;
  --muted: #8494a8;
  --faint: #748398;
  --gold: #e6bc62;
  --gold-2: #a8843b;
  --mist: #7ed8cb;
  --mist-2: #3f9e92;
  --ember: #ff8a4c;
  --blood: #ef5b52;
  --moss: #93c86e;
  --violet: #b09bff;
  --sky: #6fb2ff;
  --font-display: "Cinzel", "Cormorant SC", "Trajan Pro", "Copperplate", "Copperplate Gothic Bold", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: "JetBrains Mono", "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --radius: 6px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-state: 240ms;
  --duration-enter: 620ms;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 14px/1.55 var(--font-body);
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(126, 216, 203, 0.09), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(230, 188, 98, 0.07), transparent 60%),
    radial-gradient(1000px 700px at 50% 120%, rgba(111, 178, 255, 0.05), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16.2v32.4L28 64.8 0 48.6V16.2zM28 64.8l28 16.2M28 64.8L0 81' fill='none' stroke='%23ffffff' stroke-opacity='0.028'/%3E%3C/svg%3E"),
    var(--bg);
  padding-bottom: calc(44px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
a { color: var(--mist); text-decoration: none; }
a { transition: color var(--duration-fast) var(--ease-out-quart); }
a:hover { color: #b5efe6; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: rgba(230, 188, 98, 0.35); }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0 0 0.6em; }
code, pre, .mono { font-family: var(--font-mono); }
.hidden { display: none !important; }
.ui-icon { display: block; flex: 0 0 auto; overflow: visible; color: inherit; }
.icon-text, .icon-label { display: inline-flex; align-items: center; gap: 7px; }
.icon-label { color: inherit; }
.sprite-icon { display: block; flex: 0 0 auto; width: 48px; height: 48px; background-image: var(--sprite); background-size: 400% 400%; background-position: var(--sx) var(--sy); background-repeat: no-repeat; }
/* A25: one cell of a living-atlas art sheet (apps/api/public/assets/evolution/), cropped via background-position.
   Box size matches each atlas's own cell aspect ratio (ASSET_MANIFEST.md) so cropping never squashes the art. */
.atlas-cell { display: block; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; background-image: var(--atlas); background-size: var(--cols) 100%; background-position: var(--sx) var(--sy); background-repeat: no-repeat; }
.atlas-cell.spec { width: 36px; height: 48px; }
.atlas-cell.growth { width: 72px; height: 72px; border-radius: 2px; background-color: rgba(7, 13, 18, 0.32); }
.atlas-cell.chronicle { width: 52px; height: 96px; border-radius: 6px; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  padding: env(safe-area-inset-top) max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left));
  height: calc(60px + env(safe-area-inset-top));
  background: rgba(6, 8, 12, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand .sigil { display: block; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(126, 216, 203, 0.28)); transition: transform var(--duration-state) var(--ease-out-quint), filter var(--duration-state) var(--ease-out-quint); }
.brand:hover .sigil { transform: rotate(3deg) scale(1.04); filter: drop-shadow(0 0 12px rgba(230, 188, 98, 0.32)); }
.brand .wordmark { display: flex; flex-direction: column; line-height: 1; }
.brand .wordmark b { font: 700 17px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: #ead5a0; }
.brand .wordmark small { font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.32em; color: var(--muted); margin-top: 5px; text-transform: uppercase; }
.nav { display: flex; gap: 4px; align-items: center; }
.nav a { position: relative; display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 9px 12px; border-radius: 4px; transition: color var(--duration-state) var(--ease-out-quart), background-color var(--duration-state) var(--ease-out-quart); }
.nav a .ui-icon { color: var(--faint); transition: color var(--duration-state) var(--ease-out-quart); }
.nav a:hover .ui-icon, .nav a.active .ui-icon { color: currentColor; }
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.nav a.active { color: var(--gold); background: rgba(230, 188, 98, 0.07); }
.nav a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px; background: var(--gold); transform-origin: left; animation: navline 360ms var(--ease-out-expo) both; }
@keyframes navline { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.brand .wordmark b, .nav a, .live, .account { white-space: nowrap; }
.nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
/* A laptop screen holds the links or the email, not both: the links win (they were cut to "RL" at 1440 px). */
@media (max-width: 1500px) { .account .who { display: none; } .nav a { padding: 9px 9px; letter-spacing: 0.1em; } .topbar { gap: 18px; } }
@media (max-width: 1080px) { .brand .wordmark small { display: none; } .nav a { padding: 9px 8px; } .topbar { gap: 16px; } }
@media (max-width: 860px) { .brand .wordmark { display: none; } }
@media (max-width: 560px) { .topbar .live { font-size: 0; gap: 0; } .topbar { gap: 10px; } .nav a > span { display: none; } .nav a { padding: 9px; } }
.account { display: flex; align-items: center; gap: 10px; font: 12px var(--font-mono); color: var(--muted); }
.account .who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar select.lang { padding: 6px 8px; font: 11px var(--font-mono); color: var(--muted); background: transparent; border-color: var(--line); max-width: 150px; }

/* ---------- Status bar ---------- */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 26px; align-items: center;
  height: calc(36px + env(safe-area-inset-bottom)); padding: 0 max(22px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(22px, env(safe-area-inset-left)); overflow: hidden; white-space: nowrap;
  background: rgba(6, 8, 12, 0.94); border-top: 1px solid var(--line);
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}
.statusbar b { color: var(--mist); font-weight: 600; margin-left: 7px; }
.statusbar .gold b { color: var(--gold); }
.statusbar .legal-links { margin-left: auto; display: inline-flex; gap: 14px; }
.statusbar .legal-links a { color: var(--faint); }
.statusbar .legal-links a:hover { color: var(--mist); }
@media (max-width: 760px) { .statusbar > span:not(.legal-links) { display: none; } .statusbar .legal-links { margin: 0 auto; } }

/* ---------- Page ---------- */
.page { max-width: 1320px; margin: 0 auto; padding: 30px 22px 60px; }
.page, .auth { animation: view-resolve var(--duration-enter) var(--ease-out-expo) both; }
@keyframes view-resolve { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.reveal-item { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.995); filter: blur(3px); }
.reveal-item.is-visible { animation: reveal-rise 760ms var(--ease-out-expo) var(--reveal-delay, 0ms) both; }
@keyframes reveal-rise { to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } }
.page.wide { max-width: 1560px; }
.legal-page { max-width: 860px; margin: 0 auto; }
.legal-page h1 { font: 700 clamp(30px, 5vw, 48px)/1.08 var(--font-display); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 18px; }
.legal-page h2 { font: 600 20px/1.25 var(--font-display); letter-spacing: .04em; color: var(--gold); margin: 32px 0 10px; }
.legal-page p, .legal-page li, .legal-controller { font-size: 15px; line-height: 1.72; }
.legal-page ul { padding-left: 22px; }
.legal-page li + li { margin-top: 8px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--line); font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.legal-nav a { color: var(--muted); }
.legal-nav a[aria-current="page"] { color: var(--gold); }
.legal-controller { display: grid; grid-template-columns: minmax(150px, .45fr) 1fr; gap: 6px 18px; margin: 24px 0; padding: 18px; background: var(--surface); border: 1px solid var(--line); }
.legal-controller dt { color: var(--muted); }
.legal-controller dd { margin: 0; overflow-wrap: anywhere; }
.legal-table td { vertical-align: top; white-space: normal; }
.legal-footer { display: flex; justify-content: center; gap: 22px; padding: 26px 20px 50px; border-top: 1px solid var(--line); font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.legal-note { margin-top: 12px; color: var(--faint); font-size: 12px; }
.page > :where(.panel, .grid, .split, .stack, .alerts, div:not(.divider)) { margin-bottom: 16px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.eyebrow { font: 600 11px/1 var(--font-mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember); margin-bottom: 10px; }
.eyebrow::before { content: "// "; color: var(--faint); }
.title { font: 700 clamp(26px, 3.4vw, 40px)/1.08 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.subtitle { color: var(--muted); margin-top: 8px; max-width: 70ch; }
.divider { height: 1px; background: linear-gradient(90deg, var(--mist-2), transparent 40%); margin: 14px 0 24px; opacity: 0.6; }
.section-title { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 34px 0 14px; }
.section-title .ui-icon { color: var(--gold); filter: drop-shadow(0 0 7px rgba(230, 188, 98, 0.38)); }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.back { display: inline-flex; gap: 6px; font: 600 11px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; }

/* ---------- Cinematic scene headers ---------- */
.scene-panel { position: relative; isolation: isolate; overflow: hidden; }
.scene-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene-art picture, .scene-art img { display: block; width: 100%; height: 100%; }
.scene-art img { object-fit: cover; transform: scale(1.025); animation: scene-breathe 18s ease-in-out infinite alternate; }
.scene-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 12, 0.96) 0%, rgba(5, 8, 12, 0.78) 42%, rgba(5, 8, 12, 0.18) 78%, rgba(5, 8, 12, 0.5) 100%), linear-gradient(0deg, rgba(5, 8, 12, 0.9), transparent 58%); }
.scene-content { position: relative; z-index: 2; }
.world-scene { min-height: 285px; padding: clamp(24px, 4vw, 42px); display: flex; align-items: flex-end; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38); }
.world-scene .scene-content { width: 100%; }
.world-scene .page-head { margin: 0; align-items: flex-end; }
.world-scene .title { font-size: clamp(30px, 4.5vw, 54px); color: #f1e8d7; text-shadow: 0 3px 24px rgba(0, 0, 0, 0.8); }
.world-scene .subtitle { color: #bdc5c9; }
.command-scene { min-height: 240px; display: flex; align-items: flex-end; padding-top: 70px; }
.command-scene .scene-art::after { background: linear-gradient(90deg, rgba(5, 8, 12, 0.94) 0%, rgba(5, 8, 12, 0.76) 48%, rgba(5, 8, 12, 0.28) 76%, rgba(5, 8, 12, 0.62) 100%), linear-gradient(0deg, rgba(5, 8, 12, 0.88), transparent 66%); }
.command-scene .scene-content { width: 100%; }
@keyframes scene-breathe { from { transform: scale(1.025) translate3d(-0.35%, 0, 0); } to { transform: scale(1.065) translate3d(0.35%, -0.4%, 0); } }
@media (max-width: 680px) {
  .world-scene { min-height: 350px; padding: 24px 18px; }
  .scene-art::after, .command-scene .scene-art::after { background: linear-gradient(0deg, rgba(5, 8, 12, 0.96) 0%, rgba(5, 8, 12, 0.72) 62%, rgba(5, 8, 12, 0.28) 100%); }
  .world-scene .page-head { align-items: flex-start; }
  .command-scene { min-height: 360px; padding-top: 135px; }
}

/* ---------- Grid ---------- */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); align-items: start; }
.split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.pending { opacity: 0.6; }
.grow { flex: 1; min-width: 0; }
.grow > input, input.grow { width: 100%; }
@media (max-width: 1100px) { .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split, .split.even { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) { .g2, .g3, .g4, .g6 { grid-template-columns: minmax(0, 1fr); } .nav a { padding: 8px 7px; letter-spacing: 0.08em; } .topbar { gap: 12px; padding: 0 14px; } .brand .wordmark small { display: none; } .account .who { display: none; } .page { padding: 22px 14px 50px; } }

/* ---------- Panels ---------- */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  min-width: 0;
  transition: border-color var(--duration-state) var(--ease-out-quart), box-shadow var(--duration-state) var(--ease-out-quart), transform var(--duration-state) var(--ease-out-quart);
}
.panel::before, .panel::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; opacity: 0.7; }
.panel::before { top: -1px; left: -1px; border-top: 1px solid var(--gold-2); border-left: 1px solid var(--gold-2); border-top-left-radius: var(--radius); }
.panel::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--gold-2); border-right: 1px solid var(--gold-2); border-bottom-right-radius: var(--radius); }
.panel.flush { padding: 0; overflow: hidden; }
.panel.glow { box-shadow: 0 0 0 1px rgba(126, 216, 203, 0.08), 0 20px 60px rgba(0, 0, 0, 0.35); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.panel.flush .panel-head { padding: 14px 18px 0; }
.panel-title { display: flex; align-items: center; gap: 9px; font: 600 11.5px/1.2 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); }
.panel-title .ico { width: 24px; height: 24px; display: grid; place-items: center; color: var(--mist); border: 1px solid rgba(126, 216, 203, 0.2); transform: rotate(30deg); }
.panel-title .ico .ui-icon { transform: rotate(-30deg); transition: transform var(--duration-state) var(--ease-out-expo), filter var(--duration-state) var(--ease-out-quart); }
.panel:hover .panel-title .ico .ui-icon { transform: rotate(-30deg) scale(1.12); filter: drop-shadow(0 0 7px rgba(126, 216, 203, 0.42)); }
.panel-note { font: 11px var(--font-mono); color: var(--faint); }

/* ---------- Stats ---------- */
.stat { position: relative; padding: 16px 16px 14px; background: linear-gradient(180deg, rgba(23, 33, 48, 0.85), rgba(14, 20, 30, 0.7)); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.stat > :not(.sprite-icon) { position: relative; z-index: 1; }
.stat .stat-sprite { position: absolute; z-index: 0; width: 62px; height: 62px; right: 4px; top: 2px; opacity: 0.32; filter: saturate(0.82) drop-shadow(0 5px 8px rgba(0,0,0,0.48)); transform-origin: center; transition: opacity var(--duration-state) var(--ease-out-quart), transform 500ms var(--ease-out-expo), filter var(--duration-state) var(--ease-out-quart); }
.stat:hover .stat-sprite { opacity: 0.68; transform: translate3d(-3px, -4px, 0) scale(1.12); filter: saturate(1) drop-shadow(0 9px 13px rgba(0,0,0,0.55)); }
.stat::before { content: ""; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-top: 1px solid var(--mist-2); border-left: 1px solid var(--mist-2); border-top-left-radius: var(--radius); }
.stat .label { font: 600 10.5px/1.2 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.stat .value { font: 700 30px/1.1 var(--font-display); letter-spacing: 0.04em; margin-top: 10px; font-variant-numeric: lining-nums tabular-nums; color: var(--mist); text-shadow: 0 0 18px rgba(126, 216, 203, 0.28); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .sub { font: 11px/1.3 var(--font-mono); color: var(--faint); margin-top: 6px; letter-spacing: 0.04em; }
.stat.gold .value { color: var(--gold); text-shadow: 0 0 18px rgba(230, 188, 98, 0.28); }
.stat.ember .value { color: var(--ember); text-shadow: 0 0 18px rgba(255, 138, 76, 0.28); }
.stat.moss .value { color: var(--moss); text-shadow: 0 0 18px rgba(147, 200, 110, 0.25); }
.stat.violet .value { color: var(--violet); text-shadow: 0 0 18px rgba(176, 155, 255, 0.28); }
.stat.blood .value { color: var(--blood); text-shadow: 0 0 18px rgba(239, 91, 82, 0.3); }
.stat.small .value { font-size: 22px; }

/* ---------- Bars, meters, tracks ---------- */
.bar { position: relative; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--mist-2), var(--mist)); box-shadow: 0 0 10px rgba(126, 216, 203, 0.45); transition: width 0.6s ease; }
.bar.gold > i { background: linear-gradient(90deg, var(--gold-2), var(--gold)); box-shadow: 0 0 10px rgba(230, 188, 98, 0.4); }
.bar.ember > i { background: linear-gradient(90deg, #b8502a, var(--ember)); box-shadow: 0 0 10px rgba(255, 138, 76, 0.4); }
.bar.blood > i { background: linear-gradient(90deg, #9c2f2a, var(--blood)); }
.bar.moss > i { background: linear-gradient(90deg, #4f7d35, var(--moss)); }
.bar.violet > i { background: linear-gradient(90deg, #6a55c7, var(--violet)); }
.bar.banner > i { background: var(--c, var(--mist)); box-shadow: 0 0 10px var(--c, transparent); }
.bar.thick { height: 9px; }
.bar.mini { width: 44px; height: 4px; flex-shrink: 0; }

.phase-track { display: flex; gap: 3px; position: relative; margin-top: 12px; }
.phase-track .seg { flex: 0 0 var(--w); height: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); position: relative; overflow: hidden; }
.phase-track .seg.done { background: rgba(126, 216, 203, 0.35); }
.phase-track .seg.now { background: rgba(255, 255, 255, 0.07); }
.phase-track .seg.now > i { position: absolute; inset: 0 auto 0 0; width: var(--fill); background: linear-gradient(90deg, var(--mist-2), var(--gold)); box-shadow: 0 0 12px rgba(230, 188, 98, 0.5); animation: phase-glow 2.4s ease-in-out infinite alternate; }
@keyframes phase-glow { to { filter: brightness(1.22); box-shadow: 0 0 18px rgba(230, 188, 98, 0.72); } }
.phase-labels { display: flex; gap: 3px; margin-top: 7px; }
.phase-labels span { flex: 0 0 var(--w); font: 600 10px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phase-labels span.now { color: var(--gold); }
.phase-labels span.done { color: var(--mist-2); }
.phase-labels { margin-bottom: 18px; }
.panel > div:last-child > .phase-labels, .panel > .phase-labels:last-child { margin-bottom: 0; }

/* ---------- Badges, pills ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-2); font: 600 10px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.badge.gold { color: var(--gold); border-color: rgba(230, 188, 98, 0.4); background: rgba(230, 188, 98, 0.06); }
.badge.mist { color: var(--mist); border-color: rgba(126, 216, 203, 0.4); background: rgba(126, 216, 203, 0.06); }
.badge.ember { color: var(--ember); border-color: rgba(255, 138, 76, 0.4); background: rgba(255, 138, 76, 0.06); }
.badge.blood { color: var(--blood); border-color: rgba(239, 91, 82, 0.45); background: rgba(239, 91, 82, 0.07); }
.badge.moss { color: var(--moss); border-color: rgba(147, 200, 110, 0.4); background: rgba(147, 200, 110, 0.06); }
.badge.violet { color: var(--violet); border-color: rgba(176, 155, 255, 0.4); background: rgba(176, 155, 255, 0.07); }
.live { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mist); box-shadow: 0 0 0 0 rgba(126, 216, 203, 0.6); animation: pulse 2s infinite; }
.live.off { color: var(--faint); }
.live.off::before { background: var(--faint); animation: none; }
.live.warn { color: var(--ember); }
.live.warn::before { background: var(--ember); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(126, 216, 203, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(126, 216, 203, 0); } 100% { box-shadow: 0 0 0 0 rgba(126, 216, 203, 0); } }

/* ---------- Buttons & inputs ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; font: 700 11.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #1a1206; background: linear-gradient(180deg, #f0cd7c, var(--gold)); box-shadow: 0 0 0 1px rgba(230, 188, 98, 0.3), 0 6px 20px rgba(230, 188, 98, 0.18); transition: transform var(--duration-fast) var(--ease-out-expo), filter var(--duration-fast) var(--ease-out-quart), border-color var(--duration-state) var(--ease-out-quart), color var(--duration-state) var(--ease-out-quart), background-color var(--duration-state) var(--ease-out-quart); white-space: nowrap; }
.btn::after { content: ""; position: absolute; inset: -100% auto -100% -35%; width: 24%; transform: rotate(18deg) translateX(-220%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent); transition: transform 560ms var(--ease-out-quart); pointer-events: none; }
.btn:hover::after { transform: rotate(18deg) translateX(720%); }
.btn .ui-icon { transition: transform var(--duration-fast) var(--ease-out-expo); }
.btn:hover .ui-icon { transform: translate3d(1px, -1px, 0); }
.btn:hover { filter: brightness(1.08); color: #1a1206; transform: translate3d(0, -1px, 0); }
.btn:active { transform: translate3d(0, 1px, 0) scale(0.98); transition-duration: 80ms; }
.btn:disabled { opacity: 0.45; cursor: default; filter: none; }
.btn:disabled:hover { transform: none; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--mist-2); color: var(--mist); }
.btn.mist { background: linear-gradient(180deg, #a3eee3, var(--mist)); color: #062521; box-shadow: 0 0 0 1px rgba(126, 216, 203, 0.3), 0 6px 20px rgba(126, 216, 203, 0.15); }
.btn.danger { background: transparent; color: var(--blood); border-color: rgba(239, 91, 82, 0.45); box-shadow: none; }
.btn.sm { padding: 7px 11px; font-size: 10.5px; }
input, select, textarea { font: 13px var(--font-body); color: var(--text); background: rgba(6, 8, 12, 0.65); border: 1px solid var(--line-2); border-radius: 4px; padding: 9px 11px; outline: none; min-width: 0; transition: border-color var(--duration-state) var(--ease-out-quart), box-shadow var(--duration-state) var(--ease-out-quart), background-color var(--duration-state) var(--ease-out-quart); }
input:hover, select:hover, textarea:hover { border-color: #3a4c63; }
input:focus, select:focus, textarea:focus { border-color: var(--mist-2); background: rgba(8, 13, 18, 0.9); box-shadow: 0 0 0 3px rgba(126, 216, 203, 0.12); }
input[type="color"] { padding: 2px; width: 46px; height: 38px; cursor: pointer; }
input[type="range"] { accent-color: var(--gold); padding: 0; }
input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; }
textarea { width: 100%; resize: vertical; }
label.field .hint { font: 12.5px/1.45 var(--font-body); letter-spacing: normal; text-transform: none; color: var(--muted); }
label.field { display: flex; flex-direction: column; gap: 6px; font: 600 10.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
label.check { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text); cursor: pointer; padding: 4px 0; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-row > * { flex: 1 1 160px; }
.form-row > .btn { flex: 0 0 auto; }
.msg { font: 12px var(--font-mono); color: var(--muted); min-height: 1em; margin-top: 8px; }
.msg.error, .error { color: var(--blood); }
.msg.ok { color: var(--moss); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; font: 600 10px/1.2 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 10px 12px; border-bottom: 1px solid rgba(28, 40, 55, 0.6); vertical-align: middle; }
table.data tbody tr { transition: background 0.15s ease; }
table.data tbody tr:hover { background: rgba(126, 216, 203, 0.035); }
table.data tbody tr.me { background: rgba(230, 188, 98, 0.06); }
table.data tbody tr.clickable { cursor: pointer; }
table.data .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .rank { font: 700 14px var(--font-display); color: var(--muted); width: 36px; }
table.data tr:nth-child(1) .rank { color: var(--gold); }
table.data tr:nth-child(2) .rank { color: #cfd6df; }
table.data tr:nth-child(3) .rank { color: #d39a6a; }
table.data .mono { font-size: 12px; color: var(--muted); }
.empire-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.empire-cell .name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empire-cell a.name:hover { color: var(--gold); }
.prestige-cell { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.prestige-cell .bar { flex: 1; }
.prestige-cell b { font: 600 13px var(--font-mono); min-width: 58px; text-align: right; }

/* ---------- Key/values & lists ---------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; }
.kv dt { font: 600 10.5px/1.9 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.kv dd { margin: 0; text-align: right; font-family: var(--font-mono); }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 10px 0; border-bottom: 1px solid rgba(28, 40, 55, 0.6); }
.list > li:last-child { border-bottom: 0; }
.empty { padding: 26px 12px; text-align: center; color: var(--faint); font: 12px var(--font-mono); letter-spacing: 0.06em; }
.empty .ico { width: 52px; height: 52px; margin: 0 auto 12px; display: grid; place-items: center; color: var(--mist); border: 1px solid rgba(126, 216, 203, 0.18); transform: rotate(30deg); opacity: 0.72; }
.empty .ico .ui-icon { transform: rotate(-30deg); }

/* ---------- Feed ---------- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid rgba(28, 40, 55, 0.55); animation: slidein 0.35s ease; }
.feed li:last-child { border-bottom: 0; }
.feed .dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: rgba(126, 216, 203, 0.08); border: 1px solid rgba(126, 216, 203, 0.25); }
.feed .dot .ui-icon { color: var(--mist); }
.feed li.warn .dot .ui-icon { color: var(--ember); }
.feed li.critical .dot .ui-icon { color: var(--blood); }
.feed li.warn .dot { background: rgba(255, 138, 76, 0.08); border-color: rgba(255, 138, 76, 0.35); }
.feed li.critical .dot { background: rgba(239, 91, 82, 0.1); border-color: rgba(239, 91, 82, 0.45); }
.feed .text { font-size: 13px; color: var(--text); }
.feed .text .sub { display: block; font: 11px var(--font-mono); color: var(--faint); margin-top: 2px; }
.feed .meta { font: 11px var(--font-mono); color: var(--faint); white-space: nowrap; text-align: right; }
.feed.scroll { max-height: 520px; overflow-y: auto; padding-right: 6px; }
@keyframes slidein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Alerts ---------- */
.alerts { display: flex; flex-direction: column; gap: 8px; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 4px; border: 1px solid rgba(126, 216, 203, 0.25); background: rgba(126, 216, 203, 0.05); font-size: 13px; }
.alert.warn { border-color: rgba(255, 138, 76, 0.35); background: rgba(255, 138, 76, 0.06); }
.alert.critical { border-color: rgba(239, 91, 82, 0.5); background: rgba(239, 91, 82, 0.08); }
.alert .ico { width: 22px; height: 22px; display: grid; place-items: center; color: var(--mist); }
.alert.warn .ico { color: var(--ember); }
.alert.critical .ico { color: var(--blood); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar, .nav::-webkit-scrollbar { display: none; }
.tabs button { display: inline-flex; align-items: center; min-height: 44px; gap: 7px; background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 16px; cursor: pointer; font: 600 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tabs button .ui-icon { color: var(--faint); }
.tabs button.active .ui-icon { color: var(--gold); }
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--gold); border-bottom-color: var(--gold); }
.tabs button .count { margin-left: 7px; color: var(--faint); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; min-height: min(760px, calc(100svh - 60px)); padding: clamp(86px, 11vh, 126px) 22px 56px; text-align: left; border-bottom: 1px solid var(--line); isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 8, 12, 0.98) 0%, rgba(5, 8, 12, 0.9) 35%, rgba(5, 8, 12, 0.2) 70%, rgba(5, 8, 12, 0.45) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 38%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.28; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; pointer-events: none; }
.hero-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: saturate(0.82) contrast(1.04); animation: hero-art-in 1.2s var(--ease-out-expo) both; }
.hero-copy { width: min(1320px, 100%); margin: 0 auto; padding-right: 50%; position: relative; }
.hero .mist-layer { position: absolute; inset: -30%; pointer-events: none; background:
  radial-gradient(35% 25% at 30% 40%, rgba(170, 200, 215, 0.10), transparent 70%),
  radial-gradient(30% 22% at 70% 55%, rgba(126, 216, 203, 0.09), transparent 70%),
  radial-gradient(40% 30% at 50% 80%, rgba(200, 210, 225, 0.07), transparent 70%);
  filter: blur(8px); animation: drift 38s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; }
.hero .mist-layer.b { animation-duration: 52s; animation-direction: alternate-reverse; opacity: 0.8; transform: scale(1.2); }
@keyframes drift { 0% { transform: translate3d(-6%, -2%, 0) scale(1.05); } 100% { transform: translate3d(6%, 3%, 0) scale(1.15); } }
.hero .crest { width: 82px; height: 82px; margin: 0 0 22px; filter: drop-shadow(0 0 24px rgba(126, 216, 203, 0.28)) drop-shadow(0 0 50px rgba(230, 188, 98, 0.12)); position: relative; }
.hero h1 { position: relative; font: 700 clamp(46px, 7vw, 88px)/0.94 var(--font-display); letter-spacing: 0.065em; text-transform: uppercase; color: #ead5a0; text-shadow: 0 2px 24px rgba(3, 5, 8, 0.85); max-width: 8ch; text-wrap: balance; }
.hero .tag { position: relative; font: 500 12px var(--font-mono); letter-spacing: 0.5em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }
.hero .lead { position: relative; max-width: 54ch; margin: 24px 0 0; font-size: 17px; line-height: 1.7; color: #bdc8d5; text-shadow: 0 2px 18px rgba(3, 5, 8, 0.9); }
.hero .lead em { font-style: normal; color: var(--mist); }
.hero .cta { position: relative; display: flex; gap: 12px; justify-content: flex-start; margin-top: 30px; flex-wrap: wrap; }
.hero-stats { position: relative; display: flex; justify-content: flex-start; gap: 0; margin: 54px auto 0; width: min(1320px, 100%); padding-right: 50%; flex-wrap: wrap; }
.hero-stats > div { flex: 1 1 120px; padding: 6px 18px; border-left: 1px solid rgba(126, 216, 203, 0.18); }
.hero-stats > div:first-child { border-left: 0; }
.hero-stats b { display: block; font: 700 32px/1.1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.hero-stats span { font: 600 10.5px var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
@keyframes hero-art-in { from { opacity: 0; transform: scale(1.045); } to { opacity: 1; transform: scale(1); } }
.hero-copy > *, .hero-stats { animation: hero-copy-in 760ms var(--ease-out-expo) both; }
.hero-copy > :nth-child(1) { animation-delay: 80ms; }
.hero-copy > :nth-child(2) { animation-delay: 130ms; }
.hero-copy > :nth-child(3) { animation-delay: 180ms; }
.hero-copy > :nth-child(4) { animation-delay: 230ms; }
.hero-copy > :nth-child(5) { animation-delay: 280ms; }
.hero-stats { animation-delay: 360ms; }
@keyframes hero-copy-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pillar { padding: 22px; overflow: hidden; }
.pillar::after { width: 42px; height: 42px; border-color: rgba(126, 216, 203, 0.26); }
.pillar .glyph { width: 46px; height: 46px; display: grid; place-items: center; color: var(--gold); margin-bottom: 14px; border: 1px solid rgba(230, 188, 98, 0.3); transform: rotate(30deg); }
.pillar .glyph .ui-icon { transform: rotate(-30deg); transition: transform 480ms var(--ease-out-expo), filter 480ms var(--ease-out-quart); }
.pillar:hover .glyph .ui-icon { transform: rotate(-22deg) scale(1.16); filter: drop-shadow(0 0 10px rgba(230,188,98,0.5)); }
.pillar h3 { font: 700 16px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.pillar p { color: var(--muted); font-size: 13.5px; }
@media (max-width: 800px) { .pillars { grid-template-columns: minmax(0, 1fr); } }
.steps { counter-reset: step; display: grid; gap: 12px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold-2); color: var(--gold); font: 700 13px var(--font-display); }
.step b { display: block; margin-bottom: 2px; }
.step span { color: var(--muted); font-size: 13px; }
.code { position: relative; background: rgba(4, 6, 9, 0.8); border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; font: 12.5px/1.7 var(--font-mono); color: #c8d5e2; overflow-x: auto; white-space: pre; }
.code .c { color: var(--faint); }
.code .k { color: var(--gold); }
.code .s { color: var(--mist); }
.copy { position: absolute; top: 8px; right: 8px; }
/* A single sentence meant for a human to paste into a chat with their agent — prose, not a code line, so it
   wraps normally (unlike .code's `white-space: pre`) and reads in the body font. Its copy button floats
   instead of sitting absolutely positioned like .code's: on a short code snippet the top-right corner is
   always blank, but a full-width sentence can reach that corner on its first line, so the text needs to wrap
   around the button rather than run underneath it. */
.prompt-box { position: relative; background: rgba(230, 188, 98, 0.06); border: 1px dashed var(--gold-2); border-radius: 4px; padding: 12px 14px; font: 13px/1.6 var(--font-body); color: var(--text); white-space: pre-wrap; }
.prompt-box .copy { position: static; float: right; margin: 0 0 8px 10px; }

/* ---------- World cards ---------- */
.world-card { display: block; color: var(--text); }
.world-card:hover { color: var(--text); border-color: var(--line-2); transform: translateY(-2px); }
.world-card h3 { font: 700 20px var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; margin: 8px 0 4px; }
.world-card .facts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font: 11px var(--font-mono); color: var(--muted); letter-spacing: 0.06em; }
.world-card .facts b { color: var(--text); font-weight: 600; }

/* ---------- Empire hero ---------- */
.empire-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; }
.empire-hero .name { font: 700 clamp(24px, 3vw, 36px)/1.1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.empire-hero .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.empire-hero .shield { width: 78px; height: 92px; }
@media (max-width: 800px) { .empire-hero { grid-template-columns: auto 1fr; } .empire-hero .gauges { grid-column: 1 / -1; } }
.gauges { display: flex; gap: 22px; }
.gauge { text-align: center; }
.gauge svg { width: 86px; height: 86px; display: block; margin: 0 auto; }
.gauge .g-label { font: 600 10px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.gauge text { font-family: var(--font-display); font-weight: 700; }

.res-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.res { padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(6, 8, 12, 0.45); }
.res .r-top { display: flex; align-items: center; gap: 7px; font: 600 10px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.res .r-top .ui-icon { color: var(--c); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 55%, transparent)); }
.res .r-val { font: 700 20px var(--font-display); margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.res .r-inc { font: 11px var(--font-mono); color: var(--faint); }
.res .r-inc.up { color: var(--moss); }
.res .r-inc.down { color: var(--blood); }
.res .bar { margin-top: 8px; height: 4px; }

.city-card { padding: 14px; border: 1px solid var(--line); border-radius: 4px; background: rgba(6, 8, 12, 0.4); transition: border-color var(--duration-state) var(--ease-out-quart), background-color var(--duration-state) var(--ease-out-quart), transform var(--duration-state) var(--ease-out-quart); }
.city-card:hover { border-color: var(--line-2); background: rgba(11, 17, 24, 0.68); }
.city-card h4 { margin: 0; font: 700 15px var(--font-display); letter-spacing: 0.06em; }
.city-card .cmeta { font: 11px var(--font-mono); color: var(--faint); margin-top: 3px; }
.city-card .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.city-card .kpis small { display: flex; justify-content: space-between; font: 10.5px var(--font-mono); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 5px; }
.city-card .blds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.city-card .blds span { font: 10.5px var(--font-mono); color: var(--muted); padding: 2px 7px; border: 1px solid var(--line); border-radius: 3px; }
.city-card .blds .ui-icon { color: var(--mist); }
.city-card .blds span b { color: var(--gold); font-weight: 600; margin-left: 4px; }
.city-card > .row:first-child { align-items: flex-start; }
.city-card > .row:first-child > .row:first-child { min-width: 0; }
.city-card .atlas-cell.growth { margin: -3px 3px 0 -3px; }
.footprint-charts { align-items: stretch; }
.chart-rows { display: grid; gap: 14px; }
.chart-row { display: grid; gap: 6px; font: 12px var(--font-display); }
.chart-row .bar { height: 6px; background: rgba(126,216,203,0.1); }
.chart-row .bar i { background: linear-gradient(90deg, rgba(126,216,203,0.48), #7ed8cb); }
.waste-chart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.waste-row { min-width: 0; padding: 12px; border: 1px solid var(--line); background: rgba(5, 9, 13, 0.38); }
.waste-row .row { display: grid; gap: 10px; min-height: 54px; align-content: space-between; font: 11px var(--font-mono); color: var(--muted); }
.waste-row .row b { font: 600 clamp(17px, 2vw, 23px) var(--font-display); color: var(--text); }
.waste-row.ember { border-top-color: rgba(255,138,76,0.48); }
.waste-row.gold { border-top-color: rgba(230,188,98,0.48); }
.chart-footnote { margin: 12px 0 0; }
.history-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.history-charts > .panel { min-width: 0; margin: 0; }
.trend-chart { display: block; width: 100%; height: auto; min-height: 130px; overflow: visible; }
.trend-grid { stroke: rgba(207,220,221,0.22); stroke-width: 1; stroke-dasharray: 2 5; }
.trend-axis { fill: #d8e0df; font: 11px var(--font-mono); }
.trend-line { vector-effect: non-scaling-stroke; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text); font: 11px var(--font-mono); }
.trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.trend-legend i { width: 17px; height: 3px; background: var(--series); }
.chart-caption { margin: 10px 0 0; color: var(--text); font: 12px var(--font-mono); }
.chart-data { margin-top: 8px; color: var(--muted); font-size: 12px; }
.chart-data > summary { min-height: 36px; display: flex; align-items: center; cursor: pointer; }

.alert-count { min-width: 21px; min-height: 21px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.07); color: var(--text); }

.link-btn { margin-left: auto; background: none; border: 0; padding: 0; font: 600 10px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); cursor: pointer; }
.link-btn:hover { color: var(--text); }
.stage { display: inline-block; flex: 1; min-width: 10px; height: 5px; border-radius: 2px; background: var(--line-2); }
.stage.in_progress { background: var(--gold); }
.stage.done { background: var(--moss); }
.stage.blocked { background: var(--ember); }
.stage.intention { background: transparent; border: 1px dashed var(--mist); }
.stage.contingency { background: transparent; border: 1px dashed var(--violet); }
.stage.dropped { background: var(--line); }

/* Campaign plan (decision 229): the agent's lanes as columns, dependency lines drawn over the board. */
/* It lays itself out by its own width (a container), not the viewport's: it lives in a drawer. */
.plan-view { container-type: inline-size; }
.plan-objective { font: 700 22px/1.3 var(--font-display); margin: 4px 0 6px; color: var(--text); }
.plan-ambition { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 10px 0 0; padding: 8px 12px; border-left: 2px solid var(--gold-2); border-radius: 0 4px 4px 0; background: rgba(40, 33, 20, 0.45); color: var(--text); font: italic 14px/1.45 Georgia, serif; }
.plan-ambition .mono { color: var(--gold); font: normal 10px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.plan-side { display: grid; gap: 10px; }
.plan-progress { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); }
.plan-progress-num { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 12px; }
.plan-progress-num b { color: var(--text); font: 700 24px/1 var(--font-display); }
.plan-progress-bar { display: flex; gap: 3px; }
.plan-progress-bar .stage { height: 7px; }
.plan-guide-all .guide-form { padding-top: 8px; }
.guide-form textarea { width: 100%; resize: vertical; }
.plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 400px); gap: 20px 28px; align-items: start; }
.plan-board-head { flex-wrap: wrap; gap: 6px 16px; }
.plan-legend { gap: 4px 12px; }
.plan-board { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 270px); gap: 80px; min-height: 240px; overflow-x: auto; padding: 16px 40px 18px 16px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, 0.16); }
@container (max-width: 860px) { .plan-layout { grid-template-columns: minmax(0, 1fr); } }
.plan-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.plan-link { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: 0.7; }
.plan-link.done { stroke: var(--moss); stroke-dasharray: none; }
.plan-lane { position: relative; display: flex; flex-direction: column; gap: 42px; min-width: 0; }
.plan-lane-title { font: 600 10px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: center; }
.plan-card { display: flex; flex-direction: column; gap: 8px; min-height: 104px; padding: 12px 14px; border-radius: 6px; border: 1.5px solid var(--line-2); background: linear-gradient(180deg, rgba(22, 31, 43, 0.97), rgba(10, 15, 22, 0.98)); color: var(--text); text-align: left; font: 13px/1.35 var(--font-body); cursor: pointer; transition: transform 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart); }
.plan-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.plan-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-card-num { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--muted); font: 600 11px var(--font-mono); }
.plan-card-why { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--muted); font: italic 12px/1.4 Georgia, serif; }
.plan-dep { display: flex; width: 100%; padding: 3px 0; text-align: left; }
.plan-card.in_progress { border-color: var(--gold); }
.plan-card.done { border-color: var(--moss); }
.plan-card.blocked { border-color: var(--ember); }
.plan-card.intention { border-style: dashed; border-color: var(--mist); }
.plan-card.contingency { border-style: dashed; border-color: var(--violet); }
.plan-card.dropped { opacity: 0.5; }
.plan-card.dropped .plan-card-label { text-decoration: line-through; }
.plan-card.selected { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(230, 188, 98, 0.14); }
.plan-card-label { font-weight: 600; }
.plan-legend .stage { flex: none; width: 18px; }
.plan-detail { display: flex; flex-direction: column; gap: 12px; }
.plan-detail > .btn { align-self: flex-start; }
.plan-detail-title { font: 700 18px/1.3 var(--font-display); margin: 0; color: var(--text); }
.plan-sub, .why-label { font: 600 10px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.why { padding: 10px 12px; border-left: 2px solid var(--mist); background: rgba(126, 216, 203, 0.05); }
.why .quote { font: italic 13px/1.5 Georgia, serif; color: var(--text); }
.plan-act { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.diamond { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; margin-right: 6px; background: var(--gold); transform: rotate(45deg); }
.note-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.plan-history { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.plan-history li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.plan-history li:last-child { border-bottom: none; }
.plan-history .dot { display: inline-block; flex-shrink: 0; width: 9px; height: 9px; border: 2px solid var(--gold); border-radius: 50%; }

/* The urgent dispatch is a distinct decision moment, opened from the war-room alert. */
.dispatch-screen { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; color: var(--text); }
.dispatch-screen-backdrop { position: fixed; inset: 0; background: rgba(3, 6, 10, 0.82); backdrop-filter: blur(7px) saturate(0.72); }
.dispatch-screen-panel { position: relative; z-index: 1; isolation: isolate; width: min(1060px, 100%); max-height: min(900px, calc(100dvh - 48px)); overflow-y: auto; border: 1px solid #5b4930; border-radius: 8px; background: #0a0e13; box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72); animation: dispatch-arrive 360ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.dispatch-screen-panel .scene-art { opacity: 0.82; }
.dispatch-screen-panel .scene-art img { object-position: 58% 38%; }
.dispatch-screen-panel .scene-art::after { background: linear-gradient(180deg, rgba(5, 8, 12, 0.26) 0%, rgba(5, 8, 12, 0.66) 29%, #0a0e13 72%), linear-gradient(90deg, rgba(5, 8, 12, 0.82), transparent 78%); }
.dispatch-screen-panel:not(.has-scene)::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--ember), var(--gold-2), transparent 78%); }
.dispatch-screen-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 4vw, 42px); }
.dispatch-switcher { display: flex; flex-wrap: wrap; gap: 8px; }
.dispatch-switcher button { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 4px; background: rgba(7, 11, 16, 0.86); color: var(--muted); font: 11px var(--font-mono); text-transform: uppercase; cursor: pointer; }
.dispatch-switcher button.active { border-color: var(--gold-2); color: var(--gold); }
.dispatch-screen-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 4px 0 18px; border-bottom: 1px solid rgba(132, 148, 168, 0.25); }
.dispatch-screen-head h1 { max-width: 760px; margin: 8px 0 0; color: #f1e6cf; font: 700 clamp(26px, 4vw, 42px)/1.1 var(--font-display); letter-spacing: 0.015em; }
.dispatch-story { max-width: 720px; margin: 12px 0 0; color: #c3cbd3; font: italic 15px/1.6 Georgia, serif; }
.dispatch-screen .dispatch-clock { display: flex; align-items: center; gap: 9px; margin-top: 4px; padding: 10px 12px; border: 1px solid rgba(239, 91, 82, 0.4); border-radius: 4px; background: rgba(27, 12, 12, 0.75); color: #ffc0a5; font-size: 12px; }
.dispatch-pulse { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--blood); box-shadow: 0 0 0 4px rgba(239, 91, 82, 0.14); }
.dispatch-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dispatch-fact { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: rgba(4, 7, 11, 0.72); }
.dispatch-fact-label { display: block; margin-bottom: 7px; color: var(--moss); font: 600 10px var(--font-mono); letter-spacing: 0.13em; text-transform: uppercase; }
.dispatch-fact b { display: block; color: var(--text); font: 13px/1.5 var(--font-body); overflow-wrap: anywhere; }
.dispatch-choice-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 2px; }
.dispatch-choice-heading p { margin: 0; }
.dispatch-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dispatch-choice { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 136px; padding: 16px; border: 1px solid #2a3646; border-radius: 5px; background: rgba(5, 9, 14, 0.88); color: var(--text); text-align: left; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease; }
.dispatch-choice:hover:not(:disabled) { border-color: var(--gold-2); background: rgba(34, 28, 18, 0.86); transform: translateY(-2px); }
.dispatch-choice:focus-visible, .dispatch-switcher button:focus-visible, .dispatch-dismiss:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.dispatch-choice:disabled { cursor: default; }
.dispatch-choice.sent { border-color: var(--moss); background: rgba(23, 37, 24, 0.84); }
.dispatch-choice-index { display: grid; width: 28px; height: 30px; flex: 0 0 auto; place-items: center; color: var(--gold); border: 1px solid rgba(230, 188, 98, 0.35); font: 11px var(--font-mono); }
.dispatch-choice-main { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.dispatch-choice-main > b { color: #f1e6cf; font: 600 15px/1.4 var(--font-display); }
.dispatch-cost { color: var(--ember); font-size: 10px; }
.dispatch-effects { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font: 11px/1.4 var(--font-body); }
.dispatch-effects > span::before { content: "· "; color: var(--mist); }
.dispatch-choice > .ui-icon { flex: 0 0 auto; color: var(--mist); margin-top: 4px; }
.dispatch-sent-mark { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: var(--moss); font: 10px var(--font-mono); text-transform: uppercase; }
.dispatch-screen-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 14px; border-top: 1px solid rgba(132, 148, 168, 0.24); }
.dispatch-screen-foot p { max-width: 620px; margin: 0; line-height: 1.6; }
.dispatch-dismiss { min-height: 44px; white-space: nowrap; }
.dispatch-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes dispatch-arrive { from { opacity: 0; transform: translateY(8px) scale(0.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 760px) {
  .dispatch-screen { display: block; padding: 0; }
  .dispatch-screen-panel { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .dispatch-screen-content { min-height: 100%; gap: 16px; padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom)); }
  .dispatch-screen-head { display: block; padding-bottom: 16px; }
  .dispatch-screen-head h1 { font-size: clamp(26px, 8vw, 36px); }
  .dispatch-screen .dispatch-clock { display: inline-flex; margin-top: 14px; }
  .dispatch-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dispatch-fact { padding: 10px; }
  .dispatch-choice-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .dispatch-choices { grid-template-columns: 1fr; }
  .dispatch-choice { min-height: 0; padding: 13px; }
  .dispatch-screen-foot { align-items: stretch; flex-direction: column; gap: 12px; }
  .dispatch-dismiss { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dispatch-screen-panel { animation: none; }
  .dispatch-choice { transition: none; }
  .dispatch-choice:hover:not(:disabled) { transform: none; }
}

/* ---------- Map ---------- */
.map { position: relative; height: clamp(420px, 64vh, 760px); border-radius: var(--radius); overflow: hidden; background: radial-gradient(120% 90% at 50% 50%, #0b1119, #05070a); border: 1px solid var(--line); touch-action: none; animation: map-resolve 700ms var(--ease-out-expo) both; }
.map::before { content: ""; position: absolute; inset: -30%; pointer-events: none; z-index: 1; opacity: 0.075; background: radial-gradient(ellipse at 65% 35%, rgba(230,188,98,0.35), transparent 25%), radial-gradient(ellipse at 30% 72%, rgba(126,216,203,0.35), transparent 28%); filter: blur(18px); mix-blend-mode: screen; animation: map-mist-secondary 36s ease-in-out infinite alternate-reverse; }
.map::after { content: ""; position: absolute; inset: -25%; pointer-events: none; z-index: 1; opacity: 0.13; background: radial-gradient(ellipse at 20% 40%, rgba(190, 214, 218, 0.28), transparent 35%), radial-gradient(ellipse at 75% 62%, rgba(126, 216, 203, 0.18), transparent 30%); filter: blur(24px); animation: map-mist 28s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; }
@keyframes map-resolve { from { opacity: 0; transform: scale(0.992); } to { opacity: 1; transform: scale(1); } }
@keyframes map-mist { from { transform: translate3d(-5%, -2%, 0) scale(1); } to { transform: translate3d(5%, 3%, 0) scale(1.08); } }
@keyframes map-mist-secondary { from { transform: translate3d(4%, -3%, 0) scale(1.06); } to { transform: translate3d(-5%, 4%, 0) scale(1.14); } }
.map.short { height: clamp(360px, 52vh, 600px); }
.map canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.map canvas.dragging { cursor: grabbing; }
.map .ctrl { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.map .ctrl button { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--line-2); background: rgba(6, 8, 12, 0.88); color: var(--text); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out-expo), border-color var(--duration-state) var(--ease-out-quart), color var(--duration-state) var(--ease-out-quart), background-color var(--duration-state) var(--ease-out-quart); }
.map .ctrl button:hover { border-color: var(--mist-2); color: var(--mist); }
.map .ctrl button:hover .ui-icon { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(126,216,203,0.45)); }
.map .ctrl button:active { transform: scale(0.94); }
.map .legend { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(6, 8, 12, 0.86); font: 11px var(--font-mono); color: var(--muted); display: grid; grid-template-columns: repeat(2, auto); gap: 5px 16px; }
.map .legend span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.map .legend .map-key { width: 15px; height: 15px; display: grid; place-items: center; color: var(--c); position: relative; }
.map .legend .map-key.terrain { border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13); }
.map .legend .map-key.terrain::after { content: ""; width: 8px; height: 1px; background: rgba(235,240,226,0.45); transform: rotate(-18deg); }
.map .legend .map-key.forest::after { width: 0; height: 0; background: none; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 7px solid rgba(5,20,13,0.6); transform: none; }
.map .legend .map-key.mountains::after { width: 7px; height: 7px; background: none; border-left: 1px solid rgba(255,255,255,0.5); border-top: 1px solid rgba(255,255,255,0.5); transform: rotate(45deg) translate(1px,1px); }
.map .legend .map-key.water::after { width: 8px; height: 3px; background: none; border-top: 1px solid rgba(180,220,230,0.65); border-bottom: 1px solid rgba(180,220,230,0.45); transform: rotate(-7deg); }
.map .legend .map-key.remembered { filter: saturate(0.25); opacity: 0.75; }
.map .legend .map-key.marker { width: 20px; height: 20px; border-radius: 50%; background: rgba(5,9,13,0.92); border: 1px solid color-mix(in srgb, var(--c) 75%, #0b1119); }
.map .map-accessible { position: absolute; z-index: 4; right: 62px; top: 12px; max-width: min(300px, calc(100% - 150px)); color: var(--text); font: 12px var(--font-mono); }
.map .map-accessible > summary { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 4px; background: rgba(6,8,12,0.94); cursor: pointer; }
.map .map-accessible[open] { width: min(300px, calc(100% - 150px)); }
.map-object-list { max-height: min(48vh, 360px); overflow: auto; list-style: none; margin: 5px 0 0; padding: 5px; border: 1px solid var(--line-2); background: rgba(6,8,12,0.97); overscroll-behavior: contain; touch-action: pan-y; }
.map-object-list li { margin: 0; padding: 0; }
.map-object-button { display: block; width: 100%; min-height: 44px; padding: 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.map-object-button:hover, .map-object-button:focus-visible { background: rgba(126,216,203,0.1); color: var(--mist); }
.map-object-empty { padding: 10px; color: var(--muted); }
.map .hud { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.map .tip { position: absolute; z-index: 3; pointer-events: none; min-width: 180px; max-width: 280px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 4px; background: rgba(6, 8, 12, 0.94); box-shadow: var(--shadow); font: 12px/1.5 var(--font-mono); color: var(--text); left: var(--x); top: var(--y); }
.map .tip b { color: var(--gold); font-weight: 600; }
.map .tip .t-sub { color: var(--faint); font-size: 11px; }
.map .tip-line { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.map .tip-line .ui-icon { color: var(--mist); }
.map .hint { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; font: 600 13px var(--font-mono); letter-spacing: 0.08em; color: var(--text); background: rgba(5, 7, 10, 0.55); opacity: 0; transition: opacity 0.25s ease; }
.map .hint.show { opacity: 1; }
.map .veil { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 30px; color: var(--muted); font: 12px var(--font-mono); letter-spacing: 0.08em; background: radial-gradient(60% 60% at 50% 50%, rgba(10, 16, 24, 0.4), rgba(5, 7, 10, 0.92)); z-index: 1; }
.map .veil b { display: block; font: 700 22px var(--font-display); letter-spacing: 0.12em; color: var(--text); margin-bottom: 8px; text-transform: uppercase; }

/* ---------- Banner shield ---------- */
.shield { display: inline-block; flex: 0 0 auto; width: 26px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.shield.lg { width: 56px; height: 66px; }
.symbol-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.symbol-pick button { background: rgba(6, 8, 12, 0.6); border: 1px solid var(--line-2); border-radius: 4px; padding: 6px; cursor: pointer; display: grid; place-items: center; }
.symbol-pick button.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(230, 188, 98, 0.2); }
.symbol-pick svg { width: 22px; height: 22px; }

/* ---------- Charts ---------- */
.chart { width: 100%; height: 120px; display: block; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .area { fill: url(#mistfill); }
.chart .line { fill: none; stroke: var(--mist); stroke-width: 1.6; }
.chart .col { fill: rgba(126, 216, 203, 0.55); }
.chart .col.hi { fill: var(--gold); }
.chart text { fill: var(--faint); font: 10px var(--font-mono); }
.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar { display: grid; grid-template-columns: 26px minmax(110px, 180px) 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.hbar .i { font: 11px var(--font-mono); color: var(--faint); }
.hbar .n { font: 600 12px var(--font-mono); color: var(--text); white-space: nowrap; }
.hbar .n small { color: var(--blood); margin-left: 8px; font-weight: 500; }
.cost-list .cost-item { display: inline-flex; align-items: center; gap: 4px; margin: 2px 10px 2px 0; white-space: nowrap; }
.cost-list .cost-item .ui-icon { color: var(--gold); }

/* ---------- Health ---------- */
.health { display: inline-flex; align-items: center; gap: 7px; font: 600 11px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.health::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.health.ok { color: var(--moss); }
.health.lagging { color: var(--ember); }
.health.stalled, .health.down { color: var(--blood); }
.health.idle { color: var(--faint); }

/* ---------- Rules codex ---------- */
.codex details { border: 1px solid var(--line); border-radius: 4px; margin-bottom: 8px; background: rgba(6, 8, 12, 0.4); }
.codex summary { cursor: pointer; padding: 11px 14px; font: 600 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); list-style: none; display: flex; justify-content: space-between; }
.codex summary::after { content: "+"; color: var(--gold); }
.codex details[open] > summary::after { content: "−"; }
.codex .tree { padding: 4px 14px 14px; font: 12px/1.8 var(--font-mono); }
.codex .tree .k { color: var(--muted); }
.codex .tree .v { color: var(--mist); }
.codex .tree .v.s { color: var(--gold); }
.codex .tree .nest { padding-left: 16px; border-left: 1px dashed var(--line); margin-left: 4px; }
.codex .note { color: var(--faint); font-size: 12px; }

/* ---------- Login ---------- */
.auth { max-width: 460px; margin: 60px auto; }
.auth .panel { padding: 30px; }

/* ---------- Toast ---------- */
.toast { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(52px + env(safe-area-inset-bottom)); z-index: 60; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 4px; background: rgba(10, 14, 20, 0.96); box-shadow: var(--shadow); font: 12px var(--font-mono); animation: slidein var(--duration-state) var(--ease-out-expo); }
.toast.error { border-color: rgba(239, 91, 82, 0.5); color: var(--blood); }

.key-reveal { font: 13px var(--font-mono); padding: 12px; border: 1px dashed var(--gold-2); border-radius: 4px; background: rgba(230, 188, 98, 0.06); color: var(--gold); word-break: break-all; }
.nowrap { white-space: nowrap; }
table.data td .faint.small { word-break: break-word; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.gold { color: var(--gold); }
.mist { color: var(--mist); }
.ember { color: var(--ember); }
.blood { color: var(--blood); }
.moss { color: var(--moss); }
.small { font-size: 12px; }
.loading { padding: 80px 20px; text-align: center; font: 12px var(--font-mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); animation: loading-in 420ms var(--ease-out-quart) both; }
.loading::before { content: ""; display: block; width: 36px; height: 36px; margin: 0 auto 16px; border: 2px solid var(--line-2); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes loading-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 980px) {
  .hero-copy, .hero-stats { padding-right: 36%; }
  .hero::before { background: linear-gradient(90deg, rgba(5, 8, 12, 0.98) 0%, rgba(5, 8, 12, 0.82) 52%, rgba(5, 8, 12, 0.28) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 45%); }
}

@media (max-width: 760px) {
  .history-charts { grid-template-columns: 1fr; }
  .alert-groups { padding-inline: 10px; }
  .map .map-accessible { right: 58px; top: 58px; max-width: min(245px, calc(100% - 80px)); }
  .map .map-accessible[open] { width: min(245px, calc(100% - 80px)); }
  .waste-chart { grid-template-columns: 1fr; }
  .city-card > .row:first-child { gap: 8px; }
  .city-card .atlas-cell.growth { width: 58px; height: 58px; }
  .hero { min-height: 720px; padding: 82px 18px 42px; text-align: center; justify-content: flex-end; }
  .hero::before { background: linear-gradient(0deg, rgba(5, 8, 12, 0.99) 0%, rgba(5, 8, 12, 0.82) 62%, rgba(5, 8, 12, 0.3) 100%); }
  .hero-art img { object-position: 63% center; }
  .hero-copy, .hero-stats { padding-right: 0; }
  .hero .crest { width: 70px; height: 70px; margin: 0 auto 18px; }
  .hero h1 { margin-inline: auto; max-width: none; font-size: clamp(42px, 15vw, 66px); }
  .hero .lead { margin-inline: auto; font-size: 16px; }
  .hero .cta { justify-content: center; }
  .hero-stats { margin-top: 38px; justify-content: center; }
  .hero-stats > div { flex-basis: 46%; padding: 8px 10px; }
  .hero-stats > div:nth-child(3) { border-left: 0; }
  .hero-stats b { font-size: 26px; }
}

@media (pointer: coarse) {
  .btn, .nav a, .map .ctrl button { min-height: 44px; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
}

@media (hover: hover) {
  .world-card:hover, .city-card:hover, .stat:hover, .res:hover { transform: translate3d(0, -3px, 0); }
  .stat, .res { transition: transform var(--duration-state) var(--ease-out-expo), border-color var(--duration-state) var(--ease-out-quart), box-shadow var(--duration-state) var(--ease-out-quart); }
  .stat:hover, .res:hover { border-color: rgba(126,216,203,0.25); box-shadow: 0 14px 36px rgba(0,0,0,0.22); }
  .res:hover .r-top .ui-icon { transform: translate3d(0,-2px,0) scale(1.12); }
  .res .r-top .ui-icon { transition: transform var(--duration-state) var(--ease-out-expo); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal-item { opacity: 1 !important; transform: none !important; filter: none !important; }
}
.steps + p { margin-top: 14px; }

/* Arena: prestige trend per row of the standings. */
.arena-spark { width: 140px; height: 30px; }
.arena-spark svg { width: 100%; height: 100%; }

/* Arena step mode: the "advance N" number field. */
.step-count { width: 5em; }

/* ---------- Pages that work without JavaScript: the home shell, /w and /w/:id (routes/public.ts) ---------- */
.agent-line { margin: 0; padding: 6px 16px; border-bottom: 1px solid var(--line); background: #05070a; font: 12px/1.4 var(--font-mono); color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.agent-line a { color: var(--mist); }
.static-home { max-width: 820px; }
.js .static-home, html:not(.js) .js-only { display: none; }
.static-home .lead, .share-page .lead { font-size: 16px; line-height: 1.6; color: var(--text); }
.static-home h2 { margin: 28px 0 10px; font: 700 15px var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.static-home h3 { margin: 16px 0 4px; font-size: 15px; }
.static-home ul, .static-home ol { margin: 0 0 10px 20px; color: var(--muted); line-height: 1.7; }
.static-home li b { color: var(--text); }
.share-top { display: flex; gap: 18px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 600 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.share-brand { display: inline-flex; gap: 8px; align-items: center; color: var(--text); }
.share-page { max-width: 960px; display: flex; flex-direction: column; gap: 18px; }
.share-hero .btn { margin-right: 8px; }
.share-page .panel > .section-title { margin-top: 0; }
.share-page table.data .swatch { vertical-align: -2px; margin-right: 4px; }
.share-feed, .share-worlds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.share-feed li, .share-worlds li { line-height: 1.5; }
.diary-entry { margin: 0 0 14px; padding: 10px 14px; border-left: 2px solid var(--violet); background: rgba(176, 155, 255, 0.05); }
.diary-entry p { margin: 0; font: italic 14px/1.55 Georgia, serif; color: var(--text); }
.diary-entry footer { margin-top: 6px; font: 11px var(--font-mono); color: var(--faint); }

/* ---------- War room (decision 257): the map is the whole room, as on the design board's "Sala de Guerra", and
   every panel is glass floating over it. Below 1100px the panels stack under the map instead. ---------- */
.war-stage { position: relative; height: calc(100dvh - 130px); min-height: 720px; overflow: hidden; background: #06080c; color: var(--text); }
.st-slot { display: contents; }
.war-stage > .map { position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; animation: none; }
.war-stage > .map .legend, .war-stage > .map .hud { display: none; }
.war-stage > .map .ctrl { top: 150px; right: 348px; }
.war-stage > .map .map-accessible { top: 150px; right: 396px; }
.st-glass { background: linear-gradient(180deg, rgba(16, 23, 33, 0.94), rgba(10, 15, 22, 0.96)); border: 1px solid #1f2c3b; border-radius: 6px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); }
.st-eb { font: 600 10px/1.3 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.st-eb.blood { color: var(--blood); } .st-eb.ember { color: var(--ember); } .st-eb.violet { color: var(--violet); } .st-eb.mist { color: var(--mist); }
.st-rule { height: 1px; background: #1c2837; flex-shrink: 0; }
.war-stage .grow { flex-grow: 1; min-width: 0; }

.st-top { position: absolute; z-index: 5; left: 16px; right: 16px; top: 14px; height: 62px; display: flex; align-items: stretch; }
.st-top > * { display: flex; align-items: center; gap: 9px; padding: 0 13px; border-right: 1px solid #1c2837; }
.st-top > .st-grow { flex-grow: 1; border-right: 0; padding: 0; }
.st-who { padding-left: 12px !important; min-width: 0; }
.st-who .shield { width: 36px; height: 42px; flex-shrink: 0; }
.st-name { font: 700 17px/1.1 var(--font-display); letter-spacing: 0.04em; white-space: nowrap; }
.st-sub { font: 11px var(--font-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.st-sub a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.st-res .ico { color: var(--c); display: grid; }
.st-res b, .st-prestige b { display: block; font: 600 13px var(--font-mono); color: var(--text); }
.st-res small, .st-prestige small, .st-orders small, .st-clock small { font: 10px var(--font-mono); color: var(--faint); }
.st-res small.up { color: var(--moss); } .st-res small.down { color: var(--blood); }
.st-prestige small { color: var(--violet); }
.st-orders > div { width: 118px; }
.st-orders b { font: 600 12px var(--font-mono); }
.st-orders .bar { height: 5px; margin: 4px 0 3px; }
.st-top .ico.gold { color: var(--gold); display: grid; } .st-top .ico.violet { color: var(--violet); display: grid; }
.st-clock { flex-direction: column; align-items: stretch !important; justify-content: center; gap: 5px !important; width: 210px; border-right: 0 !important; border-left: 1px solid #1c2837; }
.st-clock b { font: 600 14px var(--font-display); color: var(--gold); }
.st-track { display: flex; gap: 4px; }
.st-track .seg { flex: 1; height: 4px; border-radius: 2px; background: #1c2837; }
.st-track .seg.done { background: var(--gold); }
.st-track .seg.now { background: var(--gold); box-shadow: 0 0 6px var(--gold); }

.st-alerts { position: absolute; z-index: 6; left: 50%; top: 88px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.st-alert-row { display: flex; gap: 14px; }
.st-alert { position: relative; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1.5px solid var(--tone, var(--mist)); background: radial-gradient(circle at 40% 35%, #1b2533, #080c12); color: var(--tone, var(--mist)); display: grid; place-items: center; box-shadow: 0 0 14px color-mix(in srgb, var(--tone, var(--mist)) 25%, transparent); cursor: pointer; }
.st-alert.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, var(--mist)) 35%, transparent), 0 0 18px color-mix(in srgb, var(--tone, var(--mist)) 45%, transparent); }
.st-alert .n { position: absolute; right: -4px; top: -4px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--tone, var(--mist)); color: #06080c; font: 700 10px/16px var(--font-mono); text-align: center; }
.st-alert.blood, .st-pop.blood { --tone: var(--blood); } .st-alert.ember, .st-pop.ember { --tone: var(--ember); } .st-alert.gold, .st-pop.gold { --tone: var(--gold); }
.st-alert.violet, .st-pop.violet { --tone: var(--violet); } .st-alert.mist, .st-pop.mist { --tone: var(--mist); } .st-alert.moss { --tone: var(--moss); }
.st-pop { width: 320px; padding: 11px 13px; border-color: color-mix(in srgb, var(--tone, var(--mist)) 45%, #1f2c3b); font: 12px/1.45 var(--font-body); }
.st-pop-list { margin: 6px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }
.st-threat { margin: -11px -13px; padding: 11px 13px; min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end; }
.st-threat p { margin: 4px 0 0; }
.st-threat .scene-art img { object-position: right 42%; }
.st-threat .scene-art::after { background: linear-gradient(90deg, rgba(22, 6, 6, 0.95) 0%, rgba(22, 6, 6, 0.85) 55%, rgba(22, 6, 6, 0.4) 100%); }

.st-left, .st-right { position: absolute; z-index: 5; top: 88px; overflow-y: auto; }
.st-left { left: 16px; width: 318px; max-height: calc(100% - 88px - 96px); padding: 16px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; }
.st-right { right: 16px; width: 316px; max-height: calc(100% - 88px - 228px); padding: 6px 14px 12px; box-sizing: border-box; }
.st-quote { font: italic 13px/1.5 Georgia, serif; padding-left: 10px; border-left: 2px solid var(--gold-2); }
.st-never { display: flex; gap: 8px; align-items: flex-start; font: 12px var(--font-body); color: var(--muted); }
.st-never .ui-icon { color: var(--blood); flex-shrink: 0; margin-top: 1px; }
.st-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.st-chip { font: 10px var(--font-mono); padding: 3px 7px; border: 1px solid #1c2837; border-radius: 3px; color: var(--muted); text-transform: uppercase; }
.st-chip.gold { border-color: var(--gold-2); color: var(--gold); }
.st-op { padding: 10px; border: 1px solid #1c2837; border-radius: 5px; background: rgba(4, 6, 10, 0.5); display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.st-steps { display: flex; align-items: center; }
.st-dot { width: 16px; height: 16px; border-radius: 50%; background: #2a3646; display: grid; place-items: center; flex-shrink: 0; color: #06080c; }
.st-dot.done { background: var(--moss); }
.st-dot.in_progress { background: var(--gold); box-shadow: 0 0 0 3px rgba(230, 188, 98, 0.2); }
.st-dot.blocked { background: var(--ember); }
.st-dot.intention { background: transparent; border: 1.5px dashed var(--mist); box-sizing: border-box; }
.st-dot.contingency { background: transparent; border: 1.5px dashed var(--violet); box-sizing: border-box; }
.st-dot.dropped { background: #1c2837; opacity: 0.6; }
.st-link { flex: 1; height: 2px; background: #1c2837; }
.st-link.done { background: var(--moss); }
.st-step-labels { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 4px; font: 9px var(--font-mono); color: var(--faint); text-transform: uppercase; }
.st-step-labels span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-step-labels span:not(:first-child):not(:last-child) { text-align: center; }
.st-step-labels span:last-child:not(:first-child) { text-align: right; }

.st-section > summary { display: flex; align-items: center; gap: 6px; padding: 9px 2px 7px; border-bottom: 1px solid #1c2837; cursor: pointer; list-style: none; font: 600 10px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.st-section > summary::-webkit-details-marker { display: none; }
.st-section > summary::before { content: "▾"; font-size: 10px; }
.st-section:not([open]) > summary::before { content: "▸"; }
.st-section > summary .n { margin-left: auto; color: var(--faint); }
.st-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #141d28; font-size: 12px; }
.st-row b { font-weight: 600; }
.st-row-ico { width: 26px; height: 26px; border-radius: 4px; background: #0b1119; border: 1px solid #1c2837; display: grid; place-items: center; flex-shrink: 0; color: var(--muted); }
.st-row-ico.blood, .st-row .mono.blood { color: var(--blood); } .st-row-ico.mist, .st-row .mono.mist { color: var(--mist); }
.st-row-ico.violet { color: var(--violet); } .st-row-ico.moss { color: var(--moss); }
.st-city { padding: 7px 4px; border-bottom: 1px solid #141d28; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.st-city .row { gap: 8px; flex-wrap: nowrap; }
.st-city .bar { flex: 1; height: 4px; }
.st-city .faint.ember { color: var(--ember); }

.st-agent { position: absolute; z-index: 5; left: 16px; bottom: 16px; width: 318px; box-sizing: border-box; padding: 12px 14px; display: flex; gap: 12px; align-items: center; font-size: 12px; }
.st-agent-ico { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: var(--mist); border: 1px solid var(--mist); background: radial-gradient(circle at 40% 35%, rgba(126, 216, 203, 0.5), rgba(126, 216, 203, 0.05) 70%); }
.st-mini { position: absolute; z-index: 5; right: 16px; bottom: 16px; width: 316px; height: 196px; padding: 8px; box-sizing: border-box; }
.st-mini .map { height: 100%; border: 0; border-radius: 3px; animation: none; pointer-events: none; }
.st-mini .map .ctrl, .st-mini .map .legend, .st-mini .map .hud, .st-mini .map .hint, .st-mini .map .map-accessible, .st-mini .map .tip { display: none; }
.st-ticker { position: absolute; z-index: 5; left: 350px; right: 348px; bottom: 16px; padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; }
.st-legend { display: flex; gap: 18px; flex-wrap: wrap; font: 10px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.st-key { display: inline-flex; align-items: center; gap: 6px; }
.st-swatch { display: inline-block; width: 18px; }
.st-swatch.fact { height: 3px; background: var(--gold); }
.st-swatch.intent { border-top: 2px dashed var(--mist); }
.st-swatch.threat { border-top: 2px dashed var(--blood); }
.st-swatch.fog { width: 12px; height: 12px; background: #04060a; border: 1px solid #1c2837; }
.st-day { display: flex; gap: 14px; align-items: center; font: 12px var(--font-body); color: var(--muted); overflow: hidden; white-space: nowrap; }
.st-day .st-eb { flex-shrink: 0; }
.st-news { overflow: hidden; text-overflow: ellipsis; }
.st-news.info { color: var(--muted); } .st-news.warn { color: var(--ember); } .st-news.critical { color: var(--blood); }
.st-news.fresh { animation: st-feed-arrive 1200ms var(--ease-out-quart) both; }

@media (max-width: 1100px) {
  .war-stage { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; gap: 10px; padding: 10px; }
  .war-stage > .map { position: relative; order: 3; height: 58vh; min-height: 340px; border-radius: 6px; border: 1px solid #1f2c3b; }
  .war-stage > .map .ctrl { top: 12px; right: 12px; }
  .war-stage > .map .map-accessible { top: 12px; right: 62px; }
  .st-top, .st-alerts, .st-left, .st-right, .st-agent, .st-mini, .st-ticker { position: static; transform: none; width: auto; max-height: none; }
  .st-top { order: 1; height: auto; flex-wrap: wrap; row-gap: 10px; padding: 10px 0; }
  .st-top > * { border-right: 0; }
  .st-top > .st-grow { display: none; }
  .st-clock { border-left: 0; width: 100%; }
  .st-alerts { order: 2; align-items: stretch; }
  .st-alert-row { justify-content: center; flex-wrap: wrap; }
  .st-pop { width: auto; min-width: 0; }
  .st-left { order: 4; } .st-right { order: 5; } .st-agent { order: 6; } .st-ticker { order: 7; } .st-mini { display: none; }
  .st-day { flex-wrap: wrap; white-space: normal; }
}

/* World studio (PLANO_IMPLEMENTACAO_MUNDOS.md W04): fields with a hint under them line up by their labels. */
.studio-form .form-row { align-items: flex-start; }
.studio-form .check { align-self: center; }

/* ---------- How to play (#/play, #/play/<format>) ---------- */
.play { --tone: var(--gold); }
.play .tone-gold { --tone: var(--gold); } .play .tone-ember { --tone: var(--ember); } .play .tone-violet { --tone: var(--violet); } .play .tone-mist { --tone: var(--mist); }
.play-hero { min-height: 340px; padding: clamp(28px, 5vw, 56px); display: flex; align-items: flex-end; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38); margin-bottom: 26px; }
.play-hero-copy { position: relative; z-index: 2; max-width: 62ch; }
.play-hero h1 { font: 700 clamp(34px, 5.4vw, 64px)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: #ead5a0; text-shadow: 0 2px 24px rgba(3, 5, 8, 0.85); margin: 0 0 14px; }
.play-hero .lead, .play-format-head .lead { font-size: 16px; line-height: 1.7; color: #bdc8d5; margin: 0 0 18px; }
.play-chooser { padding: 22px; }
.play-questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.play-options { display: flex; flex-direction: column; gap: 8px; }
.play-options button { text-align: left; min-height: 44px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--line-2); background: rgba(6, 9, 13, 0.5); color: var(--text); font: 500 13.5px/1.35 var(--font-body); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast); }
.play-options button:hover { border-color: var(--gold-2); transform: translateX(2px); }
.play-options button[aria-checked="true"] { border-color: var(--gold); background: rgba(230, 188, 98, 0.1); color: #f1e2bd; box-shadow: inset 3px 0 0 var(--gold); }
.play-result:not(:empty) { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); animation: view-resolve var(--duration-enter) var(--ease-out-expo) both; }
.play-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.play-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; color: var(--text); border-top: 2px solid var(--tone); transition: transform var(--duration-state) var(--ease-out-quart), box-shadow var(--duration-state), border-color var(--duration-state); }
.play-card:hover { transform: translateY(-3px); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); color: var(--text); }
.play-card h3 { margin: 0; font: 700 20px var(--font-display); letter-spacing: 0.05em; color: var(--tone); }
.play-card.recommended { border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone), 0 18px 60px rgba(0, 0, 0, 0.5); }
.play-ribbon { align-self: flex-start; font: 700 10px var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: #0a0e14; background: var(--tone); padding: 4px 9px; border-radius: 99px; }
.play-card-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--tone); color: var(--tone); background: rgba(6, 9, 13, 0.6); box-shadow: 0 0 26px color-mix(in srgb, var(--tone) 22%, transparent); }
.play-card-icon.lg { width: 72px; height: 72px; flex: 0 0 72px; }
.play-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; color: var(--muted); flex: 1; }
.play-facts li { display: flex; gap: 8px; align-items: flex-start; }
.play-facts .ui-icon { color: var(--tone); flex: 0 0 auto; margin-top: 2px; }
.play-go { font: 600 11px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tone); }
.play-compare th[scope="row"] { font: 600 10.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.play-compare td { vertical-align: top; min-width: 170px; }
.play-format-head { display: flex; gap: 22px; align-items: center; padding: clamp(22px, 4vw, 36px); border-top: 2px solid var(--tone); margin-bottom: 16px; }
.play-format-head .title { margin: 0 0 8px; color: var(--tone); }
.play-bar { display: flex; gap: 3px; width: 100%; margin: 6px 0 10px; }
.play-seg { flex: 0 0 calc(var(--w) - 3px); min-width: 0; min-height: 44px; display: grid; place-items: center; padding: 6px 4px; border: 1px solid var(--line-2); border-radius: 4px; background: rgba(6, 9, 13, 0.55); color: var(--muted); font: 600 10.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; overflow: hidden; cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast); }
.play-seg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.play-seg:hover, .play-seg[aria-pressed="true"] { border-color: var(--gold); color: #f1e2bd; background: rgba(230, 188, 98, 0.12); }
.play-seg.static { cursor: default; border-color: color-mix(in srgb, var(--tone) 45%, transparent); background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone); }
.play-seg.fade { opacity: 0.45; }
.play-detail { min-height: 3em; margin: 6px 0 10px; line-height: 1.6; }
.play-window { position: relative; display: flex; gap: 3px; height: 54px; margin: 12px 0 8px; }
.play-part { flex: 0 0 calc(var(--w) - 3px); display: grid; place-items: center; border-radius: 4px; font: 600 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 0 6px; }
.play-part.human { background: rgba(230, 188, 98, 0.14); border: 1px solid rgba(230, 188, 98, 0.45); color: var(--gold); }
.play-part.agent { background: rgba(126, 216, 203, 0.12); border: 1px solid rgba(126, 216, 203, 0.4); color: var(--mist); }
.play-marker { --x: 0%; position: absolute; top: -6px; bottom: -6px; left: var(--x); width: 2px; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.7); transition: left 80ms linear; pointer-events: none; }
.play-steps .step.done::before { content: "✓"; border-color: var(--moss); color: var(--moss); }
.play-steps .step .stack { margin-top: 10px; }
.play-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.play-notes li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.play-notes .ui-icon { color: var(--mist); flex: 0 0 auto; margin-top: 3px; }
.play-nav { margin-top: 26px; }
.play input[type="range"] { accent-color: var(--gold); width: 100%; min-height: 32px; }
@media (max-width: 1100px) { .play-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .play-questions, .play-cards { grid-template-columns: minmax(0, 1fr); }
  .play-hero { min-height: 420px; padding: 24px 18px; }
  .play-format-head { flex-direction: column; align-items: flex-start; }
  .play-seg { font-size: 9px; letter-spacing: 0.04em; }
  .play-part { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) { .play-card, .play-options button, .play-marker { transition: none; } .play-card:hover { transform: none; } }

/* War-room chrome tokens. Dark by default, like the rest of the site: the parchment map lies on a dark war
   table and every panel around it is solid (glass over a light map turns grey and loses contrast). The
   parchment chrome is a per-viewer option, [data-theme="light"], set from the war room's sun button. The
   illustrated map itself (canvas art) is identical in both. */
:root {
  --st-stage: var(--bg);
  --st-void: #0b1118;
  --st-surface: rgba(12, 18, 26, 0.95);
  --st-field: #0a0f15;
  --st-surface-2: #16202c;
  --st-line: #223044;
  --st-line-2: #34475f;
  --st-ink: var(--text);
  --st-ink-strong: #f0e2c2;
  --st-muted: var(--muted);
  --st-accent: var(--mist);
  --st-gold: var(--gold);
  --st-positive: var(--moss);
  --st-danger: #f0887e;
  --st-cta-bg: var(--gold);
  --st-cta-hover: #f0cd7e;
  --st-cta-ink: #16110a;
}
:root[data-theme="light"] {
  --st-stage: #e7dfc9;
  --st-void: #e9e3d2;
  --st-surface: rgba(248, 242, 223, 0.97);
  --st-field: #fffbee;
  --st-surface-2: #eee7d3;
  --st-line: #c9c0aa;
  --st-line-2: #9a967f;
  --st-ink: #213d49;
  --st-ink-strong: #1b3e54;
  --st-muted: #5f6e66;
  --st-accent: #1d526d;
  --st-gold: #a67a3c;
  --st-positive: #4e7563;
  --st-danger: #a34f42;
  --st-cta-bg: #173d53;
  --st-cta-hover: #245a76;
  --st-cta-ink: #fff7dd;
}

/* Illustrated map: one visual language for terrain, settlements and controls. */
.panel.flush:has(> .map.illustrated) { background: var(--st-surface-2); border-color: var(--st-line-2); }
.panel.flush:has(> .map.illustrated) .panel-head { margin-bottom: 0; padding: 12px 18px; border-bottom: 1px solid var(--st-line-2); }
.panel.flush:has(> .map.illustrated) .panel-title { color: var(--st-ink-strong); font-family: Georgia, serif; font-size: 15px; letter-spacing: 0.02em; text-transform: none; }
.panel.flush:has(> .map.illustrated) .panel-title .ico { color: var(--st-accent); border-color: var(--st-line-2); }
.panel.flush:has(> .map.illustrated) .divider { display: none; }
.map.illustrated { background: var(--st-void); border-color: var(--st-line-2); color: var(--st-ink); }
.map.illustrated::before, .map.illustrated::after { display: none; }
.map.illustrated .ctrl { top: auto; right: 12px; bottom: 12px; gap: 4px; }
.map.illustrated .ctrl button { width: 44px; height: 44px; background: var(--st-surface); border: 1px solid var(--st-line-2); color: var(--st-ink-strong); border-radius: 5px; box-shadow: 0 2px 0 rgba(50, 63, 61, 0.15); }
.map.illustrated .ctrl button:hover { color: var(--st-accent); border-color: var(--st-accent); background: var(--st-surface); }
.map.illustrated .ctrl button:hover .ui-icon { filter: none; }
.map.illustrated .legend { left: 12px; bottom: 12px; padding: 0; color: var(--st-ink); background: var(--st-surface); border: 1px solid var(--st-line-2); border-radius: 5px; font: 13px var(--font-body); box-shadow: 0 3px 12px rgba(37, 48, 45, 0.15); display: block; }
.map.illustrated .legend > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none; font-weight: 600; }
.map.illustrated .legend > summary::-webkit-details-marker { display: none; }
.map.illustrated .legend-items { padding: 0 12px 12px; display: grid; grid-template-columns: repeat(2, auto); gap: 5px 14px; }
.map.illustrated .legend .map-key.marker { background: none; border: 0; border-radius: 0; }
.map.illustrated .map-accessible { right: 66px; top: 12px; color: var(--st-ink); font: 12px var(--font-body); }
.map.illustrated .map-accessible > summary, .map.illustrated .map-object-list { background: var(--st-surface); color: var(--st-ink); border: 1px solid var(--st-line-2); border-radius: 5px; }
.map.illustrated .map-object-button { color: var(--st-ink); border-color: var(--st-line); }
.map.illustrated .map-object-button:hover, .map.illustrated .map-object-button:focus-visible { background: var(--st-surface-2); color: var(--st-accent); }
.map.illustrated .tip { background: var(--st-surface); color: var(--st-ink); border: 1px solid var(--st-line-2); box-shadow: 0 6px 20px rgba(30, 47, 50, 0.22); font: 12px/1.5 var(--font-body); }
.map.illustrated .tip b { color: var(--st-accent); }
.map.illustrated .tip .t-sub { color: var(--st-muted); }
.map.illustrated .tip-line .ui-icon { color: var(--st-accent); }
.map.illustrated .hint { background: var(--st-surface); color: var(--st-ink); font-family: var(--font-body); letter-spacing: 0; }
.map.illustrated .veil { background: var(--st-surface); color: var(--st-muted); letter-spacing: 0; }
.map.illustrated .veil b { color: var(--st-ink); }
.map-selection { position: absolute; z-index: 3; left: 12px; right: 74px; bottom: 12px; min-height: 72px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--st-surface); border: 1px solid var(--st-line-2); border-radius: 5px; box-shadow: 0 6px 24px rgba(30, 47, 50, 0.2); color: var(--st-ink); }
.map-selection-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.map-selection-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; background: var(--c); color: #fff8e6; border: 1px solid #1b3e54; border-radius: 3px; }
.map-selection-title b { display: block; font: 700 21px/1.1 Georgia, serif; }
.map-selection-title small { display: block; margin-top: 4px; color: var(--st-muted); font: 12px/1.3 var(--font-body); }
.map-selection-actions { display: flex; align-items: center; gap: 8px; }
.map-selection-actions button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; background: var(--st-surface); color: var(--st-ink-strong); border: 1px solid var(--st-line-2); border-radius: 5px; font: 600 12px var(--font-body); cursor: pointer; white-space: nowrap; }
.map-selection-actions button.primary { background: var(--st-cta-bg); color: var(--st-cta-ink); }
.map-selection-actions button:hover { border-color: var(--st-accent); filter: brightness(1.06); }
.map-selection-actions button:active { transform: translateY(1px); }
.city-card-art { display: block; flex: 0 0 auto; width: 76px; height: 68px; object-fit: contain; padding: 3px; border: 1px solid var(--st-line-2); border-radius: 3px; background: var(--st-surface-2); }
.city-card-spec { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; color: var(--st-accent); background: var(--st-surface-2); border: 1px solid var(--st-line-2); border-radius: 3px; }

/* Keep the command map dominant; move the overview beside it and condense the surrounding panels. */
.war-stage { background: var(--st-stage); }
.war-stage .st-glass { background: var(--st-surface); border-color: var(--st-line-2); color: var(--st-ink); box-shadow: 0 5px 18px rgba(30, 47, 50, 0.16); }
.war-stage .st-eb, .war-stage .st-top b, .war-stage .st-name { color: var(--st-ink-strong); }
.war-stage .st-sub, .war-stage .muted, .war-stage .faint, .war-stage .st-top small { color: var(--st-muted); }
.war-stage .st-rule, .war-stage .st-row, .war-stage .st-city, .war-stage .st-section > summary { border-color: var(--st-line); }
.war-stage .st-rule { background: var(--st-line); }
.war-stage .st-top > *, .war-stage .st-clock { border-color: var(--st-line); }
.war-stage .st-res b, .war-stage .st-prestige b { color: var(--st-ink); }
.war-stage .st-track .seg, .war-stage .st-link { background: var(--st-line); }
.war-stage .st-op { background: var(--st-surface-2); border-color: var(--st-line); }
.war-stage .st-chip, .war-stage .st-row-ico { background: var(--st-surface-2); border-color: var(--st-line); color: var(--st-ink); }
.war-stage .st-step-labels, .war-stage .st-section > summary .n { color: var(--st-muted); }
.war-stage .st-section > summary { color: var(--st-ink); }
.war-stage .st-agent-ico { background: var(--st-surface-2); border-color: var(--st-line-2); color: var(--st-accent); }
.war-stage .st-swatch.fog { background: var(--st-line); border-color: var(--st-line-2); }
.war-stage .st-alert { background: var(--st-surface); box-shadow: 0 2px 8px rgba(30,47,50,0.2); }
.war-stage .st-alert.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, var(--st-accent)) 28%, transparent), 0 2px 8px rgba(30,47,50,0.2); }
.war-stage .st-left { width: 248px; padding: 12px; }
.war-stage .st-right { width: 248px; top: 288px; max-height: calc(100% - 288px - 102px); }
.war-stage .st-mini { top: 88px; bottom: auto; width: 248px; height: 188px; padding: 6px; }
.war-stage .st-ticker { left: 276px; right: 276px; }
.war-stage .st-agent { width: 248px; }
.war-stage > .map .ctrl { top: auto; right: 276px; bottom: 102px; }
.war-stage > .map .map-accessible { top: 88px; right: 276px; }
.war-stage > .map .legend { display: none; }
.war-stage > .map .map-selection { left: 276px; right: 276px; bottom: 16px; }
.war-stage:has(.map-selection:not(.hidden)) .st-ticker { display: none; }
@media (max-width: 1100px) {
  .war-stage > .map .ctrl { right: 12px; bottom: 12px; }
  .war-stage > .map .map-accessible { top: 12px; right: 62px; }
  .war-stage > .map .map-selection { left: 12px; right: 64px; bottom: 12px; }
  .war-stage .st-left, .war-stage .st-right, .war-stage .st-agent, .war-stage .st-ticker { width: auto; }
  .war-stage .st-right { max-height: none; }
}
@media (max-width: 700px) {
  .city-card-art { width: 62px; height: 58px; }
  .map-selection { flex-direction: column; align-items: stretch; right: 64px; }
  .map-selection-title b { font-size: 17px; }
  .map-selection-actions { flex-wrap: wrap; }
  .map-selection-actions button { flex: 1 1 120px; }
  .map.illustrated .map-accessible { right: 12px; top: 12px; max-width: calc(100% - 24px); }
  .map.illustrated .map-accessible[open] { width: calc(100% - 24px); }
}

/* Empire command bar: readable stock, income and direct paths into each decision area. */
.war-stage .st-top { z-index: 8; height: 132px; display: grid; grid-template-rows: 64px 68px; left: 12px; right: 12px; top: 10px; border-color: var(--st-line-2); }
.war-stage .st-top > * { padding: 0; border-right: 0; min-width: 0; }
.war-stage .st-top-main { display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(150px, 190px); align-items: stretch; border-bottom: 1px solid var(--st-line); }
.war-stage .st-who { display: flex; align-items: center; gap: 10px; padding: 6px 12px !important; }
.war-stage .st-who .shield { width: 34px; height: 40px; }
.war-stage .st-who > div { min-width: 0; }
.war-stage .st-name { font: 700 18px/1.12 Georgia, serif; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }
.war-stage .st-sub { font: 11px/1.3 var(--font-body); }
.war-stage .st-bonus { color: var(--st-gold); }
.war-stage .st-nav { display: flex; align-items: stretch; gap: 1px; min-width: 0; }
.war-stage .st-nav button, .war-stage .st-more > summary { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px; border: 0; background: transparent; color: var(--st-ink); font: 600 12px var(--font-body); cursor: pointer; white-space: nowrap; transition: color 160ms var(--ease-out-quart), background-color 160ms var(--ease-out-quart); }
.war-stage .st-nav button:hover, .war-stage .st-more > summary:hover { background: var(--st-surface-2); color: var(--st-ink-strong); }
.war-stage .st-nav button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--st-accent); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out-quart); }
.war-stage .st-nav button.active { color: var(--st-ink-strong); }
.war-stage .st-nav button.active::after { transform: scaleX(1); }
.war-stage .st-nav button:focus-visible, .war-stage .st-more > summary:focus-visible, .war-stage .st-economy button:focus-visible { outline: 2px solid var(--st-accent); outline-offset: -3px; }
.war-stage .st-more { position: relative; }
.war-stage .st-more > summary { list-style: none; height: 100%; }
.war-stage .st-more > summary::-webkit-details-marker { display: none; }
.war-stage .st-more-menu { position: absolute; z-index: 10; top: calc(100% + 2px); right: 0; min-width: 190px; padding: 5px; display: grid; background: var(--st-surface); border: 1px solid var(--st-line-2); box-shadow: 0 8px 22px rgba(31,43,43,0.22); animation: st-menu-in 180ms var(--ease-out-quart) both; }
.war-stage .st-more-menu button { width: 100%; justify-content: flex-start; min-height: 38px; }
.war-stage .st-clock { display: flex; flex-direction: column; align-items: stretch !important; width: auto; min-width: 0; padding: 6px 12px; border-left: 1px solid var(--st-line); gap: 1px !important; justify-content: center; }
.war-stage .st-clock b { color: var(--st-ink-strong); font: 700 14px Georgia, serif; }
.war-stage .st-clock small { color: var(--st-muted); font: 10px/1.2 var(--font-body); }
.war-stage .st-track { width: 100%; margin: 2px 0; }
.war-stage .st-track .seg.done, .war-stage .st-track .seg.now { background: var(--st-gold); box-shadow: none; }
.war-stage .st-economy { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(160px, 1.3fr) minmax(120px, 1fr); align-items: stretch; }
.war-stage .st-economy > button { position: relative; display: grid; grid-template-columns: 24px minmax(0,1fr); grid-template-rows: 1fr auto; align-items: center; column-gap: 7px; min-width: 0; padding: 5px 9px; border: 0; border-right: 1px solid var(--st-line); border-radius: 0; background: transparent; color: var(--st-ink); text-align: left; cursor: pointer; transition: background-color 160ms var(--ease-out-quart); }
.war-stage .st-economy > button:last-child { border-right: 0; }
.war-stage .st-economy > button:hover { background: var(--st-surface-2); }
.war-stage .st-economy .ico { grid-column: 1; grid-row: 1; display: grid; color: var(--st-positive); }
.war-stage .st-economy .resource-gold .ico, .war-stage .st-economy .st-orders .ico { color: var(--st-gold); }
.war-stage .st-economy .resource-iron .ico { color: var(--st-muted); }
.war-stage .st-economy .resource-crystal .ico, .war-stage .st-economy .st-prestige .ico { color: var(--st-muted); }
.war-stage .st-res-data { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.war-stage .st-res-data small { color: var(--st-muted); font: 10px/1.1 var(--font-body); }
.war-stage .st-res-data b { color: var(--st-ink); font: 700 18px/1 Georgia, serif; white-space: nowrap; }
.war-stage .st-res-rate { grid-column: 1 / -1; grid-row: 2; justify-self: end; color: var(--st-positive) !important; font: 600 10px/1.1 var(--font-body); white-space: nowrap; }
.war-stage .st-res-rate.down { color: var(--st-danger) !important; }
.war-stage .st-res.gained::after, .war-stage .st-res.spent::after { content: ""; position: absolute; inset: 3px; pointer-events: none; background: var(--st-positive); animation: st-ledger-flash 650ms var(--ease-out-quart) both; }
.war-stage .st-res.spent::after { background: var(--st-danger); }
.war-stage .st-res.event-activity::after { content: ""; position: absolute; inset: 3px; pointer-events: none; background: var(--st-gold); animation: st-ledger-flash 1200ms var(--ease-out-quart) both; }
.war-stage .st-right.visual-event-flash { animation: st-building-complete 1350ms var(--ease-out-quart) both; }
.war-stage .st-left { top: 200px; max-height: calc(100% - 200px - 100px); }
.war-stage .st-mini { top: 200px; height: 150px; }
.war-stage .st-right { top: 362px; max-height: calc(100% - 362px - 100px); }
.war-stage .st-alerts { top: 152px; }
.war-stage > .map .map-accessible { top: 154px; right: 276px; }
.war-stage > .map .ctrl { bottom: 112px; }
.war-stage .st-ticker { bottom: 101px; padding: 8px 12px; display: flex; }
.war-stage .st-ticker .st-legend, .war-stage .st-ticker .st-rule { display: none; }
.war-stage .st-ticker .st-day { color: var(--st-ink); }
.war-stage:has(.map-selection:not(.hidden)) .st-ticker { display: flex; }
.war-stage .st-industry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; }
.war-stage .st-industry-item { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 5px; min-width: 0; padding: 5px 0; border-bottom: 1px solid var(--st-line); }
.war-stage .st-industry-icon { grid-row: 1 / span 2; color: var(--st-positive); }
.war-stage .st-industry-item:nth-child(2) .st-industry-icon { color: var(--st-positive); }
.war-stage .st-industry-item:nth-child(3) .st-industry-icon { color: var(--st-muted); }
.war-stage .st-industry-item:nth-child(4) .st-industry-icon { color: var(--st-gold); }
.war-stage .st-industry-item b { color: var(--st-ink-strong); font: 700 18px/1 Georgia, serif; }
.war-stage .st-industry-item small { overflow: hidden; color: var(--st-muted); font: 10px/1.2 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.war-stage > .map .map-selection { animation: st-selection-in 260ms var(--ease-out-quart) both; }
@keyframes st-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes st-selection-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes st-ledger-flash { from { opacity: .5; transform: scale(.98); } to { opacity: 0; transform: scale(1); } }
@keyframes st-feed-arrive { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes st-building-complete {
  0%, 100% { border-color: var(--st-line); box-shadow: 0 5px 18px rgba(30, 47, 50, .12); }
  18%, 48% { border-color: var(--st-gold); box-shadow: 0 0 0 3px rgba(184, 138, 66, .2), 0 0 24px rgba(221, 182, 105, .42), 0 5px 18px rgba(30, 47, 50, .12); }
  70% { border-color: var(--st-gold); box-shadow: 0 0 0 1px rgba(184, 138, 66, .12), 0 0 10px rgba(221, 182, 105, .2), 0 5px 18px rgba(30, 47, 50, .12); }
}

@media (max-width: 1100px) {
  .war-stage .st-top { position: static; height: auto; grid-template-rows: auto auto; width: auto; }
  .war-stage .st-top-main { grid-template-columns: minmax(0, 1fr) 170px; }
  .war-stage .st-nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; overflow: visible; border-top: 1px solid var(--st-line); }
  .war-stage .st-clock { grid-column: 2; grid-row: 1; }
  .war-stage .st-economy { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .war-stage .st-economy > button:nth-child(4) { border-right: 0; }
  .war-stage .st-economy > button:nth-child(n+5) { border-top: 1px solid var(--st-line); }
  .war-stage .st-left, .war-stage .st-right, .war-stage .st-ticker { top: auto; bottom: auto; max-height: none; }
  .war-stage .st-alerts { top: auto; }
  .war-stage > .map .map-accessible { top: 12px; right: 62px; }
  .war-stage > .map .ctrl { bottom: 12px; right: 12px; }
  .war-stage .st-ticker { display: flex; }
}
@media (max-width: 700px) {
  .war-stage .st-top-main { grid-template-columns: minmax(0, 1fr) 132px; }
  .war-stage .st-name { font-size: 15px; }
  .war-stage .st-sub { max-width: 150px; }
  .war-stage .st-clock { padding: 5px 8px; }
  .war-stage .st-economy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .war-stage .st-nav button, .war-stage .st-more > summary { padding: 0 8px; font-size: 11px; }
  .war-stage .st-economy > button { min-height: 57px; border-top: 1px solid var(--st-line); }
  .war-stage .st-economy > button:nth-child(odd) { border-right: 1px solid var(--st-line); }
  .war-stage .st-economy > button:nth-child(even) { border-right: 0; }
  .war-stage .st-more-menu { right: auto; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .war-stage .st-more-menu, .war-stage > .map .map-selection, .war-stage .st-res.gained::after, .war-stage .st-res.spent::after, .war-stage .st-res.event-activity::after, .war-stage .st-news.fresh, .war-stage .st-right.visual-event-flash { animation: none; }
  .war-stage .st-nav button, .war-stage .st-more > summary, .war-stage .st-economy > button { transition: none; }
}

/* The playable command room uses the same illustrated atlas composition as the approved visual study. */
.empire-live { isolation: isolate; background: var(--st-stage); height: calc(100dvh - 130px); min-height: 520px; }
/* Keep the site chrome inside the same cartographic world as the playable empire view. */
:root[data-theme="light"] body:has(.empire-live) { color: #213d49; background: #e7dfc9; }
:root[data-theme="light"] body:has(.empire-live) .topbar { background: rgba(248, 242, 223, .97); border-color: #c9c0aa; box-shadow: 0 2px 12px rgba(30, 47, 50, .08); }
:root[data-theme="light"] body:has(.empire-live) .brand, :root[data-theme="light"] body:has(.empire-live) .brand:hover { color: #1b3e54; }
:root[data-theme="light"] body:has(.empire-live) #wordmark { display: flex; flex-direction: column; line-height: 1; }
:root[data-theme="light"] body:has(.empire-live) #wordmark b { color: #1b3e54; font: 700 17px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
:root[data-theme="light"] body:has(.empire-live) #wordmark small { color: #65746b; margin-top: 5px; font: 500 9.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
:root[data-theme="light"] body:has(.empire-live) .nav a { color: #65746b; }
:root[data-theme="light"] body:has(.empire-live) .nav a .ui-icon { color: #65746b; }
:root[data-theme="light"] body:has(.empire-live) .nav a:hover { color: #1b3e54; background: rgba(29, 82, 109, .07); }
:root[data-theme="light"] body:has(.empire-live) .nav a.active { color: #1d526d; background: rgba(29, 82, 109, .08); }
:root[data-theme="light"] body:has(.empire-live) .nav a.active::after { background: #1d526d; }
:root[data-theme="light"] body:has(.empire-live) .account, :root[data-theme="light"] body:has(.empire-live) .topbar .live { color: #65746b; }
:root[data-theme="light"] body:has(.empire-live) .topbar select.lang { color: #31546a; background: #fffbee; border-color: #c9c0aa; }
:root[data-theme="light"] body:has(.empire-live) .topbar .btn.ghost { color: #31546a; border-color: #b8ad96; }
:root[data-theme="light"] body:has(.empire-live) .topbar .btn.ghost:hover { color: #173f55; background: #eee7d3; }
:root[data-theme="light"] body:has(.empire-live) .statusbar { background: rgba(248, 242, 223, .97); border-color: #c9c0aa; color: #65746b; box-shadow: 0 -2px 12px rgba(30, 47, 50, .08); }
:root[data-theme="light"] body:has(.empire-live) .statusbar b, :root[data-theme="light"] body:has(.empire-live) .statusbar .gold b { color: #1d526d; }
:root[data-theme="light"] body:has(.empire-live) .statusbar .legal-links a { color: #65746b; }
:root[data-theme="light"] body:has(.empire-live) .statusbar .legal-links a:hover { color: #1d526d; }
.empire-live::after { content: ""; position: absolute; z-index: 2; top: 140px; right: 410px; bottom: 126px; left: 42%; pointer-events: none; background: linear-gradient(90deg, transparent 45%, rgba(233, 229, 214, .12) 72%, rgba(242, 239, 226, .3)); }
.empire-live .st-glass { background: var(--st-surface); border-color: var(--st-line-2); color: var(--st-ink); box-shadow: 0 5px 20px rgba(30, 47, 50, .19); }
.empire-live .st-top { right: 418px; }
.empire-live .st-top-main { grid-template-columns: minmax(175px, 1fr) minmax(0, auto) 145px; }
.empire-live .st-nav { overflow-x: auto; scrollbar-width: none; }
.empire-live .st-nav::-webkit-scrollbar, .empire-live .st-economy::-webkit-scrollbar { display: none; }
.empire-live .st-nav button { padding-inline: 7px; font-size: 11px; }
.empire-live .st-nav button .ui-icon { width: 14px; height: 14px; }
.empire-live .st-clock { padding-inline: 8px; }
.empire-live .st-clock b { font-size: 13px; }
.empire-live > .map { inset: 0 410px 126px 0; width: auto; height: auto; background-color: var(--st-void); }
:root[data-theme="light"] .empire-live > .map { background-image: linear-gradient(rgba(233,227,210,.34), rgba(233,227,210,.34)), url("/assets/map-illustrated/fog-bank.webp"); background-position: center, right 46% center; background-size: cover, 110% auto; background-repeat: no-repeat; }
/* Dark: an inner vignette seats the light parchment map in the dark frame; the drifting fog bands dim to smoke. */
:root:not([data-theme="light"]) .empire-live > .map::after { content: ""; display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 1; filter: none; animation: none; background: none; box-shadow: inset 0 0 140px 24px rgba(6, 8, 12, 0.6); }
:root:not([data-theme="light"]) .empire-fog { opacity: .12; }
.empire-live > .map .map-selection { display: none; }
.empire-live > .map .ctrl { right: 12px; bottom: 58px; }
.empire-live > .map .map-accessible { top: 154px; right: 12px; }
.empire-live .st-alerts { left: calc((100% - 410px) / 2); }
.empire-live .st-alert { transition: transform 180ms var(--ease-out-quart), box-shadow 180ms var(--ease-out-quart); }
.empire-live .st-alert { background: radial-gradient(circle at 40% 32%, var(--st-field), var(--st-surface-2)); box-shadow: 0 2px 10px rgba(39, 52, 45, .18); }
.empire-live .st-alert.on { box-shadow: 0 0 0 3px rgba(169, 130, 70, .2), 0 3px 13px rgba(39, 52, 45, .2); }
.empire-live .st-alert .n { color: #fff8e5; }
.empire-live .st-pop { background: var(--st-surface); border-color: var(--st-line-2); color: var(--st-ink); box-shadow: 0 5px 18px rgba(30, 47, 50, .2); }
.empire-live .st-threat { color: var(--st-ink); }
.empire-live .st-threat .scene-art { opacity: .1; }
.empire-live .st-threat .scene-art::after { background: linear-gradient(90deg, var(--st-surface), var(--st-surface)); }
.empire-live .st-threat p { color: var(--st-muted); }
.empire-live .st-threat .link-btn { color: var(--st-accent); }
.empire-live .st-alert:hover { transform: translateY(-3px); }
.empire-live .st-left { top: 200px; left: 12px; width: 320px; max-height: calc(100% - 340px); z-index: 9; }
.empire-live .st-left.is-entering { animation: empire-drawer-in 260ms var(--ease-out-quart) both; }
.empire-live .st-mini { top: 8px; right: 8px; bottom: auto; width: 394px; height: 356px; padding: 10px; }
.empire-live .st-mini .map { height: calc(100% - 100px); }
.empire-live .st-right { top: 374px; right: 8px; bottom: 134px; width: 394px; max-height: none; }
.empire-live .st-agent { display: none; }
.empire-live .st-ticker { left: 12px; right: 418px; bottom: 134px; height: 40px; box-sizing: border-box; align-items: center; justify-content: center; flex-direction: row; gap: 12px; }
.empire-live .st-ticker .st-day { width: 100%; }
.empire-live .st-ticker .st-day > span:not(.st-eb) { flex: 1; }
.empire-live .st-eb { color: var(--st-ink); }
.empire-live .st-mini .map.illustrated .legend { display: none; }
.empire-strategy-head { padding: 6px 8px; font: 700 16px Georgia, serif; border-bottom: 1px solid var(--st-line); }
.empire-layer-panel { position: relative; z-index: 2; margin-top: 3px; padding: 5px 0 0; border-top: 1px solid var(--st-line); }
.empire-layer-title { margin: 0 2px 4px; color: var(--st-muted); font: 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.empire-layer-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 5px; color: var(--st-muted); font: 9px var(--font-body); }
.empire-layer-legend span { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.empire-layer-legend i { display: inline-block; flex: none; width: 10px; height: 10px; border: 1px solid rgba(33,61,73,.23); border-radius: 2px; }
.empire-layer-legend .my-territory { background: #367d9b; }
.empire-layer-legend .other-territory { background: #b46c59; }
.empire-layer-legend .neutral-territory { background: #9ab178; }
.empire-layer-legend .unexplored-territory { background: #d7cfb8; }
.empire-layer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.empire-layer-toggle { display: flex; min-width: 0; min-height: 34px; align-items: center; justify-content: center; gap: 5px; padding: 4px 5px; border: 1px solid var(--st-line); border-radius: 3px; background: var(--st-surface-2); color: var(--st-muted); font: 10px var(--font-body); cursor: pointer; transition: color 160ms var(--ease-out-quart), background-color 160ms var(--ease-out-quart), border-color 160ms var(--ease-out-quart); }
.empire-layer-toggle .ui-icon { flex: none; }
.empire-layer-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empire-layer-toggle.is-on { border-color: var(--st-line-2); background: var(--st-surface-2); color: var(--st-accent); box-shadow: inset 0 0 0 1px rgba(29,82,109,.12); }
.empire-layer-toggle:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
.empire-fog { position: absolute; z-index: 2; width: calc(100% - 410px); height: 155px; object-fit: fill; opacity: .3; pointer-events: none; }
.empire-fog-top { top: -95px; left: 0; }
.empire-fog-bottom { bottom: 75px; left: 0; transform: rotate(180deg); opacity: .2; }
.empire-fog-top { animation: empire-fog-drift 72s ease-in-out infinite alternate; }
.empire-fog-bottom { animation: empire-fog-drift-reverse 88s ease-in-out infinite alternate; }
.empire-live .st-city { text-align: left; }
.empire-outliner-city, .empire-outliner-action, .empire-outliner-more { width: 100%; border: 0; background: transparent; color: var(--st-ink); cursor: pointer; }
.empire-outliner-city:hover, .empire-outliner-action:hover, .empire-outliner-more:hover { background: var(--st-surface-2); }
.empire-outliner-action, .empire-outliner-more { display: flex; align-items: center; gap: 7px; min-height: 35px; padding: 6px 4px; border-bottom: 1px solid var(--st-line); text-align: left; font: 600 12px var(--font-body); }
.empire-outliner-action span { flex: 1; }
.empire-outliner-action small { color: var(--st-muted); }
.empire-outliner-more { justify-content: space-between; color: var(--st-accent); }
.empire-bottom { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 126px; border-radius: 0; }
.empire-bottom-inner { display: grid; grid-template-columns: 220px minmax(315px, 420px) minmax(100px, 1fr) 185px 165px; align-items: center; height: 100%; min-width: 0; padding: 8px 12px; }
.empire-bottom-inner.city-arrive { animation: empire-city-arrive 250ms var(--ease-out-quart) both; }
.empire-bottom-inner > * + * { border-left: 1px solid var(--st-line); }
.empire-bottom-city { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 10px; }
.empire-city-shield { display: grid; place-items: center; flex: none; width: 45px; height: 53px; background: #205c78; border: 2px solid #b7995e; border-radius: 5px 5px 16px 16px; color: #fff7dd; }
.empire-bottom-city b { display: block; overflow: hidden; font: 700 23px/1.1 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.empire-bottom-city small { color: var(--st-muted); font-size: 11px; }
.empire-bottom-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 82px; }
.empire-bottom-metrics > div:not(.empire-foreign-note) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.empire-bottom-metrics > div + div { border-left: 1px solid var(--st-line); }
.empire-bottom-metrics .ui-icon { color: var(--st-accent); }
.empire-bottom-metrics small { color: var(--st-muted); font: 10px/1.1 var(--font-body); text-align: center; }
.empire-bottom-metrics b { font: 700 17px Georgia, serif; white-space: nowrap; }
.empire-foreign-note { grid-column: 1 / -1; display: grid; place-items: center; font: italic 13px Georgia, serif; }
.empire-bottom-art { display: block; width: 100%; max-width: 290px; height: 108px; margin: auto; object-fit: contain; object-position: bottom; }
.empire-bottom-context { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding-inline: 8px; font: italic 13px/1.25 Georgia, serif; text-align: center; }
.empire-bottom-context strong { font-weight: 700; }
.empire-bottom-context span { color: var(--st-muted); font-size: 11px; }
.empire-next { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 58px; margin-left: 9px; padding: 10px; border: 2px solid var(--st-line-2); border-radius: 5px; background: var(--st-cta-bg); color: var(--st-cta-ink); font: 600 11px/1.2 var(--font-body); letter-spacing: .07em; cursor: pointer; transition: background-color 170ms var(--ease-out-quart), transform 170ms var(--ease-out-quart); }
.empire-next:hover { background: var(--st-cta-hover); transform: translateY(-2px); }
/* .war-stage .st-left pads every panel; a drawer has its own sticky head, so any padding here let scrolled content
   show through above it. */
.empire-drawer, .war-stage .empire-drawer { gap: 0; padding: 0; }
.empire-drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 8px 12px; border-bottom: 1px solid var(--st-line); background: var(--st-surface); }
.empire-drawer-head > span { display: flex; align-items: center; gap: 8px; color: var(--st-accent); }
.empire-drawer-head h2 { font: 700 19px/1.15 Georgia, serif; }
.empire-drawer-head button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--st-line); border-radius: 3px; background: var(--st-surface-2); color: var(--st-ink); cursor: pointer; }
.empire-drawer-sub { margin: 0; padding: 10px 12px; font: italic 12px/1.4 Georgia, serif; color: var(--st-muted); }
.empire-drawer-block { padding: 0 12px 12px; }
.empire-drawer-block h3 { margin: 5px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--st-line); color: var(--st-ink); font: 700 12px Georgia, serif; letter-spacing: .05em; text-transform: uppercase; }
.empire-drawer-line { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 5px 0; border-bottom: 1px solid var(--st-line); font: 12px/1.2 var(--font-body); }
.empire-drawer-icon { color: var(--st-positive); }
.empire-drawer-copy { flex: 1; min-width: 0; }
.empire-drawer-copy b { display: block; font-weight: 600; }
.empire-drawer-copy small { display: block; overflow: hidden; color: var(--st-muted); text-overflow: ellipsis; }
.empire-drawer-line strong { color: var(--st-ink-strong); font: 700 12px Georgia, serif; text-align: right; }
.empire-drawer-line.danger .empire-drawer-icon, .empire-drawer-line.danger strong { color: var(--st-danger); }
.empire-empty { padding: 8px 0; color: var(--st-muted); font: italic 12px Georgia, serif; }
.empire-garrison { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--st-line); background: transparent; color: var(--st-ink); text-align: left; cursor: pointer; }
.empire-garrison:hover { background: var(--st-surface-2); }
.empire-garrison > span { flex: 1; min-width: 0; }
.empire-garrison b { display: block; font-size: 12px; }
.empire-garrison small { display: block; color: var(--st-muted); font-size: 10px; }
.empire-garrison strong { font: 700 13px Georgia, serif; }
.empire-drawer-action, .empire-drawer-footer button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; width: calc(100% - 24px); margin: 0 12px 12px; padding: 8px 10px; border: 1px solid var(--st-line-2); border-radius: 3px; background: var(--st-surface); color: var(--st-ink); font: 600 12px var(--font-body); cursor: pointer; }
.empire-drawer-action:hover, .empire-drawer-footer button:hover { background: var(--st-surface-2); }
.empire-drawer-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--st-line); }
.empire-drawer-footer span { display: block; padding: 0 12px 8px; color: var(--st-muted); font: italic 11px/1.4 Georgia, serif; }
@keyframes empire-drawer-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes empire-city-arrive { from { opacity: .72; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes empire-fog-drift { from { translate: -1.5% 0; } to { translate: 2% 0; } }
@keyframes empire-fog-drift-reverse { from { translate: 2% 0; } to { translate: -1.5% 0; } }

.empire-drawer-tab .section-title { color: var(--st-ink); font: 700 17px/1.2 Georgia, serif; letter-spacing: .02em; text-transform: none; }
.empire-drawer-tab .section-title .ui-icon { color: var(--st-gold); filter: none; }
.empire-drawer-tab .section-title::after { background: var(--st-line); }
.empire-drawer-tab .panel { color: var(--st-ink); background: var(--st-surface); border-color: var(--st-line-2); box-shadow: 0 4px 16px rgba(30,47,50,.11); }
.empire-drawer-tab .panel-title { color: var(--st-ink-strong); font-family: Georgia, serif; font-size: 15px; letter-spacing: .02em; text-transform: none; }
.empire-drawer-tab .panel-title .ico { color: var(--st-accent); border-color: var(--st-line-2); }
.empire-drawer-tab .panel-note, .empire-drawer-tab .muted, .empire-drawer-tab .faint { color: var(--st-muted); }
.empire-drawer-tab .city-card { background: var(--st-surface); border-color: var(--st-line); color: var(--st-ink); }
.empire-drawer-tab .city-card:hover { background: var(--st-surface); border-color: var(--st-line-2); }
.empire-drawer-tab .city-card .cmeta, .empire-drawer-tab .city-card .kpis small { color: var(--st-muted); }
.empire-drawer-tab .city-card .blds span { color: var(--st-muted); border-color: var(--st-line); }
.empire-drawer-tab .city-card .blds .ui-icon { color: var(--st-positive); }
.empire-drawer-tab .city-card .blds span b { color: var(--st-gold); }
.empire-drawer-tab .list > li { border-color: var(--st-line); }
.empire-drawer-tab .empty { color: var(--st-muted); }
.empire-drawer-tab input, .empire-drawer-tab select, .empire-drawer-tab textarea { color: var(--st-ink); background: var(--st-field); border-color: var(--st-line-2); }
.empire-drawer-tab input:focus, .empire-drawer-tab select:focus, .empire-drawer-tab textarea:focus { background: var(--st-field); border-color: var(--st-accent); box-shadow: 0 0 0 3px rgba(57,115,140,.13); }
.empire-drawer-tab label.field, .empire-drawer-tab label.check { color: var(--st-muted); }
.empire-drawer-tab .btn:not(.ghost):not(.danger) { background: var(--st-cta-bg); color: var(--st-cta-ink); border-color: var(--st-gold); }
.empire-drawer-tab .btn.ghost { color: var(--st-ink); border-color: var(--st-line-2); }
.empire-drawer-tab .btn.ghost:hover { color: var(--st-ink-strong); background: var(--st-surface-2); }

@media (min-width: 1101px) and (max-width: 1450px) {
  .empire-live .st-top-main { grid-template-columns: minmax(145px, 1fr) minmax(0, auto) 128px; }
  .empire-live .st-nav button { padding-inline: 5px; font-size: 10px; }
  .empire-bottom-inner { grid-template-columns: 175px minmax(290px, 370px) minmax(90px, 1fr) 145px 150px; }
  .empire-bottom-city b { font-size: 19px; }
  .empire-bottom-context { font-size: 11px; }
}
@media (max-width: 1100px) {
  .empire-live { height: auto; min-height: calc(100dvh - 100px); }
  .empire-live .st-top { right: auto; }
  .empire-live .st-top-main { grid-template-columns: minmax(0, 1fr) 170px; }
  .empire-live .st-nav { grid-column: 1 / -1; grid-row: 2; }
  .empire-live .st-economy { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .empire-live > .map { inset: auto; width: 100%; height: 58vh; }
  .empire-live::after { display: none; }
  .empire-live > .map .map-selection { display: none; }
  .empire-live .st-alerts { left: auto; }
  .empire-live .st-left, .empire-live .st-right, .empire-live .st-ticker { position: static; width: 100%; max-height: none; animation: none; }
  .empire-live .st-left { order: 4; }
  .empire-live .st-right { order: 5; }
  .empire-live .st-agent { display: flex; order: 6; }
  .empire-live .st-ticker { order: 7; height: auto; }
  .empire-live .empire-bottom { position: static; order: 8; height: auto; }
  .empire-bottom-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .empire-bottom-metrics { grid-column: 1 / -1; grid-row: 2; }
  .empire-bottom-art, .empire-bottom-context, .empire-fog { display: none; }
  .empire-next { grid-column: 2; grid-row: 1; }
}
@media (max-width: 700px) {
  body:has(.empire-live) .topbar { gap: 8px; padding-inline: 10px; }
  body:has(.empire-live) #brand { display: none; }
  body:has(.empire-live) #nav { flex: 1; }
  body:has(.empire-live) .topbar .right { gap: 6px; }
  body:has(.empire-live) .topbar select.lang { max-width: 116px; padding-inline: 4px; font-size: 10px; }
  .empire-live .st-top-main { grid-template-columns: minmax(0, 1fr) 124px; }
  .empire-live .st-nav { flex-wrap: nowrap; overflow-x: auto; }
  .empire-live .st-nav button, .empire-live .st-more > summary { min-height: 44px; flex: 0 0 auto; }
  .empire-live .st-economy { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .empire-live .st-economy > button { flex: 0 0 110px; min-height: 60px; border-top: 0; scroll-snap-align: start; }
  .empire-live .st-economy > button:nth-child(even), .empire-live .st-economy > button:nth-child(4) { border-right: 1px solid var(--st-line); }
  .empire-live .st-economy > button:last-child { border-right: 0; }
  .empire-bottom-city b { font-size: 18px; }
  .empire-bottom-metrics b { font-size: 14px; }
  .empire-bottom-metrics small { font-size: 9px; }
  .empire-next { min-height: 44px; padding: 6px 8px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .empire-live .st-left.is-entering, .empire-bottom-inner.city-arrive,
  .empire-fog-top, .empire-fog-bottom { animation: none; }
  .empire-live .st-alert, .empire-next { transition: none; }
  .empire-live .st-alert:hover, .empire-next:hover { transform: none; }
}

/* The map remains the stage; strategic tools sit over its eastern edge like the atlas reference. */
.empire-council-toggle { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; list-style: none; color: var(--st-ink-strong); font: 700 13px Georgia, serif; cursor: pointer; }
.empire-council-toggle::-webkit-details-marker { display: none; }
.empire-council-toggle span { flex: 1; }
.empire-council-toggle .ui-icon:last-child { transition: transform 180ms var(--ease-out-quart); }
.st-right[open] .empire-council-toggle .ui-icon:last-child { transform: rotate(90deg); }
.empire-outliner-scroll { padding: 0 10px 10px; overflow: auto; max-height: calc(100% - 40px); }
.empire-city-next { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-left: auto; border: 1px solid var(--st-line-2); border-radius: 4px; background: var(--st-surface); color: var(--st-ink); cursor: pointer; }
.empire-city-next:hover { background: var(--st-surface-2); }
.empire-bottom-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-left: 12px; }
.empire-bottom-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 5px 7px; border: 1px solid var(--st-line-2); border-radius: 4px; background: var(--st-surface); color: var(--st-ink-strong); font: 600 11px/1.15 var(--font-body); white-space: nowrap; cursor: pointer; }
.empire-bottom-actions button.primary { background: var(--st-cta-bg); color: var(--st-cta-ink); border-color: var(--st-cta-bg); }
.empire-bottom-actions button:hover { background: var(--st-surface-2); }
.empire-bottom-actions button.primary:hover { background: var(--st-cta-hover); }
@media (min-width: 1101px) {
  .empire-live > .map { inset: 0 0 108px 0; }
  .empire-live::after { display: none; }
  .empire-live .st-top { top: 12px; left: 16px; right: 330px; height: 98px; grid-template-rows: 46px 52px; }
  .empire-live .st-top-main { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) 126px; }
  .empire-live .st-who { padding: 3px 9px !important; }
  .empire-live .st-who .shield { width: 28px; height: 33px; }
  .empire-live .st-name { font-size: 15px; }
  .empire-live .st-sub { font-size: 9px; }
  .empire-live .st-nav button, .empire-live .st-more > summary { min-height: 42px; padding-inline: 5px; font-size: 10px; }
  .empire-live .st-nav button .ui-icon { width: 13px; height: 13px; }
  .empire-live .st-clock { padding: 3px 7px; }
  .empire-live .st-clock b { font-size: 12px; }
  .empire-live .st-economy > button { padding: 3px 7px; column-gap: 5px; }
  .empire-live .st-economy .ico .ui-icon { width: 18px; height: 18px; }
  .empire-live .st-res-data small { font-size: 9px; }
  .empire-live .st-res-data b { font-size: 15px; }
  .empire-live .st-res-rate { font-size: 9px; }
  .empire-live .st-mini { top: 12px; right: 16px; width: 298px; height: 294px; padding: 8px; }
  .empire-live .st-mini .map { height: calc(100% - 36px); }
  .empire-layer-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 60px; margin: 0; padding: 0; border: 0; }
  .empire-layer-title, .empire-layer-legend { display: none; }
  .empire-layer-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .empire-layer-toggle { display: flex; flex-direction: column; gap: 2px; width: 60px; min-height: 51px; padding: 5px 3px; border-color: var(--st-line-2); background: var(--st-surface); font-size: 9px; box-shadow: 0 2px 5px rgba(30,47,50,.12); }
  .empire-layer-toggle .ui-icon { width: 20px; height: 20px; }
  .empire-layer-toggle span { max-width: 54px; }
  .empire-live .st-right { top: 320px; right: 92px; bottom: auto; width: 205px; max-height: none; padding: 0; overflow: hidden; }
  .empire-live .st-right[open] { right: 92px; bottom: 118px; width: 300px; z-index: 12; }
  .empire-live .st-ticker { left: 16px; right: 330px; bottom: 116px; height: 36px; padding: 5px 12px; }
  /* Anchored to the map's bottom edge (the city bar sits below it), so the buttons never slip behind the bar
     whatever the site chrome leaves of the viewport. */
  .empire-live > .map .ctrl { top: auto; right: 24px; bottom: 12px; }
  .empire-live > .map .ctrl button { width: 40px; height: 40px; }
  .empire-live > .map .map-accessible { top: auto; right: 90px; bottom: 12px; }
  .empire-live .st-ticker:has(.st-day.is-empty) { display: none; }
  .empire-fog { width: 100%; }
  .empire-bottom { height: 108px; }
  .empire-bottom-inner { grid-template-columns: 214px minmax(0, 1fr) 310px; }
  .empire-bottom-art { display: none; }
  .empire-bottom-context { display: none; }
  .empire-bottom-metrics { height: 72px; }
  .empire-next { min-height: 53px; }
}
/* Up to a 1000 px viewport (the room is ~870 px under the site's bars) the inset and layer column shrink so the
   zoom column below them never meets them; under 800 px the zoom buttons lie in a row along the bottom. */
@media (min-width: 1101px) and (max-height: 1000px) {
  .empire-live .st-mini { height: 238px; }
  .empire-live .st-mini .map { height: calc(100% - 32px); }
  .empire-layer-toggle { min-height: 42px; }
  .empire-layer-toggle .ui-icon { width: 17px; height: 17px; }
  .empire-live .st-right { top: 265px; }
  .empire-live > .map .ctrl button { width: 36px; height: 36px; }
}
@media (min-width: 1101px) and (max-height: 800px) {
  .empire-live > .map .ctrl { flex-direction: row; }
  .empire-live > .map .map-accessible { right: 200px; }
}
@media (max-width: 1100px) {
  .empire-bottom-actions { grid-column: 2; grid-row: 1; }
}
@media (max-width: 700px) {
  .empire-bottom-actions { display: flex; flex-direction: column; gap: 4px; padding-left: 6px; }
  .empire-bottom-actions button { min-height: 34px; font-size: 10px; }
}
.atlas-compass { position:absolute; right:102px; bottom:140px; display:flex; flex-direction:column; align-items:center; z-index:3; color:var(--st-ink); opacity:.6; font:14px Georgia,serif; pointer-events:none; }
@media(max-width:760px) { .atlas-compass { display:none; } }

/* Tab drawers carry the full detail views (plan, prestige, actions, feed, Regent, keys) inside the room: wider,
   with their page panels sitting flat in the drawer. The strategic inset is clickable (it moves the main map). */
.empire-live .empire-drawer.is-wide { width: min(580px, calc(100% - 380px)); }
.empire-drawer-tab { padding: 4px 12px 12px; }
.empire-drawer-tab .panel { padding: 12px 0; background: transparent; border: 0; box-shadow: none; }
/* The campaign plan needs its board and the chosen step side by side: it opens as a sheet over the whole map,
   under the room's top bar. */
@media (min-width: 761px) {
  .empire-live .empire-drawer.drawer-plan { top: 122px; right: 16px; bottom: 12px; left: 16px; width: auto; max-height: none; z-index: 20; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
  .drawer-plan .empire-drawer-tab { padding: 14px 20px 20px; }
}
.empire-live .empire-drawer.drawer-plan { background: rgb(12, 18, 26); }
:root[data-theme="light"] .empire-drawer-tab .plan-board { background: rgba(166, 122, 60, 0.07); }
.empire-drawer-tab .plan-detail { padding: 14px 16px; border: 1px solid var(--st-line-2); border-radius: 6px; background: var(--st-surface-2); }
.empire-live .st-mini .map { pointer-events: auto; cursor: pointer; }
.shortcut-help { width: min(480px, calc(100vw - 32px)); padding: 0; color: var(--st-ink); background: var(--st-surface); border: 1px solid var(--st-line-2); border-radius: 6px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); }
.shortcut-help::backdrop { background: rgba(6, 8, 12, 0.55); }
.shortcut-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--st-line); }
.shortcut-head h2 { color: var(--st-ink-strong); font: 700 18px Georgia, serif; }
.shortcut-head button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--st-line); border-radius: 3px; background: var(--st-surface-2); color: var(--st-ink); cursor: pointer; }
.kbd-grid { display: grid; padding: 6px 16px 14px; }
.kbd-row { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 12px; min-height: 36px; border-bottom: 1px solid var(--st-line); font: 13px/1.3 var(--font-body); }
.kbd-row:last-child { border-bottom: 0; }
.kbd-row kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-right: 4px; padding: 0 5px; border: 1px solid var(--st-line-2); border-bottom-width: 2px; border-radius: 4px; background: var(--st-surface-2); color: var(--st-ink-strong); font: 600 11px var(--font-mono); }
.empire-drawer-tab .split { display: grid; grid-template-columns: minmax(0, 1fr); }
.resource-flight { position: fixed; left: 0; top: 0; z-index: 60; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--st-line-2); border-radius: 50%; background: var(--st-surface); color: var(--st-gold); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); pointer-events: none; }
@media (max-width: 760px) { .empire-live > .map .map-accessible, .preview-page .empire-live > .map .map-accessible { top: 12px; right: auto; bottom: auto; left: 12px; } }
/* The detail views were drawn for the dark site. In the parchment theme the site's own tokens are re-pointed at
   ink inside the drawer, so every component that reads --text, --muted, --moss… stays legible without a
   per-component override; the few with a dark background baked in get parchment ones. */
:root[data-theme="light"] .empire-drawer-tab {
  --text: var(--st-ink); --muted: var(--st-muted); --faint: var(--st-muted); --line: var(--st-line); --line-2: var(--st-line-2);
  --surface: var(--st-surface-2); --surface-2: var(--st-surface-2); --surface-solid: var(--st-surface);
  --gold: #8a6420; --gold-2: #a67a3c; --mist: #1d6b73; --mist-2: #1d526d; --moss: #3f6b4a; --ember: #a8542a; --blood: #a3423a; --violet: #5f4fa8; --sky: #2a64a0;
}
:root[data-theme="light"] .empire-drawer-tab :is(.stat, .waste-row, .plan-card, .plan-ambition) { background: var(--st-surface-2); border-color: var(--st-line); }
:root[data-theme="light"] .empire-drawer-tab .code { background: var(--st-field); color: var(--st-ink); }
:root[data-theme="light"] .empire-drawer-tab .stat .value { color: var(--st-ink-strong); text-shadow: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A menu entry with something new behind it (the first-session checklist, changes since the last visit). */
.war-stage .st-nav button.has-news::before { content: ""; position: absolute; top: 9px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--st-gold); box-shadow: 0 0 0 2px var(--st-surface); }
.empire-city-card { display: grid; gap: 6px; }
.empire-city-card .empire-drawer-action { width: 100%; margin: 0; }
.empire-drawer-tab .empire-summary { display: grid; gap: 10px; padding-top: 6px; }
/* Phones: a drawer is a sheet that rises over the map instead of a page further down. */
@media (max-width: 760px) {
  .empire-live .empire-drawer { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 72dvh; overflow-y: auto; border-radius: 14px 14px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45); }
  /* A wide drawer's desktop width (100% minus the inset) goes negative on a phone: the sheet spans the screen. */
  .empire-live .empire-drawer.is-wide { width: auto; }
  .empire-live .empire-drawer.drawer-plan { max-height: 90dvh; }
  .empire-live .empire-drawer::before { content: ""; display: block; width: 44px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--st-line-2); }
  .empire-live .empire-drawer.is-entering { animation: empire-sheet-in 280ms var(--ease-out-quart) both; }
}
@keyframes empire-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .empire-live .empire-drawer.is-entering { animation: none; } }
/* The drawer's title stays over whatever scrolls beneath it (stat cards stack their own layers). */
.empire-drawer-head { z-index: 4; }
/* Solid, so text scrolling under the sticky head never shows through it (the parchment theme sets its own). */
.empire-live .empire-drawer-head { background: rgb(12, 18, 26); }
:root[data-theme="light"] .empire-live .empire-drawer, :root[data-theme="light"] .empire-drawer-head { background: #f8f2df; }

/* Tablet (761-1100 px) and desktop refinements, first drawn in the preview and now the room everywhere: the map
   fills the room, panels float over it as on desktop, drawers open over the map instead of stacking below. */
@media (min-width: 761px) and (max-width: 1100px) {
  .empire-live { position: relative; display: block; height: calc(100dvh - 130px); min-height: 0; padding: 0; overflow: hidden; }
  .empire-live > .map { position: absolute; inset: 0 308px 112px 0; order: initial; width: auto; height: auto; min-height: 0; border: 0; border-radius: 0; }
  .empire-live .st-top { position: absolute; inset: 8px 316px auto 8px; order: initial; height: auto; display: block; padding: 0; }
  .empire-live .st-top-main { grid-template-columns: 145px minmax(0, 1fr) 118px; gap: 0; }
  .empire-live .st-top-main > * { min-width: 0; padding-inline: 6px; }
  .empire-live .st-clock { grid-column: auto; grid-row: auto; }
  .empire-live .st-who .shield { width: 28px; height: 34px; }
  .empire-live .st-name { font-size: 14px; }
  .empire-live .st-sub { font-size: 9px; }
  .empire-live .st-nav { grid-column: auto; grid-row: auto; min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  .empire-live .st-nav button { min-height: 34px; flex: 0 0 auto; padding-inline: 4px; font-size: 9px; white-space: nowrap; }
  .empire-live .st-economy { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .empire-live .st-economy > button { min-width: 0; min-height: 49px; padding: 4px 6px; }
  .empire-live .st-economy > button > span:last-child { min-width: 0; }
  .empire-live .st-economy > button small { font-size: 8px; }
  .empire-live .st-alerts { position: absolute; left: calc((100% - 308px) / 2); top: 127px; transform: translateX(-50%); }
  .empire-live .st-pop { width: 270px; padding: 8px 10px; font-size: 11px; }
  .empire-live .st-threat { min-height: 0; margin: -8px -10px; padding: 8px 10px; }
  .empire-live .st-threat p { margin-block: 3px; }
  .empire-live .st-left { position: absolute; top: 132px; left: 8px; width: min(380px, calc(100% - 330px)); max-height: calc(100% - 260px); z-index: 12; }
  .empire-live .st-right { position: absolute; top: 282px; right: 8px; bottom: 120px; width: 292px; max-height: none; }
  .empire-live .st-mini { display: block; position: absolute; top: 8px; right: 8px; bottom: auto; width: 292px; height: 266px; }
  .empire-live .st-mini .map { height: calc(100% - 102px); min-height: 0; }
  .empire-live .empire-layer-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3px; }
  .empire-live .empire-layer-toggle { min-height: 36px; }
  .empire-live .empire-layer-toggle span { display: none; }
  .empire-live .st-ticker { position: absolute; left: 8px; right: 316px; bottom: 120px; height: 34px; padding: 6px 8px; }
  .empire-live .st-ticker .st-legend { display: none; }
  .empire-live .empire-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 112px; }
  .empire-live .empire-bottom-inner { grid-template-columns: 165px minmax(280px, 1fr) 140px; padding: 6px; }
  .empire-live .empire-bottom-art, .empire-live .empire-bottom-context { display: none; }
  .empire-live .empire-bottom-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); height: 76px; }
  .empire-live .empire-bottom-city b { font-size: 16px; }
  .empire-live .empire-bottom-city .empire-city-shield { width: 36px; height: 44px; }
  .empire-live .empire-next { min-height: 48px; margin-left: 5px; padding: 5px; font-size: 9px; }
  .empire-live::after { inset: 130px 308px 112px 42%; }
  .empire-fog { width: calc(100% - 308px); }
  .empire-live > .map .ctrl { top: auto; right: 12px; bottom: 12px; }
  .empire-live > .map .map-accessible { top: 130px; right: 12px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .empire-live > .map { inset: 0 0 112px 0; }
  .empire-live .st-mini { top: 8px; right: 8px; width: 275px; height: 238px; }
  .empire-live .st-mini .map { height: calc(100% - 32px); }
  .empire-live .st-top { right: 292px; }
  .empire-live .st-right { top: 252px; right: 84px; bottom: auto; width: 190px; overflow: hidden; padding: 0; }
  .empire-live .st-right[open] { right: 84px; bottom: 120px; width: 275px; }
  .empire-layer-panel { position: absolute; top: calc(100% + 6px); right: 0; width: 60px; margin: 0; padding: 0; border: 0; }
  .empire-layer-title, .empire-layer-legend { display: none; }
  .empire-layer-grid { grid-template-columns: 1fr; gap: 5px; }
  .empire-layer-toggle { flex-direction: column; width: 60px; min-height: 43px; }
  .empire-layer-toggle span { display: block; font-size: 8px; }
  .empire-live > .map .ctrl { top: 450px; right: 18px; bottom: auto; }
  .empire-live > .map .ctrl button { width: 36px; height: 36px; }
  .empire-live .st-ticker { right: 292px; }
  .empire-live .empire-bottom-inner { grid-template-columns: 165px minmax(280px, 1fr) 240px; }
}
@media (min-width: 761px) {
  .empire-live .empire-bottom-inner { height: 100%; box-sizing: border-box; grid-template-columns: 215px minmax(0,1fr) 310px; align-items: center; }
  .empire-live .empire-bottom-metrics { grid-column: 2; grid-row: 1; height: 72px; }
  .empire-live .empire-bottom-actions { grid-column: 3; grid-row: 1; }
  .empire-live .st-economy { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); overflow: hidden; }
  .empire-live .st-res-data b { font-size: 16px; }
  .empire-live .st-ticker:has(.st-ticker-empty) { display:none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .empire-live .st-top { right: 235px; }
  .empire-live .st-mini { width: 218px; height: 234px; }
  .empire-live .st-top-main { grid-template-columns: minmax(0,1fr) 95px; }
  .empire-live .st-who { display: none; }
  .empire-live .st-nav { grid-column:1; grid-row:1; }
  .empire-live .st-clock { grid-column:2; grid-row:1; }
  .empire-live .st-res-data b { font-size: 14px; }
  .empire-live .st-economy > button { padding-inline:4px; column-gap:3px; }
  .empire-live .st-economy .ico .ui-icon { width: 14px; height:14px; }
  .empire-live .empire-bottom-inner { grid-template-columns: 172px minmax(0,1fr) 226px; }
  .empire-live .empire-bottom-metrics { height: 64px; }
  .empire-live .empire-bottom-actions { padding-left:8px; }
}
@media (min-width: 761px) {
  .empire-layer-toggle { width: 66px; }
  .empire-layer-toggle span { max-width: none; font-size: 9px; overflow: visible; white-space: normal; text-overflow: clip; }
  .empire-layer-panel { width: 66px; }
  .empire-live .st-ticker { bottom: 116px; max-width: 570px; right:auto; background:var(--st-surface); }
}
@media (min-width: 761px) {
  .empire-live .st-ticker:has(.st-day.is-empty) { display:none; }
  .empire-live > .map .map-accessible { top:auto; right:90px; bottom:12px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .empire-live .st-top-main { height:54px; }
  .empire-live .st-clock { overflow:hidden; padding-block:3px; }
  .empire-live .st-clock b { font-size:11px; line-height:1.1; }
  .empire-live .st-clock small { font-size:8px; line-height:1.1; }
  .empire-live .st-clock .st-track { display:none; }
  .empire-live .empire-bottom-actions button { white-space:normal; min-width:0; }
  .empire-live .empire-bottom-actions button .ui-icon { flex-shrink:0; }
  .empire-live .empire-layer-toggle span { display:block; }
}
/* Tablet: the room is short once the site's bars are counted, so zoom lies in a row left of the layer column and
   the list of known places moves to the other corner. */
@media (min-width: 761px) and (max-width: 1100px) {
  .empire-live > .map .ctrl { top: auto; bottom: 12px; right: 84px; flex-direction: row; }
  .empire-live > .map .map-accessible { top: auto; right: auto; bottom: 12px; left: 12px; }
}

/* ---------- Command center (decisions 283–288): directing the agent, watching it, deciding what it held ---------- */
.command-view { display: flex; flex-direction: column; gap: 12px; }
.command-status { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--st-line-2); border-radius: 4px; background: var(--st-surface-2); }
.command-state { display: flex; align-items: center; gap: 8px; font: 600 13px var(--font-body); color: var(--st-ink); }
.command-state .dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--st-muted); }
.command-state.on .dot { background: var(--moss); box-shadow: 0 0 0 0 rgba(147, 200, 110, .6); animation: command-pulse 1.6s var(--ease-out-quart) infinite; }
.command-state.hold { color: var(--st-danger, var(--blood)); }
.command-state.hold .dot { background: var(--st-danger, var(--blood)); }
@keyframes command-pulse { 0% { box-shadow: 0 0 0 0 rgba(147, 200, 110, .55); } 100% { box-shadow: 0 0 0 9px rgba(147, 200, 110, 0); } }
.command-thread { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 4px 2px 8px; overscroll-behavior: contain; }
.bubble { max-width: 88%; padding: 8px 10px; border: 1px solid var(--st-line-2); border-radius: 8px; font: 13px/1.45 var(--font-body); color: var(--st-ink); overflow-wrap: anywhere; }
.bubble .who { margin-bottom: 3px; font: 10px var(--font-mono); letter-spacing: .04em; color: var(--st-muted); }
.bubble.you { align-self: flex-end; background: var(--st-surface-2); border-bottom-right-radius: 2px; }
.bubble.agent { align-self: flex-start; background: var(--st-surface); border-bottom-left-radius: 2px; }
.bubble.agent .row { margin-top: 6px; flex-wrap: wrap; gap: 4px; }
.bubble.system { align-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-style: dashed; font-size: 12px; color: var(--st-muted); }
.bubble.thinking { color: var(--st-muted); font-style: italic; }
.bubble .dots { display: inline-block; letter-spacing: 2px; animation: command-dots 1.2s steps(3, end) infinite; }
@keyframes command-dots { 0% { opacity: .3; } 50% { opacity: 1; } 100% { opacity: .3; } }
.command-compose { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.command-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; }
.diary-did { margin: 2px 0 6px; padding-left: 18px; }
.diary-parts .small b { color: var(--st-ink); }
.command-live { border: 1px solid var(--st-line-2); border-radius: 4px; background: var(--st-surface); }
.command-live > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; color: var(--st-ink); }
.command-live > summary .faint { margin-left: auto; }
.command-live > div { padding: 0 12px 10px; }
.command-calls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.command-calls li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 30px; padding: 4px 0; border-bottom: 1px solid var(--st-line); font: 12px/1.3 var(--font-body); }
.command-calls li.bad span:nth-child(2) { color: var(--st-danger, var(--blood)); }
.command-approval { display: flex; flex-direction: column; gap: 6px; padding: 10px; margin-bottom: 8px; border: 1px solid var(--gold-2); border-radius: 4px; background: var(--st-surface-2); }
.command-approval .row { flex-wrap: wrap; gap: 6px; }
.command-why { margin: 0; padding: 4px 8px; border-left: 2px solid var(--gold-2); font: italic 12px/1.4 Georgia, serif; color: var(--st-muted); }
.command-eta { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.command-eta .ico { color: var(--st-accent); display: grid; place-items: center; }
.command-eta.blood .ico, .command-eta.blood b { color: var(--st-danger, var(--blood)); }
.command-eta.ember .ico { color: var(--ember); }
.command-eta.violet .ico { color: var(--violet); }
.check.small { font-size: 12px; }
.st-mark-banner { position: absolute; z-index: 12; left: 50%; top: 150px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--st-ink); font: 600 13px var(--font-body); }
.st-mark-banner[hidden] { display: none; }
.war-stage.is-marking > .map canvas { cursor: crosshair; }
.st-agent-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-agent .link-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
/* On a wide screen the strategist card stays out of the map's way — except while the agent is acting, over the map. */
.empire-live:not(.has-drawer) .st-agent.is-live { display: flex; left: 12px; bottom: 182px; width: 300px; }
@media (max-width: 760px) {
  .command-approval .row input.grow { flex: 1 1 100%; }
  .command-calls li { grid-template-columns: 64px minmax(0, 1fr); }
  .command-calls li .badge { grid-column: 2; justify-self: start; }
  .bubble { max-width: 100%; }
  .st-mark-banner { top: auto; bottom: 16px; width: calc(100% - 32px); box-sizing: border-box; }
}

/* ---------- The academy (decisions 289–294): lessons in a world where time waits for the learner ---------- */
/* Decision 294: a bare room. Until graduation each panel waits for the lesson that teaches it, and the coach card
   beside the map gives one instruction and one control at a time. */
.academy-mode :is(.st-nav, .st-clock, .st-who .st-sub, .st-slot-alerts, .st-slot-right, .st-slot-agent, .st-slot-ticker, .st-mini,
  .empire-bottom, .st-mark-banner, .map .legend, .map .hud, .map-accessible, .map .hint, .resource-crystal, .st-prestige) { display: none !important; }
.academy-mode[data-academy="mandate"] .st-economy { display: none; }
.academy-mode:is([data-academy="mandate"], [data-academy="time"]) .map .ctrl { display: none; }
/* The tool a lesson brings in glows twice as it appears. */
.academy-mode[data-academy="time"] .st-economy, .academy-mode[data-academy="fog"] .map .ctrl { animation: academy-reveal 1.4s var(--ease-out-quart) 2; }
@keyframes academy-reveal { 50% { box-shadow: 0 0 0 3px rgba(230, 188, 98, .6); } }
body:has(.academy-mode, .academy-welcome) #statusbar { display: none; }
/* Decision 296: while the academy guides, and on its welcome, the site's menu steps away too: one thing at a time. */
body:has(.academy-mode, .academy-welcome) :is(#nav, .topbar .live) { display: none; }
/* Lesson 1 is only the first order: no map, no bar, the card in the middle of the mist. The map comes with lesson 2. */
.academy-mode[data-academy="mandate"] > .map { visibility: hidden; }
.academy-mode[data-academy="mandate"] :is(.st-top, .atlas-compass) { display: none; }
.empire-live.academy-mode[data-academy="mandate"] .academy-coach { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); max-height: calc(100% - 40px); }
.academy-mode[data-academy="time"] > .map { animation: academy-map-in 900ms var(--ease-out-quart) both; }
@keyframes academy-map-in { from { opacity: 0; } }
/* With the side column and the city bar gone, the map takes the whole room and the top bar only its contents. */
@media (min-width: 761px) {
  .academy-mode > .map { inset: 0; }
  .academy-mode .empire-fog { width: 100%; }
  .academy-mode::after { right: 0; bottom: 0; }
  .empire-live.academy-mode { height: calc(100dvh - 90px); }
}
.academy-mode .st-top { right: auto; height: auto; width: max-content; }
.academy-mode .st-who { display: flex; } /* a tablet hides it for the tabs, which the academy hides instead */
.academy-mode[data-academy="mandate"] .st-top { grid-template-rows: 64px; }
.academy-mode[data-academy="mandate"] .st-top-main { border-bottom: 0; }
.academy-mode .st-top-main { grid-template-columns: auto; }
.academy-mode .st-economy { grid-template-columns: repeat(5, minmax(118px, auto)); }

.academy-coach { position: absolute; z-index: 12; left: 16px; bottom: 16px; width: min(400px, calc(100% - 32px)); max-height: calc(100% - 150px); overflow: auto;
  box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 14px; color: var(--st-ink); font: 14px/1.55 var(--font-body); }
.academy-coach[hidden] { display: none; }
.empire-live:not(.academy-mode) .academy-coach { bottom: 112px; }
/* Graduation opens the whole room: the card that says so sits in the middle, and steps aside for any drawer. */
.empire-live .academy-coach.is-graduation { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); max-height: calc(100% - 40px); }
.empire-live.has-drawer:not(.academy-mode) .academy-coach { display: none; }
.academy-coach-kicker { display: flex; justify-content: space-between; gap: 8px; font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--st-accent); }
.academy-coach h2 { margin: 4px 0 8px; font: 700 22px/1.2 Georgia, serif; color: var(--st-ink-strong); }
.academy-dots { display: flex; gap: 6px; }
.academy-dots span { width: 22px; height: 4px; border-radius: 2px; background: var(--st-line-2); }
.academy-dots span.done { background: var(--moss); }
.academy-dots span.now { background: var(--gold); }
.academy-coach-body { display: flex; flex-direction: column; gap: 10px; }
.academy-coach-body p { margin: 0; }
.academy-say { font-weight: 600; color: var(--st-ink-strong); }
.academy-go { align-self: flex-start; }
.academy-chips { display: flex; flex-direction: column; gap: 6px; }
.academy-chip { padding: 8px 10px; border: 1px solid var(--st-line-2); border-radius: 6px; background: var(--st-surface-2); color: var(--st-ink); font: 13px/1.4 var(--font-body); text-align: left; cursor: pointer; }
.academy-chip:hover, .academy-chip:focus-visible { border-color: var(--gold); }
.academy-coach .command-input { width: 100%; box-sizing: border-box; }
.academy-coach-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--st-muted); }
.academy-coach-status[hidden] { display: none; }
.academy-coach-status .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--moss); animation: command-pulse 1.6s var(--ease-out-quart) infinite; }
.academy-done { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--moss); }
.academy-answer { padding: 10px 12px; border-left: 3px solid var(--st-accent); border-radius: 4px; background: var(--st-surface-2); }
.academy-answer ul { margin: 6px 0 0; padding-left: 18px; }
.academy-note { font-size: 13px; color: var(--st-muted); }
.academy-note b { color: var(--st-ink); }
.academy-enforced { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.academy-enforced li { display: flex; align-items: center; gap: 6px; color: var(--st-ink); }
.academy-coach-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--st-line-2); }
.academy-coach-foot .link-btn { margin-left: 0; align-self: flex-start; }
.academy-coach-foot .row { flex-wrap: wrap; gap: 6px; }
.academy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.academy-list li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.academy-list li .ui-icon { flex: none; color: var(--st-muted); }
.academy-list li.done { color: var(--st-muted); }
.academy-list li.done .ui-icon { color: var(--moss); }
.academy-view .row { flex-wrap: wrap; gap: 6px; }
.academy-welcome { display: grid; place-items: center; min-height: calc(100dvh - 180px); }
.academy-welcome-card { width: min(620px, 100%); box-sizing: border-box; padding: 34px 36px 30px; border: 1px solid var(--line); border-radius: 8px; background: rgba(12, 18, 26, .92); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.academy-welcome-card h1 { margin: 6px 0 10px; font: 700 34px/1.15 Georgia, serif; color: #f0e2c2; }
.academy-welcome-card .lead { margin: 0 0 20px; font-size: 16px; line-height: 1.55; color: var(--text); }
.academy-welcome-points { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.academy-welcome-points li { display: flex; gap: 14px; align-items: flex-start; }
.academy-welcome-points b { color: var(--text); font-size: 15px; }
.academy-welcome-points p { margin: 2px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.academy-welcome-ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--line); color: var(--gold); }
.academy-welcome-card .row { gap: 10px; flex-wrap: wrap; margin-top: 18px; }
:root[data-theme="light"] .academy-welcome-card { background: rgba(248, 242, 223, .97); }
:root[data-theme="light"] .academy-welcome-card h1 { color: #1b3e54; }
/* Decision 298: the goal, from the welcome to graduation — Prestige and its six sources. */
.academy-goal { margin: 0 0 20px; padding: 14px 16px; border: 1px solid rgba(230, 188, 98, .45); border-radius: 8px; background: rgba(230, 188, 98, .08); }
.academy-goal > b { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: 15px; }
.academy-goal p { margin: 6px 0 10px; color: var(--text); font-size: 14px; line-height: 1.5; }
.academy-goal-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.academy-goal-sources span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--text); }
.academy-prestige { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--st-ink); }
.academy-prestige > .ui-icon { color: var(--gold); }
.academy-gain { padding: 1px 7px; border-radius: 999px; background: rgba(111, 143, 79, .2); color: var(--moss); font-weight: 700; animation: academy-gain 900ms var(--ease-out-quart); }
@keyframes academy-gain { from { transform: translateY(4px); opacity: 0; } }
.academy-earns { display: flex; align-items: center; gap: 6px; font: 600 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.academy-earned { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 6px; background: rgba(230, 188, 98, .1); font-size: 13px; }
.academy-earned div { display: flex; align-items: center; gap: 6px; }
.academy-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.academy-checklist li { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; align-items: center; font-size: 13.5px; }
.academy-checklist li small { grid-column: 2; color: var(--st-muted); font-size: 12px; }
.academy-checklist li.ok .ui-icon { color: var(--moss); }
.academy-checklist li.short .ui-icon { color: var(--gold); }
.academy-market { width: 100%; border-collapse: collapse; font-size: 13px; }
.academy-market th { font: 600 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--st-muted); text-align: right; padding: 0 0 4px; }
.academy-market td { padding: 4px 0; border-top: 1px solid var(--st-line-2); text-align: right; }
.academy-market td:first-child { text-align: left; }
.academy-market td small { color: var(--st-muted); }
.academy-market td:first-child { white-space: nowrap; }
.academy-market :is(th, td) + :is(th, td) { padding-left: 10px; }
.academy-market td:first-child .ui-icon { display: inline-block; vertical-align: -2px; }
.academy-note:has(> .ui-icon) { display: flex; gap: 6px; align-items: flex-start; }
.academy-note > .ui-icon { flex: none; margin-top: 2px; }
.academy-coach .stack .btn { white-space: normal; text-align: left; line-height: 1.35; }
.academy-chip.strong { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.academy-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--st-line-2); color: var(--st-ink); font-style: italic; }
.academy-quote small { display: block; margin-top: 4px; font-style: normal; color: var(--st-muted); }
.academy-note.warn { display: flex; gap: 6px; align-items: flex-start; color: var(--gold); }
.academy-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 10px 12px; border-radius: 6px; background: var(--st-surface-2); font-size: 13px; }
.academy-sources-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.academy-sources-head .ui-icon { color: var(--gold); }
.academy-sources > div:not(.academy-sources-head) { display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; align-items: center; color: var(--st-muted); }
.academy-sources > div.on { color: var(--st-ink); }
.academy-sources > div.on .ui-icon { color: var(--gold); }
/* Phones stack the room: the coach sits in the flow, above the map (none yet in lesson 1). */
@media (max-width: 760px) {
  .academy-mode[data-academy="mandate"] > .map { display: none; }
  .academy-welcome-card { padding: 24px 18px; }
  .academy-welcome-card h1 { font-size: 27px; }
  .academy-coach, .empire-live:not(.academy-mode) .academy-coach, .empire-live .academy-coach.is-graduation,
  .empire-live.academy-mode[data-academy="mandate"] .academy-coach { position: static; width: auto; max-height: none; transform: none; order: 2; }
}

/* Blog email capture (decision 300) */
.blog-next { margin-top: 18px; font-size: 14px; }
.blog-lead form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.blog-lead input { flex: 1 1 200px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 4px; background: rgba(6, 8, 12, 0.6); color: inherit; font: inherit; }
.blog-lead input:disabled { opacity: 0.6; }
.blog-lead [data-blog-lead-status] { flex: 1 1 100%; margin: 0; min-height: 1em; }
.blog-lead .blog-lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Web Stories: poster strip on /blog + link on the post */
.ws-strip-list { display: flex; gap: 14px; overflow-x: auto; list-style: none; padding: 0 0 8px; margin: 0; scroll-snap-type: x mandatory; }
.ws-strip-list li { flex: 0 0 150px; scroll-snap-align: start; }
.ws-card { display: block; text-decoration: none; color: inherit; }
.ws-card img { display: block; width: 150px; height: 200px; object-fit: cover; border-radius: 12px; }
.ws-card span { display: block; font-size: 13px; line-height: 1.35; margin-top: 8px; font-weight: 600; }
.ws-post-link { margin: 0 0 24px; font-size: 15px; }
.ws-post-link a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }