/* Quebra-cabeça: salinha com janela, bandeirinhas, mesa de madeira e tapete com as peças. */
.play-quebra .toy-scene{background:#fbeedd}
.qb-room{position:absolute;inset:0;pointer-events:none;--rug-top:62%}
.qb-wall{position:absolute;inset:0 0 18% 0;background:radial-gradient(circle,#ffffff55 2.2px,transparent 2.6px) 0 0/26px 26px,linear-gradient(#fde9cf,#f9dcbc)}
.qb-floor{position:absolute;left:0;right:0;bottom:0;height:22%;background:repeating-linear-gradient(90deg,#d9a26b 0 18%,#cf9660 18% 18.6%),linear-gradient(#d9a26b,#c88a55);box-shadow:inset 0 6px 0 #b97a46}
.qb-rug{position:absolute;left:3%;right:3%;top:var(--rug-top);bottom:2%;border-radius:50%/40%;background:radial-gradient(ellipse at center,#9ad7f0 0 38%,#7cc6e6 38% 40%,#b4e3f5 40% 62%,#7cc6e6 62% 64%,#cdeefa 64%);box-shadow:0 6px 0 #6bb4d4,0 10px 18px #0002}
.qb-window{position:absolute;left:5%;top:2.2%;width:27%;aspect-ratio:5/4;border-radius:40% 40% 8% 8%;background:#fffaf2;padding:3%;box-shadow:0 4px 0 #e9c79c,0 8px 14px #0001}
.qb-window-sky{position:relative;width:100%;height:100%;border-radius:38% 38% 6% 6%;overflow:hidden;background:linear-gradient(#8fd3f7,#d6f1ff)}
.qb-window-sky::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:5%;translate:-50% 0;background:#fffaf2;box-shadow:0 0 0 0 #fffaf2}
.qb-bunting{position:absolute;left:38%;top:2%;width:64%;height:9%;display:flex;justify-content:space-around;align-items:flex-start;border-top:2px solid #b98a5a;border-radius:0 0 50% 50%/0 0 30% 30%;rotate:-3deg}
.qb-bunting i{width:10%;aspect-ratio:3/4;background:var(--c);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;animation:qb-flag 2.4s ease-in-out infinite alternate}
.qb-bunting i:nth-child(odd){margin-top:4%}
.qb-plant{position:absolute;left:2%;bottom:16%;width:15%;aspect-ratio:2/3;z-index:0}
/* Em retrato o vaso fica no peitoril da janela, longe do tapete das peças. */
@container (orientation:portrait){.qb-plant{left:33%;top:5.4%;bottom:auto;width:8%}}
.qb-plant-leaves{transform-origin:30px 60px;animation:sc-sway-soft 3s ease-in-out infinite alternate}
@keyframes qb-flag{from{rotate:-8deg}to{rotate:8deg}}

/* Mesa: moldura de madeira com o papel do desenho. */
.qb-table{position:absolute;z-index:2;padding:0;border-radius:6%;box-sizing:content-box;translate:0 0}
.qb-table::before{content:"";position:absolute;inset:calc(var(--bs) * -.06);border-radius:calc(var(--bs) * .09);background:repeating-linear-gradient(100deg,#c98a50 0 7px,#c3824a 7px 12px,#cf9259 12px 20px);box-shadow:inset 0 0 0 4px #e0a96f,inset 0 -6px 0 #a96b38,0 10px 0 #9a5f30,0 18px 24px #0003}
.qb-board{position:absolute;inset:0;border-radius:calc(var(--bs) * .03);background:#fffaf0;box-shadow:inset 0 3px 8px #0002}
.qb-ghost{position:absolute;inset:0;border-radius:inherit;overflow:hidden;opacity:.55}
.qb-ghost .art-img,.qb-full .art-img,.qb-pic .art-img{position:absolute;left:8%;top:8%;width:84%;height:84%;object-fit:contain}
.qb-ghost .art-img{filter:grayscale(1) brightness(1.15) opacity(.38);animation:qb-breathe 3s ease-in-out infinite alternate}
@keyframes qb-breathe{from{scale:1}to{scale:1.03}}
.qb-guides{position:absolute;inset:0;pointer-events:none;transition:opacity .3s}
.qb-guides svg{width:100%;height:100%;overflow:visible}
.qb-guides path{fill:none;stroke:#8a6a4a;stroke-opacity:.45;stroke-width:3;stroke-dasharray:7 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.qb-slot{position:absolute}
.qb-glow{position:absolute;pointer-events:none;border-radius:18%;background:radial-gradient(#fff6b0cc,#ffe06655 60%,transparent 75%);z-index:6}
.qb-glow-hint{background:radial-gradient(#fffbe0dd,#ffd34d66 55%,transparent 74%)}
.qb-full{position:absolute;inset:0;border-radius:inherit;overflow:hidden;opacity:0;pointer-events:none;z-index:8;transition:opacity .4s}
.qb-full.on{opacity:1;pointer-events:auto}
.qb-full .art-img{transform-origin:50% 90%}

/* Peças grandes, com sombra e borda de papelão. */
.play-quebra .qb-piece{position:absolute;z-index:4;display:block;filter:drop-shadow(0 7px 5px #5a3a1a44);scale:var(--qb-tray,1);rotate:var(--tilt,0deg);transition:scale .25s,rotate .25s;touch-action:none}
.play-quebra .qb-piece.dragging{z-index:50;scale:1;rotate:0deg;filter:drop-shadow(0 16px 12px #5a3a1a55)}
.play-quebra .qb-piece.sel{outline:0;scale:calc(var(--qb-tray,1) * 1.1);rotate:0deg;filter:drop-shadow(0 0 10px #ffd34d) drop-shadow(0 0 4px #ffb02e) drop-shadow(0 8px 6px #5a3a1a44);animation:qb-sel .9s ease-in-out infinite alternate}
.play-quebra .qb-piece.placed{z-index:5;scale:1;rotate:0deg;filter:drop-shadow(0 1px 1px #5a3a1a33);transition:none;animation:none}
@keyframes qb-sel{from{translate:0 0}to{translate:0 -6px}}
.qb-cut{position:absolute;inset:0}
.qb-pic{position:absolute}
.qb-edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.qb-edge path{fill:none;stroke:#fffaf0;stroke-width:3;vector-effect:non-scaling-stroke}
.qb-piece.placed .qb-edge path{stroke:#fffaf0aa;stroke-width:1.5}
.qb-defs{position:absolute;width:0;height:0;overflow:hidden}
@container (orientation:landscape){
  .qb-window{left:auto;right:4%;width:15%}
  .qb-bunting{left:2%;width:50%;height:7%}
  .qb-plant{left:auto;right:1%;width:7%}
}