/* The painted room always occupies one viewport. Only a narrow room may pan horizontally. */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#room-dialog {
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  overflow-y: hidden !important;
  overscroll-behavior-y: none !important;
  box-sizing: border-box;
}

@media (min-width: 901px) {
  #room-dialog {
    overflow-x: hidden !important;
    touch-action: none !important;
  }

  #room-dialog > .chamber-stage,
  #room-dialog > .chamber-toolbar {
    position: absolute !important;
    inset: auto !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    width: max(100vw, 177.68332vh) !important;
    width: max(100vw, 177.68332dvh) !important;
    height: max(56.279905vw, 100vh) !important;
    height: max(56.279905vw, 100dvh) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    aspect-ratio: 1672 / 941 !important;
  }

  #room-dialog > .chamber-stage #room-art,
  #room-dialog > .chamber-stage #chamber-world,
  #room-dialog > .chamber-stage .chamber-atmosphere {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
  }
}

@media (max-width: 900px) {
  #room-dialog {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    scrollbar-width: none;
  }

  #room-dialog::-webkit-scrollbar {
    display: none;
  }

  #room-dialog > .chamber-stage,
  #room-dialog > .chamber-toolbar {
    inset: auto !important;
    left: 0 !important;
    top: 0 !important;
    width: max(100vw, 177.68332vh) !important;
    width: max(100vw, 177.68332dvh) !important;
    height: max(100vh, 56.279905vw) !important;
    height: max(100dvh, 56.279905vw) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    transform: none !important;
    aspect-ratio: auto !important;
  }

  #room-dialog > .chamber-stage {
    position: relative !important;
    overflow: hidden !important;
  }

  #room-dialog > .chamber-toolbar {
    position: absolute !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  #room-dialog > .chamber-stage,
  #room-dialog > .chamber-toolbar {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
  }
}

/* Keep the tested room return and studio link inside a horizontally cropped desktop viewport. */
@media (min-width:901px) and (max-aspect-ratio:1672/941){
  #room-dialog:has(.chamber-stage[data-room=works],.chamber-stage[data-room=about],.chamber-stage[data-room=price],.chamber-stage[data-room=reviews],.chamber-stage[data-room=contact]) #room-back{left:calc(50% - 47vw)!important}
  #room-dialog:has(.chamber-stage[data-room=works],.chamber-stage[data-room=about],.chamber-stage[data-room=price],.chamber-stage[data-room=reviews]) .chamber-toolbar .chamber-brand{left:calc(50% - 47.2vw)!important}
}

@media (min-width:901px) and (max-aspect-ratio:1672/941){
  #room-dialog:has(.chamber-stage[data-room=contact]) .chamber-toolbar .chamber-brand{left:auto!important;right:calc(50% - 47.2vw)!important}
}