:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #050608; color: #e8edf4; font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Arial, sans-serif; }
canvas { display: block; width: 100vw; height: 100vh; background: radial-gradient(circle at 50% 48%, #0b1118 0%, #050608 58%, #020304 100%); }
.hud { position: fixed; left: 22px; right: 22px; top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; pointer-events: none; color: rgba(232,239,246,.84); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.mark { color: rgba(232,239,246,.92); }
.status { flex: 1; color: rgba(154,183,216,.72); text-transform: none; letter-spacing: .02em; }
.controls { display: flex; gap: 8px; pointer-events: auto; }
button { color: rgba(232,239,246,.82); background: rgba(12,18,26,.42); border: 1px solid rgba(140,180,220,.22); border-radius: 999px; padding: 7px 12px; font: inherit; letter-spacing: .04em; text-transform: lowercase; cursor: pointer; backdrop-filter: blur(10px); }
button:hover { border-color: rgba(140,200,255,.48); color: #fff; }
@media (max-width: 720px) { .hud { left: 12px; right: 12px; top: 12px; flex-wrap: wrap; } .status { order: 3; flex-basis: 100%; } }