/* Zombie theme (owner 2026-10-26: "This time it should have the zombie theme, like the gold miner and aquarium
   game"). Worn only by pages whose <html> has class theme-zombie -- the build gives it to /gate-watchers/ and
   every page under it; nothing here can reach another game or the home page.
   Lettering: the game's own faces, served from this site (the CSP allows no font host), both SIL Open Font
   License 1.1 (Butcherman-OFL.txt, Bangers-OFL.txt): Butcherman, the wave-banner face, only for big headings
   (it drips, so small sizes stop reading); Bangers, the game's title face, for section headings and the studio
   name. Blood red on a near-black rim, like the in-game "SWARM AT DUSK!" banner. */

@font-face {
  font-family: "Bangers";
  src: url(/static/themes/zombie/Bangers.4160a7311d.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Butcherman";
  src: url(/static/themes/zombie/Butcherman.b8cee5e2cd.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* The site's palette, retinted to a ruined street at dusk: olive steel, rust and blood. Every rule in
   site.css reads these, so cards, tables, borders and links follow without being restated. */
html.theme-zombie {
  --night: #0e100b;
  --deep: #171a12;
  --dirt: #2b3122;
  --edge: #4f5a3a;
  --gold: #ff5a3c;
  --hi: #ffd9cf;
  --text: #e9e6da;
  --muted: #a7a892;
  --rim: #1a0302;
  --shadow: rgba(0, 0, 0, 0.85);
  /* Dusk sky over the street, falling to the dark of the road. */
  background:
    linear-gradient(180deg, #3a2a22 0, #2a2219 12rem, #171a12 30rem, #0e100b 60rem, #0b0c08 100%);
  background-color: #0b0c08;
  min-height: 100%;
}

/* A low fog band and a red glow on the horizon behind the top of the page. */
html.theme-zombie body { position: relative; }
html.theme-zombie body::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 40rem; pointer-events: none; z-index: -1;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 90, 60, 0.16), rgba(255, 90, 60, 0) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(170, 180, 150, 0.06) 75%, rgba(0, 0, 0, 0) 100%);
}

/* The lettering: headings in the banner face, body text stays the site's readable sans. */
html.theme-zombie h1,
html.theme-zombie .legal h1 {
  font-family: "Butcherman", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}
html.theme-zombie .brand,
html.theme-zombie h2,
html.theme-zombie h3 {
  font-family: "Bangers", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.06em;
}
html.theme-zombie h3 { font-size: 1.45rem; }
html.theme-zombie .brand {
  color: #ff4a30;
  -webkit-text-stroke: 0.12em var(--rim);
  paint-order: stroke fill;
  text-shadow: 0.08em 0.08em 0 var(--shadow);
}
html.theme-zombie h2, html.theme-zombie h3 { color: var(--gold); text-shadow: 0.06em 0.06em 0 var(--shadow); }
html.theme-zombie .top { border-bottom-color: rgba(255, 90, 60, 0.25); }

/* The title logo shakes once on load, like the swarm banner landing. */
html.theme-zombie .game-hero { position: relative; isolation: isolate; }
html.theme-zombie .game-hero img { animation: land 0.6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes land { from { transform: translateY(-14px) scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }

/* Hazard stripes under the hero, like the barricades across the street. */
html.theme-zombie .game-hero::after {
  content: ""; display: block; height: 10px; margin: 1.25rem auto 0; max-width: 28rem; border-radius: 3px;
  background: repeating-linear-gradient(135deg, #f0c234 0 14px, #15180f 14px 28px);
  opacity: 0.85;
}

/* Buttons and panels as field plates. */
html.theme-zombie .play {
  background: linear-gradient(180deg, #ff6a48, #c8321c); color: #fff6f2;
  border-color: #ffd9cf; box-shadow: 0 4px 0 var(--rim), 0 8px 20px rgba(0, 0, 0, 0.45);
}
html.theme-zombie .play:hover { color: #fff6f2; }
html.theme-zombie .play.soon {
  background: rgba(43, 49, 34, 0.85); color: var(--text);
  border-color: rgba(255, 90, 60, 0.5); box-shadow: none;
}
html.theme-zombie .gallery img { border-color: rgba(240, 194, 52, 0.35); }
html.theme-zombie .legal th { color: var(--gold); }
html.theme-zombie .legal blockquote { border-left-color: var(--gold); }

/* Asphalt under the footer: a dark road with a dashed lane line. */
html.theme-zombie footer {
  border-top: 0; padding-inline: 1rem; border-radius: 14px 14px 0 0;
  background:
    linear-gradient(90deg, rgba(233, 230, 218, 0.35) 50%, transparent 50%) 0 0.4rem / 3rem 3px no-repeat repeat-x,
    linear-gradient(180deg, rgba(60, 62, 58, 0.55), rgba(30, 31, 28, 0) 80%);
}

/* The parade (the commander ahead, a zombie and the tanker after her) walks along the road. */
html.theme-zombie .parade {
  height: 180px; margin-top: 0.5rem;
  background: linear-gradient(180deg, transparent 78%, rgba(60, 62, 58, 0.55) 78%, rgba(30, 31, 28, 0.2) 100%);
}
html.theme-zombie .parade .train { gap: 2.5rem; animation-duration: 26s; }