html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#000;touch-action:none;overscroll-behavior:none}body{position:fixed;inset:0}#overlay{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#1e376e59,#04060cd9);z-index:8}#overlay.hidden{display:none}.overlay-card{display:grid;gap:14px;padding:36px 40px;border-radius:16px;background:#060a1499;border:1px solid rgba(124,214,255,.2);box-shadow:0 18px 40px #00000059;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.overlay-title{font-size:32px;letter-spacing:.08em;text-transform:uppercase;color:#e7f0fff2}#enter-room{border:0;padding:10px 16px;border-radius:10px;background:#7cd6ffd9;color:#08111f;font-weight:600;letter-spacing:.04em}.overlay-hint{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#c8d6ecd9}#c{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none;z-index:1}#crosshair{position:fixed;top:50%;left:50%;width:10px;height:10px;transform:translate(-50%,-50%);pointer-events:none;opacity:.85;transition:transform .16s ease,opacity .16s ease,box-shadow .16s ease,background .16s ease;z-index:4;background:#ffffffe6;box-shadow:0 0 8px #00000073;border-radius:50%}#crosshair:before,#crosshair:after{content:none}#crosshair.active{opacity:1;transform:translate(-50%,-50%) scale(2.1);background:#7cd6fff2;box-shadow:0 0 14px #7cd6ffbf}#crosshair.active:before,#crosshair.active:after{content:none}#touch-controls{position:fixed;left:24px;bottom:calc(22px + env(safe-area-inset-bottom));display:none;grid-template-rows:auto auto;gap:10px;z-index:5;transform:none;user-select:none;-webkit-user-select:none;touch-action:none;pointer-events:auto}#touch-controls.active{display:grid}#touch-controls .ctrl-row{display:grid;grid-template-columns:repeat(3,48px);gap:10px;justify-content:center}#touch-controls .ctrl-btn{width:48px;height:48px;border-radius:12px;border:0;background:#080c142e;color:#e8f0ff;font-size:0;letter-spacing:.02em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px #0000002e;opacity:.75;touch-action:none}#touch-controls .ctrl-btn:active{background:#78d2ff33;opacity:.95}#touch-controls .ctrl-btn[data-action=forward]{margin:0 auto 2px}#touch-controls .ctrl-btn:before{content:"";display:block;width:0;height:0;margin:0 auto;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:13px solid rgba(255,255,255,.9);filter:drop-shadow(0 0 6px rgba(124,214,255,.35))}#touch-controls .ctrl-btn[data-action=back]:before{transform:rotate(180deg)}#touch-controls .ctrl-btn[data-action=left]:before{transform:rotate(-90deg)}#touch-controls .ctrl-btn[data-action=right]:before{transform:rotate(90deg)}#audio-toggle{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));width:48px;height:48px;border-radius:12px;border:0;background:#080c142e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px #0000002e;opacity:.75;z-index:9;touch-action:none}#audio-toggle:before,#audio-toggle:after{content:"";position:absolute}#audio-toggle:before{width:12px;height:18px;left:12px;top:15px;background:#ffffffe6;clip-path:polygon(0 25%,55% 25%,100% 0,100% 100%,55% 75%,0 75%)}#audio-toggle:after{width:3px;height:14px;left:30px;top:17px;background:#7cd6ffe6;box-shadow:6px 2px #7cd6ffcc,12px -1px #7cd6ff99;border-radius:2px}#audio-toggle.off{opacity:.45}#audio-toggle.off:after{width:22px;height:2px;left:12px;top:23px;background:#fff9;box-shadow:none;transform:rotate(-35deg)}#hint{position:fixed;top:18px;right:18px;padding:8px 12px;border-radius:10px;background:#080c1480;color:#e7f0ffe6;font-size:12px;letter-spacing:.02em;text-transform:uppercase;opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease;z-index:6;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#hint.active{opacity:1;transform:translateY(0)}@media(pointer:coarse){#touch-controls{display:grid}}