@property --shine-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --ratio-x{syntax:"<number>";inherits:true;initial-value:.5}@property --ratio-y{syntax:"<number>";inherits:true;initial-value:.5}@property --glow-x{syntax:"<number>";inherits:true;initial-value:.5}@property --glow-y{syntax:"<number>";inherits:true;initial-value:.5}.card-scene{perspective:1200px;cursor:pointer;--sp1:#ff7a75;--sp2:#ffed61;--sp3:#a8ff61;--sp4:#85fff7;--sp5:#7a95ff;--sp6:#d875ff;--glitter:url(https://cdn.jsdelivr.net/gh/simeydotme/pokemon-cards-css@main/public/img/glitter.png);--grain:url(https://cdn.jsdelivr.net/gh/simeydotme/pokemon-cards-css@main/public/img/grain.webp);transition:--ratio-x .35s ease-out,--ratio-y .35s ease-out,--glow-x .5s ease-out,--glow-y .5s ease-out;display:inline-block}.card-scene[data-revealed]{cursor:default}.card-scene[data-size=sm]{width:100%}.card-scene[data-size=md]{width:240px}.card-scene[data-size=lg]{width:220px}@media (width>=640px){.card-scene[data-size=lg]{width:320px}}.card-tilt{transform-style:preserve-3d}.card-flipper{aspect-ratio:350/600;transform-style:preserve-3d;border-radius:8px;width:100%;transition:transform .8s cubic-bezier(.34,1.56,.64,1);position:relative}.card-scene[data-revealed] .card-flipper{transform:rotateY(180deg)}.card-face{backface-visibility:hidden;border-radius:8px;position:absolute;inset:0}.card-back{background:radial-gradient(ellipse at calc(var(--glow-x,.5) * 100%) calc(var(--glow-y,.5) * 100%), color-mix(in srgb, var(--color-card-back-accent) 22%, transparent) 0%, transparent 65%), var(--color-bg-surface);border:1px solid color-mix(in srgb, var(--color-card-back-accent) 35%, transparent);justify-content:center;align-items:center;display:flex}.card-back:before{content:"";pointer-events:none;background:radial-gradient(circle at calc(var(--glow-x,.5) * 100%) calc(var(--glow-y,.5) * 100%), #ffffff12 0%, transparent 55%);border-radius:8px;position:absolute;inset:0}.card-back-art{border:1px solid color-mix(in srgb, var(--color-card-back-accent) 25%, transparent);opacity:.6;background:repeating-linear-gradient(45deg, transparent 0px, transparent 10px, color-mix(in srgb, var(--color-card-back-accent) 10%, transparent) 10px, color-mix(in srgb, var(--color-card-back-accent) 10%, transparent) 11px), repeating-linear-gradient(-45deg, transparent 0px, transparent 10px, color-mix(in srgb, var(--color-card-back-accent) 10%, transparent) 10px, color-mix(in srgb, var(--color-card-back-accent) 10%, transparent) 11px);position:absolute;inset:10px}.card-back-sigil{color:color-mix(in srgb, var(--color-card-back-accent) 70%, transparent);-webkit-user-select:none;user-select:none;font-size:2.5rem}.card-scene[data-size=sm] .card-back-sigil{font-size:1.5rem}.card-scene[data-size=lg] .card-back-sigil{font-size:3rem}.card-front{overflow:hidden;transform:rotateY(180deg)}.card-front img{object-fit:cover;width:100%;height:100%;display:block}.card-scene[data-reversed] .card-front img{transform:rotate(180deg)}.card-shine,.card-shine:before,.card-shine:after,.card-glare,.card-glare:after{pointer-events:none;border-radius:8px;position:absolute;inset:0;overflow:hidden}.card-shine{z-index:2;mix-blend-mode:color-dodge;opacity:0;will-change:transform, opacity, background-image, background-size, background-position, background-blend-mode, filter;transition:opacity .3s}.card-shine:before,.card-shine:after{content:""}.card-glare{z-index:3;mix-blend-mode:overlay;opacity:0;background-image:radial-gradient(farthest-corner circle at calc(var(--glow-x,.5) * 100%) calc(var(--glow-y,.5) * 100%), #fffc 10%, #ffffffa6 20%, #00000080 90%);will-change:transform, opacity, background-image;transition:opacity .3s}.card-scene[data-rarity="1"] .card-shine,.card-scene[data-rarity="1"] .card-glare{display:none}.card-scene[data-rarity="2"] .card-shine{background-image:repeating-linear-gradient(110deg, var(--sp1) 1%, var(--sp2) 3%, var(--sp3) 5%, var(--sp4) 7%, var(--sp5) 9%, var(--sp6) 11%, var(--sp1) 13%), repeating-linear-gradient(90deg, #8080800d 0px, #8080800d 1px, transparent 1px, transparent 3px);background-blend-mode:overlay;background-size:200% 700%,cover;background-position:calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 300%), center;filter:brightness(.85)contrast(2.75)saturate(.45)}.card-scene[data-rarity="2"][data-revealed]:hover .card-shine{opacity:calc(.04 + var(--pointer-from-center,0) * .15)}.card-scene[data-rarity="2"][data-revealed]:hover .card-glare{opacity:.1}@keyframes holo-rotate{to{--shine-angle:360deg}}.card-scene[data-rarity="3"] .card-shine{background-image:var(--glitter), conic-gradient(from var(--shine-angle,0deg), var(--sp1), var(--sp2), var(--sp3), var(--sp4), var(--sp5), var(--sp6), var(--sp1)), repeating-linear-gradient(-30deg, var(--sp1) 0%, var(--sp2) 3.5%, var(--sp3) 7%, var(--sp4) 10.5%, var(--sp5) 14%, var(--sp6) 17.5%, var(--sp1) 21%);background-blend-mode:soft-light, overlay;background-size:25%,200% 200%,350% 350%;background-position:calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), calc(var(--ratio-x,.5) * 120% - 10%) calc(var(--ratio-y,.5) * 120% - 10%);filter:brightness(calc(.55 + var(--pointer-from-center,0) * .25)) contrast(2.2) saturate(.75);animation:6s linear infinite holo-rotate}.card-scene[data-rarity="3"][data-revealed] .card-shine{opacity:.15}.card-scene[data-rarity="3"][data-revealed]:hover .card-shine{opacity:calc(.25 + var(--pointer-from-center,0) * .55)}.card-scene[data-rarity="3"][data-revealed]:hover .card-glare{opacity:.4}.card-scene[data-rarity="3"] .card-shine:before{background-image:repeating-linear-gradient(133deg, var(--sp4) 0%, var(--sp5) 2%, var(--sp6) 4%, var(--sp1) 6%, var(--sp2) 8%, var(--sp3) 10%, var(--sp4) 12%);background-size:300% 300%;background-position:calc(100% - var(--ratio-x,.5) * 100%) calc(100% - var(--ratio-y,.5) * 100%);mix-blend-mode:difference;opacity:.35}.card-scene[data-rarity="4"] .card-shine{background-image:var(--glitter), repeating-linear-gradient(0deg, var(--sp1) 0%, var(--sp2) 2%, var(--sp3) 4%, var(--sp4) 6%, var(--sp5) 8%, var(--sp6) 10%, var(--sp1) 12%), repeating-linear-gradient(133deg, var(--sp4) 0%, var(--sp5) 2%, var(--sp6) 4%, var(--sp1) 6%, var(--sp2) 8%, var(--sp3) 10%, var(--sp4) 12%), radial-gradient(farthest-corner ellipse at calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), #0000001a 0%, #00000080 90%);background-blend-mode:soft-light, hue, hard-light, overlay;background-size:25%,200% 700%,300% 300%,cover;background-position:calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 400%), calc(100% - var(--ratio-x,.5) * 100%) calc(100% - var(--ratio-y,.5) * 300%), center;filter:brightness(calc(.4 + var(--pointer-from-center,0) * .4)) contrast(1.4) saturate(2.25)}.card-scene[data-rarity="4"][data-revealed] .card-shine{opacity:.1}.card-scene[data-rarity="4"][data-revealed]:hover .card-shine{opacity:calc(.25 + var(--pointer-from-center,0) * .5)}.card-scene[data-rarity="4"][data-revealed]:hover .card-glare{opacity:.55}.card-scene[data-rarity="4"] .card-shine:before{mix-blend-mode:overlay;opacity:.6;background-image:repeating-linear-gradient(45deg,#ffffff12 0 1px,#0000 1px 5px),repeating-linear-gradient(-45deg,#ffffff12 0 1px,#0000 1px 5px)}@keyframes cosmos-drift{to{--shine-angle:360deg}}.card-scene[data-rarity="5"] .card-shine{background-image:var(--glitter), conic-gradient(from var(--shine-angle,0deg) at 50% 50%, #2f0d73 0%, #256af4 18%, #6ef7f7 28%, #c155f6 42%, #e830ab 57%, #3e09aa 72%, #477eeb 88%, #2f0d73 100%), radial-gradient(ellipse 130% 90% at calc(var(--ratio-x,.5) * 130% - 15%) calc(var(--ratio-y,.5) * 130% - 15%), #b3ccff 0%, #884cff 30%, #a112a1 60%, transparent 80%), radial-gradient(farthest-corner circle at calc(var(--ratio-x,.5) * 80% + 10%) calc(var(--ratio-y,.5) * 80% + 10%), #0000001a 0%, #000000b3 90%);background-blend-mode:soft-light, color-dodge, difference, overlay;background-size:25%,220% 220%,350% 350%,cover;background-position:calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), calc(var(--ratio-x,.5) * 160% - 30%) calc(var(--ratio-y,.5) * 160% - 30%), center;filter:brightness(calc(.35 + var(--pointer-from-center,0) * .45)) contrast(1.9) saturate(1.6);animation:5s linear infinite cosmos-drift}.card-scene[data-rarity="5"][data-revealed] .card-shine{opacity:.3}.card-scene[data-rarity="5"][data-revealed]:hover .card-shine{opacity:calc(.45 + var(--pointer-from-center,0) * .45)}.card-scene[data-rarity="5"][data-revealed]:hover .card-glare{opacity:.65}.card-scene[data-rarity="5"] .card-shine:before{background-image:radial-gradient(circle at calc(var(--ratio-x,.5) * 70% + 15%) calc(var(--ratio-y,.5) * 70% + 15%), #e6eeff99 0%, #eeccff4d 20%, transparent 60%), repeating-linear-gradient(calc(var(--shine-angle,0deg) + 30deg), #9966ff26 0%, #ccddff4d 1.5%, transparent 2.5%, #ff66ff1a 4%, transparent 6%);mix-blend-mode:screen;background-size:cover,350% 350%;background-position:center, calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%)}.card-scene[data-rarity="5"] .card-shine:after{background-image:radial-gradient(ellipse 85% 65% at calc(30% + var(--ratio-x,.5) * 40%) calc(30% + var(--ratio-y,.5) * 40%), #dd99ff80 0%, #6699ff4d 35%, transparent 70%);mix-blend-mode:color-dodge;opacity:.7}.card-scene[data-rarity="5"][data-revealed]:hover .card-glare:after{content:"";background:radial-gradient(farthest-corner circle at calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), #ccddff8c 0%, #cc66ff59 25%, transparent 65%);mix-blend-mode:screen}.card-subject{object-fit:cover;z-index:1;pointer-events:none;width:100%;height:100%;-webkit-mask-image:var(--mask-url,none);mask-image:var(--mask-url,none);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-source-type:luminance;mask-mode:luminance;-webkit-mask-image:var(--mask-url,none);-webkit-mask-mode:luminance;filter:drop-shadow(0 2px 8px #00000073);display:block;position:absolute;inset:0;-webkit-mask-size:cover}.card-scene[data-reversed] .card-subject{transform:rotate(180deg)}.card-text-layer{object-fit:cover;z-index:1;pointer-events:none;-webkit-mask-mode:luminance;width:100%;height:100%;display:block;position:absolute;inset:0;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-source-type:luminance;mask-mode:luminance}.card-name-layer{-webkit-mask-image:var(--name-mask-url,none);mask-image:var(--name-mask-url,none);-webkit-mask-image:var(--name-mask-url,none)}.card-top-layer{-webkit-mask-image:var(--top-mask-url,none);mask-image:var(--top-mask-url,none);-webkit-mask-image:var(--top-mask-url,none)}.card-scene[data-rarity="5"] .card-text-layer{transform:translate(calc((var(--ratio-x,.5) - .5) * 10px), calc((var(--ratio-y,.5) - .5) * 10px))}.card-scene[data-rarity="5"][data-reversed] .card-text-layer{transform:rotate(180deg) translate(calc((var(--ratio-x,.5) - .5) * 10px), calc((var(--ratio-y,.5) - .5) * 10px))}.card-scene[data-rarity="4"] .card-subject{transform:translate(calc((var(--ratio-x,.5) - .5) * 5px), calc((var(--ratio-y,.5) - .5) * 5px))}.card-scene[data-rarity="4"][data-reversed] .card-subject{transform:rotate(180deg) translate(calc((var(--ratio-x,.5) - .5) * 5px), calc((var(--ratio-y,.5) - .5) * 5px))}.card-scene[data-rarity="5"] .card-subject{transform:translate(calc((var(--ratio-x,.5) - .5) * 10px), calc((var(--ratio-y,.5) - .5) * 10px));filter:drop-shadow(0 4px 14px #0009)}.card-scene[data-rarity="5"][data-reversed] .card-subject{transform:rotate(180deg) translate(calc((var(--ratio-x,.5) - .5) * 10px), calc((var(--ratio-y,.5) - .5) * 10px))}.card-scene[data-rarity="3"] .card-shine,.card-scene[data-rarity="4"] .card-shine,.card-scene[data-rarity="5"] .card-shine{-webkit-mask-image:var(--mask-url,none);mask-image:var(--mask-url,none);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-source-type:luminance;mask-mode:luminance;-webkit-mask-image:var(--mask-url,none);-webkit-mask-mode:luminance;-webkit-mask-size:cover}.card-scene[data-rarity="4"] .card-shine{transform:translate(calc((var(--ratio-x,.5) - .5) * 5px), calc((var(--ratio-y,.5) - .5) * 5px))}.card-scene[data-rarity="5"] .card-shine{transform:translate(calc((var(--ratio-x,.5) - .5) * 10px), calc((var(--ratio-y,.5) - .5) * 10px))}.card-name-foil,.card-top-foil{z-index:2;pointer-events:none;mix-blend-mode:color-dodge;opacity:0;background:linear-gradient(calc(90deg + (var(--ratio-x,.5) - .5) * 60deg), transparent 15%, #c38e22 40%, #f7d56e 50%, #c38e22 60%, transparent 85%);background-size:200% 100%;background-position:calc(var(--ratio-x,.5) * 100%) 0;filter:brightness(.8)contrast(2)saturate(1.2);border-radius:8px;transition:opacity .3s;position:absolute;inset:0}.card-name-foil{-webkit-mask-image:var(--name-mask-url,none);mask-image:var(--name-mask-url,none);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-source-type:luminance;mask-mode:luminance;-webkit-mask-image:var(--name-mask-url,none);-webkit-mask-mode:luminance;-webkit-mask-size:cover}.card-top-foil{-webkit-mask-image:var(--top-mask-url,none);mask-image:var(--top-mask-url,none);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-source-type:luminance;mask-mode:luminance;-webkit-mask-image:var(--top-mask-url,none);-webkit-mask-mode:luminance;-webkit-mask-size:cover}.card-scene[data-rarity="3"][data-revealed]:hover .card-name-foil,.card-scene[data-rarity="3"][data-revealed]:hover .card-top-foil{opacity:.3}.card-scene[data-rarity="4"][data-revealed] .card-name-foil,.card-scene[data-rarity="4"][data-revealed] .card-top-foil{opacity:.25}.card-scene[data-rarity="4"][data-revealed]:hover .card-name-foil,.card-scene[data-rarity="4"][data-revealed]:hover .card-top-foil{opacity:.5}.card-scene[data-rarity="4"] .card-name-foil,.card-scene[data-rarity="4"] .card-top-foil{transform:translate(calc((var(--ratio-x,.5) - .5) * 5px), calc((var(--ratio-y,.5) - .5) * 5px))}.card-scene[data-rarity="5"][data-revealed] .card-name-foil,.card-scene[data-rarity="5"][data-revealed] .card-top-foil{opacity:.4}.card-scene[data-rarity="5"][data-revealed]:hover .card-name-foil,.card-scene[data-rarity="5"][data-revealed]:hover .card-top-foil{opacity:.65}.card-scene[data-rarity="5"] .card-name-foil,.card-scene[data-rarity="5"] .card-top-foil{transform:translate(calc((var(--ratio-x,.5) - .5) * 10px), calc((var(--ratio-y,.5) - .5) * 10px))}.card-radiant-border{background:conic-gradient(from 0deg, var(--color-rarity-primordial), var(--color-rarity-arcane), var(--color-rarity-mystic), var(--color-rarity-wandering), var(--color-rarity-primordial));z-index:-1;opacity:.8;background-size:200% 200%;border-radius:10px;animation:3s linear infinite radiant-shimmer;position:absolute;inset:-3px}@keyframes reveal-glow{0%{box-shadow:0 0 #0000}40%{box-shadow:0 0 50px var(--rarity-color,#ffffff4d), 0 0 100px #ffffff1a}to{box-shadow:0 0 18px var(--rarity-color,#ffffff1a)}}.card-scene[data-revealed] .card-front{animation:1.2s ease-out .35s both reveal-glow}.card-reveal-hint{text-align:center;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-primary);opacity:.35;pointer-events:none;font-size:.65rem;animation:2s ease-in-out infinite hint-pulse;position:absolute;bottom:-2rem;left:0;right:0}@keyframes hint-pulse{0%,to{opacity:.35}50%{opacity:.6}}@media (prefers-reduced-motion:reduce){.card-flipper,.card-shine,.card-glare,.card-radiant-border,.card-reveal-hint{transition:none!important;animation:none!important}.card-scene[data-revealed] .card-flipper{transform:rotateY(180deg)!important}.card-scene[data-rarity="5"][data-revealed] .card-shine{opacity:.25}.card-scene[data-rarity="3"][data-revealed] .card-shine{opacity:.15}}