:root{--device-safe-top:env(safe-area-inset-top,0px);--device-safe-bottom:env(safe-area-inset-bottom,0px);--device-safe-left:env(safe-area-inset-left,0px);--device-safe-right:env(safe-area-inset-right,0px)}
html{overflow:hidden;height:100%}
html body.dex-page{display:block;overflow:hidden;padding:0;margin:0;width:100%;height:100vh;height:100dvh;min-height:0;isolation:isolate;background:#090d17}
/* The backdrop has its own full-viewport plane, rotated with the handheld. */
html body.dex-page:before{content:'';display:block;position:fixed;left:var(--backdrop-center-x,50vw);top:var(--backdrop-center-y,50dvh);width:var(--backdrop-width,100vw);height:var(--backdrop-height,100dvh);transform:translate(-50%,-50%) rotate(var(--backdrop-rotation,0deg));transform-origin:center;z-index:0;background:#090d17 url('/ui/violet-studio.webp') center/cover no-repeat;pointer-events:none;forced-color-adjust:none}
.device-stage{z-index:1}
.device-stage{--fallback-width:calc(100vw - 12px);--fallback-height:calc(100dvh - 12px);--fallback-device-width:min(calc(var(--fallback-width) * 1.0228384992),calc(var(--fallback-height) * 2.0160771704));--fallback-rotation:0deg;position:fixed;left:var(--fit-center-x,50vw);top:var(--fit-center-y,50dvh);width:var(--fit-stage-width,var(--fallback-width));height:var(--fit-stage-height,var(--fallback-height));transform:translate(-50%,-50%) rotate(var(--fit-rotation,var(--fallback-rotation)));transform-origin:center;isolation:isolate}
html body.dex-page #device-stage #handheld-unit{position:absolute;left:50%;top:var(--fit-device-top,calc(50% - var(--unit-width) * .2591706539));width:var(--unit-width);height:var(--fit-device-height,calc(var(--unit-width) * .5422647528));transform:translateX(-50%);margin:0;--unit-width:var(--fit-device-width,var(--fallback-device-width));--px:calc(var(--unit-width)/1254)}
/* A compact return control fits the empty corner without taking a row from the device. */
html body.dex-page #device-stage .site-return{position:absolute;top:0;left:0;z-index:60;display:grid;place-items:center;width:28px;height:28px;min-height:28px;padding:0;font-size:0;line-height:1;letter-spacing:0;border-radius:50%}
html body.dex-page #device-stage .site-return:before{content:'←';font-size:16px}
.device-stage .analog-control,.device-stage .analog-stick{min-width:0;min-height:0}
/* Every mode retains the same contained LCD layout and original physical shell. */
#screen-ui{position:absolute;left:0;top:0;width:619px;height:410px;transform:scale(var(--screen-scale,1));transform-origin:0 0;z-index:1;--px:1px}
#screen-ui #detail-dialog{position:absolute;inset:4px;width:611px;height:402px;max-width:none;max-height:none;margin:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#screen-ui .screen-scroll{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media(prefers-reduced-motion:reduce){html body.dex-page *{scroll-behavior:auto!important}}

@media(orientation:portrait) and (pointer:coarse){
  html{--backdrop-width:100dvh;--backdrop-height:100vw;--backdrop-rotation:90deg}
  .device-stage{--fallback-width:calc(100dvh - 12px);--fallback-height:calc(100vw - 12px);--fallback-rotation:90deg}
}