html, body { margin: 0; height: 100%; background: #0b1020; overflow: hidden; font-family: system-ui, sans-serif; color: #fff; }
canvas { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: none; }
#hud { position: fixed; top: 12px; left: 16px; right: 16px; display: flex; justify-content: space-between; font-weight: 700; font-size: 20px; pointer-events: none; }
#overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(5, 8, 20, .72); text-align: center; padding: 16px; }
#overlay h1 { margin: 0; font-size: 40px; letter-spacing: .02em; }
#overlay p { margin: 0; opacity: .85; }
#overlay.hidden { display: none; }
#start { border: 0; border-radius: 999px; padding: 12px 28px; font-size: 18px; font-weight: 700; background: #c94c00; color: #fff; cursor: pointer; }
#start:focus-visible { outline: 3px solid #ffb27a; outline-offset: 3px; }