:root{--cyan:#55e9ff;--line:rgba(126,204,255,.18);--text:#eef8ff}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#02050c;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit}#ngApp{position:fixed;inset:0;overflow:hidden}#ngRoomCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#ngBoot{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;align-content:center;background:#030711;transition:opacity .35s ease,visibility .35s}.boot-mark{width:62px;height:62px;display:grid;place-items:center;border:1px solid rgba(85,233,255,.45);border-radius:18px;background:linear-gradient(145deg,#0a2740,#07111f);box-shadow:0 0 45px rgba(85,233,255,.2);font-size:30px;font-weight:950}.boot-title{margin-top:14px;font-weight:950;letter-spacing:5px}.boot-sub{margin-top:5px;color:#69819f;font-size:9px;letter-spacing:2.5px}.boot-bar{width:160px;height:3px;margin-top:18px;background:#0c1627;border-radius:4px;overflow:hidden}.boot-bar i{display:block;width:42%;height:100%;background:var(--cyan);animation:boot 1.1s infinite ease-in-out}@keyframes boot{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}#ngBoot.ready{opacity:0;visibility:hidden}
.room-topbar{position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:17px;background:rgba(2,8,18,.66);backdrop-filter:blur(18px);box-shadow:0 12px 40px rgba(0,0,0,.25);z-index:20}.brand{display:flex;align-items:center;gap:9px}.brand-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid rgba(85,233,255,.45);background:#071827;color:var(--cyan);font-weight:950}.brand b{display:block;font-size:12px;letter-spacing:1.8px}.brand small{display:block;color:#6e86a4;font-size:7px;letter-spacing:1.6px;margin-top:2px}.room-status{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:7px;align-items:center;color:#9eb1c8;font-size:8px;letter-spacing:1.5px;font-weight:850}.room-status i{width:7px;height:7px;border-radius:50%;background:#57e6a4;box-shadow:0 0 10px #57e6a4}.top-action{height:34px;padding:0 13px;border-radius:10px;border:1px solid rgba(85,233,255,.3);background:#061321;color:#dff8ff;font-size:9px;font-weight:900;letter-spacing:1.2px}
.room-location{position:absolute;left:14px;top:82px;padding:8px 10px;border-radius:10px;background:rgba(2,8,18,.55);border:1px solid rgba(126,204,255,.11);backdrop-filter:blur(12px);z-index:18}.room-location span{color:var(--cyan);margin-right:5px}.room-location b{font-size:9px;letter-spacing:1.2px}.room-location small{display:block;margin:3px 0 0 16px;color:#7187a4;font-size:8px}
.interact-wrap{position:absolute;right:18px;bottom:max(22px,env(safe-area-inset-bottom));z-index:30;text-align:right}.interact{display:flex;align-items:center;gap:9px;min-width:155px;height:58px;padding:0 17px;border-radius:17px;border:1px solid rgba(42,211,255,.7);background:rgba(3,12,25,.88);color:#eefcff;box-shadow:0 10px 35px rgba(0,0,0,.35),0 0 24px rgba(42,211,255,.08);font-size:10px;font-weight:950;letter-spacing:2.2px}.interact:active{transform:scale(.97)}.interact-ring{font-size:24px;line-height:1}.interact-wrap #ngInteractHint{margin-top:6px;color:#6d84a0;font-size:8px;letter-spacing:1px}
#newgenz-analog{position:absolute;left:22px;bottom:max(23px,env(safe-area-inset-bottom));z-index:30;width:116px;height:116px;touch-action:none;user-select:none}.joystick-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(61,215,255,.62);background:radial-gradient(circle at 50% 45%,rgba(40,110,155,.2),rgba(1,8,18,.78) 67%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 0 28px rgba(42,210,255,.13)}.joystick-ring:before{content:"";position:absolute;inset:12px;border-radius:50%;border:1px dashed rgba(93,190,255,.28)}.joystick-grid{position:absolute;inset:30px;border-radius:50%;background:linear-gradient(rgba(89,208,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(89,208,255,.1) 1px,transparent 1px);background-size:50% 50%;opacity:.55}.joystick-knob{position:absolute;width:56px;height:56px;left:30px;top:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b9f5ff,#3e9fc9 55%,#075070);border:1px solid rgba(191,247,255,.75);box-shadow:0 0 20px rgba(66,220,255,.45),inset 0 0 12px rgba(255,255,255,.2);will-change:transform}.joystick-label{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);font-size:7px;letter-spacing:2px;color:#7893ad;font-weight:900}
#ngToast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(12px);z-index:50;padding:11px 16px;border:1px solid rgba(84,226,255,.28);border-radius:12px;background:rgba(3,11,22,.86);box-shadow:0 20px 70px rgba(0,0,0,.4);font-size:9px;letter-spacing:1.5px;font-weight:900;opacity:0;pointer-events:none;transition:.2s}.toast-show{opacity:1!important;transform:translate(-50%,-50%) translateY(0)!important}
.modal{position:absolute;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(1,4,10,.68);backdrop-filter:blur(18px)}.modal.show{display:flex}.auth-card{width:min(390px,100%);position:relative;padding:26px;border:1px solid rgba(112,200,255,.22);border-radius:22px;background:linear-gradient(160deg,rgba(10,24,42,.96),rgba(4,10,21,.98));box-shadow:0 35px 100px rgba(0,0,0,.65)}.auth-close{position:absolute;right:12px;top:10px;border:0;background:none;color:#7790ab;font-size:25px}.auth-kicker{color:var(--cyan);font-size:8px;font-weight:900;letter-spacing:2px}.auth-card h2{margin-top:7px;font-size:27px}.auth-card p{margin:7px 0 19px;color:#7086a4;font-size:11px}.auth-card input{width:100%;height:48px;margin-bottom:10px;padding:0 13px;border-radius:11px;border:1px solid rgba(122,183,225,.16);outline:none;background:#07111f;color:#eaf7ff}.auth-submit{width:100%;height:49px;border:0;border-radius:11px;background:linear-gradient(90deg,#1ba9d5,#6367ff);color:white;font-weight:950;letter-spacing:1px}.auth-switch{margin-top:13px;border:0;background:none;color:#69dcf7;font-size:10px}.register-only{display:none}#authMessage{min-height:18px;margin-top:10px;font-size:10px;color:#8aa3bf}
@media(max-width:600px){.room-status{display:none}.room-topbar{height:53px}.brand-icon{width:31px;height:31px}.room-location{top:73px}.interact{min-width:145px;height:55px}.interact-wrap{right:12px}.joystick-label{bottom:-13px}}

.camera-controls{position:absolute;right:14px;top:82px;z-index:25;display:flex;flex-direction:column;gap:6px}.camera-controls button{width:38px;height:38px;border-radius:11px;border:1px solid rgba(85,233,255,.28);background:rgba(3,12,25,.78);color:#eafcff;font-size:22px;font-weight:800;line-height:1;backdrop-filter:blur(12px)}.camera-controls button:active{transform:scale(.95)}.camera-help{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);z-index:25;padding:6px 9px;border-radius:8px;background:rgba(2,8,18,.5);border:1px solid rgba(126,204,255,.08);color:#617b98;font-size:7px;letter-spacing:1.1px;pointer-events:none;white-space:nowrap}.camera-help span{color:#9fc7df;font-weight:900}@media(max-width:600px){.camera-controls{top:72px;right:10px}.camera-controls button{width:36px;height:36px}.camera-help{bottom:7px;font-size:6.5px}.room-location{right:58px}}

/* Realistic Courtyard V8 — restrained access label and compact authentication UI */
.top-access-note{margin-left:auto;padding:7px 9px;border:1px solid rgba(132,190,210,.15);border-radius:8px;background:rgba(9,22,31,.6);color:#78929f;font-size:7px;font-weight:800;letter-spacing:1.1px;white-space:nowrap}.room-topbar{background:rgba(8,17,23,.72);border-color:rgba(161,194,202,.15);box-shadow:0 10px 34px rgba(0,0,0,.22)}.brand-icon{border-color:rgba(121,199,210,.3);background:#172832;color:#b6e5eb}.room-status i{background:#79cfa6;box-shadow:0 0 8px rgba(121,207,166,.55)}.modal{padding:14px;background:rgba(3,8,12,.62);backdrop-filter:blur(12px)}.auth-card{width:min(340px,100%);padding:22px;border-radius:16px;border-color:rgba(157,198,207,.22);background:linear-gradient(155deg,rgba(22,38,46,.98),rgba(7,15,21,.99));box-shadow:0 24px 75px rgba(0,0,0,.5)}.auth-card h2{font-size:23px}.auth-card p{font-size:10px;margin-bottom:15px}.auth-card input{height:43px;margin-bottom:8px;border-radius:9px;background:#0b1820;border-color:rgba(157,198,207,.2)}.auth-submit{height:43px;border-radius:9px;background:linear-gradient(90deg,#3d8f9d,#486f9d)}.auth-switch{font-size:9px;color:#9fdce5}.top-action{display:none!important}@media(max-width:600px){.top-access-note{font-size:6px;letter-spacing:.7px;padding:6px 7px}.auth-card{padding:20px}.room-location{background:rgba(8,17,23,.62)}}

/* V9: clearer separate wall access controls and less visual clutter on phones */
.top-access-note{display:none!important}
.room-location{max-width:calc(100% - 96px)}
@media(max-width:600px){.room-topbar{padding:10px 12px}.brand b{letter-spacing:2px}.room-location{padding:12px 14px}.camera-help{font-size:8px;letter-spacing:1px}}


/* V10: futuristic gallery finish, portrait frames and mock video-ad wall screen */
:root{--cyan:#67efff;--line:rgba(103,239,255,.24)}
.room-topbar{background:rgba(4,12,22,.78);border-color:rgba(103,239,255,.22);box-shadow:0 12px 36px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.035)}
.brand-icon{box-shadow:0 0 18px rgba(103,239,255,.12)}
#ngRoomCanvas{background:#07111c}
@media(max-width:600px){
 .room-topbar{left:8px;right:8px;top:max(7px,env(safe-area-inset-top));height:49px;border-radius:13px}
 .brand b{font-size:11px}.brand small{font-size:6px;letter-spacing:1.2px}
 .room-location{top:65px;left:9px;padding:8px 10px}
 .camera-controls{top:65px;right:8px}
 #newgenz-analog{left:14px;bottom:max(24px,env(safe-area-inset-bottom));width:104px;height:104px}
 .joystick-knob{width:50px;height:50px;left:26px;top:26px}
 .interact-wrap{right:10px;bottom:max(24px,env(safe-area-inset-bottom))}
 .interact{min-width:126px;height:49px;padding:0 12px;font-size:9px;letter-spacing:1.5px}
 .camera-help{bottom:7px;max-width:45vw;overflow:hidden}
 .auth-card{width:min(340px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* REALISTIC V11R2 — clean architectural glass-room UI */
#ngRoomCanvas{display:block;width:100%;height:100%;touch-action:none;outline:0}
#ngApp{overflow:hidden;isolation:isolate;background:#b8d8e8}
.room-topbar{z-index:40;background:rgba(12,23,32,.78);border-color:rgba(206,232,242,.22);box-shadow:0 10px 34px rgba(4,14,22,.22)}
.room-location{z-index:35;background:rgba(12,23,32,.72);border-color:rgba(206,232,242,.2);box-shadow:0 8px 28px rgba(0,0,0,.18);max-width:min(300px,calc(100vw - 100px))}
.interact-wrap,#newgenz-analog,.camera-controls{touch-action:none}
.auth-card input{font-size:16px}
.interact{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(max-width:700px){
  #ngRoomCanvas{width:100vw;height:100dvh}
  .room-topbar{left:8px;right:8px;top:max(8px,env(safe-area-inset-top));height:52px;padding-inline:9px}
  .brand-icon{width:30px;height:30px}
  .room-location{top:66px;left:9px;padding:7px 9px}
  .camera-controls{top:66px;right:8px}
  #newgenz-analog{width:98px;height:98px;left:12px;bottom:max(22px,env(safe-area-inset-bottom))}
  .joystick-knob{width:48px;height:48px;left:25px;top:25px}
  .interact-wrap{right:9px;bottom:max(22px,env(safe-area-inset-bottom))}
  .interact{min-width:118px;height:47px;padding:0 12px;border-radius:14px}
  .camera-help{display:none}
}
@media(prefers-reduced-motion:reduce){.room-topbar,.room-location,.interact{transition:none!important}}