:root{
  --bg:#071019;
  --panel:#0b1216;
  --muted:#9aa7b0;
  --accent:#ffa7c4;
  --accent-2:#8be7d1;
  --glass: rgba(255,255,255,0.04);
  --card: rgba(255,255,255,0.03);
  --glass-2: rgba(139,231,209,0.06);
  --radius:14px;
  --font-pixel: 'Press Start 2P', monospace;
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  background: radial-gradient(1000px 600px at 10% 10%, rgba(139,231,209,0.06), transparent 10%),
              radial-gradient(800px 500px at 90% 90%, rgba(255,167,196,0.04), transparent 10%),
              var(--bg);
  color: #e7eef0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:12px;
}

.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  padding:10px;
  margin-bottom:8px;
}
.logo{display:flex;gap:10px;align-items:center}
.logo-svg{width:44px;height:44px;color:var(--accent)}
.brand{
  font-family:var(--font-pixel);
  font-size:13px;
  color:var(--accent-2);
  letter-spacing:1px;
}

.nav{display:flex;gap:8px;align-items:center}
.nav-btn{
  background:transparent;border:1px solid transparent;color:var(--muted);
  padding:8px 12px;border-radius:10px;font-size:12px;
  transition:all .24s;cursor:pointer;
}
.nav-btn:hover{color:#fff;border-color:rgba(255,255,255,0.04);transform:translateY(-3px)}
.nav-btn[aria-current="true"]{color:var(--accent);border-color:rgba(255,167,196,0.08);box-shadow:0 6px 24px rgba(255,167,196,0.04)}
.store-btn{padding:8px 12px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071019;font-weight:700;text-decoration:none;font-size:12px}

.hamburger{display:none;background:transparent;border:0;padding:8px;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--muted);margin:4px 0;border-radius:2px}

.main{min-height:62vh;display:block}
.page{display:none;padding:14px;border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);backdrop-filter:blur(6px)}
.page.active{display:block;animation:pageIn .5s ease both}
@keyframes pageIn {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.hero{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:18px;border-radius:12px;background:linear-gradient(135deg, rgba(139,231,209,0.02), rgba(255,167,196,0.02));box-shadow:0 8px 30px rgba(0,0,0,0.5)}
.hero-title{font-family:var(--font-pixel);font-size:22px;margin:0;color:var(--accent)}
.hero-sub{color:var(--muted);margin:0}
.hero-cta{display:flex;gap:8px;margin-top:8px}
.cta{padding:10px 14px;border-radius:12px;text-decoration:none;border:1px solid rgba(255,255,255,0.03);cursor:pointer}
.cta.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071019;font-weight:700}
.cta.ghost{background:transparent;color:var(--muted)}

.preview-strip{display:flex;gap:12px;margin-top:12px;overflow:hidden}
.card{display:flex;gap:12px;background:var(--card);padding:12px;border-radius:12px;min-width:180px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,0.45);transition:transform .28s ease}
.card:hover{transform:translateY(-8px) rotate(-1deg)}
.card-art{width:72px;height:72px;border-radius:10px;background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:inset 0 -8px 30px rgba(0,0,0,0.4)}
.card-info h3{margin:0;font-size:12px;font-family:var(--font-pixel);color:var(--accent)}
.card-info p{margin:6px 0 0;font-size:11px;color:var(--muted)}
.card-links{display:flex;gap:6px;margin-top:8px}
.card .link{font-size:11px;color:var(--accent-2);text-decoration:none}

.art-1{background:linear-gradient(135deg, #ff9db0, #ffd6e3); animation:artmove 6s ease-in-out infinite}
.art-2{background:linear-gradient(135deg, #8be7d1, #c9fff2); animation:artmove 5s ease-in-out infinite reverse}
.art-3{background:linear-gradient(135deg, #ffd7a8, #fff4ea); animation:artmove 7s ease-in-out infinite}
@keyframes artmove{0%{filter:hue-rotate(0deg) saturate(100%)}50%{filter:hue-rotate(12deg) saturate(120%)}100%{filter:hue-rotate(0deg) saturate(100%)}} 

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:10px}
.gamecard{background:var(--panel);padding:12px;border-radius:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.game-art{width:100%;height:120px;border-radius:10px;background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02))}
.game-actions{display:flex;gap:8px;width:100%}
.btn{flex:1;padding:8px;border-radius:10px;text-align:center;background:rgba(255,255,255,0.02);color:var(--muted);text-decoration:none;font-size:12px}

.about-card{padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.mono{font-family:monospace;color:var(--accent-2)}

.footer{display:flex;justify-content:space-between;gap:12px;padding:12px;margin-top:10px;color:var(--muted);font-size:13px}

@media (max-width:720px){
  .nav{display:none}
  .hamburger{display:block}
  .preview-strip{flex-direction:column}
  body{padding:10px}
  .logo-svg{width:40px;height:40px}
}

.pulse{animation:pulse 4s infinite}
@keyframes pulse{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.float{animation:float 5s infinite ease-in-out}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
.drift{animation:drift 6s infinite}
@keyframes drift{0%{transform:translateX(0)}50%{transform:translateX(6px)}100%{transform:translateX(0)}}