/* The public pages at /, /privacy, /legal, /support and the 404.
 *
 * Tokens are the desert theme from client/src/styles.css, copied rather than
 * imported: these pages are served from site/ by the same container but are
 * not part of the Angular build, and a landing that drifts in colour from the
 * app it introduces is worse than two files that say the same thing. Keep
 * them in step by hand if the theme changes.
 *
 * No inline styles anywhere in these pages: the container sends
 * Content-Security-Policy with style-src 'self' and no unsafe-inline, so a
 * <style> block or a style="" attribute is dropped by the browser and the
 * page renders unstyled. Same for the font -- font-src 'self' -- which is why
 * it is served from fonts/ here instead of from a CDN.
 */

@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/pressstart2p-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}

:root {
  --bg: #4a4a52;
  --surface: #34343a;
  --surface-2: #1a1a1e;
  --text: #f3e6c0;
  --muted: #d2c29a;
  --accent: #e8c020;
  --accent-text: #1a1a1e;
  --border: 3px solid #8e8e98;
  --radius: 0px;
  --space: 16px;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-title: "Press Start 2P", ui-monospace, monospace;

  /* the eight player colours, straight from the app */
  --p1: #ff5a36;
  --p2: #3d8bff;
  --p3: #ffd23f;
  --p4: #2ee59d;
  --p5: #b36bff;
  --p6: #ff7ac6;
  --p7: #20d4e8;
  --p8: #7a8b99;

  /* desert terrain, and the sandy ground the map sits on */
  --t-grass: #d8a860;
  --t-forest: #e4bc78;
  --t-rock: #8a6a48;
  --t-water: #b85a2a;
  --map-bg: #9c7440;
  --map-gap: 1px;
  --paint-opacity: 0.75;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: calc(var(--space) * 2) var(--space);
}

.prose {
  max-width: 44rem;
}

h1,
h2,
h3 {
  font-family: var(--font-title);
  line-height: 1.4;
  font-weight: normal;
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 var(--space);
}

h2 {
  font-size: 1rem;
  margin: calc(var(--space) * 2.5) 0 var(--space);
}

h3 {
  font-size: 0.8rem;
  margin: calc(var(--space) * 1.5) 0 calc(var(--space) / 2);
}

p {
  margin: 0 0 var(--space);
}

a {
  color: var(--accent);
}

a:focus-visible,
.button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.lede {
  font-size: 1.15rem;
  color: var(--text);
  max-width: 34rem;
}

.muted {
  color: var(--muted);
}

small,
.small {
  font-size: 0.9rem;
  color: var(--muted);
}

/* --- header and footer ------------------------------------------------- */

.site-header,
.site-footer {
  border-bottom: var(--border);
}

.site-footer {
  border-bottom: 0;
  border-top: var(--border);
  margin-top: calc(var(--space) * 3);
}

.site-header .wrap,
.site-footer .wrap {
  padding-top: var(--space);
  padding-bottom: var(--space);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  align-items: baseline;
  justify-content: space-between;
}

.wordmark {
  font-family: var(--font-title);
  font-size: 0.75rem;
  color: var(--text);
  text-decoration: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  font-size: 0.9rem;
}

/* --- hero -------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: calc(var(--space) * 2);
  align-items: center;
}

@media (max-width: 46rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  align-items: center;
  margin-top: calc(var(--space) * 1.5);
}

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
  font-family: var(--font-title);
  font-size: 0.7rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
}

.button:hover {
  filter: brightness(1.1);
}

/* Google's badge PNG is 646x250 with a 41px transparent margin all round.
 * At this height the black shape is as tall as .button, and the negative
 * margin takes the transparent border out of the layout so the badge lines up
 * with the button instead of floating inside an invisible box. */
.store-badge img {
  display: block;
  height: 4.25rem;
  width: auto;
  margin: calc(-4.25rem * 41 / 250);
}

/* The two store badges wrap as one group, so neither is left alone on a line. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  align-items: center;
}

/* Apple's badge SVG has no transparent margin, so it takes the height of the
 * Play badge's black shape (250 - 2 x 41 of its 250 pixels) and no margin. */
.store-badge-apple img {
  height: calc(4.25rem * 168 / 250);
  margin: 0;
}

/* --- the map ----------------------------------------------------------- */

/* Twelve columns and eight rows, both stated. The rows matter: the cells are
 * empty elements with no height of their own, so without an explicit row
 * track they are only as tall as the browser chooses to stretch them. Chrome
 * stretches them to fill the aspect-ratio box; Safari leaves them at zero and
 * all you see is the sandy background -- a brown rectangle where the map
 * should be. Reported from a browser that did exactly that. */
.map {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: var(--map-gap);
  background: var(--map-bg);
  padding: var(--map-gap);
  border: var(--border);
  aspect-ratio: 12 / 8;
}

/* Terrain, with the desert theme's own textures rather than flat squares --
 * the same four rules the application draws, so the example on this page is
 * the map people will actually see and not an approximation of it. */
.map i {
  display: block;
  position: relative;
  background-color: var(--t-grass);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 6px);
}

.map .forest {
  background-color: var(--t-forest);
  background-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.14) 0 3px, transparent 3px 8px);
}

.map .rock {
  background-color: var(--t-rock);
  background-image: none;
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25), inset -2px -2px 0 0 rgba(0, 0, 0, 0.35);
}

.map .water {
  background-color: var(--t-water);
  background-image: radial-gradient(#e08040 20%, transparent 22%);
  background-size: 6px 6px;
}

/* A painted cell keeps its terrain and takes the player's colour over it at
 * --paint-opacity, which is how the desert theme paints: the ground stays
 * visible through the claim. An opaque fill would be the arcade theme's
 * behaviour, not this one. */
.map .a::after,
.map .b::after,
.map .c::after,
.map .d::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--paint-opacity);
}

.map .a::after {
  background: var(--p1);
}

.map .b::after {
  background: var(--p4);
}

.map .c::after {
  background: var(--p3);
}

.map .d::after {
  background: var(--p2);
}

/* --- the selling blocks ------------------------------------------------- */

.pitch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space);
  margin: calc(var(--space) * 3) 0 0;
  padding: 0;
  list-style: none;
}

.pitch li {
  border-top: var(--border);
  padding-top: var(--space);
}

.pitch b {
  display: block;
  font-family: var(--font-title);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.pitch span {
  color: var(--muted);
}

/* Its own line under all three columns, not a fourth sentence in the first
 * one -- which is how it reads without the separation. */
.more {
  margin-top: calc(var(--space) * 2.5);
  padding-top: var(--space);
  border-top: var(--border);
}

/* The characters, at the size the game draws them in a room list. */
.cast {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space) * 1.25);
  align-items: flex-end;
  margin-bottom: calc(var(--space) * 1.5);
}

.cast .sprite {
  --px: 5px;
}

/* --- steps ------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space);
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 1.25);
}

.steps li h3 {
  margin-top: 0;
  color: var(--accent);
}

.steps li p:last-child {
  margin-bottom: 0;
}

/* --- legal pages ------------------------------------------------------- */

.prose ul {
  margin: 0 0 var(--space);
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space);
  font-size: 0.95rem;
}

.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: var(--border);
}

.prose th {
  color: var(--muted);
  font-weight: normal;
}

/* --- 404 --------------------------------------------------------------- */

.notfound {
  text-align: center;
  padding-top: calc(var(--space) * 4);
}

.notfound .map {
  max-width: 28rem;
  margin: calc(var(--space) * 2) auto 0;
}

/* --- the eight characters ------------------------------------------- */

/* Pixel art drawn with box-shadow, lifted verbatim from client/src/styles.css
 * by script rather than retyped -- each rule is one long line of coordinates
 * and a hand-copied one would differ from the game in ways nobody would
 * spot. --px is the pixel size, --c the player's colour. */

.c1 { --c: var(--p1); } .c2 { --c: var(--p2); } .c3 { --c: var(--p3); } .c4 { --c: var(--p4); } .c5 { --c: var(--p5); } .c6 { --c: var(--p6); } .c7 { --c: var(--p7); } .c8 { --c: var(--p8); }

.sprite {
  --px: 3px;
  display: inline-block;
  position: relative;
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 8);
  flex: none;
}

.sprite::before {
  content: "";
  position: absolute;
  left: calc(var(--px) * -1);
  top: calc(var(--px) * -1);
  width: var(--px);
  height: var(--px);
}

.sprite-cactus::before { box-shadow: calc(var(--px) * 4) calc(var(--px) * 1) var(--c), calc(var(--px) * 5) calc(var(--px) * 1) var(--c), calc(var(--px) * 4) calc(var(--px) * 2) var(--c), calc(var(--px) * 5) calc(var(--px) * 2) var(--c), calc(var(--px) * 7) calc(var(--px) * 2) var(--c), calc(var(--px) * 1) calc(var(--px) * 3) var(--c), calc(var(--px) * 4) calc(var(--px) * 3) var(--c), calc(var(--px) * 5) calc(var(--px) * 3) var(--c), calc(var(--px) * 7) calc(var(--px) * 3) var(--c), calc(var(--px) * 1) calc(var(--px) * 4) var(--c), calc(var(--px) * 4) calc(var(--px) * 4) var(--c), calc(var(--px) * 5) calc(var(--px) * 4) var(--c), calc(var(--px) * 6) calc(var(--px) * 4) var(--c), calc(var(--px) * 7) calc(var(--px) * 4) var(--c), calc(var(--px) * 1) calc(var(--px) * 5) var(--c), calc(var(--px) * 2) calc(var(--px) * 5) var(--c), calc(var(--px) * 3) calc(var(--px) * 5) var(--c), calc(var(--px) * 4) calc(var(--px) * 5) var(--c), calc(var(--px) * 5) calc(var(--px) * 5) var(--c), calc(var(--px) * 4) calc(var(--px) * 6) var(--c), calc(var(--px) * 5) calc(var(--px) * 6) var(--c), calc(var(--px) * 4) calc(var(--px) * 7) var(--c), calc(var(--px) * 5) calc(var(--px) * 7) var(--c), calc(var(--px) * 2) calc(var(--px) * 8) #1b1b22, calc(var(--px) * 3) calc(var(--px) * 8) #1b1b22, calc(var(--px) * 4) calc(var(--px) * 8) #1b1b22, calc(var(--px) * 5) calc(var(--px) * 8) #1b1b22, calc(var(--px) * 6) calc(var(--px) * 8) #1b1b22, calc(var(--px) * 7) calc(var(--px) * 8) #1b1b22; }
.sprite-comet::before { box-shadow: calc(var(--px) * 6) calc(var(--px) * 1) var(--c), calc(var(--px) * 7) calc(var(--px) * 1) var(--c), calc(var(--px) * 5) calc(var(--px) * 2) var(--c), calc(var(--px) * 6) calc(var(--px) * 2) #ffffff, calc(var(--px) * 7) calc(var(--px) * 2) #ffffff, calc(var(--px) * 8) calc(var(--px) * 2) var(--c), calc(var(--px) * 4) calc(var(--px) * 3) var(--c), calc(var(--px) * 5) calc(var(--px) * 3) #ffffff, calc(var(--px) * 6) calc(var(--px) * 3) #1b1b22, calc(var(--px) * 7) calc(var(--px) * 3) #ffffff, calc(var(--px) * 8) calc(var(--px) * 3) var(--c), calc(var(--px) * 3) calc(var(--px) * 4) var(--c), calc(var(--px) * 4) calc(var(--px) * 4) var(--c), calc(var(--px) * 5) calc(var(--px) * 4) #ffffff, calc(var(--px) * 6) calc(var(--px) * 4) #ffffff, calc(var(--px) * 7) calc(var(--px) * 4) var(--c), calc(var(--px) * 2) calc(var(--px) * 5) var(--c), calc(var(--px) * 3) calc(var(--px) * 5) var(--c), calc(var(--px) * 5) calc(var(--px) * 5) var(--c), calc(var(--px) * 6) calc(var(--px) * 5) var(--c), calc(var(--px) * 1) calc(var(--px) * 6) var(--c), calc(var(--px) * 2) calc(var(--px) * 6) var(--c), calc(var(--px) * 1) calc(var(--px) * 7) var(--c); }
.sprite-ghost::before { box-shadow: calc(var(--px) * 3) calc(var(--px) * 1) var(--c), calc(var(--px) * 4) calc(var(--px) * 1) var(--c), calc(var(--px) * 5) calc(var(--px) * 1) var(--c), calc(var(--px) * 6) calc(var(--px) * 1) var(--c), calc(var(--px) * 2) calc(var(--px) * 2) var(--c), calc(var(--px) * 3) calc(var(--px) * 2) var(--c), calc(var(--px) * 4) calc(var(--px) * 2) var(--c), calc(var(--px) * 5) calc(var(--px) * 2) var(--c), calc(var(--px) * 6) calc(var(--px) * 2) var(--c), calc(var(--px) * 7) calc(var(--px) * 2) var(--c), calc(var(--px) * 1) calc(var(--px) * 3) var(--c), calc(var(--px) * 2) calc(var(--px) * 3) #ffffff, calc(var(--px) * 3) calc(var(--px) * 3) #1b1b22, calc(var(--px) * 4) calc(var(--px) * 3) var(--c), calc(var(--px) * 5) calc(var(--px) * 3) var(--c), calc(var(--px) * 6) calc(var(--px) * 3) #ffffff, calc(var(--px) * 7) calc(var(--px) * 3) #1b1b22, calc(var(--px) * 8) calc(var(--px) * 3) var(--c), calc(var(--px) * 1) calc(var(--px) * 4) var(--c), calc(var(--px) * 2) calc(var(--px) * 4) var(--c), calc(var(--px) * 3) calc(var(--px) * 4) var(--c), calc(var(--px) * 4) calc(var(--px) * 4) var(--c), calc(var(--px) * 5) calc(var(--px) * 4) var(--c), calc(var(--px) * 6) calc(var(--px) * 4) var(--c), calc(var(--px) * 7) calc(var(--px) * 4) var(--c), calc(var(--px) * 8) calc(var(--px) * 4) var(--c), calc(var(--px) * 1) calc(var(--px) * 5) var(--c), calc(var(--px) * 2) calc(var(--px) * 5) var(--c), calc(var(--px) * 3) calc(var(--px) * 5) var(--c), calc(var(--px) * 4) calc(var(--px) * 5) var(--c), calc(var(--px) * 5) calc(var(--px) * 5) var(--c), calc(var(--px) * 6) calc(var(--px) * 5) var(--c), calc(var(--px) * 7) calc(var(--px) * 5) var(--c), calc(var(--px) * 8) calc(var(--px) * 5) var(--c), calc(var(--px) * 1) calc(var(--px) * 6) var(--c), calc(var(--px) * 2) calc(var(--px) * 6) var(--c), calc(var(--px) * 3) calc(var(--px) * 6) var(--c), calc(var(--px) * 4) calc(var(--px) * 6) var(--c), calc(var(--px) * 5) calc(var(--px) * 6) var(--c), calc(var(--px) * 6) calc(var(--px) * 6) var(--c), calc(var(--px) * 7) calc(var(--px) * 6) var(--c), calc(var(--px) * 8) calc(var(--px) * 6) var(--c), calc(var(--px) * 1) calc(var(--px) * 7) var(--c), calc(var(--px) * 2) calc(var(--px) * 7) var(--c), calc(var(--px) * 4) calc(var(--px) * 7) var(--c), calc(var(--px) * 5) calc(var(--px) * 7) var(--c), calc(var(--px) * 7) calc(var(--px) * 7) var(--c), calc(var(--px) * 8) calc(var(--px) * 7) var(--c), calc(var(--px) * 1) calc(var(--px) * 8) var(--c), calc(var(--px) * 5) calc(var(--px) * 8) var(--c), calc(var(--px) * 8) calc(var(--px) * 8) var(--c); }
.sprite-knight::before { box-shadow: calc(var(--px) * 3) calc(var(--px) * 1) #1b1b22, calc(var(--px) * 4) calc(var(--px) * 1) #1b1b22, calc(var(--px) * 5) calc(var(--px) * 1) #1b1b22, calc(var(--px) * 6) calc(var(--px) * 1) #1b1b22, calc(var(--px) * 2) calc(var(--px) * 2) #1b1b22, calc(var(--px) * 3) calc(var(--px) * 2) var(--c), calc(var(--px) * 4) calc(var(--px) * 2) var(--c), calc(var(--px) * 5) calc(var(--px) * 2) var(--c), calc(var(--px) * 6) calc(var(--px) * 2) var(--c), calc(var(--px) * 7) calc(var(--px) * 2) #1b1b22, calc(var(--px) * 2) calc(var(--px) * 3) #1b1b22, calc(var(--px) * 3) calc(var(--px) * 3) #ffffff, calc(var(--px) * 4) calc(var(--px) * 3) #1b1b22, calc(var(--px) * 5) calc(var(--px) * 3) #1b1b22, calc(var(--px) * 6) calc(var(--px) * 3) #ffffff, calc(var(--px) * 7) calc(var(--px) * 3) #1b1b22, calc(var(--px) * 2) calc(var(--px) * 4) #1b1b22, calc(var(--px) * 3) calc(var(--px) * 4) var(--c), calc(var(--px) * 4) calc(var(--px) * 4) var(--c), calc(var(--px) * 5) calc(var(--px) * 4) var(--c), calc(var(--px) * 6) calc(var(--px) * 4) var(--c), calc(var(--px) * 7) calc(var(--px) * 4) #1b1b22, calc(var(--px) * 3) calc(var(--px) * 5) #1b1b22, calc(var(--px) * 4) calc(var(--px) * 5) #1b1b22, calc(var(--px) * 5) calc(var(--px) * 5) #1b1b22, calc(var(--px) * 6) calc(var(--px) * 5) #1b1b22, calc(var(--px) * 2) calc(var(--px) * 6) var(--c), calc(var(--px) * 3) calc(var(--px) * 6) var(--c), calc(var(--px) * 4) calc(var(--px) * 6) var(--c), calc(var(--px) * 5) calc(var(--px) * 6) var(--c), calc(var(--px) * 6) calc(var(--px) * 6) var(--c), calc(var(--px) * 7) calc(var(--px) * 6) var(--c), calc(var(--px) * 1) calc(var(--px) * 7) var(--c), calc(var(--px) * 3) calc(var(--px) * 7) var(--c), calc(var(--px) * 4) calc(var(--px) * 7) var(--c), calc(var(--px) * 5) calc(var(--px) * 7) var(--c), calc(var(--px) * 6) calc(var(--px) * 7) var(--c), calc(var(--px) * 8) calc(var(--px) * 7) var(--c), calc(var(--px) * 3) calc(var(--px) * 8) var(--c), calc(var(--px) * 6) calc(var(--px) * 8) var(--c); }
.sprite-octopus::before { box-shadow: calc(var(--px) * 3) calc(var(--px) * 1) var(--c), calc(var(--px) * 4) calc(var(--px) * 1) var(--c), calc(var(--px) * 5) calc(var(--px) * 1) var(--c), calc(var(--px) * 6) calc(var(--px) * 1) var(--c), calc(var(--px) * 2) calc(var(--px) * 2) var(--c), calc(var(--px) * 3) calc(var(--px) * 2) var(--c), calc(var(--px) * 4) calc(var(--px) * 2) var(--c), calc(var(--px) * 5) calc(var(--px) * 2) var(--c), calc(var(--px) * 6) calc(var(--px) * 2) var(--c), calc(var(--px) * 7) calc(var(--px) * 2) var(--c), calc(var(--px) * 1) calc(var(--px) * 3) var(--c), calc(var(--px) * 2) calc(var(--px) * 3) #ffffff, calc(var(--px) * 3) calc(var(--px) * 3) #1b1b22, calc(var(--px) * 4) calc(var(--px) * 3) var(--c), calc(var(--px) * 5) calc(var(--px) * 3) var(--c), calc(var(--px) * 6) calc(var(--px) * 3) #ffffff, calc(var(--px) * 7) calc(var(--px) * 3) #1b1b22, calc(var(--px) * 8) calc(var(--px) * 3) var(--c), calc(var(--px) * 1) calc(var(--px) * 4) var(--c), calc(var(--px) * 2) calc(var(--px) * 4) var(--c), calc(var(--px) * 3) calc(var(--px) * 4) var(--c), calc(var(--px) * 4) calc(var(--px) * 4) var(--c), calc(var(--px) * 5) calc(var(--px) * 4) var(--c), calc(var(--px) * 6) calc(var(--px) * 4) var(--c), calc(var(--px) * 7) calc(var(--px) * 4) var(--c), calc(var(--px) * 8) calc(var(--px) * 4) var(--c), calc(var(--px) * 2) calc(var(--px) * 5) var(--c), calc(var(--px) * 3) calc(var(--px) * 5) var(--c), calc(var(--px) * 4) calc(var(--px) * 5) var(--c), calc(var(--px) * 5) calc(var(--px) * 5) var(--c), calc(var(--px) * 6) calc(var(--px) * 5) var(--c), calc(var(--px) * 7) calc(var(--px) * 5) var(--c), calc(var(--px) * 1) calc(var(--px) * 6) var(--c), calc(var(--px) * 3) calc(var(--px) * 6) var(--c), calc(var(--px) * 5) calc(var(--px) * 6) var(--c), calc(var(--px) * 7) calc(var(--px) * 6) var(--c), calc(var(--px) * 1) calc(var(--px) * 7) var(--c), calc(var(--px) * 3) calc(var(--px) * 7) var(--c), calc(var(--px) * 5) calc(var(--px) * 7) var(--c), calc(var(--px) * 7) calc(var(--px) * 7) var(--c), calc(var(--px) * 2) calc(var(--px) * 8) var(--c), calc(var(--px) * 4) calc(var(--px) * 8) var(--c), calc(var(--px) * 6) calc(var(--px) * 8) var(--c), calc(var(--px) * 8) calc(var(--px) * 8) var(--c); }
.sprite-pickle::before { box-shadow: calc(var(--px) * 4) calc(var(--px) * 1) var(--c), calc(var(--px) * 5) calc(var(--px) * 1) var(--c), calc(var(--px) * 3) calc(var(--px) * 2) var(--c), calc(var(--px) * 4) calc(var(--px) * 2) var(--c), calc(var(--px) * 5) calc(var(--px) * 2) var(--c), calc(var(--px) * 6) calc(var(--px) * 2) var(--c), calc(var(--px) * 3) calc(var(--px) * 3) #1b1b22, calc(var(--px) * 4) calc(var(--px) * 3) var(--c), calc(var(--px) * 5) calc(var(--px) * 3) var(--c), calc(var(--px) * 6) calc(var(--px) * 3) #1b1b22, calc(var(--px) * 3) calc(var(--px) * 4) var(--c), calc(var(--px) * 4) calc(var(--px) * 4) var(--c), calc(var(--px) * 5) calc(var(--px) * 4) var(--c), calc(var(--px) * 6) calc(var(--px) * 4) var(--c), calc(var(--px) * 3) calc(var(--px) * 5) var(--c), calc(var(--px) * 4) calc(var(--px) * 5) #ffffff, calc(var(--px) * 5) calc(var(--px) * 5) #ffffff, calc(var(--px) * 6) calc(var(--px) * 5) var(--c), calc(var(--px) * 3) calc(var(--px) * 6) var(--c), calc(var(--px) * 4) calc(var(--px) * 6) var(--c), calc(var(--px) * 5) calc(var(--px) * 6) var(--c), calc(var(--px) * 6) calc(var(--px) * 6) var(--c), calc(var(--px) * 3) calc(var(--px) * 7) var(--c), calc(var(--px) * 4) calc(var(--px) * 7) var(--c), calc(var(--px) * 5) calc(var(--px) * 7) var(--c), calc(var(--px) * 6) calc(var(--px) * 7) var(--c), calc(var(--px) * 4) calc(var(--px) * 8) var(--c), calc(var(--px) * 5) calc(var(--px) * 8) var(--c); }
.sprite-robot::before { box-shadow: calc(var(--px) * 3) calc(var(--px) * 1) var(--c), calc(var(--px) * 4) calc(var(--px) * 1) var(--c), calc(var(--px) * 5) calc(var(--px) * 1) var(--c), calc(var(--px) * 6) calc(var(--px) * 1) var(--c), calc(var(--px) * 2) calc(var(--px) * 2) var(--c), calc(var(--px) * 3) calc(var(--px) * 2) #1b1b22, calc(var(--px) * 4) calc(var(--px) * 2) var(--c), calc(var(--px) * 5) calc(var(--px) * 2) var(--c), calc(var(--px) * 6) calc(var(--px) * 2) #1b1b22, calc(var(--px) * 7) calc(var(--px) * 2) var(--c), calc(var(--px) * 2) calc(var(--px) * 3) var(--c), calc(var(--px) * 3) calc(var(--px) * 3) var(--c), calc(var(--px) * 4) calc(var(--px) * 3) var(--c), calc(var(--px) * 5) calc(var(--px) * 3) var(--c), calc(var(--px) * 6) calc(var(--px) * 3) var(--c), calc(var(--px) * 7) calc(var(--px) * 3) var(--c), calc(var(--px) * 3) calc(var(--px) * 4) var(--c), calc(var(--px) * 4) calc(var(--px) * 4) #ffffff, calc(var(--px) * 5) calc(var(--px) * 4) #ffffff, calc(var(--px) * 6) calc(var(--px) * 4) var(--c), calc(var(--px) * 2) calc(var(--px) * 5) var(--c), calc(var(--px) * 3) calc(var(--px) * 5) var(--c), calc(var(--px) * 4) calc(var(--px) * 5) var(--c), calc(var(--px) * 5) calc(var(--px) * 5) var(--c), calc(var(--px) * 6) calc(var(--px) * 5) var(--c), calc(var(--px) * 7) calc(var(--px) * 5) var(--c), calc(var(--px) * 1) calc(var(--px) * 6) var(--c), calc(var(--px) * 3) calc(var(--px) * 6) var(--c), calc(var(--px) * 4) calc(var(--px) * 6) var(--c), calc(var(--px) * 5) calc(var(--px) * 6) var(--c), calc(var(--px) * 6) calc(var(--px) * 6) var(--c), calc(var(--px) * 8) calc(var(--px) * 6) var(--c), calc(var(--px) * 3) calc(var(--px) * 7) var(--c), calc(var(--px) * 6) calc(var(--px) * 7) var(--c), calc(var(--px) * 3) calc(var(--px) * 8) var(--c), calc(var(--px) * 6) calc(var(--px) * 8) var(--c); }
.sprite-taco::before { box-shadow: calc(var(--px) * 3) calc(var(--px) * 2) var(--c), calc(var(--px) * 4) calc(var(--px) * 2) var(--c), calc(var(--px) * 5) calc(var(--px) * 2) var(--c), calc(var(--px) * 6) calc(var(--px) * 2) var(--c), calc(var(--px) * 2) calc(var(--px) * 3) var(--c), calc(var(--px) * 3) calc(var(--px) * 3) #ffffff, calc(var(--px) * 4) calc(var(--px) * 3) #ffffff, calc(var(--px) * 5) calc(var(--px) * 3) #ffffff, calc(var(--px) * 6) calc(var(--px) * 3) #ffffff, calc(var(--px) * 7) calc(var(--px) * 3) var(--c), calc(var(--px) * 1) calc(var(--px) * 4) var(--c), calc(var(--px) * 2) calc(var(--px) * 4) #ffffff, calc(var(--px) * 3) calc(var(--px) * 4) #1b1b22, calc(var(--px) * 4) calc(var(--px) * 4) #ffffff, calc(var(--px) * 5) calc(var(--px) * 4) #ffffff, calc(var(--px) * 6) calc(var(--px) * 4) #1b1b22, calc(var(--px) * 7) calc(var(--px) * 4) #ffffff, calc(var(--px) * 8) calc(var(--px) * 4) var(--c), calc(var(--px) * 1) calc(var(--px) * 5) var(--c), calc(var(--px) * 2) calc(var(--px) * 5) #ffffff, calc(var(--px) * 3) calc(var(--px) * 5) #ffffff, calc(var(--px) * 4) calc(var(--px) * 5) #ffffff, calc(var(--px) * 5) calc(var(--px) * 5) #ffffff, calc(var(--px) * 6) calc(var(--px) * 5) #ffffff, calc(var(--px) * 7) calc(var(--px) * 5) #ffffff, calc(var(--px) * 8) calc(var(--px) * 5) var(--c), calc(var(--px) * 1) calc(var(--px) * 6) var(--c), calc(var(--px) * 2) calc(var(--px) * 6) #ffffff, calc(var(--px) * 3) calc(var(--px) * 6) #ffffff, calc(var(--px) * 4) calc(var(--px) * 6) #1b1b22, calc(var(--px) * 5) calc(var(--px) * 6) #1b1b22, calc(var(--px) * 6) calc(var(--px) * 6) #ffffff, calc(var(--px) * 7) calc(var(--px) * 6) #ffffff, calc(var(--px) * 8) calc(var(--px) * 6) var(--c), calc(var(--px) * 1) calc(var(--px) * 7) var(--c), calc(var(--px) * 2) calc(var(--px) * 7) var(--c), calc(var(--px) * 3) calc(var(--px) * 7) var(--c), calc(var(--px) * 4) calc(var(--px) * 7) var(--c), calc(var(--px) * 5) calc(var(--px) * 7) var(--c), calc(var(--px) * 6) calc(var(--px) * 7) var(--c), calc(var(--px) * 7) calc(var(--px) * 7) var(--c), calc(var(--px) * 8) calc(var(--px) * 7) var(--c); }

/* Additions for the landing page, loaded after style.css and meant to be
 * merged into it. Values come from style.css's tokens, except the deeper
 * player colours on the map and the sprites' ground shadow.
 *
 * .button is shared with about.html and 404.html, so the changes to it
 * below apply there too once merged. That is deliberate: one button across
 * the public pages. */

/* --- type and buttons ------------------------------------------------- */

.hero h1 {
  font-size: clamp(1.25rem, 0.9rem + 1.8vw, 2.25rem);
  line-height: 1.5;
  margin-bottom: calc(var(--space) * 1.5);
}

.hero .lede {
  font-size: 1.25rem;
}

/* A hard pixel ledge instead of a soft shadow: the button sits on the page
 * the way a cell sits on the map, and pressing it pushes it down onto it. */
.button {
  font-size: 0.875rem;
  padding: 1.125rem 1.5rem;
  box-shadow: 0 4px 0 0 var(--surface-2);
}

.button:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* --- hero ------------------------------------------------------------- */

.hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: calc(var(--space) * 3);
  padding-top: var(--space);
}

/* On a phone the map comes first: it is what makes the headline make sense,
 * and at 375px it is short enough to leave the headline on the first screen. */
/* The column rule has to be restated: the two-column one above comes after
 * style.css's own single-column media query and would otherwise win. */
@media (max-width: 46rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--space) * 2);
    padding-top: 0;
  }

  .hero .stage {
    order: -1;
  }
}

/* --- the stage: four players on the map -------------------------------- */

/* Sprites are placed in map cells, not in pixels: --x and --y are the cell a
 * character started from, --size is how many cells tall it stands. Sizes are
 * in container units so the scene scales as one picture down to 375px. The
 * cell size ignores the map's 3px border, which is under a pixel of error at
 * any width. */
.stage {
  position: relative;
  container-type: inline-size;
}

.stage .sprite {
  --cell: calc(100cqw / 12);
  --px: calc(var(--cell) * var(--size) / 8);
  position: absolute;
  left: calc(var(--cell) * (var(--x) + 0.5));
  top: calc(var(--cell) * (var(--y) + 0.85));
  translate: -50% -100%;
}

/* Players further up the map stand further away, so they are drawn smaller
 * and behind the ones in front. */
.stage .on-a { --x: 1; --y: 1; --size: 1.35; z-index: 1; }
.stage .on-b { --x: 10; --y: 1; --size: 1.35; z-index: 1; }
.stage .on-c { --x: 1; --y: 6; --size: 1.9; z-index: 2; }
.stage .on-d { --x: 9; --y: 5; --size: 1.75; z-index: 2; }

/* A player stands on ground painted in their own colour, so at full colour
 * the character dissolves into its territory. These are the same eight hues
 * made deeper and more saturated -- lightness down 0.13 and chroma up a
 * quarter in OKLCH, pulled back into sRGB -- so the figure separates from
 * its ground and still reads as that player. Hex rather than relative colour
 * syntax, which older Safari does not parse. Green is the exception, picked by
 * eye: mint has almost no chroma to gain inside sRGB, so the formula gave a
 * dull teal that sank into the pale mint ground; a truer green stands out. */
.stage .c1 { --c: #cd2f02; } .stage .c2 { --c: #0161d6; } .stage .c3 { --c: #d2a806; } .stage .c4 { --c: #00a84a; }
.stage .c5 { --c: #931eea; } .stage .c6 { --c: #e036a2; } .stage .c7 { --c: #06a7b8; } .stage .c8 { --c: #516576; }

/* Territories are painted lighter here than in the app, so the characters
 * standing on them are what the eye lands on first. The app keeps its own
 * opacity: there the map is read for who owns what, here it is a backdrop. */
.stage {
  --paint-opacity: 0.5;
}

/* style.css paints the third territory yellow. On this page yellow is the
 * button's colour, and a block of it on the map competes with the one thing
 * that should be yellow, so the bottom-left player here is purple. */
.stage .map .c::after {
  background: var(--p5);
}

.stage .sprite::after {
  content: "";
  position: absolute;
  left: var(--px);
  right: var(--px);
  bottom: calc(var(--px) * -1);
  height: var(--px);
  background: rgba(26, 26, 30, 0.45);
}

/* The one moment of motion: on load each territory paints outward from its
 * player, in the order the cells were taken. After that only the characters
 * move, a one-pixel hop each, out of step with one another. */
.stage .w1 { --w: 1; } .stage .w2 { --w: 2; } .stage .w3 { --w: 3; } .stage .w4 { --w: 4; }
.stage .w5 { --w: 5; } .stage .w6 { --w: 6; } .stage .w7 { --w: 7; } .stage .w8 { --w: 8; }
.stage .w9 { --w: 9; } .stage .w10 { --w: 10; } .stage .w11 { --w: 11; } .stage .w12 { --w: 12; }
.stage .w13 { --w: 13; } .stage .w14 { --w: 14; }

.stage .map i::after {
  animation: paint 160ms steps(2, end) backwards;
  animation-delay: calc(200ms + var(--w, 0) * 110ms);
}

@keyframes paint {
  from {
    opacity: 0;
  }
}

.stage .sprite::before {
  animation: hop 1.6s steps(1, end) infinite;
}

.stage .on-b::before { animation-delay: -0.4s; }
.stage .on-c::before { animation-delay: -0.8s; }
.stage .on-d::before { animation-delay: -1.2s; }

@keyframes hop {
  50% {
    translate: 0 calc(var(--px) * -1);
  }
}

/* --- problem and fix pairs --------------------------------------------- */

.pairs {
  margin-top: calc(var(--space) * 4);
}

.pairs h2,
.closer h2 {
  font-size: 1.25rem;
  margin-top: 0;
}

.pair-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: calc(var(--space) * 2) calc(var(--space) * 3);
  margin: calc(var(--space) * 2) 0 0;
  padding: 0;
  list-style: none;
}

.pair-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space);
  align-content: start;
  border-top: var(--border);
  padding-top: calc(var(--space) * 1.25);
}

.pair-list .sprite {
  --px: 4px;
  grid-row: span 2;
  margin-top: 0.3rem;
}

/* The pain line is a sentence someone would say out loud, so it is set in
 * the reading face; the pixel face is kept for the page's few shouts. */
.pair-list h3 {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.4rem;
}

.pair-list p {
  color: var(--muted);
  margin: 0;
}

/* --- closing call ------------------------------------------------------- */

.closer {
  margin-top: calc(var(--space) * 3);
  padding: calc(var(--space) * 2);
  background: var(--surface);
  border: var(--border);
}

.closer .actions {
  margin-top: var(--space);
}

@media (prefers-reduced-motion: reduce) {
  .stage .map i::after,
  .stage .sprite::before {
    animation: none;
  }

  .button:active {
    transform: none;
  }
}