:root {
  --bg: #fff7e6;
  --ink: #3b2f2a;
  --soft: #7a6a60;
  --card: #ffffff;
  --accent: #ffc9a8;
  --accent-ink: #5a3a28;
  --line: #f0dcc4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #231d1a;
    --ink: #f3e8dc;
    --soft: #bba99b;
    --card: #2e2622;
    --accent: #7a4d36;
    --accent-ink: #fff1e6;
    --line: #43372f;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 52rem; margin: 0 auto; padding: 1.5rem 16px 3rem; }
header.site { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
header.site a.brand { font-size: 1.5rem; font-weight: 700; color: var(--ink); text-decoration: none; }
nav a { color: var(--soft); margin-left: 1rem; }
h1 { font-size: 2rem; line-height: 1.2; margin: 2rem 0 0.5rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 0.5rem; }
p, li { max-width: 40rem; }
a { color: var(--accent-ink); }
.lead { color: var(--soft); font-size: 1.15rem; }
.button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}
footer { margin-top: 3rem; color: var(--soft); font-size: 0.9rem; border-top: 1px solid var(--line); padding-top: 1rem; }
footer a { color: var(--soft); }


/* Games: a big picture tile for each, with a line for grown-ups. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 16rem)); gap: 1.25rem; padding: 0; list-style: none; margin: 1rem 0; }
.tile {
  display: block;
  height: 100%;
  padding: 1rem;
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 2rem;
  text-decoration: none;
  color: var(--ink);
}
.tile:hover, .tile:focus-visible { border-color: var(--accent); outline: none; }
.tile img { width: 100%; height: auto; border-radius: 1.5rem; display: block; }
.tile strong { display: block; margin-top: 0.5rem; font-size: 1.3rem; }
.tile span { display: block; color: var(--soft); font-size: 0.9rem; line-height: 1.4; }

.tile .meta { margin-top: 0.4rem; color: var(--ink); font-size: 0.9rem; }
.tile .meta b { color: var(--soft); font-weight: 600; margin-right: 0.25rem; }
/* On a phone held upright, two games sit side by side, so the tiles are a little tighter. */
@media (max-width: 34rem) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .tile { padding: 0.6rem; border-width: 2px; border-radius: 1.4rem; }
  .tile img { border-radius: 1rem; }
  .tile strong { font-size: 1.1rem; }
  .tile span, .tile .meta { font-size: 0.8rem; }
}
.steps h3 { font-size: 1.1rem; margin: 1.5rem 0 0.25rem; }
.steps ol { padding-left: 1.3rem; margin: 0.25rem 0; }

/* Promise chips, collapsed tips and the parent-gate animation on the home page. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; margin: 1.5rem 0; }
.chips li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem 0.3rem 0.6rem; border: 2px solid var(--line); border-radius: 999px; font-size: 0.95rem; background: var(--card); }
.chips svg { width: 1.2em; height: 1.2em; fill: none; stroke: var(--soft); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.how { max-width: 40rem; border-top: 1px solid var(--line); padding: 0.6rem 0; }
.how:last-of-type { border-bottom: 1px solid var(--line); }
.how summary { cursor: pointer; font-weight: 600; padding: 0.2rem 0; }
.how p { margin: 0.5rem 0 0.2rem; }
.gate { display: flex; align-items: center; gap: 1rem; }
.gate svg { width: 5rem; height: 5rem; flex: none; }
.gate circle, .gate path { fill: none; stroke: var(--soft); stroke-width: 3; stroke-linecap: round; }
.gate .track { stroke: var(--line); }
.gate .fill { stroke: var(--accent); stroke-dasharray: 100; stroke-dashoffset: 100; animation: hold 4s ease-in-out infinite; }
.gate .gear { animation: press 4s ease-in-out infinite; transform-origin: 32px 32px; }
@keyframes hold { 0%, 10% { stroke-dashoffset: 100; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes press { 0%, 10% { transform: scale(1); } 15%, 90% { transform: scale(0.9); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .gate .fill, .gate .gear { animation: none; } .gate .fill { stroke-dashoffset: 40; } }
.about { color: var(--soft); font-size: 0.9rem; margin-top: 2rem; }
.gate .teeth { stroke-width: 5; stroke-dasharray: 5.9 5.9; }