/* Doces ou travessuras: rua de noite, três casinhas de portas coloridas, a Maya bruxinha com o balde-abóbora. */
.play-doces .toy-scene{background:#2b2450}
.doces-stars{position:absolute;inset:0;pointer-events:none}
.doces-stars i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff6c8;box-shadow:0 0 6px #fff6c8;animation:doces-twinkle 2.4s ease-in-out infinite alternate}
.doces-moon{position:absolute;left:50%;top:1.5%;width:20cqw;max-width:14cqh;margin-left:-10cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fffbe6,#ffe9a8 55%,#f5d27a);box-shadow:0 0 40px 10px #ffe9a866,0 0 120px 30px #ffe9a822;animation:doces-moon 6s ease-in-out infinite alternate;pointer-events:none}
.doces-moon::before,.doces-moon::after{content:"";position:absolute;border-radius:50%;background:#efcf86;opacity:.6}
.doces-moon::before{left:56%;top:22%;width:18%;height:18%}.doces-moon::after{left:28%;top:58%;width:13%;height:13%}
.doces-cloud{opacity:.22}
.doces-bats{position:absolute;left:0;top:2%;width:100%;height:20%;pointer-events:none}
.doces-bats .art-img{position:absolute;width:12cqw;animation:doces-bat 11s linear infinite}
.doces-bats .art-img:last-child{width:9cqw;top:40%;animation-duration:15s;animation-delay:-6s}
.doces-hills{position:absolute;left:-10%;right:-10%;top:24%;height:16%;background:radial-gradient(ellipse 40% 60% at 25% 100%,#3a3264 98%,transparent),radial-gradient(ellipse 45% 70% at 78% 100%,#352d5c 98%,transparent)}
/* Rua em perspectiva: calçada de trás, rua, gramado da frente. */
.doces-street{position:absolute;left:0;right:0;top:37%;height:30%;background:linear-gradient(#7d6f98,#8e7fa6 30%,#6f6290);box-shadow:inset 0 4px 0 #a99bbf}
.doces-street::before{content:"";position:absolute;left:0;right:0;top:46%;height:2.4%;background:repeating-linear-gradient(90deg,#d8cce8 0 9%,transparent 9% 18%);opacity:.7}
.doces-lawn{position:absolute;left:0;right:0;top:66%;bottom:0;background:linear-gradient(#3f5d4a,#2f4a3a);box-shadow:inset 0 5px 0 #4d7059}
.doces-row{position:absolute;inset:0;z-index:4;pointer-events:none}
.doces-count{position:absolute;left:0;right:0;top:-3%;height:32%;z-index:22;pointer-events:none}
.doces-house{position:absolute;aspect-ratio:120/146;border:0;padding:0;background:transparent;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transform-origin:50% 100%;pointer-events:auto}
/* Retrato: duas casas atrás (um pouco menores), duas na frente, ocupando a tela. */
.doces-h0,.doces-h1{bottom:61.5%;width:min(44cqw,24cqh)}
.doces-h0{left:4%}.doces-h1{right:4%}
.doces-h2,.doces-h3{bottom:33.5%;width:min(48cqw,27cqh);z-index:2}
.doces-h2{left:1%}.doces-h3{right:1%}
.doces-house-art{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 6px #0004)}
.doces-win{fill:#2b1d3a;transition:fill .6s}
.doces-doorway{position:absolute;left:33.3%;top:63%;width:33.4%;height:32.9%;border-radius:45% 45% 4px 4px/30% 30% 4px 4px;perspective:280px;pointer-events:none}
.doces-glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 60%,#fff3b0,#ffc23a 70%,#ff8a1f)}
.doces-door{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#ffffff22,transparent 40%),var(--door);box-shadow:inset 0 0 0 3px #0002;transform-origin:0 50%;transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.doces-knob{position:absolute;right:14%;top:52%;width:14%;aspect-ratio:1;border-radius:50%;background:#ffd36d}
.doces-wreath{position:absolute;left:50%;top:16%;width:42%;aspect-ratio:1;translate:-50% 0;border-radius:50%;border:4px solid #ff8a1f;box-sizing:border-box}
.doces-house.open .doces-door{transform:rotateY(-78deg)}
.doces-friend{position:absolute;left:50%;bottom:2%;width:58%;aspect-ratio:1;translate:-50% 0;opacity:0;scale:.3;pointer-events:none;z-index:2}
.doces-friend.out{opacity:1;scale:1}
.doces-pal{position:absolute;inset:0}
.doces-pal .art-img{filter:drop-shadow(0 4px 4px #0006)}
.doces-acc{position:absolute;left:50%;top:-24%;width:62%;translate:-50% 0;rotate:-8deg}
.doces-acc svg,.doces-acc .art-img{display:block;width:100%;height:auto;overflow:visible}
.doces-acc-crown{width:46%;top:-14%}
.doces-acc-tophat{width:56%;top:-28%}
.doces-maya{position:absolute;left:1%;bottom:2%;height:32%;aspect-ratio:3/4;z-index:6;transform-origin:50% 100%}
.doces-maya-fig{position:absolute;inset:0;width:100%;height:100%}
.doces-maya-hat{position:absolute;left:23%;top:9%;width:54%;rotate:-6deg;z-index:2;pointer-events:none}
.doces-maya-hat svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 3px 2px #0004)}
/* Balde-abóbora grande no gramado: os doces vão aparecendo por cima da boca. */
.doces-bucket{position:absolute;left:47%;bottom:3%;width:min(40cqw,20cqh);aspect-ratio:1;z-index:7;transform-origin:50% 100%}
.doces-bucket>.art-img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px #0005)}
.doces-handle{position:absolute;left:16%;right:16%;top:-26%;height:56%;border:5px solid #4b3a2b;border-bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0;z-index:1}
.doces-loot{position:absolute;left:4%;right:4%;top:-18%;height:46%;z-index:1}
.doces-loot-piece{position:absolute;bottom:0;left:calc(var(--i) * 19%);width:42%;rotate:calc(var(--i) * 22deg - 30deg)}
.doces-loot-piece:nth-child(even){bottom:12%}
.doces-loot-piece .art-img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 2px #0004)}
.doces-treat{position:absolute;width:18cqw;z-index:20;pointer-events:none}
.doces-treat .art-img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 8px #fff6)}
.doces-pumpkin{position:absolute;right:2%;bottom:4%;width:24cqw;max-width:18cqh;aspect-ratio:1;z-index:5;filter:brightness(.55) saturate(.7);transition:filter .8s}
.doces-pumpkin.small{right:1%;bottom:18%;width:15cqw}
.doces-pumpkin .art-img{width:100%;height:100%;object-fit:contain}
.doces-lit .doces-win{fill:#ffd36d}
.doces-lit .doces-house-art{filter:drop-shadow(0 6px 6px #0004) drop-shadow(0 0 14px #ffd36d88)}
.doces-lit .doces-pumpkin{filter:brightness(1.1) drop-shadow(0 0 16px #ff9a3d)}
@keyframes doces-twinkle{from{opacity:.3}to{opacity:1}}
@keyframes doces-moon{from{translate:0 0}to{translate:0 4%}}
@keyframes doces-bat{from{left:-15%;translate:0 0}25%{translate:0 -30%}50%{translate:0 20%}75%{translate:0 -20%}to{left:110%;translate:0 0}}
@container (orientation:landscape){
  .doces-h0,.doces-h1,.doces-h2,.doces-h3{width:16cqw;bottom:28%;left:auto;right:auto}
  .doces-h0{left:30%}.doces-h1{left:47%}.doces-h2{left:64%}.doces-h3{left:81%}
  .doces-street{top:62%;height:12%}.doces-lawn{top:72%}.doces-hills{top:44%}
  .doces-maya{left:2%;bottom:3%;height:72%}
  .doces-bucket{left:19%;bottom:3%;width:auto;height:30%}
  .doces-count{top:20%;height:60%}
  .doces-pumpkin.small{width:7cqw;right:2%;bottom:3%}
  .doces-moon{width:12cqw;max-width:none;left:12%;margin-left:0}
}