:root {
    color-scheme: light;
    font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
    font-synthesis: none;
    --ink: #493f49;
    --cream: #fff7e8;
    --sky: #76cbd2;
    --sky-light: #c8eef0;
    --grass: #79b86b;
    --grass-dark: #4e8b54;
    --coral: #e46f59;
    --plum: #9363a7;
    --yellow: #f4c84a;
    --wood: #a96843;
    --wood-dark: #71462f;
    --soft-shadow: 0 0.45rem 0 rgba(77, 64, 66, 0.17);
}

* {
    box-sizing: border-box;
}

html,
body,
#app {
    width: 100%;
    min-width: 320px;
    height: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    overflow: hidden;
    color: var(--ink);
    background: #d7eee9;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}

button,
a {
    font: inherit;
}

button {
    border: 0;
}

button:not(:disabled) {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible {
    outline: 0.3rem solid #352846;
    outline-offset: 0.25rem;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.playroom-shell {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100dvh;
    min-height: 100%;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    isolation: isolate;
}

.world-scene {
    position: relative;
    width: min(100vw, calc(100dvh * 16 / 9));
    max-width: 1600px;
    aspect-ratio: 16 / 9;
    max-height: 100dvh;
    overflow: hidden;
    border-radius: clamp(0rem, 2vw, 1.8rem);
    box-shadow: 0 1.2rem 4rem rgba(48, 80, 82, 0.25);
    user-select: none;
    -webkit-user-select: none;
}

.scene-frame {
    position: relative;
    width: min(100vw, calc(100dvh * 16 / 9));
    max-width: 1600px;
    aspect-ratio: 16 / 9;
    max-height: 100dvh;
    isolation: isolate;
}

.scene-frame > .world-scene {
    width: 100%;
    height: 100%;
    max-height: none;
}

.scene-frame.enter-from-left > .world-scene { animation: enter-from-left 340ms cubic-bezier(.2,.8,.2,1); }
.scene-frame.enter-from-right > .world-scene { animation: enter-from-right 340ms cubic-bezier(.2,.8,.2,1); }
.scene-frame.enter-from-top > .world-scene { animation: enter-from-top 340ms cubic-bezier(.2,.8,.2,1); }
.scene-frame.enter-from-bottom > .world-scene { animation: enter-from-bottom 340ms cubic-bezier(.2,.8,.2,1); }
.scene-frame.enter-zoom-in > .world-scene { animation: enter-zoom-in 360ms cubic-bezier(.2,.8,.2,1); }
.scene-frame.enter-zoom-out > .world-scene { animation: enter-zoom-out 360ms cubic-bezier(.2,.8,.2,1); }
.scene-frame.enter-fade > .world-scene { animation: enter-fade 260ms ease; }

@keyframes enter-from-left { from { opacity: .45; transform: translateX(-14%); } }
@keyframes enter-from-right { from { opacity: .45; transform: translateX(14%); } }
@keyframes enter-from-top { from { opacity: .45; transform: translateY(-12%); } }
@keyframes enter-from-bottom { from { opacity: .45; transform: translateY(12%); } }
@keyframes enter-zoom-in { from { opacity: .4; transform: scale(.72); filter: blur(.2rem); } }
@keyframes enter-zoom-out { from { opacity: .45; transform: scale(1.22); } }
@keyframes enter-fade { from { opacity: .25; } }

.home-button {
    position: absolute;
    z-index: 50;
    top: max(0.75rem, env(safe-area-inset-top));
    left: max(0.75rem, env(safe-area-inset-left));
    width: clamp(3.6rem, 7vw, 5.25rem);
    aspect-ratio: 1;
    padding: 0;
    border: 0.22rem solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    background: var(--cream);
    box-shadow: var(--soft-shadow);
    transition: transform 140ms ease;
}

.home-button:active {
    transform: scale(0.92);
}

.mini-house {
    position: absolute;
    left: 23%;
    top: 37%;
    width: 54%;
    height: 40%;
    border-radius: 0.25rem;
    background: var(--coral);
}

.mini-house::before {
    position: absolute;
    content: "";
    left: -18%;
    top: -57%;
    width: 136%;
    height: 68%;
    background: var(--plum);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.mini-house::after {
    position: absolute;
    content: "";
    left: 41%;
    bottom: 0;
    width: 28%;
    height: 60%;
    border-radius: 0.25rem 0.25rem 0 0;
    background: var(--cream);
}

.save-warning {
    position: fixed;
    z-index: 60;
    top: max(0.7rem, env(safe-area-inset-top));
    right: max(0.7rem, env(safe-area-inset-right));
    max-width: 19rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.8rem;
    color: #582d2d;
    background: #ffe0d6;
    box-shadow: var(--soft-shadow);
    font-size: 0.82rem;
}

/* Loading */

.playroom-loading {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(#c8eef0, #fff7e8);
}

.loading-house {
    position: relative;
    width: 7rem;
    height: 6rem;
    border-radius: 0.8rem;
    background: var(--coral);
    animation: loading-breathe 1.3s ease-in-out infinite alternate;
}

.loading-roof {
    position: absolute;
    left: 50%;
    top: -2.8rem;
    width: 6rem;
    height: 6rem;
    border-radius: 0.7rem;
    background: var(--plum);
    transform: translateX(-50%) rotate(45deg);
}

.loading-door {
    position: absolute;
    z-index: 1;
    left: 2.45rem;
    bottom: 0;
    width: 2.1rem;
    height: 3.6rem;
    border-radius: 1rem 1rem 0 0;
    background: var(--cream);
}

@keyframes loading-breathe {
    to { transform: translateY(-0.5rem) scale(1.02); }
}

/* Shared sky and exterior */

.exterior-scene {
    background: linear-gradient(to bottom, var(--sky-light) 0 63%, #9bcf7c 63% 100%);
}

.sky-sun {
    position: absolute;
    top: 6%;
    right: 8%;
    width: 9%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 0 1.2rem rgba(244, 200, 74, 0.18);
}

.cloud {
    position: absolute;
    width: 12%;
    height: 5%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
}

.cloud::before,
.cloud::after {
    position: absolute;
    content: "";
    bottom: 0;
    border-radius: 50%;
    background: inherit;
}

.cloud::before { left: 14%; width: 43%; aspect-ratio: 1; }
.cloud::after { right: 14%; width: 35%; aspect-ratio: 1; }
.cloud-one { left: 7%; top: 13%; }
.cloud-two { right: 24%; top: 22%; transform: scale(0.72); }

.distant-hill {
    position: absolute;
    bottom: 27%;
    width: 60%;
    height: 30%;
    border-radius: 50% 50% 0 0;
    background: #83bd72;
}

.hill-one { left: -20%; }
.hill-two { right: -18%; height: 24%; background: #6eaa68; }

.exterior-grass {
    position: absolute;
    inset: 63% 0 0;
    background: linear-gradient(#8dcc78, #5da85e);
}

.playroom-house {
    position: absolute;
    z-index: 3;
    left: 21%;
    top: 22%;
    width: 58%;
    height: 58%;
}

.house-wall {
    position: absolute;
    inset: 24% 0 0;
    border-radius: 1rem 1rem 0.5rem 0.5rem;
    background: #f8c979;
    box-shadow: inset 0 -1rem rgba(183, 112, 66, 0.13), 0 1rem 0 rgba(69, 94, 58, 0.13);
}

.house-roof {
    position: absolute;
    z-index: 2;
    left: 7%;
    top: -7%;
    width: 86%;
    height: 51%;
    border-radius: 1.2rem;
    background: var(--coral);
    clip-path: polygon(50% 0, 100% 78%, 91% 100%, 50% 33%, 9% 100%, 0 78%);
}

.house-chimney {
    position: absolute;
    z-index: 1;
    right: 16%;
    top: 3%;
    width: 8%;
    height: 28%;
    border-radius: 0.4rem 0.4rem 0 0;
    background: #a75548;
}

.world-door {
    position: absolute;
    z-index: 8;
    top: 51%;
    width: 12%;
    height: 29%;
    padding: 0;
    border: 0.35rem solid #fff0c7;
    border-bottom: 0;
    border-radius: 46% 46% 0.35rem 0.35rem;
    box-shadow: inset 0 -0.8rem rgba(72, 43, 52, 0.13), var(--soft-shadow);
    transition: transform 160ms ease, filter 160ms ease;
}

.world-door:hover,
.world-door:focus-visible,
.garden-gate:hover,
.garden-gate:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-0.3rem);
}

.world-door:active,
.garden-gate:active {
    transform: translateY(0.3rem) scale(0.96);
}

.sun-door { left: 34%; background: #d86f52; }
.moon-door { left: 54%; background: #78629e; }

.sun-symbol {
    position: absolute;
    left: 50%;
    top: 38%;
    width: 38%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--yellow);
    transform: translate(-50%, -50%);
    box-shadow: 0 -0.65rem 0 -0.48rem var(--yellow), 0 0.65rem 0 -0.48rem var(--yellow), 0.65rem 0 0 -0.48rem var(--yellow), -0.65rem 0 0 -0.48rem var(--yellow);
}

.moon-symbol {
    position: absolute;
    left: 48%;
    top: 38%;
    width: 43%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #f6e7aa;
    transform: translate(-50%, -50%);
}

.moon-symbol::after {
    position: absolute;
    content: "";
    left: 36%;
    top: -8%;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #78629e;
}

.garden-gate {
    position: absolute;
    z-index: 9;
    right: 4%;
    bottom: 11%;
    width: 15%;
    height: 25%;
    padding: 0;
    border: 0.45rem solid #fff0c7;
    border-radius: 0.7rem 0.7rem 0.2rem 0.2rem;
    background: repeating-linear-gradient(90deg, var(--wood) 0 17%, var(--wood-dark) 17% 21%);
    box-shadow: var(--soft-shadow);
    transition: transform 160ms ease, filter 160ms ease;
}

.gate-plants span {
    position: absolute;
    bottom: 70%;
    width: 16%;
    height: 52%;
    border-radius: 80% 10% 80% 10%;
    background: #4b9256;
    transform-origin: bottom;
}

.gate-plants span:nth-child(1) { left: 14%; transform: rotate(-24deg); }
.gate-plants span:nth-child(2) { left: 42%; height: 68%; }
.gate-plants span:nth-child(3) { right: 13%; transform: rotate(24deg); }

.exterior-path {
    position: absolute;
    z-index: 5;
    left: 43%;
    bottom: -9%;
    width: 19%;
    height: 37%;
    border-radius: 50% 50% 0 0;
    background: #e8cf9c;
    clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%);
}

/* Backyard */

.backyard-scene {
    background: linear-gradient(to bottom, #bfe9eb 0 59%, #78b969 59% 100%);
}

.backyard-sky {
    position: absolute;
    inset: 0 0 40%;
    background: radial-gradient(circle at 82% 18%, #f6d770 0 6%, transparent 6.3%), linear-gradient(#a8e1e7, #d8f2eb);
}

.backyard-fence {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 48%;
    height: 20%;
    background: repeating-linear-gradient(90deg, #e5c58a 0 7.4%, #c99661 7.4% 8.2%);
    border-top: 0.6rem solid #b87950;
    border-bottom: 0.6rem solid #b87950;
    opacity: 0.92;
}

.tree {
    position: absolute;
    z-index: 4;
    left: 4%;
    top: 13%;
    width: 22%;
    height: 57%;
    background: transparent;
}

.tree::before {
    position: absolute;
    content: "";
    z-index: 1;
    left: 33%;
    right: 30%;
    top: 24%;
    bottom: 0;
    background: linear-gradient(90deg, #85533b, #a86a43 55%, #774632);
    clip-path: polygon(12% 0, 88% 0, 76% 100%, 24% 100%);
}

.tree-top {
    position: absolute;
    z-index: 2;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 48%;
    background: #569d5b;
}

.tree-top-one { left: -9%; top: -4%; }
.tree-top-two { right: -12%; top: -8%; background: #65ad61; }
.tree-top-three { left: 24%; top: 8%; background: #76b765; }

.bird {
    position: absolute;
    z-index: 7;
    right: 11%;
    top: 32%;
    width: 5.2%;
    aspect-ratio: 1.25;
    border-radius: 55% 55% 48% 48%;
    background: #e97862;
    animation: bird-bob 2.8s ease-in-out infinite alternate;
}

.bird::before {
    position: absolute;
    content: "";
    right: -23%;
    top: 32%;
    border-left: 0.8rem solid #e1aa42;
    border-top: 0.38rem solid transparent;
    border-bottom: 0.38rem solid transparent;
}

.bird::after {
    position: absolute;
    content: "";
    right: 20%;
    top: 24%;
    width: 10%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #3d3b45;
}

@keyframes bird-bob {
    to { transform: translateY(-0.55rem) rotate(2deg); }
}

.garden-bed {
    position: absolute;
    z-index: 5;
    left: 25%;
    bottom: 5%;
    width: 50%;
    height: 25%;
    border: 0.75rem solid #9c6846;
    border-radius: 48% 48% 18% 18%;
    background: #704934;
    box-shadow: inset 0 1rem #5f3d2e, 0 1rem rgba(69, 80, 53, 0.15);
}

.soil-line {
    position: absolute;
    left: 14%;
    right: 14%;
    height: 0.28rem;
    border-radius: 99px;
    background: rgba(239, 190, 127, 0.25);
}

.soil-line-one { top: 38%; transform: rotate(-2deg); }
.soil-line-two { top: 64%; transform: rotate(2deg); }

.garden-plant {
    position: absolute;
    z-index: 10;
    left: 45%;
    bottom: 18%;
    width: 11%;
    height: 34%;
    transform-origin: bottom;
    pointer-events: none;
}

.garden-plant.stage-seeded { height: 10%; bottom: 18%; }
.garden-plant.stage-sprout { height: 25%; }
.garden-plant.stage-bloomed { animation: bloom-arrive 480ms cubic-bezier(.2, .9, .2, 1.2); }

@keyframes bloom-arrive {
    from { transform: scale(0.45); opacity: 0.4; }
}

.play-object,
.bloom-picker {
    position: absolute;
    z-index: 14;
    transition: transform 140ms ease, filter 140ms ease;
    touch-action: manipulation;
}

.play-object:hover,
.play-object:focus-visible,
.bloom-picker:hover,
.bloom-picker:focus-visible {
    transform: translateY(-0.45rem) rotate(-2deg);
    filter: brightness(1.05);
}

.play-object:active,
.bloom-picker:active {
    transform: scale(0.92);
}

.seed-packet {
    left: 8%;
    bottom: 11%;
    width: 12%;
    height: 25%;
    border: 0.35rem solid #f5e2ad;
    border-radius: 0.8rem;
    background: #df765b;
    box-shadow: var(--soft-shadow);
}

.packet-flower {
    position: absolute;
    left: 33%;
    top: 22%;
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 -0.65rem #f6bdcf, 0 0.65rem #f6bdcf, 0.65rem 0 #f6bdcf, -0.65rem 0 #f6bdcf;
}

.packet-seeds {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9%;
    color: #6b402e;
    font-size: clamp(0.8rem, 2vw, 1.5rem);
    letter-spacing: 0.3rem;
}

.watering-can {
    right: 7%;
    bottom: 9%;
    width: 14%;
    height: 20%;
    border-radius: 1rem 1rem 1.8rem 1.8rem;
    background: #5daab5;
    box-shadow: var(--soft-shadow);
}

.can-handle {
    position: absolute;
    left: 18%;
    right: 18%;
    top: -48%;
    height: 82%;
    border: 0.65rem solid #4c8e9b;
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
}

.can-spout {
    position: absolute;
    left: -71%;
    top: 8%;
    width: 78%;
    height: 28%;
    background: #5daab5;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 62%);
}

.water-drops {
    position: absolute;
    left: -80%;
    top: 35%;
    width: 32%;
    height: 60%;
}

.water-drops i {
    position: absolute;
    width: 0.45rem;
    height: 0.7rem;
    border-radius: 50% 50% 55% 55%;
    background: #77d6df;
}

.water-drops i:nth-child(1) { left: 0; top: 0; }
.water-drops i:nth-child(2) { right: 0; top: 25%; }
.water-drops i:nth-child(3) { left: 30%; top: 62%; }

.bloom-picker {
    left: 42%;
    bottom: 16%;
    width: 17%;
    height: 42%;
    border-radius: 50%;
    background: transparent;
}

.bloom-picker.is-busy {
    animation: gentle-no 380ms ease;
}

@keyframes gentle-no {
    25% { transform: translateX(-0.35rem) rotate(-2deg); }
    75% { transform: translateX(0.35rem) rotate(2deg); }
}

.garden-tools {
    position: absolute;
    z-index: 8;
    left: 14%;
    bottom: 4%;
    width: 12%;
    height: 10%;
}

.tiny-pot {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38%;
    height: 65%;
    background: #c66f4e;
    clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}

.tiny-trowel {
    position: absolute;
    right: 10%;
    bottom: 0;
    width: 18%;
    height: 100%;
    border-radius: 40% 40% 50% 50%;
    background: linear-gradient(#9363a7 0 42%, #d8d0c5 42%);
    transform: rotate(25deg);
}

/* Bedrooms */

.bedroom-scene {
    background: #f5d7b4;
}

.bedroom-wall {
    position: absolute;
    inset: 0 0 34%;
    background: #f7dcae;
}

.pink-theme .bedroom-wall { background: #f5c9d8; }
.yellow-theme .bedroom-wall { background: #f8e3a7; }

.bedroom-floor {
    position: absolute;
    inset: 66% 0 0;
    background: repeating-linear-gradient(88deg, #c98958 0 12%, #ba774f 12% 12.8%);
    border-top: 0.8rem solid #9c6046;
}

.wall-dot {
    position: absolute;
    width: 1.2%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(219, 126, 99, 0.35);
}

.pink-theme .wall-dot { background: rgba(210, 78, 126, 0.24); }
.yellow-theme .wall-dot { background: rgba(210, 153, 44, 0.25); }
.bedroom-scene.wall-style-1 .bedroom-wall {
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.26) 0 5%, transparent 5% 12%), #f5c9d8;
}
.bedroom-scene.yellow-theme.wall-style-1 .bedroom-wall {
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.26) 0 5%, transparent 5% 12%), #f8e3a7;
}
.bedroom-scene.wall-style-2 .bedroom-wall {
    background: radial-gradient(circle at 16% 28%, rgba(255,248,211,.85) 0 1.5%, transparent 1.8%), radial-gradient(circle at 72% 22%, rgba(235,111,150,.5) 0 2.2%, transparent 2.5%), radial-gradient(circle at 38% 54%, rgba(255,248,211,.85) 0 1.4%, transparent 1.7%), #eeb6cc;
}
.bedroom-scene.yellow-theme.wall-style-2 .bedroom-wall {
    background: radial-gradient(circle at 16% 28%, rgba(255,252,222,.9) 0 1.5%, transparent 1.8%), radial-gradient(circle at 72% 22%, rgba(239,183,63,.55) 0 2.2%, transparent 2.5%), radial-gradient(circle at 38% 54%, rgba(255,252,222,.9) 0 1.4%, transparent 1.7%), #f2d477;
}
.bedroom-scene.wall-style-3 .bedroom-wall {
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 8%, transparent 8% 18%), linear-gradient(135deg, #dca0cc, #f9d3b7 52%, #a7d8df);
}
.bedroom-scene.yellow-theme.wall-style-3 .bedroom-wall {
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 8%, transparent 8% 18%), linear-gradient(135deg, #efc65b, #f7e4a7 52%, #9fcee0);
}
.bedroom-scene.wall-style-4 .bedroom-wall {
    background: radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.8) 0 5%, transparent 5.5%), radial-gradient(ellipse at 75% 42%, rgba(255,255,255,.75) 0 6%, transparent 6.5%), #a5d5dc;
}
.bedroom-scene.yellow-theme.wall-style-4 .bedroom-wall {
    background: radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.8) 0 5%, transparent 5.5%), radial-gradient(ellipse at 75% 42%, rgba(255,255,255,.75) 0 6%, transparent 6.5%), #b6dce1;
}
.dot-one { left: 12%; top: 16%; }
.dot-two { left: 48%; top: 31%; }
.dot-three { right: 12%; top: 13%; }
.dot-four { right: 36%; top: 52%; }

.bed {
    position: absolute;
    z-index: 5;
    left: 7%;
    bottom: 15%;
    width: 36%;
    height: 25%;
    border: 0.7rem solid #8b5c43;
    border-radius: 1.3rem 1.3rem 0.6rem 0.6rem;
    background: #f9ecd1;
    box-shadow: 0 1rem rgba(74, 55, 48, 0.14);
}

.bed::before {
    position: absolute;
    content: "";
    left: -0.7rem;
    top: -70%;
    width: 18%;
    height: 150%;
    border-radius: 1.8rem 1.8rem 0 0;
    background: #a86c4b;
}

.bed-pillow {
    position: absolute;
    left: 10%;
    top: 8%;
    width: 26%;
    height: 45%;
    border-radius: 42%;
    background: var(--cream);
}

.bed-blanket {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 65%;
    height: 82%;
    border-radius: 2rem 0.8rem 0.2rem 0;
    background: var(--coral);
}

.pink-theme .bed-blanket { background: #df7098; }
.yellow-theme .bed-blanket { background: #e6b64c; }
.bedroom-scene.sheet-style-1 .bed-blanket { background: repeating-linear-gradient(90deg,#f5d16b 0 24%,#df7098 24% 48%); }
.bedroom-scene.sheet-style-2 .bed-blanket { background: radial-gradient(circle,#fff 0 12%,transparent 13%) 0 0 / 1.2rem 1.2rem,#72b6c0; }
.bedroom-scene.sheet-style-3 .bed-blanket { background: repeating-linear-gradient(45deg,#86b474 0 18%,#e9f0b8 18% 36%); }
.bedroom-scene.sheet-style-4 .bed-blanket { background: #9778b6; }

.window {
    position: absolute;
    z-index: 4;
    right: 10%;
    top: 10%;
    width: 22%;
    height: 28%;
    border: 0.75rem solid var(--cream);
    border-radius: 45% 45% 0.7rem 0.7rem;
    overflow: hidden;
    background: #99dce2;
    box-shadow: var(--soft-shadow);
}

.window-view {
    position: absolute;
    inset: 58% 0 0;
    background: #7fbd6c;
}

.pink-theme .window { background: #8fd4df; }
.pink-theme .window-view { background: #74b66f; }
.yellow-theme .window { background: #80c9d4; }
.yellow-theme .window-view { background: #76ae65; }

.window-cross {
    position: absolute;
    background: var(--cream);
}

.window-cross-one { left: 47%; top: 0; width: 6%; height: 100%; }
.window-cross-two { left: 0; top: 48%; width: 100%; height: 7%; }

.room-rug {
    position: absolute;
    z-index: 3;
    left: 36%;
    bottom: 3%;
    width: 39%;
    height: 22%;
    border-radius: 50%;
    background: #e9ba68;
    box-shadow: inset 0 0 0 0.65rem rgba(255, 247, 232, 0.35);
}

.pink-theme .room-rug { background: #e99ab4; }
.yellow-theme .room-rug { background: #e5bd58; }
.bedroom-scene.rug-style-1 .room-rug { background: repeating-radial-gradient(circle,#e5bd58 0 24%,#fff0b5 24% 45%); }
.bedroom-scene.rug-style-2 .room-rug { background: repeating-radial-gradient(circle,#72b6c0 0 20%,#f2d36f 20% 40%); }
.bedroom-scene.rug-style-3 .room-rug { background: repeating-radial-gradient(circle,#7eaf73 0 20%,#f6e8b5 20% 40%); }
.bedroom-scene.rug-style-4 .room-rug { background: repeating-radial-gradient(circle,#9d7cbe 0 20%,#f2a0c1 20% 40%); }

.makeup-stand { position:absolute; z-index:7; left:53%; bottom:9%; width:15%; height:27%; padding:0; border:0; background:transparent; touch-action:manipulation; transition:transform 150ms ease; }
.makeup-stand:hover,.makeup-stand:focus-visible { transform:translateY(-.35rem) rotate(-2deg); }.makeup-mirror{position:absolute;left:20%;top:0;width:60%;height:58%;border:.42rem solid #b78562;border-radius:50% 50% 42% 42%;background:linear-gradient(135deg,#d8f1ef,#91c8d0);box-shadow:inset .25rem .2rem rgba(255,255,255,.62);}.makeup-mirror::after{position:absolute;content:"";left:44%;top:100%;width:13%;height:45%;background:#a86f54;}.makeup-seat{position:absolute;left:8%;right:8%;bottom:0;height:28%;border-radius:.65rem;background:#df7d9e;box-shadow:0 .36rem #a86658;}

.bedside-table {
    position: absolute;
    z-index: 6;
    right: 17%;
    bottom: 20%;
    width: 12%;
    height: 19%;
    border-radius: 0.5rem;
    background: #ac6e49;
    box-shadow: 0 0.8rem rgba(69, 47, 42, 0.17);
}

.bedside-table::before,
.bedside-table::after {
    position: absolute;
    content: "";
    bottom: -25%;
    width: 12%;
    height: 28%;
    background: #754a38;
}

.bedside-table::before { left: 14%; }
.bedside-table::after { right: 14%; }

.bedside-table span {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 42%;
    height: 8%;
    border-radius: 99px;
    background: #80513b;
}

.wall-shelf {
    position: absolute;
    z-index: 5;
    left: 34%;
    top: 37%;
    width: 19%;
    height: 3%;
    border-radius: 99px;
    background: #a46647;
    box-shadow: 0 0.55rem #754833;
}

.bedroom-poster {
    position: absolute;
    z-index: 6;
    left: 15%;
    top: 39%;
    width: 10%;
    height: 19%;
    padding: .28rem;
    border: .3rem solid #a76c4e;
    border-radius: .28rem;
    background: #f5d098;
    box-shadow: .22rem .35rem rgba(85,55,48,.16);
    transform: rotate(-3deg);
}
.poster-paper { position: absolute; inset: .28rem; border-radius: .12rem; background: #fff5d8; }
.poster-picture { position: absolute; left: 27%; top: 24%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #e97891; box-shadow: 0 .7rem 0 -.35rem #e97891, .62rem .32rem 0 -.32rem #e97891, -.62rem .32rem 0 -.32rem #e97891; }
.poster-style-1 .bedroom-poster { background: #d58db0; transform: rotate(2deg); }
.poster-style-1 .poster-paper { background: #fff4bd; }
.poster-style-1 .poster-picture { left: 24%; top: 22%; width: 52%; border-radius: 0; background: #f1c653; clip-path: polygon(50% 0,62% 35%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 35%); box-shadow: none; }
.poster-style-2 .bedroom-poster { background: #76afbd; transform: rotate(-1deg); }
.poster-style-2 .poster-paper { background: #e7f5f1; }
.poster-style-2 .poster-picture { left: 19%; top: 20%; width: 62%; border-radius: 50% 50% 10% 10%; background: #7ebd70; box-shadow: 0 .65rem 0 -.28rem #7ebd70, .45rem .3rem 0 -.3rem #f1c553, -.45rem .3rem 0 -.3rem #f1c553; }
.poster-style-3 .bedroom-poster { background: #a583bf; transform: rotate(3deg); }
.poster-style-3 .poster-paper { background: #f4eaff; }
.poster-style-3 .poster-picture { left: 24%; top: 23%; width: 52%; border-radius: 50%; background: #9782bd; box-shadow: -.32rem .1rem 0 .03rem #f4eaff, .42rem .5rem 0 -.25rem #f0c55a; }

.resident-mark {
    position: absolute;
    z-index: 8;
    left: 4%;
    top: 8%;
    width: 9%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 247, 232, 0.72);
}

.resident-initial {
    position: absolute;
    inset: 8%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff8e8;
    background: #db688f;
    font-size: clamp(1.4rem, 4vw, 3rem);
    line-height: 1;
    text-shadow: 0 .15rem rgba(88,52,62,.2);
}

.yellow-theme .resident-initial { color: #775538; background: #efc34e; }

.bedroom-doodle-station {
    position: absolute;
    z-index: 12;
    left: 30%;
    top: 4%;
    width: 34%;
    height: 31%;
}

.bedroom-name-sign {
    position: absolute;
    inset: 0 0 29%;
    overflow: hidden;
    border: .45rem solid #ae744f;
    border-radius: 1.1rem;
    background: rgba(255,249,224,.94);
    box-shadow: 0 .55rem rgba(93,59,51,.16);
    transform: rotate(-1deg);
}

.name-sign-title {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(205,83,124,.52);
    font-size: clamp(1.65rem, 5vw, 4rem);
    letter-spacing: .12em;
    line-height: 1;
}

.yellow-theme .name-sign-title { color: rgba(204,144,35,.58); }

.name-doodle-canvas {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.doodle-tools {
    position: absolute;
    left: 1%;
    right: 1%;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.25rem, .7vw, .55rem);
    height: 26%;
}

.doodle-color,
.doodle-undo,
.doodle-toolbox-toggle,
.doodle-width {
    position: relative;
    width: clamp(2.45rem, 12%, 3.35rem);
    aspect-ratio: 1;
    padding: 0;
    border: .2rem solid rgba(255,255,255,.94);
    border-radius: 50%;
    background: rgba(255,248,224,.92);
    box-shadow: 0 .28rem rgba(93,62,55,.18);
    touch-action: manipulation;
}

.doodle-color span { position: absolute; inset: 18%; border-radius: 50%; }
.doodle-berry span { background: #df5f87; }
.doodle-sun span { background: #efbd3f; }
.doodle-sky span { background: #4aa9bd; }
.doodle-leaf span { background: #68a85d; }
.doodle-plum span { background: #8e63a4; }
.doodle-color.is-selected { box-shadow: 0 0 0 .18rem #715244, 0 .3rem rgba(93,62,55,.18); }
.doodle-toolbox-toggle span { position:absolute; left:25%; top:25%; width:50%; height:50%; border:.2rem solid #805a49; border-radius:.3rem; background:linear-gradient(135deg,#df7199 0 34%,#efbd3f 34% 65%,#68a85d 65%); transform:rotate(18deg); }.doodle-toolbox-toggle.is-selected{box-shadow:0 0 0 .18rem #715244,0 .3rem rgba(93,62,55,.18)}
.doodle-toolbox { position:absolute; z-index:4; left:-12%; right:-12%; bottom:26%; padding:.45rem; border:.25rem solid #8a684e; border-radius:.8rem; background:rgba(255,248,224,.97); box-shadow:0 .35rem rgba(93,62,55,.16); }.doodle-color-grid,.doodle-widths{display:flex;justify-content:center;gap:.28rem;}.doodle-color-grid{flex-wrap:wrap;}.doodle-toolbox .doodle-color,.doodle-width{width:clamp(2rem,10%,2.8rem);}.doodle-orange span{background:#ed9448}.doodle-aqua span{background:#5ab8b8}.doodle-ink span{background:#5a4a56}.doodle-width span{position:absolute;left:50%;top:50%;border-radius:50%;background:#805a49;transform:translate(-50%,-50%);}.doodle-width-0 span{width:18%;aspect-ratio:1}.doodle-width-1 span{width:34%;aspect-ratio:1}.doodle-width-2 span{width:52%;aspect-ratio:1}.doodle-width.is-selected{box-shadow:0 0 0 .18rem #715244,0 .3rem rgba(93,62,55,.18)}
.doodle-color:hover,
.doodle-color:focus-visible,
.doodle-undo:hover,
.doodle-undo:focus-visible { filter: brightness(1.06); }
.doodle-undo:disabled { opacity: .38; }
.doodle-undo span { position: absolute; left: 24%; top: 24%; width: 52%; height: 52%; border: .25rem solid #8a684e; border-right-color: transparent; border-radius: 50%; }
.doodle-undo span::before { position: absolute; content: ""; left: -35%; top: -18%; width: 48%; aspect-ratio: 1; background: #8a684e; clip-path: polygon(0 50%,100% 0,100% 100%); }

.placed-world-object,
.carried-world-object {
    position: absolute;
    z-index: 22;
    width: clamp(3.6rem, 8%, 6.2rem);
    aspect-ratio: 2 / 3;
    padding: 0;
    background: transparent;
    filter: drop-shadow(0 0.4rem 0.15rem rgba(64, 53, 48, 0.18));
}

.placed-world-object {
    transform: translate(-50%, -75%);
    transition: transform 150ms ease, filter 150ms ease;
}

.placed-world-object:hover,
.placed-world-object:focus-visible {
    transform: translate(-50%, -82%) scale(1.08) rotate(-2deg);
}

.carried-world-object {
    left: 46%;
    bottom: 2%;
    z-index: 40;
    touch-action: none;
    will-change: transform;
}

.carried-world-object.is-armed {
    filter: drop-shadow(0 0 0.7rem #fff4a8) drop-shadow(0 0.45rem 0.15rem rgba(64, 53, 48, 0.18));
}

.carried-world-object.is-dragging {
    z-index: 80;
    animation: none;
    cursor: grabbing;
}

.carried-world-object.soft-return {
    animation: soft-return 380ms ease;
}

@keyframes soft-return {
    25% { transform: translateX(-0.3rem) scale(0.95); }
    55% { transform: translateX(0.3rem) scale(1.03); }
}

.placement-target {
    position: absolute;
    z-index: 20;
    padding: 0;
    background: transparent;
    opacity: 0.68;
    transition: opacity 140ms ease, filter 140ms ease, transform 140ms ease;
}

.placement-target:not(.is-ready) {
    pointer-events: none;
}

.shelf-target:not(.is-ready) {
    opacity: 0;
}

.placement-target.is-ready {
    z-index: 65;
    opacity: 1;
    filter: drop-shadow(0 0 0.75rem #fff19b);
    animation: target-glow 900ms ease-in-out infinite alternate;
}

.vase-target {
    left: 69%;
    top: 39%;
    width: 10%;
    height: 23%;
}

.shelf-target {
    left: 37%;
    top: 27%;
    width: 12%;
    height: 14%;
}

@keyframes target-glow {
    to { filter: drop-shadow(0 0 1.1rem #fff19b); }
}

.vase {
    position: absolute;
    left: 30%;
    bottom: 0;
    width: 40%;
    height: 44%;
    border-radius: 20% 20% 48% 48%;
    background: #72aab6;
    clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
}

.empty-vase {
    z-index: 12;
    left: 73%;
    bottom: 40%;
    width: 4%;
    height: 10%;
}

.shelf-spot {
    position: absolute;
    left: 32%;
    bottom: 6%;
    width: 36%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 241, 155, 0.7);
}

/* Flower art */

.flower-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.flower-stem {
    fill: none;
    stroke: #4f9955;
    stroke-width: 8;
    stroke-linecap: round;
}

.flower-leaf { fill: #67ad5d; }
.seed { fill: #8f5b38; }
.petal { fill: #f39ab4; }
.petal-two,
.petal-four { fill: #ee829f; }
.flower-center { fill: #f3c343; stroke: #d69d32; stroke-width: 3; }

.flower-head {
    transform-origin: 50px 43px;
    animation: flower-sway 2.4s ease-in-out infinite alternate;
}

@keyframes flower-sway {
    to { transform: rotate(3deg); }
}

/* Carry pocket outside bedrooms */

.carry-pocket {
    position: fixed;
    z-index: 45;
    left: 50%;
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    width: clamp(5.2rem, 10vw, 7.6rem);
    height: clamp(4.8rem, 9vw, 6.8rem);
    transform: translateX(-50%);
    pointer-events: none;
}

.pocket-fabric {
    position: absolute;
    z-index: 2;
    inset: 38% 0 0;
    border: 0.35rem solid #f3d29a;
    border-radius: 0.6rem 0.6rem 45% 45%;
    background: #c38358;
    box-shadow: var(--soft-shadow);
}

.pocket-object {
    position: absolute;
    z-index: 1;
    left: 26%;
    top: -20%;
    width: 48%;
    height: 100%;
}

/* Connected interior cutaway */

.house-interior-scene {
    background: linear-gradient(#bce7e8 0 18%, #82be70 18% 100%);
}

.cutaway-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 90% 8%, #f5ca50 0 5%, rgba(245, 202, 80, 0.2) 5.3% 7.3%, transparent 7.6%),
        linear-gradient(#bce7e8 0 70%, #76b969 70%);
}

.cutaway-house {
    position: absolute;
    z-index: 2;
    left: 13%;
    right: 13%;
    top: 10%;
    bottom: 11%;
    border: 0.7rem solid #8c5942;
    border-top: 0;
    border-radius: 1.2rem 1.2rem 0.6rem 0.6rem;
    background: #f4c97e;
    box-shadow: 0 1rem rgba(56, 92, 56, 0.18);
}

.cutaway-roof {
    position: absolute;
    z-index: 1;
    left: -5%;
    right: -5%;
    top: -13%;
    height: 27%;
    background: #e86c59;
    clip-path: polygon(50% 0, 100% 82%, 95% 100%, 50% 26%, 5% 100%, 0 82%);
}

.cutaway-chimney {
    position: absolute;
    right: 12%;
    top: -9%;
    width: 7%;
    height: 18%;
    border-radius: 0.3rem 0.3rem 0 0;
    background: #9f5048;
}

.cutaway-room {
    position: absolute;
    z-index: 7;
    padding: 0;
    overflow: hidden;
    border: 0.34rem solid #8c5942;
    background: #f7ddb1;
    box-shadow: inset 0 -0.6rem rgba(93, 60, 51, 0.1);
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
    touch-action: manipulation;
}

.cutaway-room:hover,
.cutaway-room:focus-visible {
    z-index: 16;
    filter: brightness(1.06);
    transform: scale(1.035);
    box-shadow: inset 0 -0.6rem rgba(93, 60, 51, 0.1), 0 0 1.2rem rgba(255, 244, 172, 0.9);
}

.cutaway-room:active { transform: scale(0.98); }

.cutaway-sun-bedroom { left: 14.4%; top: 28%; width: 24%; height: 25%; background: linear-gradient(#f5c9d8 0 64%, #ca8953 64%); }
.cutaway-bathroom { left: 38%; top: 28%; width: 23.7%; height: 25%; background: linear-gradient(#c9e8ea 0 64%, #e5f0e7 64%); }
.cutaway-moon-bedroom { left: 61.3%; top: 28%; width: 24.3%; height: 25%; background: linear-gradient(#f8e3a7 0 64%, #ca8953 64%); }
.cutaway-garage { left: 14.4%; top: 52.3%; width: 24%; height: 30%; background: linear-gradient(#9eacad 0 65%, #727d7c 65%); }
.cutaway-playpen { left: 38%; top: 52.3%; width: 23.7%; height: 30%; background: linear-gradient(#f3d8b5 0 64%, #ce9563 64%); }
.cutaway-kitchen { left: 61.3%; top: 52.3%; width: 24.3%; height: 30%; background: linear-gradient(#f5dab0 0 64%, #e8c98f 64%); }
.cutaway-toy-closet { left: 42%; top: 13.2%; width: 16%; height: 15.5%; border-radius: 50% 50% 0 0; background: #66597c; }

.mini-bed {
    position: absolute;
    left: 10%;
    bottom: 10%;
    width: 42%;
    height: 32%;
    border: 0.2rem solid #89573f;
    border-radius: 0.5rem;
    background: #fff2cf;
}

.mini-bed::after { position: absolute; content: ""; right: 0; top: 0; bottom: 0; width: 56%; border-radius: 0.3rem; }
.mini-sun-bed::after { background: #df7098; }
.mini-moon-bed::after { background: #e6b64c; }

.mini-room-name {
    position: absolute;
    right: 8%;
    top: 12%;
    padding: .12rem .28rem;
    border: .11rem solid rgba(255,255,255,.75);
    border-radius: .3rem;
    color: #8b5267;
    background: rgba(255,248,222,.7);
    font-size: clamp(.48rem, 1.1vw, .8rem);
    line-height: 1;
    letter-spacing: .04em;
}
.cutaway-moon-bedroom .mini-room-name { color: #80612e; }

.mini-tub { position: absolute; left: 17%; right: 17%; bottom: 12%; height: 32%; overflow: hidden; border: 0.28rem solid #fff7de; border-radius: 0.5rem 0.5rem 2rem 2rem; background: #d9e5df; box-shadow: inset 0 -.35rem rgba(91,112,108,.12); }
.mini-bath-water { position: absolute; left: 0; right: 0; bottom: 0; height: 78%; background: linear-gradient(#a9e7eb, #68b9c7); border-radius: 42% 42% 1.5rem 1.5rem; }
.mini-bubbles i { position: absolute; border: 0.15rem solid #fff; border-radius: 50%; background: rgba(255,255,255,.22); }
.mini-bubbles i:nth-child(1) { left: 27%; top: 21%; width: 12%; aspect-ratio: 1; }
.mini-bubbles i:nth-child(2) { left: 44%; top: 13%; width: 16%; aspect-ratio: 1; }
.mini-bubbles i:nth-child(3) { left: 62%; top: 25%; width: 10%; aspect-ratio: 1; }

.mini-workbench { position: absolute; right: 7%; top: 23%; width: 43%; height: 16%; border-radius: 0.35rem; background: #a86b49; box-shadow: 0 0.42rem #714a3a; }
.mini-car-reflection { position: absolute; z-index: 4; width: 24%; aspect-ratio: 8 / 5; transform: translate(-50%, -50%); filter: drop-shadow(0 .18rem rgba(55,43,40,.28)); }
.mini-car-reflection .world-object-art { width: 100%; height: 100%; }
.cutaway-garage.is-ready .mini-car-reflection { filter: drop-shadow(0 0 0.5rem #ffe878); }

.mini-play-rug { position: absolute; left: 12%; right: 12%; bottom: 7%; height: 42%; border-radius: 50%; background: repeating-radial-gradient(circle, #93c5c1 0 16%, #f3cd6a 16% 31%, #e88170 31% 45%); opacity: .78; }
.cutaway-play-object,
.cutaway-object { position: absolute; width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 0.18rem rgba(66,48,44,.22)); }
.cutaway-object { width: 11%; }
.cutaway-play-object:has(.toy-car-art),
.cutaway-object:has(.toy-car-art) { width: 24%; aspect-ratio: 8 / 5; }
.cutaway-play-object:has(.teddy-art),
.cutaway-object:has(.teddy-art),
.cutaway-play-object:has(.plush-teddy-art),
.cutaway-object:has(.plush-teddy-art) { width: 16%; }

.mini-counter { position: absolute; left: 7%; right: 7%; top: 38%; height: 13%; border-radius: 0.4rem; background: #fff0cb; border-bottom: 0.35rem solid #b87150; }
.mini-soup-pot { position: absolute; left: 39%; top: 27%; width: 24%; height: 31%; border-radius: 0.4rem 0.4rem 1rem 1rem; background: #6f9faa; box-shadow: inset 0 -0.5rem #56818c; }
.mini-steam { position: absolute; left: 50%; top: 10%; width: 7%; height: 20%; border-left: 0.18rem solid #fff; border-radius: 50%; animation: steam-float 1.4s ease-in-out infinite alternate; }
.mini-dining-table { position: absolute; left: 13%; right: 13%; bottom: 10%; height: 16%; border-radius: 50%; background: #b87952; box-shadow: inset 0 -.25rem rgba(91,53,38,.18); }
.mini-dining-table i { position: absolute; top: 56%; width: 8%; height: 115%; border-radius: 0 0 .25rem .25rem; background: #8a583f; }
.mini-dining-table i:first-child { left: 22%; }
.mini-dining-table i:last-child { right: 22%; }
.mini-kitchen-table-setting { position: absolute; z-index: 3; left: 18%; right: 18%; bottom: 17%; height: 14%; pointer-events: none; }
.mini-served-bowl { position: absolute; left: 37%; top: 12%; width: 27%; aspect-ratio: 1.65; border: .15rem solid #fff6dc; border-radius: 50%; background: radial-gradient(ellipse at center, #dd7653 0 42%, #f7e8c4 45% 100%); box-shadow: 0 .12rem rgba(96,60,44,.2); }
.mini-table-drink { position: absolute; top: 9%; width: 9%; height: 55%; border: .1rem solid rgba(255,255,255,.8); border-radius: .15rem .15rem .3rem .3rem; box-shadow: 0 .1rem rgba(96,60,44,.18); }
.mini-table-drink-milk { left: 18%; background: #f7f2dd; }
.mini-table-drink-juice { right: 17%; background: #e8a846; }
.mini-table-drink-coffee { right: 3%; background: #85563f; }

.mini-closet-shelf { position: absolute; left: 8%; right: 8%; bottom: 24%; height: 6%; border-radius: 99px; background: #b77a53; }
.mini-star-art { position: absolute; left: 38%; top: 18%; width: 24%; aspect-ratio: 1; background: #f2c94e; clip-path: polygon(50% 0,62% 35%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 35%); }
.cutaway-toy-closet.has-finished-art { box-shadow: inset 0 -0.6rem rgba(93,60,51,.1), 0 0 0.8rem #ffe98e; }

.cutaway-outside {
    position: absolute;
    z-index: 9;
    padding: 0;
    transition: transform 150ms ease, filter 150ms ease;
}

.cutaway-outside:hover,
.cutaway-outside:focus-visible { transform: translateY(-0.3rem) scale(1.03); filter: brightness(1.06); }

.cutaway-front-door { left: 4%; bottom: 13%; width: 8.5%; height: 24%; border: 0.35rem solid #fff0c7; border-radius: 48% 48% 0.3rem 0.3rem; background: #d86f52; box-shadow: var(--soft-shadow); }
.cutaway-front-door span { position: absolute; left: 22%; right: 22%; bottom: 0; height: 68%; border-radius: 50% 50% 0 0; background: #fff2d1; }
.cutaway-front-door span::after { position: absolute; content: ""; right: 10%; top: 46%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: #e2af4e; }

.cutaway-backyard-door { right: 2.5%; bottom: 12%; width: 9.5%; height: 23%; border: 0.35rem solid #fff0c7; border-radius: 0.7rem 0.7rem 0.2rem 0.2rem; background: repeating-linear-gradient(90deg, #aa6b43 0 19%, #74462f 19% 24%); box-shadow: var(--soft-shadow); }
.cutaway-backyard-door i { position: absolute; bottom: 66%; width: 19%; height: 49%; border-radius: 90% 10%; background: #4d9556; transform-origin: bottom; }
.cutaway-backyard-door i:nth-child(1) { left: 11%; transform: rotate(-25deg); }
.cutaway-backyard-door i:nth-child(2) { left: 41%; height: 65%; }
.cutaway-backyard-door i:nth-child(3) { right: 10%; transform: rotate(25deg); }
.cutaway-foundation { position: absolute; z-index: 5; left: 13%; right: 13%; bottom: 8%; height: 4%; border-radius: 0 0 1rem 1rem; background: #8c5942; }

/* Physical room-to-room connections */

.room-doorways { position: absolute; z-index: 55; inset: 0; pointer-events: none; }
.room-doorway { position: absolute; padding: 0; pointer-events: auto; background: transparent; transition: transform 150ms ease, filter 150ms ease; touch-action: manipulation; }
.room-doorway:hover,
.room-doorway:focus-visible { filter: brightness(1.08) drop-shadow(0 0 0.55rem rgba(255,242,160,.8)); }
.room-doorway:active { transform: scale(.94); }

.doorway-left,
.doorway-right { top: 43%; width: 8.5%; height: 35%; }
.doorway-left { left: -0.5%; }
.doorway-right { right: -0.5%; }
.doorway-up,
.doorway-down { left: auto; right: 11%; width: 14%; height: 14%; }
.doorway-up { top: -0.5%; }
.doorway-down { bottom: -0.5%; }

.doorway-frame { position: absolute; inset: 0; border: 0.34rem solid rgba(255,247,222,.93); background: rgba(106,76,70,.32); box-shadow: inset 0 -0.5rem rgba(57,45,48,.12), var(--soft-shadow); }
.doorway-left .doorway-frame { border-left: 0; border-radius: 0 55% 0 0; }
.doorway-right .doorway-frame { border-right: 0; border-radius: 55% 0 0 0; }
.doorway-up .doorway-frame { border-top: 0; border-radius: 0 0 45% 45%; background: repeating-linear-gradient(0deg, rgba(255,244,204,.75) 0 18%, rgba(126,89,67,.5) 18% 24%); }
.doorway-down .doorway-frame { border-bottom: 0; border-radius: 45% 45% 0 0; background: repeating-linear-gradient(0deg, rgba(126,89,67,.5) 0 18%, rgba(255,244,204,.75) 18% 24%); }

.doorway-clue { position: absolute; left: 25%; top: 38%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,247,226,.9); box-shadow: 0 0.2rem rgba(61,47,47,.18); }
.doorway-up .doorway-clue,
.doorway-down .doorway-clue { left: 35%; top: 20%; width: 30%; }
.doorway-clue::before,
.doorway-clue::after { position: absolute; content: ""; }

.room-clue-playpen .doorway-clue::before { left: 17%; bottom: 18%; width: 30%; aspect-ratio: 1; border-radius: .18rem; background: #74b5c1; box-shadow: 1rem -.35rem #e87665, 1.8rem .05rem #efc653; }
.room-clue-kitchen .doorway-clue::before { left: 27%; top: 40%; width: 46%; height: 31%; border-radius: .15rem .15rem .7rem .7rem; background: #e66f5c; }
.room-clue-kitchen .doorway-clue::after { left: 43%; top: 18%; width: 15%; height: 27%; border-left: .15rem solid #8ba7a2; border-radius: 50%; }
.room-clue-garage .doorway-clue::before { left: 43%; top: 17%; width: 15%; height: 67%; border-radius: 99px; background: #82959b; transform: rotate(40deg); }
.room-clue-backyard .doorway-clue::before { left: 34%; top: 17%; width: 31%; height: 62%; border-radius: 90% 10%; background: #63a363; transform: rotate(-24deg); }
.room-clue-exterior .doorway-clue::before { left: 25%; right: 25%; top: 21%; bottom: 12%; border-radius: 50% 50% .1rem .1rem; background: #df735c; }
.room-clue-sun .doorway-clue::before { inset: 27%; border-radius: 50%; background: #f2c64b; box-shadow: 0 -.42rem 0 -.29rem #f2c64b, 0 .42rem 0 -.29rem #f2c64b, .42rem 0 0 -.29rem #f2c64b, -.42rem 0 0 -.29rem #f2c64b; }
.room-clue-moon .doorway-clue::before { inset: 22%; border-radius: 50%; background: #f1df9c; }
.room-clue-moon .doorway-clue::after { left: 46%; top: 13%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: #927dac; }
.room-clue-bathroom .doorway-clue::before { left: 24%; top: 39%; width: 22%; aspect-ratio: 1; border: .15rem solid #78bdc7; border-radius: 50%; box-shadow: .85rem -.5rem 0 -.04rem #fff, 1.2rem .38rem 0 -.1rem #78bdc7; }
.room-clue-toy-closet .doorway-clue::before { inset: 19%; background: #efc64e; clip-path: polygon(50% 0,62% 35%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 35%); }

/* Freely movable room objects */

.loose-objects-layer {
    position: absolute;
    inset: 0;
    z-index: 25;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.loose-objects-layer button {
    pointer-events: auto;
}

.room-floor-target {
    left: 43%;
    top: 66%;
    width: clamp(4.5rem, 12%, 8rem);
    aspect-ratio: 1.8 / 1;
    border: .28rem dashed rgba(255,255,255,.95);
    border-radius: 50%;
    background: rgba(255,245,177,.22);
}

.movable-world-object,
.movable-world-object.placed-world-object,
.movable-world-object.playpen-world-object {
    position: absolute;
    right: auto;
    bottom: auto;
    width: clamp(3.5rem, 8%, 6rem);
    height: auto;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0.4rem 0.16rem rgba(58,48,46,.22));
    transition: filter 140ms ease;
    touch-action: none;
    will-change: transform;
}

.movable-world-object:hover,
.movable-world-object:focus-visible { transform: translate(-50%, -50%); filter: drop-shadow(0 0.55rem 0.2rem rgba(58,48,46,.3)); }
.movable-world-object.is-selected {
    border-radius: 24%;
    background: rgba(255,248,209,.28);
    box-shadow: 0 0 0 .22rem rgba(255,255,255,.96), 0 0 0 .48rem #f2c94f;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 .45rem .18rem rgba(58,48,46,.24));
}
.movable-world-object.is-dragging { cursor: grabbing; filter: drop-shadow(0 0.9rem 0.28rem rgba(58,48,46,.32)); transition: none; }
.movable-world-object.soft-return { animation: movable-soft-return 380ms ease; }
@keyframes movable-soft-return { 30% { transform: translate(-55%, -50%) scale(.95); } 65% { transform: translate(-45%, -50%) scale(1.03); } }

.object-carry-action {
    position: absolute;
    z-index: 72;
    width: clamp(3.15rem, 6.5%, 4.7rem);
    aspect-ratio: 1;
    padding: 0;
    border: .28rem solid rgba(255,255,255,.94);
    border-radius: 50%;
    background: #fff5cf;
    box-shadow: 0 0 0 .2rem rgba(121,84,67,.22), 0 .42rem 0 rgba(93,67,60,.18);
    transform: translate(-50%, -50%);
    touch-action: manipulation;
    animation: carry-choice-arrive 180ms ease-out;
}

.object-carry-action:hover,
.object-carry-action:focus-visible { transform: translate(-50%, -50%); filter: brightness(1.06); }

.object-style-action {
    position: absolute;
    z-index: 72;
    width: clamp(3.15rem, 6.5%, 4.7rem);
    aspect-ratio: 1;
    padding: 0;
    border: .28rem solid rgba(255,255,255,.94);
    border-radius: 50%;
    background: #f5e8ff;
    box-shadow: 0 0 0 .2rem rgba(121,84,67,.22), 0 .42rem 0 rgba(93,67,60,.18);
    transform: translate(-50%, -50%);
    touch-action: manipulation;
    animation: carry-choice-arrive 180ms ease-out;
}

.object-style-action:hover,
.object-style-action:focus-visible { transform: translate(-50%, -50%); filter: brightness(1.06); }

.style-choice-palette { position: absolute; inset: 17%; border-radius: 50%; background: #fff7e2; box-shadow: inset 0 0 0 .14rem #8a684e; }
.style-choice-palette i { position: absolute; width: 28%; aspect-ratio: 1; border-radius: 50%; }
.style-choice-palette i:nth-child(1) { left: 17%; top: 18%; background: #df5f87; }
.style-choice-palette i:nth-child(2) { right: 16%; top: 27%; background: #4aa9bd; }
.style-choice-palette i:nth-child(3) { left: 36%; bottom: 14%; background: #efbd3f; }

.carry-choice-hands {
    position: absolute;
    left: 15%;
    right: 15%;
    top: 48%;
    bottom: 10%;
}

.carry-choice-hands i {
    position: absolute;
    bottom: 0;
    width: 48%;
    height: 75%;
    border: .14rem solid #82553f;
    border-radius: 50% 50% 36% 36%;
    background: #dfa477;
}

.carry-choice-hands i:first-child { left: 0; transform: rotate(14deg); }
.carry-choice-hands i:last-child { right: 0; transform: rotate(-14deg); }

.carry-choice-arrow {
    position: absolute;
    left: 36%;
    top: 13%;
    width: 28%;
    height: 42%;
    background: #edbd43;
    clip-path: polygon(35% 0,65% 0,65% 48%,100% 48%,50% 100%,0 48%,35% 48%);
}

@keyframes carry-choice-arrive {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
}

.movable-world-object.movable-toy-car { width: clamp(6rem, 15%, 10rem); aspect-ratio: 8 / 5; }
.movable-world-object.movable-teddy { width: clamp(4.5rem, 10%, 7rem); aspect-ratio: 13 / 15; }
.movable-world-object.movable-star-art { width: clamp(4.2rem, 8%, 6.5rem); aspect-ratio: 13 / 14; }
.movable-world-object.movable-flower { width: clamp(3.4rem, 6.5%, 5.4rem); aspect-ratio: 2 / 3; }
.movable-world-object.movable-soft-ball { width: clamp(4rem, 9%, 6.8rem); }
.movable-world-object[class*="movable-block-"] { width: clamp(3.7rem, 8.5%, 6.4rem); }
.movable-world-object.movable-bedroom-cushion { width: clamp(5.2rem, 11%, 8rem); aspect-ratio: 13 / 11; }
.movable-world-object.movable-plush-bunny,
.movable-world-object.movable-plush-teddy { width: clamp(4.4rem, 9%, 6.8rem); aspect-ratio: 12 / 15.5; }
.movable-world-object.movable-bedroom-lamp { width: clamp(4.2rem, 8.5%, 6.5rem); aspect-ratio: 12 / 15.5; }

.block-face { stroke: rgba(91,58,53,.35); stroke-width: 4; }
.block-coral .block-face { fill: #e87362; }
.block-blue .block-face { fill: #73b6c1; }
.block-yellow .block-face { fill: #efc653; }
.block-green .block-face { fill: #8dad69; }
.block-highlight { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 8; stroke-linecap: round; }
.block-dot { fill: rgba(255,247,222,.55); }
.ball-base { fill: #efc755; stroke: #9a6b48; stroke-width: 4; }
.ball-panel-one { fill: #e87362; }
.ball-panel-two { fill: #73b6c1; }
.ball-shine { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 7; stroke-linecap: round; }
.cushion-body { fill: #df7199; stroke: #99536f; stroke-width: 5; }
.cushion-piping { fill: none; stroke: rgba(255,255,255,.65); stroke-width: 4; stroke-dasharray: 5 5; }
.cushion-button { fill: #f7d56a; stroke: rgba(113,70,61,.35); stroke-width: 3; }
.cushion-stitch { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 5; stroke-linecap: round; }
.cushion-art.object-style-1 .cushion-body { fill: #edbd4f; stroke: #9e7733; }
.cushion-art.object-style-2 .cushion-body { fill: #64b0bf; stroke: #477b86; }
.cushion-art.object-style-3 .cushion-body { fill: #7cad6d; stroke: #5d7f55; }.cushion-art.object-style-4 .cushion-body { fill: #9a78b8; stroke: #74578c; }
.bunny-ear,
.bunny-body,
.bunny-head,
.bunny-arm,
.bunny-foot { fill: #f4e8d4; stroke: #9d7464; stroke-width: 4; }
.bunny-ear-inner { fill: #e993ae; }
.bunny-eye { fill: #54444a; }
.bunny-face { fill: none; stroke: #714e50; stroke-width: 4; stroke-linecap: round; }
.bunny-bow { fill: #df668d; stroke: #9c4c68; stroke-width: 3; }
.bunny-art.object-style-1 .bunny-ear-inner,
.bunny-art.object-style-1 .bunny-bow { fill: #e8b83f; stroke: #a77d2b; }
.bunny-art.object-style-2 .bunny-ear-inner,
.bunny-art.object-style-2 .bunny-bow { fill: #5facc0; stroke: #447987; }
.bunny-art.object-style-3 .bunny-ear-inner,.bunny-art.object-style-3 .bunny-bow { fill:#75af70;stroke:#588152; }.bunny-art.object-style-4 .bunny-ear-inner,.bunny-art.object-style-4 .bunny-bow { fill:#9c75ba;stroke:#71558a; }
.plush-teddy-body,
.plush-teddy-head,
.plush-teddy-ear { fill: #d7a476; stroke: #8e614c; stroke-width: 4; }
.plush-teddy-muzzle { fill: #f0ca9f; }
.plush-teddy-eye { fill: #55444a; }
.plush-teddy-face { fill: none; stroke: #704b43; stroke-width: 4; stroke-linecap: round; }
.plush-teddy-bow { fill: #df668d; stroke: #9c4c68; stroke-width: 3; }
.plush-teddy-art.object-style-1 .plush-teddy-bow { fill: #e8b83f; stroke: #a77d2b; }
.plush-teddy-art.object-style-2 .plush-teddy-bow { fill: #5facc0; stroke: #447987; }
.plush-teddy-art.object-style-3 .plush-teddy-bow { fill:#75af70;stroke:#588152; }.plush-teddy-art.object-style-4 .plush-teddy-bow { fill:#9c75ba;stroke:#71558a; }
.lamp-shade { fill: #e4779a; stroke: #8c5d65; stroke-width: 4; }
.lamp-shade-trim { fill: #f3c95a; stroke: #8c5d65; stroke-width: 3; }
.lamp-stem,
.lamp-base { fill: #9b6f51; }
.lamp-star { fill: #fff1a6; }
.lamp-art.object-style-1 .lamp-shade { fill: #efc44d; }
.lamp-art.object-style-1 .lamp-shade-trim { fill: #68abb8; }
.lamp-art.object-style-2 .lamp-shade { fill: #7baf70; }
.lamp-art.object-style-2 .lamp-shade-trim { fill: #9a6caf; }
.lamp-art.object-style-3 .lamp-shade { fill:#75af70; }.lamp-art.object-style-3 .lamp-shade-trim{fill:#efc44d}.lamp-art.object-style-4 .lamp-shade{fill:#9a6caf}.lamp-art.object-style-4 .lamp-shade-trim{fill:#e788a7}
.soft-ball-art.object-style-1 .ball-base{fill:#f0c34d}.soft-ball-art.object-style-1 .ball-panel-one{fill:#e56f5c}.soft-ball-art.object-style-1 .ball-panel-two{fill:#75b47a}.soft-ball-art.object-style-2 .ball-base{fill:#67b1bd}.soft-ball-art.object-style-2 .ball-panel-one{fill:#9c7bb9}.soft-ball-art.object-style-2 .ball-panel-two{fill:#f1c95b}.soft-ball-art.object-style-3 .ball-base{fill:#79ad70}.soft-ball-art.object-style-3 .ball-panel-one{fill:#f1ca5b}.soft-ball-art.object-style-3 .ball-panel-two{fill:#e87b92}.soft-ball-art.object-style-4 .ball-base{fill:#9e7bbc}.soft-ball-art.object-style-4 .ball-panel-one{fill:#ec9fbb}.soft-ball-art.object-style-4 .ball-panel-two{fill:#6bb7b5}

.exterior-front-door { left: 44%; top: 58%; width: 11%; height: 23%; background: #d86f52; }
.mini-house-cutaway { position: absolute; left: 25%; right: 25%; top: 28%; bottom: 18%; border: .18rem solid #fff2ce; background: linear-gradient(90deg, transparent 48%, #fff2ce 48% 53%, transparent 53%), linear-gradient(transparent 48%, #fff2ce 48% 54%, transparent 54%); }

.mini-cutaway::after { left: 18%; bottom: 12%; width: 64%; height: 52%; border: .12rem solid #fff7e5; background: linear-gradient(90deg, transparent 47%, #fff7e5 47% 54%, transparent 54%), linear-gradient(transparent 45%, #fff7e5 45% 53%, transparent 53%); }

/* Whole-house portals */

.world-door {
    top: 41%;
    width: 9%;
    height: 18%;
    border-width: 0.28rem;
}

.sun-door { left: 36%; }
.moon-door { left: 47%; }

.house-portal {
    position: absolute;
    z-index: 12;
    padding: 0;
    border: 0.28rem solid rgba(255, 240, 199, 0.94);
    box-shadow: inset 0 -0.45rem rgba(69, 43, 48, 0.12), var(--soft-shadow);
    transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
    touch-action: manipulation;
}

.house-portal:hover,
.house-portal:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-0.25rem) scale(1.03);
}

.house-portal:active {
    transform: translateY(0.15rem) scale(0.95);
}

.attic-portal {
    left: 44.7%;
    top: 25.5%;
    width: 7.5%;
    aspect-ratio: 1;
    border-radius: 50% 50% 0.6rem 0.6rem;
    background: #865b96;
}

.portal-star {
    position: absolute;
    inset: 20%;
    background: #f5d46b;
    clip-path: polygon(50% 0, 62% 34%, 98% 36%, 69% 57%, 79% 93%, 50% 72%, 21% 93%, 31% 57%, 2% 36%, 38% 34%);
}

.attic-portal.is-glowing {
    box-shadow: 0 0 1.25rem #fff09b, inset 0 -0.45rem rgba(69, 43, 48, 0.12);
}

.bathroom-portal {
    left: 58%;
    top: 40%;
    width: 8.5%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #79bccc;
}

.portal-bubbles i {
    position: absolute;
    border: 0.18rem solid #e9fbff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.portal-bubbles i:nth-child(1) { left: 21%; top: 45%; width: 25%; aspect-ratio: 1; }
.portal-bubbles i:nth-child(2) { left: 48%; top: 20%; width: 30%; aspect-ratio: 1; }
.portal-bubbles i:nth-child(3) { left: 53%; top: 57%; width: 18%; aspect-ratio: 1; }
.bathroom-portal.is-cozy .portal-bubbles i { border-color: #fff1a6; }

.kitchen-portal {
    left: 58%;
    top: 58%;
    width: 11%;
    height: 15%;
    border-radius: 0.6rem;
    background: #84b882;
}

.portal-pot {
    position: absolute;
    left: 27%;
    top: 37%;
    width: 46%;
    height: 36%;
    border-radius: 0.25rem 0.25rem 1rem 1rem;
    background: #e66f5c;
}

.portal-pot::before,
.portal-pot::after {
    position: absolute;
    content: "";
    top: 12%;
    width: 30%;
    height: 18%;
    background: #a54d49;
}

.portal-pot::before { left: -25%; }
.portal-pot::after { right: -25%; }

.portal-steam {
    position: absolute;
    left: 46%;
    top: 3%;
    width: 12%;
    height: 42%;
    border-left: 0.22rem solid #f8f1dc;
    border-radius: 50%;
    animation: steam-float 1.4s ease-in-out infinite alternate;
}

.playpen-portal {
    left: 43.5%;
    top: 59%;
    width: 11%;
    height: 22%;
    border-radius: 1.4rem 1.4rem 0.25rem 0.25rem;
    background: #e8a65f;
}

.portal-blocks i {
    position: absolute;
    bottom: 20%;
    width: 25%;
    aspect-ratio: 1;
    border-radius: 0.2rem;
}

.portal-blocks i:nth-child(1) { left: 15%; background: #75b5c2; transform: rotate(-7deg); }
.portal-blocks i:nth-child(2) { left: 39%; bottom: 40%; background: #e87765; }
.portal-blocks i:nth-child(3) { right: 13%; background: #f3cb58; transform: rotate(8deg); }

.garage-portal {
    left: 27%;
    top: 61%;
    width: 14%;
    height: 19%;
    border-radius: 0.55rem 0.55rem 0.2rem 0.2rem;
    background: repeating-linear-gradient(0deg, #7793a0 0 22%, #607a87 22% 27%);
}

.portal-wrench {
    position: absolute;
    left: 43%;
    top: 17%;
    width: 16%;
    height: 66%;
    border-radius: 99px;
    background: #f4e1aa;
    transform: rotate(42deg);
}

.portal-wrench::before {
    position: absolute;
    content: "";
    left: -48%;
    top: -8%;
    width: 195%;
    aspect-ratio: 1;
    border: 0.26rem solid #f4e1aa;
    border-top-color: transparent;
    border-radius: 50%;
}

.garage-portal.is-ready { box-shadow: 0 0 1.1rem #fbe67b, var(--soft-shadow); }

/* Shared object illustrations */

.world-object-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tomato-body { fill: #e75f51; stroke: #bd493f; stroke-width: 3; }
.tomato-leaf { fill: #4d9858; }
.tomato-shine { fill: none; stroke: #f99a87; stroke-width: 7; stroke-linecap: round; opacity: 0.7; }
.car-body { fill: #e76558; stroke: #9d4543; stroke-width: 3; }
.car-window { fill: #bfe7e8; stroke: #5f8994; stroke-width: 2; }
.car-wheel { fill: #4f4650; }
.car-wheel-hub { fill: #efc458; }
.car-light { fill: #ffe283; }
.teddy-ear,
.teddy-head,
.teddy-body { fill: #b97d52; stroke: #87543f; stroke-width: 3; }
.teddy-muzzle { fill: #e8bd89; }
.teddy-eye { fill: #493f49; }
.teddy-smile { fill: none; stroke: #5c3c38; stroke-width: 4; stroke-linecap: round; }
.teddy-heart { fill: #e97770; }
.art-frame { fill: #86639e; stroke: #694c80; stroke-width: 4; }
.art-paper { fill: #fff4d6; }
.art-star { fill: #f3c84c; stroke: #df9d3b; stroke-width: 3; }
.art-dot { fill: #e47a72; }

.placed-world-object.placed-toy-car,
.carried-world-object:has(.toy-car-art) {
    width: clamp(5.8rem, 13%, 9rem);
    aspect-ratio: 8 / 5;
}

.placed-world-object.placed-teddy,
.carried-world-object:has(.teddy-art) {
    width: clamp(4.6rem, 10%, 7rem);
}

.placed-world-object.placed-star-art,
.carried-world-object:has(.star-art) {
    width: clamp(4.5rem, 9%, 6.8rem);
}

.pocket-object {
    position: absolute;
    z-index: 1;
    left: 20%;
    top: -18%;
    width: 60%;
    height: 88%;
    filter: drop-shadow(0 0.25rem 0.1rem rgba(62, 48, 45, 0.2));
}

.carry-pocket:has(.toy-car-art) .pocket-object { left: 8%; top: 2%; width: 84%; height: 62%; }
.carry-pocket:has(.tomato-art) .pocket-object { left: 24%; top: -8%; width: 52%; height: 72%; }

.carried-world-object.carry-pocket-item,
.carried-world-object.carry-pocket-item:has(.toy-car-art),
.carried-world-object.carry-pocket-item:has(.teddy-art),
.carried-world-object.carry-pocket-item:has(.star-art) {
    left: 45%;
    bottom: 1.5%;
    width: clamp(5.6rem, 11%, 8rem);
    height: clamp(4.8rem, 15%, 6.6rem);
    aspect-ratio: auto;
    border: .3rem solid rgba(255,255,255,.9);
    border-radius: 1.2rem 1.2rem 45% 45%;
    background: rgba(255,247,222,.88);
    box-shadow: 0 .45rem 0 rgba(93,67,60,.18);
    filter: none;
    overflow: visible;
}

.carried-world-object.carry-pocket-item::after {
    position: absolute;
    content: "";
    z-index: 2;
    left: 3%;
    right: 3%;
    top: 43%;
    bottom: 0;
    border: .28rem solid #f0cf95;
    border-radius: .45rem .45rem 45% 45%;
    background: #bd7b54;
}

.carried-world-object.carry-pocket-item > .world-object-art {
    position: absolute;
    z-index: 1;
    left: 23%;
    top: -24%;
    width: 54%;
    height: 94%;
}

.carried-world-object.carry-pocket-item:has(.toy-car-art) > .world-object-art { left: 8%; top: -5%; width: 84%; height: 72%; }
.carried-world-object.carry-pocket-item:hover,
.carried-world-object.carry-pocket-item:focus-visible { filter: drop-shadow(0 0 .55rem rgba(255,239,151,.85)); }

/* Expanded backyard */

.flower-seed-packet { left: 6%; }
.tomato-seed-packet { left: 20%; background: #7baa68; }
.tomato-seed-packet .world-object-art { position: absolute; left: 23%; top: 16%; width: 54%; height: 55%; }
.garden-plant.crop-tomato.stage-bloomed { left: 44%; bottom: 17%; width: 13%; height: 27%; }
.garden-tomato-art { filter: drop-shadow(0 0.4rem rgba(65, 58, 42, 0.18)); }

/* Kitchen */

.kitchen-scene { background: #f7ddb2; }
.kitchen-wall { position: absolute; inset: 0 0 38%; background: repeating-linear-gradient(0deg, transparent 0 18%, rgba(208, 149, 112, 0.1) 18% 20%), #f8dfb8; }
.kitchen-window { position: absolute; left: 9%; top: 12%; width: 22%; height: 29%; border: 0.75rem solid #e8b676; border-radius: 1rem; background: linear-gradient(#a7e0e3 0 62%, #86bd71 62%); box-shadow: inset 0 0 0 0.3rem #fff0cf; }
.kitchen-window::before,
.kitchen-window::after { position: absolute; content: ""; background: #e8b676; }
.kitchen-window::before { left: 48%; top: 0; bottom: 0; width: 5%; }
.kitchen-window::after { left: 0; right: 0; top: 48%; height: 6%; }
.kitchen-window span { position: absolute; right: 8%; top: 13%; width: 15%; aspect-ratio: 1; border-radius: 50%; background: #f5cd54; }
.kitchen-cabinets { position: absolute; right: 7%; top: 10%; width: 32%; height: 27%; display: flex; gap: 4%; }
.kitchen-cabinets span { flex: 1; border: 0.35rem solid #a96649; border-radius: 0.6rem; background: #d18c60; box-shadow: inset 0 -0.6rem rgba(110, 66, 53, 0.12); }
.kitchen-fridge{position:absolute;z-index:14;right:4%;bottom:12%;width:14%;height:43%;padding:0;border:.42rem solid #6c9aa5;border-radius:1rem;background:linear-gradient(#d9f0ec,#9ecbd0);box-shadow:inset -.55rem 0 rgba(75,125,137,.18),var(--soft-shadow);touch-action:manipulation}.fridge-handle{position:absolute;right:13%;top:22%;width:8%;height:50%;border-radius:99px;background:#5b8994}.fridge-star{position:absolute;left:13%;top:11%;color:#fff7bd;font-size:clamp(1.2rem,3vw,2rem)}.fridge-tray{position:absolute;z-index:32;right:3%;bottom:54%;width:min(23rem,50%);padding:.45rem;border:.3rem solid #7c9e9b;border-radius:1rem;background:rgba(244,255,239,.97);box-shadow:.45rem .5rem rgba(72,93,88,.2);display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}.fridge-choice{position:relative;min-width:0;aspect-ratio:1;padding:0;border:.16rem solid rgba(84,115,109,.32);border-radius:.6rem;background:#edf8e0}.fridge-choice span{position:absolute;inset:20%;border-radius:50%;background:#f0cf5b}.fridge-ingredient.ingredient-Corn span{border-radius:45%;background:repeating-linear-gradient(90deg,#f3cf58 0 25%,#e7ad3e 25% 40%)}.ingredient-Carrot span{border-radius:55% 55% 10% 10%;background:#ed8c46;transform:rotate(42deg)}.ingredient-Apple span{background:#e66d61}.ingredient-MashedPotato span{border-radius:45%;background:#f3ddad;box-shadow:0 -.12rem #fff4ce}.fridge-milk span{border-radius:.3rem;background:linear-gradient(#78b7c4 0 24%,#fff5d5 24%)}.fridge-juice span{background:#efb84b}.fridge-choice.is-on-table{outline:.22rem solid #6e9e75;outline-offset:.05rem}
.coffee-maker{position:absolute;z-index:15;left:35%;top:14%;width:12%;height:24%;padding:0;border:.35rem solid #865f4c;border-radius:.8rem;background:#da8764;box-shadow:var(--soft-shadow);touch-action:manipulation}.coffee-pot{position:absolute;left:23%;top:17%;width:55%;height:47%;border-radius:40% 40% 48% 48%;background:#795344}.coffee-cup{position:absolute;left:33%;bottom:8%;width:34%;height:21%;border-radius:0 0 .45rem .45rem;background:#fff2d4}.coffee-maker.is-serving .coffee-cup{background:#8a5d45}
.kitchen-counter { position: absolute; z-index: 3; left: 4%; right: 4%; top: 45%; height: 13%; border-radius: 1rem; background: #f7edcf; border-bottom: 0.8rem solid #b87150; box-shadow: 0 0.7rem rgba(91, 62, 50, 0.13); }
.soup-pot { position: absolute; z-index: 10; left: 42%; top: 37%; width: 20%; height: 29%; border-radius: 1rem 1rem 3rem 3rem; background: #6f9faa; border: 0.55rem solid #56818c; box-shadow: inset 0 -1.2rem rgba(51, 92, 102, 0.22), var(--soft-shadow); }
.soup-surface { position: absolute; left: 7%; right: 7%; top: 5%; height: 23%; border-radius: 50%; background: #456f79; overflow: hidden; }
.soup-pot.soup-is-ready .soup-surface { background: #d9674e; }
.pot-handle { position: absolute; top: 19%; width: 32%; height: 15%; background: #56818c; }
.handle-left { left: -27%; border-radius: 1rem 0 0 1rem; }
.handle-right { right: -27%; border-radius: 0 1rem 1rem 0; }
.soup-tomato { position: absolute; left: 21%; top: 24%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #e66453; }
.soup-noodle { position: absolute; width: 28%; height: 42%; border: 0.18rem solid #f2d36f; border-color: #f2d36f transparent transparent; border-radius: 50%; }
.noodle-one { left: 43%; top: 30%; }
.noodle-two { left: 62%; top: 12%; transform: rotate(18deg); }
.soup-steam { position: absolute; top: -30%; width: 16%; height: 34%; border-left: 0.35rem solid rgba(255,255,255,0.78); border-radius: 50%; animation: steam-float 1.5s ease-in-out infinite alternate; }
.steam-one { left: 35%; }
.steam-two { left: 60%; animation-delay: -0.7s; }
@keyframes steam-float { to { transform: translateY(-0.6rem) rotate(8deg); opacity: 0.4; } }
.soup-heart { position: absolute; right: 8%; top: 46%; width: 22%; aspect-ratio: 1; background: #f5d76d; clip-path: polygon(50% 90%, 8% 46%, 9% 21%, 29% 8%, 50% 28%, 71% 8%, 91% 21%, 92% 46%); }
.kitchen-action { position: absolute; z-index: 16; padding: 0; transition: transform 150ms ease, filter 150ms ease; touch-action: manipulation; }
.kitchen-action:hover,
.kitchen-action:focus-visible { transform: translateY(-0.4rem) rotate(-2deg); filter: brightness(1.05); }
.kitchen-action:active { transform: scale(0.92); }
.add-tomato-action { left: 18%; bottom: 12%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: #fff0ba; box-shadow: 0 0 0 0.45rem rgba(255,255,255,0.65), var(--soft-shadow); }
.add-tomato-action .world-object-art { position: absolute; inset: 13%; width: 74%; height: 74%; }
.action-arrow { position: absolute; right: -75%; top: 34%; width: 58%; height: 26%; background: #f2c857; clip-path: polygon(0 27%, 58% 27%, 58% 0, 100% 50%, 58% 100%, 58% 73%, 0 73%); animation: arrow-nudge 900ms ease-in-out infinite alternate; }
@keyframes arrow-nudge { to { transform: translateX(0.35rem); } }
.tomato-wish { position: absolute; left: 17%; bottom: 13%; width: 12%; aspect-ratio: 1; opacity: 0.34; filter: grayscale(0.4); }
.garden-leaf-clue { position: absolute; left: -35%; top: -18%; width: 43%; height: 53%; border-radius: 90% 10%; background: #6faa69; transform: rotate(-35deg); }
.noodle-jar { right: 17%; bottom: 12%; width: 12%; height: 24%; border: 0.35rem solid #e8c083; border-radius: 0.6rem 0.6rem 1rem 1rem; background: rgba(255,245,216,0.86); box-shadow: var(--soft-shadow); }
.jar-lid { position: absolute; left: -5%; right: -5%; top: -11%; height: 16%; border-radius: 0.35rem; background: #dd765f; }
.jar-noodles { position: absolute; inset: 27% 8% 0; color: #e9bb4f; font-size: clamp(1.5rem, 4vw, 3rem); line-height: 0.8; transform: rotate(90deg); }
.stir-spoon { right: 22%; bottom: 10%; width: 9%; height: 38%; background: transparent; transform: rotate(-18deg); }
.stir-spoon span { position: absolute; left: 42%; top: 0; width: 19%; height: 86%; border-radius: 99px; background: #a8704e; }
.stir-spoon span::after { position: absolute; content: ""; left: -82%; bottom: -8%; width: 265%; height: 24%; border-radius: 50%; background: #b97f59; }
.serve-soup-action{left:35%;bottom:11%;width:12%;aspect-ratio:1;border-radius:50%;background:#fff1be;box-shadow:var(--soft-shadow)}.serve-soup-action span{position:absolute;inset:19%;border-radius:50% 50% 42% 42%;background:#d86d4f;box-shadow:0 .35rem #f8e3b8}.kitchen-table-setting{position:absolute;z-index:17;left:35%;bottom:8%;width:30%;height:20%;border-radius:50%;background:rgba(255,240,196,.55)}.served-bowl{position:absolute;left:38%;top:20%;width:28%;height:38%;border-radius:15% 15% 45% 45%;background:#d87053;box-shadow:inset 0 .25rem #f5c871}.table-drink{position:absolute;bottom:15%;width:11%;height:35%;border-radius:.25rem .25rem .45rem .45rem;background:#fff7e5;box-shadow:inset 0 -.15rem rgba(91,70,56,.16)}.drink-milk{left:14%;border-top:.3rem solid #75b7c2}.drink-juice{right:14%;background:#edb448}.drink-coffee{left:5%;background:#865b47}.kitchen-caddy{position:absolute;z-index:18;left:8%;bottom:8%;width:9%;height:18%;padding:0;border:.3rem solid #758b71;border-radius:.4rem .4rem .8rem .8rem;background:#a8c68b;box-shadow:var(--soft-shadow);touch-action:manipulation}.kitchen-caddy span{position:absolute;left:18%;right:18%;top:-18%;height:14%;border-radius:.2rem;background:#78936f}
.kitchen-rug { position: absolute; left: 35%; bottom: 4%; width: 34%; height: 17%; border-radius: 50%; background: #dda263; opacity: 0.75; }
.hanging-herbs { position: absolute; left: 34%; top: 0; width: 9%; height: 26%; }
.hanging-herbs i { position: absolute; top: 0; width: 26%; height: 100%; border-left: 0.18rem solid #705346; }
.hanging-herbs i::after { position: absolute; content: ""; left: -0.5rem; bottom: 0; width: 1rem; height: 45%; border-radius: 90% 10%; background: #65945b; }
.hanging-herbs i:nth-child(2) { left: 35%; height: 84%; }
.hanging-herbs i:nth-child(3) { right: 0; height: 94%; }

/* Playpen */

.playpen-scene { background: #f2d5b0; }
.playpen-wall { position: absolute; inset: 0 0 39%; background: radial-gradient(circle at 14% 18%, #f4c75b 0 3%, transparent 3.3%), radial-gradient(circle at 77% 24%, #8bc1c6 0 2.6%, transparent 2.9%), #f3d8b5; }
.playpen-floor { position: absolute; inset: 61% 0 0; background: repeating-linear-gradient(90deg, #d9a36e 0 8%, #c99262 8% 8.7%); }
.playpen-fence { position: absolute; z-index: 4; left: 6%; right: 6%; bottom: 11%; height: 46%; border: 0.65rem solid #e9bd78; border-radius: 3rem; pointer-events: none; }
.playpen-fence i { position: absolute; top: 0; bottom: 0; width: 0.55rem; border-radius: 99px; background: #e9bd78; }
.playpen-fence i:nth-child(1) { left: 16%; }.playpen-fence i:nth-child(2) { left: 33%; }.playpen-fence i:nth-child(3) { left: 50%; }.playpen-fence i:nth-child(4) { left: 67%; }.playpen-fence i:nth-child(5) { left: 84%; }
.playpen-rug { position: absolute; z-index: 2; left: 19%; right: 19%; bottom: 7%; height: 35%; border-radius: 50%; background: repeating-radial-gradient(circle, #93c5c1 0 13%, #f3cd6a 13% 24%, #e88170 24% 35%); opacity: 0.8; }
.block-area { position: absolute; z-index: 12; left: 24%; bottom: 22%; width: 23%; height: 57%; }
.tower-block { position: absolute; left: 27%; width: 46%; height: 17%; border-radius: 0.45rem; box-shadow: inset 0 -0.5rem rgba(78,55,52,0.12), var(--soft-shadow); }
.block-1 { bottom: 0; background: #e87362; }.block-2 { bottom: 17%; background: #73b6c1; transform: rotate(2deg); }.block-3 { bottom: 34%; background: #efc653; transform: rotate(-2deg); }.block-4 { bottom: 51%; background: #8dad69; }
.tower-crash-target { position: absolute; z-index: 3; inset: 7% 8% 0; padding: 0; border-radius: 3rem; background: transparent; }
.tower-crash-target:hover,
.tower-crash-target:focus-visible { background: rgba(255,242,166,0.22); box-shadow: 0 0 1rem #fff0a0; }
.scattered-blocks { position: absolute; z-index: 13; left: 18%; bottom: 10%; width: 36%; height: 21%; padding: 0; background: transparent; }
.loose-block { position: absolute; width: 21%; aspect-ratio: 1; border-radius: 0.45rem; box-shadow: var(--soft-shadow); }
.loose-1 { left: 2%; bottom: 4%; background: #e87362; transform: rotate(15deg); }.loose-2 { left: 27%; top: 5%; background: #73b6c1; transform: rotate(-11deg); }.loose-3 { right: 24%; bottom: 0; background: #efc653; transform: rotate(8deg); }.loose-4 { right: 0; top: 4%; background: #8dad69; transform: rotate(-18deg); }
.scattered-blocks:hover .loose-block,
.scattered-blocks:focus-visible .loose-block { filter: brightness(1.08); transform: translateY(-0.3rem); }
.playpen-drop-zone { position: absolute; z-index: 14; right: 22%; bottom: 16%; width: 22%; height: 30%; padding: 0; border: 0.35rem dashed rgba(255,255,255,0.9); border-radius: 50%; background: rgba(255,245,177,0.2); animation: target-glow 900ms ease-in-out infinite alternate; }
.drop-glow { position: absolute; inset: 24%; border-radius: 50%; background: rgba(255,240,146,0.45); }
.playpen-world-object { position: absolute; z-index: 17; right: 25%; bottom: 23%; width: 17%; height: 23%; padding: 0; background: transparent; filter: drop-shadow(0 0.45rem 0.2rem rgba(60,48,45,0.2)); transition: transform 150ms ease; }
.playpen-world-object.playpen-car { width: 20%; height: 17%; bottom: 21%; }
.movable-world-object.playpen-world-object:hover,
.movable-world-object.playpen-world-object:focus-visible { transform: translate(-50%, -50%); }
.soft-ball { position: absolute; z-index: 8; right: 10%; bottom: 17%; width: 8%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#e87565 0 25%, #f1ca5f 25% 50%, #72aebd 50% 75%, #e87565 75%); box-shadow: var(--soft-shadow); }
.playpen-cloud { position: absolute; left: 12%; top: 17%; width: 15%; height: 7%; border-radius: 99px; background: rgba(255,255,255,0.68); }
.playpen-cloud::before,
.playpen-cloud::after { position: absolute; content: ""; bottom: 0; border-radius: 50%; background: inherit; aspect-ratio: 1; }.playpen-cloud::before { left: 15%; width: 42%; }.playpen-cloud::after { right: 12%; width: 34%; }

/* Bathroom */

.bathroom-scene { background: #d5eef0; }
.bathroom-wall { position: absolute; inset: 0 0 34%; background: radial-gradient(circle, rgba(255,255,255,0.52) 0 18%, transparent 19%) 0 0 / 5rem 5rem, #c7e6e8; }
.bathroom-floor { position: absolute; inset: 66% 0 0; background: repeating-linear-gradient(45deg, #edf6eb 0 9%, #d7e9df 9% 18%); }
.bathroom-mirror { position: absolute; right: 8%; top: 8%; width: 15%; height: 25%; border: 0.62rem solid #e9bc75; border-radius: 50% 50% 1rem 1rem; background: linear-gradient(135deg, #dff5f3, #91cbd3); box-shadow: inset 0 0 0 0.22rem #fff8df; }
.bathroom-sink { position: absolute; right: 6%; top: 39%; width: 19%; height: 11%; border-radius: 0 0 50% 50%; background: #fff4dd; box-shadow: 0 0.65rem #d2a76e; }
.bathroom-sink span { position: absolute; left: 43%; bottom: 80%; width: 14%; height: 80%; border: 0.32rem solid #6e9da5; border-bottom: 0; border-radius: 1rem 1rem 0 0; }
.bathroom-tub { position: absolute; z-index: 8; left: 30%; bottom: 12%; width: 41%; height: 35%; overflow: hidden; border: 0.62rem solid #faf5df; border-radius: 1rem 1rem 5rem 5rem; background: #dcebed; box-shadow: inset 0 -1.4rem rgba(66,135,145,0.11), var(--soft-shadow); transition: background 280ms ease, filter 180ms ease; }
.tub-water { position: absolute; left: 3%; right: 3%; top: 8%; height: 0; opacity: 0; border-radius: 50%; background: #65b7c3; transition: height 360ms ease, opacity 250ms ease; }
.bathroom-tub.is-filled { background: #a6d8de; }
.bathroom-tub.is-filled .tub-water { height: 29%; opacity: 1; }
.bathroom-tub-front { position: absolute; z-index: 38; left: 30%; bottom: 12%; width: 41%; height: 24%; pointer-events: none; border: 0.62rem solid #faf5df; border-top: 0; border-radius: 0 0 5rem 5rem; background: linear-gradient(#eef6ee, #d8e9e3); box-shadow: inset 0 -1rem rgba(76,126,126,.08), 0 .55rem 1rem rgba(63,92,89,.18); }
.water-glint { position: absolute; z-index: 2; top: 13%; height: .2rem; border-radius: 99px; background: rgba(255,255,255,.78); animation: water-glint 1.5s ease-in-out infinite alternate; }.glint-one{left:14%;width:22%}.glint-two{right:12%;width:16%;animation-delay:-.7s}@keyframes water-glint{to{transform:translateX(.65rem);opacity:.42}}
.tub-faucet-control { position:absolute; z-index:48; left:65%; bottom:43%; width:9%; aspect-ratio:1; padding:0; border-radius:50%; background:#f8f1d9; box-shadow:0 .35rem rgba(65,96,99,.2); transition:transform 160ms ease; }.tub-faucet-control:hover,.tub-faucet-control:focus-visible{transform:translateY(-.25rem) rotate(4deg)}.tub-faucet-control span{position:absolute;left:37%;top:18%;width:26%;height:54%;border:.3rem solid #658f99;border-bottom:0;border-radius:1rem 1rem 0 0}.tub-faucet-control i{position:absolute;left:23%;bottom:18%;width:54%;height:18%;border-radius:99px;background:#e4776e}.tub-faucet-control.is-drain i{background:#6baea0;transform:rotate(45deg)}
.bathroom-scene:has(.bath-toy-object.is-dragging) .bathroom-tub,.bathroom-scene:has(.bath-toy-object.is-dragging) .bath-basket{filter:drop-shadow(0 0 .85rem rgba(255,233,122,.9));}
.bathroom-object { z-index: 26; }
.movable-world-object.movable-bath-duck { width:clamp(4.6rem,9%,7rem);aspect-ratio:13/11 }.movable-world-object.movable-bath-boat{width:clamp(5.8rem,12%,8.8rem);aspect-ratio:5/4}.movable-world-object.movable-bath-whale{width:clamp(5.2rem,11%,8rem);aspect-ratio:29/23}
.bath-duck-body,.bath-duck-head{fill:#f2c94f;stroke:#a8792b;stroke-width:4}.bath-duck-wing{fill:#f8df70}.bath-duck-beak{fill:#e98355}.bath-duck-eye{fill:#4d4650}.bath-boat-hull{fill:#e67569;stroke:#99534d;stroke-width:4}.bath-boat-mast{fill:#8c674f}.bath-boat-sail{fill:#f4cf59}.bath-boat-flag{fill:#72b4c0}.bath-boat-wave{fill:none;stroke:#5aa9b8;stroke-width:6;stroke-linecap:round}.bath-whale-body{fill:#68b7c4;stroke:#417f8a;stroke-width:4}.bath-whale-belly{fill:#a9dce0}.bath-whale-eye{fill:#39464d}.bath-whale-spout{fill:none;stroke:#68b7c4;stroke-width:5;stroke-linecap:round}
.bath-basket { position:absolute; z-index:43; left:7%; bottom:8%; width:19%; height:23%; border-radius:1rem 1rem 3rem 3rem; background:repeating-linear-gradient(90deg,#d99a67 0 11%,#b97852 11% 14%); box-shadow:inset 0 -.8rem rgba(108,68,48,.13),var(--soft-shadow); transition:filter 180ms ease }.basket-weave{position:absolute;left:-3%;right:-3%;top:17%;height:13%;border-radius:99px;background:#8e5d45}.stored-bath-toys{position:absolute;left:7%;right:7%;top:-25%;height:62%;display:flex;align-items:flex-end;justify-content:center;gap:1%}.stored-bath-toys button{position:relative;width:34%;height:100%;padding:0;background:transparent;transition:transform 150ms ease}.stored-bath-toys button:hover,.stored-bath-toys button:focus-visible{transform:translateY(-.35rem) rotate(3deg)}.stored-bath-toys .world-object-art{width:100%;height:100%;filter:drop-shadow(0 .25rem rgba(71,53,44,.22))}
.bathroom-play-target { position:absolute; z-index:54; padding:0; border:.28rem dashed rgba(255,255,255,.95); background:rgba(255,226,104,.28); animation:bath-target-pulse 850ms ease-in-out infinite alternate }.bathroom-play-target span{position:absolute;inset:35%;border-radius:50%;background:#fff4a6;box-shadow:0 0 0 .35rem rgba(255,244,166,.3)}.tub-play-target{left:32%;bottom:24%;width:37%;height:22%;border-radius:50%}.basket-play-target{left:6%;bottom:7%;width:21%;height:27%;border-radius:1rem 1rem 3rem 3rem}@keyframes bath-target-pulse{to{filter:brightness(1.12);background:rgba(255,226,104,.4)}}
.bath-teddy { position: absolute; z-index: 30; left: 43%; bottom: 25%; width: 15%; height: 32%; transition: transform 350ms ease, filter 350ms ease; }
.bath-teddy.care-bubbly { animation: teddy-bob 650ms ease; }.bath-teddy.care-rinsed { filter: brightness(1.08); }.bath-teddy.care-cozy { transform: translateY(-0.3rem); filter: drop-shadow(0 0 0.9rem rgba(255,235,142,0.8)); }
@keyframes teddy-bob { 50% { transform: translateY(-0.6rem) rotate(3deg); } }
.mud-spot { position: absolute; z-index: 2; border-radius: 50%; background: #7f6048; opacity: 0.78; }.mud-one { left: 26%; top: 34%; width: 18%; aspect-ratio: 1; }.mud-two { right: 20%; bottom: 21%; width: 22%; aspect-ratio: 1; }
.care-bubble { position: absolute; z-index: 3; border: 0.2rem solid #fff; border-radius: 50%; background: rgba(211,247,249,0.55); }.bubble-one { left: 5%; top: 18%; width: 25%; aspect-ratio: 1; }.bubble-two { right: 2%; top: 33%; width: 34%; aspect-ratio: 1; }.bubble-three { left: 36%; bottom: 2%; width: 28%; aspect-ratio: 1; }
.bathroom-care-tool { position: absolute; z-index: 48; right: 12%; bottom: 12%; width: 12%; height: 23%; padding: 0; background: transparent; transition: transform 150ms ease; }
.bathroom-care-tool:hover,
.bathroom-care-tool:focus-visible { transform: translateY(-0.4rem) rotate(-4deg); }
.bathroom-care-tool span { position: absolute; inset: 12%; }
.tool-muddy span { border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0 16%, transparent 17%), radial-gradient(circle at 70% 55%, #fff 0 15%, transparent 16%), #7bc4cf; box-shadow: var(--soft-shadow); }
.tool-bubbly span { left: 38%; width: 28%; border-radius: 1rem 1rem 0.3rem 0.3rem; background: #6f9da8; }.tool-bubbly span::after { position: absolute; content: ""; right: -125%; top: 4%; width: 150%; height: 15%; background: #6f9da8; transform: rotate(18deg); }
.tool-rinsed span { border-radius: 1rem; background: #f2bf69; transform: rotate(-8deg); }.tool-rinsed span::after { position: absolute; content: ""; inset: 16%; border-radius: 0.5rem; background: #ffe2a1; }
.cozy-teddy-pickup { position: absolute; z-index: 48; left: 42%; bottom: 21%; width: 17%; height: 38%; padding: 0; border-radius: 50%; background: transparent; }
.cozy-teddy-pickup.is-busy { animation: gentle-no 380ms ease; }
.hug-heart { position: absolute; right: 5%; top: 4%; width: 28%; aspect-ratio: 1; background: #ee7f77; clip-path: polygon(50% 92%, 8% 48%, 8% 22%, 29% 8%, 50% 29%, 71% 8%, 92% 22%, 92% 48%); animation: heart-pop 800ms ease-in-out infinite alternate; }
@keyframes heart-pop { to { transform: scale(1.14) rotate(4deg); } }
.bath-mat { position: absolute; z-index:4; left: 34%; bottom: 2%; width: 33%; height: 11%; border-radius: 50%; background: #efc873; }
.empty-towel-hook { position: absolute; z-index:20; right: 13%; top: 19%; width: 10%; height: 28%; border-top: 0.5rem solid #9a6a4e; }.empty-towel-hook span { position: absolute; left: 35%; top: 0; width: 32%; height: 100%; border-radius: 0 0 1rem 1rem; background: #f0b46c; }

/* Toy closet */

.toy-closet-scene { background: #5f5374; }
.closet-wall { position: absolute; inset: 0; background: radial-gradient(circle at 17% 18%, rgba(255,234,145,0.18) 0 2%, transparent 2.2%), radial-gradient(circle at 82% 29%, rgba(255,255,255,0.12) 0 1.5%, transparent 1.7%), linear-gradient(#66597c 0 72%, #4c435f 72%); }
.closet-shelf { position: absolute; z-index: 3; left: 6%; right: 6%; height: 3%; border-radius: 99px; background: #b77a53; box-shadow: 0 0.7rem #714c40; }.shelf-top { top: 31%; }.shelf-bottom { top: 66%; }
.costume-chest { position: absolute; z-index: 8; left: 8%; bottom: 8%; width: 24%; height: 25%; border: 0.55rem solid #76503e; border-radius: 2rem 2rem 0.8rem 0.8rem; background: #c48557; box-shadow: inset 0 -1rem rgba(82,54,46,0.18), var(--soft-shadow); }.costume-chest span { position: absolute; left: 43%; top: 35%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: #f0c755; }
.toy-basket { position: absolute; z-index: 8; right: 7%; bottom: 7%; width: 20%; height: 22%; border-radius: 1rem 1rem 3rem 3rem; background: repeating-linear-gradient(90deg,#d79967 0 10%,#b97753 10% 13%); }.toy-basket i { position: absolute; bottom: 75%; width: 24%; aspect-ratio: 1; border-radius: 0.35rem; }.toy-basket i:nth-child(1){left:12%;background:#e67466;transform:rotate(-15deg)}.toy-basket i:nth-child(2){left:39%;background:#72b5c2}.toy-basket i:nth-child(3){right:10%;background:#efca57;transform:rotate(12deg)}
.fidget-turn-game-box { position:absolute; z-index:14; right:8%; top:39%; width:18%; height:20%; padding:0; border:.45rem solid #d7ae68; border-radius:1rem; background:linear-gradient(#fff6dc 0 38%, #f4e2b5 38% 100%); box-shadow:0 .55rem rgba(46,34,58,.24); transform:rotate(-3deg); touch-action:manipulation; transition:transform 150ms ease,filter 150ms ease; }.fidget-turn-game-box:hover,.fidget-turn-game-box:focus-visible{transform:translateY(-.35rem) rotate(-1deg);filter:brightness(1.06)}.fidget-game-title{position:absolute;left:40%;top:14%;color:#80604f;font-size:clamp(1.5rem,4vw,3.2rem);line-height:1}.fidget-game-marks{position:absolute;left:13%;right:13%;bottom:15%;height:36%;display:flex;justify-content:space-between}.fidget-game-marks i{position:relative;width:27%;border:.14rem solid rgba(192,146,75,.5);border-radius:.22rem}.fidget-game-marks i::before,.fidget-game-marks i::after{position:absolute;content:"";left:24%;top:46%;width:52%;height:.2rem;border-radius:99px}.fidget-game-marks i:nth-child(1)::before,.fidget-game-marks i:nth-child(1)::after{background:#dd645c}.fidget-game-marks i:nth-child(1)::before{transform:rotate(45deg)}.fidget-game-marks i:nth-child(1)::after{transform:rotate(-45deg)}.fidget-game-marks i:nth-child(2)::before,.fidget-game-marks i:nth-child(2)::after{background:#e4bb4d}.fidget-game-marks i:nth-child(2)::after{transform:rotate(90deg)}.fidget-game-marks i:nth-child(3)::before{left:20%;top:31%;width:57%;height:35%;border-bottom:.24rem solid #6dac64;border-left:.24rem solid #6dac64;transform:rotate(-45deg)}.fidget-game-marks i:nth-child(3)::after{display:none}
.sticker-book-box{position:absolute;z-index:14;left:11%;top:15%;width:19%;height:15%;padding:0;border:.42rem solid #d1a55f;border-radius:.7rem 1.3rem 1.3rem .7rem;background:#efbf68;box-shadow:inset .45rem 0 #fff0bb,0 .52rem rgba(46,34,58,.24);transform:rotate(2deg);touch-action:manipulation;transition:transform 150ms ease,filter 150ms ease}.sticker-book-box::before{position:absolute;content:"";left:8%;top:8%;bottom:8%;width:.24rem;border-radius:99px;background:rgba(133,83,62,.35)}.sticker-book-box:hover,.sticker-book-box:focus-visible{transform:translateY(-.35rem) rotate(0);filter:brightness(1.06)}.sticker-book-cover{position:absolute;inset:12% 10% 12% 17%;border:.18rem dashed rgba(255,248,213,.8);border-radius:.55rem}.sticker-book-cover i{position:absolute;width:23%;aspect-ratio:1;border:.18rem solid #fff7dc;border-radius:44%;filter:drop-shadow(0 .13rem rgba(85,58,51,.17))}.sticker-book-cover i:nth-child(1){left:3%;top:13%;background:#e9756c;clip-path:polygon(50% 0,61% 35%,100% 38%,69% 59%,79% 100%,50% 75%,21% 100%,31% 59%,0 38%,39% 35%)}.sticker-book-cover i:nth-child(2){left:38%;bottom:12%;background:#70b9c1;border-radius:50%}.sticker-book-cover i:nth-child(3){right:2%;top:10%;background:#8a70aa;transform:rotate(18deg)}
.fidget-turn-last-trade { position:absolute; z-index:5; left:7%; bottom:12%; width:25%; height:11%; display:flex; align-items:flex-end; justify-content:center; gap:2%; }.fidget-turn-last-trade span{width:22%;height:100%;filter:drop-shadow(0 .2rem rgba(35,25,42,.22))}.fidget-turn-last-trade .world-object-art{width:100%;height:100%}
.puzzle-board { position: absolute; z-index: 10; left: 37%; top: 18%; width: 28%; height: 54%; border: 0.8rem solid #b97b55; border-radius: 1.5rem; background: #f7e7ba; box-shadow: inset 0 0 0 0.35rem #fff4d5, var(--soft-shadow); }
.puzzle-slot { position: absolute; width: 25%; aspect-ratio: 1; opacity: 0.36; background: #9b77aa; }.puzzle-slot.is-filled { opacity: 1; filter: drop-shadow(0 0.25rem rgba(70,50,66,0.2)); animation: piece-settle 300ms ease; }@keyframes piece-settle{from{transform:scale(.55) rotate(12deg)}}
.slot-1 { left: 14%; top: 20%; border-radius: 50%; }.slot-2 { right: 14%; top: 20%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }.slot-3 { left: 37.5%; bottom: 15%; clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); background: #edbf4d; }
.next-puzzle-piece { position: absolute; z-index: 16; left: 15%; top: 38%; width: 13%; aspect-ratio: 1; padding: 0; background: transparent; transition: transform 150ms ease; }.next-puzzle-piece:hover,.next-puzzle-piece:focus-visible{transform:translateY(-.4rem) rotate(5deg)}.next-puzzle-piece span{position:absolute;inset:12%;background:#9b77aa;filter:drop-shadow(0 .45rem rgba(35,28,40,.25))}.next-puzzle-piece.piece-1 span{border-radius:50%}.next-puzzle-piece.piece-2 span{clip-path:polygon(50% 0,100% 100%,0 100%)}.next-puzzle-piece.piece-3 span{background:#edbf4d;clip-path:polygon(50% 0,62% 35%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 35%)}
.finished-star-art { position: absolute; z-index: 18; left: 42%; top: 24%; width: 18%; height: 42%; padding: 0; background: transparent; transition: transform 150ms ease; animation: art-ready 1.2s ease-in-out infinite alternate; }.finished-star-art:hover,.finished-star-art:focus-visible{transform:translateY(-.5rem) scale(1.04)}.finished-star-art.is-busy{animation:gentle-no 380ms ease}@keyframes art-ready{to{filter:drop-shadow(0 0 .9rem #ffe98e)}}
.puzzle-spark { position: absolute; width: 9%; aspect-ratio: 1; background: #f6c952; clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); animation: sparkle 700ms ease-in-out infinite alternate; }.spark-one{left:4%;top:7%}.spark-two{right:5%;bottom:8%;animation-delay:-.35s}@keyframes sparkle{to{transform:scale(1.35) rotate(20deg)}}
.closet-lamp { position:absolute;left:46%;top:0;width:8%;height:10%;background:#edc857;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);box-shadow:0 1.5rem 2.5rem rgba(255,227,118,.2)}
.paper-garland{position:absolute;left:9%;right:9%;top:7%;height:12%;border-top:.22rem solid #e6c69d;border-radius:50%}.paper-garland i{position:absolute;top:-.1rem;width:6%;height:60%;clip-path:polygon(0 0,100% 0,50% 100%)}.paper-garland i:nth-child(1){left:14%;background:#e77768}.paper-garland i:nth-child(2){left:36%;background:#7db6c0}.paper-garland i:nth-child(3){right:36%;background:#efca57}.paper-garland i:nth-child(4){right:14%;background:#8bb273}

/* Toy closet tic-tac-toe: one contained board session with two themed teams.
   Rockets and fire trucks are the O team on the left; bumblebees, mermaids,
   and trophies are the X team on the right. */

.tic-tac-toe-game-box { position: absolute; z-index: 14; right: 9%; top: 13.5%; width: 19%; height: 16.5%; padding: 0; border: .42rem solid #c98a52; border-radius: 1rem; background: #fff6dc; box-shadow: inset 0 -.55rem rgba(201,138,82,.16), 0 .52rem rgba(46,34,58,.24); transform: rotate(-2deg); touch-action: manipulation; transition: transform 150ms ease, filter 150ms ease; }
.tic-tac-toe-game-box:hover, .tic-tac-toe-game-box:focus-visible { transform: translateY(-.35rem) rotate(0); filter: brightness(1.06); }
.ttt-box-grid { position: absolute; left: 50%; top: 50%; height: 74%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.ttt-box-grid i { position: absolute; border-radius: 99px; background: #c98a52; }
.ttt-box-grid i:nth-child(1) { left: 30%; top: 0; bottom: 0; width: 8%; }
.ttt-box-grid i:nth-child(2) { left: 62%; top: 0; bottom: 0; width: 8%; }
.ttt-box-grid i:nth-child(3) { top: 30%; left: 0; right: 0; height: 8%; }
.ttt-box-grid i:nth-child(4) { top: 62%; left: 0; right: 0; height: 8%; }
.ttt-box-piece { position: absolute; top: 10%; height: 80%; aspect-ratio: 1; }
.ttt-box-piece.is-rocket { left: 3%; }
.ttt-box-piece.is-bee { right: 3%; }

.ttt-piece-art { display: block; width: 100%; height: 100%; overflow: visible; }

.ttt-session { position: absolute; z-index: 120; inset: 0; overflow: hidden; border-radius: clamp(0rem, 2vw, 1.8rem); background: radial-gradient(circle at 50% 45%, #7b6d94, #4b405e 78%); animation: ttt-arrive 260ms ease-out; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.ttt-corner-button { position: absolute; z-index: 8; top: 2.5%; width: 6%; aspect-ratio: 1; padding: 0; border: .28rem solid #fff7e0; border-radius: 50%; color: #7c5147; background: #f3d07e; box-shadow: 0 .36rem rgba(66,44,51,.22); touch-action: manipulation; transition: transform 130ms ease; }
.ttt-corner-button:active { transform: scale(.9); }
.ttt-sound { left: 2.5%; }
.ttt-sound.is-muted { background: #e6dccd; }
.ttt-sound svg { display: block; width: 74%; height: 74%; margin: auto; }
.ttt-speaker { fill: #7c5147; }
.ttt-speaker-wave { fill: none; stroke: #7c5147; stroke-width: 8; stroke-linecap: round; }
/* The grown-up key owns the very top-right corner, so the close button sits beside it. */
.ttt-close { right: 9.5%; font-size: clamp(2rem, 4vw, 3.3rem); line-height: .7; }

.ttt-board { position: absolute; z-index: 3; left: 50%; top: 5%; height: 82%; aspect-ratio: 1; transform: translateX(-50%); border: clamp(.4rem, .9vw, .8rem) solid #b97b55; border-radius: clamp(1rem, 2.4vw, 2rem); background: #fbf0d4; box-shadow: inset 0 0 0 .35rem #fff7df, 0 .9rem 0 rgba(36,26,44,.28); }
.ttt-grid-line { position: absolute; z-index: 1; border-radius: 99px; background: #d29a63; pointer-events: none; }
.ttt-grid-line.is-vertical { top: 5%; bottom: 5%; width: 2.6%; }
.ttt-grid-line.is-horizontal { left: 5%; right: 5%; height: 2.6%; }
.ttt-grid-line.is-vertical.is-first { left: calc(100% / 3 - 1.3%); }
.ttt-grid-line.is-vertical.is-second { left: calc(200% / 3 - 1.3%); }
.ttt-grid-line.is-horizontal.is-first { top: calc(100% / 3 - 1.3%); }
.ttt-grid-line.is-horizontal.is-second { top: calc(200% / 3 - 1.3%); }
.ttt-cells { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.ttt-cell { position: relative; min-width: 0; min-height: 0; margin: 7%; padding: 0; border: 0; border-radius: 1.1rem; background: transparent; touch-action: manipulation; transition: background 140ms ease, box-shadow 140ms ease; }
.ttt-cell.is-empty:hover, .ttt-cell:focus-visible { background: rgba(255,222,128,.32); outline: none; }
.ttt-board.is-choosing .ttt-cell.is-empty, .ttt-session.is-dragging-piece .ttt-cell.is-empty { background: rgba(255,222,128,.24); box-shadow: inset 0 0 0 .22rem rgba(232,185,63,.35); }
.ttt-cell.is-drop-target { background: rgba(132,196,114,.4) !important; box-shadow: 0 0 0 .32rem rgba(105,169,92,.55) !important; }
.ttt-cell.is-wobbling { animation: ttt-wobble 380ms ease; }
.ttt-session.is-round-over .ttt-cell { pointer-events: none; }
.ttt-placed { position: absolute; inset: 2%; display: grid; place-items: center; animation: ttt-land 340ms cubic-bezier(.2,1.4,.4,1); }
.ttt-placed .ttt-piece-art { position: relative; z-index: 1; width: 84%; height: 84%; filter: drop-shadow(0 .3rem .1rem rgba(70,49,46,.25)); }
.ttt-team-mark { position: absolute; inset: 0; pointer-events: none; }
.ttt-mark-o { border: clamp(.4rem, 1.15vw, .85rem) solid rgba(228,87,76,.3); border-radius: 50%; }
.ttt-mark-x::before, .ttt-mark-x::after { position: absolute; content: ""; left: 42%; top: 0; width: 16%; height: 100%; border-radius: 99px; background: rgba(47,165,151,.28); transform: rotate(45deg); }
.ttt-mark-x::after { transform: rotate(-45deg); }
.ttt-session.has-winner .ttt-cell:not(.is-winning) .ttt-placed { opacity: .5; }
.ttt-cell.is-winning .ttt-placed { animation: ttt-happy 520ms ease-in-out 6 alternate; }
.ttt-win-line { position: absolute; z-index: 4; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ttt-win-line line { stroke-width: 12; opacity: .9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: ttt-draw-line 520ms 120ms ease-out forwards; }
.ttt-win-line-o line { stroke: #e4574c; }
.ttt-win-line-x line { stroke: #2fa597; }

.ttt-team { position: absolute; z-index: 4; top: 16%; bottom: 3%; width: 22%; display: flex; flex-direction: column; padding: 1.2% 1.3%; border: .3rem solid rgba(255,248,224,.75); border-radius: clamp(1rem, 2.2vw, 1.8rem); box-shadow: 0 .55rem rgba(36,26,44,.22); transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease, box-shadow 220ms ease; }
.ttt-team-o { left: 2.5%; background: linear-gradient(#ffe6dc, #f7c6b6); }
.ttt-team-x { right: 2.5%; background: linear-gradient(#ddf5ee, #b6e4da); }
.ttt-team.is-turn { box-shadow: 0 0 0 .32rem #ffe27a, 0 0 1.6rem rgba(255,226,122,.7), 0 .55rem rgba(36,26,44,.22); }
.ttt-team.is-waiting { filter: saturate(.55) brightness(.9); transform: scale(.96); }
.ttt-team.is-waiting .ttt-piece { opacity: .6; }
.ttt-team-badge { position: relative; flex: 0 0 18%; display: flex; align-items: center; justify-content: center; gap: 6%; min-height: 0; }
.ttt-team-badge .ttt-team-mark { position: relative; inset: auto; flex: 0 0 auto; height: 74%; aspect-ratio: 1; }
.ttt-team-badge .ttt-mark-o { border-color: #e4574c; }
.ttt-team-badge .ttt-mark-x::before, .ttt-team-badge .ttt-mark-x::after { background: #2fa597; }
.ttt-trophy-shelf { display: flex; align-items: center; height: 60%; min-width: 0; }
.ttt-mini-trophy { height: 100%; aspect-ratio: 1; margin-left: -14%; animation: ttt-land 420ms cubic-bezier(.2,1.4,.4,1); }
.ttt-mini-trophy:first-child { margin-left: 0; }
.ttt-trophy-shelf b { margin-left: .2rem; color: #7c5147; font-size: clamp(1rem, 2.2vw, 1.7rem); }
.ttt-tray { flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap; align-content: space-evenly; justify-content: center; gap: 3% 4%; padding: 3%; border-radius: 1.2rem; background: rgba(255,255,255,.45); box-shadow: inset 0 .25rem rgba(120,80,60,.12); }
.ttt-tray-slot { position: relative; flex: 0 0 47%; aspect-ratio: 1; }
.ttt-piece { position: absolute; inset: 4%; padding: 7%; border: .28rem solid; background: #fffaf2; box-shadow: 0 .32rem 0 rgba(90,60,50,.2); touch-action: none; cursor: grab; transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease; }
.ttt-piece-o { border-color: #ec907f; border-radius: 50%; }
.ttt-piece-x { border-color: #6cc6b9; border-radius: 28%; }
.ttt-piece .ttt-piece-art { pointer-events: none; }
.ttt-team.is-turn .ttt-piece:hover, .ttt-piece:focus-visible { transform: translateY(-.2rem) scale(1.05); outline: none; box-shadow: 0 0 0 .25rem #fff3a6, 0 .32rem 0 rgba(90,60,50,.2); }
.ttt-piece.is-selected { transform: translateY(-.35rem) scale(1.12); box-shadow: 0 0 0 .32rem #ffe27a, 0 0 1.2rem #fff1a0, 0 .5rem 0 rgba(90,60,50,.2); }
.ttt-piece.is-lifted { opacity: .25; }
.ttt-team.is-waiting .ttt-piece { cursor: default; }
.ttt-piece.is-wobbling { animation: ttt-wobble 380ms ease; }
.ttt-tray-silhouette { position: absolute; inset: 4%; border: .22rem dashed rgba(120,84,70,.35); border-radius: 50%; background: rgba(255,255,255,.25); }
.ttt-team-x .ttt-tray-silhouette { border-radius: 28%; }
.ttt-ghost { cursor: grabbing; filter: drop-shadow(0 .7rem .35rem rgba(40,30,40,.3)); }

.ttt-cheer { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3%; padding: 8% 6%; overflow: hidden; border-radius: inherit; text-align: center; animation: ttt-cheer-in 420ms cubic-bezier(.2,1.3,.4,1); }
.ttt-cheer strong { position: relative; z-index: 1; font-size: clamp(1.3rem, 3.2vw, 2.8rem); line-height: 1.05; }
.ttt-cheer-art { position: relative; z-index: 1; width: 56%; aspect-ratio: 1; }
.ttt-cheer-art svg { display: block; width: 100%; height: 100%; }
.ttt-cheer.is-winner { background: radial-gradient(circle at 50% 32%, #fff8d2, #ffd45f 72%); }
.ttt-cheer.is-winner strong { color: #b4402d; text-shadow: 0 .18rem 0 #fff8dc; }
.ttt-cheer.is-winner .ttt-cheer-art { animation: ttt-trophy-bounce 520ms ease-in-out 6 alternate; }
.ttt-cheer.is-try-again, .ttt-cheer.is-tie { background: #fffbf0; }
.ttt-cheer.is-try-again strong { color: #6a5a86; }
.ttt-cheer.is-try-again .ttt-cheer-art { animation: ttt-encourage 900ms ease-in-out 3 alternate; }
.ttt-cheer.is-tie strong { color: #8a6232; }
.ttt-cheer.is-tie .ttt-cheer-art { width: 46%; }
.ttt-cheer.is-tie .ttt-cheer-art path { fill: #f2c754; stroke: #fff6d6; stroke-width: 4; stroke-linejoin: round; }
.ttt-confetti { position: absolute; inset: 0; pointer-events: none; }
.ttt-confetti i { position: absolute; top: -6%; width: 7%; height: 3.5%; border-radius: .15rem; animation: ttt-confetti-fall 1.9s linear 2 both; }
.ttt-confetti i:nth-child(3n+1) { background: #e4574c; }
.ttt-confetti i:nth-child(3n+2) { background: #2fa597; }
.ttt-confetti i:nth-child(3n) { background: #8d6fd1; }
.ttt-confetti i:nth-child(1) { left: 6%; animation-delay: -.1s; }
.ttt-confetti i:nth-child(2) { left: 20%; animation-delay: -.9s; }
.ttt-confetti i:nth-child(3) { left: 34%; animation-delay: -.4s; }
.ttt-confetti i:nth-child(4) { left: 48%; animation-delay: -1.3s; }
.ttt-confetti i:nth-child(5) { left: 62%; animation-delay: -.2s; }
.ttt-confetti i:nth-child(6) { left: 76%; animation-delay: -1.1s; }
.ttt-confetti i:nth-child(7) { left: 88%; animation-delay: -.6s; }
.ttt-confetti i:nth-child(8) { left: 13%; animation-delay: -1.6s; }
.ttt-confetti i:nth-child(9) { left: 41%; animation-delay: -.75s; }
.ttt-confetti i:nth-child(10) { left: 55%; animation-delay: -1.75s; }
.ttt-confetti i:nth-child(11) { left: 69%; animation-delay: -1.45s; }
.ttt-confetti i:nth-child(12) { left: 82%; animation-delay: -.3s; }
.ttt-play-again { position: relative; z-index: 2; flex: 0 0 auto; width: 50%; aspect-ratio: 1; margin-top: 4%; padding: 0; border: .32rem solid #fff8dc; border-radius: 99px; background: #78ae67; box-shadow: 0 .42rem rgba(57,79,51,.25); touch-action: manipulation; animation: ttt-again-in 360ms 650ms both cubic-bezier(.2,1.3,.4,1); transition: transform 130ms ease; }
.ttt-play-again:hover, .ttt-play-again:focus-visible { transform: translateY(-.2rem) scale(1.04); outline: none; }
.ttt-play-again:active { transform: scale(.92); }
.ttt-play-again svg { display: block; width: 70%; height: 70%; margin: auto; }
.ttt-play-again path { fill: none; stroke: #fff8df; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }

@keyframes ttt-arrive { from { opacity: 0; transform: scale(.94); } }
@keyframes ttt-land { 0% { opacity: .4; transform: translateY(-16%) scale(1.25); } 70% { opacity: 1; transform: translateY(2%) scale(.95); } }
@keyframes ttt-happy { to { transform: translateY(-6%) scale(1.08) rotate(-4deg); } }
@keyframes ttt-wobble { 25% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); } }
@keyframes ttt-draw-line { to { stroke-dashoffset: 0; } }
@keyframes ttt-cheer-in { from { opacity: 0; transform: scale(.7); } }
@keyframes ttt-encourage { to { transform: rotate(-8deg) translateY(-4%); } }
@keyframes ttt-trophy-bounce { to { transform: translateY(-6%) rotate(4deg) scale(1.05); } }
@keyframes ttt-confetti-fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(3200%) rotate(560deg); } }
@keyframes ttt-again-in { from { opacity: 0; transform: scale(.6); } }

@media (prefers-reduced-motion: reduce) {
    .ttt-session, .ttt-placed, .ttt-cell.is-winning .ttt-placed, .ttt-cheer, .ttt-cheer.is-winner .ttt-cheer-art, .ttt-cheer.is-try-again .ttt-cheer-art, .ttt-mini-trophy, .ttt-play-again, .ttt-piece.is-wobbling, .ttt-cell.is-wobbling { animation: none; }
    .ttt-confetti { display: none; }
    .ttt-win-line line { animation: none; stroke-dashoffset: 0; }
}

/* Garage */

.garage-scene { background: #9aaeb1; }
.garage-wall { position:absolute;inset:0 0 33%;background:repeating-linear-gradient(0deg,transparent 0 18%,rgba(57,77,80,.09) 18% 20%),#9caaab }
.garage-floor { position:absolute;inset:67% 0 0;background:linear-gradient(110deg,#727d7c,#a4a49a);border-top:.8rem solid #606c6d }
.garage-window { position:absolute;left:8%;top:10%;width:20%;height:27%;border:.7rem solid #6d7778;border-radius:.8rem;background:linear-gradient(#bfe8e7 0 60%,#7db36f 60%);box-shadow:inset 0 0 0 .25rem #e4dcc3 }.garage-window::after{position:absolute;content:"";left:47%;top:0;bottom:0;width:6%;background:#6d7778}.garage-window span{position:absolute;right:9%;top:12%;width:15%;aspect-ratio:1;border-radius:50%;background:#f0ca55}
.peg-board { position:absolute;right:7%;top:9%;width:28%;height:28%;border:.5rem solid #80604a;border-radius:.8rem;background:radial-gradient(circle,#6b5548 0 8%,transparent 9%) 0 0/1.2rem 1.2rem,#c49769 }.peg-board i{position:absolute;top:20%;width:7%;height:58%;border-radius:99px;background:#dce1d6;transform:rotate(25deg)}.peg-board i:nth-child(1){left:20%}.peg-board i:nth-child(2){left:48%;height:45%;background:#e9bb53;transform:rotate(-18deg)}.peg-board i:nth-child(3){right:18%;background:#7e99a1;transform:rotate(42deg)}
.workbench { position:absolute;z-index:5;right:5%;top:40%;width:34%;height:15%;border-radius:.7rem;background:#a86b49;box-shadow:0 .8rem #714a3a }.workbench::before,.workbench::after{position:absolute;content:"";top:80%;width:8%;height:180%;background:#704a3a}.workbench::before{left:9%}.workbench::after{right:9%}.workbench span{position:absolute;left:8%;right:8%;top:38%;height:12%;border-radius:99px;background:#79503e}
.garage-car { position:absolute;z-index:12;left:29%;bottom:17%;width:31%;height:31%;filter:drop-shadow(0 .65rem .2rem rgba(48,48,45,.23));transition:filter 300ms ease,transform 300ms ease }.garage-car.repair-ready{filter:drop-shadow(0 0 1rem rgba(255,226,101,.8));animation:car-ready 850ms ease-in-out infinite alternate}@keyframes car-ready{to{transform:translateY(-.35rem)}}
.missing-wheel-mark { position:absolute;left:14%;bottom:2%;width:25%;aspect-ratio:1;border:.4rem dashed #f1d67a;border-radius:50%;animation:target-glow 900ms ease-in-out infinite alternate }
.garage-tool { position:absolute;z-index:17;left:12%;bottom:14%;width:13%;height:30%;padding:0;background:transparent;transition:transform 150ms ease }.garage-tool:hover,.garage-tool:focus-visible{transform:translateY(-.35rem) rotate(-5deg)}.garage-tool span{position:absolute;inset:9%;filter:drop-shadow(0 .35rem rgba(47,44,43,.2))}
.garage-tool.tool-missingwheel span{border:.75rem solid #4e4a4c;border-radius:50%;background:#f1c75b}.garage-tool.tool-missingwheel span::after{position:absolute;content:"";inset:27%;border-radius:50%;background:#636166}
.garage-tool.tool-needstightening span{left:42%;width:17%;border-radius:99px;background:#e7ddd0;transform:rotate(36deg)}.garage-tool.tool-needstightening span::before{position:absolute;content:"";left:-90%;top:-8%;width:280%;aspect-ratio:1;border:.5rem solid #e7ddd0;border-top-color:transparent;border-radius:50%}
.garage-tool.tool-needspolish span{border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,transparent 13%),#f0b65d;box-shadow:inset 0 0 0 .5rem #d69a49}
.ready-car-pickup { position:absolute;z-index:18;left:27%;bottom:15%;width:35%;height:36%;padding:0;border-radius:50%;background:transparent }.ready-car-pickup.is-busy{animation:gentle-no 380ms ease}.ready-rays{position:absolute;inset:-8%;background:repeating-conic-gradient(from 0deg,#f4d45c 0 5deg,transparent 5deg 22deg);mask:radial-gradient(circle,transparent 0 52%,#000 53%)}
.garage-ramp { position:absolute;z-index:4;left:22%;bottom:5%;width:45%;height:14%;background:#667372;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%) }
.paint-cans { position:absolute;z-index:7;right:9%;bottom:8%;width:18%;height:17% }.paint-cans i{position:absolute;bottom:0;width:28%;height:75%;border-radius:.3rem .3rem .8rem .8rem;border:.25rem solid #6f6260}.paint-cans i:nth-child(1){left:0;background:#e77465}.paint-cans i:nth-child(2){left:34%;height:95%;background:#74afbd}.paint-cans i:nth-child(3){right:0;background:#eec451}
.empty-car-ramp { position:absolute;left:31%;bottom:17%;width:28%;height:17%;border:.35rem dashed rgba(244,222,154,.55);border-radius:50% }.empty-car-ramp span{position:absolute;left:42%;top:20%;width:16%;height:60%;background:#f1d078;clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.6}

@media (prefers-reduced-motion: reduce) {
    .portal-steam,
    .soup-steam,
    .action-arrow,
    .garage-car.repair-ready,
    .finished-star-art,
    .puzzle-spark,
    .hug-heart,
    .flower-head {
        animation: none !important;
    }
}

/* Framework messages */

#blazor-error-ui {
    position: fixed;
    z-index: 1000;
    display: none;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 1rem 4rem 1rem 1.2rem;
    border-radius: 1rem;
    color: #4f2828;
    background: #ffe1d5;
    box-shadow: 0 0.75rem 2rem rgba(67, 45, 45, 0.25);
}

#blazor-error-ui .reload { color: inherit; font-weight: 700; }
#blazor-error-ui .dismiss {
    position: absolute;
    right: 0.8rem;
    top: 0.55rem;
    width: 2.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    color: inherit;
    background: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
}

/* Picnic tray: one sturdy, carried object connecting kitchen nurture to backyard pretend play. */
.picnic-provision-art { display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 .16rem .1rem rgba(84,52,40,.22));pointer-events:none; }
.picnic-apple-body { fill:#df5f53;stroke:#a8433f;stroke-width:3; }
.picnic-apple-leaf { fill:#67984d; }
.picnic-apple-stem { fill:none;stroke:#765039;stroke-width:6;stroke-linecap:round; }
.picnic-apple-shine { fill:none;stroke:#ffd0b1;stroke-width:5;stroke-linecap:round;opacity:.72; }
.picnic-juice-carton { fill:#efb44d;stroke:#a96d3e;stroke-width:3;stroke-linejoin:round; }
.picnic-juice-top { fill:#fff0c5;stroke:#a96d3e;stroke-width:3;stroke-linejoin:round; }
.picnic-juice-side { fill:#db8e43;opacity:.6; }
.picnic-juice-orange { fill:#f7d36a;stroke:#fff0ba;stroke-width:3; }
.picnic-juice-slice { fill:none;stroke:#fff0ba;stroke-width:2; }
.picnic-juice-straw { fill:none;stroke:#72aab3;stroke-width:5;stroke-linecap:round;stroke-linejoin:round; }

.picnic-tray-art { position:absolute;inset:0;display:block;pointer-events:none; }
.picnic-tray-basket { width:100%;height:100%;overflow:visible;filter:drop-shadow(0 .35rem .18rem rgba(77,53,38,.25)); }
.picnic-tray-handle { fill:none;stroke:#916344;stroke-width:13;stroke-linecap:round; }
.picnic-tray-rim { fill:#c98c57;stroke:#81563e;stroke-width:7;stroke-linejoin:round; }
.picnic-tray-weave { fill:none;stroke:#f1c37e;stroke-width:4;stroke-linecap:round;opacity:.86; }
.picnic-tray-visible-item { position:absolute;z-index:2;top:20%;width:27%;height:62%; }
.picnic-tray-visible-item-0 { left:25%;transform:rotate(-7deg); }
.picnic-tray-visible-item-1 { right:23%;transform:rotate(5deg); }

.picnic-tray-object { position:absolute;width:19%;height:18%;transform:translate(-50%,-50%);filter:drop-shadow(0 .28rem .2rem rgba(76,55,43,.16));transition:transform 150ms ease,filter 150ms ease; }
.picnic-tray-mover { position:absolute;z-index:1;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:grab;touch-action:none; }
.picnic-tray-mover:focus-visible,.picnic-tray-mover.is-selected { outline:.3rem solid #fff09b;outline-offset:.08rem;border-radius:42%;filter:brightness(1.08) drop-shadow(0 0 .45rem rgba(255,239,137,.8)); }
.picnic-tray-select-grip { position:absolute;z-index:5;left:-1.15rem;top:50%;width:3rem;height:3rem;padding:0;transform:translateY(-50%);border:.2rem solid #79543e;border-radius:50%;background:#f0c476;box-shadow:0 .2rem .18rem rgba(76,50,37,.24);touch-action:manipulation; }
.picnic-tray-select-grip span { position:absolute;left:25%;right:25%;top:29%;height:30%;border:.2rem solid #8b6042;border-bottom:0;border-radius:50% 50% 0 0; }
.picnic-tray-select-grip:focus-visible,.picnic-tray-select-grip.is-selected { outline:.3rem solid #fff09b;outline-offset:.08rem;filter:brightness(1.08); }
.picnic-tray-object.is-picnic-tray-dragging { z-index:70!important;filter:drop-shadow(0 .65rem .3rem rgba(67,46,38,.3)) drop-shadow(0 0 .5rem #fff0a0);transition:none; }
.picnic-tray-object.is-picnic-tray-dragging .picnic-tray-mover { cursor:grabbing; }
.picnic-tray-provision { position:absolute;z-index:3;left:var(--picnic-x,50%);top:var(--picnic-y,50%);width:28%;height:60%;padding:0;border:0;background:transparent;transform:translate(-50%,-50%) rotate(var(--picnic-rotation,0deg));cursor:grab;touch-action:none; }
.picnic-tray-carry-action { z-index:52;width:72px;height:72px;aspect-ratio:auto; }

.picnic-fridge-provision { padding:.15rem;cursor:grab;touch-action:none; }
.picnic-fridge-provision .picnic-provision-art { width:76%;height:84%;margin:auto; }
.picnic-fridge-juice .picnic-provision-art { width:66%; }
.kitchen-picnic-tray { z-index:25!important; }

.picnic-blanket,.picnic-blanket-drop-target { position:absolute;left:47%;bottom:5%;width:23%;height:27%;border-radius:12% 18% 10% 16%;transform:rotate(-1.5deg); }
.picnic-blanket { z-index:9;border:.3rem solid #fff2d6;background:repeating-conic-gradient(from 0deg,#e96f68 0 25%,#fff0cf 0 50%) 50%/3.4rem 3.4rem;box-shadow:0 .65rem rgba(72,82,54,.18),inset 0 0 0 .25rem rgba(255,255,255,.35);pointer-events:none; }
.picnic-blanket-drop-target { z-index:8;padding:0;border:.3rem solid transparent;background:transparent;touch-action:manipulation; }
.picnic-blanket-drop-target:focus-visible { outline:.3rem solid #fff09b;outline-offset:.15rem; }
.picnic-blanket::after { position:absolute;inset:11%;content:"";border:.18rem dashed rgba(149,80,68,.34);border-radius:14%;pointer-events:none; }
.picnic-blanket-fringe { position:absolute;left:3%;right:3%;bottom:-.7rem;height:.8rem;background:repeating-linear-gradient(90deg,#fff0cf 0 3%,transparent 3% 6%);clip-path:polygon(0 0,100% 0,98% 100%,96% 0,94% 100%,92% 0,90% 100%,88% 0,86% 100%,84% 0,82% 100%,80% 0,78% 100%,76% 0,74% 100%,72% 0,70% 100%,68% 0,66% 100%,64% 0,62% 100%,60% 0,58% 100%,56% 0,54% 100%,52% 0,50% 100%,48% 0,46% 100%,44% 0,42% 100%,40% 0,38% 100%,36% 0,34% 100%,32% 0,30% 100%,28% 0,26% 100%,24% 0,22% 100%,20% 0,18% 100%,16% 0,14% 100%,12% 0,10% 100%,8% 0,6% 100%,4% 0,2% 100%,0 0); }
.picnic-blanket-provision { position:absolute;z-index:4;left:var(--picnic-x,50%);top:var(--picnic-y,50%);width:18%;height:42%;padding:0;border:0;background:rgba(255,248,220,.2);border-radius:50%;transform:translate(-50%,-50%) rotate(var(--picnic-rotation,0deg));cursor:grab;touch-action:none;pointer-events:auto; }
.picnic-hamper { position:absolute;z-index:19;right:2%;bottom:16%;width:9.5%;height:18%;padding:0;border:.32rem solid #80563e;border-radius:.65rem .65rem 1rem 1rem;background:repeating-linear-gradient(90deg,#bc7c4d 0 13%,#d69a5f 13% 25%);box-shadow:inset 0 -.45rem rgba(91,55,39,.2),var(--soft-shadow);touch-action:manipulation; }
.picnic-hamper-handle { position:absolute;left:12%;right:12%;top:-55%;height:72%;border:.42rem solid #80563e;border-bottom:0;border-radius:50% 50% 0 0; }
.picnic-hamper-lid { position:absolute;left:-7%;right:-7%;top:3%;height:21%;border:.28rem solid #80563e;border-radius:.5rem;background:repeating-linear-gradient(90deg,#d69a5f 0 15%,#b97648 15% 28%); }

.backyard-picnic-tray { z-index:25!important; }
.backyard-scene .garden-bed { left:21%;width:27%; }
.backyard-scene .garden-plant { left:32%; }
.backyard-scene .garden-plant.crop-tomato.stage-bloomed { left:31%; }

.backyard-scene [data-picnic-item],.kitchen-scene [data-picnic-item] { touch-action:none;transition:filter 130ms ease; }
.backyard-scene [data-picnic-item]:focus-visible,.kitchen-scene [data-picnic-item]:focus-visible { outline:.25rem solid #fff09b;outline-offset:.08rem; }
.is-picnic-selected { outline:.28rem solid #fff09b!important;outline-offset:.1rem;filter:brightness(1.08) drop-shadow(0 0 .38rem #fff09b); }
.is-picnic-pressed { filter:brightness(1.08); }
.is-picnic-dragging { z-index:75!important;pointer-events:none;cursor:grabbing!important;filter:drop-shadow(0 .55rem .25rem rgba(62,45,37,.3)) drop-shadow(0 0 .55rem #fff09b);transition:none!important; }
.kitchen-scene [data-picnic-item].soft-return,.backyard-scene [data-picnic-item].soft-return { transition:none!important;animation:picnic-soft-return 420ms ease; }
@keyframes picnic-soft-return { 35%{filter:brightness(1.12) drop-shadow(0 0 .42rem #fff09b)} 70%{filter:brightness(.98)} }
.is-picnic-drop-hint,.is-picnic-drop-hover { filter:brightness(1.07);box-shadow:0 0 0 .34rem rgba(255,240,142,.86),0 0 1rem rgba(255,241,151,.6)!important; }

.hands-dock .hands-picnic-tray { inset:-35% -8% -4%; }
.hands-dock .hands-picnic-tray .picnic-tray-visible-item { top:18%;height:68%; }

@media (max-width: 1050px), (max-height: 650px) {
    .picnic-tray-object { width:20%;height:19%; }
    .picnic-tray-select-grip { width:3.25rem;height:3.25rem; }
    .picnic-hamper { right:2%;bottom:16%;width:9.5%;height:18%; }
    .picnic-blanket,.picnic-blanket-drop-target { left:47%;bottom:5%;width:23%;height:27%; }
}

@media (prefers-reduced-motion: reduce) {
    .picnic-tray-object,.backyard-scene [data-picnic-item],.kitchen-scene [data-picnic-item] { transition:none!important; }
}

.blazor-error-boundary {
    padding: 1rem;
    color: #4f2828;
    background: #ffe1d5;
}

.loading-progress {
    position: relative;
    display: block;
    width: 7rem;
    height: 7rem;
    margin: 20vh auto 1rem;
}

.loading-progress circle {
    fill: none;
    stroke: #f0d7aa;
    stroke-width: 0.6rem;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.loading-progress circle:last-child {
    stroke: var(--coral);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 50ms ease-in-out;
}

.loading-progress-text {
    position: absolute;
    inset: calc(20vh + 3rem) 0 auto;
    text-align: center;
    color: var(--ink);
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Opening");
}

/* Kitchen: let the appliances and table explain the pretend-meal loop. */
.kitchen-fridge {
    z-index: 14;
}

.fridge-tray {
    right: 17%;
    bottom: 62%;
    width: 28%;
    height: 33%;
    padding: 0.7rem;
    border: 0.45rem solid #7c9e9b;
    border-radius: 1.35rem 0.75rem 0.75rem 1.35rem;
    background: linear-gradient(110deg, #d8eee3, #f7ffe9 62%, #c5e2d7);
    box-shadow: 0.6rem 0.7rem rgba(72, 93, 88, 0.23), inset 0 0 0 0.25rem rgba(255, 255, 255, 0.65);
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.5rem;
    overflow: hidden;
}

.fridge-tray::before,
.fridge-tray::after {
    position: absolute;
    z-index: 1;
    right: 0.45rem;
    left: 0.45rem;
    height: 0.24rem;
    content: "";
    border-radius: 99px;
    background: rgba(92, 133, 123, 0.35);
    pointer-events: none;
}

.fridge-tray::before { top: 50%; }
.fridge-tray::after { display:none; }

.fridge-shelf-glow {
    position: absolute;
    inset: 0.3rem;
    border-radius: 1rem 0.5rem 0.5rem 1rem;
    box-shadow: inset 0 0.35rem rgba(255, 255, 255, 0.65);
    pointer-events: none;
}

.fridge-choice {
    z-index: 2;
    min-height: 0;
    border: 0.2rem solid rgba(84, 115, 109, 0.44);
    border-radius: 0.75rem;
    background: rgba(245, 255, 231, 0.76);
    box-shadow: 0 0.18rem rgba(92, 133, 123, 0.18);
}

.fridge-choice span { inset: 16%; }
.fridge-empty-slot { border-style:dashed;background:rgba(221,238,215,.38);box-shadow:inset 0 0 0 .2rem rgba(111,146,128,.1);pointer-events:none; }
.fridge-empty-slot::after { position:absolute;inset:28%;content:"";border:.18rem dashed rgba(100,135,120,.3);border-radius:50%; }

.coffee-maker {
    left: 28%;
    top: 28%;
    width: 11%;
    height: 24%;
    border: 0.38rem solid #775346;
    border-radius: 1.1rem 1.1rem 0.55rem 0.55rem;
    background: linear-gradient(90deg, #c96f51, #f0a36b 58%, #b95f49);
    box-shadow: inset 0 -0.6rem rgba(105, 59, 48, 0.16), var(--soft-shadow);
}

.coffee-water {
    position: absolute;
    left: 20%;
    top: 10%;
    width: 60%;
    height: 25%;
    border: 0.2rem solid #6b9ca2;
    border-radius: 0.8rem 0.8rem 0.35rem 0.35rem;
    background: #bce4e3;
}

.coffee-button {
    position: absolute;
    right: 13%;
    top: 42%;
    width: 15%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #f5c84c;
    box-shadow: 0 0.1rem #a77636;
}

.coffee-pot {
    left: 24%;
    top: 39%;
    width: 50%;
    height: 43%;
    border: 0.18rem solid #704d42;
    border-radius: 44% 44% 50% 50%;
    background: #754b3b;
}

.coffee-pot::after {
    position: absolute;
    right: -35%;
    top: 29%;
    width: 36%;
    height: 36%;
    content: "";
    border: 0.18rem solid #704d42;
    border-left: 0;
    border-radius: 0 60% 60% 0;
}

.coffee-cup {
    left: 37%;
    bottom: 2%;
    width: 28%;
    height: 16%;
    border-radius: 0 0 0.45rem 0.45rem;
}

.coffee-serving-cup { left:25%;bottom:-4%;width:3.25rem;height:3.25rem;padding:0;border:0;background:transparent;box-shadow:none;cursor:grab;touch-action:none; }
.coffee-serving-cup::before { position:absolute;left:22%;right:22%;bottom:12%;height:42%;content:"";border-radius:0 0 .48rem .48rem;background:#fff2d4;box-shadow:inset 0 -.28rem #805543,0 .16rem rgba(83,54,44,.2); }
.coffee-serving-cup::after { position:absolute;right:10%;bottom:20%;width:24%;height:27%;content:"";border:.17rem solid #fff2d4;border-left:0;border-radius:0 55% 55% 0; }
.coffee-cup-empty { position:absolute;left:34%;bottom:3%;width:32%;height:15%;border:.16rem dashed rgba(255,242,212,.6);border-radius:0 0 .45rem .45rem; }

.soup-extra { position:absolute;z-index:4;top:-2%;width:3.2rem;height:3.2rem;padding:0;border:0;background:transparent;cursor:grab;touch-action:none; }
.soup-extra span { position:absolute;inset:31%;display:block; }
.soup-extra:not(:disabled):hover, .soup-extra:not(:disabled):focus-visible { filter:brightness(1.14) drop-shadow(0 0 .3rem #fff0a0);outline:0; }
.soup-extra:disabled { pointer-events: none; }
.soup-extra-Corn { left:4%; }
.soup-extra-Carrot { --kitchen-drag-rotation:38deg;left:28%; }
.soup-extra-Apple { left:52%; }
.soup-extra-MashedPotato { left:76%; }
.soup-extra-Corn span { border-radius:45%;background:repeating-linear-gradient(90deg,#f5d15a 0 28%,#dfaa37 28% 44%); }
.soup-extra-Carrot span { border-radius:55% 55% 12% 12%;background:#ec8d45;transform:rotate(38deg); }
.soup-extra-Apple span { border-radius:50%;background:#e46455; }
.soup-extra-MashedPotato span { border-radius:48%;background:#f4dcad;box-shadow:0 -.1rem #fff2c8; }

.kitchen-dining-table {
    position: absolute;
    z-index: 17;
    left: 30%;
    bottom: 5%;
    width: 38%;
    height: 21%;
    border: 0.45rem solid #ae734f;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 35%, #ffe8a9 0 21%, transparent 22%), #dea665;
    box-shadow: inset 0 -0.7rem rgba(129, 74, 51, 0.13), var(--soft-shadow);
}

.kitchen-dining-table::after {
    position: absolute;
    left: 44%;
    bottom: -17%;
    width: 12%;
    height: 23%;
    content: "";
    border-radius: 0 0 0.6rem 0.6rem;
    background: #9d6349;
}

.table-plate {
    position: absolute;
    top: 34%;
    width: 17%;
    aspect-ratio: 1;
    border: 0.22rem solid #d3b278;
    border-radius: 50%;
    background: #fff4d5;
    box-shadow: inset 0 0 0 0.25rem #f1d48d;
}

.plate-left { left: 12%; }
.plate-right { right: 12%; }

.kitchen-table-setting {
    position: absolute;
    z-index: 2;
    left: 37%;
    top: 17%;
    width: 26%;
    height: 55%;
}

.served-bowl {
    left: 11%;
    top: 7%;
    width: 78%;
    height: 67%;
    border: 0.23rem solid #ad5f4c;
    overflow: hidden;
}

.served-tomato, .served-extra, .served-noodle { position: absolute; z-index: 2; display: block; }
.served-tomato { left: 20%; top: 22%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #e66552; }
.served-noodle { width: 35%; height: 38%; border: 0.12rem solid #f2d36f; border-color: #f2d36f transparent transparent; border-radius: 50%; }
.served-noodle.noodle-one { left: 39%; top: 32%; }
.served-noodle.noodle-two { left: 56%; top: 13%; transform: rotate(20deg); }
.served-extra { width: 19%; aspect-ratio: 1; }
.served-extra-Corn { right: 14%; top: 23%; border-radius: 45%; background: repeating-linear-gradient(90deg,#f3cf58 0 28%,#dfa934 28% 44%); }
.served-extra-Carrot { left: 50%; bottom: 8%; border-radius: 55% 55% 12% 12%; background: #ec8d45; transform: rotate(40deg); }
.served-extra-Apple { right: 30%; bottom: 13%; border-radius: 50%; background: #e46455; }
.served-extra-MashedPotato { left: 7%; top: 12%; border-radius: 48%; background: #f4dcad; }

.soup-pot.is-ready-for-tomato::after {
    position: absolute;
    z-index: 3;
    inset: -0.8rem;
    content: "";
    border: 0.35rem dashed #f2c857;
    border-radius: 1.5rem 1.5rem 3.5rem 3.5rem;
    animation: pot-ready-pulse 900ms ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes pot-ready-pulse { to { transform: scale(1.06); opacity: 0.48; } }

.table-drink { z-index:3;bottom:14%;width:3.2rem;height:3.2rem;padding:0;border:0;background:transparent;box-shadow:none; }
.table-drink span { position:absolute;left:24%;right:24%;top:8%;bottom:8%;border:.14rem solid rgba(255,255,255,.82);border-radius:.28rem .28rem .48rem .48rem;box-shadow:inset 0 -.16rem rgba(91,70,56,.16); }
.drink-milk { left: 24%; }
.drink-juice { right: 24%; }
.drink-coffee { left: 4%; }
.drink-milk span { background:#fff7e5;border-top:.3rem solid #75b7c2; }
.drink-juice span { background:#edb448; }
.drink-coffee span { left:18%;right:18%;top:28%;bottom:12%;border-radius:0 0 .45rem .45rem;background:#865b47; }
.drink-coffee span::after { position:absolute;right:-38%;top:12%;width:38%;height:48%;content:"";border:.15rem solid #fff7e5;border-left:0;border-radius:0 60% 60% 0; }

.serve-soup-action {
    left: 43%;
    bottom: 28%;
    width: 10%;
    border: 0.25rem solid #bd794d;
    box-shadow: 0 0 0 0.28rem rgba(255, 245, 206, 0.8), var(--soft-shadow);
}

.serve-soup-action::after {
    position: absolute;
    left: 41%;
    bottom: -43%;
    width: 18%;
    height: 34%;
    content: "";
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: #e6a53e;
}

.noodle-jar { position:absolute;z-index:16;right:17%;bottom:12%;width:12%;height:24%;border:.35rem solid #e8c083;border-radius:.6rem .6rem 1rem 1rem;background:rgba(255,245,216,.86);box-shadow:var(--soft-shadow); }
.noodle-jar.is-empty { background:rgba(255,245,216,.62); }
.noodle-bundle { position:absolute;z-index:2;inset:12% 11% 4%;padding:0;border:0;background:transparent;cursor:grab;touch-action:none; }
.noodle-bundle span { position:absolute;inset:16% 8% 8%;display:grid;place-items:center;color:#e9bb4f;font-size:clamp(1.7rem,4vw,3rem);line-height:1;transform:rotate(90deg); }
.noodle-empty-mark { position:absolute;left:25%;right:25%;bottom:17%;height:31%;border:.18rem dashed rgba(190,153,80,.42);border-radius:50%; }

.kitchen-caddy {
    left: 10%;
    bottom: 10%;
    width: 10%;
    height: 20%;
    border-color: #607f74;
    border-radius: 0.8rem 0.8rem 1.1rem 1.1rem;
    background: linear-gradient(90deg, #84ae83, #b6d392 60%, #7ca47b);
}

.kitchen-caddy .caddy-lid { left: 10%; right: 10%; top: -10%; height: 12%; background: #607f74; }
.kitchen-caddy .caddy-bowl { left: 30%; top: 35%; width: 40%; height: 27%; border-radius: 18% 18% 45% 45%; background: #fff0ba; box-shadow: inset 0 0.2rem #d96b52; }

/* Kitchen play: direct motion first, with tap-then-target as the forgiving alternative. */
.stir-spoon {
    --kitchen-drag-rotation: 28deg;
    z-index: 18;
    left: 57%;
    right: auto;
    top: 29%;
    bottom: auto;
    width: 7%;
    height: 31%;
    transform: rotate(var(--kitchen-drag-rotation));
}

.kitchen-pot-tomato-target {
    position: absolute;
    z-index: 1;
    left: 8%;
    right: 8%;
    top: -5%;
    height: 38%;
    padding: 0;
    border: 0.25rem dashed rgba(255, 232, 124, 0.92);
    border-radius: 50%;
    background: rgba(255, 242, 153, 0.08);
    touch-action: manipulation;
}

.kitchen-pot-tomato-target span {
    position: absolute;
    left: 42%;
    top: 25%;
    width: 16%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(225, 93, 76, 0.52);
}

.kitchen-scene [data-kitchen-draggable] { touch-action:none;cursor:grab;transition:filter 130ms ease,opacity 130ms ease; }
.kitchen-scene [data-kitchen-draggable]:focus-visible { outline:.22rem solid #fff2a3; outline-offset:.12rem; }
.kitchen-scene .is-kitchen-pressed { filter:brightness(1.05); }
.kitchen-scene .is-kitchen-selected { outline:.28rem solid #fff2a3; outline-offset:.14rem; filter:brightness(1.08) drop-shadow(0 0 .35rem rgba(255,242,163,.8)); }
.kitchen-scene .stir-spoon.is-kitchen-selected { outline:0; filter:brightness(1.08) drop-shadow(0 0 .55rem #fff2a3); }
.kitchen-scene .is-kitchen-source-dragging { opacity:.22;filter:brightness(1.05); }
.kitchen-drag-ghost { position:fixed!important;z-index:1000!important;left:var(--kitchen-ghost-left)!important;right:auto!important;top:var(--kitchen-ghost-top)!important;bottom:auto!important;width:var(--kitchen-ghost-width)!important;height:var(--kitchen-ghost-height)!important;margin:0!important;pointer-events:none!important;opacity:1!important;filter:drop-shadow(0 0 .72rem #fff2a3) drop-shadow(0 .42rem .2rem rgba(70,49,46,.28));transform:var(--kitchen-ghost-transform,none)!important;transform-origin:center;transition:none!important; }
.kitchen-scene [data-kitchen-draggable].soft-return { animation:kitchen-soft-return 420ms ease; }
@keyframes kitchen-soft-return { 35%{filter:brightness(1.12) drop-shadow(0 0 .42rem #fff2a3)} 70%{filter:brightness(.98)} }
.kitchen-scene:is(.is-hinting-kitchen-pot,.is-over-kitchen-pot) .soup-pot,
.kitchen-scene:is(.is-hinting-kitchen-table,.is-over-kitchen-table) .kitchen-dining-table,
.kitchen-scene:is(.is-hinting-kitchen-clear,.is-over-kitchen-clear) .kitchen-caddy,
.kitchen-scene:is(.is-hinting-kitchen-fridge,.is-over-kitchen-fridge) .fridge-tray { box-shadow:0 0 0 .32rem rgba(255,241,159,.72),var(--soft-shadow); filter:brightness(1.07); }
.kitchen-scene:is(.is-over-kitchen-pot,.is-over-kitchen-table,.is-over-kitchen-clear,.is-over-kitchen-fridge) [data-kitchen-target] { transition:filter 100ms ease,box-shadow 100ms ease; }
.kitchen-scene.is-stirring-kitchen-pot .soup-surface { animation:kitchen-soup-swirl 420ms linear infinite; }
@keyframes kitchen-soup-swirl { 50% { transform:scaleX(.92) rotate(2deg); filter:brightness(1.16); } }
.served-bowl { padding:0; border:0; cursor:grab; }
.table-drink { cursor:grab; }
.caddy-reset-mark { position:absolute; left:26%; top:7%; width:48%; height:28%; }
.caddy-reset-mark path { fill:none; stroke:#d95e58; stroke-width:12; stroke-linecap:round; }
.fridge-ingredient.ingredient-Corn span::before { content:""; position:absolute; left:21%; right:21%; top:-19%; height:26%; background:#72a850; clip-path:polygon(0 100%,35% 0,50% 100%,71% 0,100% 100%); }
.fridge-ingredient.ingredient-Carrot span::before { content:""; position:absolute; left:16%; top:-20%; width:70%; height:34%; background:#70a650; clip-path:polygon(0 100%,25% 0,47% 100%,72% 0,100% 100%); transform:rotate(-42deg); }
.fridge-ingredient.ingredient-Apple span::before { content:""; position:absolute; left:50%; top:-15%; width:36%; height:26%; border-radius:90% 0 90% 0; background:#6ba54c; transform:rotate(-32deg); }
.fridge-ingredient.ingredient-MashedPotato span::after { content:""; position:absolute; left:24%; right:24%; top:16%; height:18%; border-top:.16rem solid #fff7d8; border-radius:50%; }

/* Garage play: one stable car, visible tool homes, and physical replay. */
.garage-scene .garage-window { left:10%; }
.garage-scene .peg-board { right:13%;width:25%; }
.garage-scene .workbench { right:13%;width:25%; }
.garage-scene .paint-cans { display:none; }
.garage-scene .garage-car { left:30%;bottom:18%;width:32%;height:31%; }
.garage-scene .garage-ramp { left:24%;width:44%; }
.garage-wheel-storage { position:absolute;z-index:16;left:13%;bottom:16%;width:12%;height:24%;border:.32rem solid #75614f;border-radius:1.2rem;background:linear-gradient(#bf895c,#8c624b);box-shadow:inset 0 -.55rem rgba(74,49,41,.2),var(--soft-shadow); }
.wheel-cradle { position:absolute;left:12%;right:12%;bottom:8%;height:50%;border:.28rem dashed rgba(255,232,161,.72);border-radius:50%; }
.garage-part,.garage-scene .garage-tool,.garage-attached-wheel { padding:0;touch-action:none;cursor:grab; }
.loose-garage-wheel { position:absolute;z-index:2;inset:12%;border:.55rem solid #4e4a4c;border-radius:50%;background:#f1c75b;box-shadow:0 .35rem rgba(47,44,43,.2); }
.loose-garage-wheel span,.garage-attached-wheel span { position:absolute;inset:28%;border-radius:50%;background:#636166; }
.garage-scene .garage-wrench { --garage-drag-rotation:-24deg;left:auto;right:25%;top:14%;bottom:auto;width:8%;height:17%;transform:rotate(var(--garage-drag-rotation)); }
.garage-wrench span { position:absolute;left:43%;top:5%;width:18%;height:90%;border-radius:99px;background:#e7ddd0;filter:drop-shadow(0 .3rem rgba(47,44,43,.2)); }
.garage-wrench span::before { position:absolute;content:"";left:-105%;top:-4%;width:310%;aspect-ratio:1;border:.42rem solid #e7ddd0;border-top-color:transparent;border-radius:50%; }
.garage-scene .garage-sponge { --garage-drag-rotation:8deg;left:auto;right:17%;top:42%;bottom:auto;width:9%;height:14%;transform:rotate(var(--garage-drag-rotation)); }
.garage-sponge span { position:absolute;inset:8%;border-radius:42%;background:radial-gradient(circle at 28% 25%,#fff 0 8%,transparent 9%),#f0b65d;box-shadow:inset 0 0 0 .35rem #d69a49,0 .3rem rgba(47,44,43,.2); }
.garage-sponge-bucket { position:absolute;z-index:7;right:16%;bottom:18%;width:11%;height:14%;border:.28rem solid #607b80;border-radius:.4rem .4rem 1rem 1rem;background:linear-gradient(90deg,#77a8ae,#b7d7d5 62%,#6c979d);box-shadow:var(--soft-shadow); }
.garage-car-body-target { position:absolute;z-index:2;left:22%;top:18%;width:68%;height:48%;border-radius:46% 48% 22% 22%; }
.garage-axle-target { position:absolute;z-index:3;left:7%;bottom:-5%;width:35%;height:47%;border-radius:50%; }
.garage-attached-wheel { position:absolute;z-index:5;left:14%;bottom:0;width:24%;aspect-ratio:1;border:.48rem solid transparent;border-radius:50%;background:transparent; }
.garage-attached-wheel span { inset:31%; }
.garage-car .missing-wheel-mark { z-index:5;left:13%;bottom:0;width:25%; }
.garage-car .missing-wheel-mark { pointer-events:none; }
.garage-car .toy-car-art.is-missing-wheel .car-wheel:nth-of-type(1),.garage-car .toy-car-art.is-missing-wheel .car-wheel-hub:nth-of-type(2) { opacity:0; }
.garage-car.is-dusty .toy-car-art { filter:saturate(.78) sepia(.16); }
.garage-car.is-clean .toy-car-art { filter:drop-shadow(0 0 .38rem rgba(255,239,151,.55)); }
.garage-car-pickup { position:absolute;z-index:19;left:46%;bottom:11%;width:10%;height:12%;padding:0;border:.25rem solid #9a704f;border-radius:1rem;background:#ffe0ae;box-shadow:var(--soft-shadow);touch-action:manipulation; }
.garage-car-pickup span::before,.garage-car-pickup span::after { position:absolute;content:"";bottom:17%;width:29%;height:54%;border-radius:45% 45% 55% 55%;background:#dba27a; }
.garage-car-pickup span::before { left:18%;transform:rotate(10deg); }
.garage-car-pickup span::after { right:18%;transform:rotate(-10deg); }
.garage-car-pickup.is-busy { animation:gentle-no 380ms ease; }
.garage-scene .empty-car-ramp { z-index:8;left:30%;bottom:18%;width:32%;height:22%;border:.38rem dashed rgba(255,232,161,.72); }
.garage-scene [data-garage-draggable] { transition:filter 130ms ease,transform 150ms ease; }
.garage-scene [data-garage-draggable]:focus-visible { outline:.24rem solid #fff2a3;outline-offset:.12rem; }
.garage-scene .is-garage-pressed { filter:brightness(1.05); }
.garage-scene .is-garage-selected { outline:.28rem solid #fff2a3;outline-offset:.13rem;filter:brightness(1.08) drop-shadow(0 0 .42rem rgba(255,242,163,.84)); }
.garage-scene .garage-wrench.is-garage-selected,.garage-scene .garage-sponge.is-garage-selected { outline:0;filter:brightness(1.1) drop-shadow(0 0 .58rem #fff2a3); }
.garage-scene .is-garage-dragging { z-index:60;pointer-events:none;cursor:grabbing;filter:drop-shadow(0 0 .72rem #fff2a3) drop-shadow(0 .42rem .2rem rgba(45,43,41,.3));transition:none; }
.garage-scene:is(.is-hinting-garage-axle,.is-over-garage-axle) .garage-axle-target,.garage-scene:is(.is-hinting-garage-hub,.is-over-garage-hub) .garage-attached-wheel,.garage-scene:is(.is-hinting-garage-body,.is-over-garage-body) .garage-car-body-target,.garage-scene:is(.is-hinting-garage-cradle,.is-over-garage-cradle) .garage-wheel-storage { box-shadow:0 0 0 .34rem rgba(255,241,159,.8),0 0 1rem rgba(255,241,159,.52); }
.garage-scene:is(.is-hinting-garage-axle,.is-over-garage-axle) .garage-axle-target,.garage-scene:is(.is-hinting-garage-body,.is-over-garage-body) .garage-car-body-target { border:.28rem dashed rgba(255,241,159,.9); }
.garage-scene.shows-garage-bubbles .garage-car::after { position:absolute;z-index:8;inset:5% 8% 20%;content:"";background:radial-gradient(circle at 18% 62%,rgba(255,255,255,.92) 0 4%,transparent 5%),radial-gradient(circle at 46% 24%,rgba(211,247,245,.92) 0 5%,transparent 6%),radial-gradient(circle at 72% 58%,rgba(255,255,255,.9) 0 4%,transparent 5%);animation:garage-bubbles 600ms ease-out both;pointer-events:none; }
.garage-scene.shows-garage-turn .garage-attached-wheel span { animation:garage-hub-turn 520ms ease-in-out; }
.garage-scene.shows-garage-snap .garage-car { animation:garage-car-snap 420ms ease-out; }
@keyframes garage-bubbles { to { transform:translateY(-1rem) scale(1.12);opacity:0; } }
@keyframes garage-hub-turn { to { transform:rotate(150deg); } }
@keyframes garage-car-snap { 50% { transform:translateY(-.22rem); } }

@media (max-aspect-ratio: 4 / 3) {
    .world-scene {
        width: 100vw;
        border-radius: 0;
    }

    .home-button {
        width: 3.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}