:root {
  --cream: #d6cfb4;
  --nicotine: #a99d78;
  --mold: #667153;
  --brown: #2d2119;
  --charcoal: #10100e;
  --gray: #777568;
  --green: #2fff72;
  --purple: #9a55ff;
  --red: #ef3232;
  --yellow: #f5d142;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--charcoal);
  color: #f3edd2;
  font-family: Arial, Helvetica, Verdana, sans-serif;
  cursor: crosshair;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 20%, transparent, rgba(0,0,0,.32));
  mix-blend-mode: multiply;
}

a { color: inherit; }
.boot {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: #050705;
  color: var(--green);
  font: 700 clamp(14px, 2vw, 22px)/1.55 "Courier New", monospace;
  animation: bootOut .35s 1.9s forwards;
}
.boot.hide { animation: bootOut .35s forwards; }
.boot-screen {
  width: min(760px, 88vw);
  min-height: 410px;
  padding: 28px;
  border: 3px double var(--green);
  box-shadow: 0 0 28px rgba(47,255,114,.2);
}
.boot-screen p, .boot-screen strong {
  display: block;
  opacity: 0;
  animation: bootLine .18s forwards;
}
.boot-screen p:nth-child(1) { animation-delay: .1s; }
.boot-screen p:nth-child(2) { animation-delay: .32s; }
.boot-screen p:nth-child(3) { animation-delay: .54s; }
.boot-screen p:nth-child(4) { animation-delay: .76s; }
.boot-screen p:nth-child(5) { animation-delay: .98s; }
.boot-screen p:nth-child(6) { animation-delay: 1.2s; }
.boot-screen strong { animation-delay: 1.48s; font-size: 1.7em; }

.topbar {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  min-height: 70px;
  padding: 8px 14px;
  background: linear-gradient(#c6bea4, #8e876f);
  border-bottom: 4px solid #15130f;
  color: #050505;
  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
  box-shadow: inset 0 2px #eee7d0, 0 5px 0 rgba(0,0,0,.28);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: 0;
}
.brand img, footer img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 3px solid #111;
  image-rendering: pixelated;
}
.brand small { display: block; font: 700 11px "Courier New", monospace; color: #291a0b; }
.nav { display: flex; justify-content: center; gap: 6px; }
.nav a {
  padding: 7px 9px;
  border: 2px outset #ded8bf;
  background: #bcb59d;
  color: #111;
  font: 800 12px Tahoma, sans-serif;
  text-decoration: none;
}
.header-actions { display: flex; align-items: center; gap: 7px; }
.status { font: 800 11px "Courier New", monospace; color: #143a17; white-space: nowrap; }
.menu { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 10px 14px;
  border: 3px solid #0b0b0b;
  border-radius: 0;
  color: #080808;
  font: 900 14px/1 Tahoma, Arial, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
}
.btn:hover { animation: jitter .18s infinite; }
.btn-buy { background: var(--green); }
.btn-alt { background: linear-gradient(#eee8cd, #aaa185); border-style: outset; }
.btn-danger { background: var(--red); color: #fff7d8; text-shadow: 1px 1px #000; }
.full { width: 100%; margin-top: 10px; }

.panel {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  gap: 24px;
  padding: 120px clamp(18px, 5vw, 72px) 70px;
  background-size: cover;
  background-repeat: no-repeat;
  isolation: isolate;
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.2) 42%, rgba(0,0,0,.25)),
    radial-gradient(circle at 12% 40%, rgba(47,255,114,.14), transparent 34%);
}
.hero { grid-template-columns: minmax(280px, 680px) minmax(260px, 360px); background-image: url("assets/hero.png"); background-position: center; }
.origin { grid-template-columns: minmax(260px, 610px) minmax(260px, 390px); background-image: url("assets/origin.png"); background-position: center; }
.extinct { grid-template-columns: minmax(260px, 550px) minmax(300px, 520px); background-image: url("assets/extinct.png"); background-position: center; }
.extermination { grid-template-columns: minmax(260px, 560px) minmax(260px, 420px); background-image: url("assets/extermination.png"); background-position: center; }
.graveyard { grid-template-columns: minmax(260px, 570px) minmax(280px, 520px); background-image: url("assets/graveyard.png"); background-position: center; }
.roachomics { background-image: url("assets/anatomy board.png"); background-position: center; justify-items: end; }
.mirror { grid-template-columns: minmax(280px, 520px) minmax(280px, 520px); background-image: url("assets/areyouaroach.png"); background-position: center; }
.survivor { background-image: url("assets/survivor.png"); background-position: center; justify-items: center; text-align: center; }

.copy {
  width: min(100%, 700px);
  padding: 22px;
  background: linear-gradient(90deg, rgba(7,7,5,.82), rgba(7,7,5,.46));
  border-left: 7px solid var(--green);
  text-shadow: 3px 3px 0 #000;
}
.block-right { justify-self: end; border-color: var(--purple); }
.side-panel {
  max-width: 410px;
  background: rgba(227,221,192,.83);
  color: #090909;
  border: 4px solid #111;
  text-shadow: 1px 1px #f4edca;
}
.center-dark { border: 4px double var(--gray); background: rgba(0,0,0,.62); }
.badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 10px;
  background: var(--yellow);
  color: #111;
  border: 3px solid #111;
  font: 900 13px "Courier New", monospace;
  transform: rotate(-2deg);
}
h1, h2, h3 {
  margin: 0 0 14px;
  font-family: Impact, "Arial Black", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}
h1 { font-size: clamp(48px, 9vw, 126px); line-height: .86; }
h2 { font-size: clamp(37px, 6vw, 80px); line-height: .92; }
h3 { font-size: clamp(24px, 3vw, 42px); line-height: .95; }
p { font-size: clamp(17px, 1.55vw, 23px); line-height: 1.22; }
.duo { display: flex; flex-wrap: wrap; gap: 12px; font-family: "Courier New", monospace; }
.duo b { background: #111; border: 2px solid var(--green); padding: 7px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.cta-row.center { justify-content: center; }

.system-box {
  padding: 16px;
  background: #d0cab2;
  color: #060606;
  border: 3px outset #fff5d2;
  box-shadow: 5px 5px 0 #070707;
  font-family: "Courier New", monospace;
}
.system-box h3 { font-family: "Courier New", monospace; font-size: 18px; }
dl { margin: 0; }
dt { margin-top: 9px; font-weight: 900; color: #274419; }
dd { margin: 0 0 5px; font-weight: 900; }

.divider {
  position: relative;
  z-index: 5;
  width: 110vw;
  margin: -18px 0;
  transform: translateX(-4vw) rotate(1.8deg);
  overflow: hidden;
  border: 3px solid #080808;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 34px, #151515 34px 68px);
  box-shadow: 0 5px 0 #000;
  transform-origin: center;
  animation: tapeRockA 2.8s steps(4, end) infinite;
}
.divider span {
  display: block;
  width: max-content;
  min-width: 240vw;
  padding: 9px 0;
  color: #fff4b5;
  font: 900 26px Impact, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 3px 3px #000;
  animation: crawl 19s linear infinite;
}
.tilt-b {
  transform: translateX(-4vw) rotate(-2.2deg);
  background: repeating-linear-gradient(90deg, #141414 0 40px, var(--red) 40px 80px);
  animation-name: tapeRockB;
}
.reverse span { animation-direction: reverse; }

.big-number {
  color: var(--green);
  font: 900 clamp(100px, 14vw, 210px)/.8 Impact, sans-serif;
  -webkit-text-stroke: 4px #050505;
  filter: drop-shadow(7px 7px 0 var(--red));
}
.timeline { justify-self: end; width: min(100%, 520px); }
.timeline div:not(#more-events) {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 2px dashed #111;
}
.timeline b { color: #0e8c2f; }
.fail-grid, .coin-dump {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fail-grid b, .coin-dump article {
  padding: 12px;
  background: #e0d7b8;
  color: #090909;
  border: 3px solid #111;
  box-shadow: 4px 4px 0 #000;
}
.popup-art {
  position: absolute;
  right: clamp(12px, 5vw, 70px);
  bottom: 34px;
  width: min(390px, 42vw);
  border: 3px solid #111;
  box-shadow: 7px 7px 0 #000;
  transform: rotate(2deg);
  animation: wobble 2.2s infinite steps(2);
}
.coin-dump { align-self: end; }
.coin-dump button {
  width: 100%;
  padding: 8px;
  border: 3px outset #eee8d1;
  background: var(--yellow);
  font-weight: 900;
}
.scanner { grid-column: 1 / -1; }
.bar {
  display: block;
  height: 18px;
  margin: 6px 0 12px;
  border: 2px solid #000;
  background: linear-gradient(90deg, var(--red) 2%, #333 2%);
}
.bar.full { background: var(--green); }
.stats-list {
  padding: 0;
  list-style: none;
  font: 900 15px/1.5 "Courier New", monospace;
}
.mutation i {
  display: block;
  height: 20px;
  margin: 8px 0;
  border: 2px solid #111;
  background: repeating-linear-gradient(90deg, var(--green) 0 15px, var(--purple) 15px 30px);
}
.checklist {
  list-style: none;
  justify-self: start;
  width: min(100%, 500px);
  font-weight: 900;
}
.checklist li {
  padding: 8px 0;
  border-bottom: 2px dashed #222;
}
.checklist li::before { content: "☑ "; color: #087e28; }
.scan-result {
  min-height: 90px;
  margin-top: 12px;
  font: 900 17px/1.35 "Courier New", monospace;
  color: var(--green);
}
.last-known { font-family: "Courier New", monospace; }

.final-cta {
  min-height: 95vh;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 110px 20px 55px;
  background: #181510;
  text-align: center;
}
.banner {
  width: min(1200px, 96vw);
  aspect-ratio: 3 / 1;
  background: url("assets/BANNERS.png") center / cover no-repeat;
  border: 4px solid #090909;
  box-shadow: 8px 8px 0 #000;
}
.final-copy {
  margin-top: -42px;
  max-width: 820px;
  border: 5px solid var(--green);
  background: rgba(0,0,0,.78);
}
.final-copy h3 { font-size: clamp(58px, 10vw, 132px); color: var(--green); -webkit-text-stroke: 2px #000; }

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 24px;
  background: #c1b899;
  color: #111;
  border-top: 5px solid #111;
  font-family: Tahoma, Arial, sans-serif;
}
footer div span { display: block; font-family: "Courier New", monospace; }
footer p { margin: 0; font-weight: 900; font-size: 16px; }
footer nav { display: flex; gap: 8px; }
footer a { color: #111; font-weight: 900; }
footer small { width: 100%; }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1001;
  width: min(320px, calc(100vw - 36px));
  padding: 14px;
  background: #d1cab2;
  color: #111;
  border: 3px outset #f4edce;
  box-shadow: 5px 5px 0 #000;
  font: 900 14px/1.3 "Courier New", monospace;
  transform: translateY(140%);
  transition: transform .22s steps(3);
}
.toast.show { transform: translateY(0); }
.red-flash {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
  background: rgba(239,50,50,.78);
  opacity: 0;
}
.red-flash.on { animation: flash .5s; }
.kill-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: none;
  place-items: center;
  background: #000;
  color: var(--green);
  text-align: center;
  font-family: "Courier New", monospace;
}
.kill-overlay.show { display: grid; }
.kill-overlay strong { display: block; color: var(--red); font: 900 clamp(62px, 13vw, 160px)/1 Impact, sans-serif; text-shadow: 5px 5px #000; }
.kill-overlay span { font-size: 24px; }
body.shake { animation: screenShake .45s; }
.fate-dialog {
  width: min(680px, 94vw);
  padding: 0;
  border: 4px solid #111;
  background: #c9c6bc;
  color: #050505;
  box-shadow: 10px 10px 0 #000;
}
.fate-dialog::backdrop { background: rgba(0,0,0,.72); }
.dialog-title {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  background: #0717a8;
  color: #fff;
  font: 900 24px Tahoma, sans-serif;
}
.dialog-title button { border: 3px outset #fff; background: #bbb; font-weight: 900; }
.dialog-body { padding: 18px; text-align: center; }
.dialog-body img { max-width: 240px; width: 56%; image-rendering: pixelated; }
.dialog-body h2 { color: #111; font-size: clamp(32px, 6vw, 56px); }
.dialog-body p { color: #111; }

@keyframes bootLine { to { opacity: 1; } }
@keyframes bootOut { to { opacity: 0; visibility: hidden; } }
@keyframes jitter {
  0%,100% { transform: translate(0); }
  33% { transform: translate(1px, -1px) rotate(.4deg); }
  66% { transform: translate(-1px, 1px) rotate(-.4deg); }
}
@keyframes crawl { to { transform: translateX(-50%); } }
@keyframes tapeRockA {
  0%, 100% { transform: translateX(-4vw) rotate(1.3deg) skewX(-1deg); }
  35% { transform: translateX(-4.4vw) rotate(2.7deg) skewX(1deg); }
  70% { transform: translateX(-3.7vw) rotate(.8deg) skewX(-.6deg); }
}
@keyframes tapeRockB {
  0%, 100% { transform: translateX(-4vw) rotate(-2.4deg) skewX(1deg); }
  40% { transform: translateX(-3.5vw) rotate(-.9deg) skewX(-.8deg); }
  75% { transform: translateX(-4.6vw) rotate(-3.1deg) skewX(.5deg); }
}
@keyframes wobble { 50% { transform: translate(-5px, 3px) rotate(-1deg); } }
@keyframes flash { 0%, 100% { opacity: 0; } 35% { opacity: 1; } }
@keyframes screenShake {
  0%,100% { transform: translate(0); }
  20% { transform: translate(-10px, 5px); }
  40% { transform: translate(9px, -7px); }
  60% { transform: translate(-7px, -2px); }
  80% { transform: translate(6px, 7px); }
}

@media (max-width: 920px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .brand { min-width: 0; }
  .menu {
    display: inline-flex;
    justify-self: end;
    padding: 8px;
    border: 3px outset #f3ebce;
    background: #b8af95;
    font-weight: 900;
    color: #090909;
  }
  .nav, .header-actions {
    display: none;
    grid-column: 1 / -1;
    justify-content: start;
    flex-wrap: wrap;
  }
  .topbar.open .nav, .topbar.open .header-actions { display: flex; }
  .panel {
    min-height: 110vh;
    grid-template-columns: 1fr;
    padding: 115px 16px 62px;
  }
  .hero { background-position: 58% center; }
  .origin { background-position: 55% center; }
  .extinct { background-position: 53% center; }
  .extermination { background-position: 42% center; }
  .graveyard { background-position: center; }
  .roachomics { background-position: 48% center; justify-items: start; }
  .mirror { background-position: 57% center; }
  .survivor { background-position: center; }
  .copy { padding: 17px; }
  .fail-grid, .coin-dump { grid-template-columns: 1fr; }
  .popup-art { position: relative; right: auto; bottom: auto; width: min(100%, 360px); margin-top: -25px; }
  .divider span { font-size: 21px; }
}

@media (max-width: 560px) {
  .brand img { width: 38px; height: 38px; }
  .status { width: 100%; }
  .btn { width: 100%; }
  .cta-row { width: 100%; }
  h1 { font-size: 46px; }
  h2 { font-size: 39px; }
  .hero-stats, .field-guide, .timeline, .checklist { width: 100%; }
  .final-copy { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}