/* Cestas de cores: quintal com cerca; um item grande no meio; três cestas pintadas embaixo. */
.play-cestas .toy-scene{background:#c9ecfb}
.cs-fence{position:absolute;left:-2%;right:-2%;top:61cqh;height:7.5cqh;pointer-events:none}
.cs-fence svg{width:100%;height:100%}
.cs-bush{position:absolute;top:61cqh;width:30cqw;aspect-ratio:124/66;pointer-events:none;transform-origin:50% 100%;animation:cs-breathe 3.4s ease-in-out infinite alternate}
.cs-bush svg{width:100%;height:100%}
.cs-bush-l{left:-8cqw}.cs-bush-r{right:-8cqw;animation-delay:-1.7s}
.cs-stage{position:absolute;left:50%;top:24cqh;width:min(66cqw,34cqh);aspect-ratio:1;translate:-50% 0;z-index:6}
.cs-shadow{position:absolute;left:18%;right:18%;bottom:-4%;height:10%;border-radius:50%;background:#2f5a2a;opacity:.25;animation:cs-shadow 2.4s ease-in-out infinite alternate}
.cs-item{position:absolute;inset:0;display:grid;place-items:center;touch-action:none;cursor:grab;z-index:2;-webkit-tap-highlight-color:transparent}
.cs-item:focus-visible{outline:4px solid #4b8ad6;outline-offset:4px;border-radius:24px}
.cs-bob{display:block;width:100%;height:100%;animation:cs-bob 2.4s ease-in-out infinite alternate;filter:drop-shadow(0 6px 6px #0002)}
.cs-bob .art-img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.cs-grab{z-index:20}.cs-grab .cs-bob{animation:none;scale:1.08;filter:drop-shadow(0 14px 12px #0003)}
.cs-row{position:absolute;left:2cqw;right:2cqw;bottom:2.5cqh;z-index:8;display:flex;justify-content:space-between;align-items:flex-end;gap:1cqw}
.cs-basket{position:relative;flex:1;max-width:min(33cqw,26cqh);aspect-ratio:120/128;border:0;padding:0;background:none;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent;transform-origin:50% 100%}
.cs-basket:focus-visible{outline:4px solid #4b8ad6;outline-offset:4px;border-radius:20px}
.cs-back{position:absolute;left:0;right:0;top:-8%;height:50%}
.cs-front{position:absolute;left:0;right:0;bottom:0;height:75%;filter:drop-shadow(0 6px 4px #0002)}
.cs-back svg,.cs-front svg{display:block;width:100%;height:100%;overflow:visible}
.cs-inside{position:absolute;left:8%;right:8%;top:-6%;height:42%;pointer-events:none}
.cs-in{position:absolute;bottom:0;width:62%;aspect-ratio:1;translate:-50% 0}
.cs-in .art-img{width:100%;height:100%;object-fit:contain}
@container (orientation: landscape){
  .cs-fence{top:40cqh;height:14cqh}
  .cs-stage{top:4cqh;width:44cqh}
  .cs-row{left:8cqw;right:8cqw;bottom:3cqh}
  .cs-basket{max-width:40cqh}
  .cs-bush{width:16cqw;top:44cqh}
}
@keyframes cs-bob{from{translate:0 0;rotate:-2deg}to{translate:0 -5%;rotate:2deg}}
@keyframes cs-shadow{from{scale:1}to{scale:.82}}
@keyframes cs-breathe{from{scale:1}to{scale:1.03 1.05}}
@media (prefers-reduced-motion:reduce){.play-cestas .toy-scene *{animation:none!important}}