:root {
  --ui:   #ff2fd5; /* neon pink for HUD + ship glow */
  --warn: #4dcfff; /* neon blue for bullets/accents */
  --sun:  #ffa36c; /* warm sun glow */
}
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #05070c; overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #e7faff;
}

/* Canvas fills screen */
#game {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display: block;
}

/* HUD */
.hud {
  position: fixed; top: env(safe-area-inset-top, 10px); left: 10px; right: 10px;
  display: flex; justify-content: space-between; gap: 14px; pointer-events: none;
  mix-blend-mode: screen; text-shadow: 0 0 8px var(--ui);
  font-weight: 700; letter-spacing: .08em;
}
.hud .score, .hud .lives, .hud .weapon { color: var(--ui); }

/* Overlay */
.overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(130% 130% at 50% 0%, rgba(255,47,213,.12), rgba(0,0,0,.7) 60%);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.overlay.show { opacity: 1; pointer-events: all; }
.panel {
  background: rgba(6,10,18,.7);
  border: 1px solid rgba(255,47,213,.35);
  box-shadow: 0 0 40px rgba(255,47,213,.2), inset 0 0 20px rgba(255,47,213,.05);
  padding: 24px 28px; border-radius: 16px; text-align: center; backdrop-filter: blur(4px);
}
.panel h1 { margin: 0 0 6px; font-size: clamp(28px, 6vw, 48px); color: var(--ui); }
.panel p  { margin: 0 0 16px; opacity: .85; }
.panel .start {
  background: var(--ui); color: #300527; border: 0; padding: 10px 20px; border-radius: 999px;
  font-weight: 800; letter-spacing: .1em; cursor: pointer;
}

/* Touch controls */
.controls {
  position: fixed; bottom: 0; left: 0; right: 0; height: 34vh; pointer-events: none;
  display: grid; grid-template-columns: 1fr; align-items: end; gap: 12px; padding: 12px;
}
.thumb-zone {
  pointer-events: auto; height: 28vh; margin: 0 12px 8px; border-radius: 14px;
  border: 1px dashed

  /* Layering */
#game { z-index: 0; }
.hud { z-index: 10; }
.controls { z-index: 9; }
.overlay { z-index: 20; }
.toast { z-index: 30; } /* keep this highest */