/* Environments: each section borrows a level's backdrop, and the page descends through
   the planet roughly in the order Episode 1 does. Backdrops are 320x144 and drawn at the pixel scale. */

.zone, .site-header {
  --bdw: calc(320 * var(--px));
  --bdh: calc(144 * var(--px));
}

/* Header: the bonus-stage starfield (BDSTAR2), the A1 landing site underneath */
.site-header { --s: 2; }
@media (max-width: 560px) { .site-header { --s: 1; } }
@media (min-width: 1600px) and (min-height: 1100px) { .hero__title { --s: 3; } }
@media (max-width: 560px) { .hero__title { --s: 1; } }

.hero__top { text-align: center; }
.hero__title .hero-bird { top: 4%; right: -12%; }
.hero__title .hero-slug { bottom: 12%; left: -14%; }
@media (max-width: 760px) {
  .hero__title .hero-bird, .hero__title .hero-slug { display: none; }
}
.hero__tag .ega { display: inline-block; }
.hero__tag p:last-child {
  background: var(--ega-black);
  padding: 10px 16px;
  box-shadow: 0 0 0 2px var(--ega-black);
}
.hero__stage .pickup { --s: 2; }

/* A1/A2: brown mountains and blue sky (BDNEWSKY scrolls horizontally only) */
.z-sky {
  background-color: var(--ega-bright-blue);
  background-image: url("../backdrops/bdnewsky.png");
  background-repeat: repeat-x;
  background-size: var(--bdw) var(--bdh);
  background-position: 0 calc(100% - 96 * var(--px));
  image-rendering: pixelated;
  padding-bottom: 0;
}
.z-sky .game-shot { margin-top: calc(var(--tile) * 1.5); }
.z-sky .game-shot figcaption {
  color: var(--ega-white);
  background: rgb(0 0 0 / 0.75);
  padding: 6px 10px;
}
.z-sky .zone__head .ega { filter: drop-shadow(calc(var(--gs) * 1px) calc(var(--gs) * 1px) 0 var(--ega-blue)); }
.ground--meadow { margin-top: calc(var(--tile) * 2); }
.facts-panel { margin-top: calc(var(--tile) * 5); }
@media (max-width: 900px) { .facts-panel { margin-top: calc(var(--tile) * 6); } }

.hop-patrol {
  animation:
    frames var(--dur) steps(var(--n)) infinite,
    hop-patrol 22s linear infinite alternate;
}
@keyframes hop-patrol {
  from { left: calc(var(--tile) * 1); }
  to { left: calc(var(--tile) * 16); }
}

/* A3 → A4: the forest canopy over the spooky wood. EGA color 5 is cut out of BDSPOOKY,
   so the section's animated background color shows through as lightning. */
.z-story {
  background-image: url("../backdrops/bdforest.png"), url("../backdrops/bdspooky-pal.png");
  background-repeat: repeat-x, repeat;
  background-size: var(--bdw) var(--bdh), var(--bdw) var(--bdh);
  background-position: 0 0, 0 var(--bdh);
  image-rendering: pixelated;
  padding-top: calc(var(--bdh) * 0.62);
  padding-bottom: 0;
}
.z-story .zone__head {
  background: rgb(0 0 0 / 0.82);
  padding: calc(var(--tile) * 0.75) calc(var(--tile) * 1);
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.story-stage { position: relative; }
.story-stage .strip { position: relative; z-index: 2; }
.ghost-peek {
  z-index: 1;
  top: calc(var(--tile) * 7);
  right: calc(var(--tile) * -1.6);
}
@media (max-width: 760px) { .ghost-peek { display: none; } }
.strip .comet-art { display: flex; align-items: center; justify-content: center; }
.story-after { margin-top: calc(var(--tile) * 2); }
.z-story .ground { margin-top: calc(var(--tile) * 2); }

/* A5: root-laced cliff (BDCLIFF tiles both ways on vertical maps) */
.z-cliff {
  background-color: var(--ega-black);
  background-image: url("../backdrops/bdcliff.png");
  background-size: var(--bdw) var(--bdh);
  image-rendering: pixelated;
  padding-bottom: calc(var(--tile) * 5);
}
.z-cliff .lede, .z-mountain .lede, .z-bonus .lede, .z-clouds .lede, .z-ice .lede {
  background: rgb(0 0 0 / 0.82);
  padding: 8px 12px;
}

/* A6: ice cavern */
.z-ice {
  background-color: var(--ega-black);
  background-image: url("../backdrops/bdice2.png");
  background-size: var(--bdw) var(--bdh);
  image-rendering: pixelated;
  padding-bottom: 0;
}
.episode__band { margin-top: calc(var(--tile) * 2); }
.atlas-cta { margin-top: 12px; background: rgb(0 0 0 / 0.82); padding: 8px 12px; font-size: 0.95rem; }
.z-ice .levels { background: rgb(0 0 0 / 0.86); padding: 14px 16px; border-left: var(--px) solid var(--ega-cyan); }

/* A11 / B1: the "molecules or neurons" backdrop where Episode 2 begins */
.z-weird {
  background-color: var(--ega-black);
  background-image: url("../backdrops/bdwierd.png");
  background-size: var(--bdw) var(--bdh);
  image-rendering: pixelated;
  padding-bottom: 0;
}
.z-weird .episode__body > div:last-child,
.z-machine .episode__body > div:last-child {
  background: rgb(0 0 0 / 0.86);
  padding: 14px 16px;
}
.note { font-size: 0.88rem; color: var(--ink-dim); line-height: 1.5; }
.note.narrow { max-width: 60ch; }

/* A7: tech mounted on rock, with the real palette loop behind color 5 */
.z-machine {
  background-image: url("../backdrops/bdrocktk-pal.png");
  background-size: var(--bdw) var(--bdh);
  image-rendering: pixelated;
  padding-bottom: 0;
}
.machine-band { background-color: var(--ega-black); }

/* A9: gray-blue mountains */
.z-mountain {
  background-color: var(--ega-black);
  background-image: url("../backdrops/bdmountn.png");
  background-repeat: repeat-x;
  background-size: var(--bdw) var(--bdh);
  background-position: 0 100%;
  image-rendering: pixelated;
  padding-bottom: 0;
}
.z-mountain::before {
  /* clouds above the mountain backdrop, which only scrolls horizontally in A9 */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% - var(--bdh) + 2px);
  background: url("../backdrops/bdclouds.png") 0 0 / var(--bdw) var(--bdh);
  z-index: -1;
  image-rendering: pixelated;
}
.bestiary-head { position: relative; flex-wrap: wrap; }
.dragonfly-hover {
  right: calc(var(--tile) * 2);
  top: calc(var(--tile) * -1.5);
  animation:
    frames var(--dur) steps(var(--n)) infinite,
    hover 3.2s steps(8) infinite alternate;
}
@keyframes hover {
  from { transform: translate(0, 0); }
  to { transform: translate(calc(var(--tile) * -3), calc(var(--tile) * 0.75)); }
}
.filter legend { color: var(--ega-white); background: rgb(0 0 0 / 0.82); padding: 4px 10px; }
.z-mountain .ground { margin-top: calc(var(--tile) * 3); }

/* Bonus stage starfield (BDSTAR3) */
.z-bonus {
  background-color: var(--ega-black);
  background-image: url("../backdrops/bdstar3.png");
  background-size: var(--bdw) var(--bdh);
  image-rendering: pixelated;
  padding-bottom: 0;
}
.z-bonus .wrap { z-index: 1; }
.z-bonus .tally { margin-top: calc(var(--tile) * 1.25); }
.z-bonus .tally .screen { margin-top: 6px; }
.chain-h { margin-top: calc(var(--tile) * 2.5); }
.z-bonus .note { background: rgb(0 0 0 / 0.8); padding: 6px 10px; }
.z-bonus .chain { background: var(--ega-black); padding: 14px 16px; width: max-content; max-width: 100%; }
.z-bonus .chain-h { background: var(--ega-black); padding: 8px 12px; width: max-content; max-width: 100%; margin-bottom: 0; }
.z-bonus .ground { margin-top: calc(var(--tile) * 2); }
.fruit-scatter .spr { --s: 2; }
@media (max-width: 1300px) { .fruit-scatter { display: none; } }

/* A8: clouds in a blue sky */
.z-clouds {
  background-color: var(--ega-bright-blue);
  background-image: url("../backdrops/bdclouds.png");
  background-size: var(--bdw) var(--bdh);
  image-rendering: pixelated;
}
.z-clouds--low { padding-bottom: 0; }
.z-clouds--low .ground { margin-top: calc(var(--tile) * 2); }
.hint-all { background: rgb(0 0 0 / 0.86); }
.hint-all td:last-child { white-space: nowrap; color: var(--ega-yellow); font-family: var(--font-mono); font-size: 0.85rem; }
.duke-panel { margin-top: calc(56 * 2px + 24px) !important; }
.dukequote {
  margin: 0 0 1em;
  padding: 0 0 0 14px;
  border-left: var(--px) solid var(--ega-yellow);
  font-size: 1rem;
}
.dukequote p { margin-bottom: 0.5em; }
#secrets .cols > div > * + * { margin-top: calc(var(--tile) * 1.25); }

/* Deep space for the history and credits, like the PRETITLE screen */
.z-space {
  background-color: var(--ega-black);
  background-image: url("../backdrops/bdstar2.png");
  background-size: var(--bdw) var(--bdh);
  image-rendering: pixelated;
}
.z-space .prose > p { background: rgb(0 0 0 / 0.86); padding: 10px 14px; margin: 0 0 12px; }
.z-space .credit-grid > div:last-child > * + * { margin-top: calc(var(--tile) * 1.25); }
.z-space .figure { margin-bottom: 16px; }
.z-space .figure figcaption { background: var(--ega-black); padding: 4px 8px; }
.music { margin-top: calc(var(--tile) * 2); }
.z-space--links { padding-top: calc(var(--tile) * 2); }
.z-space--links .links { background: rgb(0 0 0 / 0.86); padding: 18px 20px 6px; }
.about { margin-top: calc(var(--tile) * 2); }

/* Footer: the forest floor, and the exit */
.footer-walker {
  animation:
    frames var(--dur) steps(var(--n)) infinite,
    walk-to-exit 18s linear infinite;
}
@keyframes walk-to-exit {
  from { left: -10%; }
  to { left: calc(90% - var(--tile) * 5); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-walker { left: 40%; }
  .hop-patrol { left: calc(var(--tile) * 8); }
}

/* Section titles sit on a black plate so the game font reads over busy backdrops */
.zone__head > .ega {
  background: var(--ega-black);
  padding: calc(var(--px) * 3) calc(var(--px) * 4) 0;
  flex-shrink: 0;
}
.zone__head { align-items: center; }

@media (max-width: 700px) {
  .zone__head { flex-wrap: wrap; }
  .zone__head .lede { max-width: none; }
  .pickup { --s: 1; }
}

.hud.is-stuck .ceiling-patrol { display: none; }