/* Floor layout — multiple rooms side-by-side in one viewport.
   Each room keeps its internal 640x420 + full-flap-drop geometry,
   but gets scaled via transform so multiple fit in a laptop viewport.
   Only one flap can be open at a time (enforced in room.js). */

/* override the scene's default padding/center to fit three rooms horizontally */
.floor-chunk {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  padding: 40px 24px 320px;   /* bottom padding leaves room for the dropped flap */
  min-height: 100vh;
}

/* each room sits in a fixed-size slot; the room itself scales inside. */
:root {
  --room-scale: 0.55;
}

.floor-chunk .room-slot {
  position: relative;
  /* slot width/height = scaled room dimensions (layout footprint) */
  width: calc(640px * var(--room-scale));
  height: calc(420px * var(--room-scale));
  transition: height 1.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  flex-shrink: 0;
}
.floor-chunk .room-slot.is-expanded {
  height: calc(798px * var(--room-scale));
}

.floor-chunk .room-slot .room {
  /* scale from top-left so the slot's footprint matches the visible room.
     Flap drops below and is allowed to overflow (slot / scene overflow: visible). */
  transform: scale(var(--room-scale));
  transform-origin: top left;
}

/* make sure nothing clips the flap when it drops past the slot */
.floor-chunk,
.floor-chunk .room-slot,
.floor-chunk .room {
  overflow: visible;
}