/* Chest opening (RD-117, public/chest-open.mjs). The tone follows the chest: bronze, silver or gold (gold gets more). */
.chest-open{position:fixed;inset:0;z-index:120;display:grid;place-items:safe center;overflow:hidden auto;padding:24px 16px;
 --tone:#e0a35f;--tone-2:#ffd9a3;--shake:5px;
 background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--tone) 22%,#0b1113) 0,#06090b 62%);animation:co-in .35s ease both;cursor:pointer}
.chest-open.kind-silver{--tone:#b9c8dc;--tone-2:#eef4ff}
.chest-open.kind-gold{--tone:#ffc94d;--tone-2:#fff1c2;--shake:8px}
.chest-open.closing{animation:co-out .24s ease forwards}
.co-stage{position:relative;display:grid;justify-items:center;gap:12px;width:min(600px,100%);text-align:center}
.co-kicker{font:700 13px var(--display);letter-spacing:6px;color:var(--tone);text-shadow:0 0 16px var(--tone)}
/* The chest: drops in, then shakes harder and glows brighter until it is opened. */
.co-chest{position:relative;display:grid;place-items:center;width:min(230px,60vw);aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer}
.co-art{display:grid;place-items:center;width:100%;height:100%;filter:drop-shadow(0 14px 16px #000c)}
.co-art img,.co-art .ico{width:100%;height:100%;object-fit:contain}
.arriving .co-chest{animation:co-drop .65s cubic-bezier(.3,1.5,.5,1) both}
.ready .co-chest{animation:co-shake 2.6s ease-in infinite}
.co-glow{position:absolute;left:50%;top:44%;width:120vmin;height:120vmin;margin:-60vmin 0 0 -60vmin;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,color-mix(in srgb,var(--tone) 45%,transparent) 0,transparent 55%);opacity:.35;transition:opacity .4s}
.ready .co-glow{animation:co-throb 2.6s ease-in infinite}
.co-seam{position:absolute;left:18%;right:18%;top:44%;height:8px;border-radius:50%;background:var(--tone-2);filter:blur(6px);opacity:0}
.ready .co-seam{animation:co-leak 2.6s ease-in infinite}
.co-hint{margin:0;color:var(--parchment-dim);letter-spacing:2px;text-transform:uppercase;font-size:13px;animation:co-blink 1.4s ease-in-out infinite}
.burst .co-hint,.revealing .co-hint,.done .co-hint{visibility:hidden}
/* Burst: flash, rays, sparks and gears. */
.co-flash{position:absolute;inset:0;background:var(--tone-2);opacity:0;pointer-events:none}
.burst .co-flash{animation:co-flash .6s ease-out both}
.co-rays{position:absolute;left:50%;top:44%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;opacity:0;pointer-events:none;
 background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--tone) 30%,transparent) 0 6deg,transparent 6deg 18deg);
 mask:radial-gradient(circle,#000 0,transparent 45%);-webkit-mask:radial-gradient(circle,#000 0,transparent 45%)}
.burst .co-rays,.revealing .co-rays,.done .co-rays{opacity:.85;animation:co-spin 18s linear infinite,co-in .5s ease both}
.burst .co-chest{animation:co-pop .7s cubic-bezier(.2,1.6,.4,1) both}
.revealing .co-chest,.done .co-chest{width:min(150px,40vw);transition:width .5s ease}
.burst .co-glow,.revealing .co-glow,.done .co-glow{opacity:.9}
.co-burst{position:absolute;left:50%;top:44%;width:0;height:0;pointer-events:none}
.co-burst i,.co-burst b{position:absolute;left:0;top:0;opacity:0}
.co-burst i{width:9px;height:9px;margin:-4px;background:var(--tone-2);box-shadow:0 0 10px var(--tone);transform:rotate(45deg)}
.co-burst b{width:22px;height:22px;margin:-11px;border-radius:50%;background:radial-gradient(circle,#2a1d0b 0 28%,var(--tone) 30% 62%,transparent 64%),
 conic-gradient(var(--tone) 0 12%,transparent 12% 25%,var(--tone) 25% 37%,transparent 37% 50%,var(--tone) 50% 62%,transparent 62% 75%,var(--tone) 75% 87%,transparent 87%)}
.burst .co-burst i{animation:co-fly var(--t) cubic-bezier(.1,.7,.3,1) both}
.burst .co-burst b{animation:co-fly .9s cubic-bezier(.1,.7,.3,1) both}
.kind-bronze .co-burst i:nth-child(2n){display:none}
/* Rewards: one at a time, rarest last; epic rewards get their own glow. */
.co-rewards{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:52px}
.co-rewards li{opacity:0;transform:translateY(-60px) scale(.4)}
.co-rewards li.shown{animation:co-reward .5s cubic-bezier(.2,1.6,.4,1) both}
.co-rewards li.rarity-epic .cb-chip{border-color:var(--tone);box-shadow:0 0 0 1px var(--tone),0 0 22px color-mix(in srgb,var(--tone) 70%,transparent)}
.co-rewards li.rarity-epic.shown{animation:co-reward-epic .9s cubic-bezier(.2,1.6,.4,1) both}
.co-title,.co-continue{visibility:hidden}
.co-title{margin:4px 0 0;font:700 clamp(28px,7vw,40px)/1.05 var(--display);color:var(--parchment);text-shadow:0 3px 0 #05090b,0 0 24px var(--tone)}
.done .co-title{visibility:visible;animation:co-title .45s cubic-bezier(.2,1.5,.4,1) both}
.co-continue{min-width:210px;min-height:46px}
.done .co-continue{visibility:visible;animation:co-in .35s .15s both}
@keyframes co-in{from{opacity:0}}
@keyframes co-out{to{opacity:0;transform:scale(1.03)}}
@keyframes co-drop{from{opacity:0;transform:translateY(-70vh) scale(.6)}}
@keyframes co-shake{0%,8%{transform:none}12%{transform:rotate(-2deg)}16%{transform:rotate(2deg)}20%{transform:none}
 52%{transform:none}55%{transform:translateX(calc(var(--shake)*-.6)) rotate(-3deg)}58%{transform:translateX(calc(var(--shake)*.6)) rotate(3deg)}61%{transform:rotate(-2deg)}64%{transform:none}
 80%{transform:scale(1.02)}83%{transform:translateX(calc(var(--shake)*-1)) rotate(-5deg) scale(1.04)}86%{transform:translateX(var(--shake)) rotate(5deg) scale(1.04)}89%{transform:translateX(calc(var(--shake)*-1)) rotate(-4deg) scale(1.05)}92%{transform:translateX(var(--shake)) rotate(4deg) scale(1.05)}100%{transform:none}}
@keyframes co-throb{0%,50%{opacity:.3}85%{opacity:.75}100%{opacity:.3}}
@keyframes co-leak{0%,50%{opacity:0}80%,92%{opacity:.95}100%{opacity:0}}
@keyframes co-blink{50%{opacity:.4}}
@keyframes co-flash{0%{opacity:.9}100%{opacity:0}}
@keyframes co-spin{to{transform:rotate(360deg)}}
@keyframes co-pop{0%{transform:scale(1)}30%{transform:scale(1.28) rotate(-4deg)}60%{transform:scale(.94)}100%{transform:none}}
@keyframes co-fly{0%{opacity:1;transform:rotate(var(--a)) translateX(0) rotate(45deg)}80%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) rotate(200deg)}}
@keyframes co-reward{from{opacity:0;transform:translateY(-60px) scale(.4)}to{opacity:1;transform:none}}
@keyframes co-reward-epic{0%{opacity:0;transform:translateY(-60px) scale(.3)}60%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:none}}
@keyframes co-title{from{opacity:0;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){.chest-open,.chest-open *{animation:none!important;transition:none!important}.co-rewards li{opacity:1;transform:none}}
/* Unit XP rewards (RD-124): the Deck tab's unit card at the same size, its XP bar filling once it lands. */
.co-unit-card{width:136px;cursor:default}
.co-unit-card .profile-unit{cursor:default}.co-unit-card .profile-unit canvas{height:112px}
.co-unit-card .unit-upgrade{cursor:default}.co-unit-card .uu-label b{color:var(--parchment)}
.co-rewards li.shown .co-unit-card .uu-bar i{animation:co-fill .9s .35s ease-out forwards}
@keyframes co-fill{to{width:var(--to)}}
@media (prefers-reduced-motion:reduce){.co-unit-card .uu-bar i{width:var(--to)!important}}
/* Gears and tokens take their own row so the unit cards sit side by side. */
.co-rewards li:not(:has(.co-unit-card)){flex-basis:100%;display:flex;justify-content:center}
/* The season pass reveal (RD-170): a royal violet-and-gold theme, the pass crest instead of a chest, and confetti. */
.chest-open.kind-pass{--tone:#c9a2ff;--tone-2:#fff1c2;--shake:9px}
.co-pass-crest{display:grid;place-items:center;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff6d8,#e6b450 45%,#7a4ab8 100%);box-shadow:0 0 0 6px #2a1b44,0 0 0 9px #e6b450,0 0 40px #c9a2ffaa;font:700 30px var(--display);color:#2a1b44}
.co-pass-crest .ico{width:56px;height:56px}
.co-pass-crest small{display:block;font-size:12px;letter-spacing:2px}
.chest-open.kind-pass .co-glow::before,.chest-open.kind-pass .co-glow::after{content:'';position:absolute;inset:-10% 0 auto;height:120%;pointer-events:none;background-image:radial-gradient(circle,#ffd36a 0 3px,transparent 4px),radial-gradient(circle,#c9a2ff 0 3px,transparent 4px),radial-gradient(circle,#7fd7c4 0 2px,transparent 3px),radial-gradient(circle,#ff8a8a 0 2px,transparent 3px);background-size:90px 110px,130px 90px,70px 120px,110px 140px;background-position:10px 0,50px 30px,30px 60px,80px 10px;animation:pass-confetti 6s linear infinite;opacity:0}
.chest-open.kind-pass:not(.arriving):not(.ready) .co-glow::before{opacity:.9}.chest-open.kind-pass:not(.arriving):not(.ready) .co-glow::after{opacity:.6;animation-duration:9s;background-position:40px 0,0 50px,60px 20px,20px 70px}
@keyframes pass-confetti{from{transform:translateY(-30%)}to{transform:translateY(30%)}}
@media(prefers-reduced-motion:reduce){.chest-open.kind-pass .co-glow::before,.chest-open.kind-pass .co-glow::after{animation:none}}
.co-pass-item{display:flex;align-items:center;gap:10px;text-align:left}.co-pass-item>.ico,.co-pass-item>.chest-icon{width:40px;height:40px;flex:none}.co-pass-item b{font:700 18px var(--display)}.co-pass-item small{display:block;opacity:.8}
.co-pass-item.claimed{flex-direction:column;align-items:center;text-align:center;gap:4px}
/* The pass reveal: its own items on full rows, the claimed rewards as a grid of small tiles. */
.chest-open.kind-pass .co-rewards{max-width:min(560px,92vw);margin-inline:auto}
.chest-open.kind-pass .co-rewards li:has(.co-pass-item:not(.claimed)){flex:0 0 100%;display:flex;justify-content:center}
.chest-open.kind-pass .co-rewards li:has(.claimed){flex:0 0 104px}
.co-pass-item.claimed{padding:8px 6px;border-radius:12px;background:#ffffff10;border:1px solid #ffffff22;font-size:12px}.co-pass-item.claimed small{font-size:10px}