/* Numio menu — same visual system as ../prime/frontend: theme tokens copied from
   ../prime/frontend/app/globals.css (keep in sync if the palette changes there),
   graph-paper background, hand-drawn borders, Architects Daughter lettering. */
@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap");

:root {
  --color-paper: #f4f2ea;
  --color-surface: #fbfaf5;
  --color-grid: rgba(40, 38, 32, 0.05);
  --color-ink: #26241f;
  --color-line: #2b2924;
  --color-line-soft: #c8c4b8;
  --color-muted: #76716688;
  --color-muted-solid: #767166;
  --color-accent: #2f5fe0;
  --color-accent-soft: #d9e2fb;
  --color-highlight: #f2c44d;
  --sketch-border-width: 2px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-ink);
  font-family: "Architects Daughter", "Comic Sans MS", cursive, system-ui;
  background-color: var(--color-paper);
  /* graph-paper grid, as in prime */
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
}

.masthead {
  text-align: center;
  margin-bottom: 2.5rem;
}

.wordmark {
  font-size: 3.5rem;
  margin: 0;
  letter-spacing: 0.02em;
}

/* The hand-drawn # sits in for the "u": sized to the caps around it and
   nudged onto the baseline. */
.hash {
  width: 0.82em;
  height: 0.82em;
  margin: 0 0.015em;
  vertical-align: -0.09em;
}

.tagline {
  margin: 0.25rem 0 0;
  color: var(--color-muted-solid);
}

.tiles {
  display: grid;
  /* capped width + centered, so a lone tile doesn't stretch the full row;
     switch back to repeat(auto-fit, minmax(15rem, 1fr)) when more games land */
  grid-template-columns: min(24rem, 100%);
  justify-content: center;
  gap: 1.5rem;
}

.tile {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: var(--sketch-border-width) solid var(--color-line);
  /* the hand-drawn wobble */
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 3px 4px 0 rgba(43, 41, 36, 0.18);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

a.tile:hover {
  transform: translateY(-3px) rotate(-0.3deg);
  box-shadow: 5px 7px 0 rgba(43, 41, 36, 0.22);
}

.tile-mark {
  width: 52px;
  height: 52px;
}

.tile h2 {
  margin: 0.5rem 0 0.25rem;
  font-size: 1.5rem;
}

.tile p {
  margin: 0;
  color: var(--color-muted-solid);
  line-height: 1.45;
}

.go {
  display: inline-block;
  margin-top: 0.9rem;
  color: var(--color-accent);
}

.foot {
  margin-top: 3rem;
  text-align: center;
  color: var(--color-muted-solid);
  font-size: 0.85rem;
}