:root {
  --ink: #0d100f;
  --paper: #d8d2bf;
  --rust: #ef5c2a;
  --acid: #d7f030;
  --muted: #77796e;
  --body-font: "Avenir Next Condensed", "Arial Narrow", "Trebuchet MS", sans-serif;
  --display-font: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: #080a09;
  color: var(--paper);
  font-family: var(--body-font);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

button {
  font: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.game-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  height: 100vh;
  height: 100dvh;
}

.battlefield {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #232621;
}

#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.hud {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 30px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,10,9,.85), transparent);
}

.eyebrow {
  color: var(--rust);
  letter-spacing: .24em;
  font-weight: 700;
  font-size: 11px;
}

.protocol-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
.version-history { position: relative; }
.version-history summary {
  padding-left: 11px;
  color: #a3a598;
  border-left: 1px solid rgba(216,210,191,.35);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  list-style: none;
  cursor: pointer;
}
.version-history summary::-webkit-details-marker { display: none; }
.version-history[open] summary { color: var(--acid); }
.version-history-panel {
  position: absolute;
  z-index: 7;
  top: calc(100% + 9px);
  left: 0;
  display: grid;
  gap: 7px;
  width: 245px;
  padding: 12px;
  border: 1px solid var(--rust);
  background: rgba(13,16,15,.96);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.version-history-panel strong {
  color: var(--rust);
  font-size: 10px;
  letter-spacing: .2em;
}
.version-history-panel span { color: #a5a79a; font-size: 11px; }
.version-history-panel b { color: var(--acid); margin-right: 5px; }

h1, h2 { margin: 0; font-family: var(--display-font); font-weight: 400; line-height: .82; }
.brand h1 { margin-top: 6px; font-size: clamp(38px, 5vw, 66px); text-shadow: 3px 3px 0 #101210; }
.brand strong, .game-over strong { color: var(--rust); font-weight: 400; }

.stats { display: flex; gap: 8px; }
.stat {
  min-width: 82px;
  padding: 8px 12px;
  border-top: 2px solid rgba(216,210,191,.45);
  background: rgba(11,13,12,.68);
  backdrop-filter: blur(4px);
}
.stat span { display: block; color: #929488; font-size: 10px; letter-spacing: .2em; font-weight: 700; }
.stat b { font-size: 26px; line-height: 1; }
.stat.scrap { border-color: var(--acid); }
.stat.scrap b { color: var(--acid); }

.tactical-actions {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 42px;
  display: grid;
  gap: 6px;
  width: min(250px, 26%);
  padding: 10px;
  border: 1px solid rgba(239,92,42,.55);
  background: rgba(13,16,15,.82);
  box-shadow: 0 12px 30px rgba(0,0,0,.38);
  backdrop-filter: blur(4px);
}
.tactical-actions > .eyebrow { font-size: 8px; }
.tactical-action {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 48px;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 7px;
  color: var(--paper);
  text-align: left;
  border: 1px solid #353932;
  cursor: pointer;
}
.tactical-action:disabled { cursor: not-allowed; opacity: .45; }
.tactical-action.ready {
  border-color: rgba(215,240,48,.9);
  box-shadow: inset 4px 0 0 var(--acid), 0 0 22px rgba(215,240,48,.28), 0 0 4px rgba(215,240,48,.45);
}
.tactical-action.ready .upgrade-icon {
  color: #101310;
  background: var(--acid);
  animation: readyPulse .9s steps(2) infinite;
}
.tactical-action.cooling .cost-value { color: var(--paper); }
.tactical-action .upgrade-icon { height: 32px; font-size: 17px; }
.tactical-action .upgrade-copy { min-width: 0; align-self: center; }
.tactical-action .upgrade-copy b {
  overflow: hidden;
  font-size: 11px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tactical-action .upgrade-copy em { margin-top: 4px; font-size: 7px; }
.tactical-action .cost { font-size: 16px; }

.wave-alert {
  position: fixed;
  z-index: 8;
  top: 44%;
  left: 50%;
  width: min(760px, 82vw);
  padding: 18px 24px;
  transform: translate(-50%, -50%) scale(.96);
  text-align: center;
  font-family: var(--display-font);
  font-size: clamp(13px, 2vw, 24px);
  color: var(--paper);
  border: 2px solid var(--rust);
  background: rgba(13,16,15,.92);
  box-shadow: 0 0 50px rgba(0,0,0,.55);
  line-height: 1.05;
  text-shadow: 2px 2px 0 var(--rust);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .4s;
}
.wave-alert.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.store-open .wave-alert {
  top: 39%;
  left: calc(50% - 165px);
  width: min(520px, calc(100vw - 410px));
  padding: 13px 18px;
}

.horde-button {
  position: absolute;
  z-index: 4;
  top: auto;
  left: 50%;
  transform: translate(-50%, -50%) scale(.92);
  padding: 16px 32px;
  border: 2px solid var(--acid);
  color: var(--ink);
  background: var(--acid);
  box-shadow: 0 0 0 7px rgba(215,240,48,.1), 0 0 45px rgba(215,240,48,.25);
  font-family: var(--display-font);
  font-size: clamp(18px, 3vw, 34px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  transition: opacity .22s, transform .22s;
}
.horde-button.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.horde-button.pre-game { top: 79%; }
.pause-fab {
  position: absolute;
  z-index: 7;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  padding: 9px 14px;
  border: 1px solid rgba(215,240,48,.55);
  color: var(--acid);
  background: rgba(12,15,13,.78);
  backdrop-filter: blur(6px);
  font-family: var(--display-font);
  font-size: 13px;
  letter-spacing: .12em;
  cursor: pointer;
  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
}
.pause-fab:hover { background: rgba(215,240,48,.14); }
.store-open .horde-button {
  position: fixed;
  z-index: 10;
  top: auto;
  right: auto;
  bottom: 28px;
  left: calc(50% - 165px);
  width: min(440px, calc(100vw - 390px));
  transform: translate(-50%, 0);
  font-size: clamp(18px, 2.4vw, 30px);
}
.store-open .horde-button.show { transform: translate(-50%, 0); }

.store-banner {
  position: fixed;
  z-index: 7;
  top: 18px;
  right: 354px;
  left: 22px;
  display: none;
  padding: 14px 18px;
  text-align: center;
  border: 2px solid var(--acid);
  background: rgba(13,16,15,.96);
  box-shadow: 0 12px 35px rgba(0,0,0,.5);
}
.store-open .store-banner { display: block; }
.store-banner h2 {
  margin: 4px 0 5px;
  color: var(--acid);
  font-size: clamp(25px, 3.5vw, 44px);
}
.store-banner p {
  margin: 0;
  color: #a5a79a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.store-balance {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  padding: 7px 12px;
  border: 1px solid rgba(215,240,48,.55);
  background: rgba(215,240,48,.08);
}
.store-balance span {
  color: #a5a79a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
}
.store-balance strong {
  color: var(--acid);
  font-family: var(--display-font);
  font-size: 24px;
  font-weight: 400;
  line-height: .8;
}

.start-screen {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(560px, 84%);
  padding: 28px;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 2px solid var(--rust);
  background: rgba(13,16,15,.94);
  box-shadow: 0 0 0 8px rgba(239,92,42,.08), 0 0 60px rgba(0,0,0,.5);
  transition: opacity .25s, transform .25s;
}
.start-screen.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.94);
}
.start-screen h2 { margin: 12px 0 22px; font-size: clamp(42px, 7vw, 76px); }
.start-screen h2 strong { color: var(--rust); font-weight: 400; }
.start-actions {
  display: grid;
  gap: 9px;
  width: min(320px, 100%);
}
.start-screen button {
  width: 100%;
  padding: 14px 34px;
  border: 0;
  color: var(--ink);
  background: var(--acid);
  font-family: var(--display-font);
  font-size: 20px;
  cursor: pointer;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.start-screen button.secondary {
  color: var(--paper);
  border: 1px solid rgba(216,210,191,.45);
  background: #242823;
  font-size: 15px;
}
.start-screen .difficulty-control {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  text-align: left;
}
.start-screen .difficulty-control button {
  padding: 8px 4px;
  clip-path: none;
  font-family: inherit;
}
.start-screen small {
  margin-top: 12px;
  color: #85877b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.menu-modal {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(7,9,8,.9);
  backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s;
}
.menu-modal.show { opacity: 1; pointer-events: auto; }
.menu-dialog {
  width: min(610px, 94%);
  padding: clamp(22px, 4vw, 38px);
  border: 2px solid var(--rust);
  background: rgba(13,16,15,.98);
  box-shadow: 0 0 0 8px rgba(239,92,42,.08), 0 20px 70px rgba(0,0,0,.7);
  text-align: center;
}
.menu-dialog h2 {
  margin: 10px 0 18px;
  color: var(--paper);
  font-size: clamp(32px, 5vw, 58px);
  line-height: .92;
}
.menu-dialog button {
  margin-top: 20px;
  padding: 13px 30px;
  border: 0;
  color: var(--ink);
  background: var(--acid);
  font-family: var(--display-font);
  font-size: 17px;
  cursor: pointer;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.instructions-dialog ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  color: #b8b9ad;
  text-align: left;
  list-style: none;
}
.instructions-dialog li {
  padding-left: 13px;
  border-left: 2px solid var(--rust);
  font-size: 13px;
  line-height: 1.35;
}
.instructions-dialog b { color: var(--paper); }
.cutscene-dialog { max-width: 670px; }
.cutscene-dialog.has-art {
  width: min(1120px, 96vw);
  max-width: 1120px;
  padding: clamp(16px, 2.5vw, 28px);
}
.cutscene-art {
  display: block;
  width: 100%;
  max-height: min(60vh, 620px);
  margin: 0 auto 16px;
  object-fit: contain;
  border: 2px solid rgba(239,92,42,.8);
  background: #080a09;
  box-shadow: 0 0 0 6px rgba(215,240,48,.07), 0 18px 50px rgba(0,0,0,.55);
}
.cutscene-art[hidden] { display: none; }
.cutscene-dialog p {
  margin: 0 auto;
  max-width: 540px;
  color: #b8b9ad;
  font-size: clamp(15px, 2.2vw, 20px);
  line-height: 1.5;
}
.perk-dialog { width: min(940px, 96%); }
.perk-dialog > p { margin: -5px auto 20px; max-width: 690px; color: #a8aa9e; font-size: 12px; }
.perk-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.menu-dialog .perk-card {
  display: grid;
  grid-template-rows: 48px auto 1fr auto;
  gap: 7px;
  min-height: 190px;
  margin: 0;
  padding: 14px;
  color: var(--paper);
  text-align: left;
  border: 1px solid #4b5146;
  background: linear-gradient(145deg, #20251f, #131713);
  clip-path: polygon(0 0, 96% 0, 100% 10%, 100% 100%, 4% 100%, 0 90%);
}
.perk-card:hover { border-color: var(--acid); background: #252c20; }
.perk-card span { display: grid; place-items: center; width: 48px; color: var(--ink); background: var(--acid); font-family: var(--display-font); font-size: 22px; }
.perk-card b { color: var(--paper); font-family: var(--display-font); font-size: 23px; line-height: .95; text-transform: uppercase; }
.perk-card small { color: #a4a79a; font-size: 11px; line-height: 1.25; }
.perk-card em { color: var(--rust); font-size: 9px; font-style: normal; letter-spacing: .15em; }
.pause-dialog { width: min(900px, 96%); }
.pause-dialog > p {
  margin: -6px auto 18px;
  max-width: 620px;
  color: #a8aa9e;
  font-size: 12px;
  line-height: 1.35;
}
.save-slots {
  display: grid;
  gap: 10px;
  text-align: left;
}
.save-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #343932;
  background: rgba(20,24,20,.9);
}
.save-slot.active {
  border-color: rgba(215,240,48,.7);
  box-shadow: inset 0 0 0 1px rgba(215,240,48,.12);
}
.save-slot span, .save-slot small {
  display: block;
  color: #85877b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.save-slot b {
  display: block;
  margin: 4px 0;
  color: var(--paper);
  font-size: 14px;
  letter-spacing: .04em;
}
.save-slot-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 6px;
}
.menu-dialog .save-slot-actions button,
.menu-dialog .pause-actions button {
  margin: 0;
  padding: 10px 14px;
  font-size: 12px;
}
.menu-dialog .save-slot-actions button:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.menu-dialog .save-slot-actions [data-delete-slot] {
  color: var(--paper);
  background: #6f251d;
}
.pause-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.menu-dialog .pause-actions .secondary {
  color: var(--paper);
  background: #232821;
  border: 1px solid #3a4038;
}

.massive-warning {
  width: min(52vw, 620px);
  margin-top: 8px;
  padding: 7px 10px;
  transform: translateY(-4px);
  color: var(--paper);
  border-left: 2px solid var(--rust);
  background: rgba(13,16,15,.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.massive-warning.show { opacity: 1; transform: translateY(0); }
.massive-warning span { color: var(--rust); font-size: 9px; font-weight: 700; letter-spacing: .2em; }
.massive-warning strong {
  display: block;
  margin: 3px 0 5px;
  font-family: var(--display-font);
  font-size: clamp(13px, 2vw, 24px);
  font-weight: 400;
  line-height: 1;
}
.massive-warning small {
  display: block;
  margin-bottom: 6px;
  color: #b6b8aa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
.massive-warning div { height: 3px; overflow: hidden; background: #353932; }
.massive-warning i { display: block; width: 100%; height: 100%; background: var(--rust); }

.upgrade-panel {
  position: relative;
  padding: max(27px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) 20px;
  overflow-y: auto;
  border-left: 4px solid var(--rust);
  background:
    linear-gradient(rgba(216,210,191,.04) 1px, transparent 1px) 0 0/100% 28px,
    #111412;
  box-shadow: -15px 0 40px rgba(0,0,0,.5);
}

.panel-heading { border-bottom: 1px solid #393c36; padding-bottom: 18px; }
.panel-heading h2 { margin: 8px 0 10px; font-size: 39px; }
.panel-heading p { margin: 0; color: #85877b; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; }

.survivor-readout {
  margin: 18px 0;
  padding: 12px;
  border-left: 3px solid var(--acid);
  background: #1b1f1b;
}
.survivor-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.survivor-count { display: flex; justify-content: space-between; align-items: center; min-width: 0; }
.survivor-count + .survivor-count { padding-left: 12px; border-left: 1px solid #393d36; }
.survivor-readout span { color: #919386; font-size: 10px; letter-spacing: .14em; font-weight: 700; }
.survivor-readout strong { color: var(--acid); font-size: 19px; }
.survivor-pips { display: flex; gap: 5px; margin-top: 8px; }
.survivor-pips i { flex: 1; height: 4px; background: #343831; transform: skew(-18deg); }
.survivor-pips i.active { background: var(--acid); box-shadow: 0 0 8px rgba(215,240,48,.25); }
.synergy-readout { margin: 0 0 14px; padding: 10px; border: 1px solid rgba(112,234,255,.35); background: rgba(16,31,31,.72); }
.synergy-readout > span { display: block; margin-bottom: 7px; color: #70eaff; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.synergy-readout > div { display: grid; gap: 6px; }
.synergy-readout div div { padding-left: 8px; border-left: 2px solid #70eaff; }
.synergy-readout b, .synergy-readout small { display: block; }
.synergy-readout b { color: var(--paper); font-size: 10px; letter-spacing: .08em; }
.synergy-readout small { color: #8faaa5; font-size: 9px; line-height: 1.2; }

.difficulty-control, .fire-control, .save-control, .level-map {
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid #30342e;
  background: #151915;
}
.difficulty-control > span, .fire-control > span, .save-control > span,
.level-map-heading > span {
  display: block;
  margin-bottom: 8px;
  color: #919386;
  font-size: 10px;
  letter-spacing: .16em;
  font-weight: 700;
}
.difficulty-control div {
  display: grid;
  gap: 6px;
}
.difficulty-control div { grid-template-columns: repeat(3, 1fr); }
.difficulty-control button {
  border: 1px solid #353932;
  padding: 7px 4px;
  color: var(--paper);
  background: #1a1e1a;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.difficulty-control button.active {
  color: var(--ink);
  border-color: var(--acid);
  background: var(--acid);
}
.fire-control button, .save-control button {
  width: 100%;
  border: 1px solid #353932;
  padding: 8px 5px;
  color: var(--paper);
  background: #1a1e1a;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.fire-control button.active, .save-control button.active {
  color: var(--ink);
  border-color: var(--acid);
  background: var(--acid);
}
.fire-control button + button, .save-control button + button { margin-top: 6px; }
.fire-control button:disabled, .save-control button:disabled { cursor: not-allowed; opacity: .45; }
.save-control small {
  display: block;
  margin-top: 8px;
  color: #85877b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.save-control, .level-map { display: none; }
.store-open .save-control, .store-open .level-map { display: block; }
.level-map-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.level-map-heading small {
  color: #85877b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: right;
  text-transform: uppercase;
}
.level-map-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.level-map-grid button {
  min-height: 34px;
  border: 1px solid #353932;
  color: #777b70;
  background: #1a1e1a;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: not-allowed;
}
.level-map-grid button.completed {
  color: var(--ink);
  border-color: var(--acid);
  background: var(--acid);
  cursor: pointer;
}
.level-map-grid button.boss-test {
  color: var(--paper);
  border-color: var(--rust);
  background: linear-gradient(135deg, #38190f, #1a1e1a);
  cursor: pointer;
}
.level-map-grid button.boss-test::after {
  content: "TEST";
  display: block;
  margin-top: 2px;
  color: var(--rust);
  font-size: 7px;
  letter-spacing: .14em;
}
.level-map-grid button.next {
  color: var(--paper);
  border-color: var(--rust);
  background: #2a1a14;
}
.level-map-grid button.boss { box-shadow: inset 0 -3px 0 var(--rust); }
.level-map-grid button:disabled { opacity: .65; }
.difficulty-control button:disabled { cursor: not-allowed; opacity: .45; }

.upgrade-list { display: none; gap: 9px; }
.store-open .upgrade-list {
  position: fixed;
  z-index: 7;
  top: 165px;
  right: 354px;
  bottom: 118px;
  left: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  overflow-y: auto;
  padding: 14px;
  border: 2px solid var(--rust);
  background: rgba(13,16,15,.95);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
}
.store-open .upgrade-panel {
  border-color: var(--rust);
  box-shadow: -15px 0 40px rgba(0,0,0,.5);
}
.upgrade-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr 48px;
  gap: 10px;
  width: 100%;
  min-height: 78px;
  padding: 11px 10px;
  color: var(--paper);
  text-align: left;
  border: 1px solid #353932;
  background: #1a1e1a;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s;
}
.upgrade-card[hidden] { display: none; }
.upgrade-card:active:not(:disabled) { transform: translateX(-2px) scale(.98); }
.upgrade-card:disabled { cursor: not-allowed; opacity: .45; }
.upgrade-card.locked { filter: saturate(.2); }
.upgrade-card.maxed { border-color: var(--rust); }
.airstrike-control, .tactical-control, .special-control {
  border-color: rgba(239,92,42,.7);
  background: linear-gradient(100deg, #251813, #1a1e1a);
}
.airstrike-control:not(:disabled), .tactical-control:not(:disabled), .special-control:not(:disabled) {
  box-shadow: inset 4px 0 0 var(--rust), 0 0 18px rgba(239,92,42,.12);
}
.airstrike-control:not(:disabled) .upgrade-icon, .tactical-control:not(:disabled) .upgrade-icon, .special-control:not(:disabled) .upgrade-icon {
  animation: airstrikePulse 1s steps(2) infinite;
}
.tactical-action.ready:not(:disabled) {
  background: linear-gradient(100deg, rgba(55,76,21,.96), rgba(18,31,17,.96));
  box-shadow: inset 4px 0 0 var(--acid), 0 0 24px rgba(215,240,48,.35);
}
@keyframes airstrikePulse {
  50% { color: var(--paper); background: #8e2519; }
}
@keyframes readyPulse {
  50% { color: var(--acid); background: #102014; }
}

.upgrade-icon {
  display: grid;
  place-items: center;
  height: 38px;
  color: var(--ink);
  background: var(--rust);
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  font-family: var(--display-font);
  font-size: 21px;
}
.upgrade-copy b, .upgrade-copy small, .upgrade-copy em { display: block; }
.upgrade-copy b { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.upgrade-copy small { color: #85877c; font-size: 11px; line-height: 1.1; margin: 3px 0 5px; }
.upgrade-copy em { color: var(--rust); font-size: 9px; font-style: normal; letter-spacing: .12em; font-weight: 700; }
.cost { align-self: center; text-align: right; color: var(--acid); font-size: 21px; font-weight: 700; }
.cost small { display: block; color: #777b70; font-size: 8px; letter-spacing: .12em; }

.threat-meter { margin-top: 18px; }
.threat-meter > div:first-child { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .15em; color: #888a7f; }
.threat-meter b { color: var(--rust); }
.meter { height: 5px; margin-top: 7px; background: #30342e; overflow: hidden; }
.meter i { display: block; width: 12%; height: 100%; background: var(--rust); transition: width .4s; }

.game-over {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(9,11,10,.88);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
.game-over.show { opacity: 1; pointer-events: auto; }
.game-over h2 { margin: 12px 0 18px; font-size: clamp(52px, 9vw, 108px); text-shadow: 5px 5px 0 #0b0d0c; }
.game-over-art {
  width: min(500px, 78vw);
  max-height: min(62dvh, 64%);
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.72));
}
.game-over p { color: #a5a698; font-size: 16px; text-transform: uppercase; letter-spacing: .08em; }
.game-over .game-over-message {
  max-width: min(760px, 86vw);
  margin: 10px 0 0;
  color: var(--acid);
  font-size: clamp(18px, 2.3vw, 30px);
  line-height: 1.25;
  white-space: pre-wrap;
}
.game-over.victory { background: rgba(9,14,10,.94); }
.game-over.victory h2 strong { color: var(--acid); }
.game-over:not(.victory) > .eyebrow,
.game-over:not(.victory) > h2 { display: none; }
.game-over button {
  margin-top: 18px;
  padding: 15px 35px;
  border: 0;
  color: #11130f;
  background: var(--acid);
  font-family: var(--display-font);
  font-size: 18px;
  cursor: pointer;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}

@media (hover: hover) and (pointer: fine) {
  .version-history summary:hover { color: var(--acid); }
  .tactical-action:hover:not(:disabled) { border-color: var(--acid); }
  .horde-button:hover, .start-screen button:hover, .menu-dialog button:hover, .game-over button:hover { background: var(--paper); }
  .upgrade-card:hover:not(:disabled) { transform: translateX(-4px); border-color: var(--acid); background: #22271f; }
}

@media (hover: none), (pointer: coarse) {
  .tactical-action:active:not(:disabled) { border-color: var(--acid); }
  .horde-button:active, .start-screen button:active, .menu-dialog button:active, .game-over button:active { background: var(--paper); }
}

@media (max-width: 800px) {
  .game-shell { grid-template-columns: 1fr; grid-template-rows: minmax(0, 78dvh) minmax(0, 22dvh); }
  .upgrade-panel {
    border-left: 0;
    border-top: 4px solid var(--rust);
    padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    overscroll-behavior: contain;
  }
  .panel-heading h2, .panel-heading .eyebrow, .threat-meter { display: none; }
  .panel-heading { padding: 0 0 7px; }
  .panel-heading p { font-size: 9px; line-height: 1.15; }
  .survivor-readout {
    position: sticky;
    z-index: 3;
    top: 0;
    margin: 0 0 7px;
    padding: 7px 9px;
    box-shadow: 0 6px 14px rgba(0,0,0,.32);
  }
  .survivor-counts { gap: 8px; }
  .survivor-count + .survivor-count { padding-left: 8px; }
  .survivor-readout span { font-size: 8px; letter-spacing: .1em; }
  .survivor-readout strong { font-size: 17px; }
  .difficulty-control, .fire-control, .save-control, .level-map { margin: 0 0 8px; padding: 7px; }
  .difficulty-control button, .fire-control button, .save-control button { padding: 6px 2px; font-size: 9px; }
  .level-map-grid { grid-template-columns: repeat(8, 1fr); gap: 4px; }
  .level-map-grid button { min-height: 28px; font-size: 8px; }
  .upgrade-list { grid-template-columns: repeat(2, 1fr); }
  .upgrade-card { min-height: 64px; padding: 7px; grid-template-columns: 30px 1fr 43px; }
  .upgrade-icon { height: 30px; font-size: 16px; }
  .upgrade-copy small { display: none; }
  .hud { padding: 12px; }
  .brand h1 { font-size: 35px; }
  .version-history-panel { left: auto; right: 0; }
  .tactical-actions {
    right: 8px;
    bottom: 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(430px, calc(100% - 16px));
    padding: 7px;
  }
  .tactical-actions > .eyebrow { display: none; }
  .tactical-action { grid-template-columns: 27px minmax(0, 1fr) 38px; min-height: 44px; padding: 5px; }
  .tactical-action .upgrade-icon { height: 27px; font-size: 14px; }
  .tactical-action .upgrade-copy b { font-size: 9px; }
  .tactical-action .upgrade-copy em { font-size: 6px; }
  .tactical-action .cost { font-size: 13px; }
  .wave-alert { width: min(350px, 88vw); padding: 12px; font-size: 12px; }
  .stats { gap: 3px; }
  .stat { min-width: 55px; padding: 6px; }
  .stat b { font-size: 19px; }
  .massive-warning { width: 42vw; padding: 5px 7px; }
}

@media (max-width: 800px) {
  .store-open .game-shell { grid-template-rows: minmax(0, 80dvh) minmax(0, 20dvh); }
  .store-open .store-banner {
    z-index: 9;
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    left: 8px;
    padding: 9px;
  }
  .store-banner h2 { font-size: 24px; }
  .store-banner p { font-size: 8px; }
  .store-balance { margin-top: 6px; padding: 5px 8px; }
  .store-balance span { font-size: 7px; }
  .store-balance strong { font-size: 18px; }
  .store-open .upgrade-list {
    top: 116px;
    right: 8px;
    bottom: calc(20dvh + 86px);
    left: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }
  .store-open .horde-button {
    top: auto;
    right: auto;
    bottom: calc(20dvh + 14px);
    left: 50%;
    width: min(390px, calc(100% - 32px));
    padding: 12px 18px;
    transform: translate(-50%, 0);
  }
  .store-open .horde-button.show { transform: translate(-50%, 0); }
  .store-open .wave-alert {
    top: 39%;
    left: 50%;
    width: min(390px, calc(100% - 32px));
  }
}

@media (max-width: 560px) and (orientation: portrait) {
  .game-shell { grid-template-rows: minmax(0, 80dvh) minmax(0, 20dvh); }
  .protocol-line > .eyebrow { display: none; }
  .version-history summary {
    padding-left: 0;
    border-left: 0;
    color: var(--rust);
    font-size: 7px;
  }
  .version-history-panel { left: 0; right: auto; width: 210px; }
  .brand h1 { font-size: 27px; }
  .wave-alert { width: min(350px, 90vw); font-size: 10px; }
  .massive-warning { width: 38vw; margin-top: 4px; }
  .massive-warning span { font-size: 6px; }
  .massive-warning strong { font-size: 9px; }
  .hud { padding: max(8px, env(safe-area-inset-top)) 8px 8px; }
  .stat { min-width: 48px; padding: 5px; }
  .stat span { font-size: 7px; }
  .stat b { font-size: 16px; }
  .upgrade-list { gap: 6px; }
  .store-open .upgrade-list {
    top: calc(max(8px, env(safe-area-inset-top)) + 108px);
    bottom: calc(20dvh + 124px);
    grid-template-columns: 1fr;
  }
  .store-open .wave-alert {
    top: auto;
    bottom: calc(20dvh + 68px);
  }
  .store-open .horde-button {
    top: auto;
    bottom: calc(20dvh + 8px);
    transform: translate(-50%, 0);
  }
  .store-open .horde-button.show { transform: translate(-50%, 0); }
  .upgrade-card { min-height: 58px; grid-template-columns: 27px 1fr 39px; gap: 6px; }
  .upgrade-icon { height: 27px; font-size: 13px; }
  .upgrade-copy b { font-size: 11px; }
  .upgrade-copy em { font-size: 7px; }
  .cost { font-size: 15px; }
  .survivor-readout { padding: 6px 7px; }
  .survivor-counts { gap: 6px; }
  .survivor-count + .survivor-count { padding-left: 6px; }
  .survivor-readout span { font-size: 7px; }
  .difficulty-control, .fire-control, .save-control, .level-map { padding: 6px; }
  .difficulty-control > span, .fire-control > span, .save-control > span, .level-map-heading > span { display: none; }
  .level-map-heading { justify-content: center; }
  .level-map-heading small { font-size: 7px; }
  .horde-button { padding: 12px 18px; font-size: 17px; }
  .horde-button.pre-game { top: 79%; }
  .tactical-actions { right: 8px; bottom: 27px; left: 8px; width: auto; }
  .tactical-action { grid-template-columns: 24px minmax(0, 1fr) 35px; gap: 4px; }
  .tactical-action .upgrade-icon { height: 24px; font-size: 12px; }
  .tactical-action .upgrade-copy em { display: none; }
  .tactical-action .cost { font-size: 11px; }
  .start-screen { padding: 18px; }
  .start-screen small { display: none; }
  .menu-modal { padding: 10px; }
  .menu-dialog { width: min(620px, 98%); padding: 18px; }
  .menu-dialog h2 { margin-bottom: 13px; }
  .perk-dialog { max-height: calc(100dvh - 20px); overflow-y: auto; }
  .perk-dialog > p { margin-bottom: 12px; font-size: 9px; }
  .perk-choices { grid-template-columns: 1fr; gap: 7px; }
  .menu-dialog .perk-card { grid-template: auto auto / 38px 1fr; min-height: 0; padding: 9px; }
  .perk-card span { grid-row: 1 / span 2; width: 34px; height: 34px; font-size: 16px; }
  .perk-card b { font-size: 17px; }
  .perk-card small { font-size: 9px; }
  .perk-card em { display: none; }
  .pause-dialog { max-height: calc(100dvh - 20px); overflow-y: auto; }
  .pause-dialog > p { font-size: 10px; }
  .save-slot { grid-template-columns: 1fr; gap: 8px; padding: 9px; }
  .save-slot b { font-size: 11px; }
  .save-slot-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu-dialog .save-slot-actions button, .menu-dialog .pause-actions button { padding: 8px 6px; font-size: 10px; }
  .pause-actions { flex-direction: column; gap: 7px; }
  .instructions-dialog ul { gap: 7px; }
  .instructions-dialog li { font-size: 11px; }
}

@media (display-mode: standalone) {
  body { user-select: none; -webkit-user-select: none; }
}