/* the font used */
@font-face {
  font-family: "Press Start 2P";
  src: url("PressStart2P-Regular.ttf") format("truetype");
  font-display: block;
}

:root {
  --bg: #c8cfc2; /* background colour of the canvas */
  --bg-alt: #bcc4b6; /* margin and bottom bar */
  --scan: #dde2d6; /* inside the scan bar */
  --rule: #8f9a8a; /* line numbers and quiet labels */
  --ink: #1b1f1a; /* names, and the top bar */
  --ink-soft: #5d6559; /* ordinary words */
  --stamp: #c03a2b; /* red: mistakes and bar edges */
  --pen: #3a63c0; /* blue: headings */
  --bar: #0f120e; /* the redaction bar */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161a;
    --bg-alt: #1a2026;
    --scan: #232c33;
    --rule: #4f5b63;
    --ink: #d3dbd2;
    --ink-soft: #8a958f;
    --stamp: #e05a4a;
    --pen: #6e9be8;
    --bar: #4a555d;
  }
}

/* --- The page: no margins, no scrolling, the game fills the window --- */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Press Start 2P", Menlo, Consolas, monospace;
  user-select: none;
}

/* --- The canvas stretches over the whole window --- */
#game {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  image-rendering: pixelated;
  touch-action: none;
}

/* --- The start screen --- */
#cover {
  position: fixed;              /* on top of the canvas, covering the window */
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.4rem, 2.5vh, 1rem);
  padding: clamp(.75rem, 4vh, 1.5rem);
  overflow-y: auto;             /* scroll if it really doesn't fit */
  text-align: center;
  background: var(--bg);
}
#cover > :first-child { margin-top: auto; }
#cover > :last-child  { margin-bottom: auto; }
#cover.gone { display: none; }  /* game.js adds the class "gone" to hide it */

#cover h1 {
  margin: 0;
  font-size: clamp(1.2rem, min(7vw, 9vh), 2.8rem);
  text-shadow: 4px 4px 0 var(--stamp);
}
#cover p {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(.5rem, min(2.4vw, 3vh), .85rem);
  line-height: 2;
  color: var(--ink-soft);
}
#cover .order {
  font-size: clamp(.8rem, min(4.5vw, 5.5vh), 1.4rem);
  color: var(--stamp);
  border-bottom: 3px solid var(--stamp);
}
#cover .parody {
  max-width: 52ch;
  margin-top: .5rem;
  padding-top: clamp(.5rem, 2vh, 1rem);
  border-top: 2px dashed var(--rule);
  font-size: clamp(.4rem, min(1.6vw, 2.2vh), .55rem);
  line-height: 1.9;
  color: var(--rule);
}
#begin {
  font: inherit;
  font-size: clamp(.6rem, min(2.8vw, 3.5vh), .9rem);
  padding: clamp(.5rem, 2vh, .9rem) 2rem;
  border: 0;
  color: var(--bg);
  background: var(--ink);
  box-shadow: 4px 4px 0 var(--rule);
  cursor: pointer;
}
#begin:hover  { background: var(--stamp); }
#begin:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--rule); }