.asteroid-shell { background:var(--surface); border:1px solid var(--border); border-radius:22px; overflow:hidden; }
.asteroid-toolbar, .asteroid-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; background:var(--surface2); }
.asteroid-toolbar > div:first-child { display:flex; flex-direction:column; gap:3px; }
.asteroid-toolbar span, .asteroid-controls-hint, .asteroid-footer { color:var(--muted); font-size:12px; }
.asteroid-stage-wrap { position:relative; width:100%; aspect-ratio:900/520; background:#050914; }
#asteroidCanvas { width:100%; height:100%; display:block; }
.asteroid-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:rgba(2,5,12,.72); backdrop-filter:blur(4px); padding:24px; }
.asteroid-overlay.hidden { display:none; }
.asteroid-overlay h3 { color:#fff; font-size:28px; margin-bottom:8px; }
.asteroid-overlay p { color:#aab5c4; margin-bottom:18px; }
.asteroid-overlay .btn-primary { flex:none; min-width:150px; }
.asteroid-mobile-controls { display:none; grid-template-columns:repeat(4,64px); justify-content:center; gap:10px; padding:14px; background:var(--surface2); }
.asteroid-mobile-controls button { height:58px; border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--text); font-size:24px; font-weight:800; touch-action:none; }
.asteroid-mobile-controls .shoot { color:#ff6b6b; }

@media (max-width: 768px) {
  .asteroid-controls-hint { display:none; }
  .asteroid-mobile-controls { display:grid; }
  .asteroid-stage-wrap { aspect-ratio:4/3; }
}