:root{--card-s:120px;--card-m:160px;--card-l:224px;--card-cut:polygon(14% 0, 86% 0, 100% 10%, 100% 90%, 86% 100%, 14% 100%, 0 90%, 0 10%)}@property --turn{syntax:"<angle>";inherits:false;initial-value:0deg}.card{--w:var(--card-m);width:var(--w);aspect-ratio:5/7;max-width:100%;filter:drop-shadow(0 calc(var(--w) * .035) 0 #000);--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--bevel:linear-gradient(180deg, #fff9, transparent 5%, transparent 95%, #0006), linear-gradient(90deg, #ffffff40, transparent 6%, transparent 94%, #00000040);--display:"Bungee", "Rubik Variable", system-ui, sans-serif;--text:"Rubik Variable", system-ui, sans-serif;font-family:var(--text);flex:none;display:block;position:relative;container-type:inline-size}.card.size-s{--w:var(--card-s)}.card.size-l{--w:var(--card-l)}.card .shape{clip-path:var(--card-cut);background:#000;position:absolute;inset:0}.card .frame{inset:calc(var(--w) * .018);clip-path:var(--card-cut);background:var(--grain), var(--bevel), var(--finish);background-blend-mode:soft-light, normal, normal;position:absolute}.card .frame:after{content:"";pointer-events:none;position:absolute;inset:0}.card .face{inset:calc(var(--w) * .05);clip-path:var(--card-cut);background:#000;position:absolute;overflow:hidden}.card .face:before{content:"";clip-path:var(--card-cut);box-shadow:inset 0 0 0 max(1px, calc(var(--w) * .01)) #000;z-index:3;pointer-events:none;position:absolute;inset:0}.card .art{position:absolute;inset:0}.card .art canvas{width:100%;height:116%;display:block;position:absolute;top:-16%;left:0}.card .shade-top{pointer-events:none;background:linear-gradient(#00000073,#0000);height:24%;position:absolute;top:0;left:0;right:0}.card .shade-foot{pointer-events:none;background:linear-gradient(#0000,#06070bc7 45%,#06070bf0);height:36%;position:absolute;bottom:0;left:0;right:0}.card .plate{align-content:end;justify-items:center;gap:calc(var(--w) * .012);height:22%;padding:0 16% calc(var(--w) * .06);text-align:center;z-index:2;display:grid;position:absolute;bottom:0;left:0;right:0}.card .plate:before{content:"";height:max(1px, calc(var(--w) * .012));background:var(--finish);border-radius:2px;position:absolute;top:0;left:12%;right:12%;box-shadow:0 1px #000}.card .name{max-width:100%;font:400 calc(var(--w) * .098)/1.2 var(--display);color:#fff;white-space:nowrap;letter-spacing:.01em;text-shadow:0 max(1px, calc(var(--w) * .012)) 0 #000;overflow:hidden}.card .kind{font:800 calc(var(--w) * .05)/1 var(--text);color:var(--accent-ink);text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}.card.numbered .plate:before{display:none}.card .num-line{left:12%;right:12%;top:calc(var(--w) * -.035);align-items:center;gap:calc(var(--w) * .025);display:flex;position:absolute}.card .num-line i{height:max(1px, calc(var(--w) * .012));background:var(--finish);border-radius:2px;flex:1;box-shadow:0 1px #000}.card.stars-4 .num-line i{background:linear-gradient(90deg,#ff9ccd,#ffd2b0,#a8f5d6,#8fd7ff,#d3c2ff)}.card .serial{font:700 calc(var(--w) * .062)/1 var(--text);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--accent-ink);white-space:nowrap;text-shadow:0 max(1px, calc(var(--w) * .008)) 0 #000}.card .serial .zeros{opacity:.45}.card .copies{z-index:2;padding:max(1px, calc(var(--w) * .006)) calc(var(--w) * .03);background:var(--white);color:#000;border:max(1px, calc(var(--w) * .012)) solid #000;border-radius:calc(var(--w) * .035);font:400 calc(var(--w) * .075)/1.15 var(--display);box-shadow:0 calc(var(--w) * .012) 0 #000;position:absolute;bottom:25%;right:9%}.held .card{filter:drop-shadow(0 calc(var(--w) * .035) 0 #000)}.held .card>*{filter:grayscale()brightness(.5)}.held .card:after{--s:calc(var(--w) * .035);--e:calc(var(--w) * .015);content:"";z-index:5;clip-path:var(--card-cut);pointer-events:none;background:linear-gradient(to bottom right, transparent calc(50% - var(--s) - var(--e)), #000 calc(50% - var(--s) - var(--e)), #000 calc(50% - var(--s)), #9aa0a8 calc(50% - var(--s)), #9aa0a8 calc(50% + var(--s)), #000 calc(50% + var(--s)), #000 calc(50% + var(--s) + var(--e)), transparent calc(50% + var(--s) + var(--e)));position:absolute;inset:0}.card .top{left:15%;right:15%;top:calc(var(--w) * .115);justify-content:space-between;align-items:center;gap:calc(var(--w) * .03);z-index:4;pointer-events:none;display:flex;position:absolute}.card .gems{filter:drop-shadow(0 max(1px, calc(var(--w) * .012)) 0 #000) drop-shadow(0 0 calc(var(--w) * .03) #0009);flex:none;align-items:center;display:inline-flex}.card .gem{width:calc(var(--w) * .075);height:calc(var(--w) * .075);background:linear-gradient(135deg, #fff, var(--gem) 40%, var(--gem-deep));box-shadow:0 0 0 max(1px, calc(var(--w) * .011)) #000;border-radius:1.5px;position:relative;transform:rotate(45deg)}.card .gem+.gem{margin-left:calc(var(--w) * -.012)}.card .paint{width:calc(var(--w) * .095);height:calc(var(--w) * .095);margin-left:auto;margin-right:calc(var(--w) * .015);background:linear-gradient(135deg, #fff9, transparent 45%), var(--paint);border:max(1px, calc(var(--w) * .013)) solid #000;box-shadow:0 0 0 max(1px, calc(var(--w) * .013)) #fff, 0 0 0 max(1.5px, calc(var(--w) * .023)) #000, 0 calc(var(--w) * .02) calc(var(--w) * .03) #0009;background-clip:padding-box;border-radius:2px;flex:none;transform:rotate(45deg)}@container (width<=99px){.card .kind,.card .serial{display:none}.card .num-line{gap:0}.card .plate{height:19%;padding:calc(var(--w) * .045) 12% 0;align-content:start}.card .name{font-size:calc(var(--w) * .115);line-height:1.3}}.card.stars-1{--finish:linear-gradient(160deg, #f4f1ea, #d9d4ca 55%, #c3bdb1);--gem:#f1ede4;--gem-deep:#b9b2a4;--accent-ink:#d9d4ca}.card.stars-2{--finish:linear-gradient(160deg, #5f80b8, #eef5ff 30%, #7c9fd6 52%, #dde9ff 72%, #4f6fa6);--gem:#dde9ff;--gem-deep:#5f80b8;--accent-ink:#a9c4f0}.card.stars-3{--finish:linear-gradient(160deg, #b8802e, #f6d488 45%, #a86f22 70%, #e2b867);--gem:#f6d488;--gem-deep:#a86f22;--accent-ink:#f0c977}.card.stars-4{--finish:linear-gradient(135deg, #ff9ccd, #ffd2b0 25%, #d3c2ff 50%, #8fd7ff 75%, #a8f5d6);--gem:#ffd2f0;--gem-deep:#8fd7ff;--accent-ink:#d3c2ff}.card.stars-2 .frame:after{mix-blend-mode:overlay;background:linear-gradient(115deg,#0000 38%,#ffffffd9 48%,#0000 58%) 0 0/250% 100% no-repeat;animation:5.5s ease-in-out infinite card-sweep}@keyframes card-sweep{0%,60%{background-position:150% 0}to{background-position:-50% 0}}.card.stars-3 .frame:after{background:conic-gradient(from var(--turn) at 50% 50%, transparent 0deg, transparent 300deg, #fff6d2f2 332deg, transparent 352deg);mix-blend-mode:screen;animation:4.2s linear infinite card-turn}.card.stars-4 .frame{background:var(--grain), var(--bevel), conic-gradient(from var(--turn) at 50% 50%, #ff9ccd, #ffd2b0, #fff3a6, #a8f5d6, #8fd7ff, #d3c2ff, #ff9ccd);background-blend-mode:soft-light, normal, normal;animation:6s linear infinite card-turn}.card.stars-4 .frame:after{background:conic-gradient(from var(--turn) at 50% 50%, transparent 0deg, #ffffffb3 20deg, transparent 50deg, transparent 180deg, #ffffff8c 200deg, transparent 230deg);mix-blend-mode:overlay;animation:3.2s linear infinite reverse card-turn}.card.stars-4 .plate:before{background:linear-gradient(90deg,#ff9ccd,#ffd2b0,#a8f5d6,#8fd7ff,#d3c2ff)}.card.stars-4 .gem{animation:6s linear infinite card-gem}@keyframes card-turn{to{--turn:360deg}}@keyframes card-gem{to{filter:hue-rotate(360deg)}}.card.bucks .art{background:radial-gradient(at 50% 40%,#6a3fa8,#2a1748 55%,#120a22)}.card.bucks .rays{aspect-ratio:1;background:repeating-conic-gradient(#ffd23f33 0deg 9deg,#0000 9deg 22.5deg);width:260%;animation:40s linear infinite card-rays;position:absolute;top:40%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(closest-side,#000 18%,#0000 70%);mask:radial-gradient(closest-side,#000 18%,#0000 70%)}.card.bucks .coin{width:64%;height:auto;filter:drop-shadow(0 calc(var(--w) * .025) 0 #000) drop-shadow(0 0 calc(var(--w) * .08) #ffd23f8c);position:absolute;top:40%;left:50%;translate:-50% -50%}.card.bucks .name{color:#ffd23f;font-size:calc(var(--w) * .13)}@container (width<=99px){.card.bucks .name{font-size:calc(var(--w) * .115)}}@keyframes card-rays{to{rotate:360deg}}.card.crate-card{--finish:linear-gradient(160deg, #3a4256, #1b2030);--accent-ink:#fff9}.card.crate-card .art{background:radial-gradient(at 50% 45%,#1c5a36 0%,#0a0c12 70%);place-items:center;padding-bottom:22%;display:grid}.card.crate-card .art svg{width:86%;height:auto;overflow:visible}.card.crate-waiting{cursor:pointer;filter:drop-shadow(2.5px 0 0 var(--warn)) drop-shadow(-2.5px 0 0 var(--warn)) drop-shadow(0 2.5px 0 var(--warn)) drop-shadow(0 -2.5px 0 var(--warn)) drop-shadow(0 5px 0 #000);animation:1.6s ease-in-out infinite crate-waiting}@keyframes crate-waiting{50%{transform:translateY(-3px)}}.card-back{--w:var(--card-m);width:var(--w);aspect-ratio:5/7;filter:drop-shadow(0 calc(var(--w) * .035) 0 #000);position:relative}.card-back .shape{clip-path:var(--card-cut);background:#000;position:absolute;inset:0}.card-back .frame{inset:calc(var(--w) * .018);clip-path:var(--card-cut);background:linear-gradient(160deg,#5b6378,#2a3040 40%,#4a5266 70%,#1d2230);position:absolute}.card-back .face{inset:calc(var(--w) * .05);clip-path:var(--card-cut);background:radial-gradient(at 50% 45%,#27305a,#141a36 60%,#0b0f22);position:absolute;overflow:hidden}.card-back .weave{background:repeating-linear-gradient(45deg,#ffffff08 0 2px,#0000 2px 9px),repeating-linear-gradient(-45deg,#ffffff08 0 2px,#0000 2px 9px);position:absolute;inset:0}.card-back svg{width:100%;height:100%;display:block;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.card .frame,.card .frame:after,.card .gem,.card.bucks .rays,.card.crate-waiting{animation:none}}.card.idle .frame,.card.idle .frame:after,.card.idle .gem,.card.idle.bucks .rays,.card.idle.crate-waiting{animation-play-state:paused}.cards-still .card .frame,.cards-still .card .frame:after,.cards-still .card .gem,.cards-still .card.bucks .rays,.cards-still .card.crate-waiting{animation:none}.card .art.banner-face{isolation:isolate;--fill:var(--art-c,var(--art));background:var(--fill)}.card .art.flair-face{background:radial-gradient(circle at 50% 40%,#2b2f3a,#0b0c10 70%);place-items:center;display:grid}.card .art.flair-face .flair{aspect-ratio:1;width:56%;height:auto;filter:drop-shadow(0 calc(var(--w) * .02) 0 #00000080);margin-top:-18%}