/* Passive scenery only. #game retains its reference portrait coordinates. */
html,body{overflow:hidden;overscroll-behavior:none}
.shell{position:relative;z-index:1;background:transparent}
#game{box-shadow:none;overflow:visible}
#scene{overflow:visible;clip-path:inset(0 -100dvh)}
#props{overflow:visible}
/* The story footer was fixed to the whole browser, escaping the portrait game. */
.dialogue footer{left:50%;right:auto;width:min(100vw,calc(100dvh * .4501953125));transform:translateX(-50%)}
.portrait-surround{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(100vw,100dvh);height:100dvh;overflow:hidden;pointer-events:none;z-index:0;background:#211630;isolation:isolate}
.portrait-surround>img{position:absolute;top:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(calc(-50% + var(--scene-offset,0px)))}
.portrait-surround>.source-continuation{mask-image:linear-gradient(to right,transparent,#000 var(--edge-width),#000 calc(100% - var(--edge-width)),transparent)}
.portrait-surround>.left-outpaint{display:none}
/* A single square room plate crosses both portrait edges. Never stitch a
   separately scaled desk/floor behind the central image. */
.portrait-surround[data-scene=home]{visibility:hidden}
#game[data-wide-room=true] #room{position:absolute;left:50%;top:0;width:100cqh;height:100%;max-width:none;object-fit:fill;object-position:center;transform:translateX(-50%)}
#game[data-wide-room=true] .scene:after{background:none}
.room-headboard-upgrade{position:absolute;left:50%;top:0;width:100cqh;height:100%;max-width:none;transform:translateX(-50%);clip-path:polygon(60.8% 36.8%,72.7% 36.8%,72.7% 39.5%,60.8% 39.5%);z-index:1;pointer-events:none}
.portrait-surround[data-scene=studio]>.left-outpaint{display:block;clip-path:inset(0 50% 0 0);transform:translateX(calc(-50% + var(--scene-offset,0px))) scaleX(1.12);transform-origin:0 50%}
.portrait-surround[data-scene=studio]>img:first-child{transform:translateX(calc(-50% + var(--scene-offset,0px))) scaleX(1.15);transform-origin:100% 50%}
.portrait-surround>.chair-continuation{display:none}
.portrait-surround[data-scene=studio]>.chair-continuation{display:block;clip-path:polygon(84% 34%,100% 34%,100% 48%,84% 48%);mask-image:linear-gradient(to right,#000 calc(100% - 3px),transparent)}
.portrait-surround:before,.portrait-surround:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.portrait-surround:before{background:linear-gradient(#30223c18,transparent 18%,transparent 80%,#30223c15)}
.portrait-surround[data-stage=true]:before{background:linear-gradient(#160e3899,transparent 27%,transparent 78%,#190d3988)}
.portrait-surround[data-stage=true]>.source-continuation{display:none}
#game[data-stage-open=true]>:is(#scene,.hud,.left-rail,.right-rail,.utility,.bottom-nav,.stream-brand,.stream-chat,.stream-reactions,.floating-invite){visibility:hidden}
#game[data-stage-open=true] .stage-backdrop{background-image:url('assets/responsive/dance-wide.png');background-size:auto 100%;background-position:center}
#game[data-stage-open=true] .guitar-mini .stage-backdrop{background-image:url('assets/responsive/guitar-wide.png')}
.portrait-surround[data-hit=true]:after{background:#dc274d33}
.portrait-surround[data-story=true]:before{background:none}
#game[data-surround-covered=true]:after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100vw,100dvh);height:100%;background:#301d425e;backdrop-filter:blur(2px);z-index:19;pointer-events:none}
#game[data-surround-covered=true] #overlay{background:transparent;backdrop-filter:none}

/* Controls follow the visible scenery; actor and furniture coordinates stay local. */
#game{--ui-width:min(100vw,100dvh);--ui-outset:calc((var(--ui-width) - 100%) / 2);--ui-edge:clamp(10px,2.4vmin,24px);--ui-button:clamp(46px,max(13.8cqw,7.8vmin),84px);--ui-bottom:max(12px,env(safe-area-inset-bottom));--ui-top:max(12px,env(safe-area-inset-top))}
#game .hud{inset:0}
#game .hud .square{top:var(--ui-top);width:var(--ui-button);height:var(--ui-button)}
#game .hud [data-open=map]{left:calc(var(--ui-edge) - var(--ui-outset))}
#game .hud [data-open=settings]{right:calc(var(--ui-edge) - var(--ui-outset))}
#game .left-rail,#game .right-rail{top:calc(var(--ui-top) + var(--ui-button) + 18px);width:var(--ui-button);gap:clamp(10px,2vmin,22px)}
#game .left-rail{left:calc(var(--ui-edge) - var(--ui-outset))}
#game .right-rail{right:calc(var(--ui-edge) - var(--ui-outset))}
#game .rail{width:var(--ui-button);min-width:0;height:var(--ui-button);min-height:0}
#game .utility,#game .bottom-nav{left:calc(var(--ui-edge) - var(--ui-outset));right:calc(var(--ui-edge) - var(--ui-outset));height:var(--ui-button);padding:0;gap:0;justify-content:space-between}
#game .utility{bottom:calc(var(--ui-bottom) + var(--ui-button) + 14px);pointer-events:none}
#game .utility .square{width:var(--ui-button);height:var(--ui-button);pointer-events:auto}
#game .bottom-nav{bottom:var(--ui-bottom)}
#game .bottom-nav button{flex:0 0 var(--ui-button);width:var(--ui-button);height:var(--ui-button)}
#game #cheat-button{position:absolute;top:calc(var(--ui-top) + var(--ui-button) + 8px);left:50%;transform:translateX(-50%);min-height:32px;font-size:clamp(12px,1.6vmin,16px)}
#game .wallet,#game .wallet.rate{top:var(--ui-top)}
#game .premium{top:calc(var(--ui-top) + 30px)}
#game .energy-wrap{top:calc(var(--ui-top) + var(--ui-button) + 49px)}
#game .stream-brand{top:calc(var(--ui-top) + var(--ui-button) + 74px)}
#game .stream-chat{bottom:calc(var(--ui-bottom) + var(--ui-button) + 10px)}
@media(max-height:480px) and (orientation:landscape){
 #game .stream-brand{top:calc(var(--ui-top) + var(--ui-button) + 8px);left:calc(50% + 34px);right:auto;width:100px;height:26px;font-size:10px}
 #game .stream-brand b{font-size:10px}#game .stream-brand small{font-size:8px}
 #game .live-tag,#game .live-viewers{font-size:8px}
 #game .energy-wrap{top:calc(var(--ui-top) + 32px);left:calc(50% - 130px);width:55px;height:6px}
}