/* =====================================================================
   TWIN PETS: how everything looks
   ---------------------------------------------------------------------
   In this file, top to bottom:
     look and feel (colors, fonts), the pets, each girl's button strip,
     the shared middle, the memory book, the rooms, the start screen and
     overlays, the grown-up corner, the house map and choice panels,
     then one section for each part of the house (kitchen, bathroom,
     front yard, garden, photos, school, playroom, trips, visitors,
     decorating, sleepover, weather, holidays).
   Colors for each girl's side are filled in by the game after she picks.
   ===================================================================== */
:root {
  --L: #c9c3d3; --L-light: #f3f0ec; --L-dark: #6f6880;
  --R: #c9c3d3; --R-light: #f3f0ec; --R-dark: #6f6880;
  --col: 19vmin;            /* width of each girl's button strip */
  --btn: 16vmin;            /* size of each button */
  --pet: 33vmin;            /* size of each pet */
  --ink: #3e3a4f;
  --font: ui-rounded, "SF Pro Rounded", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
}
* {
  box-sizing: border-box;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
html, body {
  margin: 0; height: 100%; overflow: hidden;
  overscroll-behavior: none; touch-action: none;
  background: #fff8ef; color: var(--ink); font-family: var(--font);
}
body { position: fixed; inset: 0; }
svg { display: block; }

#stage { position: fixed; inset: 0; overflow: hidden; background: #fff8ef; }

/* ---------- background ---------- */
.cloud {
  position: absolute; width: 20vmin; height: 7vmin; background: #fff; border-radius: 7vmin; opacity: .85;
  animation: drift 90s linear infinite;
}
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 9vmin; height: 9vmin; left: 3vmin; top: -4.5vmin; }
.cloud::after  { width: 7vmin; height: 7vmin; left: 9.5vmin; top: -3vmin; }
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }

/* night on one half (one pet asleep) and on the whole screen (both asleep) */
.half-night {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; pointer-events: none;
  background: linear-gradient(#24306a, #46559a); opacity: 0; transition: opacity 1.6s ease;
}
.half-night.left { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.half-night.right { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 80%, transparent); mask-image: linear-gradient(270deg, #000 80%, transparent); }
.half-night.on { opacity: .5; }
#night {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 2.5s ease;
  background: linear-gradient(#141c48, #34407e 70%, #4a5a96);
}
#night.on { opacity: .82; }
.star { position: absolute; width: 1.2vmin; height: 1.2vmin; background: #fff6c8; border-radius: 50%; animation: twinkle 2.6s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .25; transform: scale(.7); } to { opacity: 1; transform: scale(1.1); } }
#moon { position: absolute; left: 61%; top: calc(13vmin + var(--safe-top)); width: 12vmin; height: 12vmin; transform: translateX(-50%); }
#moon svg { width: 100%; height: 100%; }
#goodnight {
  position: absolute; left: 50%; top: 27%; transform: translateX(-50%); z-index: 25;
  font: 900 8vmin/1 var(--font); color: #fff6c8; text-shadow: 0 .6vmin 0 rgba(0,0,0,.25);
  opacity: 0; transition: opacity 1.5s ease; pointer-events: none; white-space: nowrap;
}
#goodnight.on { opacity: 1; pointer-events: auto; }

/* ---------- names at the top ---------- */
.girl-name {
  position: absolute; top: calc(2.5vmin + var(--safe-top)); transform: translateX(-50%); z-index: 6;
  font: 900 6vmin/1 var(--font); padding: 1vmin 3.2vmin; border-radius: 5vmin;
  background: rgba(255,255,255,.75);
}
#name-left  { left: 29.5%; color: var(--L-dark); }
#name-right { left: 70.5%; color: var(--R-dark); }

/* ---------- the world: pets and flying things ---------- */
#world { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#world > * { pointer-events: none; }   /* flying hearts, sparkles and food never block a tap */
.pet { position: absolute; width: var(--pet); height: var(--pet); transform: translateX(-50%); z-index: 10; }
/* only the pet itself catches taps, not the empty space around it */
.pet .lean, .pet .tag, .pet .say, .pet .thought { pointer-events: auto; }
.pet .lean, .pet .bounce, .pet .art { position: absolute; inset: 0; transform-origin: 50% 100%; }
.pet .lean { transition: transform .35s ease; }
.pet .art { transition: transform .7s ease; }
.pet .art > svg { width: 100%; height: 100%; overflow: visible; }
.pet.asleep .art { transform: translateY(5%) scaleY(.86) scaleX(1.05); }
.pet.walking .bounce { animation: hop .3s ease-in-out infinite alternate; }
.pet.running .bounce { animation: hop .2s ease-in-out infinite alternate; }
@keyframes hop { from { transform: translateY(0); } to { transform: translateY(-6%); } }

/* your own pictures (see PET ART in the script) */
.art.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; -webkit-user-drag: none; }
.art.photo .img-asleep { display: none; }
.asleep .art.photo.has-asleep { transform: none; }
.asleep .art.photo.has-asleep .img-awake { display: none; }
.asleep .art.photo.has-asleep .img-asleep { display: block; }

/* faces: which eyes and mouth show */
.pet-svg .eyes-happy, .pet-svg .eyes-closed, .pet-svg .mouth-open, .pet-svg .tail-front { display: none; }
.happy .pet-svg .eyes-open { display: none; }
.happy .pet-svg .eyes-happy { display: inline; }
.happy .pet-svg .mouth-closed, .chomp .pet-svg .mouth-closed { display: none; }
.happy .pet-svg .mouth-open, .chomp .pet-svg .mouth-open { display: inline; }
.asleep .pet-svg .eyes-open, .asleep .pet-svg .eyes-happy, .asleep .pet-svg .mouth-open { display: none; }
.asleep .pet-svg .eyes-closed, .asleep .pet-svg .mouth-closed { display: inline; }
.asleep .pet-svg .tail { display: none; }
.asleep .pet-svg .tail-front { display: inline; }
.pet-svg .head { transform-box: fill-box; transform-origin: 50% 90%; transition: transform .7s ease; }
.asleep .pet-svg .head { transform: translateY(12px) rotate(-7deg); }
.pet-svg .eyes-open { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 4.6s infinite; }
.side-right .pet-svg .eyes-open { animation-delay: -2.2s; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
.pet-svg .tail { transform-box: fill-box; transform-origin: 0% 100%; }
.wag .pet-svg .tail { animation: wag .26s ease-in-out 6 alternate; }
@keyframes wag { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }

.zzz { position: absolute; right: 8%; top: 18%; display: none; pointer-events: none; font: 900 5vmin/1 var(--font); color: #8193d6; }
.asleep .zzz { display: block; }
.zzz span { position: absolute; opacity: 0; animation: zfloat 3.2s linear infinite; }
.zzz span:nth-child(2) { animation-delay: 1.05s; font-size: .8em; }
.zzz span:nth-child(3) { animation-delay: 2.1s; font-size: 1.25em; }
@keyframes zfloat { 0% { transform: translate(0,0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(5vmin,-11vmin); opacity: 0; } }

.tag {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, .2vmin); white-space: nowrap;
  font: 900 3.6vmin/1 var(--font); padding: .8vmin 2.4vmin; border-radius: 4vmin;
  background: #fff; border: .5vmin solid var(--c); color: var(--c-dark); transition: opacity .4s;
}
.side-left  { --c: var(--L); --c-dark: var(--L-dark); --c-light: var(--L-light); }
.side-right { --c: var(--R); --c-dark: var(--R-dark); --c-light: var(--R-light); }
body:not([data-scene="play"]):not([data-scene="title"]) .tag, .pet.asleep .tag { opacity: 0; pointer-events: none; }

.say {
  position: absolute; left: 50%; bottom: 96%; transform: translateX(-50%); z-index: 30;
  background: #fff; border-radius: 4vmin; padding: 1.6vmin 3vmin; white-space: nowrap;
  font: 900 4.6vmin/1.15 var(--font); color: var(--ink); box-shadow: 0 1vmin 0 rgba(0,0,0,.08);
}
.say::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -2vmin; border: 2vmin solid transparent; border-top-color: #fff; }

.prop { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 15; }
.prop > div { width: 100%; height: 100%; }
.prop svg { width: 100%; height: 100%; overflow: visible; }

/* words you can tap to hear */
.word { display: inline-block; cursor: pointer; }
.word.said { animation: said .45s ease; }
@keyframes said { 40% { transform: scale(1.25) translateY(-.8vmin); color: #ff5d8f; } }

/* ---------- each girl's button strip ---------- */
.column {
  position: absolute; top: 0; bottom: 0; width: var(--col); z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2.2vmin;
  padding: calc(12vmin + var(--safe-top)) 0 3vmin;     /* the first button is always in the same place */
}
.column.big { justify-content: center; padding-top: calc(11vmin + var(--safe-top)); }
.column::before { content: ''; position: absolute; inset: 0; background: var(--c); opacity: .2; z-index: -1; }
.column.left  { left: 0;  --c: var(--L); --c-dark: var(--L-dark); --c-light: var(--L-light); }
.column.right { right: 0; --c: var(--R); --c-dark: var(--R-dark); --c-light: var(--R-light); }
.column.left::before  { border-radius: 0 6vmin 6vmin 0; }
.column.right::before { border-radius: 6vmin 0 0 6vmin; }
.btn {
  position: relative; width: var(--btn); height: var(--btn); flex: none;
  border-radius: 4.5vmin; background: #fff; border: .9vmin solid var(--c);
  box-shadow: 0 1.2vmin 0 var(--c-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--c-dark); font: 900 3.4vmin/1 var(--font);
  transition: transform .4s cubic-bezier(.3,1.9,.5,1), box-shadow .2s ease, opacity .4s ease;
}
.btn .ico { width: 9.5vmin; height: 9.5vmin; pointer-events: none; transition: transform .5s cubic-bezier(.3,2.2,.5,1); }
.btn.down .ico { transform: scale(.86) rotate(-6deg); transition-duration: .07s; }
.btn .ico > svg { width: 100%; height: 100%; overflow: visible; }
.btn .lbl { margin-top: .5vmin; pointer-events: none; text-align: center; line-height: 1.05; }
.btn.down { transform: translateY(.9vmin) scale(.93); box-shadow: 0 .3vmin 0 var(--c-dark); transition-duration: .07s; }
.column.big .btn { width: 17vmin; height: 46vmin; border-radius: 6vmin; }
.column.big .btn .ico { width: 13vmin; height: 13vmin; }
.column.big .btn .lbl { font-size: 4vmin; margin-top: 1.5vmin; }
.column.dim .btn { opacity: .4; }
.btn.nudge { animation: nudge .4s ease; }
@keyframes nudge { 20% { transform: translateX(-1.2vmin); } 40% { transform: translateX(1.2vmin); } 60% { transform: translateX(-.8vmin); } 80% { transform: translateX(.6vmin); } }
.btn::after { content: ''; position: absolute; inset: -1.7vmin; border-radius: 5.8vmin; border: 1.5vmin solid var(--c); opacity: 0; pointer-events: none; }
.column.big .btn::after { border-radius: 7.3vmin; }
.btn.invite::after { animation: invitering .7s ease-in-out infinite alternate; }
@keyframes invitering { from { opacity: 0; transform: scale(.94); } to { opacity: .85; transform: scale(1); } }
@keyframes invite { from { box-shadow: 0 1.2vmin 0 var(--c-dark), 0 0 0 0 var(--c); } to { box-shadow: 0 1.2vmin 0 var(--c-dark), 0 0 0 1.6vmin var(--c); } }
.btn.new { animation: newbtn 1s ease-out; }
.btn.new::after { animation: invitering .7s ease-in-out 1s 8 alternate; }
@keyframes newbtn { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.18) rotate(6deg); } 100% { transform: scale(1); } }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---------- the shared middle: friendship jar and together games ---------- */
#center { position: absolute; left: 50%; top: 0; bottom: 0; width: 16vmin; transform: translateX(-50%); z-index: 9; pointer-events: none; }
#center > * { pointer-events: auto; }
#jar { position: absolute; left: 50%; top: calc(1.5vmin + var(--safe-top)); width: 15vmin; height: 18.6vmin; transform: translateX(-50%); display: none; transition: opacity .8s ease; }
#jar.show { display: block; }
#jar > svg { width: 100%; height: 100%; overflow: visible; }
#jar.wiggle { animation: jarwiggle .5s ease; }
@keyframes jarwiggle { 25% { transform: translateX(-50%) rotate(-7deg) scale(1.06); } 75% { transform: translateX(-50%) rotate(6deg) scale(1.06); } }
#jar.full { animation: jarglow .8s ease-in-out infinite alternate; }
#jar::before { content: ''; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,214,63,.75), rgba(255,214,63,0)); opacity: 0; z-index: -1; pointer-events: none; }
#jar.full::before { animation: glowpulse .8s ease-in-out infinite alternate; }
@keyframes jarglow { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.08); } }
@keyframes glowpulse { from { opacity: .2; } to { opacity: 1; } }
#jar.pop { animation: jarpop .9s ease-out; }
@keyframes jarpop { 0% { transform: translateX(-50%) translateY(-30vmin); } 60% { transform: translateX(-50%) translateY(2vmin); } 100% { transform: translateX(-50%) translateY(0); } }
.cbtn {
  width: 12.5vmin; height: 12.5vmin; border-radius: 50%; padding: 1.8vmin; flex: none;
  border: .9vmin solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--L) 50%, var(--R) 50%) border-box;
  box-shadow: 0 1vmin 0 rgba(0,0,0,.15); transition: transform .08s ease, opacity .4s ease;
}
.cbtn > svg { width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cbtn svg { pointer-events: none; }
.cbtn.down { transform: translateY(.8vmin); box-shadow: 0 .2vmin 0 rgba(0,0,0,.15); }
.cbtn.nudge { animation: nudge .4s ease; }
#gamebar { position: absolute; left: 50%; top: calc(22vmin + var(--safe-top)); transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 2.4vmin; }
#dots { display: grid; grid-template-columns: repeat(4, 3.4vmin); gap: .8vmin; }
#dots i { width: 3.4vmin; height: 3.4vmin; display: block; }
#dots i svg { width: 100%; height: 100%; }
#home-btn { width: 10vmin; height: 10vmin; padding: 1.4vmin; }
.column.big .btn.done { opacity: .45; }

/* ---------- surprises ---------- */
.scenery { position: absolute; pointer-events: none; }
.scenery svg { width: 100%; height: 100%; overflow: visible; }
#party { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 1s ease; overflow: hidden; background: linear-gradient(#2a1b4d, #4b2a6e); }
#party.on { opacity: .82; }
.light { position: absolute; width: 46vmin; height: 46vmin; border-radius: 50%; mix-blend-mode: screen; opacity: .7; animation: roam 4s ease-in-out infinite alternate; }
@keyframes roam { from { transform: translate(-12vmin, -6vmin) scale(.8); } to { transform: translate(14vmin, 8vmin) scale(1.15); } }
.seesaw-plank {
  position: absolute; height: 2.8vmin; z-index: 9; border-radius: 2vmin; border: .5vmin solid #fff;
  background: linear-gradient(90deg, var(--L) 50%, var(--R) 50%); box-shadow: 0 .6vmin 0 rgba(0,0,0,.15);
}
.seesaw-base { position: absolute; z-index: 8; }
.seesaw-base svg { width: 100%; height: 100%; }

/* ---------- thought bubbles ---------- */
.thought {
  position: absolute; left: 50%; bottom: 93%; z-index: 29; width: 19vmin; padding: 1.6vmin 1vmin 1.2vmin;
  background: #fff; border-radius: 50% / 45%; box-shadow: 0 1vmin 0 rgba(0,0,0,.08);
  display: flex; flex-direction: column; align-items: center; transform: translateX(-50%);
}
.thought::before, .thought::after { content: ''; position: absolute; background: #fff; border-radius: 50%; box-shadow: 0 .5vmin 0 rgba(0,0,0,.06); }
.thought::before { width: 3.4vmin; height: 3.4vmin; left: 44%; bottom: -3.2vmin; }
.thought::after  { width: 2vmin; height: 2vmin; left: 52%; bottom: -5.6vmin; }
.thought .pic { width: 10vmin; height: 10vmin; pointer-events: none; }
.thought .pic svg { width: 100%; height: 100%; overflow: visible; }
.thought .say-word { font: 900 5.6vmin/1 var(--font); color: var(--ink); pointer-events: none; }
.thought.word.said { animation: said-bubble .45s ease; }
@keyframes said-bubble { 40% { transform: translateX(-50%) scale(1.15); } }
body:not([data-scene="play"]) .thought, .pet.saying .thought { visibility: hidden; }

/* ---------- memory book ---------- */
#book { align-items: center; justify-content: center; background: rgba(60,50,80,.45); z-index: 70; }
.book {
  position: relative; width: min(74vw, 112vmin); height: 66vmin; display: flex;
  background: #fffdf8; border-radius: 3vmin; border: 1vmin solid #ecd9b8;
  box-shadow: 0 1.6vmin 0 #d4bd96, 0 3vmin 8vmin rgba(0,0,0,.3);
}
.book::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: .6vmin; margin-left: -.3vmin; background: #ecd9b8; }
.page { flex: 1; padding: 3vmin; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6vmin; min-width: 0; }
.page.lp { background: linear-gradient(90deg, #fffdf8 70%, #f6ecdb); border-radius: 2vmin 0 0 2vmin; }
.page.rp { background: linear-gradient(270deg, #fffdf8 70%, #f6ecdb); border-radius: 0 2vmin 2vmin 0; }
.book-pets { display: flex; gap: 1vmin; }
.book-pets > div { position: relative; width: 21vmin; height: 21vmin; }
.book-pets > div > svg { width: 100%; height: 100%; overflow: visible; }
.book-pics { display: flex; flex-wrap: wrap; gap: 1.4vmin; justify-content: center; max-width: 40vmin; }
.book-pics > div { width: 8vmin; height: 8vmin; }
.book-pics svg { width: 100%; height: 100%; overflow: visible; }
.book-day { font: 900 4.6vmin/1 var(--font); color: #b0884f; }
.book-line { font: 900 5.4vmin/1.35 var(--font); text-align: center; color: var(--ink); }
.book-line .word { margin: 0 .2vmin; }
.say-all { width: 11vmin; height: 11vmin; border-radius: 50%; background: #fff3d6; border: .8vmin solid #ffd27a; padding: 1.8vmin; }
.say-all svg { width: 100%; height: 100%; pointer-events: none; }
.book-btn {
  position: absolute; width: 12vmin; height: 12vmin; border-radius: 50%; background: #fff; padding: 2.4vmin;
  border: .8vmin solid #ecd9b8; box-shadow: 0 1vmin 0 #d4bd96; z-index: 2;
}
.book-btn svg { width: 100%; height: 100%; pointer-events: none; }
.book-btn.down { transform: translateY(.8vmin); box-shadow: 0 .2vmin 0 #d4bd96; }
.book-btn.off { opacity: .25; pointer-events: none; }
.book-prev { left: -6vmin; top: 50%; margin-top: -6vmin; }
.book-next { right: -6vmin; top: 50%; margin-top: -6vmin; }
.book-close { right: -4.5vmin; top: -4.5vmin; width: 10.5vmin; height: 10.5vmin; padding: 2.4vmin; }

/* =====================================================================
   THE HOUSE: rooms, doors, and room things
   ===================================================================== */
#rooms { position: absolute; inset: 0; z-index: 0; }
.room { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; pointer-events: none; overflow: hidden; }
.room.on { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.room .wall { position: absolute; left: 0; right: 0; top: 0; bottom: 28%; }
.room .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; border-top: 1.2vmin solid rgba(255,255,255,.7); }
.room .tint { position: absolute; top: 0; bottom: 0; width: 50%; opacity: .5; }
.room .tint.l { left: 0; background: linear-gradient(90deg, var(--L-light) 55%, transparent); }
.room .tint.r { right: 0; background: linear-gradient(270deg, var(--R-light) 55%, transparent); }
.deco { position: absolute; }
.deco > svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* playroom */
.room-playroom .wall { background: radial-gradient(circle, rgba(255,255,255,.75) 16%, transparent 18%) 0 0 / 7vmin 7vmin, #fff0cf; }
.room-playroom .floor { background: repeating-linear-gradient(90deg, #ebca9d 0 13vmin, #dfb989 13vmin 13.4vmin); }
.room-playroom .rug { left: 50%; bottom: 3%; width: 78%; height: 15%; transform: translateX(-50%); }
.shelf { position: absolute; top: 27%; width: 20%; height: 1.6vmin; background: #c99a6b; border-radius: .8vmin; box-shadow: 0 .6vmin 0 #a8743f; }
.shelf.l { left: 19.5%; } .shelf.r { left: 60.5%; }
.toys { position: absolute; left: 0; right: 0; bottom: 100%; display: flex; justify-content: center; align-items: flex-end; gap: .8vmin; }
.toys > div { width: 6.5vmin; height: 6.5vmin; }
.toys svg { width: 100%; height: 100%; overflow: visible; }

/* kitchen */
.room-kitchen .wall {
  background: repeating-linear-gradient(0deg, transparent 0 6vmin, rgba(255,255,255,.75) 6vmin 6.3vmin),
              repeating-linear-gradient(90deg, transparent 0 6vmin, rgba(255,255,255,.75) 6vmin 6.3vmin), #d4edf7;
}
.room-kitchen .counter { position: absolute; left: 0; right: 0; bottom: 28%; height: 11%; background: repeating-linear-gradient(90deg, #f8e7cb 0 15vmin, #e8cfa8 15vmin 15.4vmin); border-top: 1.8vmin solid #e2c49a; }
.room-kitchen .floor { background: repeating-conic-gradient(#fff7ea 0 25%, #f1dcbd 0 50%) 0 0 / 10vmin 10vmin; }
.bowl { bottom: 3%; width: 12vmin; height: 5.6vmin; transform: translateX(-50%); }
.bowl.side-left { left: 44%; } .bowl.side-right { left: 56%; }

/* bathroom */
.room-bathroom .wall {
  background: repeating-linear-gradient(0deg, transparent 0 7vmin, rgba(255,255,255,.8) 7vmin 7.3vmin),
              repeating-linear-gradient(90deg, transparent 0 7vmin, rgba(255,255,255,.8) 7vmin 7.3vmin), #d5f2e8;
}
.room-bathroom .floor { background: repeating-conic-gradient(#eef6fb 0 25%, #dbe9f3 0 50%) 0 0 / 8vmin 8vmin; }
.towel { top: 15%; width: 9vmin; height: 19vmin; }
.towel.side-left { left: 18%; } .towel.side-right { right: 18%; }
.bub { position: absolute; bottom: -8vmin; width: 5vmin; height: 5vmin; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 18%, rgba(255,255,255,.35) 20%, rgba(190,230,255,.35) 70%); border: .3vmin solid rgba(255,255,255,.8); animation: bubbleup 14s linear infinite; }
@keyframes bubbleup { from { transform: translateY(0) translateX(0); } 50% { transform: translateY(-55vh) translateX(3vmin); } to { transform: translateY(-115vh) translateX(-2vmin); } }

/* backyard */
.room-backyard .sky { position: absolute; inset: 0; background: linear-gradient(90deg, var(--L-light) 0%, var(--L-light) 36%, #fffaf3 50%, var(--R-light) 64%, var(--R-light) 100%); }
.room-backyard .ground { position: absolute; left: 0; bottom: 0; width: 100%; height: 32%; }
.fence { position: absolute; left: 0; right: 0; bottom: 25%; height: 10%; opacity: .9;
  background: linear-gradient(#fff, #fff) 0 30% / 100% .9vmin no-repeat, linear-gradient(#fff, #fff) 0 72% / 100% .9vmin no-repeat,
              repeating-linear-gradient(90deg, #fff 0 2.4vmin, transparent 2.4vmin 5vmin); }
.tramp { bottom: calc(12% - 8.3vmin); width: 36vmin; height: 10.8vmin; transform: translateX(-50%); }
.tramp.side-left { left: 29.5%; } .tramp.side-right { left: 70.5%; }
.tramp .mat { transform-box: fill-box; transform-origin: 50% 50%; }

/* bedroom */
.room-bedroom .wall { background: radial-gradient(circle, rgba(255,255,255,.9) 7%, transparent 9%) 0 0 / 8vmin 8vmin, #ece5fb; }
.room-bedroom .floor { background: #ddd0f2; }
.bwindow { top: 15%; width: 15vmin; height: 15vmin; }
.bwindow.side-left { left: 18%; } .bwindow.side-right { right: 18%; }
.win-sky { fill: #bfe6ff; transition: fill 2s ease; }
.win-night { opacity: 0; transition: opacity 2s ease; }
body[data-scene="goodnight"] .win-sky, body[data-scene="night"] .win-sky { fill: #2c3672; }
body[data-scene="goodnight"] .win-night, body[data-scene="night"] .win-night { opacity: 1; }
.bed { bottom: calc(12% - 5vmin); width: 36vmin; height: 10vmin; transform: translateX(-50%); }
.bed.side-left { left: 29.5%; } .bed.side-right { left: 70.5%; }
.cushion { left: 50%; bottom: calc(12% - 5vmin); width: 44vmin; height: 10vmin; transform: translateX(-50%); }

@keyframes hintpulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } }
body[data-scene="game"] #gamebar, body[data-scene="climb"] #gamebar { display: flex; }
body[data-scene="climb"] #dots { display: none; }

/* first visit hint */
#hint {
  position: absolute; left: 50%; top: 42%; z-index: 40; transform: translateX(-50%) scale(0); transform-origin: 50% 50%;
  display: flex; align-items: center; gap: 1.6vmin; padding: 1.2vmin 3vmin 1.2vmin 1.6vmin; border-radius: 6vmin;
  background: #fff; box-shadow: 0 1.2vmin 0 rgba(0,0,0,.1), 0 0 0 1vmin rgba(255,229,127,.8);
  transition: transform .45s cubic-bezier(.3,1.6,.6,1); pointer-events: none;
}
#hint.show { transform: translateX(-50%) scale(1); }
#hint .hint-ico { width: 6.6vmin; height: 6.6vmin; } #hint .hint-ico svg { width: 100%; height: 100%; }
#hint .hint-word { font: 900 4.6vmin/1 var(--font); color: var(--ink); pointer-events: auto; }

/* ---------- things on the pets: tummy, mud, fluff, clothes ---------- */
.pet-svg .body { transform-box: fill-box; transform-origin: 50% 65%; transition: transform .8s cubic-bezier(.3,1.5,.6,1); }
.pet-svg .fluff { display: none; }
.fluffy .pet-svg .fluff { display: inline; }
.pet.fluffy .art { filter: drop-shadow(0 0 1vmin rgba(255,255,255,.95)) drop-shadow(0 0 2.2vmin rgba(255,236,170,.75)); }
.glitter { position: absolute; inset: 0; pointer-events: none; display: none; }
.pet.fluffy .glitter { display: block; }
.glitter i { position: absolute; width: 3.2vmin; height: 3.2vmin; color: #ffe066; animation: glint 1.8s ease-in-out infinite; }
.glitter i svg { width: 100%; height: 100%; }
@keyframes glint { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.art .mud, .art .wear, .art .foam { position: absolute; pointer-events: none; }
.art .mud svg, .art .wear svg { width: 100%; height: 100%; overflow: visible; display: block; }
.art .foam { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 40%, #eaf6ff 70%); box-shadow: 0 0 0 .3vmin rgba(255,255,255,.8); }
.wear { transform-origin: 50% 100%; transition: transform .7s ease; }
.asleep .wear.head { transform: translate(-8%, 30%) rotate(-8deg); }

/* ---------- bath, trampoline, rainbow ---------- */
.tub { position: absolute; z-index: 11; pointer-events: none; transform: translateX(-50%); }
.tub svg { width: 100%; height: 100%; overflow: visible; }
.tub .water { transform-box: fill-box; transform-origin: 50% 100%; }
#world > .duck { pointer-events: auto; }
.duck { position: absolute; z-index: 12; width: 8vmin; height: 8vmin; transform: translate(-50%, -50%); animation: bob 1.6s ease-in-out infinite; }
.duck svg { width: 100%; height: 100%; }
@keyframes bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -1vmin; } }
.rainbow { position: absolute; left: 50%; bottom: 10%; width: 60%; height: 44%; transform: translateX(-50%); transform-origin: 50% 100%; z-index: 8; pointer-events: none; }
.rainbow svg { width: 100%; height: 100%; overflow: visible; }

/* ---------- playroom: trick cards and presents ---------- */
.column.cards { gap: 1.2vmin; padding-top: calc(12vmin + var(--safe-top)); }
.column.cards .btn { height: 11vmin; border-radius: 3vmin; flex-direction: row; justify-content: flex-start; gap: .8vmin; padding: 0 1vmin; box-shadow: 0 .9vmin 0 var(--c-dark); }
.column.cards .btn .ico { width: 6.4vmin; height: 6.4vmin; flex: none; }
.column.cards .btn .lbl { margin: 0; font-size: 3.1vmin; text-align: left; }
.column.cards .btn-back { justify-content: center; height: 9vmin; }
.btn.learned { border-color: #ffc93c; background: #fffbea; }
.btn .star { position: absolute; right: -1.4vmin; top: -1.4vmin; width: 4.6vmin; height: 4.6vmin; color: #ffc93c; filter: drop-shadow(0 .3vmin 0 #e0a800); }
.btn .star svg { width: 100%; height: 100%; }
.tricklist { position: absolute; top: calc(11.6vmin + var(--safe-top)); transform: translateX(-50%); z-index: 6; display: none; gap: .8vmin; }
#tricks-left { left: 29.5%; } #tricks-right { left: 70.5%; }
body[data-room="playroom"] .tricklist { display: flex; }
.tricklist > div { width: 5.4vmin; height: 5.4vmin; padding: .7vmin; border-radius: 50%; background: #fffbea; border: .45vmin solid #ffc93c; }
.tricklist svg { width: 100%; height: 100%; }
.present { position: absolute; z-index: 13; width: 13vmin; height: 13vmin; transform: translate(-50%, -50%); }
.present svg { width: 100%; height: 100%; overflow: visible; }
.present g { transform-box: fill-box; transform-origin: 50% 100%; }

.foamball { position: absolute; z-index: 12; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 35%, #fff 0 40%, #e3f4ff 75%); box-shadow: 0 0 0 .3vmin rgba(255,255,255,.9); }

/* ---------- big round buttons and overlays ---------- */
.round-btn {
  width: 18vmin; height: 18vmin; border-radius: 50%; background: #5cc77a; border: 1vmin solid #fff;
  box-shadow: 0 1.4vmin 0 #33935a, 0 0 0 1vmin rgba(92,199,122,.25);
  display: flex; align-items: center; justify-content: center; padding: 3.5vmin;
}
.round-btn svg { width: 100%; height: 100%; }
.round-btn.down { transform: translateY(1vmin); box-shadow: 0 .4vmin 0 #33935a; }
.overlay { position: absolute; inset: 0; z-index: 60; display: none; }
.overlay.show { display: flex; }
#title { align-items: center; justify-content: center; background: rgba(255,248,239,.35); }

/* color picker */
#picker { background: #fff8ef; }
.pick-half {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5vmin;
  background: var(--pbg, #f4efe9); transition: background .4s ease;
}
.pick-name { font: 900 8vmin/1 var(--font); color: var(--pdark, #6f6880); }
.pick-pet { position: relative; width: 25vmin; height: 25vmin; }
.pick-pet > svg { width: 100%; height: 100%; overflow: visible; }
.swatches { display: grid; grid-template-columns: repeat(4, 11vmin); gap: 2.2vmin; }
.swatch {
  width: 11vmin; height: 11vmin; border-radius: 50%; background: var(--sw);
  border: .9vmin solid #fff; box-shadow: 0 .8vmin 0 rgba(0,0,0,.14);
  display: flex; align-items: center; justify-content: center; transition: transform .2s ease, opacity .3s ease;
}
.swatch svg { width: 60%; height: 60%; display: none; }
.swatch.chosen { transform: scale(1.15); border-color: var(--ink); }
.swatch.chosen svg { display: block; }
.swatch.taken { opacity: .15; }
.swatch.nudge { animation: nudge .4s ease; }
.pick-mid { width: 22vmin; display: flex; align-items: center; justify-content: center; }
#go-btn { visibility: hidden; }
#go-btn.show { visibility: visible; animation: newbtn .6s ease-out, pulse 1.6s ease-in-out .6s infinite; }

/* grown-up panel */
#parent { align-items: center; justify-content: center; background: rgba(40,36,56,.55); z-index: 90; }
.panel {
  background: #fff; border-radius: 4vmin; padding: 3vmin 4vmin; min-width: 60vmin; max-height: 94%;
  font: 700 3.2vmin/1.2 var(--font); color: var(--ink); box-shadow: 0 2vmin 6vmin rgba(0,0,0,.3);
  display: flex; flex-direction: column; gap: 1.6vmin;
}
.panel h2 { margin: 0 0 1vmin; font-size: 4.4vmin; text-align: center; }
.panel .row { display: flex; align-items: center; justify-content: space-between; gap: 2vmin; }
.panel .row > span { min-width: 16vmin; }
.pbtn {
  border-radius: 2.4vmin; background: #f1eef7; border: .5vmin solid #d9d3e6; padding: 1.6vmin 2.6vmin;
  font: 800 3.2vmin/1 var(--font); color: var(--ink); text-align: center; flex: 1;
}
.pbtn.round { flex: none; width: 8vmin; height: 8vmin; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 5vmin; }
.pbtn.go { background: #5cc77a; border-color: #33935a; color: #fff; }
.pbtn.danger { background: #fff0f0; border-color: #f2b8b8; color: #b03a3a; }
.pbtn.danger.confirm { background: #e05555; border-color: #b03a3a; color: #fff; }
.pbtn.on { background: #e5f7ea; border-color: #8fd1a3; }
.pbtn.down { transform: scale(.96); }
.volbar { display: flex; gap: .8vmin; flex: 1; justify-content: center; }
.volbar i { width: 3vmin; height: 6vmin; border-radius: 1vmin; background: #e6e1ef; }
.volbar i.on { background: #8b7fd1; }
.panel .note { font-size: 2.4vmin; color: #857f96; text-align: center; font-weight: 600; }

/* hidden grown-up corner (top-left) */
#corner { position: absolute; left: 0; top: 0; width: 11vmin; height: calc(11vmin + var(--safe-top)); z-index: 100; }
#corner svg { position: absolute; left: 1.5vmin; top: calc(1.5vmin + var(--safe-top)); width: 8vmin; height: 8vmin; opacity: 0; transition: opacity .3s; }
#corner.holding svg { opacity: 1; }
#corner circle.ring { stroke-dasharray: 126; stroke-dashoffset: 126; transform: rotate(-90deg); transform-origin: 50% 50%; }
#corner.holding circle.ring { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s linear; }

/* please turn sideways */
#rotate {
  position: fixed; inset: 0; z-index: 200; background: #fff8ef; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 4vmin;
}
#rotate svg { width: 30vmin; height: 30vmin; animation: tilt 2.4s ease-in-out infinite; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { #rotate { display: flex; } }

/* =====================================================================
   THE HOUSE MAP, MIDDLE BUTTONS, CHOICE PANELS
   ===================================================================== */
#midbtns { position: absolute; left: 50%; top: calc(22vmin + var(--safe-top)); width: 30vmin; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 2vmin 2.4vmin; align-items: center; transition: opacity .4s ease; }
#midbtns .mapbtn { margin: 0 7.5vmin; }
body:not([data-scene="play"]) #midbtns { opacity: 0; pointer-events: none; }
.cbtn.mapbtn { position: relative; width: 15vmin; height: 15vmin; padding: 1.6vmin; }
.cbtn.small { position: relative; width: 11vmin; height: 11vmin; padding: 1.8vmin; }
.cbtn .badge { position: absolute; right: -1.4vmin; top: -1.4vmin; width: 5.2vmin; height: 5.2vmin; color: #ffc93c; filter: drop-shadow(0 .3vmin 0 #e0a800); animation: pulse 1.2s ease-in-out infinite; pointer-events: none; }
.cbtn .badge svg { width: 100%; height: 100%; }
.cbtn.hint { animation: hintpulse 1.2s ease-in-out 3; }
.cbtn.new { animation: newbtn 1s ease-out, hintpulse 1.2s ease-in-out 1s 4; }

#map { z-index: 62; background: rgba(46, 64, 120, .5); }
#map .map-grid {
  position: absolute; left: calc(var(--col) + 2vmin); right: calc(var(--col) + 2vmin); top: calc(2.5vmin + var(--safe-top)); bottom: 3vmin;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 13vmin 1fr 1fr; gap: 1.4vmin;
}
.map-roof { grid-column: 2 / span 3; grid-row: 1; background: #e98b6d; clip-path: polygon(50% 0, 100% 100%, 0 100%); margin: 0 -2vmin -1vmin; }
.map-walls { grid-column: 2 / span 3; grid-row: 2 / span 2; background: #fff4dc; border-radius: 1.5vmin; margin: -.7vmin; }
.map-lawn { grid-row: 2 / span 2; background: #bfe8a8; border-radius: 3vmin; margin: -.7vmin; }
.map-lawn.l { grid-column: 1; } .map-lawn.r { grid-column: 5; }
#map .map-x { position: absolute; right: calc(var(--col) + 1vmin); top: calc(1vmin + var(--safe-top)); width: 10vmin; height: 10vmin; padding: 2.4vmin; border-radius: 50%; background: #fff; box-shadow: 0 .8vmin 0 rgba(0,0,0,.15); z-index: 2; }
#map .map-x svg { width: 100%; height: 100%; }
.mtile {
  position: relative; border-radius: 3vmin; background: var(--tile, #eee); border: .7vmin solid #fff; min-width: 0; min-height: 0;
  box-shadow: 0 1vmin 0 rgba(0,0,0,.15); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6vmin;
  transition: box-shadow .3s ease, transform .15s ease;
}
.mtile .ico { width: 11vmin; height: 11vmin; pointer-events: none; margin-top: -4vmin; }
.mtile .ico svg { width: 100%; height: 100%; overflow: visible; }
.mtile .lbl { font: 900 3.2vmin/1 var(--font); color: var(--ink); pointer-events: none; background: rgba(255,255,255,.75); padding: .5vmin 1.4vmin; border-radius: 2vmin; }
.mtile .half { position: absolute; top: 0; bottom: 0; width: 50%; }
.mtile .half.l { left: 0; } .mtile .half.r { right: 0; }
.mtile .face { position: absolute; bottom: 1vmin; width: 5.6vmin; height: 5.6vmin; border-radius: 50%; overflow: hidden; background: #fff; border: .5vmin solid #fff; opacity: .6; pointer-events: none; }
.mtile .half.l .face { left: 1vmin; border-color: var(--L); }
.mtile .half.r .face { right: 1vmin; border-color: var(--R); }
.mtile .face svg, .mtile .face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.mtile.here { box-shadow: 0 1vmin 0 rgba(0,0,0,.15), 0 0 0 1vmin rgba(255,255,255,.9); }
.mtile.here .face { opacity: 1; }
.mtile.here::after { content: ''; position: absolute; inset: -.7vmin; border-radius: 3vmin; border: .7vmin dashed #8b7fd1; pointer-events: none; }
.mtile.closed { background: rgba(255,255,255,.35); border-style: dashed; box-shadow: none; opacity: .6; }
.mtile.closed .ico { margin: 0; opacity: .7; }
.mtile.vote-left, .mtile.vote-right { box-shadow: 0 1vmin 0 rgba(0,0,0,.14), 0 0 0 1vmin #ffe57f, 0 0 5vmin #ffd23f; transform: scale(1.04); }
.mtile.vote-left .half.l .face, .mtile.vote-right .half.r .face { opacity: 1; transform: scale(1.15); }
.mtile.vote-left:not(.vote-right) .half.r .face,
.mtile.vote-right:not(.vote-left) .half.l .face { animation: faceblink .55s ease-in-out infinite alternate; }
.mtile.nudge { animation: nudge .4s ease; }
.mtile .badge { position: absolute; right: -1.6vmin; top: -1.6vmin; width: 6vmin; height: 6vmin; color: #ffc93c; filter: drop-shadow(0 .3vmin 0 #e0a800); animation: pulse 1.2s ease-in-out infinite; pointer-events: none; }
.mtile .badge svg { width: 100%; height: 100%; }

/* a girl's pull-out panel of choices */
.spanel {
  position: absolute; top: calc(8vmin + var(--safe-top)); bottom: 2.5vmin; width: 42vmin; z-index: 45;
  background: #fff; border: .9vmin solid var(--c); border-radius: 4vmin; box-shadow: 0 1.5vmin 4vmin rgba(0,0,0,.2);
  padding: 7vmin 1.6vmin 1.6vmin;
}
.spanel.side-left { left: 1vmin; } .spanel.side-right { right: 1vmin; }
.spanel-x { position: absolute; top: 1vmin; right: 1vmin; width: 6.5vmin; height: 6.5vmin; padding: 1.5vmin; border-radius: 50%; background: var(--c-light); }
.spanel.side-right .spanel-x { right: auto; left: 1vmin; }
.spanel-x svg { width: 100%; height: 100%; }
.spanel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vmin; height: 100%; align-content: start; }
.scard {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4vmin; height: 13.5vmin;
  border-radius: 2.6vmin; background: var(--c-light); border: .5vmin solid rgba(255,255,255,.8); box-shadow: 0 .7vmin 0 rgba(0,0,0,.1);
}
.scard .pic { width: 8vmin; height: 8vmin; pointer-events: none; }
.scard .pic svg { width: 100%; height: 100%; overflow: visible; }
.scard .lbl { font: 900 3vmin/1 var(--font); color: var(--c-dark); pointer-events: none; text-align: center; }
.scard .cnt { position: absolute; right: .6vmin; top: .6vmin; min-width: 4vmin; height: 4vmin; padding: 0 1vmin; border-radius: 2vmin; background: #fff; color: var(--c-dark); font: 900 2.6vmin/4vmin var(--font); text-align: center; }
.scard.on { background: #fffbea; border-color: #ffc93c; }
.scard.down { transform: scale(.95); }

/* up to 6 buttons on a girl's edge */
.column.many { gap: 1.3vmin; padding-top: calc(12vmin + var(--safe-top)); }
.column.many .btn { width: 15.5vmin; height: 12.4vmin; border-radius: 3.6vmin; box-shadow: 0 .9vmin 0 var(--c-dark); }
.column.many .btn .ico { width: 7.2vmin; height: 7.2vmin; }
.column.many .btn .lbl { font-size: 2.9vmin; }
#hint .hint-new { width: 6vmin; height: 6vmin; color: #ffc93c; filter: drop-shadow(0 .3vmin 0 #e0a800); }
#hint .hint-new svg { width: 100%; height: 100%; }

.spanel.three .spanel-grid { grid-template-columns: 1fr 1fr 1fr; gap: 1.1vmin; }
.spanel.three .scard { height: 12.6vmin; }
.spanel.three .scard .pic { width: 7vmin; height: 7vmin; }
.spanel.three .scard .lbl { font-size: 2.3vmin; }

/* the kitchen: food on a plate at the picnic table */
.plate-food { position: absolute; left: 20%; top: 18%; width: 60%; height: 60%; transition: transform .25s ease; transform-origin: 50% 80%; }
.scenery .plate-food svg { width: 100%; height: 100%; }

/* things in a room you can tap (the mirror, the garden...) */
#world > .thing { pointer-events: auto; position: absolute; z-index: 5; display: none; transform: translateX(-50%); }
#world > .thing.on { display: block; }
.thing::before { content: ''; position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,214,63,.65), rgba(255,214,63,0)); opacity: 0; z-index: -1; pointer-events: none; }
.thing.new::before { animation: glowpulse 1.3s ease-in-out infinite alternate; }

/* the bathroom */
.thing-mirror .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.thing-mirror .mhalf { position: absolute; top: 0; bottom: 0; width: 50%; }
.thing-mirror .mhalf.l { left: 0; } .thing-mirror .mhalf.r { right: 0; }
.thing-mirror .mface { position: absolute; top: 31%; width: 84%; aspect-ratio: 1.1; pointer-events: none; }
.thing-mirror .mhalf.l .mface { right: -2%; } .thing-mirror .mhalf.r .mface { left: -2%; }
.thing-mirror .mface > * { width: 100%; height: 100%; transform-origin: 50% 70%; display: block; }
.tubtoy { position: absolute; z-index: 12; width: 8vmin; height: 8vmin; transform: translate(-50%, -50%); animation: bob 1.4s ease-in-out infinite; }
.tubtoy svg { width: 100%; height: 100%; overflow: visible; }
.asleep-eyes .pet-svg .eyes-open, .asleep-eyes .pet-svg .eyes-happy { display: none; }
.asleep-eyes .pet-svg .eyes-closed { display: inline; }
.art .poof { position: absolute; inset: 0; z-index: -1; pointer-events: none; transform-origin: 50% 58%; }
.art .poof svg { width: 100%; height: 100%; overflow: visible; }
.poofy .pet-svg .fluff { display: inline; }
.art .spa { position: absolute; inset: 0; pointer-events: none; }
.art .spa svg { width: 100%; height: 100%; overflow: visible; }
.pet.sparkly .glitter { display: block; }
.spanel-head { position: absolute; top: .6vmin; width: 11vmin; height: 9vmin; }
.spanel.side-left .spanel-head { left: 2vmin; } .spanel.side-right .spanel-head { right: 2vmin; }
.spanel-head > * { width: 100%; height: 100%; object-fit: contain; }
.spanel.has-head { padding-top: 10.5vmin; }

/* the front yard */
.room-frontyard .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #d6f0ff, #f4fbff 60%); }
.room-frontyard .ground { position: absolute; left: 0; bottom: 0; width: 100%; height: 30%; }
.room-frontyard .facade { left: 50%; bottom: 25%; width: 76vmin; height: 33vmin; transform: translateX(-50%); }
.thing-mailbox svg { width: 100%; height: 100%; overflow: visible; }
.thing-mailbox .flag { transform-box: fill-box; transform-origin: 20% 100%; transform: rotate(90deg); transition: transform .5s cubic-bezier(.3,1.6,.6,1); }
.thing-mailbox.has-mail .flag { transform: rotate(0); }
.thing-mailbox .peek { display: none; }
.thing-mailbox.has-mail .peek { display: inline; }
.thing-mailbox.has-mail:not(.new) { animation: mailwiggle 3s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes mailwiggle { 0%, 80%, 100% { transform: translateX(-50%) rotate(0); } 85% { transform: translateX(-50%) rotate(-4deg); } 92% { transform: translateX(-50%) rotate(3deg); } }
#letter { align-items: center; justify-content: center; background: rgba(60,50,80,.45); z-index: 68; }
#letter .paper {
  position: relative; width: min(72vw, 108vmin); min-height: 52vmin; padding: 6vmin 7vmin 14vmin; border-radius: 2vmin;
  background: #fffdf6; border: .8vmin solid #f1dcb0; box-shadow: 0 1.6vmin 0 #e3c99a, 0 3vmin 8vmin rgba(0,0,0,.3);
  background-image: repeating-linear-gradient(180deg, transparent 0 9.2vmin, #f3e6cc 9.2vmin 9.5vmin);
  display: flex; align-items: center; justify-content: center;
}
#letter .ltext { display: flex; flex-direction: column; gap: 1.6vmin; align-items: flex-start; font: 900 5.6vmin/1.3 var(--font); color: var(--ink); }
#letter .ltext.long { font-size: 4.2vmin; }
#letter .lline .word { margin: 0 .2vmin; }
#letter .stamp { position: absolute; right: 3vmin; top: 3vmin; width: 9vmin; height: 9vmin; padding: 1.4vmin; color: #ff7a9a; background: #fff; border: .5vmin dashed #ffb3c8; border-radius: 1vmin; transform: rotate(8deg); }
#letter .stamp svg { width: 100%; height: 100%; }
#letter .say-all { position: absolute; left: 50%; bottom: 2vmin; transform: translateX(-50%); }

/* the garden */
.thing-garden .bed { position: absolute; left: 0; bottom: 0; width: 100%; height: 36%; }
.thing-garden .gspot { position: absolute; bottom: 14%; width: 22%; height: 86%; }
.thing-garden .plant { position: absolute; inset: 0; transform-origin: 50% 100%; }
.thing-garden .plant svg { width: 100%; height: 100%; overflow: visible; }
.thing-garden .thirsty { position: absolute; left: 50%; top: 18%; width: 5vmin; height: 5vmin; margin-left: -2.5vmin; display: none; animation: bob 1.4s ease-in-out infinite; }
.thing-garden .thirsty svg { width: 100%; height: 100%; }
.thing-garden .gspot.thirst .thirsty { display: block; }
.thing-garden .gspot.ripe .plant { filter: drop-shadow(0 0 1.2vmin #fff3a0); }

/* the photo booth */
.countdown { position: absolute; left: 50%; top: 40%; z-index: 66; font: 900 22vmin/1 var(--font); color: #8b7fd1; text-shadow: .6vmin 0 0 #fff, -.6vmin 0 0 #fff, 0 .6vmin 0 #fff, 0 -.6vmin 0 #fff, 0 1.6vmin 0 rgba(0,0,0,.12); pointer-events: none; }
.flash { position: absolute; inset: 0; z-index: 67; background: #fff; pointer-events: none; }
.photo { background: #fff; padding: 1.4vmin 1.4vmin 4vmin; border-radius: 1vmin; box-shadow: 0 1vmin 3vmin rgba(0,0,0,.2); transform: rotate(-2deg); position: relative; }
.photo.flying { position: absolute; left: 50%; top: 50%; z-index: 66; pointer-events: none; }
.shot { position: relative; overflow: hidden; border-radius: .6vmin; background: #fff8ef; pointer-events: none; }
.shot-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.shot-in .pet .zzz, .shot-in .pet .tag { display: none; }
.photo .pdots { position: absolute; left: 0; right: 0; bottom: 1.1vmin; display: flex; gap: 1vmin; justify-content: center; }
.photo .pdots i { width: 1.6vmin; height: 1.6vmin; border-radius: 50%; background: #e6e1ef; }
.photo .pdots i.on { background: #8b7fd1; }
.cbtn.small.camera { color: #8b7fd1; }

/* grown-up corner pages */
.ptiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13vmin, 1fr)); gap: 1.2vmin; }
.ptile small { display: block; margin-top: .3vmin; font-size: 2.1vmin; font-weight: 700; color: #857f96; }
.ptile { display: flex; flex-direction: column; align-items: center; gap: .8vmin; padding: 1.4vmin .8vmin; border-radius: 2.4vmin; background: #f7f4fb; border: .5vmin solid #e3ddef; font: 800 2.5vmin/1.1 var(--font); text-align: center; }
.ptile .pico { width: 7vmin; height: 7vmin; } .ptile .pico svg { width: 100%; height: 100%; }
.ptile.hot { background: #fff6d8; border-color: #ffc93c; }
.ptile.down { transform: scale(.96); }
.panel.sub { width: min(86vw, 104vmin); }
.panel .row.wrap { flex-wrap: wrap; justify-content: center; }
.panel .row.wrap .pbtn { flex: 0 0 auto; min-width: 13vmin; }
.panel textarea {
  width: 100%; font: 600 max(18px, 3vmin)/1.35 var(--font); color: var(--ink); padding: 1.6vmin 2vmin;
  border: .5vmin solid #d9d3e6; border-radius: 2vmin; background: #fffdf8; resize: none;
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; touch-action: auto;
}
.panel textarea:focus { outline: none; border-color: #8b7fd1; }
.panel .note.big { font-size: 3vmin; color: var(--ink); }
.months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1vmin; }
.pbtn.small { padding: 1.4vmin .6vmin; font-size: 2.8vmin; }
.bday { min-width: 10vmin; text-align: center; font: 900 5vmin/1 var(--font); }

.ptile .pico, .book-pics > div { color: #ff6f91; }
#map .map-what { position: absolute; left: calc(3vmin + env(safe-area-inset-left, 0px)); top: calc(3vmin + var(--safe-top)); width: 22vmin; height: 16vmin; padding: 1.2vmin; background: #fff; border-radius: 2vmin; box-shadow: 0 1vmin 3vmin rgba(0,0,0,.2); transform: rotate(-4deg); animation: pulse 1.4s ease-in-out infinite; }
#map .map-what > * { width: 100%; height: 100%; object-fit: cover; border-radius: 1vmin; display: block; }

/* pet school */
.room-school .wall { background: radial-gradient(circle, rgba(255,255,255,.6) 10%, transparent 12%) 0 0 / 9vmin 9vmin, #e9f6dc; }
.room-school .floor { background: repeating-linear-gradient(90deg, #e3c79c 0 11vmin, #d6b88a 11vmin 11.4vmin); }
.room-school .shelfbooks { bottom: 28%; width: 16vmin; height: 12vmin; background:
  linear-gradient(90deg, #ff8fb8 0 18%, transparent 18% 22%, #7fc4ff 22% 40%, transparent 40% 44%, #ffd23f 44% 62%, transparent 62% 66%, #a6e08a 66% 84%, transparent 84%) 0 0 / 100% 82% no-repeat,
  linear-gradient(#b07f4f, #b07f4f) 0 100% / 100% 18% no-repeat; }
.room-school .shelfbooks.l { left: 21vmin; } .room-school .shelfbooks.r { right: 21vmin; }
.thing-board .board-in { position: absolute; inset: 0; border-radius: 2vmin; background: #3f7a5a; border: 1.6vmin solid #b07f4f; box-shadow: 0 1vmin 0 rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; }
.thing-board .chalk { font: 900 8vmin/1 var(--font); color: #fff; text-shadow: 0 0 .6vmin rgba(255,255,255,.5); }
.thing-board .chalk .word { pointer-events: auto; }
.thing-board .stars { position: absolute; left: 0; right: 0; bottom: .6vmin; display: flex; gap: .6vmin; justify-content: center; }
.thing-board .stars i { width: 4.4vmin; height: 4.4vmin; color: #ffd23f; animation: newbtn .5s ease-out; }
.thing-board .stars svg { width: 100%; height: 100%; }
.btn.chosen { box-shadow: 0 1vmin 0 var(--c-dark), 0 0 0 1.1vmin #ffe57f; transform: scale(1.04); }
.easel canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 1.4vmin; border: 1.2vmin solid #e6c79a; background: #fffdf8; box-shadow: 0 1.2vmin 0 rgba(0,0,0,.1); touch-action: none; }
.easel .legs { position: absolute; left: 0; right: 0; top: 96%; height: 34%; }
.easel.framed canvas { border-color: #e8b84a; box-shadow: 0 0 0 1vmin #ffe7a8, 0 1.2vmin 0 rgba(0,0,0,.1); }
.room .painting { width: 17vmin; height: 12vmin; transform: translate(-50%, -50%); padding: 1vmin; background: #fff; border: 1vmin solid #e8b84a; border-radius: 1vmin; box-shadow: 0 .8vmin 1.6vmin rgba(0,0,0,.15); }
.room .painting img { width: 100%; height: 100%; display: block; object-fit: cover; }
.build svg { width: 100%; height: 100%; overflow: visible; }
.build .pc { transform-box: fill-box; }

/* playroom pretend play */
.art .vetsticker { position: absolute; left: 56%; top: 62%; width: 14%; height: 14%; pointer-events: none; transform: rotate(-12deg); }
.art .vetsticker svg { width: 100%; height: 100%; }
.tea-in { position: absolute; left: 30%; top: 44%; width: 40%; height: 10%; border-radius: 50%; background: #e8c39e; opacity: 0; transition: opacity .4s ease; }
.full .tea-in { opacity: 1; }
.friend svg { width: 100%; height: 100%; }
.pstage .pstage-top { position: absolute; left: -2%; right: -2%; top: 0; height: 12%; border-radius: 2vmin 2vmin 0 0; background: repeating-linear-gradient(90deg, #ff6b7a 0 6vmin, #ff8a96 6vmin 12vmin); box-shadow: 0 .8vmin 0 #d94f5c; }
.pstage .pstage-floor { position: absolute; left: -2%; right: -2%; bottom: 0; height: 7%; border-radius: 1vmin; background: #c99a6b; box-shadow: 0 .8vmin 0 #a87a4b; }
.pstage .curtain { position: absolute; top: 10%; bottom: 7%; width: 51%; background: repeating-linear-gradient(90deg, #ff6b7a 0 3vmin, #e85566 3vmin 6vmin); transition: transform .8s cubic-bezier(.5,0,.3,1); }
.pstage .curtain.l { left: 0; border-radius: 0 0 40% 0; transform-origin: 0 0; }
.pstage .curtain.r { right: 0; border-radius: 0 0 0 40%; transform-origin: 100% 0; }
.pstage.open .curtain.l { transform: scaleX(.16); } .pstage.open .curtain.r { transform: scaleX(.16); }
.art .pprop { position: absolute; pointer-events: none; }
.art .pprop.behind { z-index: -1; }
.art .pprop svg { width: 100%; height: 100%; overflow: visible; }

/* ---------- trips ---------- */
.thing-car .carbox { width: 100%; height: 100%; }
.thing-car svg { width: 100%; height: 100%; overflow: visible; }
.prop.drivecar > div { animation: bob .3s ease-in-out infinite; }
#trips { z-index: 62; background: rgba(46, 64, 120, .5); align-items: center; justify-content: center; }
#trips .trip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vmin; width: min(74vw, 110vmin); height: 46vmin; }
#trips .map-x { position: absolute; right: calc(var(--col) + 1vmin); top: calc(1vmin + var(--safe-top)); width: 10vmin; height: 10vmin; padding: 2.4vmin; border-radius: 50%; background: #fff; box-shadow: 0 .8vmin 0 rgba(0,0,0,.15); }
#trips .map-x svg { width: 100%; height: 100%; }
.trip { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
body.on-trip #world > .thing, body.on-trip #world > .visitor { display: none; }
.trip > * { position: absolute; }
.trip .tsky { inset: 0; }
.trip .tsky.beach { background: linear-gradient(#9fdcff, #e6f7ff 55%); }
.trip .tsky.park { background: linear-gradient(#bfe6ff, #f0fbff 60%); }
.trip .sun { right: 24%; top: calc(14vmin + var(--safe-top)); width: 14vmin; height: 14vmin; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 6vmin #ffe57f; }
.trip .sea { left: 0; width: 100%; bottom: 26%; height: 22%; }
.trip .sea .wave { animation: wave 3s ease-in-out infinite alternate; }
@keyframes wave { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
.trip .sand { left: 0; right: 0; bottom: 0; height: 30%; background: radial-gradient(circle, rgba(201,154,107,.35) 8%, transparent 10%) 0 0 / 6vmin 6vmin, #ffe2a8; }
.trip .umbrella { left: 23%; bottom: 24%; width: 18vmin; height: 18vmin; }
.trip .umbrella svg { width: 100%; height: 100%; }
.trip .grass { left: 0; right: 0; bottom: 0; height: 32%; background: #a6dd86; border-top: 1.2vmin solid #8fd16a; }
.trip .ttree { bottom: 30%; width: 22vmin; height: 34vmin; background: radial-gradient(circle at 50% 35%, #6cc551 0 42%, transparent 43%), linear-gradient(#b07f4f, #b07f4f) 50% 100% / 3.6vmin 50% no-repeat; }
.trip .ttree.l { left: 18%; } .trip .ttree.r { right: 18%; }
.trip .pond { left: 50%; bottom: 3%; width: 34vmin; height: 10vmin; transform: translateX(-50%); border-radius: 50%; background: #7fc4ff; box-shadow: inset 0 .8vmin 0 rgba(255,255,255,.5); }
.trip .shopwall { inset: 0; background: repeating-linear-gradient(90deg, #fff4f8 0 6vmin, #ffe3ee 6vmin 12vmin); }
.trip .awning { left: 0; right: 0; top: 0; height: 9vmin; background: repeating-linear-gradient(90deg, #ff8fb8 0 8vmin, #fff 8vmin 16vmin); border-radius: 0 0 3vmin 3vmin; }
.trip .counter { left: 22%; right: 22%; bottom: 28%; height: 13vmin; background: #fff; border-radius: 2vmin 2vmin 0 0; border: .8vmin solid #f08bb0; }
.trip .tubs { position: absolute; left: 4%; right: 4%; top: -4vmin; display: flex; justify-content: space-around; }
.trip .tubs i { width: 9vmin; height: 7vmin; border-radius: 4vmin 4vmin 1vmin 1vmin; border: .5vmin solid #fff; box-shadow: 0 .4vmin 0 rgba(0,0,0,.1); }
.trip .shopfloor { left: 0; right: 0; bottom: 0; height: 28%; background: repeating-conic-gradient(#fff 0 25%, #ffd9e8 0 50%) 0 0 / 9vmin 9vmin; }
.sandcastle svg { width: 100%; height: 100%; overflow: visible; fill: #f4c77e; stroke: #c99a5a; stroke-width: 2.5; }
.sandcastle .pc { transform-box: fill-box; }
.cone svg { width: 100%; height: 100%; overflow: visible; }
.scoopball { position: absolute; left: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); border: .4vmin solid rgba(255,255,255,.9); box-shadow: inset -.6vmin -.6vmin 0 rgba(0,0,0,.08); }
.scoopball.sprinkled { background-image: radial-gradient(circle, #ff7a7a 12%, transparent 14%), radial-gradient(circle, #5aa9ff 12%, transparent 14%), radial-gradient(circle, #ffd23f 12%, transparent 14%) !important; background-size: 2vmin 2vmin, 2.6vmin 2.6vmin, 2.2vmin 2.2vmin !important; background-position: 0 0, .8vmin 1vmin, 1.4vmin .3vmin !important; }

/* ---------- visitors, real stuffies, peekaboo ---------- */
#world > .visitor { pointer-events: none; position: absolute; z-index: 5; transform: translateX(-50%); }
.visitor .vbody { width: 100%; height: 100%; pointer-events: auto; transform-origin: 50% 100%; }
.visitor .vbody svg { width: 100%; height: 100%; overflow: visible; }
.visitor .vname { position: absolute; left: 50%; bottom: -4.4vmin; transform: translateX(-50%); padding: .3vmin 1.6vmin; border-radius: 3vmin; background: #fff; font: 900 3vmin/1.2 var(--font); white-space: nowrap; pointer-events: auto; }
.request { position: absolute; top: calc(19vmin + var(--safe-top)); z-index: 46; width: 40vmin; padding: 1.6vmin 2vmin; border-radius: 4vmin; background: #fff; border: .9vmin solid var(--c); box-shadow: 0 1.4vmin 3vmin rgba(0,0,0,.15); display: flex; align-items: center; gap: 1.4vmin; transform: translateX(-50%); }
.request.side-left { left: 30%; --c: var(--L); } .request.side-right { left: 70%; --c: var(--R); }
.request .rpic { flex: none; width: 8vmin; height: 8vmin; color: #ff6f91; } .request .rpic svg { width: 100%; height: 100%; }
.request .rtext { flex: 1; font: 900 3.4vmin/1.2 var(--font); text-align: center; color: var(--ink); }
.request .rtext .word { margin: 0 .2vmin; }
.request .rdone { flex: none; width: 11vmin; height: 11vmin; padding: 2.2vmin; border-radius: 50%; background: #ffe3ec; color: #ff6f91; box-shadow: 0 .9vmin 0 #f7b8cb; animation: pulse 1.2s ease-in-out infinite; }
.request .rdone svg { width: 100%; height: 100%; }
.request .rdone.down { transform: translateY(.6vmin); box-shadow: 0 .3vmin 0 #f7b8cb; }
.peeker { position: absolute; z-index: 64; width: 26vmin; height: 26vmin; pointer-events: none; }
.peeker svg { width: 100%; height: 100%; overflow: visible; }
.peeker.from-bottom { left: 50%; bottom: 0; }
.peeker.from-left { left: 0; bottom: 30%; }
.peeker.from-right { right: 0; bottom: 30%; }
.cbtn.small.peekaboo { padding: 1.4vmin; }

/* ---------- decorating ---------- */
.room .decor.drug { left: 50%; bottom: 1.5%; width: 66vmin; height: 16vmin; transform: translateX(-50%); }
.room.has-rug .rug { display: none; }
.room .decor.ditem { bottom: 25%; width: 12vmin; height: 14.4vmin; transform: translateX(-50%); }
.room.wp-wpStars .wall { background: radial-gradient(circle, #ffe57f 9%, transparent 11%) 0 0 / 9vmin 9vmin, radial-gradient(circle, #fff 6%, transparent 8%) 4.5vmin 4.5vmin / 9vmin 9vmin, #dfe9ff; }
.room.wp-wpHearts .wall { background: radial-gradient(circle at 40% 40%, #ffb3c8 10%, transparent 12%) 0 0 / 8vmin 8vmin, radial-gradient(circle at 60% 40%, #ffb3c8 10%, transparent 12%) 0 0 / 8vmin 8vmin, #ffeef4; }
.room.wp-wpStripes .wall { background: repeating-linear-gradient(90deg, #fff 0 4vmin, #d9f3e2 4vmin 8vmin); }

/* ---------- the sleepover ---------- */
.fort svg { width: 100%; height: 100%; overflow: visible; }
.fort .fairy { animation: twinkle 1.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.spotlight .beam { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(255,246,200,.95) 45%, rgba(255,246,200,.4) 62%, transparent 72%); }
.spotlight .shadowpic { position: absolute; inset: 18%; filter: brightness(0) opacity(.6); }
.spotlight .shadowpic svg { width: 100%; height: 100%; }
.spotlight .shadowword { position: absolute; left: 50%; bottom: -8vmin; transform: translateX(-50%); font: 900 4.6vmin/1 var(--font); color: #fff6c8; white-space: nowrap; }

/* ---------- weather ---------- */
.rainfall, .snowfall, .snowground { position: absolute; inset: 0; display: none; pointer-events: none; }
body.w-rain .rainfall { display: block; overflow: hidden; }
.rainfall::before { content: ''; position: absolute; left: -6vmin; right: -6vmin; top: -9vmin; bottom: 0; background-image: linear-gradient(170deg, transparent 0 46%, rgba(120,160,220,.55) 47% 49%, transparent 50%); background-size: 3.4vmin 9vmin; animation: rain .5s linear infinite; }
@keyframes rain { from { transform: translate(0, 0); } to { transform: translate(-3.4vmin, 9vmin); } }
body.w-rain .room-backyard .sky, body.w-rain .room-frontyard .sky { filter: saturate(.6) brightness(.92); }
body.w-snow .snowfall { display: block; overflow: hidden; }
.snowfall::before { content: ''; position: absolute; left: 0; right: 0; top: -40vmin; bottom: 0; background-image: radial-gradient(circle, #fff 22%, transparent 26%), radial-gradient(circle, #fff 16%, transparent 20%); background-size: 8vmin 8vmin, 5vmin 5vmin; background-position: 0 0, 2vmin 3vmin; animation: snow 6s linear infinite; }
@keyframes snow { from { transform: translateY(0); } to { transform: translateY(40vmin); } }
body.w-snow .snowground { display: block; top: auto; height: 30%; background: linear-gradient(#fff, #eef6ff); border-radius: 50% 50% 0 0 / 8vmin 8vmin 0 0; }
.thing.puddle svg { width: 100%; height: 100%; }
.thing-snowman svg { width: 100%; height: 100%; overflow: visible; }
.thing-snowman .sp { transition: opacity .3s ease; }

/* ---------- Halloween and birthdays ---------- */
.room .jack { display: none; bottom: 24%; width: 9vmin; height: 7.2vmin; transform: translateX(-50%); }
body.october .room .jack { display: block; }
.art .wear.back { z-index: -1; }
.art .partyhat { position: absolute; left: 60%; top: -14%; width: 20%; height: 24%; transform: rotate(14deg); pointer-events: none; }
.art .partyhat svg { width: 100%; height: 100%; }
.bbanner { padding: 1.4vmin 4vmin; border-radius: 5vmin; background: #fff; font: 900 7vmin/1.1 var(--font); color: #ff6f91; box-shadow: 0 1vmin 0 rgba(0,0,0,.1), 0 0 0 1vmin #ffe57f; white-space: nowrap; }
.bbanner .word { margin: 0 .4vmin; }
.bcake svg { width: 100%; height: 100%; overflow: visible; }
.bcake .flame { animation: flicker .3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes flicker { from { transform: scale(1, 1); } to { transform: scale(.85, 1.12); } }
body:not([data-scene="play"]) .request { display: none; }   /* waits for the activity to finish */

/* =====================================================================
   POLISH: springy buttons everywhere, and little celebrations
   ===================================================================== */
.cbtn, .scard, .pbtn, .ptile, .book-btn, .round-btn, .request .rdone, .spanel-x, .map-x {
  transition: transform .4s cubic-bezier(.3,1.9,.5,1), box-shadow .2s ease;
}
.cbtn.down, .scard.down, .pbtn.down, .ptile.down, .book-btn.down, .round-btn.down, .request .rdone.down, .spanel-x.down, .map-x.down { transition-duration: .07s; }
.scard.down { transform: scale(.9); }
.cbtn.down { transform: translateY(.8vmin) scale(.92); }
.spanel-x.down, .map-x.down { transform: scale(.85); }
.scard.on { animation: cardon .45s cubic-bezier(.3,1.9,.5,1); }
@keyframes cardon { 0% { transform: scale(.9); } 100% { transform: scale(1); } }
.confetti { position: absolute; z-index: 36; width: 1.8vmin; height: 1.1vmin; border-radius: .4vmin; pointer-events: none; }
.confetti.round { width: 1.5vmin; height: 1.5vmin; border-radius: 50%; }
.thing.puddle.new { animation: none; }
.visitor .vname { border: .5vmin solid #e6dccb; font-size: 3.4vmin; }

/* =====================================================================
   SPEED: nothing moves where nobody can see it
   ===================================================================== */
.room:not(.on), .room:not(.on) *, .room:not(.on) *::before { animation-play-state: paused !important; }
#night:not(.on) .star, .half-night:not(.on) .star { animation-play-state: paused; }

/* =====================================================================
   THE START SCREEN AND THE DEDICATION
   ===================================================================== */
#title { flex-direction: column; gap: 4vmin; background: radial-gradient(circle at 50% 42%, rgba(255,248,239,.9) 0 26vmin, rgba(255,248,239,.35) 46vmin); }
#title .logo { font: 900 15vmin/1 var(--font); letter-spacing: -.3vmin; text-shadow: 0 1.2vmin 0 rgba(0,0,0,.08); white-space: nowrap; margin-top: -10vmin; pointer-events: none; }
#title .logo span { display: inline-block; -webkit-text-stroke: 1.4vmin #fff; paint-order: stroke fill; animation: logobob 2.6s ease-in-out infinite; }
#title .logo .w1 { color: var(--L-dark); transform: rotate(-4deg); }
#title .logo .w2 { color: var(--R-dark); animation-delay: -1.3s; }
@keyframes logobob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2vmin; } }
.heart-btn { position: absolute; left: 50%; bottom: 4vmin; width: 9vmin; height: 9vmin; margin-left: -4.5vmin; padding: 2vmin; border-radius: 50%;
  background: #fff; color: #ff6f91; box-shadow: 0 .9vmin 0 rgba(0,0,0,.1); transition: transform .4s cubic-bezier(.3,1.9,.5,1); }
.heart-btn svg { width: 100%; height: 100%; }
.heart-btn.down { transform: scale(.88); transition-duration: .07s; }
#dedication { z-index: 70; align-items: center; justify-content: center; background: rgba(60,50,80,.45); }
#dedication .card { position: relative; width: min(70vw, 100vmin); padding: 5vmin 6vmin 6vmin; border-radius: 5vmin; background: #fffdf8;
  border: 1vmin solid #ffd9e4; box-shadow: 0 1.6vmin 0 #f7b8cb, 0 3vmin 8vmin rgba(0,0,0,.25); display: flex; flex-direction: column; align-items: center; gap: 2.4vmin; }
#dedication .ded-pets { display: flex; align-items: flex-end; gap: 1vmin; }
#dedication .ded-pets .art { position: relative; width: 24vmin; height: 24vmin; }
#dedication .ded-pets .art > svg { width: 100%; height: 100%; overflow: visible; }
#dedication .ded-heart { width: 10vmin; height: 10vmin; margin-bottom: 8vmin; animation: pulse 1.4s ease-in-out infinite; }
#dedication .ded-heart svg { width: 100%; height: 100%; }
#dedication .ded-line { font: 900 4.6vmin/1.3 var(--font); color: #b0884f; text-align: center; }
#dedication .ded-line.big { font-size: 6.4vmin; color: var(--ink); }
#dedication .ded-line .word { margin: 0 .3vmin; }

/* =====================================================================
   PICTURES OF THE OUTDOOR ROOMS (front yard, backyard)
   ===================================================================== */
.room-picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; pointer-events: none; -webkit-user-drag: none; }
.room.has-picture .bg { display: none; }
body.w-rain .room.has-picture .room-picture { filter: saturate(.8) brightness(.93); }
.room-thumb { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 45%; border: .6vmin solid #fff; box-shadow: 0 .4vmin 0 rgba(0,0,0,.12); -webkit-user-drag: none; }
.pic-rows { display: flex; flex-direction: column; gap: 1.6vmin; }
.pic-row { display: flex; align-items: center; gap: 2vmin; }
.pic-row .pbtn { flex: none; white-space: nowrap; }
.pic-thumb { flex: none; width: 17vmin; height: 12.5vmin; border-radius: 1.6vmin; overflow: hidden; background: #f1eef7; border: .5vmin solid #d9d3e6; display: flex; align-items: center; justify-content: center; }
.pic-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pic-thumb svg { width: 60%; height: 80%; }
.pic-info { flex: 1; display: flex; flex-direction: column; gap: .6vmin; min-width: 0; font-size: 3.4vmin; }
.pic-info span { font-size: 2.4vmin; font-weight: 600; color: #857f96; }