/* Styles for the static website pages (landing, game pages, privacy). The app has its own css/. */
:root {
  --bg: #fdf7ff;
  --bg2: #eef4ff;
  --ink: #2d2a4a;
  --muted: #6b6889;
  --card: #fff;
  --primary: #7c5cff;
  --radius: 22px;
  --shadow: 0 6px 0 rgba(45, 42, 74, 0.1), 0 10px 24px rgba(45, 42, 74, 0.07);
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', 'Varela Round', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  line-height: 1.6;
}
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(160deg, var(--bg), var(--bg2)); min-height: 100vh; }
a { color: var(--primary); }
main { max-width: 1040px; margin: 0 auto; padding: 0 20px 40px; }
h1, h2 { line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0.3em 0; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 1.6em 0 0.6em; }

.site-header {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; background: rgba(253, 247, 255, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid #ece6fb;
}
.brand { font-weight: 900; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.site-nav { display: flex; gap: 16px; flex: 1; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 700; }
.site-nav a:hover { color: var(--primary); }

.btn {
  display: inline-block; background: var(--primary); color: #fff; text-decoration: none; font-weight: 800;
  padding: 10px 20px; border-radius: 999px; box-shadow: 0 4px 0 rgba(45, 42, 74, 0.18);
}
.btn:active { transform: translateY(2px); }
.btn-big { font-size: 1.25rem; padding: 16px 32px; }

.hero { text-align: center; padding: 36px 0 12px; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 720px; margin: 0 auto 18px; }
.hero-emoji { font-size: 1.8rem; letter-spacing: 6px; margin-top: 18px; }
.game-hero .game-emoji { font-size: 5rem; margin: 0; line-height: 1; }
.chip {
  display: inline-block; margin: 0 0 10px; padding: 4px 14px; border-radius: 999px; font-weight: 800; font-size: 0.95rem;
  background: color-mix(in srgb, var(--c, var(--primary)) 16%, white); color: var(--ink);
}

.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.card {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px; border-radius: var(--radius); background: var(--card);
  box-shadow: var(--shadow); border-top: 8px solid var(--c, var(--primary)); color: var(--ink); text-decoration: none;
}
.card:hover { transform: translateY(-2px); }
.card-emoji { font-size: 2.4rem; }
.card-skill { color: var(--c, var(--primary)); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.card-title { font-size: 1.2rem; }
.card-blurb { color: var(--muted); font-size: 0.95rem; }

.prose { max-width: 760px; margin: 0 auto; }
.prose p, .prose li { font-size: 1.08rem; }
.prose ol, .prose ul { padding-left: 1.3em; }
.tip { background: #fff8e1; border-radius: 16px; padding: 14px 18px; }
.muted { color: var(--muted); }

.facts {
  max-width: 760px; margin: 24px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
}
.facts div { background: var(--card); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow); }
.facts dt { color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.facts dd { margin: 2px 0 0; font-weight: 800; }

.faq { max-width: 760px; margin: 0 auto; }
.faq details { background: var(--card); border-radius: 16px; padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--shadow); }
.faq summary { font-weight: 800; cursor: pointer; }
.faq p { margin: 10px 0 0; }

.crumbs { font-size: 0.9rem; color: var(--muted); padding-top: 16px; }
.crumbs a { color: var(--muted); }
.cta-end { text-align: center; padding: 30px 0 10px; }

.site-footer { text-align: center; padding: 28px 20px 40px; color: var(--muted); border-top: 1px solid #ece6fb; }
.langs { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-weight: 700; }
.langs [aria-current] { color: var(--ink); }

@media (max-width: 560px) {
  .site-nav { order: 3; flex-basis: 100%; }
  .btn-big { font-size: 1.1rem; padding: 14px 24px; }
}