:root {
  --bg: #09090b; --card: rgba(22, 22, 26, 0.4); --card2: rgba(28, 28, 34, 0.5);
  --text: #f4f4f5; --muted: #a1a1aa;
  --accent: #00f0ff; --on-accent: #0a1220;
  --line-soft: rgba(255,255,255,0.1);
  --neon-glow: 0 0 10px rgba(0, 240, 255, 0.5), 0 0 20px rgba(0, 240, 255, 0.3);
  --purple-glow: 0 0 15px rgba(186, 85, 211, 0.6);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { 
  background: url('../img/bg.jpg') center/cover no-repeat; 
  background-color: var(--bg);
  color: var(--text); 
  font-family: 'Inter', system-ui, sans-serif; 
  user-select: none; 
  -webkit-user-select: none; 
  overflow: hidden; 
}
.game-shell { display:flex; flex-direction:column; height:100dvh; background: rgba(0,0,0,0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hud { flex:none; display:flex; align-items:center; justify-content:space-between; padding:env(safe-area-inset-top) 16px 0; height:calc(60px + env(safe-area-inset-top)); z-index:10; position:relative; }
.hud-back { width:40px; height:40px; display:grid; place-items:center; color:var(--text); background: rgba(255,255,255,0.05); backdrop-filter: blur(8px); border-radius: 50%; border: 1px solid var(--line-soft); }
.hud-back svg { width:20px; height:20px; }
.hud-mid { text-align:center; display:flex; flex-direction:column; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.hud-kicker { font-size:10px; color:var(--accent); letter-spacing:0.15em; font-weight:800; margin-bottom:2px; text-transform: uppercase; text-shadow: var(--neon-glow); }
.hud-title { font-size:18px; font-weight:700; letter-spacing: 0.05em; }
.hud-score { font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; margin-right:16px; text-shadow: var(--neon-glow); color: #fff;}
.stage-wrap { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
#gameCanvas { display:block; width:100%; height:100%; mix-blend-mode: screen; }

/* Overlay */
.overlay { position:absolute; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity 0.3s ease; z-index:20; }
.overlay.is-open { opacity:1; pointer-events:auto; }
.overlay-card { 
  background: rgba(20, 20, 30, 0.6); 
  border: 1px solid rgba(0, 240, 255, 0.2); 
  border-radius: 24px; 
  padding: 32px 24px; 
  width: 100%; 
  max-width: 320px; 
  text-align: center; 
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.1), inset 0 0 20px rgba(186, 85, 211, 0.1); 
  backdrop-filter: blur(24px);
  transform: scale(0.9); 
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
}
.overlay.is-open .overlay-card { transform:scale(1); }
.overlay-icon { width:72px; height:72px; background:rgba(0,240,255,0.1); border: 1px solid rgba(0,240,255,0.3); border-radius:50%; display:grid; place-items:center; color:var(--accent); margin:0 auto 20px; box-shadow: var(--neon-glow); }
.overlay-icon svg { width:36px; height:36px; }
.overlay-card h1, .overlay-card h2 { font-size:26px; font-weight:800; margin-bottom:12px; letter-spacing: 0.05em; text-shadow: 0 2px 10px rgba(255,255,255,0.2); }
.overlay-card p { font-size:15px; color:var(--muted); line-height:1.6; margin-bottom:24px; }
.end-score { font-size:56px; font-weight:900; color:#fff; margin-bottom:16px; text-shadow: var(--neon-glow), 0 0 40px var(--accent); }

/* Buttons */
.btn-primary, .btn-ghost { display:block; width:100%; padding:16px; border-radius:16px; font-size:16px; font-weight:700; text-align:center; border:none; cursor:pointer; text-decoration:none; transition:all 0.2s ease; letter-spacing: 0.05em; text-transform: uppercase; }
.btn-primary { 
  background: linear-gradient(135deg, #00f0ff 0%, #ba55d3 100%); 
  color: #fff; 
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.4); 
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(0, 240, 255, 0.6); transform: translateY(-2px); }
.btn-primary:active { transform:scale(0.97) translateY(0); }
.btn-ghost { background:rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color:var(--text); margin-bottom:12px; backdrop-filter: blur(8px); }
.btn-ghost:hover { background:rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.btn-ghost:active { background:rgba(255,255,255,0.05); transform:scale(0.97); }
.is-hidden { display:none !important; }

/* Charge Indicator */
#chargeIndicator { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); width:160px; height:8px; background:rgba(0,0,0,0.5); border: 1px solid rgba(0,240,255,0.3); border-radius:8px; overflow:hidden; opacity:0; transition:opacity 0.3s; pointer-events:none; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
#chargeFill { height:100%; width:0%; background: linear-gradient(90deg, #ba55d3, #00f0ff); box-shadow: 0 0 10px #00f0ff; }