/* Toy-local scene layers. Load after gizmo.css. All rules are scoped to Gizmo;
   the accepted Bounce Buddy and Cloud Cruiser transforms are intentionally untouched. */
.gizmo-toy-scene{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.gizmo-toy-scene[hidden]{display:none!important}
.gizmo-play-object[data-toy-polish=true] svg{display:block;width:100%;height:100%;overflow:visible}

/* The artwork plane is wider than tall-phone viewports. Clamp only changed
   props into that visible crop, and carry their paired character layers with
   them. Accepted Bounce Buddy / Cloud Cruiser coordinates remain untouched. */
.gizmo-room-stage{--gizmo-tunnel-safe-shift:min(0px,calc(17% - var(--gizmo-crop,0px) - 8px));--gizmo-fort-safe-shift:min(0px,calc(20% - var(--gizmo-crop,0px) - 8px));--gizmo-telescope-safe-shift:max(0px,calc(var(--gizmo-crop,0px) + 8px - 13%))}
.gizmo-room-stage .gizmo-play-object[data-item=bubble-trouble]{left:min(60%,calc(75% - var(--gizmo-crop,0px) - 8px))}
.gizmo-room-stage .gizmo-play-object[data-item=tiny-turntable]{left:min(43%,calc(64% - var(--gizmo-crop,0px) - 8px))}
.gizmo-room-stage .gizmo-play-object[data-item=pocket-racer]{left:min(47%,calc(57% - var(--gizmo-crop,0px) - 8px))}
.gizmo-room-stage .gizmo-play-object[data-item=stargazer]{left:calc(13% + var(--gizmo-telescope-safe-shift))}
.gizmo-room-stage .gizmo-play-object[data-item=peekaboo-tunnel],.gizmo-room-stage .gizmo-toy-interior[data-item=peekaboo-tunnel]{left:calc(35% + var(--gizmo-tunnel-safe-shift))}
.gizmo-room-stage .gizmo-play-object[data-item=pillow-fort],.gizmo-room-stage .gizmo-toy-interior[data-item=pillow-fort]{left:calc(32% + var(--gizmo-fort-safe-shift))}

/* A physically spinning impeller replaces the baked-in blades. The old drawn
   bubbles are masked out; every new bubble leaves the same blower opening. */
.gizmo-room-stage[data-activity=bubbles] .gizmo-play-object>.gizmo-isolated-product{clip-path:polygon(0 49%,59% 47%,83% 55%,83% 100%,0 100%)!important}
.gizmo-bubble-fan{position:absolute;left:45.5%;top:57%;width:26%;aspect-ratio:1;border-radius:50%;background:#34233e;transform:scaleX(.77);box-shadow:inset 0 0 2px #0009}
.gizmo-bubble-rotor{position:absolute;inset:9%;border-radius:50%;animation:gizmo-impeller-spin .45s linear infinite}
.gizmo-bubble-rotor b{position:absolute;left:41%;top:0;width:23%;height:49%;border-radius:70% 20% 65% 25%;background:linear-gradient(90deg,#7655b6,#b495e5);transform-origin:40% 100%;transform:rotate(0deg)}
.gizmo-bubble-rotor b:nth-child(2){transform:rotate(60deg)}.gizmo-bubble-rotor b:nth-child(3){transform:rotate(120deg)}.gizmo-bubble-rotor b:nth-child(4){transform:rotate(180deg)}.gizmo-bubble-rotor b:nth-child(5){transform:rotate(240deg)}.gizmo-bubble-rotor b:nth-child(6){transform:rotate(300deg)}
.gizmo-bubble-hub{position:absolute;inset:37%;border-radius:50%;background:radial-gradient(circle at 33% 30%,#fff1ba,#dba460 65%,#976339);border:1px solid #f3d48b}
.gizmo-room .gizmo-play-object .gizmo-toy-effects[data-effect=bubbles]{z-index:2;overflow:visible}
.gizmo-room .gizmo-play-object .gizmo-toy-effects[data-effect=bubbles] i{left:58.5%;top:59%;width:calc(14% + var(--i)*1.2%);height:auto;aspect-ratio:1;border:1px solid #e5f8ffca;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0 4%,#fff8 5% 9%,transparent 18%),radial-gradient(circle at 70% 77%,#f2bfff80,transparent 38%),radial-gradient(circle at 25% 80%,#92efd777,transparent 37%),radial-gradient(circle at 76% 25%,#f7d39077,transparent 38%);box-shadow:inset 1px 1px 3px #fff8,inset -1px -1px 3px #c8b5ffbb;opacity:0;animation:gizmo-blower-bubble 2.8s ease-out calc(var(--i)*.29s) infinite;animation-direction:normal}
@keyframes gizmo-impeller-spin{to{transform:rotate(360deg)}}
@keyframes gizmo-blower-bubble{0%{opacity:0;transform:translate(-50%,0) scale(.2)}10%{opacity:.95}80%{opacity:.8}100%{opacity:0;transform:translate(calc(-50% + (var(--i) - 5)*30%),-620%) scale(1.18)}}

/* Spin in the record's horizontal plane, then foreshorten the whole plane.
   The tonearm and spindle remain still, making the revolution unmistakable. */
.gizmo-record-plane{position:absolute;left:19%;top:27.5%;width:54.8%;height:14%;border-radius:50%;filter:drop-shadow(0 1px 1px #2b163e66)}
.gizmo-spinning-record{position:absolute;left:0;top:-94%;width:100%;height:288%;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#a575de 0 3%,#8554c3 3.5% 4.5%,#a575de 5% 8%);transform:scaleY(.35);overflow:hidden}
.gizmo-spinning-record::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg 12deg,#f4c9ffb3 15deg 23deg,transparent 26deg 162deg,#ccb3f08c 169deg 182deg,transparent 188deg);animation:gizmo-vinyl-revolution 1.1s linear infinite}
.gizmo-spinning-record b{position:absolute;inset:32%;border-radius:50%;background:conic-gradient(#ffd3d5 0 65deg,#ec90ad 65deg 180deg,#ffd3d5 180deg 245deg,#ec90ad 245deg);border:1px solid #ffdce6;animation:gizmo-vinyl-revolution 1.1s linear infinite}
.gizmo-record-spindle{position:absolute;left:48%;top:35%;width:5%;height:33%;border-radius:45%;background:linear-gradient(90deg,#ad6516,#ffe29b,#a76720)}
.gizmo-record-tonearm{position:absolute;left:55.5%;top:33.5%;width:24%;height:3%;border-radius:3px;background:linear-gradient(#987251,#32221d);transform:rotate(-9deg);transform-origin:100% 50%;box-shadow:0 1px 2px #0005}
.gizmo-record-tonearm::after{content:'';position:absolute;left:-5%;top:-35%;width:22%;height:175%;border-radius:2px;background:#372623}
@keyframes gizmo-vinyl-revolution{to{transform:rotate(360deg)}}

/* Back art, an aperture-clipped character, and front rim are three real layers.
   The aperture stays fixed while Gizmo retreats sideways behind its edge. */
.gizmo-room-stage[data-activity=peekaboo] .gizmo-toy-interior{z-index:1}
.gizmo-room-stage[data-activity=peekaboo] .gizmo-play-object{z-index:3;mask-image:radial-gradient(ellipse 19.7% 25.5% at 27% 51.5%,transparent 96%,#000 100%);-webkit-mask-image:radial-gradient(ellipse 19.7% 25.5% at 27% 51.5%,transparent 96%,#000 100%)}
.gizmo-room .gizmo-room-stage[data-activity=peekaboo] .gizmo-character{left:calc(33.5% + var(--gizmo-tunnel-safe-shift));top:60.8%;width:29%;z-index:2;clip-path:ellipse(33% 41% at 50% 50%);animation:none!important;transform:none!important;transition:none;opacity:1}
.gizmo-room .gizmo-room-stage[data-activity=peekaboo] .gizmo-character .gizmo-character-motion{animation:gizmo-tunnel-occlusion 3s ease-in-out infinite!important;transform-origin:50% 78%}
@keyframes gizmo-tunnel-occlusion{0%,12%,92%,100%{translate:0 0;scale:.94}35%,57%{translate:88% 4%;scale:.8}73%,84%{translate:-3% 0;scale:.94}}

/* One continuous blanket silhouette, with cushions always in front of Gizmo.
   No opacity changes and no competing whole-body motion inside the fort. */
.gizmo-room-stage[data-activity=fort] .gizmo-toy-interior{z-index:1}
.gizmo-room-stage[data-activity=fort] .gizmo-play-object{z-index:3;mask-image:none;-webkit-mask-image:none;clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,47% 29%,23% 64%,76% 64%,47% 29%)}
.gizmo-room .gizmo-room-stage[data-activity=fort] .gizmo-character{left:calc(45.5% + var(--gizmo-fort-safe-shift));top:62%;width:21%;z-index:2;animation:none!important;transform:none!important;transition:none;clip-path:polygon(50% 0,100% 71%,100% 100%,0 100%,0 71%);opacity:1}
.gizmo-room .gizmo-room-stage[data-activity=fort] .gizmo-character .gizmo-character-motion{animation:gizmo-fort-breath 4s ease-in-out infinite!important;transform-origin:50% 90%}
@keyframes gizmo-fort-breath{0%,100%{rotate:-5deg;scale:1 .94}50%{rotate:-5deg;scale:1.012 .96}}

/* Remove the baked-in palette brush, not just its handle, then draw exactly
   one complete moving brush. This path does not depend on image decode timing. */
.gizmo-room-stage[data-activity=painting] .gizmo-play-object[data-toy-polish=true]>.gizmo-isolated-product{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,57% 27%,73% 27%,91% 77%,76% 79%,57% 27%)!important}
.gizmo-painting-brush{position:absolute;left:38%;top:28%;width:47%;height:49.6%;transform-origin:85% 89%;animation:gizmo-single-brush-stroke 1.25s ease-in-out infinite;filter:drop-shadow(0 1px 1px #4f2f3440)}
@keyframes gizmo-single-brush-stroke{0%,100%{transform:rotate(-20deg)}35%{transform:rotate(-35deg)}70%{transform:rotate(-9deg)}}

/* The sky replaces sunset only within the existing window. Interface controls
   keep their own layers and every night pixel leaves with the toy scene. */
.gizmo-room-stage[data-gizmo-stargazing=true] .gizmo-welcome{visibility:hidden}
.gizmo-stargazer-dim{position:absolute;inset:0;background:linear-gradient(#0b122a8f,#11172c98 52%,#16182a82)}
.gizmo-night-window{position:absolute;left:35.3%;top:10.7%;width:56.3%;height:29.4%;clip-path:polygon(0 8.6%,100% 0,100% 100%,0 100%);overflow:hidden;filter:drop-shadow(0 0 8px #081225)}
.gizmo-night-window svg{display:block;width:100%;height:100%;object-fit:cover}
.gizmo-room-stage[data-gizmo-stargazing=true] .gizmo-character,.gizmo-room-stage[data-gizmo-stargazing=true] .gizmo-play-object{z-index:2;filter:drop-shadow(0 0 4px #b7d9ff44) brightness(.91)}
.gizmo-room .gizmo-room-stage[data-activity=telescope] .gizmo-character{left:calc(33% + var(--gizmo-telescope-safe-shift));animation:gizmo-telescope-look 3s ease-in-out infinite!important;transform-origin:55% 80%;transition:none}
@keyframes gizmo-telescope-look{0%,100%{transform:translate(-9%,4%) rotate(-7deg)}30%,75%{transform:translate(-12%,5%) rotate(-9deg)}}
.gizmo-polaris-halo{animation:gizmo-polaris-glow 3s ease-in-out infinite}
@keyframes gizmo-polaris-glow{50%{opacity:.35}}

/* Real full-loop geometry is updated by requestAnimationFrame. No scaleX flip,
   alternating direction or waypoint rotation is applied to the car. */
.gizmo-racing-scene{position:absolute;left:0;top:13%;width:100%;height:74%;filter:drop-shadow(0 3px 2px #70411e38)}
.gizmo-racing-scene [data-racer-car]{will-change:transform;transform-box:view-box}

/* The physical button is just left of Gizmo and in the foreground. The music
   controller retains its exact 800 ms tap / 10 second party timing. */
.gizmo-room-stage .gizmo-play-object[data-item=disco-button]{left:29%;top:62%;width:23%;z-index:3}
.gizmo-room-stage[data-activity=disco] .gizmo-play-object[data-toy-polish=true]>.gizmo-isolated-product{clip-path:inset(57% 0 0 0)!important}
.gizmo-toy-mirror-ball{position:absolute;left:38%;top:3%;width:58%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid #fff4d8;box-shadow:0 0 6px #f3ddff7a;isolation:isolate}
.gizmo-toy-mirror-grid,.gizmo-toy-mirror-shine{position:absolute;inset:0;border-radius:50%}
.gizmo-toy-mirror-grid,.gizmo-room-stage .gizmo-disco-ball-mirrors{background-color:#b3bfce;background-image:repeating-linear-gradient(0deg,transparent 0 12%,#35435a 12% 13.5%,#f7e8e085 13.5% 14%),repeating-linear-gradient(90deg,#ecf7ff 0 9%,#617a99 9.5% 18%,#f3c6ea 18.5% 27%,#d5e6ee 27.5% 36%,#f8efc9 36.5% 45%,#6c718c 45.5% 54%);background-size:100% 100%,220% 100%;animation:gizmo-mirrored-surface-turn 4.8s linear infinite}
.gizmo-toy-mirror-shine{background:radial-gradient(ellipse at 28% 23%,#fff 0,#fff9 9%,transparent 32%,#151b3a55 69%,#151b3aee 100%);box-shadow:inset 0 0 4px #fff9}
.gizmo-room-stage .gizmo-disco-ball{border:1px solid #e9e9ff;background:#a9bfd1;box-shadow:0 0 14px #e4cfff66,0 0 34px #c179ff44;overflow:visible}
.gizmo-room-stage .gizmo-disco-ball-mirrors::after{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(ellipse 100% 72% at 50% 50%,transparent 0 22%,#202e4b88 22.5% 23.5%,transparent 24% 36%);mix-blend-mode:multiply}
@keyframes gizmo-mirrored-surface-turn{from{background-position:0 0,0 0}to{background-position:0 0,220% 0}}
.gizmo-room .gizmo-room-stage[data-activity=disco][data-gizmo-disco-phase=tap] .gizmo-character{animation:gizmo-left-party-tap .8s ease-in-out both!important;transition:none}
.gizmo-room .gizmo-room-stage[data-activity=disco][data-gizmo-disco-phase=dance] .gizmo-character{animation:gizmo-centered-party-dance .65s ease-in-out infinite!important;transition:none}
@keyframes gizmo-left-party-tap{0%{transform:translate(0,0) rotate(0)}65%,100%{transform:translate(-10%,12%) rotate(-9deg) scale(1.02,.96)}}
@keyframes gizmo-centered-party-dance{0%,100%{transform:translate(-3%,3%) rotate(-5deg)}50%{transform:translate(-3%,0) rotate(5deg)}}

/* CSS and JS both honor motion changes during a reaction. Static modes retain
   scene composition rather than inheriting the old transform:none flattening. */
@media(prefers-reduced-motion:reduce){
 .gizmo-room-stage .gizmo-bubble-rotor,.gizmo-room-stage .gizmo-spinning-record::before,.gizmo-room-stage .gizmo-spinning-record b,.gizmo-room-stage .gizmo-painting-brush,.gizmo-room-stage .gizmo-polaris-halo,.gizmo-room-stage .gizmo-toy-mirror-grid{animation:none!important}
 .gizmo-room .gizmo-room-stage[data-activity=peekaboo] .gizmo-character .gizmo-character-motion,.gizmo-room .gizmo-room-stage[data-activity=fort] .gizmo-character .gizmo-character-motion{animation:none!important;transform:none!important;translate:none!important;rotate:none!important;scale:none!important}
 .gizmo-room .gizmo-play-object .gizmo-toy-effects[data-effect=bubbles] i{animation:none!important;opacity:.65;left:calc(35% + var(--i)*6%);top:calc(48% - var(--i)*8%);transform:none!important}
 .gizmo-room .gizmo-room-stage[data-activity=telescope] .gizmo-character{left:calc(33% + var(--gizmo-telescope-safe-shift));animation:none!important;transform:translate(-10%,5%) rotate(-8deg)!important}
 .gizmo-room .gizmo-room-stage[data-activity=disco][data-gizmo-disco-phase] .gizmo-character{animation:none!important;transform:translate(-6%,5%) rotate(-4deg)!important}
}
@media(forced-colors:active){.gizmo-toy-scene,.gizmo-bubble-fan,.gizmo-toy-mirror-ball{display:none}}