/* Layout C: original artwork coordinates inside a wider decorative environment. */
html,body{width:100%;height:100%;overflow:hidden}
#roomWorld{--art-width:calc(100dvh * 1672 / 941);--bedroom-width:max(calc(100vw + 40px),var(--art-width));--passage-width:clamp(280px,32vw,500px)}
#roomWorld:before{content:'';position:absolute;inset:0 auto 0 0;width:var(--bedroom-width);background:url('./assets/extensions/childhood.jpg') center/cover no-repeat;pointer-events:none}
#roomCamera{left:calc((var(--bedroom-width) - var(--art-width))/2);width:var(--art-width);height:100%;aspect-ratio:1672/941}
#practiceRoot.practice-v5{--art-width:300dvh;--scene-width:max(calc(100vw + 40px),var(--art-width));--scene-height:100dvh}
#practiceRoot.practice-v5 .practice-world{background:url('./assets/extensions/practice.jpg') center/cover no-repeat}
.practice-original{position:absolute;left:calc((var(--scene-width) - var(--art-width))/2);top:0;width:var(--art-width);height:100%;container-type:size}
#practiceRoot.practice-v5 .room-background{object-fit:contain}
.dorm-world{--main-width:calc(100dvh * 1672 / 941);--room-span:max(calc(100vw + 40px),var(--main-width));--door-width:calc(100dvh * 320 / 941);width:calc(var(--room-span) + var(--door-width));height:100dvh;aspect-ratio:auto}
.dorm-world:before{content:'';position:absolute;left:var(--door-width);top:0;width:var(--room-span);height:100%;background:url('./assets/extensions/dorm.jpg') center/cover no-repeat;pointer-events:none}
.dorm-room-main{left:calc(var(--door-width) + (var(--room-span) - var(--main-width))/2);width:var(--main-width)}
.dorm-return-wall{width:var(--door-width)}
.ar-room{height:100dvh;min-height:0}
.ar-world{height:100%}
.ar-original{position:absolute;inset:0;width:100%;height:100%}
@media(min-aspect-ratio:1/1){
 .ar-world{--art-width:calc(100dvh * 1672 / 941);width:max(calc(100vw + 40px),var(--art-width));height:100%}
 .ar-original{left:calc((100% - var(--art-width))/2);width:var(--art-width)}
 .ar-world:after{content:'';position:absolute;inset:0;z-index:-1;background:url('./assets/extensions/audition.jpg') center/cover no-repeat;filter:brightness(.66) saturate(.72);pointer-events:none;transition:filter 1.6s}
 .ar-room[data-lamps='1'] .ar-world:after{filter:brightness(.77) saturate(.88)}
 .ar-room[data-lamps='2'] .ar-world:after{filter:brightness(1) saturate(.94)}
 .ar-room[data-state='POWER_OFF_READY'] .ar-world:after{filter:brightness(.5)}
 .ar-background{object-fit:contain}
}
@media(pointer:coarse){.tonearm-control{clip-path:inset(0 26% 0 26%);-webkit-touch-callout:none}.tonearm-control>img{clip-path:inset(5% 35% 3% 36%)}}
/* Sample only the generated outer strips; never expose generated copies of objects. */
#roomWorld:before,.dorm-world:before,.ar-world:after{display:none}
#roomCamera:before,#roomCamera:after,.dorm-room-main:before,.dorm-room-main:after,.practice-original:before,.practice-original:after,.ar-original:before,.ar-original:after{
 content:'';position:absolute;top:0;height:100%;pointer-events:none;box-shadow:none;
 width:var(--extension-width);background-image:var(--extension-image);background-size:490.46% 100%;background-repeat:no-repeat;
}
#roomCamera,.dorm-room-main,.practice-original,.ar-original{--extension-width:0px}
#roomCamera{--extension-width:calc((var(--bedroom-width) - var(--art-width))/2);--extension-image:url('./assets/extensions/childhood.jpg')}
.dorm-room-main{--extension-width:calc((var(--room-span) - var(--main-width))/2);--extension-image:url('./assets/extensions/dorm.jpg')}
.practice-original{--extension-width:calc((var(--scene-width) - var(--art-width))/2);--extension-image:url('./assets/extensions/practice.jpg')}
#practiceRoot.practice-v5 .practice-world{background:none}
#roomCamera:before,.dorm-room-main:before,.practice-original:before,.ar-original:before{left:auto;right:100%;background-position:left center}
#roomCamera:after,.dorm-room-main:after,.practice-original:after,.ar-original:after{left:100%;right:auto;bottom:auto;background-position:right center}
@media(min-aspect-ratio:1/1){
 .ar-original{--extension-width:max(0px,calc((100vw + 40px - var(--art-width))/2));--extension-image:url('./assets/extensions/audition.jpg')}
 .ar-original:before,.ar-original:after{filter:brightness(.66) saturate(.72);transition:filter 1.6s}
 .ar-room[data-lamps='1'] .ar-original:before,.ar-room[data-lamps='1'] .ar-original:after{filter:brightness(.77) saturate(.88)}
 .ar-room[data-lamps='2'] .ar-original:before,.ar-room[data-lamps='2'] .ar-original:after{filter:brightness(1) saturate(.94)}
 .ar-room[data-state='POWER_OFF_READY'] .ar-original:before,.ar-room[data-state='POWER_OFF_READY'] .ar-original:after{filter:brightness(.5)}
}
/* Blend only the few edge pixels of background art, never the interactive overlays. */
@media(min-aspect-ratio:1.59/1){
 #roomCamera,.dorm-room-main{background:var(--extension-image) center/300dvh 100% no-repeat}
 #roomCamera>.room-art,.dorm-room-main>.dorm-backdrop{mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
}
@media(min-aspect-ratio:1/1){
 .ar-original{background:var(--extension-image) center/300dvh 100% no-repeat}
 .ar-background{mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
}
.practice-original:before,.practice-original:after{background-size:666.67% 100%}
/* Extension textures also scale uniformly: crop surplus decoration, never stretch it. */
#roomCamera:before,#roomCamera:after,.dorm-room-main:before,.dorm-room-main:after,.practice-original:before,.practice-original:after,.ar-original:before,.ar-original:after{
 --edge-aspect:.611583;--edge-height:max(100dvh,calc(var(--extension-width) / var(--edge-aspect)));
 background-size:calc(var(--edge-height) * 3) var(--edge-height);
}
.practice-original:before,.practice-original:after{--edge-aspect:.45}
#roomCamera:before,.dorm-room-main:before,.practice-original:before,.ar-original:before{background-position:calc(var(--extension-width) - var(--edge-height) * var(--edge-aspect)) bottom}
#roomCamera:after,.dorm-room-main:after,.practice-original:after,.ar-original:after{background-position:calc(var(--edge-height) * (var(--edge-aspect) - 3)) bottom}

/* Wider one-sided outpaints keep floor scale intact on 32:9 displays. */
#roomCamera:before{--edge-aspect:.75;background-image:url('./assets/extensions/childhood-left.jpg')}
#roomCamera:after{--edge-aspect:1.223166;background-image:url('./assets/extensions/childhood-right.jpg')}
.dorm-room-main:before{--edge-aspect:1.223166;background-image:url('./assets/extensions/dorm-left.jpg')}
.dorm-room-main:after{--edge-aspect:1.223166;background-image:url('./assets/extensions/dorm-right.jpg')}
@media(min-aspect-ratio:1/1){
 .ar-original:before{--edge-aspect:1.223166;background-image:url('./assets/extensions/audition-left.jpg')}
 .ar-original:after{--edge-aspect:1.223166;background-image:url('./assets/extensions/audition-right.jpg')}
}

/* The transparent mobile hit box is independent of the narrow visible arm. */
@media(pointer:coarse){
 #tonearmControl{clip-path:none;min-width:44px;min-height:44px;touch-action:none;-webkit-user-select:none}
 #tonearmControl>img{clip-path:inset(5% 35% 3% 36%)}
}