.game-squash { color:#233e34; background:#e9ece1; overflow:hidden; }
.game-squash * { box-sizing:border-box; }
.squash-world { --pressure:0; position:relative; height:430px; overflow:hidden; background:radial-gradient(ellipse at 50% 48%,#f7f6e8 0,transparent 65%); }
.squash-chamber { position:absolute; width:370px; max-width:calc(100% - 32px); height:286px; top:28px; left:50%; transform:translateX(-50%); }
.squash-crossbar { position:absolute; top:0; left:10px; right:10px; height:30px; z-index:5; background:#354a3d; border:3px solid #233e34; border-radius:5px; box-shadow:inset 0 5px 0 #59664e; display:flex; align-items:center; justify-content:space-between; padding:0 11px; }.squash-crossbar i{width:8px;height:8px;background:#a5af99;border:2px solid #1b3026;border-radius:50%}
.squash-guide { position:absolute; top:17px; bottom:25px; width:15px; border:3px solid #233e34; border-radius:3px; background:linear-gradient(90deg,#8c9a80 0 25%,#dae0c7 25% 55%,#99a58a 55%); box-shadow:2px 0 0 #233e3418; }
.squash-guide-left { left:16px; }.squash-guide-right { right:16px; }
.squash-piston { position:absolute; top:10px; left:calc(50% - 17px); height:42px; width:34px; background:linear-gradient(90deg,#7b8d76 0 17%,#e9ebd9 17% 39%,#b1bda5 39% 78%,#71846c 78%); border:2px solid #233e34; border-top:0; }
.squash-press { position:absolute; top:52px; left:50%; width:calc(100% - 56px); height:32px; z-index:4; border:3px solid #233e34; border-radius:4px; background:#dfc779; box-shadow:inset 0 5px 0 #f2dfa0,0 4px 0 #233e3433; transform:translate(-50%,0); display:flex; justify-content:space-evenly; align-items:center; overflow:hidden; }
.squash-press i { width:15px; height:35px; transform:skewX(-25deg); background:#233e34; opacity:.9; }
.squash-bot { position:absolute; bottom:42px; left:50%; margin-left:-85px; width:170px; height:156px; transform-origin:bottom center; z-index:2; filter:drop-shadow(0 0 calc(7px * (1 - var(--pressure))) #bad67d66); will-change:transform; }
.squash-bot > svg:first-child { display:block; width:100%; height:100%; }
.squash-nameplate { position:absolute; left:50%; top:67px; transform:translateX(-50%); width:116px; height:39px; padding:5px 10px; border:1px solid #64765c; border-left:3px solid var(--rig-accent,#d9efaa); border-radius:3px; background:#1c3029; box-shadow:0 2px 0 #16271f; pointer-events:none; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; text-align:left; }
.squash-nameplate::after { content:''; position:absolute; right:4px; top:6px; width:3px; height:3px; border-radius:50%; background:#71816b; box-shadow:0 24px 0 #71816b; }
.squash-model { display:block; color:var(--rig-accent,#d9efaa); font-size:12px; line-height:14px; font-weight:700; white-space:nowrap; }
.squash-vendor { display:block; color:#ccd5be; font-size:10px; line-height:13px; white-space:nowrap; }
.squash-fractures { position:absolute; inset:0; width:100%; height:100%; opacity:0; fill:none; stroke:#20362c; stroke-width:2.5; stroke-linejoin:miter; pointer-events:none; }
.squash-world[data-fracture="1"] .squash-fractures { opacity:.3; }.squash-world[data-fracture="2"] .squash-fractures { opacity:.65; }.squash-world[data-fracture="3"] .squash-fractures { opacity:1; }
.squash-fragments { position:absolute; bottom:42px; left:50%; z-index:6; pointer-events:none; }.squash-fragments i{position:absolute;bottom:0;left:0;width:10px;height:8px;border:2px solid #233e34;background:#a8bb8e;border-radius:1px;opacity:0}.squash-fragments i:nth-child(2n){background:#dfc779;width:7px;height:11px}.squash-fragments i:nth-child(n+5){width:12px;height:4px;background:#eff2c6}.squash-fragments i.is-ejected{animation:squash-chip .48s cubic-bezier(.15,.6,.35,1) both}
.squash-gauge { position:absolute; right:3px; top:84px; width:5px; height:124px; background:#c3cebb; border-radius:4px; overflow:hidden; }.squash-gauge i{position:absolute;inset:0;background:#d27555;transform:scaleY(0);transform-origin:bottom center}
.squash-floor { position:absolute; bottom:24px; left:6px; right:6px; height:18px; background:#8c9b7d; border:3px solid #233e34; border-radius:3px; box-shadow:inset 0 4px 0 #bdc9ac,0 5px 0 #233e3425; z-index:3; display:flex; gap:14%; justify-content:center; align-items:center; }.squash-floor i{width:8px;height:4px;border-radius:2px;background:#405542}
.squash-feet{position:absolute;left:20px;right:20px;bottom:11px;height:14px;display:flex;justify-content:space-between}.squash-feet i{width:40px;height:14px;background:#233e34;border-radius:0 0 5px 5px}
.squash-controls { position:absolute; top:341px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:20px; }
.squash-hold { display:grid; place-items:center; width:96px; height:57px; border:3px solid #233e34; border-radius:12px; background:#ef805b; box-shadow:0 6px 0 #233e34,inset 0 5px 0 #ffb080; touch-action:none; user-select:none; -webkit-user-select:none; cursor:pointer; padding:10px; }
.squash-hold svg{width:32px;height:32px;fill:none;stroke:#233e34;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.squash-hold:hover{background:#f68b66}.squash-active .squash-hold{transform:translateY(5px);box-shadow:0 1px 0 #233e34,inset 0 3px 0 #dd6849;background:#e27454}
.squash-toggle { position:absolute; left:calc(100% + 20px); top:10px; display:grid; place-items:center; width:36px; height:36px; border:1px solid #9ba992; border-radius:8px; background:#f1f2e6; padding:7px; cursor:pointer; }.squash-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.squash-toggle:hover{background:#dded9f}.squash-pause-symbol{display:none}.squash-toggle[aria-pressed="true"] .squash-play-symbol{display:none}.squash-toggle[aria-pressed="true"] .squash-pause-symbol{display:block}
.squash-hold:focus-visible,.squash-toggle:focus-visible { outline:3px solid #d87855; outline-offset:6px; }
.squash-complete .squash-bot{filter:grayscale(.75) brightness(.8)}

.squash-reduced-motion *,.squash-reduced-motion *::before,.squash-reduced-motion *::after { animation:none!important; transition:none!important; }.squash-reduced-motion .squash-fragments i.is-ejected{opacity:1;transform:translate(var(--x),0) rotate(var(--r))}
@keyframes squash-chip{0%{opacity:1;transform:translate(0,-45px) rotate(0)}60%{opacity:1;transform:translate(calc(var(--x) * .8),-55px) rotate(calc(var(--r) * .7))}100%{opacity:1;transform:translate(var(--x),0) rotate(var(--r))}}
@media(max-width:700px){.squash-world{height:400px}.squash-chamber{top:23px}.squash-controls{top:327px}.squash-bot{width:154px;margin-left:-77px}.squash-fragments i:nth-child(3){--x:-113px!important}.squash-fragments i:nth-child(4){--x:115px!important}}
@media(prefers-reduced-motion:reduce){.game-squash *,.game-squash *::before,.game-squash *::after{animation:none!important;transition:none!important}.game-squash .squash-fragments i.is-ejected{opacity:1;transform:translate(var(--x),0) rotate(var(--r))}}

.squash-complete .core-flow,.squash-complete .core-sweep { animation:none!important; }
.squash-complete .core-sweep { display:none; }

.squash-scrap { position:absolute; bottom:32px; left:50%; z-index:3; pointer-events:none; }
.squash-scrap i { position:absolute; width:36px; height:5px; border:1px solid #233e34; border-radius:2px; background:#8c9b7d; opacity:0; transform:translate(calc(var(--side) * (87px + var(--offset) * 9px)),calc(-1px * var(--slot))) rotate(var(--tilt,0deg)); }
.squash-scrap i:nth-child(3n) { background:#dfc779; }
.squash-scrap i.is-scrap { opacity:1; }
.squash-shockwave { position:absolute; bottom:36px; left:50%; width:100px; height:24px; margin-left:-50px; border:3px solid #6c8066; border-radius:50%; opacity:0; pointer-events:none; z-index:5; }
.squash-complete .squash-shockwave { animation:squash-impact-ring .4s ease-out; }
.squash-world[data-hardware="1"] .squash-bot > svg:first-child { transform:rotate(90deg); filter:hue-rotate(25deg); }
.squash-world[data-hardware="2"] .squash-bot > svg:first-child { filter:hue-rotate(-30deg) saturate(.7); }
.squash-world[data-hardware="3"] .squash-bot > svg:first-child { transform:rotate(-90deg); }
.squash-reduced-motion .squash-shockwave { display:none; }
@keyframes squash-impact-ring { 0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(3.2,1.8)} }
@media(max-width:700px){.squash-scrap i{width:28px;transform:translate(calc(var(--side) * (72px + var(--offset) * 7px)),calc(-1px * var(--slot))) rotate(var(--tilt,0deg))}}
@media(prefers-reduced-motion:reduce){.squash-shockwave{display:none}}