/* The Foundry's bedroom, first version, in plain shapes. One explicit colour theme. */
* { box-sizing: border-box; }
body { margin: 0; background: #2a0a14; color: #f2e2c4; font: 18px/1.5 Georgia, serif; }
main { max-width: 760px; margin: 0 auto; padding: 60px 14px 140px; }
.quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.room { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #6d4a63; border: 4px solid #c9a24b; border-radius: 10px; overflow: hidden; }
.room i { position: absolute; display: block; }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: #8a6a4a; border-top: 4px solid #2a0a14; }
.window { position: absolute; left: 8%; top: 9%; width: 20%; height: 30%; background: #1d2a4a; border: 4px solid #f2e2c4; }
.window i { left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #f2e2c4; }
.poster { position: absolute; top: 12%; width: 11%; height: 22%; border: 3px solid #2a0a14; }
.poster.one { left: 36%; background: #d8508f; transform: rotate(-3deg); }
.poster.two { left: 50%; background: #4fb3a9; transform: rotate(2deg); }
.bed { position: absolute; left: 4%; bottom: 20%; width: 46%; height: 24%; background: #f2e2c4; border: 4px solid #2a0a14; border-radius: 10px 10px 4px 4px; z-index: 1; }
.bed .pillow { left: 4%; top: -22%; width: 30%; height: 40%; background: #fffdf6; border: 3px solid #2a0a14; border-radius: 10px; }
.bed .quilt { left: 30%; right: 0; top: 0; bottom: 0; background: #b63f7a; border-left: 4px solid #2a0a14; border-radius: 0 6px 0 0; }
.vanity { position: absolute; right: 6%; bottom: 22%; width: 30%; height: 50%; z-index: 1; }
.vanity .mirror { left: 20%; right: 20%; top: 0; height: 52%; background: #cfe3ea; border: 4px solid #c9a24b; border-radius: 50% 50% 8px 8px; }
.vanity .top { left: 0; right: 0; top: 60%; height: 12%; background: #7a5230; border: 4px solid #2a0a14; }
.vanity .legs { left: 8%; right: 8%; top: 72%; bottom: 0; border-left: 6px solid #2a0a14; border-right: 6px solid #2a0a14; }
.doll, .box, .boom { position: absolute; z-index: 2; display: block; transition: transform .2s ease; }
.doll:hover, .box:hover, .boom:hover, .doll:focus-visible, .box:focus-visible, .boom:focus-visible { transform: translateY(-4px) rotate(-2deg); outline: 3px solid #c9a24b; outline-offset: 4px; }
.doll { left: 30%; bottom: 40%; width: 9%; height: 22%; }
.doll .head { left: 22%; top: 0; width: 56%; aspect-ratio: 1; background: #f2c9a3; border: 3px solid #2a0a14; border-radius: 50%; }
.doll .dress { left: 0; right: 0; top: 34%; bottom: 0; background: #fffdf6; border: 3px solid #2a0a14; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.box { right: 15%; bottom: 46%; width: 12%; height: 10%; }
.box .lid { left: 0; right: 0; bottom: 0; height: 60%; background: #c4477a; border: 3px solid #2a0a14; border-radius: 4px; }
.box .dancer { left: 42%; bottom: 60%; width: 16%; height: 60%; background: #fffdf6; border: 2px solid #2a0a14; border-radius: 50% 50% 0 0; }
.boom { left: 40%; bottom: 5%; width: 24%; height: 14%; background: #55555f; border: 4px solid #2a0a14; border-radius: 8px; }
.boom .spk { top: 18%; width: 24%; aspect-ratio: 1; background: #2a1c2e; border: 3px solid #c9c9d1; border-radius: 50%; }
.boom .spk.l { left: 6%; } .boom .spk.r { right: 6%; }
.boom .deck { left: 36%; right: 36%; top: 26%; height: 40%; background: #f2e2c4; border: 3px solid #2a0a14; }