/* Room entrances on the parked cutaway caravan. */
.scene>img{filter:none}
.scene:before,.scene:after{display:none}
.scene .hotspot{transform:none;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,1.65vw,27px);padding:0}
.scene .map{left:6%;top:30%;width:24.5%;height:21%}
.scene .contracts{left:32.6%;top:17.5%;width:29%;height:25.5%}
.scene .staff{left:70.6%;top:19%;width:27%;height:24.5%}
.scene .party{left:32.6%;top:49%;width:29.3%;height:26.5%}
.scene .inventory{left:74%;top:49%;width:24%;height:26.5%}
.scene .vehicle{left:1.5%;top:52%;width:29%;height:21.5%}
.scene .object-glow polygon{stroke-width:1;fill:#fff0a607}
.scene .music-box{left:52%;top:29%;width:5%;height:6%;border-radius:0}
.scene .music-box span{top:50%;font-size:clamp(12px,1.4vw,23px)}

/* Fill the viewport with one proportional canvas; room controls share its coordinates. */
body>.scene{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100vw,177.6833dvh);height:max(100dvh,56.2799vw);max-width:none;max-height:none;aspect-ratio:1672/941;margin:0;z-index:0;overflow:hidden}
body>.scene>img{width:100%;height:100%;object-fit:fill}
body>header{position:fixed;inset:0 0 auto;z-index:5;background:linear-gradient(#020508b3,transparent);pointer-events:none}
body>header>*{pointer-events:auto}
body>footer{position:fixed;inset:auto 0 0;z-index:4;background:linear-gradient(transparent,#02050899);pointer-events:none}

/* Only the dusk moves; the vehicle, courtyard and room hit areas stay still. */
.scene .caravan-dusk{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#71445e}
.scene .caravan-dusk-track{display:flex;width:400%;height:100%;animation:caravan-dusk-drift 240s linear infinite;will-change:transform}
.scene .caravan-dusk-track img{width:25%;height:100%;flex:none;filter:none;object-fit:fill}
.scene .caravan-dusk-track img:nth-child(even){transform:scaleX(-1)}
.scene .caravan-ground{position:absolute;inset:0;z-index:0;pointer-events:none;background:url('ui/caravan-menu-red-v1.webp') center/100% 100% no-repeat;clip-path:inset(83% 0 0)}
body>.scene>img{position:relative;z-index:1;pointer-events:none}
.scene .object-glow{z-index:2}
.scene .hotspot{z-index:3}
.scene .music-box{z-index:4}
@keyframes caravan-dusk-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.scene .caravan-dusk-track{animation:none}}

/* Slightly lower carriage proportions, anchored on the wheel contact line. */
body>.scene>img,.scene .object-glow,.scene .caravan-ground{transform:scaleY(.94);transform-origin:50% 90%}
.scene .map{top:33.6%;height:19.74%}
.scene .contracts{top:21.85%;height:23.97%}
.scene .staff{top:23.26%;height:23.03%}
.scene .party,.scene .inventory{top:51.46%;height:24.91%}
.scene .vehicle{top:54.28%;height:20.21%}
.scene .music-box{top:32.66%;height:5.64%}

/* Cool, restrained carriage palette; the moving sky keeps its sunset colors. */
body>.scene>img{filter:url(#caravan-cold-grade)}

/* Unified illustrated entrances and matching porcelain-blue art labels. */
.scene .hotspot .menu-art{display:flex;flex-direction:column;align-items:center;width:clamp(78px,8.1vw,150px);max-width:66%;pointer-events:none;transition:filter .2s,transform .2s;filter:drop-shadow(0 2px 4px #000b)}
.scene .hotspot .menu-emblem{width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:none}
.scene .hotspot .menu-art-label{width:72%;height:auto;object-fit:contain;filter:none;margin-top:2px}
.scene .hotspot:hover .menu-art,.scene .hotspot:focus-visible .menu-art{filter:drop-shadow(0 0 6px #9abdf0aa) drop-shadow(0 2px 4px #000b);transform:scale(1.04)}
.scene .hotspot:focus-visible .menu-art{outline:1px solid #bdd4f6;outline-offset:5px;border-radius:4px}
@media(max-width:760px){.scene .hotspot .menu-art{width:clamp(65px,9vw,95px)}}

/* Selection colors the entrance artwork itself. */
.scene .object-glow polygon,.scene .object-glow polygon.active{fill:none!important;stroke:none!important;filter:none!important}
.scene .hotspot:hover .menu-art,.scene .hotspot:focus-visible .menu-art{filter:sepia(.75) saturate(.85) brightness(1.12) drop-shadow(0 0 3px #fff1c277) drop-shadow(0 0 8px #f5dfa53d) drop-shadow(0 2px 4px #0008);transform:scale(1.04);outline:none}
.scene .hotspot:focus-visible .menu-art{outline:none}

/* Resting pale gold, selected luminous pale yellow. */
.scene .hotspot .menu-art{filter:sepia(.75) saturate(.85) brightness(1.12) drop-shadow(0 2px 4px #0008)}
.scene .hotspot:hover .menu-art,.scene .hotspot:focus-visible .menu-art{filter:sepia(.9) saturate(.7) brightness(1.3) drop-shadow(0 0 4px #fff7b7aa) drop-shadow(0 0 11px #fff0a766) drop-shadow(0 2px 4px #0008);outline:none}