:root{
  --bg-dark: #071024;
  --retro-grid: rgba(255,255,255,0.03);
  --panel: rgba(255,255,255,0.03);
  --accent: #ff5fa2;
  --accent2: #66f0ff;
  --power: #6bff8a;
  --text: #eaf6ff;
}

html,body{
  height:100%;
  margin:0;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(255,80,170,0.04), transparent),
              radial-gradient(900px 600px at 90% 90%, rgba(100,240,255,0.03), transparent),
              var(--bg-dark);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  touch-action: none;
  color:var(--text);
  cursor: none; /* hide system cursor for immersive, dynamic touch-first feel */
}

/* subtle retro noise texture using gradients */
#game{
  display:block;
  width:100vw;
  height:100vh;
  /* layered texture with center points so parallax translation looks nice */
  background-image:
    linear-gradient(transparent 95%, rgba(255,255,255,0.01) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.01) 95%, transparent 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.01) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, rgba(10,10,20,0.15), transparent 40%),
    radial-gradient(circle at 40% 30%, rgba(255,80,170,0.06), transparent 12%),
    radial-gradient(circle at 70% 70%, rgba(100,240,255,0.05), transparent 14%),
    /* subtle filmgrain dots */
    radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.01) 1px, transparent 1px),
    var(--bg-dark);
  background-size: auto, auto, auto, auto, auto, auto, 6px 6px, 12px 12px;
  background-blend-mode: overlay, overlay, overlay, normal, normal, normal, overlay, overlay;
  background-position: 50% 50%;
  transition: background-position 160ms linear;
  touch-action: none;
  filter: contrast(1.06) saturate(1.08);
  /* subtle animated parallax sheen */
  animation: bgFloat 6s linear infinite;
}

/* moving layers for more interesting background motion */
@keyframes bgFloat {
  0%   { background-position: 48% 50%; transform: translateZ(0); }
  25%  { background-position: 52% 48%; }
  50%  { background-position: 50% 52%; }
  75%  { background-position: 46% 50%; }
  100% { background-position: 48% 50%; }
}

/* HUD */
#hud{
  position: absolute;
  left:10px;
  top:10px;
  display:flex;
  gap:8px;
  align-items:center;
  background:var(--panel);
  padding:8px;
  border-radius:10px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.04);
}

#score{
  color:var(--text);
  font-weight:700;
  font-size:16px;
  min-width:90px;
  text-align:left;
  text-shadow:0 1px 8px rgba(102,240,255,0.06);
}

#reset{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  padding:6px 10px;
  border-radius:8px;
  font-weight:700;
  color:var(--text);
  min-width:56px;
  touch-action: manipulation;
}

#reset:active{ transform:scale(.98); }

/* modal for email prompt */
#emailModal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6));
  z-index:40;
  padding:20px;
}
#emailModal[aria-hidden="false"]{ display:flex; }
.modalInner{
  width:min(420px, 92%);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius:12px;
  padding:16px;
  box-shadow:0 8px 40px rgba(0,0,0,0.6);
  text-align:center;
  color:var(--text);
  border:1px solid rgba(255,255,255,0.04);
}
.modalInner h3{ margin:0 0 8px; color:var(--text); }
.modalInner p{ margin:0 0 12px; color:rgba(255,255,255,0.7); font-size:14px; }
#userEmail{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  margin-bottom:12px;
  font-size:14px;
  box-sizing:border-box;
  background: rgba(0,0,0,0.25);
  color:var(--text);
}
.modalActions{ display:flex; gap:8px; justify-content:center; }
.modalActions button{
  padding:8px 12px;
  border-radius:8px;
  border:0;
  background:var(--accent);
  color:white;
  font-weight:700;
  min-width:96px;
  box-shadow:0 6px 18px rgba(255,95,162,0.12);
}
.modalActions button:last-child{
  background:transparent;
  color:var(--text);
  border:1px solid rgba(255,255,255,0.06);
}

/* small helper for paddle hint (not intrusive) */
.pulse{
  box-shadow: 0 0 18px rgba(255,95,162,0.06);
}