.toy-transportes .toy-scene{background:#d0ebf0}
.transport-world{position:absolute;inset:0;overflow:hidden;container-type:size;isolation:isolate}
.transport-sky{position:absolute;inset:0;background:#cbe8ed;z-index:-3}
.transport-sun{position:absolute;right:8%;top:6%;width:55px;aspect-ratio:1;border-radius:50%;background:#ffe09b}
.transport-cloud{position:absolute;left:9%;top:12%;width:92px;height:24px;border-radius:40px;background:#fffdf8}.transport-cloud::before,.transport-cloud::after{content:"";position:absolute;bottom:0;left:15px;width:41px;height:41px;border-radius:50%;background:#fffdf8}.transport-cloud::after{left:45px;width:32px;height:32px}
.transport-ground{position:absolute;inset:45% 0 0;background:#a9cf87;z-index:-2;border-radius:50% 0 0 0/12% 0 0 0}
.transport-ground::after{content:"";position:absolute;left:-10%;bottom:-15%;width:130%;height:65%;background:#b8b8a9;rotate:-17deg;border-top:7px solid #e6ddb9;border-bottom:7px solid #e6ddb9}
.transport-route{position:absolute;left:9%;top:21%;width:81%;height:63%;opacity:.8;z-index:-1;pointer-events:none}.transport-route svg{width:100%;height:100%}
.transport-destination{position:absolute;right:5%;top:22%;width:clamp(110px,43cqw,240px);height:clamp(100px,31cqh,200px);border:0;padding:0;background:none;border-radius:16px;z-index:1}
.transport-destination-svg{display:block;width:100%;height:100%;pointer-events:none}
.transport-vehicle{position:absolute;left:5%;bottom:11%;width:clamp(115px,46cqw,260px);aspect-ratio:5/3;background:none;padding:0;border:0;border-radius:20px;touch-action:manipulation;transform-origin:50% 75%;z-index:5;overflow:visible}
.transport-vehicle:disabled,.transport-destination:disabled{opacity:1}
.transport-vehicle-svg{display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 5px 3px #43374d19)}
.transport-vehicle:active:not(:disabled) .transport-vehicle-svg{scale:.97}
.transport-progress{position:absolute;left:12px;top:12px;display:flex;gap:7px;pointer-events:none;z-index:8}.transport-progress>span{width:28px;height:28px;opacity:.25}.transport-progress>span.done{opacity:1}.transport-progress svg{width:100%;height:100%}
.transport-helper{position:absolute;right:7%;top:17%;width:48px;height:48px;opacity:0;scale:.8;transition:opacity 180ms,scale 180ms var(--ease);pointer-events:none;z-index:8}.transport-helper svg{width:100%;height:100%}.delivered .transport-helper{opacity:1;scale:1}
.transport-cargo{position:absolute;right:13%;top:43%;width:clamp(50px,17cqw,95px);height:clamp(50px,20cqh,110px);opacity:0;scale:.8;transition:opacity 240ms,scale 320ms var(--ease);z-index:6;pointer-events:none}.transport-cargo>.art-img{width:100%;height:100%;object-fit:contain}.transport-cargo>.toy-actor{inset:0;width:100%;height:100%}.delivered .transport-cargo{opacity:1;scale:1}
.transport-fire{display:none;position:absolute;right:12%;top:25%;width:clamp(45px,17cqw,85px);height:clamp(45px,18cqh,95px);transition:opacity 650ms,scale 650ms var(--ease);pointer-events:none;z-index:4}.transport-fire svg{width:100%;height:100%}
.transport-water{display:none;position:absolute;left:45%;top:29%;right:7%;height:26%;opacity:0;pointer-events:none;z-index:7}.transport-water svg{width:100%;height:100%}
.transport-ducks{display:none;position:absolute;right:10%;top:40%;width:35%;height:12%;align-items:end;transition:translate 650ms var(--ease);pointer-events:none;z-index:4}.transport-ducks>.art-img{width:33%;height:100%;object-fit:contain}
.transport-world[data-vehicle=firetruck] .transport-fire{display:block}.transport-world[data-vehicle=firetruck] .transport-water{display:block}.transport-world[data-vehicle=firetruck].delivered .transport-water{animation:transport-water-jet 650ms ease-out 1}.transport-world[data-vehicle=firetruck].delivered .transport-fire{opacity:0;scale:.3}.transport-world[data-vehicle=firetruck] .transport-cargo{display:none}
.transport-world[data-vehicle=police] .transport-ducks{display:flex}.transport-world[data-vehicle=police].delivered .transport-ducks{translate:0 -150%}.transport-world[data-vehicle=police] .transport-cargo{display:none}
.transport-world[data-vehicle=boat] .transport-ground{background:#80c3d9;border-radius:0}.transport-world[data-vehicle=boat] .transport-ground::after{display:none}.transport-world[data-vehicle=boat] .transport-route{opacity:.4}.transport-world[data-vehicle=boat] .transport-destination{top:27%}
.transport-world[data-vehicle=plane] .transport-ground{background:#baccc3}.transport-world[data-vehicle=plane] .transport-ground::after{background:#8a9a9e}.transport-world[data-vehicle=train] .transport-ground::after{height:35%;background:#99846d;border-top-color:#dfd6b8;border-bottom-color:#dfd6b8}
.toy-transportes .toy-footer{background:#f6edd7;padding:8px}
.transport-picker{display:grid;grid-template-columns:repeat(4,minmax(48px,64px));gap:7px;justify-content:center;max-width:100%;width:100%}
.transport-choice.toy-button{min-width:48px;min-height:52px;height:56px;padding:3px;border:3px solid transparent;border-radius:14px;background:#fffdf8;box-shadow:none}.transport-choice[aria-pressed=true]{border-color:var(--leaf);background:#fff1bd}.transport-choice>svg{width:100%;height:100%;pointer-events:none}
@keyframes transport-water-jet{0%{opacity:0}25%,65%{opacity:1}100%{opacity:0}}
@media(min-width:700px),(max-height:500px) and (orientation:landscape){.transport-picker{grid-template-columns:repeat(7,minmax(48px,66px));gap:9px}.transport-choice.toy-button{height:58px}.transport-destination{top:8%;right:16%;width:min(29cqw,200px);height:65cqh;max-height:180px}.transport-vehicle{width:min(30cqw,190px);bottom:5%}.transport-cargo{top:27%;right:23%;width:70px;height:75px}.transport-helper{top:3%;right:15%}.transport-fire{right:22%;top:11%;height:80px}.transport-water{left:40%;top:14%;right:21%;height:45%}.transport-ducks{top:43%;right:23%;width:24%;height:25%}.transport-sun{width:38px;top:3%}}
@media(prefers-reduced-motion:reduce){.transport-cargo,.transport-fire,.transport-helper,.transport-ducks{transition:none}.transport-world[data-vehicle=firetruck].delivered .transport-water{animation:none;opacity:1}.transport-vehicle:active:not(:disabled) .transport-vehicle-svg{scale:1}}
