:root{
  --bg:#1b1640;--bg2:#251d57;--card:#2e2468;--text:#f4efff;--muted:#c9bfee;
  --pink:#ff8fcf;--blue:#7fe3ff;--yellow:#ffe27a;--purple:#a77bff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{font-family:'Nunito',system-ui,-apple-system,sans-serif;background:var(--bg) radial-gradient(ellipse 120% 900px at top,var(--bg2),var(--bg)) no-repeat;color:var(--text);line-height:1.6;min-height:100vh}
a{color:var(--blue)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
header.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.25rem}
.brand img{width:40px;height:40px;border-radius:10px}
nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-weight:700}
nav a:hover{color:var(--pink)}
.hero{text-align:center;padding:30px 0 50px}
.hero img{width:min(300px,78vw);height:auto;border-radius:28px;box-shadow:0 0 60px rgba(167,123,255,.45)}
h1,h2,h3{font-family:'Fredoka',sans-serif;line-height:1.2}
.hero h1{font-size:clamp(2rem,6vw,3rem);margin:28px 0 10px;background:linear-gradient(90deg,var(--pink),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:1.15rem;max-width:560px;margin:0 auto}
section{padding:40px 0}
section h2{font-size:1.8rem;margin-bottom:18px;text-align:center}
.game{background:var(--card);border-radius:24px;padding:28px;display:grid;grid-template-columns:1fr;gap:10px;border:2px solid rgba(255,143,207,.35)}
.game h3{font-size:1.6rem;color:var(--pink)}
.game + .game{margin-top:24px}
.game.titan{border-color:rgba(127,227,255,.4)}
.game.titan h3{color:var(--blue)}
.game.oishii{border-color:rgba(255,226,122,.4)}
.game.oishii h3{color:var(--yellow)}
.game.mugen{border-color:rgba(167,123,255,.55)}
.game.mugen h3{color:var(--purple)}
.game .btn{margin-right:10px}
.features{padding-left:20px;display:grid;gap:4px}
.small{font-size:.9rem;color:var(--muted)}
.links a{color:var(--blue)}
.tag{display:inline-block;background:rgba(127,227,255,.15);color:var(--blue);padding:4px 12px;border-radius:999px;font-size:.85rem;font-weight:700;margin:4px 6px 4px 0}
.btn{display:inline-block;margin-top:14px;padding:12px 22px;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff;text-decoration:none;font-weight:800}
.btn.soon{background:#4a3f86;color:var(--muted);cursor:default}
.about{text-align:center;max-width:640px;margin:0 auto;color:var(--muted)}
.contact{text-align:center}
footer{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding:24px 0;text-align:center;color:var(--muted);font-size:.9rem}
footer a{color:var(--muted);margin:0 8px}
.doc{background:var(--card);border-radius:20px;padding:32px;margin:20px 0 40px}
.doc h1{font-size:2rem;margin-bottom:6px;color:var(--pink)}
.doc h2{font-size:1.3rem;margin:26px 0 8px;text-align:left;color:var(--blue)}
.doc p,.doc li{color:var(--text);margin-bottom:10px}
.doc ul{padding-left:22px}
.doc .date{color:var(--muted)}
@media (max-width:430px){.brand span{display:none}}
@media (max-width:560px){.brand{font-size:1.05rem;white-space:nowrap}.brand img{width:34px;height:34px}nav a{margin-left:12px;font-size:.9rem}.doc{padding:22px}}