*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}a,button{cursor:revert}ol,ul,menu,summary{list-style:none}ol{counter-reset:revert}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert}:where(pre){all:revert;box-sizing:border-box}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert;box-sizing:border-box}::-webkit-details-marker{display:none}:root{--card-radius: 4.55% / 3.5%;--card-edge: hsla(225, 3%, 30%, .329);--card-back: hsl(0, 0%, 0%);--card-glow: hsl(339, 78%, 44%);--glow-blur: 5vw;--glow-spread: 1;--glow-duration: 10s}.card{-webkit-transform:translate3d(0px,0px,.01px);transform:translateZ(.01px);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;pointer-events:none;will-change:transform,visibility,z-index;position:relative}.card,.card *{outline:1px solid transparent}.card,.card__rotator{width:var(--card-width);aspect-ratio:var(--card-aspect);border-radius:var(--card-radius)}.card.active .card__translater,.card.active .card__rotator{touch-action:none}.card__translater,.card__rotator{display:grid;perspective:600px;will-change:transform,box-shadow;transform-origin:center;-webkit-transform-origin:center}.card__translater{width:auto;position:relative;-webkit-transform:translate3d(var(--translate-x),var(--translate-y),.1px) scale(var(--card-scale));transform:translate3d(var(--translate-x),var(--translate-y),.1px) scale(var(--card-scale))}.card__rotator{--_rotate-x: calc(var(--rotate-x) + var(--rotate-delta-x));--_rotate-y: calc(var(--rotate-y) + var(--rotate-delta-y));-webkit-transform:rotateY(calc(var(--_rotate-x) * 1deg)) rotateX(calc(var(--_rotate-y) * 1deg));-webkit-transform-style:preserve-3d;transform:rotateY(calc(var(--_rotate-x) * 1deg)) rotateX(calc(var(--_rotate-y) * 1deg));transform-style:preserve-3d;pointer-events:auto}button.card__rotator{border:none;background:transparent;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.card__rotator,.card.active .card__rotator:focus{transition:box-shadow .4s ease,opacity .33s ease-out;box-shadow:0 0 3px -1px transparent,0 0 2px 1px transparent,0 0 5px 0 transparent,0 10px 20px -5px #000,0 2px 15px -5px #000,0 0 20px 0 transparent}.card.active .card__rotator,.card__rotator:focus{box-shadow:0 0 3px -1px #fff,0 0 3px 1px var(--card-edge),0 0 12px 2px var(--card-glow),0 10px 20px -5px #000,0 0 40px -30px var(--card-glow),0 0 50px -20px var(--card-glow)}.card__rotator *{width:100%;display:grid;grid-area:1/1;aspect-ratio:var(--card-aspect);border-radius:var(--card-radius);image-rendering:optimizeQuality;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;pointer-events:none;overflow:hidden}.card__rotator img{height:auto;-webkit-transform:translate3d(0px,0px,.01px);transform:translateZ(.01px)}img.card__back{background-color:var(--card-back);-webkit-transform:rotateY(180deg) translateZ(1px);transform:rotateY(180deg) translateZ(1px);backface-visibility:visible}.card__front,.card__front *{backface-visibility:hidden}.card__front{opacity:1;transition:opacity .33s ease-out;-webkit-transform:translate3d(0px,0px,.01px);transform:translateZ(.01px)}.loading .card__front{opacity:0}.loading .card__back{-webkit-transform:rotateY(0deg);transform:rotateY(0)}.card__shine{display:grid;transform:translateZ(1px);overflow:hidden;z-index:3;background:transparent;background-size:cover;background-position:center;filter:brightness(.85) contrast(2.75) saturate(.65);mix-blend-mode:color-dodge;opacity:var(--card-opacity)}.card__shine:before,.card__shine:after{grid-area:1/1;transform:translateZ(1px);border-radius:var(--card-radius)}.card__shine:after{transform:translateZ(1.2px);background-blend-mode:difference}.card__glare{transform:translateZ(1.41px);overflow:hidden;background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,100%,.8) 10%,hsla(0,0%,100%,.65) 20%,hsla(0,0%,0%,.5) 90%);opacity:var(--card-opacity);mix-blend-mode:overlay}.card{--space: 5%;--angle: 133deg;--imgsize: cover;--red: #f80e35;--yellow: #eedf10;--green: #21e985;--blue: #0dbde9;--violet: #c929f1;--clip: inset(9.85% 8% 52.85% 8%);--clip-invert: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 8% 9.85%, 8% 47.15%, 0 50% );--clip-stage: polygon( 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 92% 47.15% );--clip-stage-invert: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 0 50% );--clip-borders: none;--card-opacity: 1;--grain: url();--sunpillar-1: hsl(2, 100%, 73%);--sunpillar-2: hsl(53, 100%, 69%);--sunpillar-3: hsl(93, 100%, 69%);--sunpillar-4: hsl(176, 100%, 76%);--sunpillar-5: hsl(228, 100%, 74%);--sunpillar-6: hsl(283, 100%, 73%);--sunpillar-clr-1: var(--sunpillar-1);--sunpillar-clr-2: var(--sunpillar-2);--sunpillar-clr-3: var(--sunpillar-3);--sunpillar-clr-4: var(--sunpillar-4);--sunpillar-clr-5: var(--sunpillar-5);--sunpillar-clr-6: var(--sunpillar-6)}.card__shine,.card__glare{will-change:transform,opacity,background-image,background-size,background-position,background-blend-mode,filter}.card[data-rarity=rare] .card__shine{clip-path:var(--clip-borders)}.card[data-rarity=rare] .card__shine:after{clip-path:var(--clip)}.card[data-rarity=rare] .card__shine{--barwidth: 1.2%;--space: 200px;--imgsize: cover;background-image:radial-gradient(farthest-corner ellipse at calc(((var(--pointer-x)) * .5) + 25%) calc(((var(--pointer-y)) * .5) + 25%),hsl(0,0%,95%) 20%,var(--card-glow) 130%),repeating-linear-gradient(45deg,hsl(0,0%,10%) 0%,hsl(0,0%,10%) 1%,hsl(0,0%,10%) var(--barwidth),hsl(0,0%,20%) calc(var(--barwidth) + .01%),hsl(0,0%,20%) calc(var(--barwidth) * 2),hsl(0,0%,35%) calc(var(--barwidth) * 2 + .01%),hsl(0,0%,35%) calc(var(--barwidth) * 3),hsl(0,0%,42.5%) calc(var(--barwidth) * 3 + .01%),hsl(0,0%,42.5%) calc(var(--barwidth) * 4),hsl(0,0%,50%) calc(var(--barwidth) * 4 + .01%),hsl(0,0%,50%) calc(var(--barwidth) * 5),hsl(0,0%,42.5%) calc(var(--barwidth) * 5 + .01%),hsl(0,0%,42.5%) calc(var(--barwidth) * 6),hsl(0,0%,35%) calc(var(--barwidth) * 6 + .01%),hsl(0,0%,35%) calc(var(--barwidth) * 7),hsl(0,0%,20%) calc(var(--barwidth) * 7 + .01%),hsl(0,0%,20%) calc(var(--barwidth) * 8),hsl(0,0%,10%) calc(var(--barwidth) * 8 + .01%),hsl(0,0%,10%) calc(var(--barwidth) * 9),hsl(0,0%,0%) calc(var(--barwidth) * 9 + .01%),hsl(0,0%,0%) calc(var(--barwidth) * 10)),repeating-linear-gradient(-45deg,hsl(0,0%,10%) 0%,hsl(0,0%,10%) 1%,hsl(0,0%,10%) var(--barwidth),hsl(0,0%,20%) calc(var(--barwidth) + .01%),hsl(0,0%,20%) calc(var(--barwidth) * 2),hsl(0,0%,35%) calc(var(--barwidth) * 2 + .01%),hsl(0,0%,35%) calc(var(--barwidth) * 3),hsl(0,0%,42.5%) calc(var(--barwidth) * 3 + .01%),hsl(0,0%,42.5%) calc(var(--barwidth) * 4),hsl(0,0%,50%) calc(var(--barwidth) * 4 + .01%),hsl(0,0%,50%) calc(var(--barwidth) * 5),hsl(0,0%,42.5%) calc(var(--barwidth) * 5 + .01%),hsl(0,0%,42.5%) calc(var(--barwidth) * 6),hsl(0,0%,35%) calc(var(--barwidth) * 6 + .01%),hsl(0,0%,35%) calc(var(--barwidth) * 7),hsl(0,0%,20%) calc(var(--barwidth) * 7 + .01%),hsl(0,0%,20%) calc(var(--barwidth) * 8),hsl(0,0%,10%) calc(var(--barwidth) * 8 + .01%),hsl(0,0%,10%) calc(var(--barwidth) * 9),hsl(0,0%,0%) calc(var(--barwidth) * 9 + .01%),hsl(0,0%,0%) calc(var(--barwidth) * 10));background-size:cover,210% 210%,210% 210%;background-position:center,calc(((var(--background-x) - 50%) * 1.5) + 50%) calc(((var(--background-y) - 50%) * 1.5) + 50%),calc(((var(--background-x) - 50%) * 1.5) + 50%) calc(((var(--background-y) - 50%) * 1.5) + 50%);background-blend-mode:exclusion,darken,color-dodge;filter:brightness(.5) contrast(2) saturate(1.75);mix-blend-mode:color-dodge}.card[data-rarity=rare] .card__shine:after{content:"";background-image:var(--foil),repeating-linear-gradient(55deg,#fdb8b4 calc(var(--space) * 1),#addaff calc(var(--space) * 2),#ffd7b3 calc(var(--space) * 3),#b8ffe7 calc(var(--space) * 4),#fdbff4 calc(var(--space) * 5),#b4f3fd calc(var(--space) * 6),#fdb8b4 calc(var(--space) * 7));background-size:var(--imgsize),400% 100%;background-position:center,calc(((var(--background-x) - 50%) * -2.5) + 50%) calc(((var(--background-y) - 50%) * -2.5) + 50%);filter:brightness(.6) contrast(3) saturate(2);mix-blend-mode:color-dodge;background-blend-mode:hard-light}.card[data-rarity=rare] .card__shine:before{content:"";z-index:2;grid-area:1/1;background-image:radial-gradient(farthest-corner ellipse at calc(((var(--pointer-x)) * .5) + 25%) calc(((var(--pointer-y)) * .5) + 25%),#949494cc 10%,#333333e6 20%,#33333380 50%);background-position:center;background-size:15% 15%,350% 350%;background-blend-mode:color-dodge;mix-blend-mode:overlay;filter:brightness(.66) contrast(2) saturate(.5)}.card[data-rarity=rare] .card__glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,100%,.33) 0%,hsl(0,0%,25%) 110%);filter:brightness(1) contrast(1.5);mix-blend-mode:hard-light}.card[data-rarity=silver] .card__shine{filter:brightness(.7) contrast(2) saturate(.5)}.card[data-rarity=silver] .card__shine,.card[data-rarity=silver] .card__shine:after{--space: 5%;--angle: 133deg;--imgsize: 400px;background-image:var(--grain),repeating-linear-gradient(0deg,var(--sunpillar-clr-1) calc(var(--space) * 1),var(--sunpillar-clr-2) calc(var(--space) * 2),var(--sunpillar-clr-3) calc(var(--space) * 3),var(--sunpillar-clr-4) calc(var(--space) * 4),var(--sunpillar-clr-5) calc(var(--space) * 5),var(--sunpillar-clr-6) calc(var(--space) * 6),var(--sunpillar-clr-1) calc(var(--space) * 7)),repeating-linear-gradient(var(--angle),#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,29%,66%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12%),radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,0%,.1) 12%,hsla(0,0%,0%,.15) 20%,hsla(0,0%,0%,.25) 120%);background-blend-mode:screen,hue,hard-light;background-size:var(--imgsize) 100%,200% 700%,300% 100%,200% 100%;background-position:center,0% var(--background-y),var(--background-x) var(--background-y),var(--background-x) var(--background-y);filter:brightness(.8) contrast(2.95) saturate(.65)}.card[data-rarity=silver] .card__shine:after{content:"";background-position:center,0% var(--background-y),calc(var(--background-x) * 0) calc(var(--background-y) * 0),var(--background-x) var(--background-y);background-size:var(--imgsize) 100%,200% 400%,195% 100%,200% 100%;filter:brightness(1) contrast(2.5) saturate(1.75);mix-blend-mode:soft-light}.card[data-rarity=silver] .card__glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsl(0,0%,100%) 0%,hsla(210,3%,54%,.33) 45%,hsla(0,0%,20%,.9) 130%);opacity:calc(var(--card-opacity) * .5);mix-blend-mode:hard-light;filter:brightness(.9) contrast(1.75)}.card:before{content:"";opacity:0;position:absolute;top:5%;left:0;right:0;z-index:-1;height:100%;width:100%;margin:0 auto;transform:scale(var(--glow-spread));filter:blur(var(--glow-blur));background:linear-gradient(270deg,var(--glow-primary),var(--glow-secondary));background-size:200% 200%;animation:animateGlow var(--glow-duration) ease infinite;transition:opacity .1s ease-out}.card[data-glow-active=true]:before{opacity:1;transition:opacity .5s ease-out}@keyframes animateGlow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}#root,body{height:100vh;overflow:hidden}body{background-color:#2b2b2b}#root{display:grid;place-items:center}img{display:block}.redeemed-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-around;align-items:center;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:2;mix-blend-mode:multiply}.card__rotator:hover .redeemed-overlay{opacity:1}.redeemed-overlay span{color:#fff;font-size:4.5em;font-weight:700;text-shadow:2px 2px 6px rgba(0,0,0,.07);transform:rotate(-15deg)}
