.home-page .hero-art {overflow:visible;transform:none;}
.home-page .hero-art>.hero-crate {visibility:hidden;pointer-events:none;}
.crate-viewer {position:absolute;inset:0;z-index:2;display:grid;place-items:center;}
.crate-interaction {position:absolute;inset:12% 15% 6%;display:grid;place-items:center;perspective:1100px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:-6px;border-radius:32px;}
.crate-interaction:focus-visible {outline:2px solid #c9ff6866;}
.crate-interaction.is-dragging {cursor:grabbing;}
.crate-scale {width:300px;height:210px;transform:translateY(-12px) scale(1.15);transform-style:preserve-3d;pointer-events:none;}
.crate-model {position:relative;width:300px;height:210px;transform-style:preserve-3d;transform:rotateX(var(--crate-x,-22deg)) rotateY(var(--crate-y,-32deg));will-change:transform;}
.crate-face {position:absolute;width:300px;height:210px;backface-visibility:hidden;border:3px solid #65735a;background:linear-gradient(135deg,#ffffff0c,transparent 50%),repeating-linear-gradient(0deg,#fff0 0 2px,#ffffff04 2px 3px),linear-gradient(110deg,#303a30,#161e1c 70%);box-shadow:inset 0 0 0 8px #0d1513,inset 0 0 0 10px #64765466,inset 0 -18px 30px #0005;}
.crate-face::before {content:"";position:absolute;inset:26px 0 auto;height:7px;background:linear-gradient(#090e0c 0 4px,#a7ce6577 4px 5px,#0e1613 5px);z-index:3;}
.crate-face::after {content:"";position:absolute;inset:10px;background:radial-gradient(circle at 3px 3px,#b2c394 0 1px,#111 1px 3px,transparent 3px),radial-gradient(circle at calc(100% - 3px) 3px,#b2c394 0 1px,#111 1px 3px,transparent 3px),radial-gradient(circle at 3px calc(100% - 3px),#657654 0 1px,#111 1px 3px,transparent 3px),radial-gradient(circle at calc(100% - 3px) calc(100% - 3px),#657654 0 1px,#111 1px 3px,transparent 3px);pointer-events:none;}
.crate-front {transform:translateZ(70px);}
.crate-back {transform:rotateY(180deg) translateZ(70px);}
.crate-right,.crate-left {width:140px;left:80px;background:linear-gradient(130deg,#384333,#111a18 70%);}
.crate-right {transform:rotateY(90deg) translateZ(150px);}
.crate-left {transform:rotateY(-90deg) translateZ(150px);}
.crate-top,.crate-bottom {height:140px;top:35px;}
.crate-top {transform:rotateX(90deg) translateZ(105px);background:linear-gradient(120deg,#4e5e3d,#253128 55%,#1a2420);box-shadow:inset 0 0 0 9px #202a22,inset 0 0 0 11px #b4d78444;}
.crate-bottom {transform:rotateX(-90deg) translateZ(105px);background:#171e19;}
.crate-top::before,.crate-bottom::before {display:none;}
.crate-band {position:absolute;left:38px;top:0;bottom:0;width:45px;background:linear-gradient(90deg,#92b347,#c5ee7b 12%,#acd85a 85%,#759439);box-shadow:inset 1px 0 #e3ffc099,inset -1px 0 #1116;}
.crate-top .crate-band {background:linear-gradient(90deg,#b0d662,#dbff97 15%,#c8f178 85%,#a4cb59);}
.crate-emblem {position:absolute;right:49px;top:62px;width:85px;height:90px;display:grid;place-items:center;border:1px solid #778d5877;border-radius:5px;background:linear-gradient(145deg,#1d2922,#111a16);box-shadow:0 3px 10px #0004,inset 0 1px #c9ff6815;}
.crate-emblem img {width:49px;height:55px;object-fit:contain;}
.crate-fastener {position:absolute;left:47px;top:18px;width:27px;height:31px;border:2px solid #637448;border-radius:3px;background:linear-gradient(#6f8054,#273323);box-shadow:0 2px 5px #0008;z-index:4;}
.crate-serial {position:absolute;bottom:20px;right:20px;font-size:7px;font-weight:500;letter-spacing:1px;color:#a5b78a;}
.crate-side-handle {position:absolute;left:48px;top:54px;width:120px;height:27px;border:4px solid #4c5b40;border-radius:7px;background:#0b1411;box-shadow:0 2px 0 #96ab6855,inset 0 4px 7px #000;}
.crate-vents {position:absolute;left:65px;top:111px;width:88px;height:35px;background:repeating-linear-gradient(0deg,#0c1411 0 4px,#48573d 4px 6px,transparent 6px 9px);border-inline:7px solid #1c281e;}
.crate-top-panel {position:absolute;left:111px;right:27px;top:40px;bottom:37px;display:grid;place-items:center;border:1px solid #8d9e6b55;border-radius:6px;color:#b0c18e66;font-size:10px;letter-spacing:3px;background:linear-gradient(135deg,#ffffff03,transparent);}
.crate-ground {position:absolute;top:76%;left:22%;width:56%;height:16%;border-radius:50%;background:radial-gradient(ellipse,#a1c84822,#0009 55%,transparent 72%);filter:blur(15px);pointer-events:none;}
.crate-controls {position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:18px;color:#a6aa9d;font-size:11px;}
.crate-controls button {min-height:44px;padding:8px 13px;border:1px solid #ffffff16;border-radius:24px;background:#0c0f0be0;color:#b7c4a5;font:inherit;cursor:pointer;transition:background .2s;}
.crate-controls button:hover {background:#26321c;}
.crate-controls button:focus-visible {outline:2px solid var(--lime);outline-offset:3px;}
.crate-controls button span {margin-left:6px;}
@media(min-width:1400px){.crate-scale{transform:scale(1.6);}}
@media(max-width:700px){.crate-scale{transform:scale(.83);}.crate-interaction{inset:7% 2% 15%;}.crate-controls{bottom:8px;font-size:10px;}.home-page .hero-art{height:400px;}}
@media(prefers-reduced-motion:reduce){.crate-controls button{transition:none;}}
@supports not (transform-style:preserve-3d){.crate-viewer{display:none;}.home-page .hero-art>.hero-crate{visibility:visible;}}


/* Reinforced case silhouette: raised vertical rails, ribbed lid and side lock. */
.crate-face {transform-style:preserve-3d;border:3px solid #344c20;border-radius:6px;background:linear-gradient(140deg,#b1d96b33,transparent 45%),repeating-linear-gradient(115deg,#0000 0 3px,#00000005 3px 4px),linear-gradient(100deg,#779e38,#4f7527 70%);box-shadow:inset 0 0 0 6px #60872e,inset 0 0 0 9px #9fc455,inset 0 -12px 18px #16240f55;}
.crate-face::before {top:29px;height:9px;background:linear-gradient(#99c355 0 2px,#203318 2px 6px,#8bb447 6px 8px,#2c411c 8px);}
.crate-face::after {inset:8px;border:1px solid #b7d97633;border-radius:3px;background:none;}
.crate-band,.crate-vents,.crate-top-panel {display:none;}
.crate-front,.crate-back {background:linear-gradient(90deg,#537f27,#82a641 9%,#3f651f 24%,#698e30 50%,#3e631f 76%,#8cb34a 93%,#507927);}
.crate-right,.crate-left {background:linear-gradient(90deg,#3b5e20,#739632 12%,#496c25 30%,#608532 80%,#344f1c);}
.crate-top {background:linear-gradient(145deg,#9fc458,#5f872c 70%);box-shadow:inset 0 0 0 7px #426823,inset 0 0 0 10px #b0d36e55;}
.crate-bottom {background:repeating-linear-gradient(90deg,#4c6b25 0 30px,#2e4c1a 30px 34px,#74923b 34px 38px);box-shadow:inset 0 0 0 8px #2d4b1a;}
.crate-emblem {width:152px;height:160px;left:calc(50% - 76px);right:auto;top:42px;border:2px solid #3e5d1d;border-radius:0;background:radial-gradient(ellipse at 40% 35%,#8ba94b,#5a7e2d 75%);box-shadow:inset 5px 0 10px #20371277,inset -2px 0 3px #b6d47766,inset 0 5px 9px #20371266;}
.crate-emblem img {width:69px;height:79px;margin-top:-5px;filter:drop-shadow(0 2px 1px #253b1b88);}
.crate-emblem::after {content:"SCRATCHDROP";position:absolute;bottom:23px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1px;color:#d0e6a4;font-weight:800;}
.crate-rail {position:absolute;top:15px;bottom:-2px;width:17px;background:linear-gradient(90deg,#385c1b,#a8cc5f 22%,#749b35 68%,#486b23);border:1px solid #415f22;border-radius:4px;box-shadow:4px 0 5px #192e1566,-1px 0 1px #c6e18877;transform:translateZ(7px);}
.crate-rail::after {content:"";position:absolute;top:0;right:-7px;bottom:0;width:7px;background:#3d5d20;transform-origin:left;transform:rotateY(90deg);}
.rail-one {left:10px;}.rail-two {left:49px;}.rail-three {right:49px;}.rail-four {right:10px;}
.crate-fastener {left:18px;top:20px;width:28px;height:32px;border:1px solid #476a27;border-radius:3px;background:linear-gradient(90deg,#4d7227,#aac85c 23%,#729535 85%,#38561e);box-shadow:0 3px 3px #213b1477,inset 0 0 0 2px #96b34c;transform:translateZ(10px);}
.crate-fastener::before {content:"";position:absolute;left:2px;right:2px;top:4px;height:5px;background:#22371b;border-radius:1px;border-bottom:1px solid #c0d98299;}
.crate-fastener::after {content:"";position:absolute;left:7px;right:7px;bottom:6px;height:10px;border:1px solid #4d712c;border-radius:50%;background:#a3bf55;box-shadow:inset 0 1px #d0e69a77;}
.crate-fastener-second {left:auto;right:18px;}
.crate-padlock {position:absolute;right:22px;top:65px;width:20px;height:25px;transform:translateZ(16px) rotate(7deg);transform-style:preserve-3d;z-index:5;}
.crate-padlock::before {content:"";position:absolute;left:2px;top:-16px;width:15px;height:10px;border:2px solid #52623c;border-radius:3px;background:#27391b;transform:translateZ(-3px);}
.crate-lock-body {position:absolute;inset:0;border:1px solid #506044;border-radius:3px 3px 5px 5px;background:linear-gradient(105deg,#ced5b8 0%,#9ca98a 18%,#829173 65%,#546349 100%);box-shadow:inset 0 1px 0 #f4f6e1,0 3px 4px #14210d88;}
.crate-lock-body::before {content:"";position:absolute;left:4px;right:4px;top:4px;height:2px;background:#dce3c433;box-shadow:0 3px #48583d33;}
.crate-lock-body::after {content:"";position:absolute;left:8px;top:11px;width:4px;height:7px;background:#2c3828;clip-path:polygon(50% 0,100% 20%,100% 50%,70% 65%,85% 100%,15% 100%,30% 65%,0 50%,0 20%);}
.crate-lock-shackle {position:absolute;left:4px;top:-14px;width:12px;height:19px;border:3px solid #bac5a9;border-bottom:0;border-radius:9px 9px 0 0;box-shadow:inset 1px 0 #f2f6e0,-1px 0 #4c5a44;transform-origin:2px 18px;transition:transform .7s ease;}
.is-open .crate-lock-shackle {transform:rotate(-32deg) translateY(-2px);}
.crate-lock-side {position:absolute;right:-4px;top:1px;width:4px;height:22px;background:linear-gradient(#8b997b,#4f6046);transform-origin:left;transform:rotateY(90deg);border-radius:0 2px 3px 0;}
.crate-back .crate-padlock {display:none;}
.crate-side-handle {left:35px;top:55px;width:67px;height:29px;border:7px solid #2c3c24;border-radius:3px;background:#1c2d17;box-shadow:0 2px 0 #a6c86777,inset 0 3px 5px #0008;}
.crate-side-handle::after {content:"";position:absolute;left:0;right:0;bottom:-8px;height:7px;background:linear-gradient(#1a2616,#4c5942);border-radius:2px;}
.crate-right::after,.crate-left::after {inset:39px 15px 11px;border:4px solid #567e2a;border-radius:3px;box-shadow:inset 3px 0 6px #1c361477,1px 0 #a3c56466;}
.crate-serial {bottom:16px;right:24px;color:#c7dc9566;font-size:6px;font-weight:600;letter-spacing:.8px;}
.crate-front .crate-serial,.crate-back .crate-serial {display:none;}
.crate-top-rib {position:absolute;left:13px;right:13px;top:15px;height:12px;border-radius:6px;background:linear-gradient(#c2dd7c,#86ac43 32%,#5e852c 72%,#355820);border:1px solid #638b2e;box-shadow:0 4px 4px #1b361255,inset 0 1px #d5e9a299;transform:translateZ(5px);}
.crate-top-rib.rib-two {left:13px;right:13px;top:44px;}.crate-top-rib.rib-three{top:75px;}.crate-top-rib.rib-four{top:105px;}
.crate-ground {background:radial-gradient(ellipse,#93c84a20,#0009 55%,transparent 72%);}

/* A smaller case leaves space for the lid and the showcase games. */
.crate-scale {transform:translateY(48px) scale(.88);}
.crate-lid {position:absolute;inset:0;transform-style:preserve-3d;transform-origin:150px 0 -70px;transition:transform 1s cubic-bezier(.2,.7,.2,1);}
.crate-lid .crate-top {backface-visibility:visible;border-width:5px;}
.is-open .crate-lid {transform:rotateX(110deg);}
.crate-interior {position:absolute;left:5px;top:45px;width:290px;height:130px;transform:rotateX(90deg) translateZ(92px);background:radial-gradient(ellipse,#b4ee5566,#152611 70%);border:7px solid #273d1a;box-shadow:inset 0 0 25px #000;backface-visibility:visible;}
.is-open .crate-fastener {transform:translateZ(10px) rotateX(-35deg);}
.crate-game-flight {position:absolute;left:50%;top:54%;width:0;height:0;pointer-events:none;z-index:4;}
.crate-flying-game {position:absolute;width:138px;left:-69px;top:-48px;padding:6px;border:1px solid #c9ff6855;border-radius:12px;background:linear-gradient(145deg,#34452a,#0f170e);box-shadow:0 10px 30px #0008,0 0 25px #c9ff6815;opacity:0;transform:translateY(0) scale(.2);--fly-x:-145px;--fly-y:-135px;--fly-rotate:-14deg;}
.crate-flying-game:nth-child(2){--fly-x:0px;--fly-y:-185px;--fly-rotate:3deg;}
.crate-flying-game:nth-child(3){--fly-x:145px;--fly-y:-125px;--fly-rotate:16deg;}
.crate-flying-game img {display:block;width:100%;height:77px;object-fit:cover;border-radius:7px;}
.crate-flying-game span {display:block;font-size:9px;font-weight:600;line-height:1.3;color:#edf7e1;padding:7px 3px 3px;text-align:center;}
.crate-preview-placeholder {height:100px;display:grid;place-items:center;color:var(--lime);}
.crate-preview-placeholder .icon {width:45px;height:45px;}
.is-open .crate-flying-game {animation:game-launch 1.1s .55s cubic-bezier(.16,.75,.22,1) both;}
.is-open .crate-flying-game:nth-child(2){animation-delay:.72s;}.is-open .crate-flying-game:nth-child(3){animation-delay:.88s;}
@keyframes game-launch {0%{opacity:0;transform:translate(0,20px) scale(.2) rotate(0);}20%{opacity:1;}75%{opacity:1;transform:translate(var(--fly-x),calc(var(--fly-y) - 15px)) scale(1.06) rotate(var(--fly-rotate));}100%{opacity:1;transform:translate(var(--fly-x),var(--fly-y)) scale(1) rotate(var(--fly-rotate));}}
.crate-fireworks {position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden;}
.crate-burst {position:absolute;left:24%;top:28%;}
.crate-burst:nth-child(2){left:77%;top:31%;}.crate-burst:nth-child(3){left:50%;top:14%;}
.crate-burst i {position:absolute;width:3px;height:12px;border-radius:3px;background:linear-gradient(#fff,#c9ff68);opacity:0;transform:rotate(var(--spark-angle)) translateY(0);}
.is-open .crate-burst i {animation:crate-spark 1.2s 1.25s ease-out 2;}.is-open .crate-burst:nth-child(2) i{animation-delay:1.55s;background:linear-gradient(#fff,#b49aff);}.is-open .crate-burst:nth-child(3) i{animation-delay:1.85s;background:linear-gradient(#fff,#ffdb79);}
@keyframes crate-spark {0%{opacity:0;transform:rotate(var(--spark-angle)) translateY(0) scaleY(.3);}15%{opacity:1;}100%{opacity:0;transform:rotate(var(--spark-angle)) translateY(-100px) scaleY(.3);}}
.crate-controls {z-index:5;gap:12px;}
@media(min-width:1400px){.crate-scale{transform:translateY(65px) scale(1.05);}}
@media(max-width:700px){.crate-scale{transform:translateY(50px) scale(.63);}.crate-game-flight{top:51%;}.crate-flying-game{width:100px;left:-50px;--fly-x:-94px;--fly-y:-80px;}.crate-flying-game img{height:55px;}.crate-flying-game span{font-size:8px;}.crate-flying-game:nth-child(2){--fly-y:-130px;}.crate-flying-game:nth-child(3){--fly-x:94px;--fly-y:-75px;}.crate-controls{gap:8px;font-size:9px;flex-wrap:wrap;}.crate-controls button{padding:8px 10px;}.crate-controls p{display:none;}.crate-burst{left:15%;}.crate-burst:nth-child(2){left:85%;}}
@media(prefers-reduced-motion:reduce){.crate-lid{transition:none;}.is-open .crate-flying-game{animation:none;opacity:1;transform:translate(var(--fly-x),var(--fly-y)) rotate(var(--fly-rotate));}.crate-fireworks{display:none;}}
/* Wider, lower case proportions; keep the logo and hardware undistorted. */
.crate-scale,.crate-model {width:360px;height:160px;}
.crate-face {width:360px;height:160px;}
.crate-right,.crate-left {width:140px;left:110px;}
.crate-right {transform:rotateY(90deg) translateZ(180px);}
.crate-left {transform:rotateY(-90deg) translateZ(180px);}
.crate-top,.crate-bottom {height:140px;top:10px;}
.crate-top {transform:rotateX(90deg) translateZ(80px);}
.crate-bottom {transform:rotateX(-90deg) translateZ(80px);}
.crate-lid {transform-origin:180px 0 -70px;}
.crate-interior {width:350px;top:15px;transform:rotateX(90deg) translateZ(67px);}
.crate-emblem {width:206px;height:112px;left:calc(50% - 103px);top:39px;}
.crate-emblem img {width:52px;height:60px;margin-top:-12px;}
.crate-emblem::after {bottom:12px;font-size:8px;}
.crate-side-handle {top:51px;}
@media(max-width:700px){.crate-scale{transform:translateY(50px) scale(.59);}}

@media(prefers-reduced-motion:reduce){.crate-lock-shackle{transition:none;}}

/* Quiet automatic showcase; keep the DROP wordmark readable. */
.crate-scale {transform:translateY(68px) scale(.64);}
.crate-flying-game {width:114px;left:-57px;--fly-x:-168px;--fly-y:-155px;}
.crate-flying-game img {height:64px;}
.crate-flying-game:nth-child(2){--fly-y:-215px;}
.crate-flying-game:nth-child(3){--fly-x:168px;--fly-y:-145px;}
@media(min-width:1400px){.crate-scale{transform:translateY(80px) scale(.8);}}
@media(max-width:700px){.crate-scale{transform:translateY(63px) scale(.46);}.crate-flying-game{width:85px;left:-42px;--fly-x:-102px;--fly-y:-90px;}.crate-flying-game img{height:45px;}.crate-flying-game:nth-child(2){--fly-y:-145px;}.crate-flying-game:nth-child(3){--fly-x:102px;--fly-y:-85px;}}
/* Keep the game fan close to the opening instead of across the wordmark. */
.crate-game-flight {top:57%;}
.crate-flying-game {width:104px;left:-52px;--fly-x:-110px;--fly-y:-90px;--fly-rotate:-16deg;}
.crate-flying-game img {height:58px;}
.crate-flying-game:nth-child(2){--fly-x:0px;--fly-y:-135px;--fly-rotate:0deg;}
.crate-flying-game:nth-child(3){--fly-x:110px;--fly-y:-85px;--fly-rotate:16deg;}
@media(max-width:700px){.crate-game-flight{top:55%;}.crate-flying-game{width:79px;left:-39px;--fly-x:-77px;--fly-y:-57px;}.crate-flying-game img{height:42px;}.crate-flying-game:nth-child(2){--fly-y:-98px;}.crate-flying-game:nth-child(3){--fly-x:77px;--fly-y:-53px;}}