/* Crate opening, CS-case style (crate-reveal.js) */
body.cs-open{overflow:hidden}
.cs-ov{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:24px 0;
  background:radial-gradient(ellipse at 50% 42%,#1b1f24 0%,#0b0c0e 62%,#060607 100%);animation:cs-in .25s ease-out both}
.cs-ov.out{animation:cs-out .22s ease-in both}
@keyframes cs-in{from{opacity:0}}@keyframes cs-out{to{opacity:0}}
.cs-ov.gold{background:radial-gradient(ellipse at 50% 45%,#3a2a08 0%,#120d04 55%,#060607 100%)}
.cs-head{text-align:center}
.cs-kicker{font:700 13px/1 var(--ui,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--gold,#f2b632)}
.cs-pity{color:#ff8a80}
.cs-head h2{font:900 clamp(38px,6vw,68px)/.95 var(--display,sans-serif);text-transform:uppercase;letter-spacing:.01em;color:var(--bone,#f1ede3);margin-top:6px}

.cs-reel{position:relative;height:var(--rh,214px);overflow:hidden;background:linear-gradient(180deg,#0f1114,#14171b 50%,#0f1114);border-block:1px solid #22262b;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cs-strip{position:absolute;top:calc((var(--rh,214px) - var(--ch,178px)) / 2);left:0;display:flex;gap:8px;will-change:transform}
.cs-mark{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:var(--gold,#f2b632);box-shadow:0 0 12px rgba(242,182,50,.8);z-index:2}
.cs-mark::before,.cs-mark::after{content:"";position:absolute;left:50%;margin-left:-8px;border:8px solid transparent}
.cs-mark::before{top:0;border-top-color:var(--gold,#f2b632)}.cs-mark::after{bottom:0;border-bottom-color:var(--gold,#f2b632)}

.cs-card{flex:0 0 calc(var(--ch,178px) * .99);height:var(--ch,178px);display:flex;flex-direction:column;background:linear-gradient(180deg,#1c2025 0%,#161a1e 60%,color-mix(in srgb,var(--r) 22%,#15181c) 100%);
  border:1px solid #262b31;border-bottom:4px solid var(--r);border-radius:3px;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,filter .35s}
.cs-art{position:relative;height:calc(var(--ch,178px) * .54);display:grid;place-items:center;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--r) 38%,transparent),transparent 70%)}
.cs-art{overflow:hidden}.cs-art img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;display:block}.cs-slot{z-index:1}
.cs-glyph{font:900 64px/1 var(--display,sans-serif);color:color-mix(in srgb,var(--r) 70%,#fff);opacity:.9;text-shadow:0 4px 18px color-mix(in srgb,var(--r) 60%,transparent)}
.cs-slot{position:absolute;top:8px;left:9px;font:700 10px/1 var(--ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#8f98a3}
.cs-meta{padding:8px 10px 0;display:grid;gap:3px}
.cs-meta b{font:800 17px/1.05 var(--display,sans-serif);text-transform:uppercase;color:#eef0f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-meta small{font:700 11px/1.2 var(--ui,sans-serif);color:var(--r);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-stats{display:flex;gap:6px;flex-wrap:wrap;font:700 10px/1 var(--ui,sans-serif);color:#aeb6bf}

/* the stop */
.cs-reel.done .cs-card:not(.win){filter:brightness(.45) saturate(.6)}
.cs-card.win{transform:scale(1.08);box-shadow:0 0 0 2px var(--r),0 0 38px color-mix(in srgb,var(--r) 70%,transparent);z-index:3;position:relative}
.cs-reel.done.t-legendary{animation:cs-gold 1.2s ease-out}
@keyframes cs-gold{0%{box-shadow:inset 0 0 0 0 rgba(228,174,57,0)}20%{box-shadow:inset 0 0 120px 20px rgba(228,174,57,.55)}100%{box-shadow:inset 0 0 0 0 rgba(228,174,57,0)}}

.cs-foot{display:flex;justify-content:center;gap:10px;min-height:44px}
.cs-foot [hidden]{display:none!important}
/* the rest of the crate */
.cs-rest{display:grid;justify-items:center;gap:10px;opacity:0;transition:opacity .3s}
.cs-rest.in{opacity:1}
.cs-rest-h{font:700 11px/1 var(--ui,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:#8f98a3}
.cs-rest-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:0 16px;--ch:150px}
.cs-rest-row .cs-card{flex-basis:150px;opacity:0;transform:translateY(24px) scale(.9)}
.cs-rest-row .cs-card.in{opacity:1;transform:none;box-shadow:0 0 0 1px var(--r),0 0 22px color-mix(in srgb,var(--r) 45%,transparent)}
@media (max-width:640px){.cs-rest-row{--ch:124px}.cs-rest-row .cs-card{flex-basis:124px}}
@media (max-width:640px){.cs-glyph{font-size:46px}.cs-meta b{font-size:15px}}
@media (prefers-reduced-motion:reduce){.cs-ov,.cs-ov.out,.cs-reel.done.t-legendary{animation:none}.cs-card{transition:none}}