/* Pop It: placa de silicone com bolinhas pastel. */
.toy-popit .toy-scene{background:radial-gradient(120% 90% at 50% 0%,#fff6dd,var(--sky) 70%)}
.toy-popit-stage{position:absolute;inset:0;perspective:1100px;display:grid;place-items:center;padding-bottom:20cqh}
.toy-popit-board{--cell:min(99cqw / var(--cols),72cqh / var(--rows));position:relative;display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-template-rows:repeat(var(--rows),var(--cell));touch-action:none;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 .6cqh 0 rgba(67,55,77,.12))}
.toy-popit-cell{position:relative;padding:calc(var(--cell) * .015);pointer-events:none}
.toy-popit-plate{position:absolute;inset:0;border-radius:26%;background:var(--d)}
.toy-popit-bub{position:absolute;inset:calc(var(--cell) * .045);border-radius:50%;pointer-events:auto;touch-action:none;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85) 0 9%,rgba(255,255,255,0) 28%),radial-gradient(circle at 50% 42%,var(--c) 0 58%,var(--m) 100%);
  box-shadow:0 calc(var(--cell) * .055) 0 var(--d),inset 0 calc(var(--cell) * -.04) calc(var(--cell) * .06) rgba(255,255,255,.35);
  transition:background .25s,box-shadow .25s}
.toy-popit-bub.popped{transform:scale(.84);background:radial-gradient(circle at 50% 78%,rgba(255,255,255,.4) 0 12%,rgba(255,255,255,0) 40%),radial-gradient(circle at 50% 62%,var(--c) 0 38%,var(--m) 78%,var(--d) 100%);
  box-shadow:inset 0 calc(var(--cell) * .09) calc(var(--cell) * .09) rgba(67,55,77,.5),inset 0 calc(var(--cell) * -.03) calc(var(--cell) * .02) rgba(255,255,255,.35)}
.toy-popit-maya{position:absolute;width:min(34cqw,26cqh);height:min(34cqw,26cqh) ;bottom:1cqh;left:3cqw;opacity:0;transition:opacity .25s}
.toy-popit-maya.on{opacity:1}
@container (min-aspect-ratio:3/2){
  .toy-popit-board{--cell:min(70cqw / var(--cols),92cqh / var(--rows))}
  .toy-popit-stage{padding-bottom:0}
  .toy-popit-maya{width:min(30cqh,22cqw);height:min(30cqh,22cqw);left:auto;right:4cqw;bottom:2cqh}
}