/* Cartoon scenes (see js/scenes.js). Each is a few CSS shapes + small SVGs. All scoped to .layer so they never leak into screens. */
.layer > * { position: absolute; }
.layer .sky { inset: 0; background: linear-gradient(180deg, var(--sky-1), var(--sky-2) 75%); }

/* Sun with slowly turning rays */
.layer .sun { width: 20vmin; height: 20vmin; }
.layer .sun .rays { position: absolute; inset: -40%; border-radius: 50%; animation: spin 40s linear infinite;
  background: repeating-conic-gradient(from 0deg, #ffe66b55 0 12deg, transparent 12deg 30deg); }
.layer .sun .disc { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff7b0, #ffd600 60%, #ffb300); box-shadow: 0 0 0 1.5vmin #ffe66b66, 0 0 30px #ffd60088; }
.layer .sun .disc span { position: absolute; left: 30%; top: 36%; width: 40%; height: 18%; border-bottom: 3px solid #e59d00; border-radius: 0 0 50% 50%; }
.layer .sun .disc span::before, .sun .disc span::after { content: ""; position: absolute; top: -70%; width: 14%; height: 55%; border-radius: 50%; background: #c47a00; }
.layer .sun .disc span::before { left: 8%; } .layer .sun .disc span::after { right: 8%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Clouds drift */
.layer .cloud { width: 30vmin; height: 10vmin; border-radius: 10vmin; background: #fff; opacity: .95; animation: drift var(--dur) linear infinite; animation-delay: var(--delay); box-shadow: 0 6px 0 #0000000d; }
.layer .cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.layer .cloud::before { width: 13vmin; height: 13vmin; left: 4vmin; top: -6vmin; }
.layer .cloud::after { width: 10vmin; height: 10vmin; left: 14vmin; top: -4vmin; }
.layer .cloud.small { transform: scale(.65); opacity: .85; }
@keyframes drift { from { left: -40vmin; } to { left: 110vw; } }

.layer .hills { left: 0; bottom: 0; width: 100%; height: 34dvh; }
.layer .tree { bottom: 8dvh; width: 26vmin; height: 39vmin; }
.layer .flower { width: 3.4vmin; height: 3.4vmin; transform-origin: 50% 300%; animation: sway 4s ease-in-out infinite; animation-delay: var(--d); }
.layer .flower::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--f); box-shadow: 0 -1.7vmin 0 -.3vmin var(--f), 0 1.7vmin 0 -.3vmin var(--f), 1.7vmin 0 0 -.3vmin var(--f), -1.7vmin 0 0 -.3vmin var(--f); }
.layer .flower::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: #ffe066; }
@keyframes sway { 50% { transform: rotate(9deg); } }
.layer .sparkle { color: #fff; font-size: 3vmin; animation: twinkle 2.6s ease-in-out infinite; animation-delay: var(--d); text-shadow: 0 0 8px #fff; }

/* Rooms */
.layer .wall { inset: 0; background: repeating-linear-gradient(90deg, var(--w1) 0 7vw, var(--w2) 7vw 14vw); }
.layer .wall.dots { background: radial-gradient(circle, var(--w2) 0 1.6vmin, transparent 1.7vmin) 0 0 / 9vmin 9vmin, var(--w1); }
.layer .floor { left: 0; right: 0; bottom: 0; height: 15dvh; background: repeating-linear-gradient(90deg, var(--f1) 0 18vw, var(--f2) 18vw 36vw); box-shadow: inset 0 6px 0 #0000001a; }
.layer .window { right: 6%; top: 15%; width: 34vmin; height: 40vmin; border: 2.2vmin solid #fff; border-radius: 4vmin; overflow: hidden; box-shadow: 0 0 0 1vmin #ffd1e8, 0 8px 20px #0002; }
.layer .window .hills { height: 45%; }
.layer .window i { position: absolute; left: 50%; top: 0; bottom: 0; width: 2vmin; margin-left: -1vmin; background: #fff; }
.layer .shelf { left: 6%; right: 50%; top: 21%; height: 7vmin; border-radius: 1vmin; background: #c48b4c; box-shadow: 0 6px 0 #8d5a2b; display: flex; align-items: flex-end; gap: 6%; padding: 0 6%; }
.layer .shelf span { flex: 1; aspect-ratio: .7; max-height: 180%; border-radius: 4px 4px 0 0; background: var(--c); transform: translateY(-100%); box-shadow: inset 0 0 0 3px #fff6; }
.layer .rainbow { left: 50%; top: 6%; width: 70vmin; margin-left: -35vmin; opacity: .9; }
.layer .blocks { left: 6%; bottom: 15dvh; display: flex; align-items: flex-end; gap: 2vmin; }
.layer .blocks b { display: block; width: 9vmin; height: 9vmin; border-radius: 1.4vmin; background: var(--c); box-shadow: inset -1vmin -1vmin 0 #0002, inset 1vmin 1vmin 0 #fff5; transform: translateY(calc(var(--i) * -1vmin)); }

/* Bathroom */
.layer .tiles { inset: 0; background: linear-gradient(#ffffffaa 2px, transparent 2px) 0 0 / 11vmin 11vmin, linear-gradient(90deg, #ffffffaa 2px, transparent 2px) 0 0 / 11vmin 11vmin, linear-gradient(180deg, #c7f2ff, #8be0ff); }
.layer .bubble { bottom: -10vmin; width: var(--s); height: var(--s); border-radius: 50%; animation: rise var(--dur) linear infinite; animation-delay: var(--d);
  background: radial-gradient(circle at 32% 28%, #ffffffcc 0 10%, #ffffff33 11% 70%, #ffffff88 100%); box-shadow: inset 0 0 0 2px #ffffffaa; }
@keyframes rise { to { transform: translateY(-120dvh) translateX(6vw); } }
.layer .tub { left: 0; right: 0; bottom: 0; height: 16dvh; background: linear-gradient(#fff, #e3f6ff); border-radius: 50% 50% 0 0 / 40% 40% 0 0; box-shadow: inset 0 1.4vmin 0 #d2eefc; }
.layer .tub::before { content: ""; position: absolute; left: 8%; right: 8%; top: -3vmin; height: 6vmin; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, transparent 32%) 0 0 / 6vmin 6vmin; }

/* Studio splats */
.layer .splat { width: 26vmin; height: 26vmin; opacity: .9; animation: sway 6s ease-in-out infinite; animation-delay: var(--d); }

/* Road & city */
.layer .city { left: 0; right: 0; bottom: 18dvh; height: 30dvh; display: flex; align-items: flex-end; gap: 1.5vw; padding: 0 2vw; }
.layer .city b { flex: 1; height: var(--h); background: var(--c); border-radius: 1vmin 1vmin 0 0; background-image: radial-gradient(#fff9 0 25%, transparent 27%); background-size: 24% 18%; }
.layer .road { left: 0; right: 0; bottom: 0; height: 18dvh; background: #4b4f63; box-shadow: inset 0 1.6vmin 0 #22c55e; }
.layer .road i { position: absolute; left: 0; right: 0; top: 55%; height: 1.2vmin; background: repeating-linear-gradient(90deg, #ffd600 0 8vw, transparent 8vw 14vw); animation: roadmove 1.4s linear infinite; }
@keyframes roadmove { to { background-position: -14vw 0; } }

/* Farm */
.layer .barn { right: 4%; bottom: 18dvh; width: 30vmin; height: 28vmin; }
.layer .fence { left: 0; right: 0; bottom: 10dvh; height: 7vmin; display: flex; justify-content: space-around; border-top: 1.4vmin solid #fff; border-bottom: 1.4vmin solid #fff; }
.layer .fence i { width: 2.4vmin; height: 10vmin; margin-top: -2.4vmin; background: #fff; border-radius: 1vmin 1vmin 0 0; box-shadow: 0 3px 0 #0001; }