/* Hub / Spielauswahl. Tokens kommen aus tokens.css */

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-body);
  min-height:100vh;
  padding:var(--space-4) 10px 60px;
  padding-top:calc(env(safe-area-inset-top, 0px) + var(--space-4));
  padding-left:max(10px, env(safe-area-inset-left));
  padding-right:max(10px, env(safe-area-inset-right));
  padding-bottom:max(60px, env(safe-area-inset-bottom));
  background-image:radial-gradient(ellipse 80% 40% at 50% -5%, rgba(255,178,94,.10), transparent);
}
.wrap{max-width:760px;margin:0 auto}
header{text-align:center;margin-bottom:var(--space-6)}
h1{
  font-family:var(--font-display);font-weight:800;font-size:clamp(32px,8vw,52px);
  color:var(--glow);
  text-shadow:0 0 18px var(--glow-soft),0 0 45px rgba(255,178,94,.18);
  letter-spacing:.5px;
}
.sub{color:var(--muted);font-size:14px;margin-top:2px}

.games{list-style:none;display:grid;gap:var(--space-3)}
.game{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:box-shadow .2s, transform .1s, border-color .2s;
}
.game a{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4);text-decoration:none;color:inherit;
  border-radius:var(--radius-lg);
}
.game:hover{border-color:var(--glow);box-shadow:0 0 16px var(--glow-soft);transform:translateY(-1px)}
.game a:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.game.is-soon{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);opacity:.55}
.game.is-soon:hover{border-color:var(--line);box-shadow:none;transform:none}

.emoji{font-size:30px;line-height:1;filter:drop-shadow(0 0 10px var(--glow-soft))}
.body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.title{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--glow)}
.tagline{font-size:13px;color:var(--cream)}
.meta{font-size:12px;color:var(--muted)}
.chevron{color:var(--muted);font-size:20px;font-weight:800}
.game:hover .chevron{color:var(--glow)}
.badge{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-sm);
  padding:4px 8px;
}
.empty{color:var(--muted);text-align:center;padding:var(--space-6)}

footer{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-1);
  text-align:center;color:var(--muted);font-size:12px;margin-top:var(--space-6);
}
.credit{font-size:12px}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}