/* The dollhouse, first version, in plain shapes. One explicit colour theme. --turn shifts every colour a little with each doll you go inside. */
* { box-sizing: border-box; }
body { margin: 0; background: #2a0a14; color: #f2e2c4; font: 17px/1.45 Georgia, serif; overflow-x: hidden; }
main { max-width: 760px; margin: 0 auto; padding: 56px 12px 150px; }
.quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.frame { position: relative; width: 100%; aspect-ratio: 10 / 8; background: #1d2a4a; border: 4px solid #c9a24b; border-radius: 10px; overflow: hidden; filter: hue-rotate(var(--turn, 0deg)); }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: #47633c; }
.house { position: absolute; left: 22%; width: 50%; top: 6%; bottom: 12%; display: grid; grid-template-rows: 20% 26% 27% 27%; background: #f2e2c4; border: 4px solid #2a0a14; border-top: 0; }
.roof { position: absolute; left: -9%; right: -9%; top: -1px; height: 20%; background: #7a1f3d; clip-path: polygon(50% 0, 100% 100%, 0 100%); z-index: 0; }
.room { position: relative; border-top: 4px solid #2a0a14; overflow: hidden; }
.room .way { position: absolute; inset: 0; z-index: 1; }
.room .way:hover, .room .way:focus-visible { background: #ffe9a833; outline: 3px solid #c9a24b; outline-offset: -3px; }
.attic { border-top: 0; background: transparent; clip-path: polygon(50% 0, 100% 100%, 0 100%); z-index: 1; }
.bedroom { background: #6d4a63; } .living { background: #4f6f7a; } .kitchen { background: #d9c58a; }
.garden { position: absolute; left: 0; width: 22%; bottom: 0; height: 46%; border: 0; background: linear-gradient(#0000 0 74%, #47633c 74%); overflow: visible; }
.drive { position: absolute; right: 0; width: 28%; bottom: 0; height: 34%; border: 0; background: linear-gradient(#0000 0 66%, #77706a 66%); }
.thing { position: absolute; display: block; pointer-events: none; z-index: 0; }
.trunk { left: 44%; bottom: 6%; width: 16%; height: 30%; background: #7a5230; border: 3px solid #2a0a14; }
.ball { left: 50%; bottom: 38%; width: 7%; aspect-ratio: 1; border-radius: 50%; background: #c98be0; border: 3px solid #2a0a14; }
.bed { left: 8%; bottom: 0; width: 42%; height: 36%; background: #b63f7a; border: 3px solid #2a0a14; border-radius: 8px 8px 0 0; }
.box { right: 12%; bottom: 0; width: 18%; height: 30%; background: #c4477a; border: 3px solid #2a0a14; }
.tv { left: 10%; bottom: 0; width: 26%; height: 52%; background: #7a5230; border: 3px solid #2a0a14; box-shadow: inset 0 0 0 7px #7a5230, inset 0 0 0 40px #b8c9c4; }
.couch { right: 8%; bottom: 0; width: 40%; height: 34%; background: #b35a3a; border: 3px solid #2a0a14; border-radius: 10px 10px 0 0; }
.stove { left: 8%; bottom: 0; width: 30%; height: 50%; background: #dfe3ea; border: 3px solid #2a0a14; }
.pot { left: 14%; bottom: 50%; width: 18%; height: 18%; background: #55555f; border: 3px solid #2a0a14; border-radius: 0 0 8px 8px; }
.vine { left: 46%; bottom: 26%; width: 8%; height: 70%; background: #6f8f5f; border: 3px solid #47633c; border-radius: 8px; }
.pod { left: 54%; bottom: 60%; width: 34%; height: 12%; background: #9bd65a; border: 3px solid #47633c; border-radius: 20px 20px 20px 4px; }
.bus { left: 8%; bottom: 34%; width: 84%; height: 38%; background: #f2b632; border: 3px solid #5e3a17; border-radius: 10px; box-shadow: inset 0 -12px 0 #d8508f; }
/* a doll: a head and a dress. She is small, and she is a button. */
.doll { position: absolute; z-index: 2; right: 24%; bottom: 2%; width: 9%; min-width: 22px; aspect-ratio: 1 / 2; padding: 0; border: 0; background: none; cursor: zoom-in; }
.doll::before { content: ""; position: absolute; left: 22%; top: 0; width: 56%; aspect-ratio: 1; border-radius: 50%; background: #f2c9a3; border: 2px solid #2a0a14; }
.doll::after { content: ""; position: absolute; left: 0; right: 0; top: 30%; bottom: 0; background: #fffdf6; border: 2px solid #2a0a14; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.doll:hover, .doll:focus-visible { transform: translateY(-3px) scale(1.15); outline: none; filter: drop-shadow(0 0 6px #ffe9a8); }
.attic .doll { right: 30%; } .garden .doll { right: 8%; bottom: 26%; width: 22%; } .drive .doll { right: 40%; bottom: 34%; width: 14%; z-index: 3; }
.deep { min-height: 30px; margin: 12px 0 0; display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.deep i { width: 18px; height: 20px; background: #f2e2c4; border: 2px solid #c9a24b; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); }
.deep button { margin-left: 10px; border: 0; background: none; color: #c9a24b; font: italic 15px Georgia, serif; cursor: zoom-out; text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .frame.into { animation: into .7s ease-in; } @keyframes into { from { transform: scale(.08); opacity: .2; } to { transform: none; opacity: 1; } }
  .frame.out { animation: outof .6s ease-out; } @keyframes outof { from { transform: scale(3); opacity: .2; } to { transform: none; opacity: 1; } }
}