#crate-ready{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:42;margin:0;padding:10px 16px;font:700 14px "Alegreya Sans",sans-serif;background:var(--af-stone-800);color:var(--af-ember-100);border:1px solid var(--af-ember-300);box-shadow:0 8px 24px color-mix(in srgb, var(--af-void) 60%, transparent);animation:crate-badge 2s ease-in-out infinite}
#crate-ready:focus-visible{outline:3px solid var(--af-bone);outline-offset:3px}
#crate-reveal{position:fixed;inset:0;z-index:65;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at center,color-mix(in srgb, var(--af-iron-800) 74%, transparent),color-mix(in srgb, var(--af-void) 91%, transparent));backdrop-filter:blur(5px)}
#crate-reveal .crate-shell{position:relative;width:min(490px,96vw);max-height:calc(100dvh - 36px);overflow:auto;text-align:center;padding:22px 26px 26px;color:var(--bone);background:linear-gradient(145deg,var(--af-stone-600),var(--af-stone-850) 36%,var(--af-stone-900));border:2px solid var(--af-gold-600);box-shadow:0 22px 65px color-mix(in srgb, var(--af-void) 87%, transparent),inset 0 0 0 1px color-mix(in srgb, var(--af-ember-100) 20%, transparent)}
.crate-shell:before,.crate-shell:after{content:"";position:absolute;top:9px;bottom:9px;width:3px;background:linear-gradient(var(--af-gold-600),var(--af-ember-300),var(--af-gold-700))}
.crate-shell:before{left:9px}.crate-shell:after{right:9px}
.crate-kicker{font:700 12px "Alegreya Sans",sans-serif;letter-spacing:.16em;color:var(--af-ember-300);margin:0 0 7px}
#crate-reveal h2{font:800 27px/1.2 Cinzel,serif;color:var(--af-ember-100);margin:0}
#crate-reveal .crate-later{position:absolute;top:4px;right:7px;z-index:4;margin:0;padding:2px 9px;font:26px "Alegreya Sans",sans-serif;color:var(--af-bone);background:transparent;border:0}
.crate-art{position:relative;height:208px;isolation:isolate;display:grid;place-items:center;overflow:hidden}
.crate-art:before{content:"";position:absolute;z-index:-1;width:290px;height:115px;bottom:3px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb, var(--af-gold-500) 24%, transparent),color-mix(in srgb, var(--af-gold-500) 0%, transparent) 72%)}
.crate-rays{position:absolute;inset:-70px;background:repeating-conic-gradient(from 8deg at 50% 61%,color-mix(in srgb, var(--af-ember-300) 25%, transparent) 0 9deg,transparent 9deg 22deg);opacity:.14;transform:scale(.75)}
.crate-coffer{position:relative;width:185px;height:100px;margin-top:42px;border:5px solid var(--af-ember-800);border-radius:var(--af-cut-md) var(--af-cut-md) var(--af-cut-lg) var(--af-cut-lg);corner-shape:bevel;background:repeating-linear-gradient(90deg,var(--af-ember-800) 0 34px,var(--af-gold-700) 34px 39px);box-shadow:inset 0 11px 10px color-mix(in srgb, var(--af-void) 47%, transparent),0 19px 15px color-mix(in srgb, var(--af-void) 60%, transparent);transform:perspective(450px) rotateX(8deg)}
.crate-coffer:before{content:"";position:absolute;left:-7px;top:-28px;width:189px;height:38px;border:5px solid var(--af-gold-700);border-radius:44% 44% 3px 3px;background:repeating-linear-gradient(90deg,var(--af-gold-700) 0 32px,var(--af-gold-700) 32px 37px);box-shadow:inset 0 7px 6px color-mix(in srgb, var(--af-gold-500) 40%, transparent)}
.crate-coffer:after{content:"";position:absolute;left:0;right:0;top:36px;height:11px;background:linear-gradient(var(--af-gold-500),var(--af-gold-700),var(--af-gold-600))}
.crate-coffer i,.crate-coffer b{position:absolute;top:-24px;bottom:0;width:10px;background:linear-gradient(90deg,var(--af-ember-800),var(--af-gold-500),var(--af-ember-800))}
.crate-coffer i{left:26px}.crate-coffer b{right:26px}
.crate-coffer span{position:absolute;z-index:2;left:76px;top:10px;width:25px;height:37px;border-radius:var(--af-cut-sm) var(--af-cut-sm) var(--af-cut-md) var(--af-cut-md);corner-shape:bevel;border:3px solid var(--af-ember-800);background:linear-gradient(90deg,var(--af-gold-700),var(--af-gold-300),var(--af-gold-700));box-shadow:0 2px 3px color-mix(in srgb, var(--af-void) 60%, transparent)}
.crate-sparks i{position:absolute;left:50%;top:55%;width:5px;height:5px;border-radius:50%;background:var(--af-ember-100);opacity:0;--a:calc(var(--n)*30deg);transform:rotate(var(--a)) translateY(0)}
#crate-reveal[data-stage="opening"] .crate-coffer{animation:crate-shake .16s linear infinite alternate}
#crate-reveal[data-stage="opening"] .crate-rays{animation:crate-rays .7s ease-out forwards}
#crate-reveal[data-stage="revealed"] .crate-rays,#crate-reveal[data-stage="collected"] .crate-rays{opacity:.7;transform:scale(1.25)}
#crate-reveal[data-stage="revealed"] .crate-coffer:before,#crate-reveal[data-stage="collected"] .crate-coffer:before{transform:perspective(300px) rotateX(-77deg);transform-origin:bottom;box-shadow:0 0 36px var(--crate-rarity)}
#crate-reveal[data-stage="revealed"] .crate-coffer,#crate-reveal[data-stage="collected"] .crate-coffer{box-shadow:inset 0 0 34px var(--crate-rarity),0 19px 15px color-mix(in srgb, var(--af-void) 60%, transparent),0 0 40px var(--crate-rarity)}
#crate-reveal[data-stage="revealed"] .crate-sparks i,#crate-reveal[data-stage="collected"] .crate-sparks i{animation:crate-spark 1.3s ease-out both;animation-delay:calc(var(--n)*35ms)}
.crate-content{min-height:121px}.crate-content p{font-size:15px;line-height:1.4;color:var(--af-bone);margin:7px 0 13px}
#crate-reveal button:not(.crate-later){font:700 15px "Alegreya Sans",sans-serif;padding:9px 16px;margin:4px;color:var(--af-ember-100);background:var(--af-stone-700);border-color:var(--af-gold-600)}
#crate-reveal button.crate-primary{color:var(--af-stone-850);background:var(--af-ember-300);border-color:var(--af-ember-100)}
#crate-reveal button:hover:not(:disabled),#crate-reveal button:focus-visible:not(:disabled){outline:2px solid var(--af-ember-100);outline-offset:2px;filter:brightness(1.13)}
#crate-reveal button:disabled{opacity:.45}
.crate-item{display:grid;gap:3px;margin:0 auto 11px;padding:12px 14px;max-width:350px;background:var(--af-stone-950);border:1px solid var(--item-color);box-shadow:inset 0 0 24px color-mix(in srgb, var(--af-iron-300) 6%, transparent);color:var(--af-bone);text-align:left}
.crate-item strong{font:800 19px/1.2 Cinzel,serif;color:var(--item-color)}
.crate-rank{font:700 11px "Alegreya Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--item-color)}
.crate-gold{color:var(--af-ember-300);font-weight:700}
.crate-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:5px}
.crate-content p.crate-error{color:var(--af-ember-300)}
@keyframes crate-badge{50%{box-shadow:0 8px 24px color-mix(in srgb, var(--af-void) 60%, transparent),0 0 16px color-mix(in srgb, var(--af-ember-300) 53%, transparent)}}
@keyframes crate-shake{to{transform:perspective(450px) rotateX(8deg) translateX(3px) rotate(1.5deg)}}
@keyframes crate-rays{to{opacity:.65;transform:scale(1.25)}}
@keyframes crate-spark{0%{opacity:1;transform:rotate(var(--a)) translateY(0)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-98px)}}
@media(max-width:600px){#crate-reveal .crate-shell{padding:17px 19px 20px}.crate-art{height:170px}.crate-coffer{transform:scale(.82)}#crate-reveal h2{font-size:22px}#crate-ready{right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){#crate-ready,#crate-reveal *{animation:none!important;transition:none!important}}