/* Arcade & 3D: four fully playable Bleepbook decompression games */
#bb-decompression .bb-arcade-panel{max-width:900px;margin:12px auto 30px;padding:18px;border:1px solid #d7e4d9;background:#fffdf8;border-radius:20px;box-shadow:0 12px 26px #124e4710;color:#214b47}
#bb-decompression .bb-arcade-instruction{max-width:740px;margin:8px auto 13px;color:#657e73;line-height:1.55}
#bb-decompression .bb-arcade-prompt{text-align:center;font-weight:750;color:#2c6660;font-size:15px;min-height:29px;margin:10px auto 14px}
#bb-decompression .bb-arcade-score{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:15px auto 9px}
#bb-decompression .bb-arcade-score-stat{display:flex;flex-direction:column;align-items:center;min-width:90px;padding:8px 14px;border:1px solid #dae8de;border-radius:12px;background:#f1f7f0}
#bb-decompression .bb-arcade-score-stat small{color:#66847b;font-size:11px}
#bb-decompression .bb-arcade-score-stat strong{font-size:22px;line-height:1.35;color:#145b59;font-weight:800}
#bb-decompression .bb-arcade-cover{position:relative;overflow:hidden;aspect-ratio:1.6;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#f7f0e0,#bfd8c7 75%,#72a899)}
#bb-decompression .bb-arcade-cover-snake{background:linear-gradient(140deg,#dfead5,#90bba8)}
#bb-decompression .bb-arcade-cover-marble{background:linear-gradient(140deg,#dce8df,#7ba9a4)}
#bb-decompression .bb-arcade-cover-tower{background:linear-gradient(140deg,#f0e1d3,#9ac2b0)}
#bb-decompression .bb-cover-mole{position:relative;display:block;width:113px;height:99px;border-radius:50% 50% 32% 32%;background:linear-gradient(145deg,#b08c7a,#82675f);border:4px solid #754f47;box-shadow:0 13px 0 #587e62,0 19px 15px #163f4540;z-index:1;margin-top:33px}
#bb-decompression .bb-mole-ear{position:absolute;top:-16px;width:32px;height:32px;border-radius:100%;background:#a7847b;border:6px solid #e2b29b}
#bb-decompression .bb-mole-ear.ear-left{left:5px}.bb-mole-ear.ear-right{right:5px}
#bb-decompression .bb-mole-face{position:absolute;inset:19px 12px 8px}
#bb-decompression .bb-mole-face i{display:inline-block;width:11px;height:13px;margin:10px 11px 0;border-radius:50%;background:#253c3c}
#bb-decompression .bb-mole-face b{display:block;width:17px;height:12px;background:#ebada0;border-radius:50%;margin:6px auto}
#bb-decompression .bb-cover-petals{position:absolute;bottom:14px;left:18px;font-size:36px;letter-spacing:25px;color:#e3a592;opacity:.9}
#bb-decompression .bb-cover-snake{display:flex;align-items:center;transform:rotate(-12deg);gap:0}
#bb-decompression .bb-cover-snake i{display:block;width:46px;height:46px;border-radius:35%;background:linear-gradient(145deg,#408b7b,#9cc5a1);border:3px solid #f4e9d7;margin-left:-9px;box-shadow:2px 5px 0 #285d4e}
#bb-decompression .bb-cover-snake i:first-child{border-radius:50%;background:#b2c78c}
#bb-decompression .bb-cover-apple{position:absolute;bottom:22px;right:44px;font-size:68px;color:#e77e69;text-shadow:2px 6px #5d896b}
#bb-decompression .bb-cover-maze{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);transform:perspective(360px) rotateX(23deg) rotateZ(-11deg);box-shadow:9px 14px 0 #356f69;border:9px solid #3a7970}
#bb-decompression .bb-cover-maze i{background:#dae7d6;border:2px solid #86a89d}
#bb-decompression .bb-cover-maze i:nth-child(3n){background:#4a8681;box-shadow:inset 3px 3px 0 #285c59}
#bb-decompression .bb-cover-marble{position:absolute;left:50%;top:38%;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 28% 25%,#fff,#f9d3ad 32%,#bf775c 75%,#7d5552);box-shadow:6px 9px 6px #214a5150}
#bb-decompression .bb-cover-tower{display:flex;flex-direction:column-reverse;gap:0;align-items:center;justify-content:flex-start;transform:perspective(390px) rotateX(16deg);height:90%}
#bb-decompression .bb-cover-tower i{height:18px;width:155px;display:block;background:linear-gradient(100deg,#3d8b80,#b9d0ad);border:2px solid #f8f1e5;box-shadow:9px 5px 0 #1e6663}
#bb-decompression .bb-cover-tower i:nth-child(n+2){width:calc(155px - (var(--index,2) * 11px))}
#bb-decompression .bb-cover-tower i:nth-child(2){width:140px;background:#e9ac8d}
#bb-decompression .bb-cover-tower i:nth-child(3){width:125px}
#bb-decompression .bb-cover-tower i:nth-child(4){width:104px;background:#c3a2b5}
#bb-decompression .bb-cover-tower i:nth-child(5){width:90px}
#bb-decompression .bb-cover-tower i:nth-child(6){width:76px;background:#dfb978}
#bb-decompression .bb-whack-field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:660px;margin:10px auto 18px;padding:23px 20px 14px;gap:13px;background:linear-gradient(140deg,#d7eacb,#abd2b9);border-radius:22px;border:8px solid #648b73}
#bb-decompression .bb-whack-hole{touch-action:manipulation;appearance:none;position:relative;width:100%;aspect-ratio:1.25;border:0;background:none;cursor:pointer;overflow:hidden}
#bb-decompression .bb-whack-mound{position:absolute;inset:36% 5% 5%;border-radius:50%;background:#4c765e;border:7px solid #81a27c;box-shadow:inset 0 12px 14px #183d3e95}
#bb-decompression .bb-whack-character{position:absolute;left:21%;top:24%;width:58%;height:65%;border-radius:49% 49% 32% 32%;background:linear-gradient(120deg,#b4947a,#76564b);transform:translateY(115%);transition:transform .19s ease;box-shadow:inset -8px -5px #614f47}
#bb-decompression .bb-whack-hole.is-up .bb-whack-character{transform:translateY(-6%)}
#bb-decompression .bb-whack-face{position:absolute;left:20%;top:27%;width:60%;height:40%;display:flex;align-items:flex-start;justify-content:space-around;flex-wrap:wrap}
#bb-decompression .bb-whack-face i{width:9px;height:11px;border-radius:50%;background:#243e3c}
#bb-decompression .bb-whack-face b{width:16px;height:11px;margin:1px 24%;border-radius:50%;background:#eeb3a4}
#bb-decompression .bb-whack-ears:before,#bb-decompression .bb-whack-ears:after{content:'';position:absolute;top:-7%;width:27%;height:24%;border-radius:50%;border:5px solid #75574d;background:#dba89a}
#bb-decompression .bb-whack-ears:before{left:1%}#bb-decompression .bb-whack-ears:after{right:1%}
#bb-decompression .bb-whack-flowers{position:absolute;bottom:3%;left:50%;color:#f7d1b3;font-size:17px;pointer-events:none}
#bb-decompression .bb-whack-hole.is-hit .bb-whack-mound{box-shadow:inset 0 9px 16px #204637;}
#bb-decompression .bb-snake-grid{display:grid;grid-template-columns:repeat(var(--snake-size),minmax(0,1fr));aspect-ratio:1;max-width:min(560px,100%);margin:0 auto;border:10px solid #397971;border-radius:13px;overflow:hidden;box-shadow:0 11px 0 #245b55,0 21px 24px #22514730;touch-action:none;background:#dbe8d8}
#bb-decompression .bb-snake-cell{display:block;aspect-ratio:1;background:#eaf1e6}
#bb-decompression .bb-snake-cell:nth-child(odd){background:#d3e4d3}
#bb-decompression .bb-snake-cell.has-snake{background:#548d76;border-radius:32%;box-shadow:inset 2px 2px #90b69e}
#bb-decompression .bb-snake-cell.is-head{border-radius:44% 45% 26% 26%;background:#1a665f;box-shadow:inset -2px -2px #0d4d47}
#bb-decompression .bb-snake-cell.is-apple{background:radial-gradient(circle at 36% 29%,#fff3e4 4%,#e68070 20%,#c75d53 65%,#904b47 90%);border-radius:43%}
#bb-decompression .bb-arcade-dpad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,53px);gap:6px;justify-content:center;margin:22px 0 8px;touch-action:manipulation}
#bb-decompression .bb-arcade-arrow{border:1px solid #a0c1ae;border-radius:13px;background:#eaf4e8;color:#1a5a53;font-size:24px;font-weight:800;box-shadow:0 4px 0 #97bca8;cursor:pointer;min-width:50px}
#bb-decompression .bb-arcade-arrow:active{transform:translateY(3px);box-shadow:0 1px 0 #97bca8}
#bb-decompression .bb-arcade-arrow.direction-up{grid-column:2;grid-row:1}
#bb-decompression .bb-arcade-arrow.direction-left{grid-column:1;grid-row:2}
#bb-decompression .bb-arcade-arrow.direction-down{grid-column:2;grid-row:2}
#bb-decompression .bb-arcade-arrow.direction-right{grid-column:3;grid-row:2}
#bb-decompression .bb-marble-board{--maze-n:9;display:grid;grid-template-columns:repeat(var(--maze-n),minmax(0,1fr));width:min(600px,89%);aspect-ratio:1;margin:40px auto 45px;position:relative;transform:perspective(950px) rotateX(17deg) rotateZ(var(--maze-tilt,0deg));background:#aecaba;padding:10px;border:12px solid #46847b;border-radius:18px;box-shadow:0 9px 0 #285d58,0 19px 0 #234a4a,0 32px 32px #234e4e55;touch-action:none;transition:transform .17s}
#bb-decompression .bb-marble-cell{position:relative;background:#e7f0e7;border:1px solid #c2d9c8;min-width:0;min-height:0}
#bb-decompression .bb-marble-cell.is-wall{background:linear-gradient(135deg,#548c83,#376f69);border:2px solid #3e706b;box-shadow:inset 3px 3px 0 #8bb9a5,inset -3px -3px 0 #24574f,2px 3px 0 #275c53;z-index:1}
#bb-decompression .bb-marble-cell.is-goal{background:radial-gradient(circle at 45% 45%,#ffe5a0 0 26%,#edb46e 40%,#be8b54)}
#bb-decompression .bb-marble-ball{position:absolute;inset:10%;display:block;border-radius:50%;background:radial-gradient(circle at 25% 20%,#fffefa 0 8%,#f9d0a9 25%,#d08f74 68%,#92625f 93%);box-shadow:4px 5px 4px #1b4b4b80,inset -3px -4px 6px #aa6b66;z-index:3}
#bb-decompression .bb-marble-board.is-bump{animation:bb-maze-bump .16s ease-in-out}
@keyframes bb-maze-bump{50%{filter:brightness(1.13)}}
#bb-decompression .bb-tower-scene{position:relative;width:min(600px,100%);height:495px;overflow:hidden;margin:14px auto 20px;border-radius:18px;background:linear-gradient(145deg,#e5eee2 0%,#e7e8d9 70%,#d3e1d8);perspective:900px;touch-action:manipulation;border:1px solid #ceddcf;cursor:pointer}
#bb-decompression .bb-tower-scene:before{content:'';position:absolute;bottom:0;left:5%;width:90%;height:14px;border-radius:45%;background:#39766d;box-shadow:0 6px 0 #22574e}
#bb-decompression .bb-tower-stack{position:absolute;inset:0;transform:perspective(840px) rotateX(7deg);transform-origin:bottom;pointer-events:none}
#bb-decompression .bb-tower-layer,#bb-decompression .bb-tower-moving{position:absolute;height:34px;background:linear-gradient(110deg,#80b1a0 0%,#4c988b 70%,#37776f);border:2px solid #f7f2e6;border-radius:4px;box-shadow:7px 7px 0 #306b63,8px 9px 12px #12453e40;box-sizing:border-box}
#bb-decompression .bb-tower-layer:nth-child(3n+2){background:linear-gradient(110deg,#f5bca4,#d98b78)}
#bb-decompression .bb-tower-layer:nth-child(3n+3){background:linear-gradient(110deg,#bdc7a4,#8ba993)}
#bb-decompression .bb-tower-moving{background:linear-gradient(115deg,#edc4a1,#de9e82);transform:translateZ(22px);box-shadow:8px 9px 0 #996e65,10px 12px 15px #22494342;pointer-events:none}
#bb-decompression .bb-tower-moving.is-fallen{transform:translateY(60px) rotate(16deg);opacity:.65;transition:transform .5s,opacity .5s}
@media(max-width:749px){#bb-decompression .bb-arcade-panel{padding:11px;border-radius:13px}#bb-decompression .bb-whack-field{gap:5px;padding:12px 8px;border-width:5px}#bb-decompression .bb-whack-mound{border-width:4px}#bb-decompression .bb-whack-character{width:63%;left:19%}#bb-decompression .bb-arcade-score-stat{min-width:68px;padding:7px 9px}#bb-decompression .bb-arcade-score-stat strong{font-size:18px}#bb-decompression .bb-tower-scene{height:425px}#bb-decompression .bb-marble-board{width:min(96%,500px);margin:23px auto 30px;padding:4px;border-width:6px}#bb-decompression .bb-marble-cell.is-wall{border-width:1px;box-shadow:inset 1px 1px 0 #8bb9a5,inset -1px -1px 0 #24574f}}
@media(prefers-reduced-motion:reduce){#bb-decompression .bb-whack-character,#bb-decompression .bb-marble-board,#bb-decompression .bb-arcade-arrow{transition:none!important}}