/* ── AGENT EMPIRE: an agentic RTS ── */

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --font-head: "Press Start 2P", monospace;
  --font-body: "VT323", monospace;
  --grass: #2f8f37;
  --grass-dark: #145b24;
  --grass-light: #74c75d;
  --grass-deep: #0d3518;
  --sand: #d9c07a;
  --ink: #0f0f1b;
  --paper: #fff8e8;
  --good: #00e436;
  --bad: #ff3352;
  --gold: #ffd75e;
  --blue: #18c3ff;
}

html, body { height: 100%; }
body {
  background: var(--ink);
  font-family: "Press Start 2P", monospace;
  color: var(--paper);
  min-height: 100vh;
  padding: 8px;
}

.frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  height: calc(100vh - 16px);
}

/* ── mute ── */
.hud-btn {
  font-family: inherit;
  font-size: 13px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 2px;
  filter: grayscale(.2);
}
.hud-btn.muted { filter: grayscale(1); opacity: .55; }

/* ── stage / field ── */
.stage {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  border: 4px solid #000;
  box-shadow: 0 0 0 4px #2a2a3a, 0 18px 60px rgba(0,0,0,.6);
  image-rendering: pixelated;
}
.field {
  position: absolute; inset: 0;
  image-rendering: auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='%23125c1e' opacity='.55'%3E%3Cpath d='M7 12l1-4 1 4-1 2z'/%3E%3Cpath d='M10 13l1-3 1 3-1 1z'/%3E%3Cpath d='M33 6l1-4 1 4-1 2z'/%3E%3Cpath d='M36 7l1-3 1 3-1 1z'/%3E%3Cpath d='M20 38l1-4 1 4-1 2z'/%3E%3Cpath d='M23 39l1-3 1 3-1 1z'/%3E%3Cpath d='M17 39l1-3 1 3-1 1z'/%3E%3Cpath d='M45 27l1-4 1 4-1 2z'/%3E%3Cpath d='M48 28l1-3 1 3-1 1z'/%3E%3Cpath d='M12 48l1-3 1 3-1 1z'/%3E%3C/g%3E%3Cg fill='%2360c46b' opacity='.5'%3E%3Cpath d='M8 13l1-3 1 3-1 1z'/%3E%3Cpath d='M34 7l1-3 1 3-1 1z'/%3E%3Cpath d='M21 39l1-3 1 3-1 1z'/%3E%3Cpath d='M46 28l1-3 1 3-1 1z'/%3E%3Cpath d='M28 22l1-3 1 3-1 1z'/%3E%3Cpath d='M40 46l1-3 1 3-1 1z'/%3E%3C/g%3E%3Ccircle cx='27' cy='19' r='1.4' fill='%23ffe9a8' opacity='.9'/%3E%3Ccircle cx='49' cy='13' r='1.2' fill='%23ffffff' opacity='.75'/%3E%3Ccircle cx='11' cy='31' r='1.2' fill='%23ffc2d4' opacity='.8'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 220px 140px at 72% 28%, rgba(10,65,22,.46) 0 42%, transparent 57%),
    radial-gradient(ellipse 180px 110px at 27% 76%, rgba(8,55,20,.42) 0 38%, transparent 56%),
    radial-gradient(ellipse 120px 70px at 48% 48%, rgba(120,199,93,.26) 0 38%, transparent 61%),
    linear-gradient(155deg, #3ca645 0%, var(--grass) 42%, #1f752e 72%, #145622 100%);
  background-size: 56px 56px, auto, auto, auto, auto;
  transition: filter 1.2s ease;
}
.field::before { /* dense grass blades */
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(78deg, rgba(219,255,184,.20) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(103deg, rgba(11,58,23,.32) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(91deg, rgba(134,216,92,.16) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(0,0,0,.08) 10px 11px);
  background-size: 38px 46px, 44px 52px, 70px 62px, 100% 22px;
  opacity: .82;
  mix-blend-mode: soft-light;
  transform-origin: 50% 100%;
  animation: grasswave 7s ease-in-out infinite alternate;
  pointer-events: none;
}
.field::before { /* the supply road from the castle */
  content: "";
  position: absolute; left: 74px; right: 0; top: 50%; height: 30px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 12px, transparent 12px 26px),
    linear-gradient(180deg, transparent 0, rgba(156,107,51,.55) 20%, rgba(138,92,42,.55) 80%, transparent 100%);
  pointer-events: none;
}
.field::after { /* drifting cloud shadows */
  content: "";
  position: absolute; inset: -40%;
  background:
    radial-gradient(ellipse 220px 90px at 20% 30%, rgba(0,0,0,.10) 0 60%, transparent 62%),
    radial-gradient(ellipse 300px 110px at 70% 65%, rgba(0,0,0,.08) 0 60%, transparent 62%);
  animation: clouds 46s linear infinite alternate;
  pointer-events: none;
}
@keyframes grasswave {
  from { transform: skewX(-.35deg) translateX(-2px); }
  to { transform: skewX(.35deg) translateX(2px); }
}
@keyframes clouds {
  from { transform: translate(-6%, -3%); }
  to { transform: translate(8%, 5%); }
}
/* the day darkens as the levels escalate */
.stage.l2 .field { filter: sepia(.45) hue-rotate(-16deg) saturate(1.15) brightness(.95); }
.stage.l3 .field { filter: saturate(.55) hue-rotate(-52deg) brightness(.6) contrast(1.1); }

.stage.hurtflash::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 10% 50%, rgba(255,51,82,.32), transparent 55%);
  z-index: 15;
  pointer-events: none;
  animation: hurtfade .45s ease forwards;
}
@keyframes hurtfade { to { opacity: 0; } }

/* ── base ── */
.base {
  position: absolute;
  left: 26px; top: 50%;
  transform: translateY(-50%);
  width: 110px;
  text-align: center;
  z-index: 5;
}
.base-tower {
  width: 88px;
  margin: 0 auto;
  position: relative;
}
.base-tower svg {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.base-tower::after { /* ground shadow */
  content: "";
  position: absolute; bottom: -7px; left: 6%;
  width: 88%; height: 14px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0 45%, transparent 72%);
  z-index: -1;
}
.base-flag {
  transform-origin: 32px 8px;
  animation: flagwave 1.1s steps(2) infinite;
}
@keyframes flagwave { 50% { transform: skewY(5deg) scaleX(.9); } }
.base-label {
  margin-top: 8px;
  font-size: 8px;
  color: #eaf6ff;
  text-shadow: 2px 2px 0 #000;
}
.base.hurt .base-tower { animation: basehurt .4s ease; }
@keyframes basehurt {
  25% { transform: translateX(-6px); filter: sepia(1) hue-rotate(-40deg); }
  75% { transform: translateX(5px); }
}

/* ── incidents ── */
.incident {
  position: absolute;
  width: 128px;
  transform: translate(-50%, -50%);
  text-align: center;
  cursor: pointer;
  z-index: 4;
  transition: left .55s ease, top .55s ease, filter .15s ease;
}
.incident:hover { filter: brightness(1.12); }
.inc-body {
  width: 58px; height: 50px;
  margin: 0 auto;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.inc-body svg {
  width: 54px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.35));
  animation: monbob 1.7s ease-in-out infinite;
}
@keyframes monbob { 50% { transform: translateY(-3px); } }
.inc-emoji {
  position: absolute; right: -6px; bottom: -3px;
  font-size: 12px;
  filter: drop-shadow(1px 1px 0 #000);
}
.incident.selected .inc-body {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.inc-label {
  margin-top: 6px;
  font-size: 7.5px;
  line-height: 1.6;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
}
.inc-patience {
  height: 7px;
  margin: 5px 10px 0;
  background: #00000088;
  border: 2px solid #000;
}
.inc-patience i {
  display: block; height: 100%;
  background: var(--gold);
  transition: width .3s linear;
}
.incident.chained .inc-body svg { filter: drop-shadow(0 0 7px rgba(255,215,94,.85)); }
.incident.angry .inc-body { animation: angry .5s steps(2) infinite; }
.incident.angry .inc-body svg { filter: drop-shadow(0 0 10px #ff3352) saturate(1.6); }
@keyframes angry { 50% { transform: translateY(-3px) rotate(-2deg); } }
.incident.resolving .inc-body svg { filter: grayscale(.5) drop-shadow(0 0 9px #00e436); animation: none; }
.incident.out { animation: incout .5s ease forwards; }
@keyframes incout {
  to { transform: translate(-50%, -50%) scale(.2) rotate(12deg); opacity: 0; }
}

/* ── region boss ── */
.incident.boss { width: 170px; z-index: 5; }
.incident.boss .inc-body { width: 100px; height: 84px; }
.incident.boss .inc-body svg { width: 96px; animation: monbob 1.2s ease-in-out infinite; }
.incident.boss .inc-emoji { font-size: 16px; }
.incident.boss .inc-label { font-size: 8px; }
.boss-pips {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 6px;
}
.boss-pips i {
  width: 12px; height: 12px;
  border: 3px solid #fff;
  background: #00000088;
}
.boss-pips i.lit { background: #00e436; box-shadow: 0 0 8px #00e436; }
.plan-chip {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  color: #fff;
  border: 2px solid #fff;
  background: #00000055;
  padding: 1px 7px;
  margin: 2px 4px 2px 0;
}
.plan-chip.empty { opacity: .45; border-style: dashed; }
.plan-btn {
  font-family: var(--font-head);
  font-size: 8px;
  color: #00230b;
  background: var(--good);
  border: 3px solid #000;
  box-shadow: 2px 2px 0 #000;
  padding: 5px 8px;
  margin-left: 6px;
  cursor: pointer;
}
.plan-btn.clear { background: #55556a; color: #fff; padding: 5px 6px; }
.plan-btn.hint-btn { background: #1c3b52; color: #7ff3ff; }
.u-btn.solution-glow {
  outline: 3px solid #7ff3ff;
  outline-offset: 2px;
  animation: solglow .6s steps(2) infinite;
}
@keyframes solglow { 50% { outline-color: transparent; } }
.plan-btn:hover { transform: translate(-1px, -1px); }

/* ── elite incidents ── */
.incident.elite .inc-body svg { width: 62px; filter: drop-shadow(0 0 8px rgba(127,243,255,.55)) drop-shadow(0 4px 3px rgba(0,0,0,.35)); }
.inc-crown {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 13px;
  filter: drop-shadow(1px 1px 0 #000);
}
.flow-btn .u-name { color: #7ff3ff; }
.flows-empty {
  font-family: var(--font-body);
  font-size: 13px;
  color: #6c6c86;
  padding: 2px 0;
}
#newgame-btn { font-size: 15px; color: #cfd6e4; }

.mode-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn.btn-boss {
  background: #ff3352;
  color: #fff;
}
.btn.btn-boss:hover { background: #ff4d68; }
.conquest-flag .bldg-spr svg { width: 26px; filter: drop-shadow(0 0 8px rgba(255,215,94,.6)); }

/* ── units (robot agents) ── */
.unit {
  position: absolute;
  width: 30px; height: 36px;
  transform: translate(-50%, -100%);
  z-index: 6;
}
.unit .u-body {
  position: absolute; inset: 8px 3px 0;
  background: var(--blue);
  border: 3px solid #000;
  border-radius: 4px 4px 2px 2px;
}
.unit .u-body::before { /* chest lamp */
  content: "";
  position: absolute; top: 3px; left: 50%; margin-left: -2px;
  width: 4px; height: 4px;
  background: rgba(255,255,255,.9);
  animation: lamp 1.2s steps(2) infinite;
}
@keyframes lamp { 50% { opacity: .3; } }
.unit .u-body::after { /* treads */
  content: "";
  position: absolute; left: 1px; right: 1px; bottom: 0; height: 4px;
  background: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 6px);
}
.unit .u-head {
  position: absolute; top: 0; left: 7px;
  width: 16px; height: 12px;
  background: #cfd6e4;
  border: 3px solid #000;
  z-index: 1;
}
.unit .u-head::before { /* antenna */
  content: "";
  position: absolute; top: -8px; left: 50%; margin-left: -1px;
  width: 2px; height: 6px;
  background: #000;
  box-shadow: 0 -4px 0 1px #ff3352;
}
.unit .u-head::after { /* visor */
  content: "";
  position: absolute; left: 1px; right: 1px; top: 2px; height: 3px;
  background: #7ff3ff;
  box-shadow: 0 0 6px #7ff3ff;
  animation: visor 1.6s steps(2) infinite;
}
@keyframes visor { 50% { opacity: .5; } }
.unit.walking .u-body { animation: walkbob .3s steps(2) infinite; }
@keyframes walkbob { 50% { transform: translateY(-3px); } }
.unit .u-tag {
  position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
  font-size: 6.5px; white-space: nowrap;
  color: #fff; text-shadow: 1px 1px 0 #000;
}
.unit .u-ring {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 6px;
  background: #00000066;
  border: 2px solid #000;
  display: none;
}
.unit .u-ring i { display: block; height: 100%; background: var(--good); width: 0%; transition: width .2s linear; }
.unit.working .u-ring { display: block; }
.unit.working .u-body { animation: work .35s steps(2) infinite; }
@keyframes work { 50% { transform: rotate(4deg); } }
.unit.confused { filter: grayscale(.7); }
.unit.confused .u-body { animation: confusedwob .3s steps(2) infinite; }
@keyframes confusedwob { 25% { transform: rotate(-10deg);} 75% { transform: rotate(10deg);} }
.unit.fade { transition: opacity .8s ease; opacity: 0; }

/* per-pattern tints */
.unit.u-route .u-body { background: #ffb000; }
.unit.u-investigate .u-body { background: #18c3ff; }
.unit.u-decompose .u-body { background: #b16bff; }
.unit.u-critique .u-body { background: #ff7ab0; }
.unit.u-gate .u-body { background: #f0f0f0; }
.unit.u-saga .u-body { background: #00d47e; }
.unit.u-rag .u-body { background: #ff9d5c; }
.unit.u-agenticrag .u-body { background: #6da8ff; }
.unit.u-vectordb .u-body { background: #c9f04d; }
.unit.u-loop .u-body { background: #2ee6d6; }
.unit.u-subagent .u-body { background: #ff5cd6; }

/* ── simulation ── */
.btn.btn-sim { background: #18c3ff; color: #002230; }
.btn.btn-sim:hover { background: #4fd2ff; }
.sim-targets { max-width: 640px; }
.sim-flow {
  position: absolute;
  top: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(8, 8, 20, .85);
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  padding: 7px 12px;
  z-index: 12;
  max-width: 86%;
  flex-wrap: wrap;
  justify-content: center;
}
.sf-node {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c, #fff);
  border: 2px solid var(--c, #fff);
  padding: 1px 8px;
  opacity: .45;
  white-space: nowrap;
}
.sf-node.active { opacity: 1; animation: sfpulse .7s steps(2) infinite; background: #ffffff12; }
.sf-node.done { opacity: 1; border-color: #00e436; color: #7ce68f; }
.sf-node.failed { opacity: 1; border-color: #ff3352; color: #ff5c74; background: #ff335218; }
@keyframes sfpulse { 50% { box-shadow: 0 0 10px var(--c); } }
.sf-arrow { font-size: 9px; color: #55556a; }
.sf-arrow.flow { color: #7ff3ff; animation: sfpulse .7s steps(2) infinite; }

/* ── pipeline builder (simulation) ── */
#pipes { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pipe {
  position: absolute;
  height: 14px;
  background: #232032;
  border: 3px solid #000;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.07), inset 0 -3px 0 rgba(0,0,0,.4);
  overflow: hidden;
}
.pipe::before { /* marching pixel chevrons */
  content: "";
  position: absolute; inset: 2px 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 6px, #ffd75e 6px 10px, #a8842c 10px 12px, transparent 12px 22px);
  animation: convey .45s steps(4) infinite;
}
@keyframes convey { to { transform: translateX(22px); } }
.slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 96px;
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.slot-num {
  position: absolute;
  top: -26px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-size: 8px;
  color: var(--sc, #fff);
  text-shadow: 1px 1px 0 #000;
}
.slot-pad {
  width: 66px; height: 14px;
  margin: 30px auto 0;
  border: 3px dashed var(--sc, #666a80);
  opacity: .8;
  animation: slotblink 1.4s steps(2) infinite;
}
@keyframes slotblink { 50% { opacity: .35; } }
.slot.filled { opacity: 0; }

.station {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 96px;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 5;
}
.station .st-num {
  position: absolute;
  top: -4px; left: 4px;
  font-family: var(--font-head);
  font-size: 8px;
  color: #ffd75e;
  text-shadow: 1px 1px 0 #000;
}
.station .st-name {
  display: block;
  font-family: var(--font-head);
  font-size: 6.5px;
  text-shadow: 1px 1px 0 #000;
  margin-bottom: 5px;
  white-space: nowrap;
}
.station .st-agent {
  position: relative;
  width: 30px; height: 36px;
  margin: 0 auto;
  transform: none;
  scale: 1.15;
}
.station .st-pad {
  width: 66px; height: 14px;
  margin: 2px auto 0;
  background: linear-gradient(#5a6588, #3a4258);
  border: 3px solid #000;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.35), 0 4px 0 #000;
  position: relative;
}
.station .st-pad::before, .station .st-pad::after {
  content: "";
  position: absolute; top: -8px;
  width: 6px; height: 8px;
  background: #46506b;
  border: 2px solid #000;
}
.station .st-pad::before { left: -2px; }
.station .st-pad::after { right: -2px; }
.station:hover .st-pad { filter: brightness(1.3); }
.station.st-active .st-pad { filter: brightness(1.35); }
.station.st-active::after { /* crisp processing brackets */
  content: "";
  position: absolute;
  left: 50%; top: 44%;
  width: 76px; height: 50px;
  transform: translate(-50%, -50%);
  border: 3px solid var(--sc, #7ff3ff);
  clip-path: polygon(0 0, 14px 0, 14px 3px, 3px 3px, 3px 14px, 0 14px,
    0 100%, 14px 100%, 14px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 14px), 0 calc(100% - 14px),
    100% 0, calc(100% - 14px) 0, calc(100% - 14px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 14px, 100% 14px,
    100% 100%, calc(100% - 14px) 100%, calc(100% - 14px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 14px), 100% calc(100% - 14px));
  animation: bracketblink .5s steps(2) infinite;
  pointer-events: none;
}
@keyframes bracketblink { 50% { opacity: .35; } }
.station.station-fail .st-pad { background: #8a1a34; }
.station.station-fail .st-agent { filter: grayscale(.8); }
.station.station-idle { opacity: .5; }
.packet {
  position: absolute;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  background: #fff8e8;
  border: 3px solid #000;
  z-index: 8;
  transition: left .68s ease-in-out, top .68s ease-in-out;
  animation: packetstep .4s steps(2) infinite;
}
.packet::before { /* pixel document lines */
  content: "";
  position: absolute; left: 3px; right: 3px; top: 3px; height: 2px;
  background: #55556a;
  box-shadow: 0 4px 0 #55556a, 0 8px 0 #55556a;
}
@keyframes packetstep { 50% { transform: translate(-50%, -60%); } }
.trail {
  position: absolute;
  width: 6px; height: 6px;
  transform: translate(-50%, -50%);
  background: #7ff3ff;
  border: 1px solid #000;
  z-index: 7;
  pointer-events: none;
  animation: trailfade .5s steps(4) forwards;
}
@keyframes trailfade { to { opacity: 0; } }
.flash-col {
  position: absolute;
  width: 8px;
  top: 0; bottom: 0;
  transform: translateX(-50%);
  background: var(--fc, #00e436);
  opacity: .55;
  z-index: 6;
  pointer-events: none;
  animation: colfade .5s steps(5) forwards;
}
@keyframes colfade { to { opacity: 0; } }

/* ── rank + fire ── */
.rank-line {
  font-family: var(--font-body);
  font-size: 16px;
  color: #ffd75e;
  text-shadow: 1px 1px 0 #000;
}
.rank-line .rank-bar {
  display: inline-block;
  width: 110px; height: 10px;
  background: #00000088;
  border: 2px solid #000;
  vertical-align: middle;
  margin: 0 6px;
}
.rank-line .rank-bar i { display: block; height: 100%; background: #ffd75e; }
.rank-tag { font-family: var(--font-body); font-size: 16px; color: #ffd75e; }
.badge-row { display: flex; gap: 8px; justify-content: center; }
.badge {
  font-size: 15px;
  filter: grayscale(1) brightness(.4);
  cursor: default;
}
.badge.earned { filter: none; text-shadow: 0 0 6px rgba(255,215,94,.6); }
.btn.btn-daily { background: #ffd75e; color: #221a00; }
.btn.btn-daily:hover { background: #ffe58a; }
.danger-band {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 14;
  box-shadow: inset 0 0 46px 14px rgba(255, 51, 82, .5);
  animation: dangerbeat .9s steps(2) infinite;
}
@keyframes dangerbeat { 50% { box-shadow: inset 0 0 70px 22px rgba(255, 51, 82, .62); } }
.fire-band {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 14;
  box-shadow: inset 0 0 60px 18px rgba(255, 110, 30, .45);
  animation: firebreath .5s steps(2) infinite;
}
@keyframes firebreath { 50% { box-shadow: inset 0 0 80px 26px rgba(255, 60, 20, .55); } }

/* ── pause ── */
.pause-banner {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  z-index: 19;
  text-align: center;
  font-size: 22px;
  color: var(--gold);
  text-shadow: 4px 4px 0 #000;
  line-height: 2;
}
.pause-banner span { font-family: var(--font-body); font-size: 16px; color: #d7d7e8; }
.stage.user-paused .field { filter: grayscale(.65) brightness(.55); }

/* ── juice ── */
.px {
  position: absolute;
  width: 5px; height: 5px;
  z-index: 9;
  pointer-events: none;
  animation: pxfly .72s ease-out forwards;
}
@keyframes pxfly {
  to { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.coin {
  position: absolute;
  width: 9px; height: 9px;
  background: #ffd75e;
  border: 2px solid #8a6a00;
  border-radius: 50%;
  z-index: 12;
  pointer-events: none;
  transition: left .68s cubic-bezier(.45,-.15,.6,1), top .68s cubic-bezier(.45,-.15,.6,1), opacity .68s ease;
}

/* ── ambient life ── */
.bird {
  position: absolute;
  left: -30px;
  z-index: 3;
  pointer-events: none;
  animation: birdfly 10.5s linear forwards;
}
.bird svg { width: 20px; animation: flap .5s steps(2) infinite; }
@keyframes birdfly { to { left: 104%; } }
@keyframes flap { 50% { transform: scaleY(.55); } }

/* ── news ticker ── */
.ticker {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  background: rgba(8, 8, 20, .78);
  border-bottom: 2px solid #000;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
  color: #cfd6e4;
  padding: 0 12px;
  overflow: hidden;
  white-space: nowrap;
  z-index: 10;
}
.ticker::before { content: "📡 "; }
#ticker-text.roll { animation: tickroll .45s ease; display: inline-block; }
@keyframes tickroll { from { transform: translateY(120%); } }

/* ── start screen juice ── */
.btn-pulse { animation: btnpulse 1.4s ease-in-out infinite; }
@keyframes btnpulse { 50% { transform: scale(1.06); } }
.parade {
  display: flex;
  gap: 38px;
  justify-content: center;
  margin-top: 4px;
  opacity: .95;
}
.parade-mon svg {
  width: 38px;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.4));
  animation: monbob 1.4s ease-in-out infinite;
}
.parade-mon:nth-child(2) svg { animation-delay: .2s; }
.parade-mon:nth-child(3) svg { animation-delay: .4s; }
.parade-mon:nth-child(4) svg { animation-delay: .6s; }
.parade-mon:nth-child(5) svg { animation-delay: .8s; }

/* ── rts resource plate ── */
.res-bar {
  position: absolute;
  top: 30px; left: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(8, 8, 20, .82);
  border: 3px solid #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  padding: 6px 10px;
  z-index: 11;
}
.res-tokens, .res-score, .res-hp-num {
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}
.res-score { font-size: 18px; color: #fff; }
.res-hp-num { font-size: 18px; color: #ff5c74; }
.res-hp {
  width: 110px; height: 14px;
  background: #00000088;
  border: 2px solid #000;
  overflow: hidden;
}
.res-hp i { display: block; height: 100%; background: #00e436; transition: width .25s ease, background .25s ease; }

/* ── minimap ── */
.minimap {
  position: absolute;
  right: 8px; bottom: 8px;
  width: 128px; height: 68px;
  background: rgba(8, 20, 10, .85);
  border: 3px solid #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  z-index: 11;
  overflow: hidden;
}
.minimap i {
  position: absolute;
  width: 6px; height: 6px;
  transform: translate(-50%, -50%);
}
.minimap .mm-base { width: 10px; height: 10px; background: var(--gold); box-shadow: 0 0 0 1px #000; }
.minimap .mm-bldg { background: #6da8ff; }
.minimap .mm-inc { background: #ff3352; }
.minimap .mm-inc.angry { animation: mmblink .5s steps(2) infinite; }
@keyframes mmblink { 50% { opacity: .2; } }
.minimap .mm-unit { width: 4px; height: 4px; background: #7ce68f; }

/* ── pipeline objectives ── */
.objectives {
  position: absolute;
  top: 30px; right: 8px;
  background: rgba(8, 8, 20, .82);
  border: 3px solid #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  padding: 7px 10px;
  z-index: 11;
  min-width: 128px;
}
.obj-title {
  font-size: 7px;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.obj-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
}
.obj-item .obj-box {
  width: 10px; height: 10px;
  flex-shrink: 0;
  border: 2px solid #666a80;
  color: #00e436;
  font-size: 9px;
  line-height: 7px;
  text-align: center;
}
.obj-item.done .obj-box { border-color: #00e436; }

/* ── map decoration ── */
#deco { position: absolute; inset: 0; pointer-events: none; }
.deco {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 2;
}
.deco svg { display: block; image-rendering: pixelated; filter: drop-shadow(0 4px 2px rgba(0,0,0,.25)); }
.deco-tree svg { width: 26px; }
.deco-rock svg { width: 20px; }
.deco-cactus svg { width: 20px; }
.deco-mesa svg { width: 34px; }
.deco-deadtree svg { width: 22px; }
.deco-lava { transform: translate(-50%, -50%); }
.deco-lava svg { width: 42px; filter: drop-shadow(0 0 8px rgba(224,74,46,.6)); }
.deco-pond { transform: translate(-50%, -50%); }
.deco-pond svg { width: 52px; filter: none; opacity: .92; }

/* ── empire buildings ── */
.bldg {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 96px;
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.bldg-spr svg {
  display: block;
  width: 52px;
  height: auto;
  margin: 0 auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 3px rgba(0,0,0,.3));
}
.bldg .mill {
  animation: millspin 7s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes millspin { to { transform: rotate(360deg); } }
.bldg .db-light { animation: lamp 1.2s steps(2) infinite; }
.bldg-label {
  margin-top: 5px;
  font-size: 6.5px;
  color: #cfe3ff;
  text-shadow: 1px 1px 0 #000;
}
.bldg.bldg-in { animation: bldgin .5s ease; }
@keyframes bldgin {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  70% { transform: translate(-50%, -50%) scale(1.15); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* escalation orbs */
.orb {
  position: absolute;
  width: 16px; height: 16px;
  background: radial-gradient(circle at 35% 35%, #ff9d9d, var(--bad) 70%);
  border: 2px solid #000;
  border-radius: 50%;
  z-index: 7;
  box-shadow: 0 0 14px rgba(255,51,82,.7);
}

/* incident detail / verdict popup */
.inc-pop {
  position: absolute;
  width: 236px;
  transform: translateX(-50%);
  background: rgba(10, 10, 26, .95);
  border: 3px solid var(--gold);
  box-shadow: 4px 4px 0 #000;
  padding: 9px 10px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
  color: #d7d7e8;
  z-index: 12;
  pointer-events: none;
}
.inc-pop b { font-family: var(--font-head); font-size: 8px; line-height: 1.6; color: var(--gold); font-weight: normal; display: block; margin-bottom: 5px; }
.inc-pop.bad { border-color: var(--bad); }
.inc-pop.bad b { color: var(--bad); }

/* pops */
.pop {
  position: absolute;
  font-size: 10px;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  animation: poprise 1s ease forwards;
  z-index: 9;
  white-space: nowrap;
}
@keyframes poprise {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-46px); }
}

.hint {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  max-width: 88%;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.25;
  text-align: center;
  color: #eaffea;
  text-shadow: 2px 2px 0 #000;
  background: rgba(8, 8, 20, .72);
  border: 2px solid #000;
  padding: 6px 10px;
  z-index: 8;
}

.stage.shake { animation: stageshake .35s ease; }
@keyframes stageshake {
  20% { transform: translate(-7px, 3px); }
  45% { transform: translate(6px, -4px); }
  70% { transform: translate(-4px, 2px); }
}

/* ── dispatch panel ── */
.panel {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  overflow-y: auto;
  border: 4px solid #000;
  background: #171728;
  box-shadow: 0 0 0 4px #2a2a3a;
  padding: 10px 12px;
}
.panel-target {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--gold);
  min-height: 26px;
  line-height: 1.35;
}
.panel-divider {
  margin-top: 10px;
  border-top: 2px solid #2a2a3a;
  padding-top: 7px;
  font-size: 7px;
  color: #8f8fa8;
  letter-spacing: 1px;
}
.panel-units {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.u-btn {
  flex: 1 1 46%;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.25;
  color: var(--paper);
  background: #20203a;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  padding: 8px;
  cursor: pointer;
  text-align: left;
  transition: transform .08s ease;
}
.u-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
.u-btn:disabled { opacity: .45; cursor: default; }
.u-btn.locked { opacity: .35; }
.u-btn.locked .u-name { color: #8f8fa8; }
.u-btn .u-cost { color: var(--gold); }
.u-btn .u-name { font-family: var(--font-head); font-size: 8px; line-height: 1.6; color: #fff; display: block; margin-bottom: 4px; }
.u-btn.u-route .u-name { color: #ffb000; }
.u-btn.u-investigate .u-name { color: #18c3ff; }
.u-btn.u-decompose .u-name { color: #b16bff; }
.u-btn.u-critique .u-name { color: #ff7ab0; }
.u-btn.u-gate .u-name { color: #f0f0f0; }
.u-btn.u-saga .u-name { color: #00d47e; }
.u-btn.u-rag .u-name { color: #ff9d5c; }
.u-btn.u-agenticrag .u-name { color: #6da8ff; }
.u-btn.u-vectordb .u-name { color: #c9f04d; }
.u-btn.u-loop .u-name { color: #2ee6d6; }
.u-btn.u-subagent .u-name { color: #ff5cd6; }
.u-btn.b-btn .u-name { color: #ffd75e; }

/* ── campaign map ── */
.cmap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 6px;
}
.cmap-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 118px;
}
.cmap-mark { font-size: 12px; height: 16px; }
.cmap-fort {
  width: 30px; height: 24px;
  background:
    linear-gradient(90deg, #aab2bf 0 6px, transparent 6px 9px, #aab2bf 9px 21px, transparent 21px 24px, #aab2bf 24px 30px) top/30px 7px no-repeat,
    linear-gradient(#8a92a0, #667081) bottom/30px 17px no-repeat;
  box-shadow: 0 0 0 3px #000;
}
.cmap-node.todo { opacity: .38; filter: grayscale(.8); }
.cmap-node.done .cmap-fort { box-shadow: 0 0 0 3px #000, 0 0 12px rgba(0,228,54,.5); }
.cmap-node.now .cmap-fort { animation: nowpulse 1.1s steps(2) infinite; }
@keyframes nowpulse { 50% { box-shadow: 0 0 0 3px #000, 0 0 16px rgba(255,215,94,.85); } }
.cmap-name {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
  color: #d7d7e8;
}
.cmap-node.done .cmap-name { color: #7ce68f; }
.cmap-road {
  width: 34px; height: 4px;
  margin-top: 14px;
  background: repeating-linear-gradient(90deg, #6c6c86 0 6px, transparent 6px 11px);
}
.cmap-road.done { background: repeating-linear-gradient(90deg, #00e436 0 6px, transparent 6px 11px); }

/* guardrail wall */
.wall-seg { width: auto; }
.wall-seg svg { width: 22px; }
.wall-seg.wall-break { animation: wallbreak .5s ease forwards; }
@keyframes wallbreak {
  to { transform: translate(-50%, -50%) scale(.3) rotate(18deg); opacity: 0; }
}

/* ── overlays ── */
.overlay {
  position: absolute; inset: 0;
  z-index: 20;
  background: rgba(8, 8, 20, .9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  gap: 14px;
  text-align: center;
  padding: 20px;
}
.overlay > :first-child { margin-top: auto; }
.overlay > :last-child { margin-bottom: auto; }
.title {
  font-size: 32px;
  line-height: 1.35;
  color: var(--gold);
  text-shadow: 4px 4px 0 #000;
}
.title-sm { font-size: 20px; }
.subtitle { font-size: 11px; color: #9ecbff; }
.copy { font-family: var(--font-body); font-size: 19px; line-height: 1.4; color: #d7d7e8; max-width: 560px; }
.btn {
  font-family: inherit;
  font-size: 12px;
  background: var(--good);
  color: #00230b;
  border: 4px solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 13px 20px;
  cursor: pointer;
  transition: transform .1s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.tiny { font-family: var(--font-body); font-size: 15px; color: #8f8fa8; line-height: 1.5; }
.tiny a, .foot a { color: #9ecbff; }

/* level select */
.lvl-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.lvl-row-label { font-family: var(--font-body); font-size: 15px; color: #8f8fa8; }
.btn-sm {
  font-family: inherit;
  font-size: 8px;
  color: var(--paper);
  background: #20203a;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  padding: 8px 10px;
  cursor: pointer;
  transition: transform .08s ease;
}
.btn-sm:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }

.foot {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: #6c6c86;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .frame {
    display: block;
    height: auto;
  }
  .stage { height: 480px; min-height: 0; }
  .panel { margin-top: 10px; overflow: visible; }
  .foot { margin-top: 12px; }
}

@media (max-width: 720px) {
  .title { font-size: 22px; }
  .u-btn { flex-basis: 45%; }
}

@media (max-width: 520px) {
  body { padding: 8px; }
  .hud { font-size: 9px; flex-wrap: wrap; gap: 4px 12px; justify-content: center; padding: 8px 2px; }
  .stage { height: 480px; }
  .base { width: 78px; left: 8px; }
  .base-tower { width: 58px; }
  .base-label { font-size: 6.5px; }
  .incident { width: 104px; }
  .inc-body { width: 54px; height: 46px; font-size: 18px; }
  .inc-label { font-size: 6.5px; }
  .inc-patience { margin: 4px 14px 0; }
  .inc-pop { width: 190px; font-size: 13px; padding: 7px 8px; }
  .hint { font-size: 14px; max-width: 94%; padding: 5px 8px; }
  .title { font-size: 19px; }
  .title-sm { font-size: 14px; }
  .subtitle { font-size: 9px; }
  .copy { font-size: 16px; }
  .btn { font-size: 10px; padding: 11px 16px; }
  .btn-sm { font-size: 7px; padding: 7px 8px; }
  .lvl-row { gap: 6px; }
  .lvl-row-label { flex-basis: 100%; text-align: center; }
  .tiny { font-size: 13px; }
  .overlay { gap: 12px; padding: 16px; }
  .panel { padding: 8px; }
  .panel-target { font-size: 14px; }
  .u-btn { flex-basis: 47%; font-size: 13px; padding: 6px; }
  .ticker { font-size: 12px; }
  .parade { gap: 16px; }
  .parade-mon svg { width: 26px; }
  .objectives {
    top: 24px; left: 0; right: 0;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 2px 12px;
    min-width: 0;
    border-left: 0; border-right: 0;
    box-shadow: none;
    padding: 4px 8px;
  }
  .obj-title { margin-bottom: 0; margin-right: 4px; }
  .obj-item { font-size: 11px; gap: 4px; }
  .obj-item .obj-box { width: 8px; height: 8px; font-size: 7px; line-height: 5px; }
  .res-bar { top: 74px; padding: 4px 7px; gap: 7px; }
  .res-tokens { font-size: 17px; }
  .res-score { font-size: 14px; }
  .res-hp { width: 56px; height: 10px; }
  .minimap { display: none; }
  .cmap { gap: 6px; }
  .cmap-node { width: 88px; }
  .cmap-name { font-size: 11px; }
  .cmap-road { width: 18px; }
  .bldg { width: 72px; }
  .bldg-spr svg { width: 40px; }
  .bldg-label { font-size: 5.5px; }

  .foot { font-size: 13px; }
}

/* ── freeze-frame verdict: the game stops while you read why ── */
.verdict {
  position: absolute; inset: 0;
  z-index: 40;
  background: rgba(6, 8, 14, .74);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.verdict-card {
  width: min(460px, 88%);
  background: #171728;
  border: 4px solid var(--bad);
  box-shadow: 0 0 0 4px #2a2a3a, 0 18px 60px rgba(0, 0, 0, .65);
  padding: 18px 20px 14px;
  animation: vpop .16s steps(3) both;
}
@keyframes vpop { from { transform: scale(.86); } to { transform: scale(1); } }
.verdict-card b.v-bad {
  font-family: var(--font-head); font-size: 10px; line-height: 1.7;
  color: var(--bad); font-weight: normal; display: block; margin-bottom: 8px;
}
/* solution card: same freeze-frame, gold instead of red */
.verdict-card.good { border-color: var(--gold); }
.verdict-card b.v-good {
  font-family: var(--font-head); font-size: 10px; line-height: 1.7;
  color: var(--gold); font-weight: normal; display: block; margin-bottom: 8px;
}
.verdict-card .v-why {
  font-family: var(--font-body); font-size: 18px; line-height: 1.35; color: #d7d7e8;
}
.verdict-card .v-ans {
  font-family: var(--font-body); font-size: 18px; line-height: 1.35; margin-top: 10px;
}
.verdict-card .v-ans b { font-family: inherit; font-weight: bold; color: inherit; }
.verdict-card .v-cta {
  font-family: var(--font-body); font-size: 14px; color: #8f8fa8;
  text-align: center; margin-top: 12px;
}

/* ── tutorial coach ── */
.coach {
  position: absolute;
  top: 58px; left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  max-width: min(560px, 92%);
  display: flex; align-items: center; gap: 12px;
  background: #1d1d30;
  border: 3px solid var(--gold);
  box-shadow: 4px 4px 0 #000;
  padding: 10px 14px;
}
.coach-text {
  font-family: var(--font-body); font-size: 17px; line-height: 1.35; color: #d7d7e8;
}
.coach-text b { color: var(--gold); font-weight: bold; }
.u-btn.tutor-glow {
  box-shadow: 0 0 0 3px var(--gold), 4px 4px 0 #000;
  animation: tutorpulse 1s steps(2) infinite;
}
@keyframes tutorpulse { 50% { box-shadow: 0 0 0 5px var(--gold), 4px 4px 0 #000; } }

/* ── focus: the field dims while time is slowed ── */
.stage.focus .field { filter: saturate(.72) brightness(.88); }

/* ── mastery pips on the roster ── */
.u-pips { color: var(--gold); margin-left: 5px; font-size: 8px; letter-spacing: 1px; }

/* ── after-action report on the end screen ── */
.end-report { max-width: 640px; text-align: center; }
.end-report .er-row { margin-bottom: 8px; }
.er-chip {
  display: inline-block;
  border: 2px solid;
  padding: 4px 7px; margin: 3px;
  font-family: var(--font-head); font-size: 7px; line-height: 1.4;
  background: rgba(10, 10, 26, .6);
}
.er-miss {
  font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: #d7d7e8;
}
.er-miss a { color: #9ecbff; }

/* ── share ── */
.btn.btn-share { background: #7ff3ff; color: #002230; }
.btn.btn-share:hover { background: #a8f7ff; }

@media (max-width: 700px){
  .verdict-card { padding: 12px 12px 10px; }
  .verdict-card b.v-bad, .verdict-card b.v-good { font-size: 8px; }
  .verdict-card .v-why, .verdict-card .v-ans { font-size: 15px; }
  .coach { top: 118px; padding: 8px 10px; }
  .coach-text { font-size: 14px; }
  .er-chip { font-size: 6px; }
  .er-miss { font-size: 14px; }
}

/* ── back-to-menu buttons: readable, not tiny ── */
.btn-back {
  font-size: 9px !important;
  padding: 11px 16px !important;
}
.badge-count {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--gold);
  margin-left: 8px;
}