/* ---------- the dragon's dollhouse (bead rainbow-2oa.3, js/dollhouse.js) ----------
   The view fills the screen. Each room is two boxes of the same size, moved by transform only: its plate (under the
   world's canvas, where the living dragon is drawn) and its things (over it). The facade covers everything while the
   whole house shows, and melts away in a room. */
.room.house { left: 0; top: 0; bottom: auto; width: 100%; height: 100%; aspect-ratio: auto; translate: none; overflow: hidden;
  background: linear-gradient(#cfdcf3 0%, #e7dcf0 42%, #f8e3e6 72%, #fbecdf 100%); touch-action: none; }
.room.house.night { background: linear-gradient(#262a63 0%, #3d3a7a 45%, #5b4a8c 75%, #6f5791 100%); }
.room.house.night::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1.5px 1.5px at 12% 18%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 28% 8%, #fff 60%, transparent),
    radial-gradient(1.6px 1.6px at 47% 14%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 66% 6%, #fff 60%, transparent),
    radial-gradient(1.5px 1.5px at 81% 20%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 92% 9%, #fff 60%, transparent),
    radial-gradient(1.3px 1.3px at 7% 38%, #fff 60%, transparent), radial-gradient(1.3px 1.3px at 95% 36%, #fff 60%, transparent); opacity: .8; }
.room.house .plates, .room.house .things { position: absolute; inset: 0; }
/* (their own layers: a pan or a glide moves them without painting them again; js/dollhouse.js lets them be drawn afresh
   at their new size once a glide has ended, so a room glided into is sharp) */
.room.house .pbox, .room.house .rbox { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.room.house.redraw .pbox, .room.house.redraw .rbox, .room.house.redraw .facade { will-change: auto; }
.room.house .rbox { pointer-events: none; }
.room.house .rbox > * { pointer-events: auto; }
.room.house .rbox > .souvenir-cloud { pointer-events: none; }
.pbox img.plate-s, .pbox img.big { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pbox img.big { opacity: 0; transition: opacity .25s; }
.room.house img.broken { visibility: hidden; }   /* (a picture that couldn't load: nothing, never a broken-picture icon) */
.pbox img.big.in { opacity: 1; }
.pbox.unbuilt img.plate-s, .pbox .parting { object-fit: cover; }
.room.house.night .pbox.unbuilt img, .room.house.night .pbox .parting { filter: brightness(.62) saturate(.8) hue-rotate(-12deg); }
.pbox .parting { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
/* the garden is an island of its own in the whole house: its sky fades into the house's */
.room.house.in-house .pbox.isle, .room.house.gliding .pbox.isle {
  -webkit-mask-image: radial-gradient(ellipse 50% 46% at 50% 54%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 46% at 50% 54%, #000 62%, transparent 100%); }
.room.house .facade { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.room.house .facade img { width: 100%; height: 100%; display: block; }
.room.house.in-room:not(.gliding) .facade { visibility: hidden; }
.room.house.in-house #things, .room.house.gliding #things { pointer-events: none; }
.room.house.in-house #things *, .room.house.gliding #things * { pointer-events: none !important; }
.room.house.panning .thing img { animation-play-state: paused; }

/* under the dragon: furniture by the back wall, the rug on the floor, the newest painting on the easel */
.pbox .furn { position: absolute; translate: -50% -100%; height: auto; display: block; pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(90, 50, 110, .25)); }
.pbox .furn.rug { filter: none; }
.pbox .on-easel { position: absolute; border-radius: 2px; rotate: -1.2deg; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 2px 3px rgba(90, 50, 110, .25); overflow: hidden; }
.pbox .on-easel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.thing.easel, .thing.chest.drawn { background: transparent; border: 0; padding: 0; border-radius: 18px; }
.thing.easel:active, .thing.chest.drawn:active { background: rgba(255, 255, 255, .18); }
.thing.plant img { transform-origin: 50% 100%; animation: breathe 3.8s ease-in-out infinite; }
.thing.plant.seed img { filter: drop-shadow(0 0 8px rgba(255, 240, 180, .9)); }
.thing.frame.week { z-index: 1; }
.thing.frame.week .fr { filter: drop-shadow(0 0 5px #fff6c8) drop-shadow(0 5px 5px rgba(90, 50, 110, .28)); }

/* tap-to-place: the thing picked glows; the spots it could go to glow softly; a tap on one and it hops there */
.thing.picked { z-index: 20; }
.thing.picked img { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #ffd35c) drop-shadow(0 6px 5px rgba(90, 50, 110, .28)); }
.spot { position: absolute; translate: -50% -78%; aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; z-index: 19; touch-action: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 18%, rgba(255, 236, 160, .75) 30%, rgba(255, 190, 220, .35) 52%, transparent 70%);
  animation: spot-glow 1.4s ease-in-out infinite alternate, spot-in .3s ease-out; }
.spot.wall { translate: -50% -50%; border-radius: 22%; }
.spot.big { aspect-ratio: 1.2; }
@keyframes spot-glow { from { scale: .86; opacity: .75; } to { scale: 1.08; opacity: 1; } }
@keyframes spot-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .spot { animation: none; } }

/* back out to the whole house: a little picture of the house itself */
.house-btn { animation: pop-in .5s cubic-bezier(.3, 1.6, .5, 1); }
.house-btn img { width: 88%; }

/* ---------- the flip-book of every painting ---------- */
.book-veil { position: absolute; inset: 0; z-index: 42; background: rgba(60, 40, 90, 0); transition: background .3s; touch-action: none; }
.book-veil.open { background: rgba(60, 40, 90, .34); }
.book { position: absolute; left: 50%; top: 52%; width: min(86vw, 104vh, 940px); aspect-ratio: 1.18; translate: -50% -50%; scale: .6; opacity: 0;
  transition: scale .45s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; perspective: 1600px; }
.book-veil.open .book { scale: 1; opacity: 1; }
@media (orientation: portrait) { .book { width: min(92vw, 640px); aspect-ratio: .82; } }
.book .page { position: absolute; inset: 0; transform-origin: 0% 50%; backface-visibility: hidden; border-radius: 22px;
  background: linear-gradient(135deg, #fffaf3, #f7ead9); box-shadow: 0 18px 40px rgba(60, 30, 90, .35), inset 0 0 0 6px #fff, inset 0 0 0 10px #f1d9e6; }
.book .page.leaf { z-index: 2; }
.book .paper { position: absolute; inset: 8% 9% 17%; display: flex; align-items: center; justify-content: center; }
.book .sheet { position: relative; border-radius: 6px; box-shadow: 0 6px 14px rgba(90, 50, 110, .25), 0 0 0 8px #fff; overflow: hidden; }
.book .sheet img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.book .sheet .top[hidden] { display: none; }
.book .sheet.missing { visibility: hidden; }
.book.empty .sheet { box-shadow: none; opacity: .85; }
.book .round-btn { position: absolute; z-index: 3; color: #8a5bbf; }
.book .turn { top: 50%; translate: 0 -50%; width: clamp(56px, 9vmin, 84px); height: clamp(56px, 9vmin, 84px); }
.book .turn.prev { left: -2%; }
.book .turn.next { right: -2%; }
.book .star { left: 50%; bottom: 3%; translate: -50% 0; color: #e8d9a8; width: clamp(60px, 10vmin, 90px); height: clamp(60px, 10vmin, 90px); }
.book .star.on { color: #ffc93c; }
.book .star svg { width: 64%; height: 64%; }
.book .shut { right: 1%; top: 1%; width: clamp(48px, 7vmin, 64px); height: clamp(48px, 7vmin, 64px); }
.book .turn[hidden], .book .star[hidden] { display: none; }
/* (a Dress Up photo in the chest: a little print) */
.chest-thing.photo img { object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 3px #fff, 0 4px 6px rgba(90, 50, 110, .25); filter: none; }
/* (a small thing on a small screen, a phone held sideways: its hit area is never smaller than a fingertip) */
.room.house .thing.toy::before, .room.house .thing.pet::before, .room.house .thing.plant::before, .room.house .spot::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 46px); height: max(100%, 46px); translate: -50% -50%; }
.room.house .thing.toy, .room.house .thing.pet, .room.house .thing.plant { padding: 0; border: 0; background: none; }