/* Textured geometry in a shared CSS 3D space: four walls, floor, hinged lid and latch. */
.ws-pack{--crate-size:clamp(95px,min(16cqw,17cqh),205px);--depth:calc(var(--crate-size)*.78);--half-depth:calc(var(--depth)*.5);--body-height:calc(var(--crate-size)*.72);position:absolute;left:calc(23% - var(--crate-size)*.75);top:auto;bottom:7%;width:calc(var(--crate-size)*1.5);height:calc(var(--crate-size)*1.6);min-height:0;padding:0;display:block;border:0;border-radius:0;background:none;box-shadow:none;transform:none;perspective:900px;overflow:visible;touch-action:manipulation;-webkit-tap-highlight-color:transparent;isolation:auto;animation:none!important;filter:none!important}
.ws-pack::before,.ws-pack::after{display:none}
.crate-fall{position:absolute;inset:0;transform:translateY(var(--fall,0px)) rotateZ(var(--rock,0deg));transform-origin:50% 92%;transform-style:preserve-3d;pointer-events:none}
.crate-model{position:absolute;left:50%;bottom:calc(var(--crate-size)*.16);width:var(--crate-size);height:var(--body-height);transform:translateX(-50%) rotateX(-25deg) rotateY(-24deg);transform-origin:50% 100%;transform-style:preserve-3d}
.crate-face,.crate-lid-top,.crate-lid-inner{position:absolute;display:block;background-image:url('./assets/crate-atlas-v5.png');background-size:300% 100%;background-repeat:no-repeat;border:1px solid #a3643b;backface-visibility:hidden}
.crate-front,.crate-back{inset:0;background-position:0 50%;transform:translateZ(var(--half-depth))}
.crate-back{background-position:100% 50%;transform:rotateY(180deg) translateZ(var(--half-depth))}
.crate-side{top:0;left:50%;height:100%;width:var(--depth);background-position:100% 50%;transform:translateX(-50%) rotateY(90deg) translateZ(calc(var(--crate-size)*.5));box-shadow:inset 0 0 30px #0007}
.crate-left{transform:translateX(-50%) rotateY(-90deg) translateZ(calc(var(--crate-size)*.5))}
.crate-wall-inner{position:absolute;inset:0;display:block;background:repeating-linear-gradient(0deg,#221812 0 31%,#080706 32% 33%);border:3px solid #4c3527;transform:rotateY(180deg) translateZ(1px);backface-visibility:hidden}
.crate-floor{top:100%;left:0;width:100%;height:var(--depth);background:radial-gradient(ellipse,#972b2133,#0b0908 70%),repeating-linear-gradient(90deg,#2b2017 0 31%,#0c0807 32% 33%);transform:translateY(-50%) rotateX(90deg);border:3px solid #38261d}
.crate-lid{position:absolute;left:0;top:0;width:100%;height:var(--depth);transform-style:preserve-3d;transform-origin:50% 0%;transform:translateZ(calc(var(--half-depth)*-1)) rotateX(var(--lid,90deg));transition:transform .9s cubic-bezier(.2,.8,.25,1) .2s}
.crate-lid-top,.crate-lid-inner{inset:0;background-position:50% 50%;transform:translateZ(3px);box-shadow:0 0 0 2px #23150e,inset 0 0 0 2px #cd8a4a66}
.crate-lid-inner{background:repeating-linear-gradient(0deg,#39281b 0 31%,#160d09 32% 33%);transform:rotateX(180deg);border:5px solid #563622;box-shadow:inset 0 0 20px #0009}
.crate-lid-edge{position:absolute;bottom:0;left:0;width:100%;height:6px;transform-origin:50% 100%;transform:rotateX(90deg);background:linear-gradient(#a56a3e,#21140c);border:1px solid #c39255;backface-visibility:hidden}
.crate-latch{position:absolute;left:40%;top:-3px;width:20%;height:15%;min-height:9px;transform:translateZ(calc(var(--half-depth) + 3px));transform-origin:50% 0;background:linear-gradient(100deg,#665d58,#f1e8df 35%,#8d827a 70%,#c8bcb1);border:1px solid #1d1714;box-shadow:inset 0 0 0 2px #d8c7b666,0 2px 3px #000b;transition:transform .2s ease-out}
.crate-foot{position:absolute;bottom:-6px;width:20%;height:8px;background:#1d120e;border:1px solid #805536;transform:translateZ(calc(var(--half-depth) - 8px));left:5%}.crate-foot.right{left:75%}
.crate-shadow{position:absolute;left:7%;right:1%;bottom:2%;height:25%;background:radial-gradient(ellipse,#000c 5%,#0007 40%,transparent 70%);transform:scale(var(--shadow-scale,1)) rotate(-5deg);opacity:var(--shadow-opacity,.85);pointer-events:none}
.crate-impact{position:absolute;left:6%;right:2%;bottom:2%;height:25%;border:2px solid #ce9a6355;border-radius:50%;opacity:0;pointer-events:none}
.ws-pack.has-impact .crate-impact{animation:crate-impact .55s ease-out both}
@keyframes crate-impact{0%{opacity:.55;transform:scale(.5)}100%{opacity:0;transform:scale(1.5)}}
.crate-glow{position:absolute;top:3px;left:5%;width:90%;height:var(--depth);transform:translateY(-50%) rotateX(90deg);background:radial-gradient(ellipse,#f5bb8266,#d42b161a 50%,transparent 72%);opacity:0;transition:opacity .5s .45s;pointer-events:none}
.ws-pack[data-crate-state="opening"],.ws-pack[data-crate-state="open"]{--lid:167deg}
.ws-pack[data-crate-state="opening"] .crate-latch,.ws-pack[data-crate-state="open"] .crate-latch{transform:translateZ(calc(var(--half-depth) + 5px)) rotateX(-110deg)}
.ws-pack[data-crate-state="opening"] .crate-glow,.ws-pack[data-crate-state="open"] .crate-glow{opacity:1}
.crate-caption{position:absolute;left:-8%;right:-8%;bottom:-17px;text-align:center;font-size:9px;font-weight:800;letter-spacing:.1em;color:#ffe6d0;text-shadow:0 1px 4px #000,0 0 8px #000;pointer-events:none}
.ws-pack[data-crate-state="dropping"] .crate-caption{opacity:0}
.ws-pack:focus-visible{outline:2px solid #efba8b;outline-offset:8px;border-radius:8px}
.ws-order-panel::backdrop{background:#05030780;backdrop-filter:blur(1px)}
@container(max-aspect-ratio:1/1){.ws-pack{--crate-size:clamp(62px,min(21cqw,10cqh),110px);left:calc(23% - var(--crate-size)*.75);top:auto;bottom:5.5%;height:calc(var(--crate-size)*1.6);width:calc(var(--crate-size)*1.5);min-height:0;padding:0}.crate-caption{font-size:8px;letter-spacing:.05em;bottom:-15px}}
@container(min-aspect-ratio:2/1) and (max-height:500px){.ws-pack{--crate-size:clamp(45px,15cqh,72px);left:calc(21% - var(--crate-size)*.75);bottom:3%;top:auto;width:calc(var(--crate-size)*1.5);height:calc(var(--crate-size)*1.6);min-height:0;padding:0;z-index:4}.crate-caption{font-size:7px;bottom:-9px;letter-spacing:0}.crate-model{transform:translateX(-50%) rotateX(-28deg) rotateY(-24deg)}}
@media(prefers-reduced-motion:reduce){.crate-lid,.crate-latch,.crate-glow{transition:none}.ws-pack.has-impact .crate-impact{animation:none}}
/* Keep the landing footprint on the left leather mat. */
@container(min-aspect-ratio:1/1){.ws-pack{bottom:15%}}
@container(min-aspect-ratio:2/1) and (max-height:500px){
 .ws-board{top:4%;height:64%}.ws-board-frame{padding:6px}.ws-eyebrow,.ws-task-words small,.ws-difficulty,.ws-board-bottom{display:none}.ws-board-head{padding-bottom:5px}.ws-task{padding:2px 4px}.ws-active-task{padding-top:4px}.ws-pack{bottom:3%}
}

.crate-interior{position:absolute;inset:0;display:block;background:repeating-linear-gradient(0deg,#34251a 0 31%,#140d09 32% 33%);border:3px solid #563923;backface-visibility:hidden}.inner-back{transform:translateZ(calc(1px - var(--half-depth)))}.inner-front{transform:rotateY(180deg) translateZ(calc(1px - var(--half-depth)))}.inner-right,.inner-left{left:50%;width:var(--depth);transform:translateX(-50%) rotateY(-90deg) translateZ(calc(1px - var(--crate-size)*.5))}.inner-left{transform:translateX(-50%) rotateY(90deg) translateZ(calc(1px - var(--crate-size)*.5))}
@container(max-aspect-ratio:1/1){.ws-pack{left:calc(18% - var(--crate-size)*.75)}}
@container(min-aspect-ratio:2/1) and (max-height:500px){.ws-board{height:60%}}
.ws-pack[data-crate-state="dropping"] .crate-lid,.ws-pack[data-crate-state="dropping"] .crate-latch,.ws-pack[data-crate-state="dropping"] .crate-glow{transition:none}
/* Follow the portrait artwork's mat coordinates even when cover crops its ends. */
@container(max-aspect-ratio:1/1){.ws-pack{bottom:calc(50cqh - var(--art-height)*.345 + var(--crate-size)*.14)}}