/*
 * Chest construction used during the charge phase.
 *
 * The earlier version assembled a lid, body and lock from separate zero-size
 * anchors. A filter on its 3-D parent flattened that scene, so the two front
 * faces read as unrelated wooden strips. This model keeps the complete chest
 * (including its skull lock) on one front plane, inside a real CSS cuboid.
 */
.chest-zone {
  filter: none !important;
  perspective: 1180px;
  perspective-origin: 50% 48%;
  transform-style: preserve-3d;
  overflow: visible;
}
.chest-model,.vault-solid,.vault-face,.chest-blast,.blast-piece{transform-style:preserve-3d}
.chest-model{position:absolute;inset:0;z-index:5;pointer-events:none}
.vault-solid{--front-w:304px;--front-h:300px;--depth:78px;position:absolute;left:50%;top:50%;width:var(--front-w);height:var(--front-h);transform:translate3d(-50%,-50%,0) rotateX(-3deg);transform-origin:50% 52%}
.vault-face{position:absolute;box-sizing:border-box;backface-visibility:hidden}
.vault-front,.vault-back{inset:0;width:var(--front-w);height:var(--front-h)}
.vault-front{transform:translateZ(calc(var(--depth) / 2));z-index:3}
.vault-front img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 11px 9px rgba(0,11,19,.4))}
.vault-back{transform:rotateY(180deg) translateZ(calc(var(--depth) / 2));border:4px solid #5d8487;border-radius:26px 26px 18px 18px;background:repeating-linear-gradient(0deg,#15100b 0 21px,#402817 23px 32px,#120c09 34px 43px),linear-gradient(90deg,#0b222b,#5b3920 48%,#0a1820);box-shadow:inset 0 0 26px #000d}
.vault-side{top:10%;width:var(--depth);height:82%;border:4px solid #8faaa9;background:linear-gradient(90deg,#07171d,#315c66 14%,#54351e 47%,#160f0b 100%),repeating-linear-gradient(0deg,transparent 0 21px,#a4c7c433 22px 25px,transparent 26px 43px);box-shadow:inset 0 0 18px #000d}
.vault-side::before,.vault-side::after{content:"";position:absolute;left:-4px;right:-4px;height:9px;background:linear-gradient(#d5f2ed,#708d91 38%,#1b3037 67%,#acd0cb);box-shadow:0 1px 5px #001017}
.vault-side::before{top:23%}.vault-side::after{bottom:21%}.vault-side-right{left:100%;transform-origin:left center;transform:rotateY(90deg)}.vault-side-left{right:100%;transform-origin:right center;transform:rotateY(-90deg);filter:brightness(.62)}
.vault-top{left:0;top:3%;width:var(--front-w);height:var(--depth);transform-origin:center bottom;transform:rotateX(90deg) translateZ(calc(var(--front-h) / 2));border:4px solid #9fc2c0;border-radius:52% 52% 13px 13px;background:radial-gradient(ellipse at 50% 10%,#bd9160,#664126 44%,#180f0a 88%),repeating-linear-gradient(90deg,transparent 0 42px,#d4f1ea33 44px 49px,transparent 51px 86px);box-shadow:inset 0 12px 17px #e2fff040,inset 0 -13px 16px #000b}

/* The blast is a later, separate state. It is hidden for the entire spin. */
.chest-blast{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0}.blast-piece{position:absolute;inset:0;opacity:0;transform-origin:50% 50%}.blast-piece img{display:block;width:100%;height:100%;object-fit:contain}.blast-lid{clip-path:polygon(0 0,100% 0,100% 47%,0 47%);transform-origin:50% 42%}.blast-body{clip-path:polygon(0 39%,100% 39%,100% 100%,0 100%);transform-origin:50% 56%}

/* Charge only rotates the intact cuboid. No child receives an independent transform. */
.charge .chest-model{opacity:1}.charge .vault-solid{filter:none}.charge .vault-front img{animation:chestMetalWeight 2.35s ease-in both}

/* On open, first hold the intact model, then let explicit lid/body objects eject. */
.open .chest-zone{animation:openChestHold .88s linear both !important}.open .chest-model{animation:solidChestYield .58s ease-out both}.open .chest-blast{animation:blastVisible .05s .11s linear both}.open .blast-lid{animation:blastLidEject .68s .13s cubic-bezier(.13,.8,.16,1) both}.open .blast-body{animation:blastBodyEject .72s .13s cubic-bezier(.13,.8,.16,1) both}.chest-fragments{display:none}
@keyframes chestMetalWeight{0%{filter:brightness(.84) saturate(.9)}57%{filter:brightness(1.03) saturate(1.02)}100%{filter:brightness(1.14) saturate(1.08)}}
@keyframes solidChestYield{0%,14%{opacity:1}34%,100%{opacity:0}}
@keyframes blastVisible{to{opacity:1}}
@keyframes openChestHold{0%,100%{transform:translate(-50%,-48%) scale(1.3);opacity:1}}
@keyframes blastLidEject{0%{opacity:1;transform:translate3d(0,0,0) rotateX(0) rotateY(0)}100%{opacity:0;transform:translate3d(88px,-156px,110px) rotateX(-42deg) rotateY(29deg) rotateZ(18deg) scale(1.04)}}
@keyframes blastBodyEject{0%{opacity:1;transform:translate3d(0,0,0) rotateX(0) rotateY(0)}100%{opacity:0;transform:translate3d(-94px,116px,-48px) rotateX(16deg) rotateY(-24deg) rotateZ(-12deg) scale(.86)}}