:root {
  --bg: #000000; --card: rgba(10,10,15,0.8); --card2: rgba(20,20,30,0.8);
  --text: #f4f4f5; --muted: #a1a1aa;
  --accent: #38bdf8; --on-accent: #022c22;
  --line-soft: rgba(255,255,255,0.1);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:system-ui,sans-serif; user-select:none; -webkit-user-select:none; overflow:hidden; touch-action:none; }
.game-shell { display:flex; flex-direction:column; height:100dvh; }
.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:absolute; top:0; left:0; right:0; background:linear-gradient(rgba(0,0,0,0.8), transparent); }
.hud-back { width:40px; height:40px; display:grid; place-items:center; color:var(--text); }
.hud-back svg { width:24px; height:24px; }
.hud-mid { text-align:center; display:flex; flex-direction:column; text-shadow:0 0 8px rgba(56,189,248,0.5); }
.hud-kicker { font-size:10px; color:var(--accent); letter-spacing:0.15em; font-weight:700; margin-bottom:2px; }
.hud-title { font-size:16px; font-weight:600; }
.hud-stats { padding-right:16px; }
.hud-score { font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--accent); text-shadow:0 0 10px var(--accent); }
.stage-wrap { flex:1; position:relative; overflow:hidden; background:#000; }
#webgl-container { position:absolute; inset:0; }
#webgl-container canvas { width:100% !important; height:100% !important; display:block; }

.health-bar-container { position:absolute; bottom:calc(20px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:200px; height:6px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; z-index:5; box-shadow:0 0 10px rgba(0,0,0,0.5); }
#healthFill { height:100%; width:100%; background:#34d399; transition:width 0.1s; box-shadow:0 0 10px #34d399; }

/* Overlay */
.overlay { position:absolute; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity 0.25s; z-index:20; }
.overlay.is-open { opacity:1; pointer-events:auto; }
.overlay-card { background:var(--card); border:1px solid var(--accent); border-radius:16px; padding:32px 24px; width:100%; max-width:320px; text-align:center; box-shadow:0 0 40px rgba(56,189,248,0.2); transform:scale(0.95); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.overlay.is-open .overlay-card { transform:scale(1); }
.overlay-icon { width:64px; height:64px; background:rgba(56,189,248,0.1); border-radius:50%; display:grid; place-items:center; color:var(--accent); margin:0 auto 16px; border:1px solid rgba(56,189,248,0.3); }
.overlay-icon svg { width:32px; height:32px; }
.overlay-card h1, .overlay-card h2 { font-size:24px; font-weight:700; margin-bottom:12px; color:#fff; text-shadow:0 0 10px var(--accent); }
.overlay-card p { font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:24px; }
.overlay-kicker { font-size:11px; letter-spacing:0.2em; color:#ef4444; display:block; margin-bottom:8px; text-shadow:0 0 10px #ef4444; }
.end-score { font-size:48px; font-weight:800; color:var(--accent); margin-bottom:16px; text-shadow:0 0 24px var(--accent); }

/* Buttons */
.btn-primary, .btn-ghost { display:block; width:100%; padding:14px; border-radius:8px; font-size:16px; font-weight:600; text-align:center; border:none; cursor:pointer; text-decoration:none; transition:all 0.2s; text-transform:uppercase; letter-spacing:1px; }
.btn-primary { background:var(--accent); color:var(--on-accent); box-shadow:0 0 20px rgba(56,189,248,0.4); }
.btn-primary:active { transform:scale(0.97); }
.btn-ghost { background:rgba(255,255,255,0.06); color:var(--text); border:1px solid var(--line-soft); }
.btn-ghost:active { background:rgba(255,255,255,0.1); }
.is-hidden { display:none !important; }