:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --muted:#444;
  --ink-inv:#ffffff;
  --fluor:#39ff6f;
}

}
body_nodark{
  --bg:#0b0b0b;
  --ink:#f1f1f1;
  --muted:#bdbdbd;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background: var(--bg);
  overflow:hidden;
  transition: background .3s ease, color .3s ease;
}

.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
.glow{
  position:absolute; inset:0;
  background: radial-gradient(600px 400px at 20% 30%, rgba(57,255,111,.35), transparent 60%),
              radial-gradient(500px 500px at 80% 75%, rgba(57,255,111,.22), transparent 60%);
  filter: blur(30px);
  pointer-events:none;
  transition: transform .3s ease, opacity .3s ease;
}
body_nodark .glow{
  opacity:.8;
  background: radial-gradient(700px 480px at 20% 30%, rgba(57,255,111,.40), transparent 60%),
              radial-gradient(560px 560px at 80% 75%, rgba(57,255,111,.30), transparent 60%);
}

.hero{
  min-height:100svh;
  display:grid; place-items:center;
  gap:2rem; padding:2rem; text-align:center;
}

.logo{ width:min(520px, 70vw); height:auto; filter: drop-shadow(0 6px 20px rgba(0,0,0,.08)); user-select:none; }
.logo-link{ outline:none; border-radius:20px; }
.logo-link:focus-visible{ box-shadow: 0 0 0 6px rgba(57,255,111,.28); }

.social{ display:flex; gap:1rem; align-items:center; justify-content:center; }
.btn{
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:999px; text-decoration:none;
  background:#111; color:#fff; border:1px solid rgba(255,255,255,.08);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body_nodark .btn{ background:#222; border-color:rgba(255,255,255,.08); color:#fff; }
.btn:hover{ transform: translateY(-3px) scale(1.03); background:#000;
  box-shadow: 0 10px 25px rgba(0,0,0,.18), 0 0 0 8px rgba(57,255,111,.12);
}
.btn svg{ width:26px; height:26px; fill:currentColor; }

.footer{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; justify-content:center; padding:.8rem 1rem;
  font-size:.8rem; color:var(--muted); pointer-events:none;
  background: linear-gradient(to top, color-mix(in oklab, var(--bg), transparent 40%), transparent);
}

/* CTA modal */
.cta[hidden]{ display:none; }
.cta{ position:fixed; inset:0; z-index:10; }
.cta-backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,.38); backdrop-filter: blur(5px);
}
.cta-card{
  position:absolute; inset:0; margin:auto;
  width:min(560px, 90vw); padding:2rem 1.5rem;
  border-radius:22px; background: var(--bg); color:var(--ink);
  box-shadow: 0 30px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.05);
  transform: translateY(10px); opacity:0; transition: .25s ease;
}
.cta.open .cta-card{ transform: translateY(0); opacity:1; }
.cta h2{ margin:0 0 .5rem; letter-spacing:.5px; }
.cta p{ margin:.25rem 0 1rem; color:var(--muted); }
.cta-form{ display:flex; gap:.6rem; align-items:center; }
.cta-form input{
  flex:1; padding:.9rem 1rem; border-radius:14px; border:1px solid #e5e5e5; background:transparent; color:var(--ink);
}
body_nodark .cta-form input{ border-color:#2a2a2a; }
.btn-cta{
  padding:.9rem 1.1rem; border-radius:14px; border:0; cursor:pointer;
  background:#0f0f0f; color:#fff; letter-spacing:.3px;
  box-shadow: 0 10px 24px rgba(0,0,0,.2), 0 0 0 8px rgba(57,255,111,.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
body_nodark .btn-cta{ background:#1b1b1b; }
.btn-cta:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.28), 0 0 0 8px rgba(57,255,111,.15); }
.cta-close{
  position:absolute; top:10px; right:12px; font-size:18px; border:0; background:transparent; color:var(--muted); cursor:pointer;
}

#circles{ position:absolute; inset:0; width:100%; height:100%; display:block; }


/* --- Mobile touch HUD (subtle, only visible while touching) --- */
body.playing.touching .hud-left,
body.playing.touching .hud-right {
  position: fixed;
  bottom: 6vh;
  width: 24vw; height: 24vw; max-width: 160px; max-height:160px;
  border-radius: 999px;
  box-shadow: 0 0 0 10px rgba(57,255,111,.12), inset 0 0 0 2px rgba(0,0,0,.08);
  backdrop-filter: blur(4px);
  z-index: 5;
}
body.playing.touching .hud-left { left: 6vw; }
body.playing.touching .hud-right { right: 6vw; }
body.playing.touching .hud-left::after,
body.playing.touching .hud-right::after{
  content: '';
  position:absolute; inset:0; margin:auto;
  width: 28%; height:28%; border-radius:999px;
  background: rgba(57,255,111,.45);
}


/* --- Explicit mobile pads (visible only while playing) --- */
.pad{ display:none; }
body.playing .pad{ display:block; position:fixed; z-index:999; touch-action:none; }
#pad-left, #pad-right{
  bottom: 5.5vh; width: 26vw; height: 26vw; max-width: 180px; max-height: 180px;
  border-radius:999px; backdrop-filter: blur(4px);
  box-shadow: 0 0 0 10px rgba(57,255,111,.10), inset 0 0 0 2px rgba(0,0,0,.06);
}
#pad-left{ left: 5vw; }
#pad-right{ right: 5vw; }
#pad-left::after, #pad-right::after{
  content:''; position:absolute; inset:0; margin:auto; width:34%; height:34%; border-radius:999px;
  background: rgba(57,255,111,.40);
}
/* Fire zone covers top half: invisible but active */
#pad-fire{ top:0; left:0; right:0; height:50vh; background: transparent; }

/* iOS Safari improvements */
html, body { overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body.playing { touch-action: none; }
.footer { padding-bottom: calc(.8rem + env(safe-area-inset-bottom)); }
#pad-left, #pad-right { bottom: calc(5.5vh + env(safe-area-inset-bottom)); }