: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: #120904; }
body.transparent { background: transparent; }
body.green { background: #00b140; }
main { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
/* 9:16 öncelikli; yatay pencerede tuval genişler (kamera en-boy oranına uyar) */
#stage { position: relative; width: 100vw; height: 100vh; }
#stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#hud { 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: #5a2a12; 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 #ffc98a; border-radius: 22px; background: #4a200cf5; color: #fff3dc; font: 800 clamp(12px, 2vh, 21px) "Segoe UI", system-ui, Arial, sans-serif; text-align: left; box-shadow: 0 12px 50px #1a070288, 0 0 30px #d9822b44; cursor: pointer; }
#audio-unlock[hidden] { display: none; }
#audio-unlock small { display: block; margin-top: 5px; color: #ffd9a8; 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: #d9822b; color: #2a1200; font-size: 22px; }
#audio-unlock:hover { background: #5e2a10; }
#audio-unlock:focus-visible { outline: 3px solid #fff3dc; outline-offset: 5px; }