/*
 * The site's one stylesheet: every colour is a custom property here, defined
 * for dark (the fleet's default) and redefined for a light preference. The
 * game's canvas reads its colours from the `--w-*` ones (client/palette.ts
 * names them), so this file is the one place a colour is written down. The
 * game's own colours are the toy's the operator played
 * (docs/spec/docs/toys/levels-1-2.html), the same in light and dark: a sunlit
 * prairie is not a theme.
 */
:root {
  color-scheme: dark light;
  --ground: #15110d;
  --text: #f4ecd8;
  --muted: #c8c0a8;
  --link: #ffe070;
  --edge: #6a645c;
  --w-backdrop: #15110d; /* the letterbox and the page under the game */
  --w-hat: #4a3421;
  --w-skin: #e8b48c;
  --w-shirt: #3f5f85; /* the rider's shirt */
  --w-horse: #8c5a2e;
  --w-mane: #3d2616;
  --w-hoof: #2a1a10;
  --w-eye: #1a1008;
  --w-antler: #6a4a2a;
  --w-deer: #a67848; /* the deer, and the meat */
  --w-tail: #f0e8d8;
  --w-dog: #b07c40;
  --w-dog-dark: #5a3a1c;
  --w-pine: #2f5a2a;
  --w-pine-shade: #24461f;
  --w-bark: #5a3a22;
  --w-cotton: #7a9a3c; /* a cottonwood's crown */
  --w-cotton-shade: #587a2a;
  --w-trunk: #6a4a2c;
  --w-rock: #9a948a;
  --w-rock-shade: #6a645c;
  --w-sage: #7a8a5a;
  --w-canvas-cover: #e8e0cc; /* a wagon's cover */
  --w-wagon-bed: #7a4a24;
  --w-wheel: #3a2a1a;
  --w-skin-1: #e0b088;
  --w-coat-1: #6a4a6a;
  --w-hair-2: #2a2a2a;
  --w-skin-2: #d8a878;
  --w-coat-2: #8a4a3a;
  --w-hair-3: #7a5a2a;
  --w-skin-3: #e8c098;
  --w-coat-3: #4a6a5a;
  --w-skin-4: #d0a070;
  --w-coat-4: #8a7a3a;
  --w-meat-red: #8a2a22;
  --w-flame: #ffe070;
  --w-flame-mid: #ff9a30;
  --w-flame-low: #d04a20;
  --w-pot: #4a3a2a;
  --w-pot-dark: #1e1a18;
  --w-tent-cloth: #ddd4bc;
  --w-thatch: #8a6a3a;
  --w-log-light: #7a5232;
  --w-log-end: #d8b080; /* a log's cut end, and wood chips */
  --w-axe-head: #d8d8e0;
  --w-axe-handle: #a0703a;
  --w-outline: #1a1410; /* the dark edge under words and the axe */
  --w-gold: #ffe070; /* words that teach, and good news */
  --w-cream: #f4ecd8; /* words that only tell */
  --w-white: #ffffff;
  --w-muted: #c8c0a8; /* quieter words */
  --w-pick-word: #f0d0a0; /* a load picked up */
  --w-hidden-word: #c8e0a0; /* hidden from the deer */
  --w-ring-grey: #8a8478; /* the ring when cover is in the way */
  --w-dust: #c8b890;
  --w-gun-smoke: #c8c0b0;
  --w-blood: #8a1a1a;
  --w-leaf-hit: #4a6a2a;
  --w-stone-hit: #c0b8a8;
  --w-muzzle: #ffe890;
  --w-bullet: #fff8d0;
  --w-glint: #c8dceb; /* light on the water */
  --w-grass-1: #6e8c3c;
  --w-grass-2: #6b893a;
  --w-grass-3: #718f3e;
  --w-dry-1: #a08a4a;
  --w-dry-2: #9d8748;
  --w-dry-3: #a38d4c;
  --w-water-1: #3a6080;
  --w-water-2: #365c7c;
  --w-water-3: #3e6686;
  --w-water-high: #466e8c;
  --w-sand: #b09c6e;
  --w-sand-dark: #96825a;
  --w-outside: #78643c;
  --w-tuft: #506e28;
  --w-tuft-dry: #826e3c;
  --w-plate: rgba(20, 16, 12, 0.78); /* under a caption */
  --w-shade: rgba(20, 14, 10, 0.55); /* over the world on the title */
  --w-panel: rgba(20, 14, 10, 0.8); /* the title's plate */
  --w-card: rgba(8, 6, 20, 0.82); /* the level card */
  --w-marker-plate: rgba(20, 16, 12, 0.55); /* under an edge marker */
  --w-slot: rgba(20, 16, 12, 0.45); /* an empty slot */
  --w-slot-edge: rgba(244, 236, 216, 0.5);
  --w-shadow: rgba(30, 25, 15, 0.25); /* under a rider, deer or dog */
  --w-smoke: rgba(200, 196, 188, 0.55);
  --w-rack-smoke: rgba(200, 196, 188, 0.45);
  --w-water-edge: rgba(220, 230, 240, 0.5);
  --w-dirt: rgba(60, 50, 40, 0.35);
  --w-pointer-dot: rgba(255, 255, 255, 0.5);
  --w-trail: rgba(255, 240, 200, 0.4); /* behind a bullet */
}
@media (prefers-color-scheme: light) {
  :root {
    --ground: #f6f1e6;
    --text: #1a1410;
    --muted: #4a3a2a;
    --link: #7a4a24;
    --edge: #9a948a;
  }
}
html {
  font-size: 100%;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 1rem/1.5 system-ui, sans-serif;
}
a {
  color: var(--link);
}
.page {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}
/* The game page is the game: the canvas fills the window at 16:9, scaled by
   whole pixels where it can (client/mount.ts sets its size), letterboxed on
   the backdrop when the window is another shape. */
.play {
  position: fixed;
  inset: 0;
  background: var(--w-backdrop);
}
.game {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--w-backdrop);
}
.game-canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: none;
  background: var(--w-backdrop);
}
/* The caption the canvas shows, again as text for a screen reader. */
.game-words {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: 0;
}
/* The pause screen sits on a dark plate over the game, whatever the page's theme. */
.menu {
  position: absolute;
  inset: 10% 15%;
  overflow: auto;
  padding: 1.5rem;
  background: var(--w-backdrop);
  color: var(--w-cream);
  border: 1px solid var(--w-rock-shade);
}
.menu a {
  color: var(--w-gold);
}
.menu .storage-notice,
.menu .stamp {
  color: var(--w-muted);
}
.menu-links a {
  margin-right: 1rem;
}
.game-canvas:focus-visible {
  outline: none;
}

.storage-notice,
.stamp,
.dated {
  color: var(--muted);
  font-size: 0.9rem;
}
.keep input {
  font: inherit;
  padding: 0.4rem;
}
.site-footer {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem;
}
.site-footer nav a {
  margin-right: 1rem;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}