.breakout-preview,.connect-preview,.hopper-preview,.stacker-preview{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(145deg,#0b2732,#061117)}
.breakout-preview::before,.connect-preview::before,.hopper-preview::before,.stacker-preview::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 72% 20%,rgba(104,208,223,.16),transparent 43%)}
.breakout-bricks{position:absolute;inset:15% 13% auto;display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.breakout-bricks span{height:14px;border-radius:5px;background:var(--cyan);box-shadow:0 0 9px rgba(104,208,223,.22)}.breakout-bricks span:nth-child(4n+2){background:var(--mint)}.breakout-bricks span:nth-child(4n+3){background:var(--gold)}.breakout-bricks span:nth-child(4n){background:var(--orange)}.breakout-preview .preview-paddle{position:absolute;left:34%;bottom:14%;width:32%;height:13px;border-radius:999px;background:var(--cyan);box-shadow:0 0 18px rgba(104,208,223,.44);animation:breakoutPaddle 2.4s ease-in-out infinite}.breakout-preview .preview-ball{position:absolute;left:55%;top:59%;width:18px;height:18px;border-radius:50%;background:var(--gold);box-shadow:0 0 20px rgba(242,199,92,.58);animation:breakoutBall 2.4s ease-in-out infinite}
.connect-preview{display:grid;place-items:center}.connect-preview-grid{position:relative;z-index:1;width:74%;aspect-ratio:7/6;padding:7px;display:grid;grid-template-columns:repeat(7,1fr);gap:5px;border:1px solid rgba(104,208,223,.32);border-radius:16px;background:#123746;box-shadow:0 16px 34px rgba(0,0,0,.28)}.connect-preview-grid span{aspect-ratio:1;border-radius:50%;background:#041016;box-shadow:inset 0 4px 8px rgba(0,0,0,.5)}.connect-preview-grid .cyan{background:var(--cyan);box-shadow:inset 0 3px rgba(255,255,255,.28),0 0 12px rgba(104,208,223,.38)}.connect-preview-grid .gold{background:var(--gold);box-shadow:inset 0 3px rgba(255,255,255,.25),0 0 12px rgba(242,199,92,.35)}.connect-preview-grid .falling{animation:connectDrop 2.5s cubic-bezier(.2,.8,.25,1) infinite}
.hopper-preview{background:linear-gradient(180deg,#0b3443,#06151c)}.hopper-preview .star{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.55)}.hopper-preview .star.one{left:18%;top:18%}.hopper-preview .star.two{right:22%;top:31%}.hopper-preview .star.three{left:67%;top:12%}.hopper-platform{position:absolute;height:12px;border-radius:999px;background:var(--cyan);box-shadow:0 0 14px rgba(104,208,223,.34)}.hopper-platform.one{left:12%;bottom:18%;width:34%}.hopper-platform.two{right:12%;bottom:42%;width:29%}.hopper-platform.three{left:22%;top:23%;width:25%}.preview-cloud{position:absolute;left:44%;bottom:30%;width:58px;height:31px;border-radius:18px;background:#dffbff;filter:drop-shadow(0 0 12px rgba(104,208,223,.45));animation:cloudHop 2.25s ease-in-out infinite}.preview-cloud::before,.preview-cloud::after{content:"";position:absolute;border-radius:50%;background:#dffbff}.preview-cloud::before{left:7px;top:-10px;width:31px;height:31px}.preview-cloud::after{right:5px;top:-5px;width:25px;height:25px}.preview-coin{position:absolute;right:25%;top:36%;width:16px;height:24px;border-radius:7px;background:var(--gold);box-shadow:0 0 15px rgba(242,199,92,.5);animation:coinSpin 1.1s ease-in-out infinite alternate}
.stacker-preview{display:flex;align-items:flex-end;justify-content:center;padding-bottom:13%}.stacker-tower{position:relative;width:64%;height:66%}.stacker-tower span{position:absolute;left:50%;height:13%;border-radius:7px;transform:translateX(-50%);box-shadow:inset 0 3px rgba(255,255,255,.2),0 7px 16px rgba(0,0,0,.2)}.stacker-tower span:nth-child(1){bottom:0;width:100%;background:var(--cyan)}.stacker-tower span:nth-child(2){bottom:14%;width:86%;background:var(--mint)}.stacker-tower span:nth-child(3){bottom:28%;width:73%;background:var(--gold)}.stacker-tower span:nth-child(4){bottom:42%;width:61%;background:var(--orange)}.stacker-tower span:nth-child(5){bottom:56%;width:49%;background:var(--danger)}.stacker-tower span:nth-child(6){bottom:72%;width:49%;background:#9e8cff;animation:stackerSlide 2.2s ease-in-out infinite}
@keyframes breakoutPaddle{0%,100%{transform:translateX(-35%)}50%{transform:translateX(35%)}}@keyframes breakoutBall{0%{transform:translate(-80%,90%)}45%{transform:translate(65%,-210%)}100%{transform:translate(-80%,90%)}}@keyframes connectDrop{0%,18%{transform:translateY(-220%);opacity:0}40%,100%{transform:none;opacity:1}}@keyframes cloudHop{0%,100%{transform:translate(-30%,18px)}50%{transform:translate(45%,-38px)}}@keyframes coinSpin{to{transform:scaleX(.35)}}@keyframes stackerSlide{0%,100%{transform:translateX(-90%)}50%{transform:translateX(-10%)}}
@media(prefers-reduced-motion:reduce){.breakout-preview *,.connect-preview *,.hopper-preview *,.stacker-preview *{animation:none!important}}