:root { color-scheme: dark; font-family: "Segoe UI", system-ui, Roboto, Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #05030a; }
body.transparent { background: transparent; }
main { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
#stage { position: relative; width: min(100vw, 56.25vh); height: min(100vh, 177.777778vw); }
#stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#hud, #labels { pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
noscript, #no-webgl { position: fixed; inset: 40% 10% auto; padding: 2rem; text-align: center; background: #0b5e50; color: #fff; border-radius: 1rem; font-weight: 700; }
body.no-webgl #no-webgl { display: block; }
#audio-unlock { position: fixed; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; width: max-content; max-width: 88vw; padding: 15px 22px; border: 1px solid #7ff5e4; border-radius: 22px; background: #0b3f37f5; color: #fff7ea; font: 800 clamp(12px, 2vh, 21px) "Segoe UI", system-ui, Arial, sans-serif; text-align: left; box-shadow: 0 12px 50px #04201c88, 0 0 30px #2ec4b644; cursor: pointer; }
#audio-unlock[hidden] { display: none; }
#audio-unlock small { display: block; margin-top: 5px; color: #b9e6dc; font-size: .62em; font-weight: 500; }
#audio-unlock .audio-symbol { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #2ec4b6; color: #06352d; font-size: 22px; }
#audio-unlock:hover { background: #14574c; }
#audio-unlock:focus-visible { outline: 3px solid #fff7ea; outline-offset: 5px; }