/* style.css - the Pixel Cade site.
 *
 * Two deliberate constraints:
 *
 * 1. ZERO third-party requests. No web fonts, no CDN, no analytics, no
 *    embedded anything. A page whose main job is to say "this app does not
 *    phone home" must not itself hand a visitor's IP address to a font host.
 *    Everything here is one stylesheet and system fonts.
 * 2. The palette is the game's palette, copied by hand from
 *    web/js/core/palette.js. If a re-skin ever happens, these are the values
 *    to re-copy.
 */

:root {
  --black:  #05050c;
  --void0:  #0a0a18;
  --void1:  #131028;
  --void2:  #1e1a3c;
  --ink:    #2a2450;
  --steel1: #565089;
  --steel2: #7d76b3;
  --mist:   #b9b3e0;
  --white:  #f4f2ff;

  --pink:   #ff2e88;
  --cyan:   #22e0f0;
  --lime:   #8bff3c;
  --gold:   #ffd166;
  --orange: #ff8b3d;
  --purple: #a95cff;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
          "Roboto Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--void0);
  color: var(--mist);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.65;
}

/* A faint carpet grid, drawn with gradients so it costs no request. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background:
    linear-gradient(transparent 15px, rgba(42, 36, 80, .35) 16px),
    linear-gradient(90deg, transparent 15px, rgba(42, 36, 80, .35) 16px);
  background-size: 16px 16px, 16px 16px;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px 72px;
}

/* ---------------------------------------------------------------- header */

header {
  padding: 56px 0 36px;
  text-align: center;
}

.logo {
  display: inline-block;
  padding: 14px 22px;
  border: 3px solid var(--cyan);
  border-radius: 2px;
  background: var(--void1);
  box-shadow: 0 0 0 3px var(--void0), 0 0 26px rgba(34, 224, 240, .28);
}

.logo h1 {
  margin: 0;
  font-size: clamp(26px, 7vw, 42px);
  letter-spacing: .14em;
  color: var(--white);
  text-shadow: 2px 2px 0 var(--pink);
}

.tag {
  margin: 22px auto 0;
  max-width: 34em;
  color: var(--steel2);
  font-size: 15px;
}

/* ----------------------------------------------------------------- links */

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid var(--steel1);
  border-radius: 2px;
  background: var(--void1);
  color: var(--mist);
  font-size: 14px;
  letter-spacing: .08em;
  text-decoration: none;
}

.btn:hover, .btn:focus { border-color: var(--cyan); color: var(--white); }

.btn.primary {
  border-color: var(--gold);
  color: var(--gold);
}

.btn.primary:hover, .btn.primary:focus {
  background: var(--gold);
  color: var(--black);
}

/* -------------------------------------------------------------- sections */

section { margin-top: 52px; }

h2 {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--cyan);
  text-transform: uppercase;
}

h2::before { content: "// "; color: var(--ink); }

h3 {
  margin: 0 0 4px;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--white);
}

p { margin: 0 0 14px; }

a { color: var(--cyan); overflow-wrap: anywhere; }
a:hover { color: var(--white); }

.lead { color: var(--mist); font-size: 15px; }

/* ---------------------------------------------------------------- panels */

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.panel {
  padding: 16px 18px;
  border: 2px solid var(--void2);
  border-left: 4px solid var(--accent, var(--steel1));
  border-radius: 2px;
  background: var(--void1);
}

.panel p { margin: 0; font-size: 14px; color: var(--steel2); }

/* ---------------------------------------------------------- screenshots */

/* A strip you push sideways with a thumb, rather than eight tall phones
 * stacked down the page. */
.shots {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-top: 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.shots figure {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
  text-align: center;
}

.shots img {
  display: block;
  width: 168px;
  height: auto;
  border: 2px solid var(--void2);
  border-radius: 2px;
  background: var(--black);
  /* Pixel art: never let a browser smooth it on the way down. */
  image-rendering: pixelated;
}

.shots figcaption {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--steel1);
}

/* -------------------------------------------------------------- machines */

.cat {
  margin: 22px 0 8px;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--accent, var(--steel2));
}

.cabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.cab {
  padding: 12px 14px;
  border: 2px solid var(--void2);
  border-radius: 2px;
  background: var(--void1);
}

.cab b {
  display: block;
  color: var(--white);
  font-size: 14px;
  letter-spacing: .08em;
  font-weight: normal;
}

.cab span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--steel2);
}

/* ---------------------------------------------------------------- policy */

.policy h2 { margin-top: 34px; }

.policy ul { margin: 0 0 14px; padding-left: 22px; }
.policy li { margin-bottom: 7px; }

.stamp {
  display: inline-block;
  margin-top: 4px;
  padding: 5px 12px;
  border: 2px solid var(--void2);
  border-radius: 2px;
  background: var(--void1);
  font-size: 12.5px;
  color: var(--steel2);
}

/* The permissions list is a definition list rather than a table on purpose:
 * one of the names is forty characters of unbreakable package path, and a
 * table would push the whole page sideways on a phone. */
.perms { margin: 0 0 16px; }

.perms dt {
  margin-top: 12px;
  color: var(--white);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.perms dt code { color: var(--gold); }

.perms dd {
  margin: 4px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--void2);
  font-size: 14px;
  color: var(--steel2);
}

code { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- footer */

footer {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 2px solid var(--void2);
  font-size: 12.5px;
  color: var(--steel1);
  text-align: center;
}

footer a { color: var(--steel2); }

/* Respect a reader who has asked for less contrast-shifting motion; there is
 * none here, but the glow is the sort of thing that reads as motion on some
 * displays. */
@media (prefers-reduced-motion: reduce) {
  .logo { box-shadow: 0 0 0 3px var(--void0); }
}