:root{
  --paper:#F3F8FF; --surface:#FFFFFF; --ink:#1B2340; --muted:#566079; --line:#DCE6F5;
  --sky:#2E8BF0; --teal:#2BB3A8; --orange:#F28C3B; --road:#2F66B3; --sun:#FFC83D;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#0E1630; --surface:#16213F; --ink:#EEF2FA; --muted:#A3AEC6; --line:#25335A; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;line-height:1.6}
h1,h2,.brand{font-family:"Fredoka","Atkinson Hyperlegible",system-ui,sans-serif;font-weight:600}
a{color:var(--sky);text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.wrap{max-width:52rem;margin:0 auto;padding:2rem 1.25rem 4rem}
header.site{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.brand{color:inherit;text-decoration:none;font-size:1.5rem;letter-spacing:.01em}
header.site nav a{color:var(--muted);text-decoration:none;font-weight:700}
header.site nav a:hover{color:var(--ink)}

/* hero */
.hero{text-align:center;padding:2.5rem 0 3.5rem}
.fan{display:flex;justify-content:center;margin:0 auto 2.25rem;height:150px}
.fan img{width:132px;height:132px;border-radius:30px;background:#fff;
  box-shadow:0 14px 30px -12px rgba(27,35,64,.45);border:4px solid var(--surface);
  margin:0 -14px;animation:deal .7s cubic-bezier(.2,.9,.3,1.3) both}
.fan img:nth-child(1){transform:rotate(-10deg) translateY(10px);animation-delay:.05s}
.fan img:nth-child(2){transform:translateY(-6px);z-index:1;animation-delay:.15s}
.fan img:nth-child(3){transform:rotate(10deg) translateY(10px);animation-delay:.25s}
@keyframes deal{from{opacity:0;translate:0 40px;scale:.8}}
@media (prefers-reduced-motion:reduce){.fan img{animation:none}}
.hero h1{font-size:clamp(2.4rem,7vw,3.6rem);line-height:1.08;margin:0 auto .75rem;max-width:16ch}
.hero p{color:var(--muted);font-size:1.2rem;margin:0 auto;max-width:32rem}

/* apps */
.apps{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
.app{display:grid;grid-template-columns:112px 1fr;gap:1.5rem;align-items:center;
  background:var(--surface);border-radius:28px;padding:1.25rem 1.5rem 1.25rem 1.25rem;
  border:1px solid var(--line);border-left:8px solid var(--accent)}
.app img{width:112px;height:112px;border-radius:26px;display:block}
.app h2{margin:0;font-size:1.55rem;line-height:1.2}
.app p{margin:.35rem 0 .9rem;color:var(--muted)}
.tag{display:inline-block;font-size:.85rem;font-weight:700;color:var(--accent);margin-bottom:.15rem}
.links{display:flex;flex-wrap:wrap;gap:.6rem}
.links a{display:inline-block;padding:.45rem 1rem;border-radius:999px;font-weight:700;
  text-decoration:none;border:2px solid var(--accent);color:var(--ink)}
.links a:hover{background:var(--accent);color:#fff}
.links a.play{background:var(--accent);color:#fff}
.links a.play:hover{filter:brightness(1.1)}
.app.road{--accent:var(--road)} .app.flags{--accent:var(--sky)} .app.fan-app{--accent:var(--teal)}
@media (max-width:520px){
  .app{grid-template-columns:76px 1fr;gap:1rem;padding:1rem;align-items:start}
  .app img{width:76px;height:76px;border-radius:18px}
  .fan img{width:100px;height:100px;border-radius:24px}
  .fan{height:120px}
}
footer{margin-top:3.5rem;text-align:center;color:var(--muted);font-size:.95rem}

/* privacy pages */
.doc{max-width:44rem}
.doc h1{font-size:clamp(1.8rem,5vw,2.4rem);line-height:1.15}
.doc h2{font-size:1.3rem;margin:2.25rem 0 .5rem}
.doc .meta{color:var(--muted);margin-top:0}
.langs{display:flex;gap:1rem;margin:0 0 2rem;padding:0;list-style:none}
.lang-block{border-top:3px solid var(--sky);padding-top:1.5rem;margin-top:3rem}
.doc ul{padding-left:1.25rem}