:root {
    --card-ratio: 1.5; /* 2/3 */
    --card-radius: 8px;
    --holo-rainbow: linear-gradient(
        90deg,
        rgba(248, 14, 53, 0.62) 0%,
        rgba(238, 223, 16, 0.58) 22%,
        rgba(33, 233, 133, 0.54) 44%,
        rgba(13, 189, 233, 0.56) 66%,
        rgba(201, 41, 241, 0.58) 84%,
        rgba(248, 14, 53, 0.62) 100%
    );
    --holo-metal-rainbow: linear-gradient(
        120deg,
        rgba(255, 60, 140, 0.24) 0%,
        rgba(255, 220, 90, 0.2) 24%,
        rgba(120, 255, 210, 0.2) 46%,
        rgba(110, 205, 255, 0.24) 68%,
        rgba(210, 120, 255, 0.24) 86%,
        rgba(255, 60, 140, 0.24) 100%
    );
    --card-spacing: 1rem;
    --effect-grain: url("../img/effects/grain-_GT1UZT.webp");
    --effect-glitter: url("../img/effects/glitter-HNE0Gh4.png");
    --effect-glitter-size: 28%;
}

#cards-page .parallax-item:nth-child(1) {
  min-height: 900px;
}

#cards-page .parallax-item:nth-child(2) {
  min-height: 50px;
  margin-bottom: 2vh;
}

#cards-page .parallax-item:nth-child(3) {
  min-height: 850px;
}

#cards-page .parallax-item .row {
  position: relative;
  max-width: var(--xds-page-max-width);
}

.cards-edition-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    text-transform: none;
}

.cards-access-minimal {
    margin: 1.3rem auto 0;
}

.cards-access-head {
    text-align: center;
}

.cards-access-kicker {
    display: inline-block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: rgba(236, 241, 250, 0.82);
}

.cards-access-grid-minimal {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.7rem;
}

.cards-access-item-minimal {
    --tone-glow-1: 16%;
    --tone-glow-2: 11%;
    --tone-glow-dark-1: 24%;
    --tone-glow-dark-2: 16%;
    padding: 0.95rem 0.75rem 0.85rem;
    min-height: 170px;
    background:
        radial-gradient(160px 70px at 85% -12%, color-mix(in srgb, var(--tone-color) var(--tone-glow-1), transparent), transparent),
        radial-gradient(130px 65px at 10% 115%, color-mix(in srgb, var(--tone-color) var(--tone-glow-2), transparent), transparent),
        linear-gradient(170deg, #f8fafd 0%, #eef3fa 100%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-shadow: var(--xds-shadow-mini);
}

.cards-access-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tone-color);
}

.cards-access-icon .icon-cards {
    display: inline-flex;
}

.cards-access-icon .icon-cards svg {
    width: 50px;
    height: 50px;
}

.cards-access-title {
    font-family: "Hanson", sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #141c2d;
    line-height: 1.05;
    text-align: center;
}

.cards-access-requirement {
    font-family: "Outfit", sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    color: #2f3b55;
    line-height: 1.25;
    text-align: center;
}

.cards-access-item-minimal.tone-normal {
    --tone-color: #5b6f95;
}

.cards-access-item-minimal.tone-holo {
    --tone-color: #37b5ff;
}

.cards-access-item-minimal.tone-cosmos {
    --tone-color: #2d63d3;
}

.cards-access-item-minimal.tone-sparkle {
    --tone-color: #d8a03a;
}

.cards-access-item-minimal.tone-secret {
    --tone-color: #d24646;
}

.cards-access-item-minimal.tone-profil {
    --tone-color: #bab9bb;
}

.cards-access-item-minimal.tone-profil .cards-access-icon .icon-cards svg,
.cards-access-item-minimal.tone-profil .cards-access-icon .icon-cards svg * {
    color: var(--tone-color) !important;
    stroke: currentColor;
}

[data-bs-theme="dark"] .cards-access-item-minimal {
    background:
        radial-gradient(180px 80px at 88% -16%, color-mix(in srgb, var(--tone-color) var(--tone-glow-dark-1), transparent), transparent),
        radial-gradient(140px 70px at 9% 112%, color-mix(in srgb, var(--tone-color) var(--tone-glow-dark-2), transparent), transparent);
}

[data-bs-theme="dark"] .cards-access-title {
    color: #f2f6ff;
}

[data-bs-theme="dark"] .cards-access-requirement {
    color: #d4deee;
}

@media (max-width: 767.98px) {
    .cards-access-grid-minimal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .cards-access-grid-minimal {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


.desktop-edition-select {
    width: 20%;
}


.cards-filters .btn {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* Cards filters (colors + states) */
#cards-page .filter-btn-group .btn {
    --btn-color: #6b7280;
    border: 1px solid color-mix(in srgb, var(--btn-color) 35%, transparent);
    background: color-mix(in srgb, var(--btn-color) 18%, transparent);
    color: #2f3b55;
    transition: all 0.35s ease-in-out;
}

#cards-page .filter-btn-group .btn:hover,
#cards-page .filter-btn-group .btn:focus-visible {
    background: color-mix(in srgb, var(--btn-color) 100%, transparent);
    color: #1f2937;
    border-color: color-mix(in srgb, var(--btn-color) 100%, transparent);
}

#cards-page .filter-btn-group .btn.active {
    background: var(--btn-color) !important;
    color: #fff;
    border-color: var(--btn-color);
}

#cards-page .filter-btn-group .btn .icon-cards svg {
    color: currentColor !important;
}

#cards-page .filter-btn-group [data-filter="*"] { --btn-color: #6b7280; }
#cards-page .filter-btn-group [data-filter=".rarity-normal"] { --btn-color: #5b6f95; }
#cards-page .filter-btn-group [data-filter=".rarity-holo"] { --btn-color: #37b5ff; }
#cards-page .filter-btn-group [data-filter=".rarity-cosmos"] { --btn-color: #2d63d3; }
#cards-page .filter-btn-group [data-filter=".rarity-sparkle"] { --btn-color: #d8a03a; }
#cards-page .filter-btn-group [data-filter=".rarity-secret"] { --btn-color: #d24646; }

[data-bs-theme="dark"] #cards-page .filter-btn-group .btn {
    color: #e5e7eb;
    background: color-mix(in srgb, var(--btn-color) 16%, transparent);
    border-color: color-mix(in srgb, var(--btn-color) 42%, transparent);
}

[data-bs-theme="dark"] #cards-page .filter-btn-group .btn:hover,
[data-bs-theme="dark"] #cards-page .filter-btn-group .btn:focus-visible {
    background: color-mix(in srgb, var(--btn-color) 100%, transparent);
    color: #f8fafc;
    border-color: color-mix(in srgb, var(--btn-color) 100%, transparent);
}
/* Style de la grille des éditions */

.cards-edition-layer-title {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

.cards-edition-title {
    pointer-events: auto;
    display: inline-block;
    text-align: center;
    text-transform: none;
    margin-top: 0;
    margin-bottom: -.43em;
    margin-right: 0;
    font-family: "Hanson", sans-serif;
    font-size: 16.5vw;
    font-weight: 800;
    position: relative;
}

.cards-edition-title-second-part {
    display: inline;
}

.cards-floating-subtitle {
    position: static;
    display: block;
    font-family: 'Outfit';
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    opacity: 0.92;
}

@media (max-width: 767.98px) {
    .cards-edition-title {
        font-size: 35vw;
    }
    .cards-edition-layer-title {
        align-items: flex-start;
        gap: 0.5rem;
        padding-top: 6vh;
    }

    .cards-edition-title-second-part {
        display: block;
        top: -60px;
        position: relative;
    }
}

.cards-edition-grid-container {
  --edition-gap: 1rem;
  --edition-col: 140px;
  display: grid;
  gap: var(--edition-gap);
  grid-auto-flow: dense;
  justify-content: center;
  justify-items: center;
  margin: 0 auto;
  width: min(100%, calc(3 * var(--edition-col) + 2 * var(--edition-gap)));
  grid-template-columns: repeat(auto-fit, minmax(var(--edition-col), 1fr));
}

@media (min-width: 768px) {
  .cards-edition-grid-container {
      --edition-gap: 1.5rem;
      width: min(100%, calc(6 * var(--edition-col) + 5 * var(--edition-gap)));
  }
}

/* Grid System (Based on Saturday/Gameotheque) */
.game-grid {
    margin: 0 auto;
    width: 100%;
}

.card-xds-item {
    margin: 0.5rem;
    width: calc(100% / 2 - var(--card-spacing)); /* Mobile: 2 colonnes */
    margin-bottom: 1rem;
}

@media screen and (min-width: 768px) {
    .card-xds-item {
        width: calc(100% / 4 - var(--card-spacing)); /* Tablette: 4 colonnes */
    }
}

@media screen and (min-width: 1200px) {
    .card-xds-item {
        width: calc(100% / 6 - var(--card-spacing)); /* Desktop: 6 colonnes */
    }
}

.card-xds-perspective {
    perspective: 1000px;
    display: block;
    position: relative;
}
.card-xds-main {
    aspect-ratio: 2/3;
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    background: #000;
    backface-visibility: hidden;
    isolation: isolate;
}

.card-xds-main > .card-xds-bg,
.card-xds-main > .card-xds-foil-mask,
.card-xds-main > .card-xds-cosmos-stars,
.card-xds-main > .card-xds-shine,
.card-xds-main > .card-xds-parallax-layer,
.card-xds-main > .card-xds-holo-overlay,
.card-xds-main > .card-xds-content {
    border-radius: inherit;
}

/* Glow effect under the card */
.card-xds-glow {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(25px) saturate(2);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    transform: scale(0.95);
}

.card-xds-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.card-xds-foil-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mask-image: var(--foil-mask-image);
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center;
    mask-mode: luminance;
    -webkit-mask-image: var(--foil-mask-image);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: center;
}

.card-xds-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
    clip-path: inset(0 round var(--card-radius));
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1), transparent);
    mix-blend-mode: overlay;
}

.card-xds-shine::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--effect-glitter), var(--effect-grain);
    background-size: var(--effect-glitter-size), 130%;
    background-repeat: repeat, repeat;
    background-position: center, center;
    background-blend-mode: screen, overlay;
    opacity: 0.48;
    mix-blend-mode: screen;
    filter: brightness(1.12) contrast(1.2);
    mask-image: var(--shine-mask, linear-gradient(115deg, transparent 35%, rgba(0, 0, 0, 1) 50%, transparent 65%));
    -webkit-mask-image: var(--shine-mask, linear-gradient(115deg, transparent 35%, rgba(0, 0, 0, 1) 50%, transparent 65%));
}


.card-xds-content {
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Roboto Mono', monospace;
    color: white;
}

.card-xds-visual-id { font-weight: bold; font-size: 1.1rem; }
.card-xds-pseudo { font-size: 1.5rem; letter-spacing: 1px; text-transform: uppercase; }
.card-xds-line { border-top: 2px solid rgb(255, 255, 255); margin: 0; filter: brightness(1.4) contrast(2) saturate(1) opacity(0.35); }

.card-xds-parallax-layer {
    position: absolute;
    inset: 0; /* Prend toute la place */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Doit être identique au background de .card-bg */
    z-index: 3;
    pointer-events: none;
    /* L'astuce est ici : on augmente la profondeur */
    transform: translateZ(0px) scale(1);
}

.card-xds-cosmos-stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url("../img/effects/stars_cosmos-BGgOUQd.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    mix-blend-mode: color-dodge;
    opacity: 0.54;
    filter: brightness(1.06) contrast(1.08) saturate(0.95);
    mask-image: radial-gradient(circle at 50% 55%, rgb(255 255 255 / 90%) 0%, rgba(0, 0, 0, 0.55) 52%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 55%, rgb(255 255 255 / 90%) 0%, rgba(0, 0, 0, 0.55) 52%, transparent 100%);
}

.content-top {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.507) 20%, transparent);
    margin: -20px;
    padding: 15px;
    z-index: 4
}

.content-bottom {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.692) 50%, transparent);
    margin: -20px;
    padding: 15px;
    z-index: 4;
}

.badge-custom {
    position: relative;
    background: transparent;
    border: .5px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 15px;
    font-size: 0.55rem;
    letter-spacing: 1px;
    margin-right: 5px;
    overflow: hidden;
    font-family: "Hanson";
}

.badge-custom::before {
    content: "";
    position: absolute;
    inset: 0;
    mix-blend-mode: overlay;
    z-index: -1;
}

.card-xds-desc { font-size: 0.65rem; margin: 10px 0; line-height: 1.2; font-family: 'Outfit', sans-serif; }
.card-xds-edition-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-xds-line-short {
    flex: 1 1 auto;
    width: auto;
    min-width: 20px;
    margin: 0;
}
.card-xds-edition-marker {
    margin-top: 0;
    text-align: left;
    font-size: 0.58rem;
    letter-spacing: 0.5px;
    opacity: 0.78;
    font-family: 'Roboto Mono', monospace;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ZOOM & FLIP OVERLAY */
.zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

.zoom-card-container {
    height: 72vh;
    aspect-ratio: 2/3;
    perspective: 2000px;
    transition: transform 0.1s ease-out;
    will-change: transform;
}

#card-zoom-overlay .zoom-card-container,
#card-zoom-overlay .zoom-card-container * {
    cursor: none;
}

/* Contrôles du zoom */
.zoom-controls {
    position: absolute;
    top: 20px;
    z-index: 10000;
}

/* Classe pour masquer les infos sur la carte en grand */
.zoom-card-container .card-xds-content {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.hide-ui .card-xds-content {
    opacity: 0;
}

.zoom-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform;
    transform: translateZ(0);
}

.zoom-card-inner.is-flipped { transform: rotateY(180deg); }

.zoom-card-front, .zoom-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    border-radius: 15px;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.25s ease;
}

/* On cible tout ce qui est dans la face avant de la carte agrandie */

/* Identifiant (> 0001) */
.zoom-card-front .card-xds-visual-id {
    font-size: 1rem;
}

/* Pseudo / Nom de la carte */
.zoom-card-front .card-xds-pseudo {
    font-size: 1.45rem;
    margin-top: 5px;
}

/* Tags (\MAGIQUE, etc.) */
.zoom-card-front .badge-custom {
    font-size: 0.6rem;
    padding: 4px 12px;
    border-radius: 20px;
}

/* Description */
.zoom-card-front .card-xds-desc {
    font-size: 0.72rem;
    line-height: 1.5;
    margin: 20px 0;
}

/* Épaisseur des lignes blanches */
.zoom-card-front .card-xds-line {
    border-top-width: 3px;
    margin: 0;
}

.zoom-card-front .card-xds-main {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: inherit;
}

.zoom-card-front .card-xds-content {
    padding: 30px;
}

.zoom-card-front .content-top,
.zoom-card-front .content-bottom {
    margin: -30px;
    padding: 30px;
}

/* On ajuste aussi le dégradé sombre en bas pour qu'il soit plus haut */
.zoom-card-front .content-bottom {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.507) 70%, transparent);

}

/* Modal desktop: +15% sur le contenu */
@media (min-width: 768px) {
    .zoom-card-front .card-xds-visual-id {
        font-size: 1.15rem;
    }
    .zoom-card-front .card-xds-pseudo {
        font-size: 1.6675rem;
    }
    .zoom-card-front .badge-custom {
        font-size: 0.69rem;
        padding: 5px 14px;
        border-radius: 23px;
    }
    .zoom-card-front .card-xds-desc {
        font-size: 0.828rem;
        margin: 23px 0;
    }
    .zoom-card-front .card-xds-line {
        border-top-width: 3.45px;
    }
    .zoom-card-front .card-xds-content {
        padding: 35px;
    }
    .zoom-card-front .content-top,
    .zoom-card-front .content-bottom {
        margin: -35px;
        padding: 35px;
    }
}

.zoom-card-inner.is-flipped .zoom-card-front {
    opacity: 0;
}

.zoom-card-back { transform: rotateY(180deg); background: #111; opacity: 0; }
.zoom-card-inner.is-flipped .zoom-card-back { opacity: 1; }
.zoom-card-back img { width: 100%; height: 100%; object-fit: cover; }

/* Reduce GPU spikes during flip */
.zoom-card-container.is-flipping .card-xds-holo-overlay,
.zoom-card-container.is-flipping .card-xds-shine {
    animation: none;
    filter: none;
    mix-blend-mode: normal;
    opacity: 0;
}

/* On s'assure que le contenu ne bloque pas les événements souris */
.card-xds-content, .card-xds-parallax-layer, .card-xds-shine, .card-xds-foil-mask {
    pointer-events: none;
}

#toggle-info {
    font-family: 'Roboto Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid rgba(255,255,255,0.5);
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transform: translateZ(0); /* Astuce GPU pour alléger le backdrop-filter */
    transition: all 0.3s;
}

#toggle-info:hover {
    background: white;
    color: black;
    box-shadow: 0 0 15px white;
}

.card-xds-holo-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: var(--holo-opacity, 0);
    mix-blend-mode: color-dodge;
    transition: opacity 0.25s ease, filter 0.25s ease;
    /* L'image est définie par défaut ou par rareté ci-dessous */
    background-size: 110% 110%;
    background-position: center;
    background-blend-mode: normal;
    filter: brightness(1.2) contrast(1.25) saturate(1.1);
    mask-image: var(--holo-mask, radial-gradient(circle at var(--holo-x, 50%) var(--holo-y, 50%), rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%));
    -webkit-mask-image: var(--holo-mask, radial-gradient(circle at var(--holo-x, 50%) var(--holo-y, 50%), rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%));
}

.card-xds-holo-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at var(--holo-x, 50%) var(--holo-y, 50%),
            rgba(255, 255, 255, 0.28) 0% 9%,
            rgba(255, 255, 255, 0.1) 10% 22%,
            transparent 38%
        ),
        var(--holo-rainbow),
        var(--holo-metal-rainbow);
    background-size: auto, 200% 100%, 260% 260%;
    background-position: center, 50% 50%, var(--holo-x, 50%) var(--holo-y, 50%);
    /* Overlay permet de colorer les étoiles blanches de la texture */
    mix-blend-mode: overlay;
    animation: holoGradient 9s linear infinite, holoMetalShift 6s ease-in-out infinite alternate;
}

@keyframes holoGradient {
    0% { background-position: center, 0% 50%, var(--holo-x, 50%) var(--holo-y, 50%); }
    100% { background-position: center, 200% 50%, var(--holo-x, 50%) var(--holo-y, 50%); }
}

@keyframes holoMetalShift {
    0% { filter: brightness(1.02) saturate(1.06); }
    100% { filter: brightness(1.2) saturate(1.18); }
}

/* 2. ACTIVATION UNIQUEMENT POUR LES RARETÉS SPÉCIFIQUES */
/* On cible les cartes qui ont la classe rarity-holo, rarity-sparkle, rarity-secret ou rarity-cosmos */
:is(.rarity-holo, .rarity-sparkle, .rarity-secret, .rarity-cosmos) .card-xds-main:hover .card-xds-holo-overlay,
:is(.rarity-holo, .rarity-sparkle, .rarity-secret, .rarity-cosmos) .zoom-card-front .card-xds-holo-overlay {
    opacity: var(--holo-opacity, 0.35);
}

/* Raretés spécifiques (Couleurs) */
.btn-check:checked + .btn-outline-info {
    background: linear-gradient(135deg, #b3ffab, #12fff7);
    border: none;
    color: #000;
}
.btn-check:checked + .btn-outline-warning {
    background: linear-gradient(135deg, #E0C3FC, #8EC5FC);
    border: none;
    color: #000;
}
.btn-check:checked + .btn-outline-danger {
    background: linear-gradient(135deg, #f5af19, #f12711);
    border: none;
    color: #fff;
}

/* Edition Logos Top Strip */
.edition-logo-item {
    transition: opacity 0.2s ease;
    cursor: pointer;
    opacity: 0.7;
}
.edition-logo-item:hover {
    opacity: 1;
}
.edition-logo-img {
    height: 120px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px #00000041);
}

/* Activation du glow au survol */
.card-xds-perspective:hover .card-xds-glow {
    opacity: 0.5;
}

/* Optimisation VRAM : alloue la mémoire uniquement au survol de la carte */
.card-xds-perspective:hover .card-xds-main {
    will-change: transform;
}

/* 3. VARIANTES DE TEXTURE PAR RARETÉ
   Base stack (desktop + mobile + modal):
   z-1 .card-xds-bg (base admin)
   z-2 .card-xds-holo-overlay/.card-xds-shine ou .card-xds-foil-mask (effet primaire)
   z-2 .card-xds-cosmos-stars (par-dessus foil, sous overlay)
   z-3 .card-xds-parallax-layer (overlay admin)
   z-4 .card-xds-content (infos)
   z-5 .rarity-secret .card-xds-main::after (light-prism, secret uniquement)
*/

/* SPARKLE : L'effet galaxie/paillettes (Anciennement par défaut) */
.rarity-sparkle .card-xds-holo-overlay {
    background-image: url("../img/effects/sparkles-7QY_ws_.webp");
}

/* SECRET : L'effet Stylish */
.rarity-secret .card-xds-holo-overlay {
    --holo-opacity: 0.3;
    background-image: url("../img/effects/monochrome-o18xjib.webp");
    background-size: 100% 100%;
    background-repeat: repeat;
    background-position: center;
    mix-blend-mode: color-dodge;
    filter: brightness(1.04) contrast(1.14) saturate(1.06) opacity(.3) grayscale(0.2) !important;
    transform-origin: center;
    will-change: transform;
    animation: secretSoftScale 12s ease-in-out infinite alternate;
    isolation: isolate;
}

.rarity-secret .card-xds-main::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background-image: url("../img/effects/light-prism-kLGxGio.png");
    background-size: 110% 110%;
    background-repeat: no-repeat;
    background-position: var(--prism-x, 50%) var(--prism-y, 50%);
    mix-blend-mode: screen;
    opacity: 0.36;
    transition: background-position 0.08s linear, opacity 0.2s ease;
}

.rarity-secret .card-xds-holo-overlay::before {
    content: none;
}
.rarity-secret .card-xds-holo-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(
            circle at var(--holo-x, 50%) var(--holo-y, 50%),
            rgba(255, 255, 255, 0.26) 0% 6%,
            rgba(255, 255, 255, 0.1) 7% 14%,
            rgba(255, 255, 255, 0.03) 15% 24%,
            transparent 34%
        ),
        var(--holo-rainbow);
    background-size: auto, 100% 100%;
    background-position: center, 50% 50%;
    opacity: 0.42;
    mix-blend-mode: color-dodge;
    animation: none;
}

:is(.rarity-secret) .card-xds-main:hover .card-xds-holo-overlay,
:is(.rarity-secret) .zoom-card-front .card-xds-holo-overlay {
    --holo-opacity: 0.38;
}

@keyframes secretSoftScale {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}



/* HOLO : texture image + reflets arc-en-ciel */
.rarity-holo .card-xds-holo-overlay {
    background-image: url("../img/effects/color_texture_gradient-zs3N_Fg.jpg");
    background-size: 110% 110%;
    background-position: center;
    mix-blend-mode: color-dodge;
    filter: brightness(1.08) contrast(1.24) saturate(1.08) hue-rotate(-6deg);
}
.rarity-holo .card-xds-holo-overlay::before {
    --angle : 45deg;
    --space: 18px;
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(var(--angle),
        hsla(283, 49%, 60%, 0.75) calc(var(--space) * 1),
        hsla(2, 74%, 59%, 0.75) calc(var(--space) * 2),
        hsla(53, 67%, 53%, 0.75) calc(var(--space) * 3),
        hsla(93, 56%, 52%, 0.75) calc(var(--space) * 4),
        hsla(176, 38%, 50%, 0.75) calc(var(--space) * 5),
        hsla(228, 100%, 77%, 0.75) calc(var(--space) * 6),
        hsla(283, 49%, 61%, 0.75) calc(var(--space) * 7)
        );
    background-size: 260% 260%;
    background-position: center;
    mix-blend-mode: color-dodge;
    opacity: 0.3;
    animation: holoMetalDrift 5.5s ease-in-out infinite alternate;
}
.rarity-holo .card-xds-holo-overlay::after {
    background: var(--holo-rainbow), var(--holo-metal-rainbow);
    background-size: 200% 100%, 260% 260%;
    background-position: 50% 50%, center;
    opacity: 0.34;
    mix-blend-mode: overlay;
}

@keyframes holoMetalDrift {
    0% { filter: brightness(1.01) saturate(1.04); }
    100% { filter: brightness(1.1) saturate(1.1); }
}

/* COSMOS : Galaxy + rainbow en color-dodge et color-burn */
.rarity-cosmos .card-xds-holo-overlay {
    background-image: url("../img/effects/galaxy-source-DOrjLkz.png"), url("../img/effects/cosmos-top-jxqSNBc.png");
    background-size: 118% 118%, 124% 124%;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-blend-mode: saturation, screen;
    filter: brightness(1.22) contrast(1.28) saturate(1.28);
}
.rarity-cosmos .card-xds-holo-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--holo-rainbow);
    background-size: 200% 100%;
    opacity: 0.35;
    animation: holoGradient 9s linear infinite;
}
.rarity-cosmos .card-xds-holo-overlay::after {
    opacity: 0.55;
}


/* Mobile Adjustments (iPhone 14 Pro Max & others) */
@media (max-width: 767.98px) {
    .card-xds-main {
        contain: paint;
    }

    /* 1. Grid Card Text Sizing for 2 columns */
    .card-xds-content {
        padding: 12px;
    }
    .content-top, .content-bottom {
        margin: -12px;
        padding: 12px;
    }
    .card-xds-pseudo {
        font-size: 0.94rem;
    }
    .card-xds-visual-id {
        font-size: 0.72rem;
    }
    .card-xds-desc {
        font-size: 0.64rem;
        line-height: 1.1;
        margin: 5px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limite à 2 lignes (~60 caractères) */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .badge-custom {
        font-size: 0.38rem;
        padding: 2px 6px;
    }

    /* 2. Modal Size Reduction */
    .zoom-card-container {
        height: 63vh; /* +15% vs 55vh for better readability */
    }
    .zoom-card-front .card-xds-content {
        padding: 18px;
    }
    .zoom-card-front .content-top,
    .zoom-card-front .content-bottom {
        margin: -18px;
        padding: 18px;
    }
    .zoom-card-front .card-xds-pseudo {
        font-size: 1.08rem;
    }
    .zoom-card-front .card-xds-visual-id {
        font-size: 0.92rem;
    }
    .zoom-card-front .badge-custom {
        font-size: 0.58rem;
    }
    .zoom-card-front .card-xds-desc {
        font-size: 0.64rem;
        margin: 10px 0;
    }

    /* Mobile: remove effects on grid cards (only keep in modal) */
    .game-grid .card-xds-shine,
    .game-grid .card-xds-holo-overlay {
        display: none;
    }

    /* Mobile fallback: avoid mix-blend-mode artifacts */
    .card-xds-shine {
        mix-blend-mode: normal;
        opacity: 0.3;
        background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
    }
    .card-xds-shine::before {
        opacity: 0.28;
    }
    .card-xds-holo-overlay,
    .rarity-cosmos .card-xds-holo-overlay {
        filter: brightness(1.1) contrast(1.2) saturate(1.1);
    }
    .rarity-cosmos .card-xds-holo-overlay {
        filter: brightness(1.2) contrast(1.24) saturate(1.24);
    }
    .rarity-secret .card-xds-holo-overlay {
        filter: brightness(1.02) contrast(1.1) saturate(1.05) opacity(.46);
    }
    .rarity-secret .card-xds-holo-overlay::after {
        opacity: 0.3;
    }
    .rarity-holo .card-xds-holo-overlay {
        filter: brightness(1.12) contrast(1.22) saturate(1.14);
    }
    /* Mobile: blend-mode fallback for zoom overlay */
    .zoom-card-front .card-xds-holo-overlay {
        opacity: 0.55;
        background-blend-mode: screen;
        filter: brightness(1.15) contrast(1.2) saturate(1.2);
    }
    .zoom-card-front .card-xds-holo-overlay::after {
        opacity: 0.55;
    }
    /* Mobile: reduce cosmos rainbow intensity */
    .rarity-cosmos .card-xds-holo-overlay::before,
    .rarity-cosmos .card-xds-holo-overlay::after {
        opacity: 0.45;
    }
    :is(.rarity-holo, .rarity-sparkle, .rarity-cosmos) .zoom-card-front .card-xds-holo-overlay {
        opacity: 0.55;
    }
}

/* Fallback when blend modes are unsupported or buggy */
@supports not (mix-blend-mode: screen) {
    .card-xds-shine,
    .card-xds-holo-overlay {
        mix-blend-mode: normal;
    }
    .card-xds-holo-overlay {
        filter: brightness(1.1) contrast(1.2) saturate(1.1);
    }
}


#cards-page .cards-marquee-host {
    position: relative;
}

#cards-page .cards-marquee-anchor {
    position: relative;
    height: 0;
}

#cards-page .cards-marquee-bridge {
    position: absolute;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    bottom: -6.6rem;
    z-index: 1;
    pointer-events: none;
}

#cards-page .cards-marquee-content {
    position: relative;
    z-index: 2;
}

#cards-page .box_alert_text {
    position: relative;
    z-index: 1;
}