:root { --ink: #1e1b4b; --muted: #6b6a8f; --yellow: #ffd23f; --blue: #3b5bfd; color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Nunito", "Segoe UI Rounded", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, #38c6ff 0%, #3b5bfd 45%, #7b3bfd 100%) fixed;
  background-color: #3b5bfd;
  min-height: 100vh;
}
main { max-width: 520px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 28px) 16px 32px; display: flex; flex-direction: column; gap: 16px; }
header { text-align: center; color: #fff; }
.logo { width: 96px; height: 96px; filter: drop-shadow(0 6px 10px rgba(30, 27, 75, 0.35)); }
h1 { margin: 8px 0 0; font-size: 2.6rem; font-weight: 900; letter-spacing: -0.02em; text-shadow: 0 4px 0 rgba(30, 27, 75, 0.25); }
.tag { margin: 4px 0 12px; font-weight: 700; opacity: 0.95; }
.langs { display: inline-flex; gap: 6px; background: rgba(255, 255, 255, 0.2); padding: 4px; border-radius: 999px; }
.langs button { font: inherit; font-weight: 900; font-size: 0.85rem; border: 0; color: #fff; background: none; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.langs button.on { background: #fff; color: var(--blue); }
.game {
  display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px; background: #fff; color: var(--ink);
  text-decoration: none; box-shadow: 0 6px 0 rgba(30, 27, 75, 0.18); transition: transform 0.08s ease;
}
.game:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(30, 27, 75, 0.18); }
.game-icon { font-size: 2.6rem; width: 64px; height: 64px; flex: none; display: grid; place-items: center; background: var(--yellow); border-radius: 18px; }
.game-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.game-name { font-size: 1.5rem; font-weight: 900; }
.game-desc { color: var(--muted); font-weight: 700; font-size: 0.95rem; }
.go { font-size: 1.4rem; color: var(--blue); }
.soon { opacity: 0.75; }
.soon .game-icon { background: #eef0ff; }
.badge { background: #ff8a3d; color: #fff; font-weight: 900; font-size: 0.8rem; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
footer { text-align: center; color: rgba(255, 255, 255, 0.85); font-weight: 700; font-size: 0.85rem; display: flex; justify-content: center; gap: 8px; }
footer a { color: inherit; }