/* ========================================================= KARN — LES GRANDES NATIONS (KRN-005) --------------------------------------------------------- Gabarit carte : 750 × 1050 px Fenêtre d'illustration estimée : x ≈ 66 px → 684 px y ≈ 135 px → 775 px Soit : gauche/droite ≈ 8.8 % haut ≈ 12.9 % bas ≈ 26.2 % ========================================================= */ /* ========================================================= GÉOMÉTRIE DU SET ========================================================= */ .karn-card[data-set="krn-005"] { /* Zone illustration. Utilisée notamment par Rare et Épique. */ --clip: inset( 12.9% 8.8% 26.2% 8.8% round 2.2% / 1.6% ); /* Tout sauf l'illustration. Utilisé par la Peu Commune / Reverse Holo. */ --clip-invert: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 73.8%, 8.8% 73.8%, 8.8% 12.9%, 91.2% 12.9%, 91.2% 73.8%, 0% 73.8% ); --clip-stage: var(--clip); --clip-stage-invert: var(--clip-invert); /* Zone intérieure générale du cadre. Sert notamment au Mythique. */ --clip-borders: inset( 1.2% 1.5% round 2.8% / 2% ); } /* ========================================================= PEU COMMUNE Reverse Holo uniquement HORS illustration ========================================================= */ .karn-card[data-set="krn-005"][data-karn-rarity="uncommon"] { --card-glow: hsl(145, 55%, 72%); --foil-brightness: 0.48; } .karn-card[data-set="krn-005"][data-karn-rarity="uncommon"] .card__shine { clip-path: var(--clip-invert) !important; filter: brightness(0.82) contrast(1.35) saturate(0.95) !important; } .karn-card[data-set="krn-005"][data-karn-rarity="uncommon"] .card__glare:after { clip-path: var(--clip-invert) !important; } /* ========================================================= RARE Holo uniquement dans l'illustration ========================================================= */ .karn-card[data-set="krn-005"][data-karn-rarity="rare"] { --card-glow: hsl(210, 90%, 72%); } .karn-card[data-set="krn-005"][data-karn-rarity="rare"] .card__shine, .karn-card[data-set="krn-005"][data-karn-rarity="rare"] .card__glare, .karn-card[data-set="krn-005"][data-karn-rarity="rare"] .card__glare:after { clip-path: var(--clip) !important; } .karn-card[data-set="krn-005"][data-karn-rarity="rare"] .card__shine { filter: brightness(1.04) contrast(1.12) saturate(1.12) !important; } .karn-card[data-set="krn-005"][data-karn-rarity="rare"] .card__glare { filter: brightness(0.88) contrast(1.35) saturate(1.05) !important; } .karn-card[data-set="krn-005"][data-karn-rarity="rare"] .card__rotator { box-shadow: 0 0 14px rgba(70, 160, 255, 0.20), 0 18px 42px rgba(0, 0, 0, 0.58); } /* ========================================================= ÉPIQUE Radiant contenu dans l'illustration ========================================================= */ .karn-card[data-set="krn-005"][data-karn-rarity="epic"] { --card-glow: hsl(32, 95%, 75%); /* Un peu plus présent que les anciens sets, mais sans masquer l'illustration. */ --karn-epic-shine-opacity: 0.28; --karn-epic-glare-opacity: 0.20; } .karn-card[data-set="krn-005"][data-karn-rarity="epic"] .card__shine, .karn-card[data-set="krn-005"][data-karn-rarity="epic"] .card__shine:after, .karn-card[data-set="krn-005"][data-karn-rarity="epic"] .card__glare, .karn-card[data-set="krn-005"][data-karn-rarity="epic"] .card__glare:after { clip-path: var(--clip) !important; } .karn-card[data-set="krn-005"][data-karn-rarity="epic"] .card__shine { filter: brightness(1.02) contrast(1.10) saturate(1.14) !important; } .karn-card[data-set="krn-005"][data-karn-rarity="epic"] .card__glare { filter: brightness(1.03) contrast(1.08) saturate(1.10) !important; } .karn-card[data-set="krn-005"][data-karn-rarity="epic"] .card__rotator { box-shadow: 0 0 18px rgba(190, 110, 255, 0.22), 0 20px 48px rgba(0, 0, 0, 0.62); } /* ========================================================= MYTHIQUE Effet premium plein cadre MAIS limité à l'intérieur de la carte. Le moteur Mythique utilise "rare holo v". Sans cette surcharge, son effet s'étale sur toute la surface rectangulaire. ========================================================= */ .karn-card[data-set="krn-005"][data-karn-rarity="mythic"] { --card-glow: hsl(44, 100%, 74%); } .karn-card[data-set="krn-005"][data-karn-rarity="mythic"] .card__shine, .karn-card[data-set="krn-005"][data-karn-rarity="mythic"] .card__shine:after, .karn-card[data-set="krn-005"][data-karn-rarity="mythic"] .card__glare { clip-path: var(--clip-borders) !important; } .karn-card[data-set="krn-005"][data-karn-rarity="mythic"] .card__shine { filter: brightness(0.86) contrast(2.35) saturate(0.82) !important; } .karn-card[data-set="krn-005"][data-karn-rarity="mythic"] .card__shine:after { filter: brightness(1.02) contrast(2.10) saturate(1.35) !important; } .karn-card[data-set="krn-005"][data-karn-rarity="mythic"] .card__glare { opacity: calc(var(--card-opacity) * 0.46) !important; filter: brightness(0.92) contrast(1.55) !important; } .karn-card[data-set="krn-005"][data-karn-rarity="mythic"] .card__rotator { box-shadow: 0 0 18px rgba(255, 214, 80, 0.26), 0 0 36px rgba(255, 150, 40, 0.10), 0 22px 52px rgba(0, 0, 0, 0.66); } /* ========================================================= ÉTAT SANS INTERACTION On évite que le foil soit constamment très visible dans la collection. Il se révèle surtout au passage de souris. ========================================================= */ .karn-card[data-set="krn-005"][data-karn-rarity="rare"]:not(.interacting) .card__shine, .karn-card[data-set="krn-005"][data-karn-rarity="epic"]:not(.interacting) .card__shine, .karn-card[data-set="krn-005"][data-karn-rarity="mythic"]:not(.interacting) .card__shine { opacity: 0 !important; } .karn-card[data-set="krn-005"][data-karn-rarity="rare"]:not(.interacting) .card__glare, .karn-card[data-set="krn-005"][data-karn-rarity="epic"]:not(.interacting) .card__glare, .karn-card[data-set="krn-005"][data-karn-rarity="mythic"]:not(.interacting) .card__glare { opacity: 0 !important; } /* ========================================================= MOBILE / TACTILE Effet fixe et léger : pas besoin de mouvement de souris. ========================================================= */ @media (pointer: coarse) { .karn-card[data-set="krn-005"][data-karn-rarity="uncommon"] .card__shine, .karn-card[data-set="krn-005"][data-karn-rarity="rare"] .card__shine, .karn-card[data-set="krn-005"][data-karn-rarity="epic"] .card__shine, .karn-card[data-set="krn-005"][data-karn-rarity="mythic"] .card__shine { opacity: 0.16 !important; } .karn-card[data-set="krn-005"] .card__glare { opacity: 0.10 !important; } }