/* Read at arm's length, in direct sun, on a 4G connection. White ground is
   the brightest thing a phone can do, so contrast is maximal against black. */

/* Display face, title only: subset to the glyphs of GAME_TITLE (10 KB, not
   132 KB). If the title text changes, run tools/subset_font.py. */
@font-face {
  font-family: "Qindret";
  src: url("fonts/qindret-title.otf") format("opentype");
  font-display: swap;           /* title shows in fallback rather than nothing */
}

:root { --ink: #101010; --paper: #fff; --rule: #101010; }

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 1.25rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.game-title {
  margin: 1.5rem auto .25rem;
  max-width: 34rem;
  padding: 0 1.25rem;
  text-align: center;
  font-family: "Qindret", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 3.25rem);
  line-height: 1.05;
  text-wrap: balance;
}

main { max-width: 34rem; margin: 0 auto; padding: .5rem 1.25rem 4rem; }

.step {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-bottom: 3px solid var(--rule);
  padding-bottom: .4rem;
}

img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--rule);
}

.clue { margin: 1.25rem 0 0; font-size: 1.5rem; line-height: 1.35; white-space: pre-line; }

.preview {
  margin: 0 0 1rem;
  padding: .5rem .75rem;
  border: 3px dashed var(--rule);
  font-size: .95rem;
}

@media (prefers-color-scheme: dark) {
  /* night-time play: invert rather than dim, keep the contrast ratio */
  :root { --ink: #f5f5f5; --paper: #000; --rule: #f5f5f5; }
}