:root {
  color-scheme: dark;
  --grund: #140f24;
  --karte: #1c1533;
  --rand: #4a3a7a;
  --gold: #ffd34d;
  --text: #f1ecff;
  --leise: #a99bd6;
  --pixel: 'Press Start 2P', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding: calc(env(safe-area-inset-top) + 24px) 16px calc(env(safe-area-inset-bottom) + 24px);
}
header, main, footer { width: min(48rem, 100%); margin: 0 auto; }
h1 { font: 28px/1.3 var(--pixel); color: var(--gold); text-shadow: 3px 3px 0 #000; margin: 8px 0 12px; }
header p { color: var(--leise); margin: 0 0 28px; }
main { display: grid; gap: 16px; }
.spiel {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  background: var(--karte);
  border: 3px solid var(--rand);
  box-shadow: 0 6px 0 #000a;
  color: inherit;
  text-decoration: none;
  transition: transform 0.12s, border-color 0.12s;
}
.spiel:hover, .spiel:focus-visible { border-color: var(--gold); transform: translateY(-2px); outline: none; }
.spiel img { width: 96px; height: 96px; image-rendering: pixelated; border: 3px solid #000; background: #0b0814; }
.spiel h2 { font: 16px/1.4 var(--pixel); color: var(--gold); margin: 2px 0 8px; }
.spiel p { margin: 0 0 8px; }
.spiel ul { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.spiel li { font-size: 12px; color: var(--leise); border: 1px solid var(--rand); padding: 2px 8px; }
.los { display: inline-block; font: 12px/1 var(--pixel); background: #2e8f3e; border: 3px solid #5fe36b; padding: 10px 14px; color: #fff; }
footer { margin-top: 32px; color: var(--leise); font-size: 12px; text-align: center; }
@media (max-width: 480px) {
  .spiel { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .spiel img { width: 64px; height: 64px; }
  h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .spiel { transition: none; } }