:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --brand:#0ea5e9;
  --accent:#22c55e;
  --danger:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  color:var(--text); background:radial-gradient(1200px 600px at 50% -10%, #0b2a42 0%, var(--bg) 50%, #070b14 100%);
  line-height:1.6;
}
.container{max-width:1100px;margin-inline:auto;padding:1rem}
.site-header{
  position:sticky;top:0;z-index:1000;background:rgba(11,18,32,.8);backdrop-filter: blur(8px);border-bottom:1px solid #13233c;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);font-weight:700;letter-spacing:.2px}
.brand img{filter:drop-shadow(0 0 8px rgba(14,165,233,.45))}
.nav{display:flex}
.nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.nav a{color:var(--text);text-decoration:none;padding:.5rem .75rem;border-radius:.75rem}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav-toggle{display:none;background:none;border:none;padding:.5rem;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;border-radius:2px}

.hero{
  padding:4rem 0 2rem;
  text-align:center;
}
.hero h1{font-size: clamp(1.6rem, 3vw, 2.4rem);margin:.25rem 0}
.hero p{color:var(--muted);margin:.25rem 0 1rem}
.cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.button{background:linear-gradient(135deg,var(--brand),#38bdf8);color:#001a2b;border:none;padding:.8rem 1rem;border-radius:1rem;font-weight:700;cursor:pointer}
.button.secondary{background:transparent;color:var(--text);border:1px solid #28405f}
.button:active{transform:translateY(1px)}

.grid{display:grid;gap:1rem}
.feature-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:2rem 0}

.panel{
  background:linear-gradient(180deg,rgba(17,24,39,.65),rgba(15,23,42,.8));
  border:1px solid #19243a;border-radius:1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding:1rem;
}

.game-wrap{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start}
canvas{display:block;margin:0 auto;border-radius:1rem;background:#08101d;border:1px solid #1b2b47}

.hud{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.stat{padding:.5rem 1rem;background:#0d1b2f;border:1px solid #1b2b47;border-radius:.75rem;color:#9bd1ff}

.controls{display:flex;gap:.5rem;flex-wrap:wrap}
.controls button{padding:.6rem .9rem;border-radius:.75rem;border:1px solid #1b2b47;background:#0e1b2d;color:var(--text);cursor:pointer}
.controls button:hover{border-color:#25466f}
.controls .danger{border-color:#3a2430;background:#2b0e12;color:#ffb3c1}

.touchpad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top: .5rem;
}
.touchpad button{
  padding:1.2rem 0;border-radius:1rem;border:1px solid #1b2b47;background:#0e1b2d;color:var(--text);font-weight:700
}

.ad{min-height:90px;display:flex;align-items:center;justify-content:center;border:1px dashed #244163;border-radius:1rem;color:#65a9e6;background:#0a1425}
.ad small{color:#7fb6f0}

main{display:block}
.site-footer{margin-top:3rem;border-top:1px solid #13233c;background:#0b182b}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;align-items:start}
.footer-grid form{display:grid;grid-template-columns:1fr auto;gap:.5rem}
.footer-grid input, .footer-grid button{padding:.6rem .8rem;border-radius:.6rem;border:1px solid #1b2b47;background:#0e1b2d;color:var(--text)}

.notice{font-size:.9rem;color:#87c8ff;background:#0c1a2f;border:1px solid #1c2f4f;border-radius:.75rem;padding:.75rem}
kbd{background:#0b1a2e;padding:.2rem .4rem;border-radius:.4rem;border:1px solid #1b2a45;color:#9bd1ff}

@media (max-width: 800px){
  .nav{display:none}
  .nav.open{display:block;position:absolute;top:100%;right:.75rem;background:#0b1626;border:1px solid #1c2b46;border-radius:.8rem}
  .nav ul{flex-direction:column;padding:.5rem}
  .nav-toggle{display:block}
  .hero{padding:2.5rem 0 1rem}
}