/* Cosmo's Cosmic Adventure fan site
   Every color below is one of the sixteen in the EGA default palette the game uses
   (Cosmodoc: "the game does not define any custom palettes"). */

:root {
  color-scheme: dark;

  --ega-black: #000000;
  --ega-blue: #0000aa;
  --ega-green: #00aa00;
  --ega-cyan: #00aaaa;
  --ega-red: #aa0000;
  --ega-magenta: #aa00aa;
  --ega-brown: #aa5500;
  --ega-gray: #aaaaaa;
  --ega-dark-gray: #555555;
  --ega-bright-blue: #5555ff;
  --ega-bright-green: #55ff55;
  --ega-bright-cyan: #55ffff;
  --ega-bright-red: #ff5555;
  --ega-bright-magenta: #ff55ff;
  --ega-yellow: #ffff55;
  --ega-white: #ffffff;

  /* Body copy is the one place we soften pure EGA white, to avoid halation on black. */
  --ink: #e9e9e9;
  --ink-dim: var(--ega-gray);
  --link: var(--ega-bright-cyan);
  --link-hover: var(--ega-yellow);
  --panel: var(--ega-black);
  --rock: var(--ega-brown);

  /* One game pixel, in CSS pixels. Sprites and tiles are drawn at integer multiples only. */
  --s: 3;

  --measure: 66ch;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);

  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (max-width: 900px) {
  :root { --s: 2; }
}

* {
  box-sizing: border-box;
  /* recomputed per element so any element can set its own --s */
  --px: calc(var(--s) * 1px);
  --tile: calc(var(--s) * 8px);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--ega-black);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: var(--px) solid var(--ega-yellow);
  outline-offset: var(--px);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  background: var(--ega-yellow);
  color: var(--ega-black);
  padding: 8px 12px;
  font-weight: 600;
}
.skip-link:focus { top: 8px; }

p { margin: 0 0 1em; }
strong { color: var(--ega-white); font-weight: 600; }
em { font-style: italic; }
kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--ega-black);
  background: var(--ega-gray);
  border: 1px solid var(--ega-white);
  border-right-color: var(--ega-dark-gray);
  border-bottom-color: var(--ega-dark-gray);
  padding: 0.05em 0.4em;
}
code { font-family: var(--font-mono); font-size: 0.9em; color: var(--ega-bright-cyan); }

/* ------------------------------------------------------------------ pixel art */

.spr, .anim, .pix {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.spr {
  display: block;
  width: calc(var(--w) * var(--px));
  height: calc(var(--h) * var(--px));
  max-width: none;
}

.spr.inline { display: inline-block; vertical-align: middle; }

.flip-x { transform: scaleX(-1); }
.flip-y { transform: scaleY(-1); }

/* Stepped animation from a horizontal strip of original frames. */
.anim {
  display: block;
  width: calc(var(--fw) * var(--px));
  height: calc(var(--fh) * var(--px));
  background-repeat: no-repeat;
  background-size: calc(var(--fw) * var(--n) * var(--px)) calc(var(--fh) * var(--px));
  animation: frames var(--dur, 0.8s) steps(var(--n)) infinite;
}
.anim.inline { display: inline-block; vertical-align: middle; }
.anim.paused { animation-play-state: paused; }

@keyframes frames {
  to { background-position-x: calc(var(--fw) * var(--n) * var(--px) * -1); }
}

/* Game font: glyphs are masked from FONTS.MNI so they can take any EGA color. */
.ega {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--ega-white);
  margin: 0;
  --gs: var(--s);
}
.ega.is-rendered {
  filter: drop-shadow(calc(var(--gs) * 1px) calc(var(--gs) * 1px) 0 var(--ega-black));
  line-height: 0;
}
.ega .w { display: inline-block; white-space: nowrap; margin-bottom: calc(var(--gs) * 3px); }
.ega .g {
  display: inline-block;
  width: calc(var(--gs) * 8px);
  height: calc(var(--gs) * 8px);
  background: currentColor;
  -webkit-mask: url("../font/cosmo-font-mask.png") no-repeat;
  mask: url("../font/cosmo-font-mask.png") no-repeat;
  -webkit-mask-size: calc(var(--gs) * 800px) calc(var(--gs) * 8px);
  mask-size: calc(var(--gs) * 800px) calc(var(--gs) * 8px);
  -webkit-mask-position: calc(var(--i) * var(--gs) * -8px) 0;
  mask-position: calc(var(--i) * var(--gs) * -8px) 0;
}
.ega .sp { display: inline-block; width: calc(var(--gs) * 6px); }

.h-xl { --gs: calc(var(--s) + 2); font-size: 2.6rem; }
.h-lg { --gs: calc(var(--s) + 1); font-size: 2rem; }
.h-md { --gs: var(--s); font-size: 1.5rem; }
.h-sm { --gs: 2; font-size: 1.1rem; }

.c-cyan { color: var(--ega-bright-cyan); }
.c-yellow { color: var(--ega-yellow); }
.c-green { color: var(--ega-bright-green); }
.c-red { color: var(--ega-bright-red); }
.c-magenta { color: var(--ega-bright-magenta); }
.c-white { color: var(--ega-white); }
.c-gray { color: var(--ega-gray); }

/* ------------------------------------------------------------------ layout */

.wrap {
  position: relative;
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.zone {
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--tile) * 4) calc(var(--tile) * 2);
}

/* Tiled level backdrops (40x18 tiles = 320x144 px), drawn at the pixel scale. */
.zone[data-bd] {
  background-color: var(--zone-bg, var(--ega-black));
  background-image: var(--bd);
  background-size: calc(320 * var(--px)) calc(144 * var(--px));
  background-repeat: repeat;
  image-rendering: pixelated;
}

.ground {
  position: relative;
  height: calc(var(--gh) * var(--px));
  background-size: auto calc(var(--gh) * var(--px));
  background-repeat: repeat-x;
  background-position: var(--gx, 0) 0;
  image-rendering: pixelated;
  pointer-events: none;
}

.zone__head {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--tile));
  margin-bottom: calc(var(--tile) * 1.5);
}
.zone__head .lede {
  margin: 0;
  max-width: 38ch;
  color: var(--ink);
  text-shadow: 0 2px 0 var(--ega-black);
}

.zone-code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ega-yellow);
  background: var(--ega-black);
  padding: 2px 8px;
  border: 1px solid var(--ega-dark-gray);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ panels */

/* Message panel, bevelled like the in-game status bar frame. */
.panel {
  position: relative;
  background: var(--panel);
  color: var(--ink);
  border: var(--px) solid var(--ega-gray);
  box-shadow:
    0 0 0 var(--px) var(--ega-black),
    inset 0 0 0 var(--px) var(--ega-dark-gray),
    inset var(--px) var(--px) 0 calc(var(--px) * 1) var(--ega-black);
  padding: calc(var(--tile) * 1.25) calc(var(--tile) * 1.5);
}
.panel > :last-child { margin-bottom: 0; }

/* Brown "status bar" plate with the red-and-black inner line and corner bolts
   used on the game's STATUS and CREDIT screens. */
.panel--rock {
  background: var(--rock);
  color: var(--ega-white);
  border-color: var(--ega-dark-gray);
  box-shadow:
    0 0 0 var(--px) var(--ega-black),
    inset 0 0 0 var(--px) var(--ega-black),
    inset 0 0 0 calc(var(--px) * 2) var(--ega-bright-red),
    inset 0 0 0 calc(var(--px) * 3) var(--ega-black);
}
.panel--rock::before,
.panel--rock::after {
  content: "";
  position: absolute;
  top: calc(var(--px) * 5);
  width: calc(var(--px) * 4);
  height: calc(var(--px) * 4);
  background: var(--ega-yellow);
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--ega-black);
}
.panel--rock::before { left: calc(var(--px) * 5); }
.panel--rock::after { right: calc(var(--px) * 5); }

.prose { max-width: var(--measure); }
.prose p, .prose li { text-wrap: pretty; }
.prose h3 { margin: 1.6em 0 0.5em; }

.cols {
  display: grid;
  gap: calc(var(--tile) * 2);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
}

/* Lists that use the game's idle bomb as the bullet. */
.bomb-list { list-style: none; padding: 0; margin: 0 0 1em; }
.bomb-list li {
  position: relative;
  padding-left: calc(var(--px) * 22);
  margin-bottom: 0.55em;
}
.bomb-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: calc(16 * var(--px) * 0.75);
  height: calc(24 * var(--px) * 0.75);
  background: url("../sprites/bomb.png") no-repeat center / contain;
  image-rendering: pixelated;
}

/* Stars used as section separators */
.star-rule {
  display: flex;
  justify-content: center;
  gap: calc(var(--tile) * 1.5);
  margin: calc(var(--tile) * 2) 0;
}

/* ------------------------------------------------------------------ inhabitants */

.inhabit { position: absolute; z-index: 3; pointer-events: none; }
.inhabit.interactive { pointer-events: auto; }

/* stands on the top edge of its parent */
.on-top { bottom: calc(100% + var(--px)); }
/* hangs beneath the bottom edge of its parent */
.under { top: calc(100% + var(--px)); }
/* clings to the outside of the left / right edge */
.on-left { right: calc(100% + var(--px)); }
.on-right { left: calc(100% + var(--px)); }

@media (max-width: 700px) {
  .hide-narrow { display: none !important; }
}

/* ------------------------------------------------------------------ header */

.site-header {
  position: relative;
  background-color: var(--ega-black);
  background-image: url("../backdrops/bdstar2.png");
  background-size: calc(320 * var(--px)) calc(144 * var(--px));
  image-rendering: pixelated;
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: min(92vh, 980px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-top: calc(var(--tile) * 2);
}

.apogee-presents {
  display: block;
  margin: 0 auto calc(var(--tile) * 1);
  width: calc(var(--w) * var(--px) * 0.67);
  height: auto;
}

.hero__title {
  position: relative;
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
}
.hero__title h1 { margin: 0; }
.logo {
  display: block;
  width: calc(var(--w) * var(--px));
  max-width: calc(100vw - 2 * var(--gutter));
  height: auto;
}

.hero__tag {
  text-align: center;
  margin: calc(var(--tile) * 1.2) auto 0;
  max-width: 46ch;
  color: var(--ink);
  font-size: 1.15rem;
}
.hero__tag .ega { display: block; margin-bottom: 0.7em; }

.hero__stage {
  position: relative;
  align-self: end;
  height: calc(152 * var(--px) + var(--tile) * 2);
}
.hero__stage .ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
}

/* comet + family ship crossing the sky, once */
.flyby {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: calc(40 * var(--px));
  pointer-events: none;
}
.flyby .spr { position: absolute; }
.flyby .ship { animation: fly 14s linear 0.6s 1 both; }
.flyby .comet { animation: fly 9s linear 4.5s 1 both; }
@keyframes fly {
  from { transform: translateX(-30vw); }
  to { transform: translateX(130vw); }
}

/* ------------------------------------------------------------------ nav / HUD */

.hud {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ega-brown);
  border-top: var(--px) solid var(--ega-dark-gray);
  border-bottom: var(--px) solid var(--ega-dark-gray);
  box-shadow:
    inset 0 var(--px) 0 var(--ega-black),
    inset 0 calc(var(--px) * 2) 0 var(--ega-bright-red),
    inset 0 calc(var(--px) * -1) 0 var(--ega-black),
    inset 0 calc(var(--px) * -2) 0 var(--ega-bright-red),
    0 var(--px) 0 var(--ega-black);
  --s: 2;
}
.hud .wrap { width: min(1400px, 100% - 2 * var(--gutter)); }
.hud__inner {
  display: flex;
  align-items: center;
  gap: calc(var(--tile) * 1);
  min-height: calc(var(--tile) * 2.4);
}
.hud nav { flex: 1; min-width: 0; }
.hud nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.hud nav ul::-webkit-scrollbar { display: none; }
.hud nav a {
  display: block;
  padding: 7px 7px;
  text-decoration: none;
  color: var(--ega-bright-cyan);
  white-space: nowrap;
}
.hud nav a .ega { --gs: 2; color: inherit; }
.hud nav a:hover, .hud nav a[aria-current="true"] { color: var(--ega-yellow); }
.hud nav a[aria-current="true"] { background: rgb(0 0 0 / 0.35); }

.hud__meters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.meter {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--ega-dark-gray);
  border: 2px solid var(--ega-black);
  box-shadow: inset 2px 2px 0 var(--ega-black), 0 0 0 2px var(--ega-bright-red);
  padding: 3px 8px;
  min-height: 30px;
}
.meter .ega { --gs: 2; }
.meter .spr { --s: 1.5; }
@media (max-width: 700px) {
  .meter--score { display: none; }
}

/* ceiling walker hanging under the HUD bar (only in the header area) */
.ceiling-patrol {
  position: absolute;
  top: 100%;
  right: 12%;
  height: calc(32 * var(--px));
  width: calc(var(--tile) * 10);
  pointer-events: none;
}
.ceiling-patrol .anim {
  position: absolute;
  top: 0;
  transform: scaleY(-1);
  animation:
    frames 0.7s steps(var(--n)) infinite,
    patrol 16s ease-in-out infinite alternate;
}
@keyframes patrol {
  from { left: 0; }
  to { left: calc(100% - var(--tile) * 3); }
}

/* ------------------------------------------------------------------ figures */

.figure { margin: 0; }
.figure img { display: block; }
.figure figcaption {
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin-top: 8px;
  line-height: 1.45;
}
.screen {
  border: var(--px) solid var(--ega-gray);
  box-shadow: 0 0 0 var(--px) var(--ega-black);
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------ fact sheet */

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 0;
  font-size: 1rem;
}
.facts dt { color: var(--ega-bright-cyan); font-weight: 600; }
.facts dd { margin: 0; }

/* ------------------------------------------------------------------ story strip */

.strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: calc(var(--tile) * 1.25);
  counter-reset: frame;
}
.strip li {
  counter-increment: frame;
  display: grid;
  grid-template-rows: calc(var(--tile) * 6.6) auto;
  background: var(--ega-black);
  border: var(--px) solid var(--ega-gray);
  box-shadow: 0 0 0 var(--px) var(--ega-black), inset 0 0 0 var(--px) var(--ega-dark-gray);
}
.strip .art {
  display: grid;
  place-items: center;
  background: var(--ega-black) url("../backdrops/bdstar2.png") center / calc(320 * var(--px) * 0.67) auto;
  border-bottom: var(--px) solid var(--ega-dark-gray);
  overflow: hidden;
  position: relative;
}
.strip .art .spr { --s: 2; }
.strip .art.ground-art { background: var(--ega-blue); }
.strip p {
  margin: 0;
  padding: 12px 16px 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.strip p::before {
  content: counter(frame);
  font-family: var(--font-mono);
  color: var(--ega-yellow);
  margin-right: 8px;
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------ gameplay */

.spotlight {
  display: grid;
  grid-template-columns: calc(var(--tile) * 13) minmax(0, 1fr);
  gap: calc(var(--tile) * 2);
  align-items: stretch;
}
@media (max-width: 760px) {
  .spotlight { grid-template-columns: 1fr; }
}

/* A little stone shaft where Cosmo demonstrates the suction cups */
.shaft {
  position: relative;
  min-height: calc(var(--tile) * 17);
  background: var(--ega-black) url("../backdrops/bdcliff.png") 0 0 / calc(320 * var(--px)) calc(144 * var(--px));
  border: var(--px) solid var(--ega-gray);
  box-shadow: 0 0 0 var(--px) var(--ega-black);
  overflow: hidden;
  image-rendering: pixelated;
}
.shaft__wall {
  position: absolute;
  top: 0; bottom: 0;
  width: calc(var(--tile) * 2);
  background: url("../tiles/stone.png") 0 0 / calc(16 * var(--px)) calc(16 * var(--px));
  image-rendering: pixelated;
}
.shaft__wall--l { left: 0; }
.shaft__wall--r { right: 0; }
.shaft__floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--tile) * 2);
  background: url("../tiles/stone.png") 0 0 / calc(16 * var(--px)) calc(16 * var(--px));
}
.shaft__cosmo {
  position: absolute;
  width: calc(24 * var(--px));
  height: calc(40 * var(--px));
  left: calc(var(--tile) * 2);
  bottom: calc(var(--tile) * 2);
  background-image: url("../sprites/anim/cosmo-shaft.png");
  background-size: calc(24 * var(--px) * 8) calc(40 * var(--px));
  background-repeat: no-repeat;
  animation: shaft-frames 6s steps(1) infinite, shaft-move 6s steps(1) infinite;
}
/* frame order in cosmo-shaft.png: stand-e, jump-e, cling-e, cling-up-e, jump-w, cling-w, cling-down-w, fall-w */
@keyframes shaft-frames {
  0% { background-position-x: 0; }
  14% { background-position-x: calc(24 * var(--px) * -1); }
  22% { background-position-x: calc(24 * var(--px) * -2); }
  34% { background-position-x: calc(24 * var(--px) * -3); }
  46% { background-position-x: calc(24 * var(--px) * -4); }
  56% { background-position-x: calc(24 * var(--px) * -5); }
  70% { background-position-x: calc(24 * var(--px) * -6); }
  82% { background-position-x: calc(24 * var(--px) * -7); }
  92% { background-position-x: calc(24 * var(--px) * -0); }
}
@keyframes shaft-move {
  0% { left: calc(var(--tile) * 3); bottom: calc(var(--tile) * 2); }
  14% { left: calc(var(--tile) * 6); bottom: calc(var(--tile) * 7); }
  22% { left: calc(100% - var(--tile) * 2 - 24 * var(--px)); bottom: calc(var(--tile) * 9); }
  46% { left: calc(var(--tile) * 6); bottom: calc(var(--tile) * 12); }
  56% { left: calc(var(--tile) * 2); bottom: calc(var(--tile) * 11); }
  82% { left: calc(var(--tile) * 4); bottom: calc(var(--tile) * 6); }
  92% { left: calc(var(--tile) * 3); bottom: calc(var(--tile) * 2); }
}

.mechanics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: calc(var(--tile) * 1.25);
  margin-top: calc(var(--tile) * 2);
}
.mech {
  display: grid;
  grid-template-columns: calc(var(--tile) * 4.2) 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: rgb(0 0 0 / 0.86);
  border-left: var(--px) solid var(--ega-dark-gray);
}
.mech h3 { margin: 0 0 0.35em; }
.mech p { margin: 0; font-size: 1rem; line-height: 1.5; }
.mech__art {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-end;
  justify-content: center;
  min-height: calc(var(--tile) * 3);
}
.mech__art .spr, .mech__art .anim { --s: 2; }

/* ------------------------------------------------------------------ episodes */

.episode {
  position: relative;
  margin-top: calc(var(--tile) * 4);
}
.episode:first-of-type { margin-top: 0; }
.episode__band {
  --s: 2;
  height: calc(var(--bh) * var(--px));
  background-size: auto calc(var(--bh) * var(--px));
  background-repeat: repeat-x;
  image-rendering: pixelated;
  border-block: var(--px) solid var(--ega-black);
}
.episode__body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: calc(var(--tile) * 2);
}
@media (max-width: 900px) {
  .episode__body { grid-template-columns: 1fr; }
}

.levels {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
}
.levels li {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  gap: 10px;
  align-items: baseline;
}
.levels .code {
  font-family: var(--font-mono);
  color: var(--ega-yellow);
  font-size: 0.85rem;
}

.map-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.map-thumbs a {
  display: block;
  position: relative;
  border: 2px solid var(--ega-dark-gray);
  background: var(--ega-black);
  text-decoration: none;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.map-thumbs a:hover, .map-thumbs a:focus-visible { border-color: var(--ega-yellow); }
.map-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  image-rendering: pixelated;
  display: block;
}
.map-thumbs span {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--ega-black);
  color: var(--ega-yellow);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 2px 6px;
}

.cameo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--tile) * 1);
  margin: 14px 0 6px;
}
.cameo-row .spr, .cameo-row .anim { --s: 2; }

/* Lightning (A4) and light-cycle (A7) palette animations: EGA color 5 is cut out of the
   art and these background colors show through, exactly like the game's palette trick. */
.pal-lightning { background-color: var(--ega-black); animation: lightning 9s steps(1) infinite; }
@keyframes lightning {
  0%, 61% { background-color: var(--ega-black); }
  62% { background-color: var(--ega-white); }
  63% { background-color: var(--ega-black); }
  64% { background-color: var(--ega-gray); }
  65%, 88% { background-color: var(--ega-black); }
  89% { background-color: var(--ega-white); }
  90%, 100% { background-color: var(--ega-black); }
}
.pal-cycle { animation: pal-cycle 2.4s steps(1) infinite; }
@keyframes pal-cycle {
  0% { background-color: #000000; }
  8.33% { background-color: #aa0000; }
  16.66% { background-color: #ff5555; }
  25% { background-color: #aa0000; }
  33.33% { background-color: #000000; }
  41.66% { background-color: #00aa00; }
  50% { background-color: #55ff55; }
  58.33% { background-color: #00aa00; }
  66.66% { background-color: #000000; }
  75% { background-color: #0000aa; }
  83.33% { background-color: #5555ff; }
  91.66% { background-color: #0000aa; }
}

/* ------------------------------------------------------------------ bestiary */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 calc(var(--tile) * 1.5);
  padding: 0;
  border: 0;
}
.filter legend { float: left; margin-right: 12px; padding-top: 6px; color: var(--ink); font-size: 0.95rem; }
.filter label {
  cursor: pointer;
  position: relative;
}
.filter input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.filter span {
  display: inline-block;
  padding: 6px 12px;
  background: var(--ega-black);
  border: 2px solid var(--ega-dark-gray);
  color: var(--ega-gray);
  font-size: 0.95rem;
}
.filter input:checked + span { border-color: var(--ega-yellow); color: var(--ega-yellow); }
.filter input:focus-visible + span { outline: 2px solid var(--ega-yellow); outline-offset: 2px; }

.bestiary {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: calc(var(--tile) * 1.25);
}
.beast {
  display: grid;
  grid-template-rows: calc(var(--tile) * 5.5) auto;
  background: var(--ega-black);
  border: var(--px) solid var(--ega-gray);
  box-shadow: 0 0 0 var(--px) var(--ega-black), inset 0 0 0 var(--px) var(--ega-dark-gray);
}
.beast[hidden] { display: none; }
.beast__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding-bottom: calc(var(--px) * 6);
  background-color: var(--ega-black);
  background-size: calc(320 * var(--px) * 0.67) auto;
  background-position: center 30%;
  image-rendering: pixelated;
  border-bottom: var(--px) solid var(--ega-dark-gray);
  overflow: hidden;
}
.beast__stage::after {
  /* a strip of the creature's home ground */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--px) * 6);
  background: var(--floor, var(--ega-dark-gray));
}
.beast__stage .spr, .beast__stage .anim { --s: 2; position: relative; z-index: 1; }
.beast:has(.beast__stage--tall) { grid-template-rows: auto auto; }
.beast__stage--tall { min-height: max(calc(var(--tile) * 5.5), calc(64 * 2px + 24px)); }
.beast__stage.ceiling { align-items: flex-start; padding: calc(var(--px) * 6) 0 0; }
.beast__stage.ceiling::after { top: 0; bottom: auto; }
.beast__stage.air { align-items: center; padding-bottom: 0; }
.beast__stage.air::after { display: none; }
.beast__body { padding: 14px 16px 16px; }
.beast__body h3 { margin: 0 0 4px; }
.beast__aka { margin: 0 0 10px; font-size: 0.85rem; color: var(--ink-dim); }
.beast__body p { font-size: 1rem; line-height: 1.5; margin: 0 0 10px; }
.beast__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 0.88rem;
}
.beast__meta dt { color: var(--ega-bright-cyan); }
.beast__meta dd { margin: 0; }
.maps { display: flex; flex-wrap: wrap; gap: 4px; }
.maps span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0 5px;
  border: 1px solid var(--ega-dark-gray);
  color: var(--ega-gray);
}
.maps span.e1 { color: var(--ega-bright-green); border-color: var(--ega-green); }
.maps span.e2 { color: var(--ega-bright-cyan); border-color: var(--ega-cyan); }
.maps span.e3 { color: var(--ega-bright-red); border-color: var(--ega-red); }

/* ------------------------------------------------------------------ items / scoring */

.loot {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 10px 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.loot li {
  display: grid;
  grid-template-columns: calc(var(--tile) * 3) 1fr;
  gap: 10px;
  align-items: center;
  font-size: 0.98rem;
  line-height: 1.4;
}
.loot .spr, .loot .anim { --s: 2; justify-self: center; }
.loot b { display: block; color: var(--ega-white); font-weight: 600; }
.loot small { color: var(--ink-dim); font-size: 0.85rem; }

.chain {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--tile) * 0.6);
  margin: 16px 0 6px;
  flex-wrap: wrap;
}
.chain .spr { --s: 3; }
@media (max-width: 700px) { .chain .spr { --s: 2; } }

.fruit-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.fruit-scatter .spr { position: absolute; opacity: 0.95; }

/* ------------------------------------------------------------------ hint globe */

.hint-machine {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--tile) * 2);
  align-items: end;
}
@media (max-width: 700px) { .hint-machine { grid-template-columns: 1fr; justify-items: start; } }
.globe-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  justify-items: center;
}
.globe-btn .spr, .globe-btn .anim { --s: 4; }
.globe-btn:hover .anim { filter: brightness(1.3); }
.globe-btn small { display: block; margin-top: 8px; color: var(--ega-yellow); font-size: 0.85rem; }

.dialog {
  position: relative;
  background: var(--ega-blue);
  color: var(--ega-white);
  border: var(--px) solid var(--ega-gray);
  box-shadow: 0 0 0 var(--px) var(--ega-black), inset 0 0 0 var(--px) var(--ega-dark-gray);
  padding: calc(var(--tile) * 1.2) calc(var(--tile) * 1.4);
  min-height: calc(var(--tile) * 6);
  font-size: 1.05rem;
}
.dialog p { margin: 0 0 0.6em; }
.dialog .src { font-size: 0.82rem; color: var(--ega-bright-cyan); margin: 0; }

/* ------------------------------------------------------------------ spoilers / details */

details.spoiler {
  margin: 1em 0;
  border: 2px dashed var(--ega-dark-gray);
  padding: 10px 14px;
  background: rgb(0 0 0 / 0.6);
}
details.spoiler summary {
  cursor: pointer;
  color: var(--ega-yellow);
  font-weight: 600;
}
details.spoiler[open] summary { margin-bottom: 10px; }

table.data {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}
table.data th, table.data td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--ega-dark-gray);
  vertical-align: top;
}
table.data th { color: var(--ega-bright-cyan); font-weight: 600; }
table.data td.num { font-family: var(--font-mono); color: var(--ega-yellow); white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------------ collectible stars */

.pickup {
  position: absolute;
  z-index: 6;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
}
.pickup .anim { --s: inherit; }
.pickup:focus-visible { outline-offset: 2px; }
.pickup.collected { pointer-events: none; }
.pop {
  position: absolute;
  z-index: 60;
  pointer-events: none;
  animation: pop-rise 0.9s steps(6) forwards;
}
@keyframes pop-rise {
  to { transform: translateY(calc(var(--tile) * -2)); opacity: 0; }
}

.hud-bubble {
  position: fixed;
  right: 18px;
  top: 64px;
  z-index: 70;
  pointer-events: none;
}

/* ------------------------------------------------------------------ credits / trivia */

.credit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--tile) * 2);
  align-items: start;
}
@media (max-width: 900px) { .credit-grid { grid-template-columns: 1fr; } }

.signs { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 12px 0; }
.signs .spr { --s: 3; }

.links { columns: 2 280px; column-gap: 40px; padding: 0; list-style: none; margin: 0; }
.links li { break-inside: avoid; margin: 0 0 14px; }
.links a { font-weight: 600; }
.links span { display: block; color: var(--ink-dim); font-size: 0.92rem; line-height: 1.45; }

/* ------------------------------------------------------------------ footer */

.site-footer {
  position: relative;
  background: var(--ega-black);
  padding-top: calc(var(--tile) * 3);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: calc(var(--tile) * 2);
  font-size: 0.92rem;
  color: var(--ink-dim);
}
.footer__inner p { max-width: 60ch; }
.exit-walk {
  position: relative;
  height: calc(var(--tile) * 6);
}
.exit-walk .ground { position: absolute; left: 0; right: 0; bottom: 0; }

/* ------------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
  .anim { animation: none !important; }
  .flyby { display: none; }
  .pal-lightning, .pal-cycle { animation: none !important; background-color: var(--ega-black); }
  .shaft__cosmo { animation: none !important; left: calc(100% - var(--tile) * 2 - 24 * var(--px)); bottom: calc(var(--tile) * 8); background-position-x: calc(24 * var(--px) * -3); }
}