/* Colours come from palette.css, which is generated from the game's palette.
   The typefaces are the game's own: Cinzel for headings, Inter for reading. */

@font-face {
  font-family: "Cinzel";
  src: url("fonts/cinzel.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

:root {
  /* One painted pixel of the page. Edges, corners and marks are built from it, square and unsmoothed. */
  --px: 3px;
  /* A box with one pixel taken out of each corner. */
  --notched: polygon(
    0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)));
  /* The four-pointed spark from the logo, five pixels across. */
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v2h2v1h-2v2h-1v-2h-2v-1h2z'/%3E%3C/svg%3E");
  /* A checker of single pixels: the page's ground half laid over whatever is under it. */
  --dither: repeating-conic-gradient(var(--ground) 0 25%, transparent 0 50%) 0 0 / calc(var(--px) * 2) calc(var(--px) * 2);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 1.0625rem/1.65 "Inter", system-ui, sans-serif;
}

main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

p { max-width: 36em; margin: 0 0 1em; }

h1 { margin: 0; }

h2 {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.6rem, 4.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin: 0 0 1em;
}

h2::before {
  content: "";
  flex: none;
  width: calc(var(--px) * 5);
  height: calc(var(--px) * 5);
  background: var(--glow);
  -webkit-mask: var(--spark) center / contain no-repeat;
  mask: var(--spark) center / contain no-repeat;
}

:focus-visible { outline: var(--px) solid var(--glow-edge); outline-offset: var(--px); }

/* The top: the logo, one line, the sign-up, and the moonrain coming down behind them. */

.intro {
  position: relative;
  min-height: min(100svh, 54rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 0 4rem;
}

#rain {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}

.intro > :not(#rain) { position: relative; }

.intro h1 img,
.intro .logo {
  display: block;
  width: min(24rem, 78vw);
  height: auto;
}

.pitch { font-size: clamp(1.15rem, 2.8vw, 1.35rem); line-height: 1.45; margin: 1.75rem 0 0; max-width: 24em; }

/* The small pages: signed up, and not found. */
h1.pitch { font-weight: 400; }
.note { color: var(--text-dim); margin: 1rem 0 0; max-width: 26em; }

.signup { margin-top: 2.25rem; width: min(30rem, 100%); }

.signup label { display: block; color: var(--text-dim); margin-bottom: 0.7rem; }

.signup-row { display: flex; gap: var(--px); }

.signup input,
.signup button {
  font: inherit;
  border-radius: 0;
  padding: 0.7rem 1rem;
  border: var(--px) solid var(--line);
  clip-path: var(--notched);
}

.signup input {
  flex: 1;
  min-width: 0;
  background: var(--ground);
  color: var(--text);
}

.signup input::placeholder { color: var(--text-dim); opacity: 0.7; }

.signup button {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--glow);
  color: var(--on-glow);
  border-color: var(--glow);
  /* A lit edge above and a shaded one below, a pixel deep. */
  box-shadow: inset 0 var(--px) var(--glow-edge), inset 0 calc(var(--px) * -1) var(--glow-deep);
  cursor: pointer;
  white-space: nowrap;
}

.signup button:hover { background: var(--glow-edge); border-color: var(--glow-edge); }
.signup button:active { box-shadow: inset 0 var(--px) var(--glow-deep); }

/* The corners are cut, so an outline would be cut with them: focus is shown on the edge itself. */
.signup input:focus-visible { outline: 0; border-color: var(--glow); }
.signup button:focus-visible { outline: 0; border-color: var(--on-glow); }

/* Sections */

.made, .world, .dev, .shots { padding: clamp(3rem, 9vw, 6rem) 0; }

/* Made so far: one of the game's models on the page, and the list to pick from. */

.made-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

.stage { margin: 0; }

/* The stand the model is shown on: a raised panel whose edges break up into single pixels. */
.stage-panel {
  position: relative;
  background: var(--raised);
  clip-path: var(--notched);
}

.stage-panel::before,
.stage-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage-panel::before { background: var(--dither); -webkit-mask: linear-gradient(#000, transparent 16%, transparent 84%, #000); mask: linear-gradient(#000, transparent 16%, transparent 84%, #000); }
.stage-panel::after { border: var(--px) solid var(--line); clip-path: var(--notched); }

.stage canvas,
.stage-panel > img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  cursor: grab;
  touch-action: pan-y;
}

.stage canvas:active { cursor: grabbing; }
.stage canvas:focus-visible { outline-offset: calc(var(--px) * -3); }
.stage-panel > img { cursor: default; }

.stage figcaption { color: var(--text-dim); margin-top: 0.9rem; }
.stage q { color: var(--text); }

.made-side p { color: var(--text-dim); }

.models { list-style: none; padding: 0; margin: 1.5rem 0 0; }

.models button {
  display: flex;
  align-items: center;
  gap: 0.7em;
  width: 100%;
  padding: 0.3em 0;
  font: 500 1.3rem/1.3 "Cinzel", Georgia, serif;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--text-dim);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

/* The mark beside each name: a dull pixel, or the glowing spark for the one on show. */
.models button::before {
  content: "";
  flex: none;
  width: calc(var(--px) * 5);
  height: calc(var(--px) * 5);
  background: var(--line);
  clip-path: inset(calc(var(--px) * 2));
}

.models button:hover { color: var(--text); }
.models button:hover::before { background: var(--text-dim); }

.models button[aria-pressed="true"] { color: var(--text); }

.models button[aria-pressed="true"]::before {
  background: var(--glow);
  clip-path: none;
  -webkit-mask: var(--spark) center / contain no-repeat;
  mask: var(--spark) center / contain no-repeat;
}

/* How the art is made */

.how { margin-top: clamp(3rem, 8vw, 5rem); }

.stages {
  list-style: none;
  counter-reset: stage;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: 0;
  margin: 2rem 0 0;
}

.stages li { counter-increment: stage; }

.stages img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--raised);
  clip-path: var(--notched);
}

.stages p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0.7rem 0 0;
}

.stages p::before {
  content: counter(stage);
  font: 700 1.1rem/1 "Cinzel", Georgia, serif;
  color: var(--glow);
  margin-right: 0.5em;
}

/* Game pictures */

.shots img { display: block; width: 100%; height: auto; margin-top: var(--px); clip-path: var(--notched); }

.world p:first-of-type { font-size: clamp(1.15rem, 2.8vw, 1.35rem); line-height: 1.45; color: var(--text); }
.world p, .dev p { color: var(--text-dim); }

footer {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem) 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

/* A broken line of pixels above the links. */
footer::before {
  content: "";
  flex: 0 0 100%;
  height: var(--px);
  margin-bottom: 1.5rem;
  background: repeating-linear-gradient(to right, var(--line) 0 calc(var(--px) * 3), transparent 0 calc(var(--px) * 4));
}

footer a, .note a { color: var(--text); text-underline-offset: 0.25em; text-decoration-color: var(--line); }
footer a:hover, .note a:hover { text-decoration-color: var(--glow); }

@media (max-width: 46rem) {
  .made-grid { grid-template-columns: 1fr; }
  .models { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: 1rem; }
  .models button { width: auto; font-size: 1.15rem; }
  .stages { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
  .signup-row { flex-direction: column; }
}