/* MY LITTLE WORLD ♡ — RESPONSIVE TEST */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #21131f; }
body { min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; align-items: center; }
.room { position: relative; width: 100%; max-width: 1536px; aspect-ratio: 3 / 2; flex: 0 0 auto; }
.bedroom { display: block; width: 100%; height: 100%; }
.hotspot { position: absolute; display: block; z-index: 10; cursor: pointer; border-radius: 10px; }
.travel { left: 35.5%; top: 20%; width: 9%; height: 5%; }
.lily { left: 31%; top: 38%; width: 8%; height: 5%; }
.books { left: 49%; top: 23%; width: 9%; height: 5%; }
.food { left: 41%; top: 44%; width: 8%; height: 5%; }
.about { left: 69%; top: 17%; width: 11%; height: 6%; }
.laptop { left: 67%; top: 38%; width: 10%; height: 5%; }
.mirror { left: 86%; top: 42%; width: 10%; height: 5%; }
.bed { left: 2.5%; top: 63%; width: 8%; height: 6%; }
.music { left: 41%; top: 70%; width: 10%; height: 6%; }
.journal { left: 54%; top: 85%; width: 11%; height: 6%; }
.junk { left: 66%; top: 56%; width: 13%; height: 6%; }
.hotspot:hover, .hotspot:focus-visible { outline: 2px solid #ffb7e2; background: rgba(255, 183, 226, 0.18); }
@media (max-width: 700px) and (orientation: portrait) {
  html, body { width: 100%; min-height: 100%; }
  body { display: block; overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .room { width: max(100vw, 150dvh); max-width: none; margin: 0; }
  .hotspot { touch-action: manipulation; }
}

/* Full-height mobile room: horizontal exploration, no dark bottom gap. */
@media (max-width: 700px) and (orientation: portrait) {
  html, body { height: 100%; }
  body { height: 100dvh; overflow-y: hidden; overflow-x: auto; align-items: initial; }
  .room { height: 100dvh; aspect-ratio: 3 / 2; }
}