:root{
  --bg:#0a0712; --panel:#140d22; --ink:#f4f1ff; --muted:#a99fc4;
  --y:#ffd23f; --o:#ff7a2f; --p:#ff3da6; --c:#19e0ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--c); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:980px; margin:0 auto; padding:0 22px}
.bg-glow{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40rem 30rem at 18% -8%, rgba(255,61,166,.20), transparent 60%),
    radial-gradient(36rem 30rem at 92% 8%, rgba(25,224,255,.16), transparent 60%),
    radial-gradient(50rem 40rem at 50% 120%, rgba(255,122,47,.16), transparent 60%);
}
.grad{
  background:linear-gradient(120deg,var(--y),var(--o),var(--p));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Hero */
header.hero{text-align:center; padding:64px 0 28px}
header.hero img.logo{width:128px; height:128px; filter:drop-shadow(0 6px 22px rgba(255,61,166,.45))}
h1{font-size:clamp(34px,7vw,60px); font-weight:900; letter-spacing:2px; margin:14px 0 6px}
.tagline{color:var(--muted); font-size:clamp(16px,2.4vw,20px); margin:0 0 18px}
.cta{display:inline-block; margin-top:8px; padding:12px 22px; border-radius:999px;
  font-weight:800; color:#1a1206; background:linear-gradient(120deg,var(--y),var(--o));
  box-shadow:0 8px 24px rgba(255,122,47,.35)}
.soon{display:inline-block; margin-top:14px; color:var(--muted); font-size:14px;
  border:1px solid rgba(255,255,255,.14); padding:8px 16px; border-radius:999px}
/* Sections */
section{padding:34px 0}
h2{font-size:clamp(22px,4vw,30px); font-weight:800; margin:0 0 18px}
.lead{color:var(--muted); max-width:62ch}
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:18px 18px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card h3{margin:0 0 6px; font-size:17px}
.card p{margin:0; color:var(--muted); font-size:14px}
.cats{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cat{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px 18px}
.cat .tag{font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase}
.cat ul{margin:8px 0 0; padding-left:18px; color:var(--muted)}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px;
  border:1px solid rgba(255,255,255,.16); color:var(--ink); margin:0 6px 6px 0}
.price{background:var(--panel); border:1px solid rgba(255,210,63,.35); border-radius:18px;
  padding:22px; text-align:center}
.price strong{font-size:22px}
/* FAQ */
.faq details{background:var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:4px 18px; margin:0 0 12px}
.faq summary{cursor:pointer; font-weight:700; padding:12px 0; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋"; color:var(--o); font-weight:900; margin-right:10px}
.faq details[open] summary::before{content:"－"}
.faq p{margin:0 0 14px; color:var(--muted)}
/* App icon logo — iOS rounded-square */
header.hero img.logo{border-radius:23%}
/* App Store download badge */
.appstore-badge{display:inline-flex; align-items:center; gap:12px; margin-top:14px;
  padding:12px 22px 12px 18px; border-radius:14px; background:#000; color:#fff;
  border:1px solid rgba(255,255,255,.18); box-shadow:0 10px 30px rgba(0,0,0,.45)}
.appstore-badge:hover{text-decoration:none; transform:translateY(-1px)}
.appstore-badge svg{width:26px; height:26px; fill:#fff}
.appstore-badge .b1{display:block; font-size:11px; line-height:1; color:#cfcfe6; letter-spacing:.2px}
.appstore-badge .b2{display:block; font-size:20px; font-weight:700; line-height:1.15; margin-top:2px}
/* Badge row */
.badges{display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:16px}
.badges .appstore-badge{margin-top:0}
/* Watch on YouTube badge */
.yt-badge{display:inline-flex; align-items:center; gap:11px; padding:12px 20px; border-radius:14px;
  background:#212121; color:#fff; border:1px solid rgba(255,255,255,.18); box-shadow:0 10px 30px rgba(0,0,0,.45)}
.yt-badge:hover{text-decoration:none; transform:translateY(-1px)}
.yt-badge .ytmark{display:inline-flex; align-items:center; justify-content:center; width:40px; height:28px;
  background:#ff0000; border-radius:7px}
.yt-badge .ytmark svg{width:16px; height:16px; fill:#fff}
.yt-badge .b1{display:block; font-size:11px; line-height:1; color:#cfcfe6}
.yt-badge .b2{display:block; font-size:20px; font-weight:700; line-height:1.15; margin-top:2px}
.shortlink{margin:12px 0 0; font-size:14px; color:var(--muted)}
.shortlink a{color:var(--c)}
/* Portrait video hero (phone-framed trailer) */
.hero-video{margin:26px auto 0; width:min(300px,78vw); border-radius:34px;
  border:6px solid #1b1524; background:#000; overflow:hidden;
  box-shadow:0 24px 60px rgba(255,61,166,.22), 0 10px 30px rgba(0,0,0,.55)}
.hero-video video{display:block; width:100%; height:auto}
/* Screenshot gallery */
.gallery{display:flex; gap:16px; overflow-x:auto; padding:6px 2px 14px; scroll-snap-type:x mandatory}
.gallery::-webkit-scrollbar{height:8px}
.gallery::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:8px}
.gallery img{height:520px; width:auto; border-radius:20px; scroll-snap-align:center;
  border:1px solid rgba(255,255,255,.10); box-shadow:0 12px 34px rgba(0,0,0,.45); flex:0 0 auto}
.watch-shots{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:16px}
.watch-shots img{width:150px; border-radius:26px; border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 26px rgba(0,0,0,.45)}
/* Language switcher */
.lang{position:absolute; top:16px; right:22px; font-size:13px; color:var(--muted)}
.lang a{margin:0 4px} .lang a.on{color:var(--ink); font-weight:700}
/* Footer */
footer{border-top:1px solid rgba(255,255,255,.08); margin-top:40px; padding:26px 0 50px; text-align:center; color:var(--muted); font-size:14px}
footer a{margin:0 10px}
.prose p{color:var(--muted)} .prose h2{margin-top:28px}
/* ── Chips / jump links ─────────────────────────────────────────── */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px}
a.pill{display:inline-block; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700;
  border:1px solid rgba(255,255,255,.16); color:var(--ink); background:var(--panel); margin:0}
a.pill:hover{text-decoration:none; border-color:var(--o); color:var(--y)}
a.pill.hot{background:linear-gradient(120deg,var(--y),var(--o)); color:#1a1206;
  border-color:transparent; box-shadow:0 6px 18px rgba(255,122,47,.30)}
a.pill.hot:hover{color:#1a1206}
/* ── How to play ────────────────────────────────────────────────── */
.howgrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.how{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:16px 18px; box-shadow:0 10px 30px rgba(0,0,0,.30)}
.how h3{margin:0 0 6px; font-size:18px}
.how .goal{margin:0 0 10px; font-size:15px}
.how ul{margin:0; padding-left:18px; color:var(--muted); font-size:14px}
.how ul li{margin:0 0 5px}
.how ul li b{color:var(--ink)}
.free-tag{font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:#1a1206; background:linear-gradient(120deg,var(--y),var(--o));
  padding:3px 8px; border-radius:999px; vertical-align:middle; margin-left:8px}
.note{color:var(--muted); font-size:14px; border-left:3px solid var(--o);
  padding:2px 0 2px 14px; margin:0 0 18px}
section[id]{scroll-margin-top:24px}
.backlink{display:inline-block; margin-top:8px; font-size:14px}
/* Game icon in each How-to-play card heading */
.how h3{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.how h3 .free-tag{margin-left:0; flex:0 0 auto}
.gicon{width:44px; height:44px; object-fit:contain; border-radius:22%; flex:0 0 auto}