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

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

:root {
  --grass: #1f8a2e;
  --grass-dark: #17701f;
  --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);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 12px;
}

.frame { width: min(1000px, 100%); }

/* ── HUD ── */
.hud {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 10px 4px;
  letter-spacing: 1px;
}
#hud-tokens { color: var(--gold); }
#hud-base { color: var(--bad); }
#hud-resolved { color: var(--good); }
.hud-btn {
  font-family: inherit;
  font-size: 11px;
  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;
  height: 460px;
  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;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(0,0,0,.05) 46px 48px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(0,0,0,.05) 46px 48px),
    radial-gradient(circle 120px at 70% 30%, var(--grass-dark) 0 40%, transparent 42%),
    radial-gradient(circle 90px at 30% 75%, var(--grass-dark) 0 35%, transparent 37%),
    linear-gradient(160deg, #26a038 0%, var(--grass) 55%, #1a7d28 100%);
  transition: filter 1.2s ease;
}
.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 clouds {
  from { transform: translate(-6%, -3%); }
  to { transform: translate(8%, 5%); }
}
/* the day darkens as the levels escalate */
.stage.l2 .field { filter: saturate(.92) hue-rotate(-14deg) brightness(.9); }
.stage.l3 .field { filter: saturate(.85) hue-rotate(-30deg) brightness(.72); }

.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: 84px; height: 110px;
  margin: 0 auto;
  position: relative;
  background: var(--sand);
  border: 4px solid #000;
  box-shadow: inset -8px -8px 0 rgba(0,0,0,.18);
}
.base-tower::before {
  content: "";
  position: absolute; top: -18px; left: -4px; right: -4px; height: 18px;
  background: repeating-linear-gradient(90deg, var(--sand) 0 16px, transparent 16px 26px);
  border-left: 4px solid #000; border-right: 4px solid #000;
}
.base-tower::after {
  content: "";
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 40px;
  background: #3b2a12;
  border: 3px solid #000;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.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: filter .15s ease;
}
.incident:hover { filter: brightness(1.12); }
.inc-body {
  width: 64px; height: 52px;
  margin: 0 auto;
  position: relative;
  background: #7a3c3c;
  border: 4px solid #000;
  box-shadow: inset -6px -6px 0 rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.incident.selected .inc-body {
  outline: 4px solid var(--gold);
  outline-offset: 3px;
}
.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 { box-shadow: inset -6px -6px 0 rgba(0,0,0,.25), 0 0 0 3px rgba(255,215,94,.55); }
.incident.angry .inc-body { animation: angry .5s steps(2) infinite; background: #a12525; }
@keyframes angry { 50% { transform: translateY(-3px) rotate(-2deg); } }
.incident.resolving .inc-body { background: #3c7a4a; }
.incident.out { animation: incout .5s ease forwards; }
@keyframes incout {
  to { transform: translate(-50%, -50%) scale(.2) rotate(12deg); opacity: 0; }
}

/* ── 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; }

/* 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: 224px;
  transform: translateX(-50%);
  background: rgba(10, 10, 26, .95);
  border: 3px solid var(--gold);
  box-shadow: 4px 4px 0 #000;
  padding: 9px 10px;
  font-size: 7.5px;
  line-height: 1.9;
  color: #d7d7e8;
  z-index: 12;
  pointer-events: none;
}
.inc-pop b { color: var(--gold); font-weight: normal; display: block; margin-bottom: 3px; }
.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-size: 8.5px;
  line-height: 1.8;
  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 {
  margin-top: 10px;
  border: 4px solid #000;
  background: #171728;
  box-shadow: 0 0 0 4px #2a2a3a;
  padding: 10px 12px;
}
.panel-target {
  font-size: 9px;
  color: var(--gold);
  min-height: 26px;
  line-height: 1.7;
}
.panel-units {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.u-btn {
  flex: 1 1 140px;
  font-family: inherit;
  font-size: 8px;
  line-height: 1.6;
  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 .u-cost { color: var(--gold); }
.u-btn .u-name { color: #fff; display: block; margin-bottom: 3px; }
.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; }

/* ── 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: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
}
.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-size: 9px; line-height: 2; color: #d7d7e8; }
.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-size: 7.5px; color: #8f8fa8; line-height: 1.9; }
.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-size: 7.5px; 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 {
  margin-top: 14px;
  text-align: center;
  font-size: 7.5px;
  color: #6c6c86;
  line-height: 2.2;
}

@media (max-width: 720px) {
  .stage { height: 420px; }
  .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: 400px; }
  .base { width: 78px; left: 8px; }
  .base-tower { width: 56px; height: 78px; }
  .base-tower::after { width: 20px; height: 30px; }
  .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: 184px; font-size: 7px; padding: 7px 8px; }
  .hint { font-size: 7px; max-width: 94%; padding: 5px 8px; }
  .title { font-size: 19px; }
  .title-sm { font-size: 14px; }
  .subtitle { font-size: 9px; }
  .copy { font-size: 7.5px; }
  .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: 6.5px; }
  .overlay { gap: 12px; padding: 16px; justify-content: flex-start; overflow-y: auto; }
  .overlay > :first-child { margin-top: auto; }
  .overlay > :last-child { margin-bottom: auto; }
  .panel { padding: 8px; }
  .panel-target { font-size: 7.5px; }
  .u-btn { flex-basis: 47%; font-size: 7px; padding: 6px; }
  .foot { font-size: 6.5px; }
}