:root {
  --ink: #0d1b2a;
  --paper: #f6f4ef;
  --line: #d9d3c6;
  --accent: #0f6d63;
  --muted: #6a6459;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 620px; margin: 0 auto; padding: 40px 18px 60px; }
h1 { font-size: 30px; margin: 0 0 4px; letter-spacing: -.02em; }
.dek { color: var(--muted); margin: 0 0 30px; }

.games { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.game {
  display: grid; gap: 5px;
  /* Comfortably past the 44px touch minimum, and this is a page a
     seven-year-old will open on a tablet. */
  min-height: 76px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: border-color .12s ease, transform .12s ease;
}
a.game:hover { border-color: var(--accent); transform: translateY(-1px); }
.game-name { font-weight: 700; font-size: 19px; }
.game-dek { font-size: 15px; color: var(--muted); }

/* Not yet built. Shown rather than hidden so the page reads as a place that is
   filling up, which is a nicer thing to come back to than a page with one link. */
.soon .game { opacity: .5; border-style: dashed; }
.soon .game-name::after {
  content: 'soon'; margin-left: 9px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--accent);
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }