*{box-sizing:border-box}body{margin:0;background:#0b1411;color:#e5eddf;font:15px system-ui,sans-serif;min-height:100vh;background-image:radial-gradient(ellipse at 50% 40%,#254d364d,transparent 65%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:inherit;text-decoration:none}header{max-width:1250px;margin:auto;padding:25px 30px;border-bottom:1px solid #ffffff17;display:flex;justify-content:space-between;align-items:center}.brand{font-size:22px;font-weight:800;letter-spacing:-1px}.brand span{color:#c8e7ab}nav{display:flex;gap:24px;font-size:12px;color:#a5b5a5}nav [aria-current]{color:#e5eddf}main{max-width:1250px;margin:auto;padding:38px 25px 50px;text-align:center}.eyebrow{font:10px monospace;letter-spacing:3px;color:#badb9e;text-transform:uppercase}h1{font:normal clamp(35px,5vw,55px)/1.1 Georgia,serif;letter-spacing:-1.7px;margin:17px 0}#subtitle{color:#99ac9b;line-height:1.7;font-size:14px;min-height:24px}.box-stage{height:350px;display:grid;place-items:center;perspective:1000px;transition:height .6s,opacity .4s}.box{position:relative;width:min(400px,85vw);height:245px;transform:rotateX(12deg) rotateZ(-5deg);filter:drop-shadow(0 35px 25px #0009);transition:transform .7s}.box-base{position:absolute;inset:10px 0 -12px;border-radius:10px;background:#193728;border:1px solid #5a7651;box-shadow:inset 0 -12px #10291e}.lid{position:absolute;inset:0;border-radius:9px;background:linear-gradient(125deg,#346047,#1d3f2c 70%);border:1px solid #9bac7266;box-shadow:inset 0 0 0 7px #244430,inset 0 0 0 8px #9aab6b44;transform-origin:top;transition:transform .8s,opacity .8s;padding:30px;text-align:left;overflow:hidden}.lid:after{content:'✦';position:absolute;right:24px;top:60px;font-size:120px;color:#c1d79d14}.lid small{font:9px monospace;letter-spacing:2px;color:#b8c9a0}.lid strong{display:block;font:normal 43px/.96 Georgia,serif;color:#e7e7c4;margin:17px 0 15px;letter-spacing:-2px}.lid p{font:10px monospace;color:#b1c29f}.lid .edition{position:absolute;right:26px;bottom:27px;font:9px monospace;border:1px solid #a6b78b66;padding:8px}.seal{position:absolute;z-index:3;left:-8px;right:-8px;bottom:37px;height:32px;background:#d3dfb0;color:#25412b;border:0;box-shadow:0 4px 6px #0004;display:flex;align-items:center;justify-content:center;gap:20px;font:10px monospace;letter-spacing:2px;transition:transform .4s,opacity .3s}.seal:before,.seal:after{content:'';width:25px;border-top:1px dashed #415a35}.box.open .seal{transform:translateX(75px) rotate(-8deg);opacity:0}.box.open .lid{transform:rotateX(110deg);opacity:0}.box.open{transform:rotateX(12deg) rotateZ(0)}.box-stage.finished{height:0;opacity:0;overflow:hidden}.primary,.secondary{border-radius:8px;padding:13px 22px;font-size:13px;border:1px solid #a1b78c55}.primary{background:#d3e8b7;color:#213521}.secondary{background:#14261c;color:#cbd8be}.controls{display:flex;justify-content:center;gap:12px;margin:25px 0;flex-wrap:wrap}.tray{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:38px 0 20px;padding:22px;border:1px solid #78985c22;background:#101e17;border-radius:20px;box-shadow:inset 0 3px 15px #0004}.slot{min-width:0}.flip{display:block;background:none;border:0;padding:0;width:100%;aspect-ratio:330/410;perspective:1000px;text-align:left;color:inherit;position:relative}.rotator{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.7,.2,1)}.revealed .rotator{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.front{transform:rotateY(180deg)}.slot-note{font:10px monospace;color:#90aa81;min-height:25px;margin:16px 0 0;line-height:1.6}.revealed.holo{filter:drop-shadow(0 0 10px #cce59033)}.error{color:#f3bfa8;font-size:13px;line-height:1.6}.hint,footer{font-size:11px;line-height:1.8;color:#7c947d}footer{padding:20px;text-align:center;font-size:12.5px}footer a{text-decoration:underline}button:focus-visible,a:focus-visible{outline:2px solid #e8f4b9;outline-offset:5px}[hidden]{display:none!important}
@media(max-width:900px){.tray{grid-template-columns:repeat(3,minmax(0,1fr));max-width:750px;margin:30px auto;padding:16px;gap:20px}}@media(max-width:560px){header{padding:20px}nav{gap:14px;font-size:11px}main{padding:25px 15px}.tray{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:18px 12px}.slot:last-child{grid-column:1 / -1;width:calc(50% - 6px);justify-self:center}.box-stage{height:310px}.box{height:230px}.lid strong{font-size:37px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Opening choreography: anticipation, seal, lid, then five staggered arrivals. */
.box-stage{position:relative;isolation:isolate}.box-stage:before{content:'';position:absolute;z-index:-1;width:340px;height:240px;border-radius:50%;background:#b3ef7c;filter:blur(65px);opacity:0;transition:opacity .7s,transform .9s}
.box-stage.charging:before{opacity:.18;transform:scale(1.35)}
.box{transform-style:preserve-3d}.box:not(.charging):not(.open){animation:idle-box 5s ease-in-out infinite}.box.charging{animation:anticipation .55s ease-in-out both}
.box .seal{transition:transform .55s cubic-bezier(.3,.05,.8,.4),opacity .4s;transform-origin:95% 50%}.box.unsealed .seal{transform:translateX(145px) translateY(-45px) rotate(-22deg);opacity:0}.box.open .lid{transform:translateY(-25px) rotateX(125deg);opacity:.15;transition:transform .95s cubic-bezier(.18,.75,.24,1),opacity .95s}.box.open{transform:rotateX(8deg) rotateZ(0) translateY(10px)}
.box-base:after{content:'';position:absolute;inset:15px;border-radius:6px;background:radial-gradient(ellipse,#d8fbb8cc,#6ca35a66 40%,#0d251b 75%);opacity:0;transition:opacity .5s}.open .box-base:after{opacity:1}.box-dust{position:absolute;inset:0;pointer-events:none}.box-dust i{position:absolute;top:45%;left:50%;width:4px;height:4px;border-radius:50%;background:#e6f4bf;opacity:0;box-shadow:0 0 9px #d0ef9a}.open .box-dust i{animation:box-dust 1s var(--delay) ease-out both}
.tray.arriving{animation:tray-in .45s ease-out both}.tray.arriving .slot{animation:deal-in .72s cubic-bezier(.16,.8,.2,1) both;animation-delay:calc(var(--index)*130ms)}.slot{position:relative;isolation:isolate}.flip{transition:transform .25s,filter .25s}.flip:not(.revealed):hover{transform:translateY(-9px) rotate(-2deg);filter:drop-shadow(0 10px 10px #a4d27920)}.flip.revealed .rotator{transition-duration:.85s;transition-timing-function:cubic-bezier(.18,.7,.2,1)}.slot.just-revealed{animation:reveal-lift .8s ease both}.slot.just-revealed .slot-note{animation:caption-in .4s .4s both}.slot.holo-reveal:before{content:'';z-index:-1;position:absolute;inset:8% -12%;border-radius:50%;background:radial-gradient(ellipse,#c9ef9166,#ad98ed22 45%,transparent 70%);animation:holo-aura 1.5s ease-out both}.sparkles{position:absolute;inset:0;pointer-events:none;z-index:4}.sparkles i{position:absolute;left:50%;top:45%;width:4px;height:4px;background:#e1f7b6;border-radius:1px;box-shadow:0 0 8px #f1ffd1;animation:spark 1.2s var(--delay) ease-out both}.sparkles i:nth-child(3n){background:#cfb8ff}.primary{transition:transform .2s,box-shadow .2s}.primary:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 5px 20px #b7d99722}#done:not([hidden]){animation:caption-in .5s ease both}
@keyframes idle-box{0%,100%{transform:rotateX(12deg) rotateZ(-5deg) translateY(0)}50%{transform:rotateX(10deg) rotateZ(-3deg) translateY(-8px)}}
@keyframes anticipation{0%{transform:rotateX(12deg) rotateZ(-5deg)}40%{transform:rotateX(15deg) rotateZ(-7deg) scale(.97)}75%{transform:rotateX(8deg) rotateZ(2deg) scale(1.035)}100%{transform:rotateX(10deg) rotateZ(0)}}
@keyframes box-dust{0%{opacity:0;transform:translate(0,0) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
@keyframes tray-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes deal-in{0%{opacity:0;transform:translate(var(--from),-100px) rotate(var(--angle)) scale(.6)}65%{opacity:1;transform:translate(0,7px) rotate(1deg) scale(1.025)}100%{opacity:1;transform:none}}
@keyframes reveal-lift{0%,100%{transform:translateY(0)}40%{transform:translateY(-13px) scale(1.035)}}
@keyframes caption-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes holo-aura{0%{opacity:0;transform:scale(.6)}45%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.5)}}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(130deg) scale(.2)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.box-stage:before,.sparkles,.box-dust{display:none!important}.flip:not(.revealed):hover{transform:none}}
/* After a legendary card, for a guest (booster.js). */
.guest-reminder{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;max-width:640px;margin:22px auto 0;padding:16px 20px;border:1px solid #e3c46f88;border-radius:12px;background:#3a321522;color:#f0e2b6;text-align:left}.guest-reminder p{margin:0;font-size:13px;line-height:1.6}.guest-reminder strong{color:#f5d77e}
