.plinko-board { display: grid; place-items: center; }
.pboard { position: relative; width: min(620px, 100%); aspect-ratio: 1 / 1; }
.peg { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #e9e3f7; }
.ball { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
        background: var(--pink); box-shadow: inset -2px -2px 0 #c2309c; will-change: transform; z-index: 2; }
.buckets { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 3px; }
.bucket { font: 700 clamp(8px, 1.3vw, 12px)/1 var(--body); color: var(--ink); text-align: center; padding: 7px 0; border-radius: 6px;
          transition: transform .15s; }
.bucket.flash { transform: translateY(5px); filter: brightness(1.3); }
.recent { display: flex; flex-wrap: wrap; gap: 5px; min-height: 26px; }
.recent span { font: 700 12px var(--body); padding: 4px 7px; border-radius: 6px; color: var(--ink); }

/* board styling: painted once, only the balls move */
.pboard { padding: 0; border-radius: 16px; background: radial-gradient(120% 90% at 50% 0%, #2c1a8f 0%, #150c45 60%, #0c0728 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); overflow: hidden; }
.peg { background: radial-gradient(circle at 35% 30%, #fff 0 30%, #b9addf 70%); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.ball { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; box-shadow: none; }
.ball.b0 { background: radial-gradient(circle at 35% 30%, #fff, #ff5fa2 55%, #b0206f); }
.ball.b1 { background: radial-gradient(circle at 35% 30%, #fff, #ffd84d 55%, #b98a00); }
.ball.b2 { background: radial-gradient(circle at 35% 30%, #fff, #3ee6ff 55%, #0e7ea3); }
.ball.b3 { background: radial-gradient(circle at 35% 30%, #fff, #4dff8f 55%, #129a4f); }
.buckets { left: 6px; right: 6px; bottom: 6px; }
.bucket { box-shadow: inset 0 -3px 0 rgba(12, 7, 40, .3); }