/* Three-dimensional card stock. Faces remain independent while the solid rotates. */
.card-viewer{--stock:3.2px;--light-x:40%;--light-y:45%;position:relative;width:100%;max-width:100%;isolation:isolate}
.viewer-scene{position:relative;width:100%;aspect-ratio:63/88;perspective:1050px;perspective-origin:50% 45%;touch-action:none;cursor:grab;outline:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.viewer-scene:focus-visible{outline:1px solid #9bad83;outline-offset:13px;border-radius:10px}
.card-solid{--rx:-5deg;--ry:-10deg;position:absolute;inset:0;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;will-change:transform}
.is-held .viewer-scene{cursor:grabbing}
.card-face{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-front{transform:translateZ(calc(var(--stock)/2));z-index:2}
.card-front .trading-card{width:100%;height:100%;aspect-ratio:auto;transform:none!important;transition:none;box-shadow:0 10px 26px #10291b24;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-back{transform:rotateY(180deg) translateZ(calc(var(--stock)/2));box-shadow:0 10px 26px #10291b24}
.card-stock{position:absolute;inset:0;border-radius:9px;background:#dddac9;transform:translateZ(0);box-shadow:0 0 0 .5px #928a6d;backface-visibility:visible}
.card-edge{position:absolute;background:repeating-linear-gradient(90deg,#b2ad92 0px,#f8f4dc .65px,#dedac1 1.2px);backface-visibility:visible}
.card-edge-left,.card-edge-right{top:7px;bottom:7px;width:var(--stock);transform:rotateY(90deg)}
.card-edge-left{left:calc(var(--stock)/-2)}.card-edge-right{right:calc(var(--stock)/-2)}
.card-edge-top,.card-edge-bottom{left:7px;right:7px;height:var(--stock);transform:rotateX(90deg)}
.card-edge-top{top:calc(var(--stock)/-2)}.card-edge-bottom{bottom:calc(var(--stock)/-2)}
.card-ground-shadow{position:absolute;bottom:-20px;left:6%;width:88%;height:17px;border-radius:50%;background:#1c37282c;filter:blur(10px);transform:rotateX(65deg);pointer-events:none}
.viewer-tools{display:flex;gap:8px;justify-content:center;margin-top:23px;position:relative;z-index:3}
.viewer-tool{display:inline-flex;gap:6px;align-items:center;justify-content:center;min-height:34px;padding:7px 12px;border:1px solid #ced6c1;border-radius:20px;background:#fafbf2d9;font:500 10px var(--sans);color:#526b48;transition:background .18s,transform .18s}
.viewer-tool:hover{background:#e9efdd;transform:translateY(-1px)}.viewer-tool svg{height:13px;width:13px;stroke-width:1.5}
.viewer-hint{font-size:9px!important;color:#8b947e!important;text-align:center;line-height:1.5!important;margin:9px -15px 0!important}
.viewer-status{position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
/* Life Weave: shared original artwork, crisp live type, continuous silver framing. */
.fauna-reverse{position:absolute;inset:0;isolation:isolate;overflow:hidden;border-radius:10px;border:1px solid #a4b2c2;background:#071e2b;color:#e4eaf0;box-shadow:inset 0 0 0 1px #e2f0f055,0 1px 3px #07121d66;container-type:inline-size}
.reverse-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;filter:saturate(.82) contrast(.98)}
.reverse-frame{position:absolute;inset:2.4%;z-index:3;border:1px solid #c4d7dfb3;border-radius:7px;box-shadow:0 0 0 1px #06243199,inset 0 0 0 1px #eff9ff26;pointer-events:none}
.reverse-frame:after{content:'';position:absolute;inset:3px;border:1px solid #b0c3d070;border-radius:4px}
.reverse-wordmark{position:absolute;z-index:4;top:48%;left:9%;right:9%;transform:translateY(-50%);text-align:center;font:400 13.5cqw/1.1 var(--serif);letter-spacing:1.1cqw;text-indent:1.1cqw;white-space:nowrap;color:#e4e7e9;text-shadow:0 1px 2px #00131f,0 0 8px #bfeeff22;pointer-events:none}
.reverse-foil{position:absolute;inset:0;z-index:1;opacity:calc(.08 + var(--reverse-strength,.57)*.2);mix-blend-mode:screen;pointer-events:none;background-image:radial-gradient(ellipse at var(--light-x,45%) var(--light-y,40%),#e2fdff66,transparent 48%),linear-gradient(var(--reverse-light-angle,125deg),transparent 28%,#8cf5fa44 41%,#c2adff66 49%,#f1f8ff80 54%,transparent 68%);background-size:100% 100%,180% 180%;background-position:center,var(--light-x,45%) var(--light-y,40%);mask-image:linear-gradient(#000 0%,#000 33%,transparent 42%,transparent 57%,#000 66%,#000 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 33%,transparent 42%,transparent 57%,#000 66%,#000 100%)}
.fauna-reverse:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at var(--light-x,45%) var(--light-y,40%),#a8e9ff15,transparent 58%)}
/* A shared, deterministic light replaces looping gradients. Matte cards have no foil. */
.trading-card{--mx:50%;--my:45%;--light-angle:115deg;--foil-strength:.57;--foil-glint:.49}
.trading-card:not(.holo):not(.illustration):not(.shiny):not(.immersive){background:#efecd8;border-color:#cecbb3;box-shadow:0 4px 8px #3c4a3210}
.trading-card .foil{animation:none!important;transition:none;will-change:auto}
/* Silver diffraction stays visible even away from the specular peak. A separate
   narrow screen reflection moves over it without whitening the animal painting. */
.trading-card.holo{background:linear-gradient(var(--light-angle,115deg),#649ba9 0%,#effaff 13%,#bba5dc 27%,#fdffff 43%,#7ecacb 60%,#f4e9bc 75%,#9eaabd 92%,#e8f7ff 100%);border-color:#8daab6;box-shadow:0 4px 9px #2e567b24,inset 0 0 0 1px #f7fdff}
.trading-card.holo .card-inner{border-color:#a9bbc1;background:#e3edf0}
.trading-card.holo .card-caption{background:linear-gradient(130deg,#e7eeee,#f9fcf7 45%,#d5e5e4);border-top:1px solid #c1d5d9;color:#244939}
.trading-card.holo .card-image{filter:saturate(1.04) contrast(1.02)}
.trading-card.holo .foil{inset:0;border-radius:0;opacity:calc(.62 + var(--foil-strength,.57)*.38);mix-blend-mode:soft-light;background-image:repeating-linear-gradient(var(--light-angle,115deg),#10bddb 0%,#526cef 13%,#ce52d5 25%,#ffad77 38%,#f9e789 49%,#53e1b6 62%,#10bddb 76%);background-size:190% 190%;background-position:var(--mx,50%) var(--my,45%);filter:saturate(1.5) contrast(1.15);mask-image:none;-webkit-mask-image:none}
.trading-card.holo .foil:after{content:'';position:absolute;inset:0;opacity:.35;background-image:repeating-linear-gradient(38deg,transparent 0px,transparent 8px,#fff9 8.4px,transparent 9px),repeating-linear-gradient(-38deg,transparent 0px,transparent 8px,#bcf5ff99 8.4px,transparent 9px)}
.trading-card.holo .card-visual:after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:calc(.2 + var(--foil-glint,.49)*.42);background-image:radial-gradient(ellipse at var(--mx,50%) var(--my,45%),#d5f9ff55,transparent 20%),linear-gradient(var(--light-angle,115deg),transparent 35%,#c9f7ff22 40%,#f2ffff88 43.5%,#ffffffdf 44.5%,#e8fbff66 46%,transparent 53%);background-size:100% 100%,210% 210%;background-position:center,var(--mx,50%) var(--my,45%)}
.trading-card.holo .card-inner:after{content:none}
/* Illustration rares keep a subtle clear varnish; no rainbow or decorative sparkle. */
.trading-card.illustration{background:linear-gradient(130deg,#baa97e,#eee4bb 21%,#a99568 48%,#e2d6ac 75%,#b19e72);border-color:#b5a47a;box-shadow:0 4px 10px #5b4d2b24}
.trading-card.illustration .foil{opacity:calc(var(--foil-strength,.57)*.32);mix-blend-mode:screen;background:linear-gradient(var(--light-angle,115deg),transparent 25%,#fff8 44%,#fff2 52%,transparent 67%);background-size:180% 180%;background-position:var(--mx,50%) var(--my,45%);filter:none;mask-image:linear-gradient(#000 70%,transparent 100%)}
/* Shiny cards use warm gold stock, fine diamond etching and a pearlescent highlight. */
.trading-card.shiny{padding:6px;background:linear-gradient(var(--light-angle,115deg),#9c7127 0%,#f1d17a 13%,#fff6c2 24%,#b98b31 38%,#f1d580 52%,#fff3ad 64%,#ac7c20 80%,#f1d07b 100%);border:1px solid #b48e3d;box-shadow:0 4px 12px #7b582d28,inset 0 0 0 1px #fff4c2}
.trading-card.shiny .card-inner{border-color:#e4c46b;box-shadow:inset 0 0 0 1px #74581d}
.trading-card.shiny .card-caption{background:linear-gradient(transparent,#15382ae8 35%,#163326f5);color:#fff0bd;border-bottom:1px solid #e9ca78b3}
.trading-card.shiny .card-name{color:#fff0bf;text-shadow:0 1px 2px #132919}
.trading-card.shiny .card-top,.trading-card.shiny .card-foot,.trading-card.shiny .card-scientific{color:#f4e1a6}
.trading-card.shiny .foil{inset:0;border-radius:0;opacity:calc(.58 + var(--foil-strength,.57)*.38);mix-blend-mode:soft-light;background-image:repeating-linear-gradient(var(--light-angle,115deg),#b38335 0%,#ffe384 15%,#fff4c4 26%,#86dcc2 36%,#c2a1e1 45%,#fff0a0 55%,#bd8e3d 70%);background-size:200% 200%;background-position:var(--mx,50%) var(--my,45%);filter:saturate(1.28);mask-image:none;-webkit-mask-image:none}
.trading-card.shiny .foil:before{content:'';position:absolute;inset:0;opacity:.5;background-image:repeating-linear-gradient(45deg,transparent 0px,transparent 11px,#fff0bbaa 11.5px,transparent 12.5px),repeating-linear-gradient(-45deg,transparent 0px,transparent 11px,#fff0bbaa 11.5px,transparent 12.5px)}
.trading-card.shiny .foil:after{content:'';position:absolute;inset:0;opacity:var(--foil-glint,.49);background-image:radial-gradient(ellipse 1px 6px at 22% 22%,#fffce6 15%,transparent 80%),radial-gradient(ellipse 6px 1px at 22% 22%,#fffce6 15%,transparent 80%),radial-gradient(ellipse 1px 5px at 76% 47%,#fffce6 15%,transparent 80%),radial-gradient(ellipse 5px 1px at 76% 47%,#fffce6 15%,transparent 80%),radial-gradient(ellipse 1px 6px at 39% 69%,#fffce6 15%,transparent 80%),radial-gradient(ellipse 6px 1px at 39% 69%,#fffce6 15%,transparent 80%)}
.trading-card.shiny .card-visual:after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:calc(.2 + var(--foil-glint,.49)*.5);background-image:radial-gradient(ellipse at var(--mx,50%) var(--my,45%),#fff6cc66,transparent 23%),linear-gradient(var(--light-angle,115deg),transparent 35%,#fff0c922 40%,#fff5c8aa 43.5%,#fffde6ee 44.5%,#fff4c666 46%,transparent 53%);background-size:100% 100%,210% 210%;background-position:center,var(--mx,50%) var(--my,45%)}
.trading-card.shiny .card-inner:after,.trading-card.shiny:after{content:none}
.card-viewer .trading-card .foil{animation:none!important;transition:none}
@media(max-width:650px){.viewer-tools{margin-top:20px}.viewer-tool{min-height:35px;padding:7px 12px}.viewer-hint{font-size:8px!important;margin-top:8px!important}.card-ground-shadow{bottom:-17px}}
@media(prefers-reduced-motion:reduce){.trading-card.holo .foil,.trading-card.shiny .foil,.trading-card.shiny:after{animation:none}.card-viewer *{transition:none!important}}