/* Adapted from Pokémon Cards CSS by Simon Goellner (@simeydotme), GPL-3.0.
   https://github.com/simeydotme/pokemon-cards-css
   Modified 2026-10-19: PongHub SVG faces, Oncode palette, and five selectable foil profiles.
   Adapted from regular-holo.css, radiant-holo.css, v-max.css, cosmos-holo.css, v-star.css. */
.card{--card-aspect:400/584;--card-radius:6% / 4.11%;--card-opacity:.45;--pointer-from-left:.5;--pointer-from-top:.5;--pointer-from-center:0;--pointer-x:50%;--pointer-y:50%;--background-x:50%;--background-y:50%;--rotate-x:0deg;--rotate-y:0deg;--clip:inset(0);transform-style:preserve-3d;position:relative;width:350px;max-width:100%;aspect-ratio:var(--card-aspect)}
.card__rotator{display:grid;width:100%;aspect-ratio:var(--card-aspect);border-radius:var(--card-radius);transform:rotateY(var(--rotate-x)) rotateX(var(--rotate-y));transform-style:preserve-3d;box-shadow:0 28px 65px var(--card-shadow),0 0 40px -20px var(--glow,var(--oncode-teal));transition:transform .16s ease-out;}
.card__face>img,.card__shine,.card__glare{grid-area:1/1;width:100%;height:100%;border-radius:var(--card-radius);pointer-events:none}
.card__front{display:block;backface-visibility:hidden}
.card__shine{display:grid;transform:translateZ(1px);overflow:hidden;z-index:3;opacity:calc(var(--card-opacity)*var(--foil-strength,1)*var(--holo-intensity));mix-blend-mode:color-dodge}
.card__shine:before,.card__shine:after{grid-area:1/1;border-radius:var(--card-radius)}
.card[data-rarity="rare holo"] .card__shine{--scanlines-space:1px;--scanlines-light:var(--holo-scan-light);--scanlines-dark:var(--black);--bars:3%;--bar-color:var(--holo-bar);--bar-bg:var(--black);clip-path:var(--clip);background-image:repeating-linear-gradient(110deg,var(--holo-1),var(--holo-2),var(--holo-3),var(--holo-4),var(--holo-5),var(--holo-1),var(--holo-2),var(--holo-3),var(--holo-4),var(--holo-5),var(--holo-1),var(--holo-2),var(--holo-3),var(--holo-4),var(--holo-5)),repeating-linear-gradient(90deg,var(--scanlines-dark) 0,var(--scanlines-dark) calc(var(--scanlines-space)*2),var(--scanlines-light) calc(var(--scanlines-space)*2),var(--scanlines-light) calc(var(--scanlines-space)*4));background-position:calc(((50% - var(--background-x))*2.6) + 50%) calc(((50% - var(--background-y))*3.5) + 50%),center;background-size:400% 400%,cover;background-blend-mode:overlay;filter:brightness(1.1) contrast(1.1) saturate(1.2)}
.card[data-rarity="rare holo"] .card__shine:before{content:"";background-image:repeating-linear-gradient(90deg,var(--bar-bg) calc(var(--bars)*2),var(--bar-color) calc(var(--bars)*3),var(--bar-bg) calc(var(--bars)*3.5),var(--bar-color) calc(var(--bars)*4),var(--bar-bg) calc(var(--bars)*5),var(--bar-bg) calc(var(--bars)*14)),repeating-linear-gradient(90deg,var(--bar-bg) calc(var(--bars)*2),var(--bar-color) calc(var(--bars)*3),var(--bar-bg) calc(var(--bars)*3.5),var(--bar-color) calc(var(--bars)*4),var(--bar-bg) calc(var(--bars)*5),var(--bar-bg) calc(var(--bars)*10));background-position:calc((((50% - var(--background-x))*1.65) + 50%) + (var(--background-y)*.5)) var(--background-x),calc((((50% - var(--background-x))*-.9) + 50%) - (var(--background-y)*.75)) var(--background-y);background-size:200% 200%;background-blend-mode:screen;filter:brightness(1.15) contrast(1.1);mix-blend-mode:hard-light}
.card[data-rarity="rare holo"] .card__shine:after{content:"";background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),var(--holo-highlight) 0%,var(--holo-highlight-soft) 25%,var(--black) 90%);background-size:cover;mix-blend-mode:luminosity;filter:brightness(.6) contrast(4)}
.card__glare{z-index:4;transform:translateZ(1.41px);background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),var(--glare-highlight) 10%,var(--glare-soft) 20%,var(--glare-shadow) 90%);opacity:calc(var(--card-opacity)*.8*var(--holo-intensity));filter:brightness(.8) contrast(1.5);mix-blend-mode:overlay}
@media(prefers-reduced-motion:reduce){.card__rotator{transition:none}}

/* Each face carries the same foil layers; the outer rotator retains pointer tilt. */
.card__flipper{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.65,.3,1)}
.card.is-flipped .card__flipper{transform:rotateY(180deg)}
.card__face{position:absolute;inset:0;display:grid;border-radius:var(--card-radius);overflow:hidden;isolation:isolate;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(0deg)}
.card__face--back{transform:rotateY(180deg)}
.card__face>img{display:block;object-fit:contain}
@media(prefers-reduced-motion:reduce){.card__flipper{transition:none}}