*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif}body{background:#88d7f8;color:#3a5360}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:5px solid #ffdb67;outline-offset:4px}#app{width:100vw;height:100dvh;overflow:hidden}.menu,.game-screen{width:100%;height:100%;position:relative;overflow:hidden}.menu{background:linear-gradient(180deg,#89d8fa 0%,#b7edfd 72%,#a8de87 72%,#77c76c 100%);display:flex;flex-direction:column;align-items:center}.menu:before{content:"";position:absolute;width:110%;height:25%;left:-5%;bottom:-14%;background:#74c165;border-radius:50%}.menu-cloud{position:absolute;width:170px;height:55px;background:#fff;border-radius:50%;opacity:.6;filter:drop-shadow(0 6px 0 #ffffff44)}.menu-cloud:before,.menu-cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.menu-cloud:before{width:75px;height:75px;left:27px;top:-35px}.menu-cloud:after{width:85px;height:85px;left:72px;top:-46px}.c1{left:4%;top:9%}.c2{right:3%;top:26%;transform:scale(.75)}header{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:18px;width:min(1100px,96%);padding:17px 0 12px}.title-toy{font-size:48px;filter:drop-shadow(0 5px 0 #936a4b)}h1{margin:0;font-size:clamp(24px,3.4vw,42px);color:#34566d;text-shadow:0 3px 0 #fff}header p{margin:0;text-align:center;font-size:clamp(15px,1.7vw,21px);font-weight:800;color:#59807e}.header-controls{position:absolute;right:0;top:20px;display:flex;gap:8px}.round{min-width:58px;min-height:58px;border:4px solid #fff;border-radius:50%;background:#ffffffd9;box-shadow:0 6px 0 #5ea2bc,0 10px 20px #408caf5c;font-size:29px;color:#568199;display:grid;place-items:center;padding:0;line-height:1}.round:active{transform:translateY(4px);box-shadow:0 2px 0 #5ea2bc}.mode-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.5vw,30px);width:min(1100px,94vw);flex:1;min-height:0;align-items:center;padding:0 0 16px}.mode-card{position:relative;min-height:210px;height:min(62vh,410px);max-height:100%;border-radius:32px;border:8px solid #fff;box-shadow:0 11px 0 #5d9bb5,0 19px 25px #3c779d55;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transition:transform .14s,box-shadow .14s;touch-action:manipulation}.mode-card:hover{transform:translateY(-4px) rotate(-1deg)}.mode-card:active{transform:translateY(8px) scale(.98);box-shadow:0 3px 0 #5d9bb5}.mode-card.sky{background:linear-gradient(#64bcf4,#c9f6ff)}.mode-card.ground{background:linear-gradient(#baf282 0 58%,#70cb65 58%)}.mode-card.tools{background:linear-gradient(#ffc57b,#ef9167)}.card-sky-decor{position:absolute;top:10%;font-size:clamp(20px,3.2vw,43px);opacity:.7;white-space:nowrap}.mode-icon{font-size:clamp(74px,10vw,145px);line-height:1;filter:drop-shadow(0 8px 0 #ffffff88);z-index:1}.mode-name{z-index:1;font-size:clamp(28px,4.1vw,56px);font-weight:1000;color:#fff;text-shadow:0 5px 0 #5695a6,2px 2px 8px #496a7799}.ground .mode-name{text-shadow:0 5px 0 #44995f,2px 2px 8px #466444}.tools .mode-name{text-shadow:0 5px 0 #c5684b,2px 2px 8px #864e42}.card-progress{display:flex;gap:5px;z-index:1;margin-top:18px}.card-progress i{width:clamp(10px,1.25vw,17px);height:clamp(10px,1.25vw,17px);border-radius:50%;background:#ffffff80;border:2px solid #fff}.card-progress .passed{background:#ffe878}.card-progress .current{background:#fff;transform:scale(1.22);box-shadow:0 0 0 3px #ffd45f}.footer-stars{height:36px;position:relative;z-index:1;color:#fff7a2;font-size:22px;letter-spacing:12px}.game-screen{background:#83d1f7}.playfield{width:100%;height:100%;display:grid;place-items:center}.scene{width:100%;height:100%;touch-action:none;display:block}.game-top{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));z-index:3;display:flex;align-items:center;gap:12px;pointer-events:none}.game-top>*{pointer-events:auto}.game-top .sound{margin-left:auto}.level-chip{background:#fffc;border:4px solid #fff;border-radius:50px;padding:10px 20px;font-size:clamp(18px,2.5vw,30px);font-weight:1000;box-shadow:0 6px 0 #61a8c8}.level-chip b{color:#ef8d58;margin-left:10px}.bottom-bubbles{position:absolute;bottom:0;left:0;width:100%;display:flex;justify-content:space-around;font-size:40px;color:#ffffffaa;pointer-events:none}.draggable,.actor-hit{cursor:grab;touch-action:none}.moving{cursor:grabbing;filter:drop-shadow(0 15px 12px #314b6977)}.draggable:not(.moving){transition:transform .36s cubic-bezier(.2,1.8,.45,1)}.bounce{animation:wobble .4s ease}.hint-hand{pointer-events:none;animation:hint 1.7s ease-in-out infinite;filter:drop-shadow(0 5px 4px #315b7955)}.near{filter:drop-shadow(0 0 8px #fff6a0)}.bump{filter:drop-shadow(0 0 5px #ff9b84)}.actor-inner{transform-box:fill-box;transform-origin:center;transition:opacity .12s}.outcome-fall,.outcome-water{animation:fall 1.1s cubic-bezier(.35,.1,.8,1) forwards}.outcome-water{animation-name:water}.outcome-spring{animation:spring 1.1s ease-in forwards}.outcome-fly{animation:fly 1.1s ease-in forwards}.outcome-roll,.outcome-slide,.outcome-spin{animation:roll 1.1s ease-in forwards}.toy-piece{animation:piece 1s ease-out forwards}.star{animation:star .95s ease-out both;transform-box:fill-box;transform-origin:center;pointer-events:none}.debug-panel{position:absolute;right:10px;bottom:10px;z-index:10;max-width:min(96vw,660px);padding:8px;background:#273d4ade;color:white;border-radius:12px;font:14px system-ui;max-height:47vh;overflow:auto}.debug-title{font-weight:bold;margin-bottom:4px}.debug-row{display:flex;align-items:center;gap:3px;margin:2px 0}.debug-row button,.debug-actions button{border:0;border-radius:5px;background:#fff;color:#234;padding:3px 7px;font-size:13px;min-width:25px}.debug-actions{display:flex;gap:6px;margin-top:5px}@keyframes hint{0%,100%{translate:0 0;opacity:.55}50%{translate:48px -8px;opacity:1}}@keyframes wobble{0%,100%{rotate:0deg}30%{rotate:7deg}65%{rotate:-7deg}}@keyframes fall{to{transform:translate(0,280px) rotate(55deg);opacity:0}}@keyframes water{55%{transform:translate(80px,130px) rotate(25deg)}80%{transform:translate(80px,115px) rotate(-10deg)}100%{transform:translate(80px,130px);opacity:.3}}@keyframes spring{35%{transform:translate(0,35px) scale(1.2,.75)}100%{transform:translate(50px,-530px) rotate(130deg);opacity:0}}@keyframes fly{100%{transform:translate(620px,-200px) rotate(600deg);opacity:0}}@keyframes roll{100%{transform:translate(470px,110px) rotate(770deg);opacity:0}}@keyframes piece{100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}@keyframes star{0%{transform:scale(.2);opacity:0}30%{transform:scale(1.4);opacity:1}100%{transform:scale(.5) translateY(-40px);opacity:0}}@media(orientation:portrait){#app:after{content:"📱 ↻";position:fixed;inset:0;background:linear-gradient(#92dafa,#baf0d5);display:grid;place-items:center;font-size:clamp(64px,17vw,110px);z-index:100;text-shadow:0 7px #fff8}.debug-panel{display:none}}@media(max-height:430px) and (orientation:landscape){header{padding:8px 0 3px}.title-toy{font-size:30px}header p{display:none}.mode-card{min-height:150px;height:73vh;border-width:5px}.mode-icon{font-size:70px}.mode-name{font-size:30px}.card-progress{margin-top:7px}.round{min-width:47px;min-height:47px;font-size:23px}.level-chip{font-size:18px;padding:5px 13px}.game-top{top:6px}.footer-stars{height:17px;font-size:15px}} 
.tool-drop{animation:tool-drop .42s ease-in forwards}.tool-roll{animation:tool-roll .75s ease-in forwards}.tool-burst{animation:wobble .25s ease-in-out 2}@keyframes tool-drop{to{translate:0 150px;rotate:16deg}}@keyframes tool-roll{to{translate:180px 95px;rotate:540deg}}
/* Animated machine feedback. SVG transforms stay in the 1000 × 560 scene coordinates. */
.fan-blades{transform-box:fill-box;transform-origin:center;animation:fan-turn .55s linear infinite}.belt-dashes{animation:belt-move .5s linear infinite}.scene-wobble{transform-box:fill-box;transform-origin:center;animation:wobble .4s ease}.scene-collapse{transform-box:fill-box;transform-origin:center;animation:scene-collapse .9s ease-in forwards}.spring-reveal{animation:reveal .35s cubic-bezier(.2,1.7,.3,1) both}.spring-compress{animation:compress .32s ease-in-out}.splash-word{font-weight:900;stroke:#4aa5ce;stroke-width:5;paint-order:stroke;animation:splash-word .95s ease-out forwards;pointer-events:none}@keyframes fan-turn{to{transform:rotate(360deg)}}@keyframes belt-move{to{stroke-dashoffset:-37}}@keyframes scene-collapse{25%{transform:rotate(-4deg) translateY(5px)}100%{transform:rotate(13deg) translateY(55px);opacity:.6}}@keyframes reveal{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}@keyframes compress{50%{transform:scaleY(.65)}to{transform:scaleY(1)}}@keyframes splash-word{0%{opacity:0;transform:translateY(20px) scale(.5)}25%{opacity:1;transform:translateY(-16px) scale(1.18)}100%{opacity:0;transform:translateY(-56px) scale(1)}}
.spinner-disc,.roller-wheel{transform-box:fill-box;transform-origin:center}.spinner-disc{animation:disc-turn 1.8s linear infinite}.roller-wheel{animation:fan-turn 1s linear infinite}.wind-streak{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-dasharray:22 18;opacity:.85;animation:wind-blow .42s linear infinite;pointer-events:none}@keyframes disc-turn{to{transform:rotate(180deg)}}@keyframes wind-blow{to{stroke-dashoffset:-40}}
@media(max-height:430px) and (orientation:landscape){.round{min-width:56px;min-height:56px;font-size:25px}}
@supports(padding:max(0px)){.menu{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.mode-grid{width:min(1100px,calc(100% - 20px))}}
.goal-halo{fill:#fff2912b;stroke:#fff9ad;stroke-width:6;stroke-dasharray:15 11;opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:center}.goal-halo.lit{opacity:.9;animation:halo-pulse .55s ease-in-out infinite alternate}@keyframes halo-pulse{to{transform:scale(1.08);opacity:.55}}
.debug-layer{pointer-events:none}
/* Keep the whole game usable when a phone's orientation is locked. */
@media (orientation:portrait){
  #app{position:fixed;top:0;left:100vw;width:100dvh;height:100vw;transform-origin:top left;transform:rotate(90deg)}
  #app::after{content:none;display:none}
  .mode-grid{width:94%}
  .mode-card{height:70vw;min-height:0}
  }