:root {
  --bg: #0a0c14;
  --glass: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.12);
  --accent: #00e5ff;
  --danger: #ff3d71;
  --text: #eaf0ff;
  --text-dim: #8b95ab;
  --panel: rgba(16, 22, 40, 0.65);
}
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-tap-highlight-color: transparent; }
body {
  background: radial-gradient(circle at 50% 30%, #1a233d 0%, var(--bg) 70%);
  color: var(--text); font-family: system-ui, -apple-system, sans-serif;
  height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.stars {
  position: fixed; inset: 0; z-index: -1; opacity: 0.7;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 230px 80px, #fff, transparent),
    radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.7), transparent);
  background-size: 360px 200px;
  animation: drift 80s linear infinite;
}
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-200px); } }
.glass-panel {
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.1);
  padding: 16px; transition: transform 0.2s, opacity 0.2s; pointer-events: auto;
}
.hud {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 24px; font-size: 14px; font-weight: 600; letter-spacing: 0.5px;
  padding: 10px 20px; z-index: 10;
}
.hud b { color: var(--accent); margin-left: 6px; }
#game {
  max-width: 600px; width: 94%; height: 80vh; max-height: 800px;
  border-radius: 16px; background: rgba(5,8,16,0.7); border: 1px solid var(--border);
  touch-action: none; cursor: grab;
}
#overlay {
  position: absolute; inset: 16px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 12px;
  z-index: 20; transition: opacity 0.25s;
}
#overlay h1 { font-size: clamp(28px, 6vw, 42px); letter-spacing: 2px; text-shadow: 0 0 20px var(--accent); }
#overlay p { color: var(--text-dim); font-size: 15px; margin-bottom: 8px; }
.controls { margin-bottom: 12px; font-size: 13px; color: var(--text-dim); opacity: 0.8; }
#btn {
  background: rgba(0, 229, 255, 0.12); border: 1px solid var(--accent); color: var(--accent);
  padding: 12px 28px; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: all 0.2s; text-transform: uppercase; letter-spacing: 1px;
}
#btn:active, #btn:focus { background: var(--accent); color: #000; transform: scale(0.96); box-shadow: 0 0 18px var(--accent); }
.paused-overlay { cursor: default; pointer-events: auto; }
.paused-overlay::before { content: "◉ PAUSED — TAP ANYWHERE"; font-size: 14px; color: var(--accent); animation: pulse 1.5s ease-in-out infinite; margin-top: 8px; }
@keyframes pulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
@media (max-width: 420px) { .hud { gap: 14px; font-size: 12px; } .hud b { font-size: 12px; } #game { height: 75vh; } }