*{box-sizing:border-box}
html{min-height:100%;background:#020b08}
body{margin:0;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at center,#13372a 0,#030b08 65%);color:#e5dbb9}
button{font:inherit}[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.access-gate{width:min(100vw,calc(100svh * .5625),640px);aspect-ratio:9/16;position:relative;isolation:isolate;overflow:clip;margin:auto;background:#06140f}
.backplate{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.chest-stage{position:absolute;inset:0;isolation:isolate}
.chest-trigger{position:absolute;left:5%;top:31.5%;width:90%;height:61%;z-index:4;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:12px}
.chest-trigger:disabled{cursor:wait}
.chest-trigger:focus-visible{outline:2px solid #9ff5ce;outline-offset:-4px;box-shadow:0 0 25px #6ef3b922}
.chest-visual{display:block;position:absolute;left:0;top:0;width:100%;aspect-ratio:1;transition:filter .25s}
.chest-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.closed{filter:drop-shadow(0 18px 16px #000b);animation:breathe 4s ease-in-out infinite}
.chest-visual .opened{opacity:0;inset:17% auto auto 8%;width:84%;height:84%;filter:drop-shadow(0 0 22px #8ce8c933)}
.chest-trigger:not(:disabled):hover .chest-visual{filter:brightness(1.12)}
.portal-glow{position:absolute;z-index:0;left:50%;top:59%;width:135%;height:65%;transform:translate(-50%,-50%);opacity:0;background:radial-gradient(ellipse,#fff2bcaa,#97f1c54d 26%,transparent 65%);pointer-events:none}
.rays{position:absolute;z-index:2;left:50%;top:59%;width:180%;aspect-ratio:1;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 15deg,transparent 0 15deg,#f6e2a866 17deg 18deg,transparent 20deg 40deg);mask-image:radial-gradient(circle,transparent 10%,#000 24%,transparent 66%);opacity:0;pointer-events:none}
.light-wave{position:absolute;z-index:3;left:50%;top:59%;width:35%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #f6e3a599;border-radius:50%;box-shadow:0 0 28px #8aeac34d;opacity:0;pointer-events:none}
.sparkles{position:absolute;z-index:5;left:50%;top:59%;pointer-events:none}
.sparkles i{position:absolute;width:5px;height:5px;background:#f4e7b7;transform:rotate(45deg);opacity:0;box-shadow:0 0 10px #f3d079}
.retry{position:absolute;z-index:6;left:12%;top:84%;width:76%;height:8%;border:0;background:transparent;cursor:pointer;border-radius:8px}
.retry:hover{box-shadow:inset 0 0 20px #b8eabc2b}.retry:focus-visible{outline:2px solid #a0efc5;outline-offset:3px}
.access-gate[data-phase=opening] .closed{animation:unlock 1.2s both}
.access-gate[data-phase=opening] .opened{animation:open-chest 1.2s .8s both}
.access-gate[data-phase=opening] .portal-glow{animation:bloom 1.9s .65s both}
.access-gate[data-phase=opening] .rays{animation:rays 1.8s 1s both}
.access-gate[data-phase=opening] .light-wave{animation:wave 1.5s 1.05s both}
.access-gate[data-phase=opening] .sparkles i{animation:spark 1.45s calc(1.05s + var(--delay)) both}
.access-gate[data-phase=complete] .closed{opacity:0;animation:none}
.access-gate[data-phase=complete] .opened{opacity:1}
.access-gate[data-phase=complete] .portal-glow{opacity:.3}
@keyframes breathe{50%{transform:translateY(-4px)}}
@keyframes unlock{0%{transform:none;opacity:1}20%{transform:translateX(-3px) rotate(-.4deg)}35%{transform:translateX(3px) rotate(.4deg)}55%{transform:translateX(-2px)}70%{transform:none;opacity:1}100%{opacity:0;transform:scale(1.05)}}
@keyframes open-chest{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bloom{0%{opacity:0;scale:.5}45%{opacity:1;scale:1.05}100%{opacity:.4;scale:1.2}}
@keyframes rays{0%{opacity:0;rotate:-10deg}40%{opacity:.8}100%{opacity:.1;rotate:22deg}}
@keyframes wave{0%{opacity:0;scale:.3}15%{opacity:1}100%{opacity:0;scale:3}}
@keyframes spark{0%{opacity:0;translate:0 0;scale:.3}15%{opacity:1}100%{opacity:0;translate:var(--x) var(--y);scale:.3}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.access-gate[data-phase=opening] .closed{opacity:0}.access-gate[data-phase=opening] .opened{opacity:1}.access-gate[data-phase=opening] .portal-glow{opacity:.25}.sparkles,.rays,.light-wave{display:none}}