/* Keep the room controls fixed while only the floor is zoomed. */
body:has(#world) .roomChrome,
body.roomMobileViewport:has(#world) .roomChrome{position:relative;z-index:90}
/* This space belongs to the unzoomed viewport, so it stays visible at 60%. */
body:has(#world):not(.roomMobileViewport) #app{
  box-sizing:border-box;
  padding-top:calc(var(--lc-zoom-top-height,64px) + 28px);
  padding-bottom:56px;
}
body:has(#world) .world{margin-top:0}
body.roomMobileViewport:has(#world) .roomFloorViewport{
  top:var(--lc-zoom-top-height,94px);
  box-sizing:border-box;padding:28px 28px 96px;
}
body:has(#world) .top .roomZoomBtn{
  width:38px;height:38px;flex:0 0 38px;padding:0;
  display:grid;place-items:center;background:#a9d9fa;color:#28212d;
  border:3px solid #28212d;border-radius:0;box-shadow:3px 3px 0 #28212d;
  font:900 25px/1 'Courier New',monospace;cursor:pointer;
}
body:has(#world) .top .roomZoomBtn:hover:not(:disabled){background:#d0ebff;transform:translate(1px,1px);box-shadow:2px 2px 0 #28212d}
body:has(#world) .top .roomZoomBtn:focus-visible{outline:3px solid #1685b0;outline-offset:3px}
body:has(#world) .top .roomZoomBtn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:950px){
  body:has(#world) .top:has(.roomZoomBtn){
    height:auto;min-height:64px;flex-wrap:wrap;align-content:center;row-gap:5px;padding-block:7px;
  }
  body:has(#world) .top .roomToolbar{gap:6px}
}
@media(max-width:700px){
  body:has(#world) .top .roomZoomBtn{width:34px;height:34px;flex-basis:34px;font-size:22px;box-shadow:2px 2px 0 #28212d}
}
@media(max-width:600px){
  body:has(#world) .top:has(.roomZoomBtn){min-height:94px;padding-block:6px}
}