/* PC big box. Six square faces share one cuboid; wear belongs to the print. */
.claba-case-stage{--case-depth:80px;--case-x:-4deg;--case-y:-26deg;--case-paper:#c3af8b;position:relative;perspective:1400px;padding:26px 22px 8px;max-width:344px;margin:auto;touch-action:pan-y}
.claba-case-stage::before{content:"";position:absolute;left:10%;right:0;bottom:29px;height:27px;border-radius:50%;background:#010309bf;filter:blur(13px);transform:rotate(-4deg);pointer-events:none}
.claba-case-object{position:relative;width:112%;margin-inline:-6%;transform-style:preserve-3d;transform:rotateX(var(--case-x)) rotateY(var(--case-y)) rotateZ(-1deg);transition:transform .65s cubic-bezier(.16,1,.3,1)}
.claba-case-face{position:absolute;box-sizing:border-box;border:0;border-radius:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-color:#20262b;outline:.35px solid #968775;outline-offset:-.25px}
.claba-case-front,.claba-case-back{inset:0}
.claba-case-front{position:relative;transform:translateZ(calc(var(--case-depth)/2));display:flex;flex-direction:column;padding:8px;background:linear-gradient(145deg,#33383b,#171d24 58%,#292b2b);box-shadow:inset 0 0 0 1px #ccb994b3}
.claba-case-back{transform:translateZ(calc(var(--case-depth)/-2)) rotateY(180deg);background:linear-gradient(140deg,#242b32,#11171c);box-shadow:inset 0 0 0 2px #b7a382,14px 22px 28px #0008}
.claba-case-rail{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:2px 3px 9px;color:#eee3cb;font:9px/1.4 'Fira Mono',monospace;letter-spacing:.16em;white-space:nowrap}
.claba-case-rail i{font-style:normal;font-size:8px;letter-spacing:.08em;color:#c7bba4}
.claba-case-art{flex:none;min-height:0;position:relative;overflow:hidden;background:#111416;box-shadow:0 0 0 1px #9b917166}
body :is(.claba-f-caratula,.claba-showcase-box) .claba-case-art img{display:block;width:100%;height:auto;object-fit:cover;image-rendering:auto;border:0;border-radius:0;box-shadow:none;margin:0}
.claba-case-imprint{display:flex;justify-content:space-between;padding:7px 3px 1px;color:#ccbea5;font:6px/1.3 'Fira Mono',monospace;letter-spacing:.15em}
/* Flat ink layers: no filters/opacity on the preserve-3d object. */
.claba-case-front::after{content:"";position:absolute;inset:0;pointer-events:none;background:url('./box-wear-v1.svg') center/100% 100% no-repeat,url('./box-paper-v1.svg') 0 0/128px 128px;mix-blend-mode:normal}
.claba-case-patina{position:absolute;inset:0;pointer-events:none;background:linear-gradient(116deg,#fff6df0a,transparent 42%,#08060013),radial-gradient(ellipse at 0 0,#d7c8a322,transparent 40%);box-shadow:inset 0 0 14px #110d0019}
.claba-case-spine{left:0;top:0;width:var(--case-depth);height:100%;transform-origin:left center;transform:translateZ(calc(var(--case-depth)/-2)) rotateY(-90deg)}
.claba-case-edge{left:100%;top:0;width:var(--case-depth);height:100%;transform-origin:left center;transform:translateZ(calc(var(--case-depth)/2)) rotateY(90deg)}
.claba-case-spine,.claba-case-edge{display:flex;align-items:center;gap:18px;padding:17px 7px;writing-mode:vertical-rl;background:linear-gradient(90deg,#151b23,#3c4247 35%,#33383c 75%,#191f26);box-shadow:inset 1px 0 #d5c49c99,inset -1px 0 #756550;color:#e8dbc0}
.claba-case-spine span,.claba-case-edge span{font:8px/1 'Fira Mono',monospace;letter-spacing:.2em;white-space:nowrap;flex-shrink:0}
.claba-case-spine b,.claba-case-edge b{font:18px/1.15 'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.03em;max-height:72%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.claba-case-spine i,.claba-case-edge i{margin-top:auto;font:7px/1 'Fira Mono',monospace;font-style:normal;letter-spacing:.18em;color:#c9b891}
.claba-case-spine::after,.claba-case-edge::after{content:"";position:absolute;inset:0;pointer-events:none;background:url('./box-paper-v1.svg') 13px 19px/100px 100px,linear-gradient(90deg,#c9b89599 0 1px,transparent 2px calc(100% - 2px),#b8a177 100%);box-shadow:inset 0 2px #cbb89688,inset 0 -2px #b3a08099}
.claba-case-top{left:0;top:0;width:100%;height:var(--case-depth);transform-origin:center top;transform:translateZ(calc(var(--case-depth)/-2)) rotateX(90deg);background:linear-gradient(#887959,#b3a283 15%,#9b8d70 18%,#615e54 20%,#444c52 23%,#343d45 94%,#bea984 96%)}
.claba-case-bottom{left:0;top:100%;width:100%;height:var(--case-depth);transform-origin:center top;transform:translateZ(calc(var(--case-depth)/2)) rotateX(-90deg);background:linear-gradient(#847152,#aa9876 12%,#60594a 14%,#81745b 88%,#b8a47d 90%)}
.claba-case-top::after,.claba-case-bottom::after{content:"";position:absolute;inset:0;background:url('./box-paper-v1.svg') 0 0/96px 96px;pointer-events:none;box-shadow:inset 1px 0 #c3b395,inset -1px 0 #73634b}
.claba-case-fold{position:absolute;inset:20% 9% 14%;border:1px solid #c9b99540;border-bottom-color:#080d1377;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}
.claba-case-top-label{position:absolute;left:18%;right:18%;top:34%;text-align:center;color:#ddd2b9;overflow:hidden;white-space:nowrap;font:7px/1 'Fira Mono',monospace;letter-spacing:.15em}
.claba-case-caption{display:flex;justify-content:center;gap:9px;align-items:center;margin-top:28px;color:#c0b69f;font:8px/1.4 'Fira Mono',monospace;letter-spacing:.12em;text-align:center}.claba-case-caption b{font-weight:400;color:#9bd8da}
.claba-case-stage.is-case-opposite{--case-x:0deg;--case-y:28deg}
.claba-case-object[role=button]{cursor:pointer;-webkit-tap-highlight-color:transparent}.claba-case-object[role=button]:focus-visible{outline:2px solid #98edf1;outline-offset:9px}
@media(max-width:1199px){.claba-case-stage{--case-depth:46px}}
@media(max-width:639px){.claba-case-stage{--case-depth:22px;padding:11px 7px 7px 11px}.claba-case-front{padding:3px}.claba-case-rail{font-size:4px;letter-spacing:.04em;padding:1px 1px 4px}.claba-case-rail i{font-size:3.5px}.claba-case-imprint{padding:3px 1px 0;font-size:3px;letter-spacing:0}.claba-case-spine,.claba-case-edge{gap:6px;padding:6px 3px}.claba-case-spine b,.claba-case-edge b{font-size:9px}.claba-case-spine span,.claba-case-edge span{font-size:3px}.claba-case-spine i,.claba-case-edge i{font-size:3px}.claba-case-caption{display:none}.claba-case-top-label{font-size:3px}.claba-case-stage::before{bottom:1px;height:12px;filter:blur(6px)}}
@media(prefers-reduced-motion:no-preference){.claba-case-object{animation:claba-case-arrival 2.4s cubic-bezier(.22,.7,.23,1) backwards}@keyframes claba-case-arrival{0%{transform:translateY(25px) rotateX(-14deg) rotateY(-38deg) rotateZ(-3deg)}45%{transform:translateY(-3px) rotateX(-11deg) rotateY(26deg) rotateZ(1deg)}100%{transform:rotateX(var(--case-x)) rotateY(var(--case-y)) rotateZ(-1deg)}}}
@media(prefers-reduced-motion:reduce){.claba-case-object{animation:none;transition:none}}
@media print{.claba-case-stage{padding:0}.claba-case-object{transform:none;animation:none}.claba-case-spine,.claba-case-edge,.claba-case-top,.claba-case-bottom,.claba-case-back,.claba-case-caption,.claba-case-stage::before{display:none}}

/* Software artwork is already a complete print. Continue its outer 5% around the box. */
.claba-case-stage--software .claba-case-face{outline:0;background-color:#17232b}
.claba-case-stage--software .claba-case-front{padding:0;background:none;box-shadow:none}
.claba-case-stage--software .claba-case-art{background:none;box-shadow:none}
.claba-case-stage--software .claba-case-face::after{content:none}
.claba-case-stage--software :is(.claba-case-spine,.claba-case-edge){background-image:linear-gradient(90deg,#0003,#00000008 55%,#0004),var(--case-artwork);background-size:100% 100%,2000% 100%;background-repeat:no-repeat;box-shadow:inset 1px 0 #ffffff17,inset -1px 0 #0003}
.claba-case-stage--software .claba-case-spine{background-position:center,left center}
.claba-case-stage--software .claba-case-edge{background-position:center,right center}
.claba-case-stage--software :is(.claba-case-top,.claba-case-bottom){background-size:100% 100%,100% 2000%;background-repeat:no-repeat;box-shadow:inset 0 1px #ffffff1a,inset 0 -1px #0003}
.claba-case-stage--software .claba-case-top{background-image:linear-gradient(#ffffff12,#00000008),var(--case-artwork);background-position:center,center top}
.claba-case-stage--software .claba-case-bottom{background-image:linear-gradient(#0002,#0005),var(--case-artwork);background-position:center,center bottom}
.claba-case-stage--software .claba-case-back{background-image:linear-gradient(#0003,#0003),var(--case-artwork);background-size:100% 100%;background-repeat:no-repeat;box-shadow:14px 22px 28px #0008}