@font-face {
  font-family: 'Medieval Pixel';
  src: url('medieval-pixel.otf.woff2') format('woff2');
  font-display: block;
}

/* EGA 16-colour palette only: 000000 0000AA 00AA00 00AAAA AA0000 AA00AA AA5500 AAAAAA
   555555 5555FF 55FF55 55FFFF FF5555 FF55FF FFFF55 FFFFFF */
:root {
  --paper: #AAAAAA;
  --ink: #000000;
  --ornament: #000000; /* corner flourishes */
  --hover: #555555;

  /* Choice colours (hover). Use these names as `color` in story.js */
  --cyan: #55FFFF;
  --magenta: #FF55FF;
  --red: #FF5555;
  --yellow: #FFFF55;
  --white: #FFFFFF;
  --lavender: #5555FF; /* EGA light blue */
  --green: #00AA00;
  --pale: #FFFFFF; /* no pale blue in EGA, so white */

  /* Page backgrounds (bg: "dim" / "white" / "dusk" / "night") */
  --dim: #555555;
  --dusk: #555555;

  /* Death screen */
  --night: #000000;
  --stone: #AAAAAA;

  --px: 4px; /* one "art pixel" */
  --font: 'Medieval Pixel', Georgia, 'Times New Roman', serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
}

body.bg-dim {
  background: var(--dim);
}

body.bg-white {
  background: var(--white);
}

/* Dark backgrounds: white text, light gray flourishes and hover */
body.bg-dim,
body.bg-dusk,
body.bg-night {
  --ink: var(--white);
  --ornament: var(--stone);
  --hover: var(--stone);
  color: var(--white);
}

body.bg-dusk {
  background: var(--dusk);
}

body.bg-night {
  background: var(--night);
}

.screen.italic .story-text,
.screen.italic .choice-text-style {
  font-style: italic;
}

/* Stage */
.stage {
  min-height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* top/bottom space keeps text clear of the corner flourishes */
  padding: calc(var(--px) * 12) calc(var(--px) * 6);
  overflow: hidden;
}

/* Corner flourishes: 54 art-pixels, drawn at 4 screen px each */
.corner {
  position: absolute;
  width: calc(var(--px) * 54);
  height: calc(var(--px) * 54);
  pointer-events: none;
}

.corner .pixels {
  display: block;
  width: 100%;
  height: 100%;
}

.corner-tl { top: calc(var(--px) * 4); left: calc(var(--px) * 4); }
.corner-tr { top: calc(var(--px) * 4); right: calc(var(--px) * 4); }
.corner-bl { bottom: calc(var(--px) * 4); left: calc(var(--px) * 4); }
.corner-br { bottom: calc(var(--px) * 4); right: calc(var(--px) * 4); }

/* Screen content */
.screen {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 2);
  width: 100%;
  max-width: 1100px;
  text-align: center;
}

/* New page: drawn in from top to bottom in 8 steps, like an old EGA game */
.screen.enter {
  animation: scan-in 0.32s steps(8, end);
}

.story-text {
  font-size: 56px;
  font-weight: 400;
  line-height: 1.1;
  max-width: 100%;
  white-space: pre-line; /* "\n" in story text becomes a line break */
}

h1.story-text {
  font-size: 80px;
}

.title-screen .story-text {
  font-size: 72px;
  max-width: 100%;
}

/* Choices: plain text, black until hovered */
/* Choices always sit side by side; a long choice wraps onto its own lines */
.choices {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0 calc(var(--px) * 20);
  max-width: 100%;
}

.choices.count-2 .choice {
  flex: 0 1 auto;
  max-width: 45%;
}

/* Breathing room between the story sentence and its choices */
.story-text + .choices {
  margin-top: calc(var(--px) * 8);
}

.choice {
  font-family: var(--font);
  font-size: 52px;
  line-height: 1.1;
  white-space: normal;
  text-wrap: balance;
  background: none;
  border: none;
  color: var(--ink);
  padding: 0 calc(var(--px) * 1);
  cursor: pointer;
}

/* Hover only counts on devices with a real pointer. Phones fake a hover on
   tap and keep it, so the choice in the same spot on the next page would
   already look picked; there the colour shows only while the finger is down. */
@media (hover: hover) {
  .choice:hover {
    color: var(--hover);
  }
}

.choice:active,
.choice.picked {
  color: var(--hover);
}

.choice:focus-visible {
  color: var(--hover);
  outline: 1px dotted var(--hover);
}

/* Choice colours */
.choice[data-color="cyan"] { --hover: var(--cyan); }
.choice[data-color="magenta"] { --hover: var(--magenta); }
.choice[data-color="red"] { --hover: var(--red); }
.choice[data-color="yellow"] { --hover: var(--yellow); }
.choice[data-color="pale"] { --hover: var(--pale); }
.choice[data-color="white"] { --hover: var(--white); }
.choice[data-color="lavender"] { --hover: var(--lavender); }
.choice[data-color="green"] { --hover: var(--green); }

/* "button-text" pages: the line of story is itself the button */
.choice.choice-text-style {
  white-space: pre-line;
  font-size: 60px;
  line-height: 1.15;
  max-width: 100%;
}

.choice.italic {
  font-style: italic;
}

/* Fade-in choices (purple outline on the map): each letter steps from
   invisible to visible, one after another, left to right */
.fade-letter {
  opacity: 0;
  animation: fade-letter 0.4s steps(4, end) forwards;
}

@keyframes fade-letter {
  to { opacity: 1; }
}

/* Picture used as the button (button-text page with an image) */
.choice-image {
  display: block;
  width: min(640px, 80vw);
}

/* EGA pictures (png) keep hard square pixels when shown at 2x */
.choice-image[src$=".png"] {
  image-rendering: pixelated;
}

/* Link pages: a gray box that opens the link (music video) */
.choice.link-card {
  display: inline-block;
  text-decoration: none;
  background: var(--white);
  color: var(--night);
  padding: calc(var(--px) * 12) calc(var(--px) * 24);
  outline: 1px dashed var(--dusk);
  outline-offset: calc(var(--px) * 2);
}

@media (hover: hover) {
  .choice.link-card:hover {
    background: var(--dusk);
    color: var(--white);
  }
}

.choice.link-card:active,
.choice.link-card:focus-visible {
  background: var(--dusk);
  color: var(--white);
}

/* Music video: embedded YouTube player in a light gray pixel frame */
.video-box {
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  padding: calc(var(--px) * 2);
  background: var(--stone);
}

.video-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--night);
}

/* Death screen: tombstone above "You died.", which respawns when clicked */
.tombstone {
  width: calc(var(--px) * 32);
  line-height: 0;
  margin-bottom: calc(var(--px) * 4);
}

.tombstone .pixels {
  width: 100%;
}

/* "You died." is red, and turns white on hover */
.type-death .choice {
  color: var(--red);
  --hover: var(--white);
}

/* Animations: stepped, never smooth */
@keyframes scan-in {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .screen.enter,
  .fade-letter {
    animation: none !important;
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 768px) {
  :root {
    --px: 2px;
  }

  .stage {
    padding: calc(var(--px) * 40) 16px;
  }

  .story-text {
    font-size: 32px;
  }

  h1.story-text,
  .title-screen .story-text,
  .choice.choice-text-style {
    font-size: 40px;
  }

  /* On phones, let text flow instead of using the desktop line breaks */
  .story-text,
  .choice.choice-text-style {
    white-space: normal;
  }

  .choices {
    gap: 0 calc(var(--px) * 24);
  }

  .story-text + .choices {
    margin-top: calc(var(--px) * 18);
  }

  .choice {
    font-size: 26px;
  }
}

/* Phone on its side: plenty of width but very little height, so the
   corners sit at the far edges and everything is smaller and tighter */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --px: 2px;
  }

  .stage {
    /* sides clear the corner flourishes (54 art-pixels wide) */
    padding: 12px calc(var(--px) * 58);
  }

  .story-text {
    font-size: 28px;
    white-space: normal;
  }

  h1.story-text,
  .title-screen .story-text,
  .choice.choice-text-style {
    font-size: 34px;
    white-space: normal;
  }

  .story-text + .choices {
    margin-top: calc(var(--px) * 6);
  }

  .choices {
    gap: 0 calc(var(--px) * 16);
  }

  .choice {
    font-size: 24px;
  }

  .tombstone {
    width: calc(var(--px) * 24);
  }

  /* pictures and the video fit the short screen height */
  .choice-image {
    width: min(640px, 80vw, calc((100vh - 24px) * 4 / 3));
  }

  .video-box {
    width: min(960px, 100%, calc((100vh - 24px) * 16 / 9));
  }
}