/* Metric scene: one room unit = one millimetre. UI artwork units convert once. */
#roomShell>#boothAssembly{transform:translate3d(0,1000px,1727.6px) scale3d(0.5483333333333333,0.5483333333333333,0.5483333333333333)}
#boothAssembly .chassis{left:-842.9635258358662px}#boothAssembly #deckB{left:242.96352583586625px}
#spatialMixer{left:-227.96352583586625px;width:455.9270516717325px}#mixerFace{transform-origin:0 0;transform:scaleX(1.3815971262779774)}
.mixer-body{width:455.9270516717325px}.mixer-right{left:455.9270516717325px}
.booth-counter{left:-1276.595744680851px;top:-638.2978723404256px;width:2553.191489361702px;height:1276.595744680851px;transform:translateZ(-215.19756838905775px)}
.booth-facade{left:-1276.595744680851px;top:-1550.1519756838907px;width:2553.191489361702px;height:1823.70820668693px;transform:translateZ(-1127.051671732523px) rotateX(90deg) rotateZ(180deg)}
.booth-wing{top:-638.2978723404256px;width:1823.70820668693px;height:1276.595744680851px}
.wing-left{left:-1276.595744680851px;transform:translateZ(-215.19756838905775px) rotateY(90deg)}
.wing-right{left:1276.595744680851px;transform:translateZ(-2038.9057750759878px) rotateY(-90deg)}
#boothUnderlayVideo{left:-842.9635258358662px;width:1685.9270516717324px}
#boothUnderlayVideo iframe,.booth-video-wrap iframe{width:2015.9270516717324px;height:1133.9589665653496px}
#boothUnderlayVideo iframe,.wrap-left iframe,.wrap-right iframe{top:-71.40948328267478px}
.wrap-left{left:-843.9635258358662px}.wrap-right{left:843.9635258358662px}.wrap-right iframe{left:-1850.9270516717324px}
.wrap-front{left:-842.9635258358662px;width:1685.9270516717324px;mask-image:linear-gradient(to right,#000 0 600px,transparent 600px 615px,#000 615px 1070.9270516717324px,transparent 1070.9270516717324px 1085.9270516717324px,#000 1085.9270516717324px 1685.9270516717324px)}
.wrap-front iframe{top:-897.5494832826748px}
#roomShell .wall{height:3000px}
#roomShell .back{transform:matrix3d(1,0,0,0,0,0,-1,0,0,1,0,0,-3200,-10800,3000,1)}
#roomShell .left{transform:matrix3d(0,-1,0,0,0,0,-1,0,1,0,0,0,-3200,2000,3000,1)}
#roomShell .right{transform:matrix3d(0,1,0,0,0,0,-1,0,-1,0,0,0,3200,-10800,3000,1)}
.corner-truss .truss-face{height:3000px;transform:translateZ(3000px) rotateX(-90deg)}
.corner-truss .truss-side{transform:translateZ(3000px) rotateZ(90deg) rotateX(-90deg)}
.corner-truss .truss-cap{transform:translateZ(3000px)}

/* Inward-facing fourth wall behind the DJ, matching the booth projection. */
#roomShell .dj-backdrop{width:6400px;transform:matrix3d(-1,0,0,0,0,0,-1,0,0,-1,0,0,3200,2000,3000,1)}

/* Double room width; equipment retains its real-world dimensions. */
#roomShell>.floor{width:6400px;left:-3200px}
#roomShell .back{width:6400px}

/* 6.4 m wide × 12.8 m long; extend away from the DJ end. */
#roomShell>.floor{top:-10800px;height:12800px}
#roomShell .left,#roomShell .right{width:12800px}
.dancefloor{top:-7000px;height:6000px;width:3200px;left:-1600px}

.edm-laser{position:absolute;left:0;top:0;transform-style:preserve-3d;pointer-events:none}
.laser-case-top{position:absolute;left:-140px;top:-100px;width:280px;height:250px;background:repeating-linear-gradient(90deg,#15212a 0 16px,#38434d 17px 19px);border:8px solid #101820;transform:translateZ(130px)}
.laser-case-front{position:absolute;left:-140px;top:-100px;width:280px;height:130px;background:#101c28;border:6px solid #4c5e6b;transform-origin:top;transform:translateZ(130px) rotateX(90deg);display:flex;align-items:center;justify-content:space-around}
.laser-case-front i{width:55px;height:55px;border:8px solid #263f50;border-radius:50%;background:#aaffee;box-shadow:0 0 35px #00ffbb}
.laser-case-front small{font:15px monospace;color:#7c9baa}
.laser-hanger{position:absolute;left:-110px;top:20px;width:220px;height:180px;border:18px solid #62717c;border-bottom:0;transform-origin:top;transform:translateZ(255px) rotateX(90deg)}
.laser-fan-plane{position:absolute;left:-3200px;top:-9500px;width:6400px;height:9500px;transform-origin:50% 100%;pointer-events:none}
#laserToggle[aria-pressed=true]{color:#39ffb0;border-color:#39ffb0}
@media(prefers-reduced-motion:reduce){.laser-fan-plane{opacity:.55}}

/* 24-inch (609.6 mm) stage, within the booth truss footprint. */
.dj-riser{position:absolute;left:0;top:0;transform-style:preserve-3d;pointer-events:none}
.riser-top{position:absolute;left:-1750px;top:100px;width:3500px;height:1800px;transform:translateZ(609.6px);background:repeating-linear-gradient(90deg,#151c25 0 700px,#28313c 701px 704px);border:12px solid #3b4c59}
.riser-front{position:absolute;left:-1750px;top:100px;width:3500px;height:609.6px;transform-origin:top;transform:translateZ(609.6px) rotateX(-90deg);background:#0a1017;border:10px solid #354654;border-top:10px solid #00aaca}
.riser-side{position:absolute;top:100px;width:1800px;height:609.6px;transform-origin:0 0;background:linear-gradient(#26323e,#0c141d);border:8px solid #354654}
.riser-left{left:-1750px;transform:translateZ(609.6px) rotateZ(90deg) rotateX(-90deg)}
.riser-right{left:1750px;top:1900px;transform:translateZ(609.6px) rotateZ(-90deg) rotateX(-90deg)}
.stage-sub .woofer-18{width:457.2px;height:457.2px;top:15px}
.stage-sub .sub-port{bottom:12px;height:28px}
.stage-sub .cabinet-front b{bottom:45px}
#roomShell .dj-position{transform:translateZ(613.6px)}

.speaker-rigging{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;pointer-events:none}

/* Display emits toward audience; DJ sees a solid rear panel. */
.booth-facade{backface-visibility:hidden}
.booth-inner-front{transform:translateZ(-1127.051671732523px) rotateX(90deg) rotateZ(180deg) translateZ(-4px) rotateY(180deg);background:linear-gradient(90deg,#131b23,#202b35 50%,#131b23);border:10px solid #283947;box-shadow:none}

.line-array .cabinet-front{background:repeating-linear-gradient(0deg,#141d26 0 3px,#36414b 4px 5px);border:9px solid #0c1219;border-radius:10px}
.array-grille{position:absolute;inset:18px 20px;background:repeating-radial-gradient(circle at 25% 50%,#080d13 0 4px,#26323e 5px 6px);border:3px solid #455362;border-radius:7px}
.line-array .cabinet-front b{font:12px monospace;bottom:5px;letter-spacing:3px}

.array-wedge-face,.array-wedge-side{position:absolute;left:0;top:0;transform-origin:0 0;background:#1c2733;border:4px solid #3c4d5c;backface-visibility:visible}
.array-wedge-grille{background:repeating-linear-gradient(0deg,#080e15 0 3px,#33414d 4px 5px);border:7px solid #101923}
.array-wedge-grille b{position:absolute;bottom:8px;left:40%;font:11px monospace;color:#84949f;letter-spacing:2px}
.array-wedge-side{background:linear-gradient(120deg,#334450,#131e28);border:0}
/* Explicit enclosure faces: shared top/bottom edges, opaque DJ-side liner. */
.led-booth>.booth-facade{left:0;top:0;transform-origin:0 0;transform:matrix3d(-1,0,0,0,0,0,-1,0,0,-1,0,0,1276.595744680851,-638.2978723404256,-215.19756838905775,1);backface-visibility:hidden}
.led-booth>.booth-inner-front{transform:matrix3d(1,0,0,0,0,0,-1,0,0,1,0,0,-1276.595744680851,-630.2978723404256,-215.19756838905775,1);background:#18232e;opacity:1;mix-blend-mode:normal;backface-visibility:hidden}
.booth-style-control{font-size:9px;letter-spacing:1px;gap:7px!important;margin-left:0!important}
#boothStyle{max-width:155px;background:#12232e;color:#e9f4f7;border:1px solid #386478;border-radius:6px;padding:9px;font-size:11px}
.view-controls{flex-wrap:wrap;justify-content:flex-end}
.booth-design-trim{position:absolute;inset:0;z-index:3;pointer-events:none;display:none}
.design-line{position:absolute;display:block;background:#9cfbff;box-shadow:0 0 30px #00daff}
.led-booth[data-style=rounded]>.booth-facade{border-radius:240px 240px 140px 140px;border:28px solid #66798b;box-shadow:0 0 0 10px #1b2935}
.led-booth[data-style=rounded]>.booth-counter{border-radius:200px;border:18px solid #718698;background:linear-gradient(110deg,#8694a1,#26323d,#718390)}
.led-booth[data-style=rounded]>.booth-wing{border-radius:180px;background:linear-gradient(90deg,#485b70,#131c27)}
.led-booth[data-style=vframe]>.booth-facade:not(.booth-inner-front){clip-path:polygon(0 0,100% 0,77% 100%,23% 100%);background:#070e17;border:24px solid #263e52}
.led-booth[data-style=vframe]>.booth-facade>.projection-surface{opacity:.25!important}
.led-booth[data-style=vframe] .booth-design-trim{display:block}
.led-booth[data-style=vframe] .line-a{left:14%;top:15%;width:50%;height:30px;transform-origin:0 50%;transform:rotate(49deg)}
.led-booth[data-style=vframe] .line-b{right:14%;top:15%;width:50%;height:30px;transform-origin:100% 50%;transform:rotate(-49deg)}
.led-booth[data-style=vframe] .line-c{left:6%;right:6%;top:6%;height:25px}
.led-booth[data-style=vframe]>.booth-counter{border-color:#72faff;background:#08131f}
.led-booth[data-style=acrylic]>.booth-facade:not(.booth-inner-front){border:45px solid #8cd9ed;background:linear-gradient(135deg,#172e45,#42627b,#192e43);box-shadow:inset 0 0 110px #00cfff,0 0 50px #2f6fff;border-radius:90px}
.led-booth[data-style=acrylic]>.booth-facade>.projection-surface{inset:120px 220px;border-radius:55px}
.led-booth[data-style=acrylic] .booth-design-trim{display:block;border:20px solid #9ff7ff;border-radius:65px;inset:55px}
.led-booth[data-style=acrylic] .line-a,.led-booth[data-style=acrylic] .line-b{top:0;bottom:0;width:30px;left:10%;height:auto}
.led-booth[data-style=acrylic] .line-b{left:auto;right:10%}
.led-booth[data-style=acrylic]>.booth-counter{border:24px solid #b5f6ff;border-radius:90px;background:linear-gradient(125deg,#4e7289,#203849);box-shadow:0 0 35px #00d9ff}
.led-booth[data-style=acrylic]>.booth-wing{border:25px solid #69dfff;background:#264556}
/* Keep exterior visible through nested CSS perspective transforms; the separate
   opaque liner masks its reverse from the DJ side. */
.led-booth>.booth-facade:not(.booth-inner-front){backface-visibility:visible}
/* Paint trim on one flat face so it cannot intersect the enclosure in 3D. */
.booth-design-trim{transform-style:flat}
.led-booth[data-style=vframe] .booth-design-trim{background:linear-gradient(49deg,transparent 48%,#88faff 49%,#88faff 51%,transparent 52%) left bottom/50% 90% no-repeat,linear-gradient(-49deg,transparent 48%,#88faff 49%,#88faff 51%,transparent 52%) right bottom/50% 90% no-repeat,linear-gradient(#88faff,#88faff) center 6%/88% 25px no-repeat}
.led-booth[data-style=vframe] .design-line{display:none}
.led-booth>.booth-facade{transform-style:flat}
.led-booth>.booth-facade:not(.booth-inner-front){transform:matrix3d(-1,0,0,0,0,0,-1,0,0,-1,0,0,1276.595744680851,-658.2978723404256,-215.19756838905775,1)}
#roomAvatar{position:absolute;left:0;top:0;transform-style:preserve-3d;pointer-events:none}
.avatar-sprite{position:absolute;width:1500px;height:1500px;left:-750px;top:-1500px;background-size:400% 200%;background-position:33.333% 0;transform-origin:50% 100%;transform:rotateX(90deg);image-rendering:pixelated}
#roomAvatar>span{position:absolute;left:-100px;top:-1650px;width:200px;text-align:center;color:#40ffba;font:bold 80px monospace;transform-origin:50% 100%;transform:rotateX(90deg)}
.avatar-controls{display:flex;align-items:center;gap:12px;padding:8px 24px;background:#0d1b25;color:#b6cbd6;font-size:11px;flex-wrap:wrap}
.avatar-controls select{background:#162d3b;color:#fff;padding:6px;border:1px solid #416273}
#walkMode[aria-pressed=true]{color:#39ffb0;border-color:#39ffb0}
.avatar-sprite,#roomAvatar>span{transform:rotateX(-90deg)}
.gpu-ready #world{visibility:hidden;pointer-events:none}
#gpuCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#gpuControls{background:#0b1b27;color:#defaff;border:1px solid #35e5ed;max-height:95vh;max-width:95vw;padding:15px;overflow:auto}
#gpuControlBody{position:relative;min-width:460px}
#gpuControlBody>#crate{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:650px!important;height:540px!important}
#gpuControlBody>#proFace,#gpuControlBody>#proFaceB,#gpuControlBody>#mixerFace{position:relative!important;inset:auto!important;transform:none!important;visibility:visible!important}
#gpuNote{font:10px sans-serif;color:#53efbc;max-width:280px;margin:0 15px}
.texture-capture{position:fixed;left:-10000px;top:0;width:600px;height:827px;border:0}
.gpu-video{font-size:10px}.gpu-video input{width:180px;font-size:10px}
#gpuControls{width:700px;max-width:95vw}
#gpuControlBody{width:max-content;max-width:100%}
#gpuControlBody>#crate{width:650px!important;max-width:85vw!important}
#gpuControls .crate-footer{position:relative}

/* Keep the scene from being squeezed to zero by wrapped phone toolbars. */
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  body {height:auto;min-height:100vh;min-height:100dvh;overflow:auto;overflow-x:hidden;}
  header {height:auto;min-height:64px;flex-wrap:wrap;gap:8px;padding:10px 12px;}
  #stage {flex:0 0 auto;height:60vh;height:60svh;min-height:280px;width:100%;}
  #gpuNote {max-width:100%;margin:0;font-size:11px;}
  footer,.avatar-controls,#controller {flex-shrink:0;padding:10px 12px;}
  .view-controls {flex-wrap:wrap;justify-content:flex-start;}
  .avatar-controls {gap:8px;}
  .avatar-controls select {max-width:65vw;}
  .avatar-controls button,.view-controls button {min-height:44px;}
  #controller span {min-width:0;}
  #controller small {line-height:1.5;}
}

/* The GPU owns the room; avoid compositing the enormous hidden CSS scene. */
.gpu-ready #world {display:none;}