/* Same system as the site root: Inter, warm off-white ground, small quiet type, hairline dividers.
   The game pages add one accent (the game's orange) and a row of cards. */
:root {
  --background: #fafaf9;
  --foreground: #1a1a18;
  --muted-foreground: #888882;
  --border: rgb(0 0 0 / 10%);
  --accent: #f0511e;
  --accent-dark: #c93d10;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 42rem; margin: 0 auto; padding: 5rem 1.5rem; }
h1 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.025em; margin: 0 0 0.25rem; }
h2 { font-size: 0.875rem; font-weight: 500; margin: 0 0 0.75rem; }
p { margin: 0 0 0.75rem; color: rgb(26 26 24 / 80%); }
.muted { color: var(--muted-foreground); font-size: 0.75rem; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
section { margin-bottom: 0.5rem; }
a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #e5e5e5;
  transition: text-decoration-color 150ms;
}
a:hover { text-decoration-color: currentColor; }
nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8em; }

/* Header with the app icon */
.app { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.25rem; }
.app img { width: 3rem; height: 3rem; border-radius: 0.75rem; box-shadow: 0 1px 2px rgb(0 0 0 / 10%); }

/* The fun part: a hand of cards, each tilted a little, the way they land on a table. */
.cards { display: flex; gap: 0.75rem; margin: 1.75rem 0 0.5rem; padding: 0.5rem 0.5rem; overflow: hidden; }
.cards img {
  width: 4.25rem; height: 4.25rem; padding: 0.4rem;
  background: #6fd0f4; border: 3px solid #9e0b0f; border-radius: 0.6rem;
  box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
  transition: transform 200ms;
}
.cards img:nth-child(odd) { transform: rotate(-4deg); }
.cards img:nth-child(even) { transform: rotate(3deg) translateY(4px); }
.cards img:hover { transform: rotate(0) translateY(-6px) scale(1.06); }
@media (max-width: 480px) {
  .cards { gap: 0.5rem; }
  .cards img { width: 3.6rem; height: 3.6rem; }
  .cards img:nth-child(n+6) { display: none; }
}

/* One accent button, in the game's orange */
.store {
  display: inline-block; margin-top: 0.75rem; padding: 0.6rem 1.1rem;
  background: var(--accent); color: #fff; font-weight: 500; font-size: 0.875rem;
  border-radius: 0.6rem; text-decoration: none; box-shadow: 0 2px 0 var(--accent-dark);
  transition: transform 120ms, box-shadow 120ms;
}
.store:hover { transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-dark); }

/* Feature list */
ul.features { list-style: none; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 0.35rem; }
ul.features li { color: rgb(26 26 24 / 80%); padding-left: 1.25rem; position: relative; }
ul.features li::before { content: "★"; position: absolute; left: 0; color: #f5b400; }