html,body{margin:0;height:100%;overflow:hidden;background:#000;color:#fff;font-family:Arial,sans-serif}
#overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#260000ee,#020204f5 65%)}
#panel{width:min(480px,calc(100vw - 48px));background:#0d0d13;padding:30px;border:2px solid #ff1a1a;border-radius:12px;text-align:center;box-shadow:0 0 10px #ff0000,0 0 28px #ff0000cc,0 0 60px #ff000088,inset 0 0 22px #ff000022,inset 0 0 25px #000;animation:redNeonPulse 1.8s ease-in-out infinite alternate}
@keyframes redNeonPulse{from{border-color:#ff2b2b;box-shadow:0 0 8px #ff0000,0 0 22px #ff0000aa,0 0 48px #ff000066,inset 0 0 18px #ff000018,inset 0 0 25px #000}to{border-color:#ff6b6b;box-shadow:0 0 14px #ff2525,0 0 36px #ff0000ee,0 0 72px #ff0000aa,inset 0 0 28px #ff000033,inset 0 0 25px #000}}
#panel h1{margin:0 0 6px;letter-spacing:2px;color:#d8d8d8;background:linear-gradient(180deg,#ffffff 0%,#d7d7d7 35%,#8f8f8f 62%,#f4f4f4 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 5px #ffffff99,0 0 14px #cfcfcf66,0 2px 0 #111}
#panel h3{margin:0 0 24px;color:#ff4b4b;font-weight:normal;text-shadow:0 0 5px #ff0000,0 0 14px #ff0000cc,0 0 28px #ff000088}
input{width:min(300px,80%);padding:11px 12px;font-size:16px;color:#fff;background:#050507;border:1px solid #56566a;border-radius:6px;outline:none}
input:focus{border-color:#ff3535;box-shadow:0 0 8px #ff0000,0 0 18px #ff000099}
#name.login-error{border-color:#ff3030;box-shadow:0 0 10px #ff0000,0 0 24px #ff0000aa;animation:loginShake .22s linear 2}
@keyframes loginShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
#loginError{min-height:18px;margin:8px 0 0;color:#ff6868;font-size:12px;font-weight:700;text-shadow:0 0 8px #ff0000}
#enter{min-width:180px;letter-spacing:.055em;text-transform:uppercase}
button{padding:11px 20px;font-size:16px;font-weight:bold;color:#171717;background:linear-gradient(180deg,#ffffff 0%,#d8d8d8 34%,#8f8f8f 62%,#f2f2f2 100%);border:1px solid #f5f5f5;border-radius:6px;cursor:pointer;box-shadow:0 0 5px #ffffffcc,0 0 16px #cfcfcf88,inset 0 1px 0 #ffffff;text-shadow:0 1px 0 #ffffff}
button:hover{filter:brightness(1.12);box-shadow:0 0 8px #ffffff,0 0 22px #e5e5e5cc,inset 0 1px 0 #ffffff}
#scene{width:100%;height:100%;position:relative}
#hud{position:fixed;left:18px;top:18px;z-index:5;background:#050508c9;padding:11px 15px;border:1px solid #663399;border-radius:7px;pointer-events:none;line-height:1.45;box-shadow:0 0 18px #6600aa44}
#hud strong{color:#e4b9ff}
#crosshair{position:fixed;left:50%;top:50%;z-index:5;width:10px;height:10px;margin:-5px;border:1px solid #fff;border-radius:50%;pointer-events:none;box-shadow:0 0 7px #fff}
#hint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:5;background:#050508d9;padding:9px 14px;border:1px solid #33334a;border-radius:7px;pointer-events:none;white-space:nowrap}
#arms{position:fixed;inset:0;z-index:4;pointer-events:none;display:none}
.arm{position:absolute;bottom:-35px;width:105px;height:210px;background:linear-gradient(150deg,#171722,#4b245f 55%,#11111a);border:2px solid #765080;border-radius:55px 55px 25px 25px;box-shadow:0 0 25px #6a00ff55}
.arm.left{left:calc(50% - 150px);transform:rotate(18deg)}
.arm.right{right:calc(50% - 150px);transform:rotate(-18deg)}
#arms.active{display:block}
small{color:#aaa;line-height:1.5}
@media(max-width:700px){#hint{font-size:12px;max-width:calc(100vw - 40px);white-space:normal;text-align:center}.arm{width:78px;height:165px}.arm.left{left:calc(50% - 115px)}.arm.right{right:calc(50% - 115px)}}

#chat{position:fixed;left:18px;bottom:58px;z-index:7;width:min(430px,calc(100vw - 36px));pointer-events:none}
#chatMessages{display:flex;flex-direction:column;gap:5px;max-height:220px;overflow:hidden;margin-bottom:8px;text-shadow:0 1px 3px #000}
.chat-line{align-self:flex-start;max-width:100%;padding:6px 9px;background:#050508bf;border-left:3px solid #a640ff;border-radius:4px;line-height:1.3;overflow-wrap:anywhere;animation:chatIn .18s ease-out}
.chat-line.system{border-left-color:#00cfff;color:#bdefff;font-style:italic}
.chat-name{font-weight:bold;color:#e8b8ff;margin-right:5px}
#chatComposer{display:none;gap:7px;pointer-events:auto;background:#08080ee8;padding:8px;border:1px solid #7635a8;border-radius:8px;box-shadow:0 0 22px #6200aa66}
#chat.open #chatComposer{display:flex}
#chatInput{width:auto;min-width:0;flex:1}
#chatSend{padding:9px 14px;font-size:14px}
@keyframes chatIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:700px){#chat{bottom:82px}.chat-line{font-size:13px}}



/* Facebook DJ Wall overlay, projected over the Three.js stage screen. */
#facebookWall{position:fixed;left:0;top:0;z-index:3;display:none;overflow:hidden;background:#000;border:0;box-shadow:none;transform-origin:0 0;pointer-events:none;will-change:transform}
#facebookWall iframe{width:100%!important;height:100%!important;border:0;background:#000}
#facebookVideoPlugin,#facebookVideoPlugin>span,#facebookVideoPlugin .fb-video{width:100%!important;height:100%!important;display:block!important}
#facebookVideoPlugin iframe{width:100%!important;height:100%!important}
body:not(.pointer-locked) #facebookWall{pointer-events:auto}

.socialOnly{margin:10px 0;padding:8px 12px;border:1px solid #ff2f2f;border-radius:6px;background:#210606;color:#ff6868;font-size:13px;font-weight:bold;letter-spacing:.05em;text-shadow:0 0 5px #ff0000,0 0 12px #ff0000cc;box-shadow:0 0 8px #ff000088,inset 0 0 12px #ff000033}
.modeLabel{display:inline-block;margin:4px 0 7px;padding:3px 7px;border:1px solid #00cfff;border-radius:999px;color:#bdefff;font-size:11px;letter-spacing:.12em}


/* v22: mobiele en tabletbesturing. Verborgen op desktop met fijne pointer. */
#touchControls{display:none;position:fixed;inset:0;z-index:6;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none}
#lookZone{position:absolute;left:42%;right:0;top:0;bottom:0;pointer-events:auto;touch-action:none}
#movePad{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:132px;height:132px;border:2px solid #ff3030;border-radius:50%;background:#09090db5;box-shadow:0 0 14px #ff000099,inset 0 0 22px #ff000044;pointer-events:auto;touch-action:none}
#moveStick{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border-radius:50%;background:radial-gradient(circle,#f1f1f1,#8c8c8c 70%,#333);border:2px solid #fff;box-shadow:0 0 10px #fff,0 0 22px #ffffff66;transform:translate(0,0)}
#touchActions{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(82px,calc(env(safe-area-inset-bottom) + 70px));display:grid;grid-template-columns:repeat(2,minmax(72px,1fr));gap:9px;pointer-events:auto}
#touchActions button,#touchEmotes button{min-height:46px;padding:9px 10px;font-size:12px;border-radius:10px;touch-action:manipulation}
#touchActions #touchChat{grid-column:1/-1}
#touchActions button.active{background:linear-gradient(180deg,#ff6666,#9c0000);color:#fff;border-color:#ff7777;box-shadow:0 0 12px #ff0000,0 0 25px #ff000088}
#touchEmotes{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));display:grid;grid-template-columns:repeat(2,minmax(74px,1fr));gap:7px;pointer-events:auto}
body.touch-device.started #touchControls{display:block}
body.touch-device #crosshair{width:16px;height:16px;margin:-8px;border-color:#ffffffaa}
body.touch-device #hint{display:none}
body.touch-device #hud{font-size:11px;left:8px;top:8px;padding:7px 9px;max-width:155px}
body.touch-device #chat{left:8px;bottom:165px;width:min(390px,calc(100vw - 16px))}
body.touch-device #facebookWall{pointer-events:none!important}
@media (hover:none),(pointer:coarse){#panel{width:min(480px,calc(100vw - 28px));padding:22px 16px}#panel h1{font-size:clamp(24px,8vw,38px)}#touchControls{display:none}}
@media(max-width:540px){#movePad{width:116px;height:116px}#moveStick{width:52px;height:52px;margin:-26px}#touchActions{bottom:max(70px,calc(env(safe-area-inset-bottom) + 58px));grid-template-columns:repeat(2,68px)}#touchEmotes{grid-template-columns:repeat(2,68px)}#touchActions button,#touchEmotes button{font-size:10px;min-height:42px;padding:7px 5px}.arm{opacity:.7}}
@media(orientation:portrait) and (max-width:700px){body.touch-device #chat{bottom:150px}#touchEmotes{top:max(70px,env(safe-area-inset-top))}}


/* v24: veilige koppeling met de bestaande homepage. */
#backToSite{display:inline-block;margin-top:16px;color:#ff6b6b;text-decoration:none;font-size:13px;font-weight:bold;letter-spacing:.05em;text-shadow:0 0 6px #ff0000,0 0 14px #ff000088}
#backToSite:hover{color:#fff;text-shadow:0 0 8px #fff,0 0 18px #ff0000}
#exitHall{position:fixed;right:14px;top:14px;z-index:8;padding:8px 11px;border:1px solid #ff3030;border-radius:7px;background:#09090dd9;color:#fff;text-decoration:none;font-size:11px;font-weight:bold;letter-spacing:.08em;box-shadow:0 0 12px #ff000077}
#exitHall:hover{background:#310707;box-shadow:0 0 18px #ff0000aa}
body:not(.started) #exitHall{display:none}
body.touch-device #exitHall{top:auto;bottom:max(12px,env(safe-area-inset-bottom));right:50%;transform:translateX(50%);font-size:10px;padding:7px 10px}


/* v25: online-status en aanwezige bezoekers. */
#connectionDot{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;vertical-align:1px;background:#777;box-shadow:0 0 7px #777}
#connectionDot.online{background:#26ff71;box-shadow:0 0 8px #26ff71,0 0 16px #26ff7188}
#connectionDot.reconnecting{background:#ffb020;box-shadow:0 0 8px #ffb020;animation:connectionPulse .75s ease-in-out infinite alternate}
#connectionDot.offline{background:#ff3030;box-shadow:0 0 8px #ff3030}
@keyframes connectionPulse{to{opacity:.3}}
#visitorPanel{position:fixed;right:14px;top:58px;z-index:5;width:190px;max-height:245px;overflow:hidden;padding:11px 12px;background:#050508d9;border:1px solid #ff303077;border-radius:8px;box-shadow:0 0 18px #ff000033;pointer-events:none}
#visitorPanel strong{display:block;margin-bottom:8px;color:#ddd;font-size:11px;letter-spacing:.11em}
#visitorList{display:flex;flex-direction:column;gap:5px;max-height:205px;overflow:hidden}
.visitor-row{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:5px;background:#14141bbb;color:#ddd;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visitor-row.self{color:#fff;border-left:2px solid #ff3030;background:#250909cc}
.visitor-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#26ff71;box-shadow:0 0 6px #26ff71}
.visitor-empty{color:#888;font-size:11px;font-style:italic}
body:not(.started) #visitorPanel{display:none}
body.touch-device #visitorPanel{top:8px;right:8px;width:128px;max-height:112px;padding:7px 8px}
body.touch-device #visitorPanel strong{font-size:8px;margin-bottom:4px}
body.touch-device #visitorList{max-height:84px;gap:3px}
body.touch-device .visitor-row{font-size:9px;padding:2px 4px}


/* v26: welkomstvenster, hulpvenster en Hall-menu. */
#hallMenu{position:fixed;right:18px;top:18px;z-index:8;display:none;gap:8px;align-items:center}
body.started #hallMenu{display:flex}
#hallMenu button,#hallMenu a{box-sizing:border-box;min-height:38px;padding:9px 12px;font-size:12px;text-decoration:none;border-radius:7px}
#helpButton{color:#fff;background:#11131a;border:1px solid #8a8f9c;box-shadow:0 0 12px #ffffff33;text-shadow:none}
#leaveHall{color:#fff;background:linear-gradient(180deg,#5b0a0a,#230303);border:1px solid #ff3535;box-shadow:0 0 13px #ff000077;text-shadow:0 0 5px #ff0000}
#exitHall{display:inline-flex;align-items:center;justify-content:center;color:#111;background:linear-gradient(180deg,#fff,#aaa 58%,#eee);border:1px solid #fff;box-shadow:0 0 12px #ffffff77;font-weight:bold}
.gameModal{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;padding:20px;background:#000c;backdrop-filter:blur(5px)}
.gameModal.open{display:flex}
.gameModalCard{width:min(560px,calc(100vw - 40px));padding:26px;text-align:center;background:#0b0b10;border:2px solid #ff2828;border-radius:14px;box-shadow:0 0 18px #ff0000bb,0 0 55px #ff000066,inset 0 0 24px #ff000022}
.gameModalCard h2{margin:0 0 12px;color:#e5e5e5;letter-spacing:.08em;text-shadow:0 0 8px #fff8}
.gameModalCard p{color:#d3d3d8;line-height:1.5}
.controlGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0;text-align:left}
.controlGrid span,.helpRows p{padding:10px 12px;background:#15151d;border-left:3px solid #ff3030;border-radius:5px;color:#ddd}
#welcomeContinue,#helpClose{margin-top:8px;min-width:170px}
@media(max-width:700px){#hallMenu{right:8px;top:8px;gap:5px}#hallMenu button,#hallMenu a{padding:7px 8px;font-size:10px;min-height:34px}.controlGrid{grid-template-columns:1fr}.gameModalCard{padding:20px}.gameModalCard h2{font-size:19px}body.started #visitorPanel{top:58px}}

/* v28: instellingen en prestatievoorkeuren. */
#settingsButton{color:#111;background:linear-gradient(180deg,#fff,#aaa 58%,#eee);border:1px solid #fff;box-shadow:0 0 12px #ffffff55;text-shadow:none}
.settingsCard{max-width:520px}
.settingRow{display:grid;grid-template-columns:150px 1fr 52px;align-items:center;gap:12px;margin:12px 0;padding:11px 12px;background:#15151d;border-left:3px solid #ff3030;border-radius:6px;text-align:left}
.settingRow input[type="range"]{width:100%;padding:0;accent-color:#ff3030;background:transparent;border:0;box-shadow:none}
.settingRow output{color:#ddd;text-align:right;font-variant-numeric:tabular-nums}
.settingToggle{display:flex;align-items:center;gap:10px;margin:10px 0;padding:11px 12px;background:#15151d;border-left:3px solid #ff3030;border-radius:6px;text-align:left}
.settingToggle input{width:19px;height:19px;accent-color:#ff3030}
.settingsNote{font-size:12px;color:#999!important}
body.reduced-motion #panel{animation:none}
body.reduced-motion .chat-line,body.reduced-motion #connectionDot{animation:none!important}
@media(max-width:700px){.settingRow{grid-template-columns:1fr 54px}.settingRow span{grid-column:1/-1}.settingRow input[type="range"]{grid-column:1}.settingRow output{grid-column:2}.settingsCard{max-height:82vh;overflow:auto}}
:root{--ui-scale:1}
#hud,#visitorPanel,#hallMenu,#chat,#hint{font-size:calc(1em * var(--ui-scale))}


/* v31: verbindingsherstel voor desktop, tablet en mobiel. */
#connectionBanner{position:fixed;left:50%;top:18px;z-index:20;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 28px);padding:10px 12px;transform:translate(-50%,-140%);opacity:0;pointer-events:none;background:#130707ef;border:1px solid #ff3434;border-radius:9px;box-shadow:0 0 16px #ff000077,0 0 36px #ff000044;color:#fff;font-size:13px;font-weight:bold;transition:transform .22s ease,opacity .22s ease}
#connectionBanner.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
#connectionBanner.reconnecting{border-color:#ffb020;box-shadow:0 0 16px #ffb02077}
#connectionBanner.offline{border-color:#ff3030}
#connectionBanner.online{border-color:#26ff71;background:#06150bef;box-shadow:0 0 16px #26ff7166}
#reconnectButton{padding:7px 10px;font-size:11px;white-space:nowrap;background:linear-gradient(180deg,#fff,#aaa 58%,#eee);color:#111;border:1px solid #fff;text-shadow:none;box-shadow:0 0 10px #fff6}
#reconnectButton:disabled{opacity:.55;cursor:wait}
body.touch-device #connectionBanner{top:max(8px,env(safe-area-inset-top));width:calc(100vw - 18px);box-sizing:border-box;justify-content:space-between;font-size:11px}
body.touch-device #reconnectButton{font-size:9px;padding:7px 8px}
@media(max-width:520px){#connectionBanner{gap:7px;padding:8px 9px;font-size:11px}}

.resumeHint{margin:8px auto 0;max-width:360px;font-size:12px;line-height:1.35;color:#aaa;text-shadow:0 0 8px #ff202055}


/* v33: laadscherm en foutfallback. */
#bootScreen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at center,#260000 0,#070708 48%,#000 100%);transition:opacity .3s ease}
#bootScreen.ready{opacity:0;pointer-events:none}
.bootCard{width:min(440px,calc(100vw - 36px));padding:28px 24px;text-align:center;background:#09090ef2;border:2px solid #ff2929;border-radius:14px;box-shadow:0 0 20px #ff0000cc,0 0 65px #ff000066,inset 0 0 28px #ff000022}
.bootLogo{margin-bottom:20px;font-size:clamp(24px,7vw,38px);font-weight:900;letter-spacing:.07em;background:linear-gradient(180deg,#fff 0,#bcbcbc 42%,#686868 55%,#eee 85%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 12px #ffffff55}
.bootSpinner{width:46px;height:46px;margin:0 auto 18px;border:4px solid #361010;border-top-color:#ff3030;border-radius:50%;box-shadow:0 0 15px #ff000088;animation:bootSpin .85s linear infinite}
#bootText{font-size:17px;font-weight:bold;color:#fff;text-shadow:0 0 9px #ff0000}
#bootDetail{margin-top:8px;color:#aaa;font-size:12px;line-height:1.45}
#bootRetry{display:none;margin-top:18px;background:linear-gradient(180deg,#fff,#aaa 58%,#eee);color:#111;border-color:#fff;text-shadow:none;box-shadow:0 0 13px #fff8}
#bootScreen.failed .bootSpinner{animation:none;border-color:#ff3030;position:relative}
#bootScreen.failed .bootSpinner:after{content:"!";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:25px;font-weight:bold}
@keyframes bootSpin{to{transform:rotate(360deg)}}
body.reduced-motion .bootSpinner{animation-duration:1.8s}


/* v34: compacte links onder het loginpaneel. */
.loginLinks{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:12px}
#systemCheckLink{display:inline-block;color:#ff4b4b;text-decoration:none;font-weight:800;letter-spacing:.06em;text-shadow:0 0 8px #f22,0 0 16px #f226;border:1px solid #f33;border-radius:7px;padding:8px 12px;background:#180607;box-shadow:0 0 12px #f224}
#systemCheckLink:hover,#systemCheckLink:focus-visible{color:#fff;background:#3a080a;box-shadow:0 0 18px #f44a;outline:none}

#maintenanceBanner{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:100;padding:12px 18px;max-width:min(90vw,700px);text-align:center;border:1px solid #ff3030;border-radius:10px;background:#180000ee;color:#fff;box-shadow:0 0 22px #ff000077;font-weight:700}
#enter:disabled{cursor:not-allowed;filter:grayscale(1);opacity:.65}


/* v39: apparaatervaring, fullscreen en mobiele liggende-stand begeleiding. */
#fullscreenButton{color:#111;background:linear-gradient(180deg,#fff,#aaa 58%,#eee);border:1px solid #fff;box-shadow:0 0 12px #ffffff55;text-shadow:none}
#fullscreenButton[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,#6d1010,#240303);border-color:#ff4040;box-shadow:0 0 14px #ff000077;text-shadow:0 0 5px #ff0000}
#orientationNotice{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:28px;text-align:center;background:#030305f2;backdrop-filter:blur(8px)}
#orientationNotice strong{font-size:clamp(22px,8vw,34px);color:#eee;text-shadow:0 0 12px #fff8}
#orientationNotice span{max-width:360px;color:#ccc;line-height:1.45}
#orientationDismiss{margin-top:8px;color:#111;background:linear-gradient(180deg,#fff,#aaa 58%,#eee);border:1px solid #fff;box-shadow:0 0 15px #fff7;text-shadow:none}
body.touch-device.started.portrait-mode:not(.orientation-dismissed) #orientationNotice{display:flex}
@media (orientation:landscape){#orientationNotice{display:none!important}}
@media(max-width:700px){#fullscreenButton{display:inline-flex;align-items:center;justify-content:center}}


/* v40: live network quality indicator for shared hosting and mobile data. */
.latency{font-weight:700;transition:color .2s,text-shadow .2s}
.latency.good{color:#5dff8a;text-shadow:0 0 8px #00ff6688}
.latency.fair{color:#ffd45d;text-shadow:0 0 8px #ffae0088}
.latency.poor{color:#ff6868;text-shadow:0 0 9px #ff000099}
.latency.offline{color:#999;text-shadow:none}


/* v41: shared-hosting efficiency and room capacity. */
#onlineCount{font-weight:800;color:#e8e8e8;text-shadow:0 0 7px #ffffff55;font-variant-numeric:tabular-nums}

#hostingProfile{position:fixed;right:14px;top:46px;z-index:12;padding:6px 10px;border:1px solid #ff2020;border-radius:999px;background:#120000dd;color:#ffb3b3;font-size:11px;font-weight:800;letter-spacing:.08em;box-shadow:0 0 14px #ff000055;pointer-events:none}
@media (max-width:760px){#hostingProfile{right:8px;top:40px;font-size:9px;padding:5px 8px}}


/* v48: veilige showregeling, arena show en praktijktest voor STRATO, desktop en touchapparaten. */
#diagnosticsButton{color:#111;background:linear-gradient(180deg,#fff,#aaa 58%,#eee);border:1px solid #fff;box-shadow:0 0 12px #ffffff55;text-shadow:none}
.diagnosticsCard{width:min(620px,calc(100vw - 28px));max-height:86vh;overflow:auto;text-align:left}
.diagnosticsCard h2{text-align:center}
.diagnosticsIntro{color:#bbb;line-height:1.45;text-align:center}
.diagnosticsResults{display:grid;gap:8px;margin:16px 0;padding:12px;background:#09090f;border:1px solid #333;border-radius:8px}
.diag-row{display:grid;grid-template-columns:minmax(120px,1fr) auto;gap:12px;align-items:center;padding:9px 10px;border-left:4px solid #777;background:#14141c;border-radius:5px}
.diag-row.ok{border-left-color:#36ff74}.diag-row.warn{border-left-color:#ffbd42}.diag-row.bad{border-left-color:#ff3b3b}
.diag-label{font-weight:800;color:#eee}.diag-value{font-size:12px;text-align:right;color:#bbb;overflow-wrap:anywhere}
.diag-row.ok .diag-value{color:#65ff91}.diag-row.warn .diag-value{color:#ffd06d}.diag-row.bad .diag-value{color:#ff7777}
.diag-wait{color:#aaa;text-align:center;padding:8px}
.diagnosticsActions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
#diagnosticsRun,#diagnosticsCopy,#diagnosticsClose{background:linear-gradient(180deg,#fff,#aaa 58%,#eee);color:#111;border:1px solid #fff;text-shadow:none;box-shadow:0 0 10px #fff5}
#diagnosticsCopy:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:600px){.diag-row{grid-template-columns:1fr}.diag-value{text-align:left}.diagnosticsActions button{flex:1 1 130px}}

/* v48 veilige showregeling */
#photosensitiveWarning{max-width:460px;margin:10px auto 0;color:#ffb7b7;font-size:12px;line-height:1.4;text-shadow:0 0 8px #ff000077}

/* v49: grafische kwaliteitskeuze voor desktop, tablet en mobiel. */
.settingSelect{display:grid;grid-template-columns:1fr minmax(150px,210px);align-items:center;gap:14px;margin:14px 0;text-align:left}
.settingSelect select{width:100%;padding:10px 12px;border:1px solid #ff3030;border-radius:7px;background:#0c0c11;color:#fff;box-shadow:0 0 12px #ff202033;font:inherit}
.settingSelect select:focus{outline:1px solid #ff4b4b;box-shadow:0 0 18px #ff202077}
@media(max-width:700px){.settingSelect{grid-template-columns:1fr}.settingSelect select{min-height:44px}}

#showPauseButton.active{color:#fff;background:#650000;border-color:#ff3030;box-shadow:0 0 16px #ff000099}


/* v53: veilige update-melding voor de service-worker cache. */
#updateBanner{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:110;display:flex;align-items:center;gap:12px;max-width:min(92vw,680px);padding:10px 12px 10px 16px;border:1px solid #39ff70;border-radius:10px;background:#06150bed;color:#fff;box-shadow:0 0 22px #00ff6677;font-weight:800}
#updateBanner[hidden]{display:none}
#updateBanner span{line-height:1.35}
#applyUpdate{white-space:nowrap;color:#07110a;background:linear-gradient(180deg,#b8ffc9,#35ee70 58%,#9dffb8);border:1px solid #c9ffd5;box-shadow:0 0 13px #39ff7099;text-shadow:none}
#applyUpdate:disabled{cursor:wait;opacity:.7}
@media(max-width:620px){#updateBanner{top:7px;flex-direction:column;text-align:center;gap:8px;width:calc(100vw - 26px)}#applyUpdate{width:100%}}


/* v55: lokale XAMPP developer testtools. */
#developerToggle{position:fixed;right:14px;bottom:48px;z-index:42;background:#06150b;color:#70ff98;border:1px solid #35ff70;box-shadow:0 0 14px #00ff6677;text-shadow:0 0 7px #00ff66;font-weight:900}
.developerPanel{position:fixed;right:14px;bottom:92px;z-index:80;width:min(390px,calc(100vw - 28px));padding:12px;border:1px solid #35ff70;border-radius:10px;background:#050a07f2;color:#eaffef;box-shadow:0 0 26px #00ff6655;font:13px Arial;backdrop-filter:blur(8px)}
.developerPanel[hidden]{display:none}.developerHeader{display:flex;align-items:center;justify-content:space-between;color:#70ff98;letter-spacing:.08em}.developerHeader button{padding:2px 9px;min-width:34px;background:#250000;color:#fff;border-color:#ff4040}
.developerStats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:11px 0}.developerStats span{padding:7px;background:#0b1710;border-left:3px solid #35ff70;border-radius:4px}.developerStats b{float:right;color:#fff;font-variant-numeric:tabular-nums}
.developerButtons{display:grid;grid-template-columns:1fr 1fr;gap:7px}.developerButtons button{padding:9px 8px;background:#102217;color:#dfffe7;border:1px solid #268d46;box-shadow:none;text-shadow:none;font-size:12px}.developerButtons button:hover{background:#173c24;border-color:#35ff70}.developerPanel small{display:block;margin-top:10px;color:#8bb895;line-height:1.35}
body:not(.started) #developerToggle{display:none}@media(max-width:700px){#developerToggle{right:8px;bottom:8px}.developerPanel{right:7px;bottom:54px}.developerButtons{grid-template-columns:1fr}}


/* v63: originele bediening, springen en responsieve Hall-knoppen. */
#hostingProfile{display:none!important}
#hallMenu{left:18px;right:18px;justify-content:flex-end;flex-wrap:wrap;max-width:calc(100vw - 36px)}
#hallMenu #exitHall{position:static!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important}
#hallMenu button,#hallMenu a{flex:0 0 auto;white-space:nowrap}
@media(max-width:980px){#hallMenu{left:auto;max-width:min(720px,calc(100vw - 24px));gap:6px}#hallMenu button,#hallMenu a{padding:7px 9px;font-size:10px;min-height:34px}}
@media(max-width:620px){#hallMenu{top:8px;right:8px;left:8px;max-width:none;justify-content:flex-end}#hallMenu button,#hallMenu a{padding:6px 7px;font-size:9px;min-height:32px}}


/* v66: website opent apart; Hall verlaten keert terug naar login. */
#exitHall,#backToSite{cursor:pointer}

/* v84: interactief videomenu op de achterwand */
#interactionHint{position:fixed;left:50%;bottom:92px;z-index:12;transform:translate(-50%,12px);max-width:min(520px,82vw);padding:9px 14px;border:1px solid #ff2b6f;border-radius:8px;background:#08080ee8;color:#fff;font-weight:700;font-size:13px;letter-spacing:.03em;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;box-shadow:0 0 18px #ff005566}
#interactionHint.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){#interactionHint{bottom:138px;font-size:12px}}

/* v110: visuele occlusie van Facebook-videowand door 3D pilaren/speakers. */
#videoOcclusionCanvas{position:fixed;inset:0;z-index:4;pointer-events:none;background:transparent}

/* v110: na echte Facebook-playerbediening Pointer Lock met één klik hervatten. */
#resumeLookButton{
  position:fixed;
  left:50%;
  bottom:78px;
  transform:translateX(-50%);
  z-index:30;
  padding:14px 22px;
  border:2px solid #00eaff;
  border-radius:10px;
  background:rgba(5,8,15,.94);
  color:#fff;
  font-weight:800;
  font-size:15px;
  letter-spacing:.4px;
  box-shadow:0 0 20px rgba(0,234,255,.42);
  cursor:pointer;
}
#resumeLookButton[hidden]{display:none!important}
#resumeLookButton.show{display:block}


/* VIDEO 2 FIX 5: scene-layer wisselt zonder Facebook-player te wijzigen */
#scene{position:fixed;inset:0;z-index:1}