:root {
  --bg: #16132e; --bg2: #241f4a; --ink: #fff8ec; --muted: #b9b3d9; --accent: #ffd23f;
  --font: 'Fredoka', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  background: radial-gradient(120% 80% at 50% 0%, var(--bg2), var(--bg) 70%) fixed, var(--bg);
  color: var(--ink); font-family: var(--font); font-weight: 500;
}
main {
  max-width: 460px; margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}
.star { margin-top: 8px; }
h1 { margin: 0; font-size: 64px; font-weight: 700; color: var(--accent); transform: rotate(-3deg); text-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.sub { margin: 0 0 8px; color: var(--muted); font-size: 18px; }
.card {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 88px; padding: 14px 16px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-radius: 24px;
  color: var(--ink); text-decoration: none; text-align: left; box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
}
.card:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.emoji { font-size: 38px; }
.txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.txt b { font-size: 20px; font-weight: 700; }
.txt small { font-size: 14px; color: var(--muted); }
.go { background: var(--accent); color: #2a1d00; font-weight: 700; font-size: 18px; padding: 10px 16px; border-radius: 999px; }
.more { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
footer { margin-top: auto; font-size: 12px; color: var(--muted); opacity: .7; }
@media (prefers-reduced-motion: reduce) { .card:active { transform: none; } }