.showcase{width:100%;display:grid;place-items:center;}.cards-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:3rem;max-width:1200px;margin:0 auto;padding:2rem;}@media (max-width:1024px){.cards-grid{grid-template-columns:repeat(2, 1fr);gap:2rem;}}@media (max-width:767px){.cards-grid{grid-template-columns:1fr;gap:2rem;padding:1rem;}}.card{--radius:4.55% / 3.5%;--glow-color:#fbbf24;width:100%;max-width:400px;aspect-ratio:0.716;position:relative;overflow:visible;margin:0 auto;transform-style:preserve-3d;transform:translate3d(0px, 0px, 0.1px);will-change:transform, opacity;background:none;}.card.interacting{z-index:calc(var(--card-scale) * 120);}.card__translater,.card__rotator{display:grid;width:100%;height:100%;perspective:600px;transform-origin:50% 50%;will-change:transform;background:none;}.card__translater{transform:translate3d(var(--translate-x), var(--translate-y), 0) scale(var(--card-scale));}.card__rotator{transform:rotateY(var(--rotate-y)) rotateX(var(--rotate-x));transform-style:preserve-3d;border-radius:var(--radius);border:0;background:transparent;padding:0;cursor:pointer;outline:none;box-shadow:0 0 20px 5px rgba(251, 191, 36, 0.3), 0 10px 30px -5px rgba(0, 0, 0, 0.5);transition:box-shadow 0.4s ease;}.card.interacting .card__rotator{box-shadow:0 0 30px 10px var(--glow-color), 0 0 50px 15px rgba(251, 191, 36, 0.5), 0 10px 40px -5px rgba(0, 0, 0, 0.7);}.card__rotator:focus{box-shadow:0 0 30px 10px var(--glow-color), 0 0 50px 15px rgba(251, 191, 36, 0.5);}.card__rotator *{width:100%;display:grid;grid-area:1/1;border-radius:var(--radius);image-rendering:optimizeQuality;transform-style:preserve-3d;}.card__front{position:relative;opacity:var(--card-opacity);backface-visibility:hidden;background-color:transparent;}.card__front img{width:100%;height:auto;display:block;border-radius:var(--radius);}.card__shine{--space:5%;--angle:133deg;display:grid;overflow:hidden;z-index:2;opacity:0.8;background-image:repeating-linear-gradient( 0deg, rgb(255, 119, 115) calc(var(--space) * 1), rgba(255, 237, 95, 1) calc(var(--space) * 2), rgba(168, 255, 95, 1) calc(var(--space) * 3), rgba(131, 255, 247, 1) calc(var(--space) * 4), rgba(120, 148, 255, 1) calc(var(--space) * 5), rgb(216, 117, 255) calc(var(--space) * 6), rgb(255, 119, 115) 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(--background-x) var(--background-y), rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.65) 20%, rgba(0, 0, 0, 0.5) 90% );background-position:0% var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y);background-size:300% 700%, 80% 80%, 200%;background-blend-mode:overlay, hue, hard-light;filter:brightness(calc(var(--pointer-from-center) * 0.3 + 0.5)) contrast(2) saturate(1.2);mix-blend-mode:color-dodge;}.card__glare{background-image:radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.5) 20%, rgba(0, 0, 0, 0.5) 90% );mix-blend-mode:overlay;opacity:calc(var(--pointer-from-center) * 0.5);z-index:3;}.card[data-rarity="gold secret"] .card__shine{background-image:url('../img/effet/galaxy.jpg'), repeating-linear-gradient( 110deg, rgba(255, 215, 0, 0.8) calc(5% * 1), rgba(251, 191, 36, 0.8) calc(5% * 2), rgba(255, 235, 59, 0.8) calc(5% * 3), rgba(255, 193, 7, 0.8) calc(5% * 4), rgba(255, 215, 0, 0.8) calc(5% * 5) ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.5) 10%, rgba(255, 215, 0, 0.3) 30%, rgba(0, 0, 0, 0.3) 100% );background-size:cover, 300% 400%, 200%;background-position:center center, calc(10% + var(--pointer-from-left) * 80%) calc(10% + var(--pointer-from-top) * 80%), center center;background-blend-mode:color-burn, multiply;filter:brightness(1.2) contrast(1.4) saturate(1.3);mix-blend-mode:color-dodge;opacity:calc(var(--card-opacity) * 1.2);}.card[data-rarity="rainbow holo"] .card__shine{background-image:url('../img/effet/rainbow.jpg'), repeating-linear-gradient( 110deg, rgba(248, 14, 53, 0.3) calc(5% * 1), rgba(238, 223, 16, 0.3) calc(5% * 2), rgba(33, 233, 133, 0.3) calc(5% * 3), rgba(13, 189, 233, 0.3) calc(5% * 4), rgba(201, 41, 241, 0.3) calc(5% * 5), rgba(248, 14, 53, 0.3) calc(5% * 6) ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.3) 10%, rgba(255, 255, 255, 0.15) 30%, transparent 70% );background-size:20%, 350% 600%, 180%;background-position:center center, calc(10% + var(--pointer-from-left) * 80%) calc(10% + var(--pointer-from-top) * 80%), center center;background-blend-mode:screen, soft-light;filter:brightness(calc(var(--pointer-from-center) * 0.2 + 0.75)) contrast(1.1) saturate(1.2);mix-blend-mode:overlay;opacity:calc(var(--card-opacity) * 0.6);}.card[data-rarity="cosmos holo"] .card__shine{background-image:url('../img/effet/cosmos.png'), repeating-linear-gradient( 82deg, rgba(147, 51, 234, 0.6) calc(4% * 1), rgba(138, 43, 226, 0.6) calc(4% * 2), rgba(186, 104, 200, 0.6) calc(4% * 3), rgba(123, 31, 162, 0.6) calc(4% * 4), rgba(142, 36, 170, 0.6) calc(4% * 5), rgba(171, 71, 188, 0.6) calc(4% * 6), rgba(147, 51, 234, 0.6) calc(4% * 7) ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(180, 100, 230, 0.5) 5%, rgba(138, 43, 226, 0.3) 40%, rgba(0, 0, 0, 0.5) 130% );background-size:cover, 400% 900%, cover;background-position:center center, calc(10% + var(--pointer-from-left) * 80%) calc(10% + var(--pointer-from-top) * 80%), center center;background-blend-mode:color-burn, multiply;filter:brightness(1) contrast(1.3) saturate(1.2);mix-blend-mode:color-dodge;opacity:calc(var(--card-opacity) * 1.1);}.card[data-rarity="metal holo"] .card__shine{background-image:url('../img/effet/metal.png'), repeating-linear-gradient( 110deg, rgba(192, 192, 192, 0.4) calc(5% * 1), rgba(211, 211, 211, 0.5) calc(5% * 2), rgba(169, 169, 169, 0.4) calc(5% * 3), rgba(220, 220, 220, 0.5) calc(5% * 4), rgba(192, 192, 192, 0.4) calc(5% * 5) ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.3) 10%, rgba(192, 192, 192, 0.2) 30%, rgba(0, 0, 0, 0.3) 100% );background-size:cover, 300% 400%, 200%;background-position:center center, calc(10% + var(--pointer-from-left) * 80%) calc(10% + var(--pointer-from-top) * 80%), center center;background-blend-mode:color-burn, multiply;filter:brightness(1) contrast(1.2) saturate(1.1);mix-blend-mode:color-dodge;opacity:calc(var(--card-opacity) * 0.8);}.card[data-rarity="wave holo"] .card__shine{background-image:url('../img/effet/wave.png'), repeating-linear-gradient( 110deg, rgba(0, 191, 255, 0.4) calc(5% * 1), rgba(135, 206, 250, 0.5) calc(5% * 2), rgba(30, 144, 255, 0.4) calc(5% * 3), rgba(100, 149, 237, 0.5) calc(5% * 4), rgba(0, 191, 255, 0.4) calc(5% * 5) ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.3) 10%, rgba(0, 191, 255, 0.2) 30%, rgba(0, 0, 0, 0.3) 100% );background-size:cover, 300% 400%, 200%;background-position:center center, calc(10% + var(--pointer-from-left) * 80%) calc(10% + var(--pointer-from-top) * 80%), center center;background-blend-mode:color-burn, multiply;filter:brightness(1) contrast(1.2) saturate(1.1);mix-blend-mode:color-dodge;opacity:calc(var(--card-opacity) * 0.8);}.card[data-rarity="ancient holo"] .card__shine{background-image:url('../img/effet/ancient.png'), repeating-linear-gradient( 110deg, rgba(218, 165, 32, 0.4) calc(5% * 1), rgba(184, 134, 11, 0.5) calc(5% * 2), rgba(205, 133, 63, 0.4) calc(5% * 3), rgba(160, 82, 45, 0.5) calc(5% * 4), rgba(218, 165, 32, 0.4) calc(5% * 5) ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.3) 10%, rgba(218, 165, 32, 0.2) 30%, rgba(0, 0, 0, 0.3) 100% );background-size:cover, 300% 400%, 200%;background-position:center center, calc(10% + var(--pointer-from-left) * 80%) calc(10% + var(--pointer-from-top) * 80%), center center;background-blend-mode:color-burn, multiply;filter:brightness(1) contrast(1.2) saturate(1.1);mix-blend-mode:color-dodge;opacity:calc(var(--card-opacity) * 0.8);}.card-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.9);z-index:999999;display:none;justify-content:center;align-items:center;opacity:0;transition:opacity 0.3s ease;}.card-modal.active{display:flex;opacity:1;}.card-modal-content{position:relative;width:90vw;max-width:500px;aspect-ratio:0.716;animation:zoomIn 0.3s ease-out;background:none;}@keyframes zoomIn{from{transform:scale(0.5);opacity:0;}to{transform:scale(1);opacity:1;}}.card-modal-close{position:fixed;top:2rem;right:2rem;width:50px;height:50px;background:#fbbf24;border:3px solid #000;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:bold;color:#000;transition:all 0.3s ease;z-index:1000000;}.card-modal-close:hover{transform:scale(1.1) rotate(90deg);background:#fff;}@media (max-width:767px){.card-modal-content{width:85vw;max-width:350px;}.card-modal-close{top:1rem;right:1rem;width:40px;height:40px;font-size:1.5rem;}}@keyframes holoCard{0%, 100%{transform:rotateY(0deg) rotateX(0deg);}50%{transform:rotateY(5deg) rotateX(5deg);}}@keyframes holoSparkle{0%, 100%{opacity:0.75;}50%{opacity:1;filter:brightness(1.2);}}@keyframes holoGradient{0%, 100%{background-position:50% 50%;}50%{background-position:100% 100%;}}@media (max-width:767px){ .card__shine{opacity:0.3 !important;filter:brightness(0.8) contrast(1.2) saturate(0.9) !important;} .card__glare{opacity:0.2 !important;} .card__rotator{box-shadow:0 0 10px 2px rgba(251, 191, 36, 0.2), 0 5px 15px -3px rgba(0, 0, 0, 0.4) !important;}.card.interacting .card__rotator{box-shadow:0 0 15px 5px rgba(251, 191, 36, 0.3), 0 5px 20px -3px rgba(0, 0, 0, 0.5) !important;} .card[data-rarity="gold secret"] .card__shine, .card[data-rarity="cosmos holo"] .card__shine{opacity:0.25 !important;filter:brightness(0.9) contrast(1.1) saturate(0.8) !important;}.card[data-rarity="rainbow holo"] .card__shine, .card[data-rarity="metal holo"] .card__shine, .card[data-rarity="wave holo"] .card__shine, .card[data-rarity="ancient holo"] .card__shine{opacity:0.2 !important;filter:brightness(0.85) contrast(1.0) saturate(0.8) !important;}}@media (max-width:480px){.card__shine{opacity:0.2 !important;mix-blend-mode:overlay !important;}.card__glare{display:none !important;}}