.whack-bar { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.whack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; max-width: 420px; margin: 0 auto 1rem; }
.whack-hole {
    aspect-ratio: 1; border-radius: 50% / 42%;
    background: radial-gradient(ellipse at center 70%, #9b6b3f 0%, #6b4423 70%);
    position: relative; overflow: hidden;
    box-shadow: inset 0 -8px 12px rgba(0, 0, 0, .35);
}
.whack-critter {
    position: absolute; left: 0; right: 0; bottom: -100%;
    font-size: clamp(2rem, 9vw, 3.2rem); text-align: center;
    transition: bottom .12s ease; cursor: pointer;
}
.whack-hole.up .whack-critter { bottom: 8%; }
.whack-hole.is-gold { box-shadow: inset 0 -8px 12px rgba(0, 0, 0, .35), 0 0 0 3px #ffd43b, 0 0 14px #ffe066; }
.whack-hole.boom { animation: whack-boom .3s ease; }
@keyframes whack-boom { 0% { transform: scale(1); } 40% { transform: scale(1.08); background: radial-gradient(ellipse at center, #ff8787, #6b4423); } 100% { transform: scale(1); } }