* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #0b0d10;
  color: #f0e6d2;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(18px, 2.1vw, 28px);
  line-height: 1.15;
}

main {
  max-width: 44em;
  margin: 0 auto;
  padding: 2em 16px 2em;
  display: flex;
  flex-direction: column;
  gap: 1.4em;
}

header { border-left: 0.2em solid #d4af37; padding-left: 0.7em; }
h1 { margin: 0; font-weight: normal; font-size: 2.6em; line-height: 0.9; color: #f0d060; text-shadow: 0.06em 0.06em 0 #5a3a10; letter-spacing: 0.03em; }
header p { margin: 0.3em 0 0; opacity: 0.85; }

.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 1em; }

.game {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 0.9em 1em 1em;
  background: #14171b;
  border: 0.12em solid #d4af37;
  color: inherit;
  text-decoration: none;
}
.game:hover, .game:focus-visible { background: #1b2026; border-color: #3cff8f; outline: none; }
.game p { margin: 0; }
.logo { font-size: 2.3em; line-height: 0.9; color: #f0d060; text-shadow: 0.06em 0.06em 0 #5a3a10; letter-spacing: 0.03em; white-space: nowrap; }
.tag { color: #d4af37; }
.meta { opacity: 0.6; }
.go {
  margin-top: auto;
  align-self: flex-start;
  padding: 0.05em 0.9em;
  font-size: 1.3em;
  border: 0.1em solid #3cff8f;
  color: #3cff8f;
}
.game:hover .go, .game:focus-visible .go { background: #3cff8f; color: #14171b; }

footer { opacity: 0.6; font-size: 0.85em; border-top: 0.1em solid #2c333d; padding-top: 0.6em; }

/* One accent per game, from the registry. */
.g-tradeor .logo span { color: #3cff8f; }
.g-tradeor3d .logo span { color: #38c6ff; }
.g-boxboxbox .logo span { color: #ff5a3c; }
.g-headcount .logo span { color: #ffb347; }
.g-boardup .logo span { color: #9be564; }
.g-porchlight .logo span { color: #ff8c1a; }