/* © 2025 pezzaliAPP — Asteroid PWA. MIT License */
:root{ --fg:#e6e6e6; --bg:#000; --muted:#888; }
*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body,#app{ height:100%; margin:0; background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
#app{ position:relative; overflow:hidden; touch-action:none; overscroll-behavior: none; }

#game{ display:block; width:100vw; height:100vh; }

#hud{ position:fixed; top:env(safe-area-inset-top); left:0; right:0; display:flex; gap:12px; justify-content:space-between; padding:10px 16px; font-weight:700; text-shadow:0 0 6px #000; pointer-events:none; }
#hud #fps{ color:var(--muted); font-weight:500; }

#controls{ position:fixed; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 8px); display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; padding: 0 10px; user-select:none; }
.pad{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); border-radius:12px; aspect-ratio: 1.6 / 1; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pad:active{ background:rgba(255,255,255,0.18); }

.overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.72); z-index:5; }
.card{ background:#111; border:1px solid #333; padding:20px; border-radius:14px; width:min(520px, 92vw); text-align:center; }
.card h1{ margin-top:0; letter-spacing:2px; }
.card button{ padding:12px 18px; border-radius:10px; border:0; font-weight:700; }
.card ul{ text-align:left; color:#ccc; }

/* Prevent accidental text selection */
::selection{ background:transparent; }