:root {
  --ink: #fff7ea;
  --gold: #ffcf4a;
  --display: "Arial Black", "Helvetica Neue", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  background: #000;
  color: var(--ink);
  font-family: system-ui, -apple-system, Roboto, "Segoe UI", sans-serif;
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 40px) 20px calc(env(safe-area-inset-bottom, 0px) + 40px);
}

h1 {
  margin: 0 0 28px;
  text-align: center;
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: 4px;
  color: var(--gold);
  text-shadow: 0 3px 0 #7a4300;
}

.games { display: grid; gap: 16px; }

.game {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 18px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
  transition: transform 80ms ease, box-shadow 80ms ease;
}

.game:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.game:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.game.koalas { background: linear-gradient(180deg, #d61e26, #8a1016); }
.game.baja { background: linear-gradient(180deg, #1846b8, #0b2a6b); }
.game.mcqueen { background: linear-gradient(180deg, #f2560f, #a80d16); }

.game img { border-radius: 10px; }

.name {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 1px;
}