/* PUZZLE WIN: bolhas decorativas viram gemas facetadas (uma forma por cor) + tabuleiro do hero. */
.bubble, .auth-bubble { border-radius: 0 !important; }
.bubble.pink, .auth-bubble--pink { clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); }
.bubble.cyan, .auth-bubble--cyan { clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.bubble.lime, .auth-bubble--lime { clip-path: polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.bubble.yellow, .auth-bubble--yellow { clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.bubble.violet, .auth-bubble--violet { clip-path: polygon(50% 2%,98% 92%,2% 92%); }

.pz-board { position: relative; margin: 14px 0 6px; padding: 10px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; border: 1px solid rgb(94 234 212 / .22); border-radius: 22px; background: rgb(4 14 28 / .55); }
.pz-gem { aspect-ratio: 1; display: block; background: radial-gradient(circle at 35% 30%, var(--a), var(--b) 45%, var(--c) 100%); filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); animation: pz-bob 3.2s ease-in-out infinite; }
.pz-gem:nth-child(3n) { animation-delay: -.8s; } .pz-gem:nth-child(4n) { animation-delay: -1.6s; }
@keyframes pz-bob { 50% { transform: scale(.94); } }
.pz-g0 { --a: #ffd0d9; --b: #ff4d6d; --c: #a3112e; clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); }
.pz-g1 { --a: #fff0c2; --b: #ffb020; --c: #b0640a; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.pz-g2 { --a: #c9ffe6; --b: #22e08a; --c: #0b7f4b; clip-path: polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.pz-g3 { --a: #cfe2ff; --b: #3a8dff; --c: #103f9e; border-radius: 26%; }
.pz-g4 { --a: #ead6ff; --b: #a35bff; --c: #4b1a9c; clip-path: polygon(50% 2%,98% 92%,2% 92%); }
.pz-g5 { --a: #c9f8ff; --b: #22d3ee; --c: #0a6f84; border-radius: 50%; }
.pz-stone { --a: #8a97ab; --b: #5b667a; --c: #343c4b; clip-path: polygon(3% 32%,25% 3%,68% 5%,98% 30%,95% 75%,65% 98%,20% 93%,0 62%); animation: none; }
.pz-gem.is-on { animation: pz-on 1.1s ease-in-out infinite; filter: drop-shadow(0 0 10px #ffb020); }
@keyframes pz-on { 50% { transform: scale(1.14); } }
.pz-chain { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); pointer-events: none; overflow: visible; }
.pz-chain path { fill: none; stroke: #ffb020; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .6; vector-effect: non-scaling-stroke; stroke-dasharray: 10 8; animation: pz-dash 1s linear infinite; }
@keyframes pz-dash { to { stroke-dashoffset: -36; } }