/* Coordinates are independent of the generated raster artwork. Desktop and portrait layouts
   follow the two actually inspected references, rather than crop one canvas.
   Keep pet centered: its original movement code owns --pet-offset. */
.room {
  --floor-top: 53%; --room-corner: 19.1%;
  --window-left: 3.8%; --window-top: 1.8%;
  --window-height: 46%; --window-width: min(15vw, 220px); --window-border: 0px;
  --chrome-left: calc(var(--window-left) + var(--window-width) + 38px);
  --desk-x: 18.3%; --desk-y: 35%; --desk-w: min(29vw, 430px);
  --computer-w: calc(var(--desk-w) * .39);
  --desk-stool-x: calc(var(--desk-x) + var(--desk-w) * .31);
  --desk-stool-y: calc(var(--desk-y) + var(--desk-w) * .20);
  --desk-stool-w: calc(var(--desk-w) * .33);
  --calendar-x: 53%; --calendar-y: 12%; --calendar-w: clamp(96px, 9vw, 142px);
  --timer-x: 85%; --timer-y: 37%; --timer-w: clamp(54px, 5.5vw, 84px);
  --timer-support-x: 82%; --timer-support-w: clamp(112px, 10vw, 154px);
  --note-support-x: 2%; --note-support-y: 73%; --note-support-w: min(24vw, 330px);
  --note-x: calc(var(--note-support-x) + var(--note-support-w) * .14);
  --note-y: calc(var(--note-support-y) - var(--note-support-w) * .05);
  --note-w: calc(var(--note-support-w) * .56);
  --rug-w: min(43vw, 660px); --rug-bottom: 10%; --rug-ratio: .318;
  --character-w: 220px; --character-bottom: 14%;
  --jelly-x: 80%; --jelly-bottom: 13%; --jelly-w: clamp(144px, 16vw, 230px);
  --controls-bottom: max(24px, env(safe-area-inset-bottom));
}
.room-wall {bottom: calc(100% - var(--floor-top))}
.room-floor {top: var(--floor-top)}
.desk {left: var(--desk-x); top: var(--desk-y); width: var(--desk-w); height: calc(var(--desk-w) * 260 / 460); bottom: auto}
.computer {left: calc(var(--desk-x) + var(--desk-w) * .23); top: calc(var(--desk-y) - var(--computer-w) * .75); width: var(--computer-w); height: auto; bottom: auto}
.desk-stool {left: var(--desk-stool-x); top: var(--desk-stool-y); width: var(--desk-stool-w); height: calc(var(--desk-stool-w) * 170 / 180)}
.calendar-object {left: var(--calendar-x); top: var(--calendar-y); width: var(--calendar-w); height: calc(var(--calendar-w) * 235 / 165); right: auto; bottom: auto}
.timer-object {left: var(--timer-x); top: var(--timer-y); width: var(--timer-w); height: calc(var(--timer-w) * 128 / 130); bottom: auto}
.timer-support {left: var(--timer-support-x); top: calc(var(--timer-y) + var(--timer-w) * .84 - var(--timer-support-w) * .078); width: var(--timer-support-w); height: calc(var(--timer-support-w) * 170 / 180)}
.side-table {left: var(--note-support-x); top: var(--note-support-y); width: var(--note-support-w); height: calc(var(--note-support-w) * 185 / 300); right: auto; bottom: auto}
.notebook-object {left: var(--note-x); top: var(--note-y); width: var(--note-w); height: calc(var(--note-w) * 112 / 190); right: auto; bottom: auto}
.rug {width: var(--rug-w); height: calc(var(--rug-w) * var(--rug-ratio)); bottom: var(--rug-bottom)}
.room .pet-button.early-ready, .room .pet-button.sprite-ready {--pet-width: var(--character-w); width: var(--pet-width); height: calc(var(--pet-width) * 208 / 192); bottom: var(--character-bottom)}
.room .green-jelly {left: var(--jelly-x); bottom: var(--jelly-bottom); width: var(--jelly-w); height: calc(var(--jelly-w) * .96); transform: none}
.room .pet-joystick {bottom: var(--controls-bottom)}
.room .pat-button {bottom: calc(var(--controls-bottom) + 19px)}
.room .pet-controls {bottom: calc(var(--controls-bottom) + 12px)}

/* Portrait reference: narrow window, work table in the back, note table left,
   separate timer stool right, rug at center and green friend in the foreground. */
@media (max-width: 900px) {
  .room {
    --floor-top: 44%; --room-corner: 27%;
    --window-left: 4%; --window-top: max(18px, env(safe-area-inset-top));
    --window-width: 22%; --window-height: 34%;
    --chrome-left: calc(var(--window-left) + var(--window-width) + 18px);
    --desk-x: 18%; --desk-y: 34%; --desk-w: 47vw;
    --computer-w: calc(var(--desk-w) * .44);
    --desk-stool-x: calc(var(--desk-x) + var(--desk-w) * .28);
    --desk-stool-y: calc(var(--desk-y) + var(--desk-w) * .17);
    --desk-stool-w: calc(var(--desk-w) * .37);
    --calendar-x: 71%; --calendar-y: 14.5%; --calendar-w: 20vw;
    --timer-x: 79%; --timer-y: 37%; --timer-w: clamp(46px, 11vw, 75px);
    --timer-support-x: 73%; --timer-support-w: 23vw;
    --note-support-x: 2%; --note-support-y: 54%; --note-support-w: 33vw;
    --note-y: calc(var(--note-support-y) - var(--note-support-w) * .12);
    --rug-w: 81vw; --rug-bottom: 24%; --rug-ratio: .482;
    --character-w: clamp(148px, 40vw, 190px); --character-bottom: 27%;
    --jelly-x: 64%; --jelly-bottom: 18%; --jelly-w: 32vw;
    --controls-bottom: calc(46px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 359px) {
  .room {--calendar-y: 18%; --timer-w: 44px; --character-w: 144px; --jelly-x: 65%; --jelly-w: 31vw; --chrome-left: calc(var(--window-left) + var(--window-width) + 14px)}
}

/* Compact phone height is a new composition, including space above controls. */
@media (max-height: 540px) and (max-width: 600px) {
  .room {
    --floor-top: 45%; --window-height: 32%; --window-width: 21%;
    --desk-x: 24%; --desk-y: 36%; --desk-w: 44vw;
    --calendar-x: 77%; --calendar-y: 24%; --calendar-w: 18vw;
    --timer-x: 80%; --timer-y: 49%; --timer-w: 42px;
    --timer-support-x: 76%; --timer-support-w: 23vw;
    --note-support-y: 48%; --note-support-w: 32vw;
    --character-w: 112px; --character-bottom: 24%;
    --rug-w: 78vw; --rug-bottom: 23%; --rug-ratio: .32;
    --jelly-x: 69%; --jelly-bottom: 17%; --jelly-w: 27vw;
    --controls-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}
/* Landscape/actual large page zoom use the width, with small back-wall objects. */
@media (max-height: 650px) and (min-width: 601px) {
  .room {
    --floor-top: 53%; --room-corner: 19%;
    --window-left: 3%; --window-top: 16px; --window-width: clamp(84px, 12vw, 116px); --window-height: 45%;
    --chrome-left: calc(var(--window-left) + var(--window-width) + 24px);
    --desk-x: 18%; --desk-y: 42%; --desk-w: 29vw;
    --computer-w: calc(var(--desk-w) * .40);
    --calendar-x: 55%; --calendar-y: 10%; --calendar-w: clamp(75px, 10vw, 100px);
    --timer-x: 84%; --timer-y: 40%; --timer-w: 54px;
    --timer-support-x: 82%; --timer-support-w: 13vw;
    --note-support-x: 3%; --note-support-y: 70%; --note-support-w: 23vw;
    --note-y: calc(var(--note-support-y) - var(--note-support-w) * .08);
    --rug-w: 40vw; --rug-bottom: 18%; --rug-ratio: .318;
    --character-w: 128px; --character-bottom: 24%;
    --jelly-x: 76%; --jelly-bottom: 15%; --jelly-w: 17vw;
    --controls-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}