/* ============================================================
   Cartes à collectionner — Ma collection (cave.php)
   ============================================================ */

/* Compteur global */
.coll-total { height: 8px; margin: -0.3rem 0 1.4rem; border-radius: 999px; background: #F1E8DD; overflow: hidden; }
.coll-total-bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #F3B26B, #D2691E); transition: width 0.6s ease; }

/* Grille de cartes */
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.2rem; }
@media (min-width: 1000px) { .coll-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; } }
.coll-grid .coll-card-name { font-size: 0.8rem; }

/* ---- Carte ---- */
/* --rx/--ry/--s/--mx/--my/--px/--py/--o sont pilotés par js/cards.js (attachTilt) */
.coll-card {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
    transition: box-shadow 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
}
.coll-card:hover { box-shadow: 0 16px 40px rgba(44, 24, 16, 0.25); }
.coll-card:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }

/* Face de la carte */
.coll-card-face {
    position: absolute; inset: 0;
    border-radius: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 0.8rem 0.6rem 1rem;
    overflow: hidden;
}

/* Dégradé de fond selon les couleurs de la carte */
.coll-card-face { background: linear-gradient(145deg, var(--card-from, #F3B26B), var(--card-to, #D2691E)); }

.coll-card { border: 2px solid rgba(255,255,255,0.35); }

/* Icône / emoji central */
.coll-card-icon {
    font-size: 2.8rem; line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
    z-index: 1;
}
.coll-card-icon img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2)); }

/* Nom de la carte */
.coll-card-name {
    font-size: 0.72rem; font-weight: 800; text-align: center;
    color: #FFFFFF; text-shadow: 0 1px 3px rgba(0,0,0,0.35);
    line-height: 1.2; z-index: 1;
    letter-spacing: 0.02em; text-transform: uppercase;
}

/* ---- Carte illustrée plein cadre (façon « Art Rare ») ---- */
/* Liseré aux couleurs de la carte autour de l'illustration, nom sur un bandeau sombre en bas */
.coll-card.has-art { --frame: 5px; --holo: 0.55; }
.coll-card.has-art .coll-card-face { padding: 0; }
.coll-card-art {
    position: absolute; inset: var(--frame);
    width: calc(100% - 2 * var(--frame)); height: calc(100% - 2 * var(--frame));
    object-fit: cover; border-radius: 11px;
    -webkit-user-drag: none;
}
.coll-card.has-art .coll-card-name {
    position: absolute; left: var(--frame); right: var(--frame); bottom: var(--frame);
    padding: 1.8rem 0.5rem 0.6rem;
    border-radius: 0 0 11px 11px;
    background: linear-gradient(180deg, transparent, rgba(20, 8, 4, 0.55) 40%, rgba(20, 8, 4, 0.88));
}
.coll-card.is-locked.has-art .coll-card-face { filter: none; }
.coll-card.is-locked .coll-card-art { filter: grayscale(1) brightness(0.42) blur(1.5px); }
.coll-card.is-locked.has-art .coll-card-name { color: rgba(255, 255, 255, 0.6); }

/* ---- Effet holographique façon cartes Pokémon ---- */
/* Calque arc-en-ciel qui glisse avec l'inclinaison (--px/--py) */
.coll-card-holo {
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; z-index: 2;
    background-image:
        repeating-linear-gradient(110deg,
            hsl(2, 100%, 73%) 0%, hsl(53, 100%, 69%) 5%, hsl(93, 100%, 69%) 10%,
            hsl(176, 100%, 76%) 15%, hsl(228, 100%, 74%) 20%, hsl(283, 100%, 73%) 25%,
            hsl(2, 100%, 73%) 30%),
        repeating-linear-gradient(-45deg,
            rgba(14, 21, 46, 0.5) 0%, rgba(143, 163, 163, 0.5) 4%, rgba(143, 193, 193, 0.5) 5%,
            rgba(162, 163, 163, 0.5) 6%, rgba(14, 21, 46, 0.5) 12%);
    background-size: 400% 400%, 300% 300%;
    background-position: var(--px, 50%) var(--py, 50%), var(--px, 50%) var(--py, 50%);
    background-blend-mode: overlay;
    mix-blend-mode: color-dodge;
    filter: brightness(0.7) contrast(1.4) saturate(1.1);
    opacity: calc(var(--o, 0) * var(--holo, 0.4));
}

/* Reflet lumineux qui suit le pointeur (--mx/--my) */
.coll-card-shine {
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; z-index: 3;
    background: radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.8) 10%,
        rgba(255, 255, 255, 0.55) 22%,
        rgba(0, 0, 0, 0.45) 90%);
    mix-blend-mode: overlay;
    opacity: calc(var(--o, 0) * 0.85);
}

/* Mouvements réduits : pas d'inclinaison, juste un léger reflet fixe au survol */
@media (prefers-reduced-motion: reduce) {
    .coll-card { transform: none; }
    .coll-card:hover .coll-card-shine { --o: 0.4; }
}

/* ---- Carte verrouillée ---- */
.coll-card.is-locked .coll-card-face {
    filter: grayscale(1) brightness(0.55);
}
.coll-card.is-locked .coll-card-lock {
    position: absolute; inset: 0; border-radius: inherit;
    display: flex; align-items: center; justify-content: center;
    z-index: 4;
}
.coll-card.is-locked .coll-card-holo, .coll-card.is-locked .coll-card-shine { display: none; }
.coll-card.is-locked .coll-card-lock i {
    font-size: 1.6rem; color: rgba(255,255,255,0.7);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.coll-card:not(.is-locked) .coll-card-lock { display: none; }

/* Progress sous la carte verrouillée */
.coll-card-progress {
    margin-top: 0.4rem;
    font-size: 0.68rem; color: var(--text-muted); text-align: center; line-height: 1.3;
}

/* ---- Modale carte en grand ---- */
.card-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(20, 8, 4, 0.82);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(6px);
    animation: card-fade-in 0.2s ease;
}
@keyframes card-fade-in { from { opacity: 0; } to { opacity: 1; } }

.card-modal {
    display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
    max-width: 340px; width: 100%;
    animation: card-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes card-pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* La carte en grand dans la modale : s'incline en suivant le pointeur sur tout l'écran */
.card-modal .coll-card {
    width: min(260px, 70vw);
    cursor: default;
    touch-action: none; /* au doigt, glisser sur la carte l'incline au lieu de faire défiler */
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.card-modal .coll-card .coll-card-icon { font-size: 4.2rem; }
.card-modal .coll-card .coll-card-icon img { width: 96px; height: 96px; }
.card-modal .coll-card .coll-card-name { font-size: 1rem; }
.card-modal .coll-card.has-art { --frame: 8px; }

.card-modal-info { text-align: center; color: #FBF9F7; }
.card-modal-info h3 { margin: 0 0 0.5rem; font-size: 1.3rem; font-weight: 800; }
.card-modal-info p  { margin: 0; font-size: 0.9rem; color: #D9C6B0; line-height: 1.6; }
.card-modal-info .card-modal-date { margin-top: 0.5rem; font-size: 0.78rem; color: #A8927C; }

.card-modal-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.card-modal-actions a, .card-modal-actions button {
    display: inline-flex; align-items: center; gap: 0.45rem;
    height: 42px; padding: 0 1.1rem; border-radius: 999px; border: 0;
    font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: opacity 0.15s;
}
.card-modal-actions a:hover, .card-modal-actions button:hover { opacity: 0.85; }
.card-modal-close { background: rgba(255,255,255,0.12); color: #FBF9F7; }
.card-modal-share { background: linear-gradient(135deg, #FFD66B, #E8A23A); color: #2C1810; }

/* Responsive */
@media (max-width: 640px) {
    .coll-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.9rem; }
    .coll-card-icon { font-size: 2.2rem; }
    .coll-card-name { font-size: 0.65rem; }
}

/* ============================================================
   Animation « Nouvelle carte débloquée » (js/cards-core.js, toutes les pages)
   Le dos de la carte arrive en tournoyant, éclair et étincelles, puis la carte se retourne.
   ============================================================ */
body.card-reveal-open { overflow: hidden; }

.card-reveal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem 1rem; overflow: hidden auto;
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--card-from) 45%, #140804) 0%, rgba(14, 6, 3, 0.95) 62%);
    animation: cr-fade 0.35s ease both;
}
.card-reveal.is-leaving { animation: cr-fade-out 0.28s ease forwards; }

/* Rayons de lumière qui tournent derrière la carte */
.card-reveal-rays {
    position: fixed; left: 50%; top: 42%;
    width: 170vmax; height: 170vmax; translate: -50% -50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 231, 168, 0.18) 0deg 7deg, transparent 7deg 18deg);
    -webkit-mask: radial-gradient(circle, #000 0%, transparent 45%);
            mask: radial-gradient(circle, #000 0%, transparent 45%);
    pointer-events: none;
    animation: cr-fade 0.8s 1.15s both, cr-spin 40s linear infinite;
}

.card-reveal-stage {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
    width: 100%; max-width: 380px; margin: auto; text-align: center;
}
.card-reveal-kicker {
    margin: 0;
    font-size: 0.85rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: #FFD66B; text-shadow: 0 0 18px rgba(255, 214, 107, 0.6);
    animation: cr-drop 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Carte : arrivée en tournoyant (dos visible), petite pause, puis retournement */
.card-reveal-flip {
    position: relative;
    width: min(250px, 62vw); aspect-ratio: 3 / 4;
    transform-style: preserve-3d;
    animation: cr-fly 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.card-reveal-back, .card-reveal-front {
    position: absolute; inset: 0;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.card-reveal-front { transform: rotateY(180deg); }
/* Pendant la rotation, chaque face n'est visible que de son côté (la carte a sa propre 3D : on l'aplatit
   et on bascule les faces au moment où la carte est de profil, à 84 % de cr-fly) */
.card-reveal:not(.is-revealed) .card-reveal-front .coll-card { transform: none; transform-style: flat; }
.card-reveal-front { animation: cr-face-in 1.6s step-end both; }
.card-reveal-back  { animation: cr-face-out 1.6s step-end both; }
.card-reveal-back {
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px; border: 7px solid #E8A23A;
    background:
        repeating-linear-gradient(45deg, rgba(243, 178, 107, 0.08) 0 10px, transparent 10px 20px),
        radial-gradient(circle at 50% 40%, #8B4513, #2C1810 72%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 231, 168, 0.4);
}
.card-reveal-back span {
    display: flex; align-items: center; justify-content: center;
    width: 42%; aspect-ratio: 1; border-radius: 50%;
    border: 3px solid #F3B26B; color: #F3B26B; font-size: 2.6rem;
    box-shadow: 0 0 30px rgba(243, 178, 107, 0.45), inset 0 0 20px rgba(243, 178, 107, 0.25);
}
.card-reveal-front .coll-card {
    width: 100%; cursor: default; touch-action: none;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 70px color-mix(in srgb, var(--card-from) 55%, transparent);
}
.card-reveal-front .coll-card.has-art { --frame: 9px; }
.card-reveal-front .coll-card-name { font-size: 1.05rem; }
.card-reveal-front .coll-card-icon { font-size: 4.2rem; }
.card-reveal-front .coll-card-icon img { width: 96px; height: 96px; }

/* Une fois retournée, la carte redevient « à plat » pour que l'inclinaison au pointeur fonctionne */
.card-reveal.is-revealed .card-reveal-flip { animation: none; transform: none; }
.card-reveal.is-revealed .card-reveal-front { transform: none; }
.card-reveal.is-revealed .card-reveal-back { display: none; }

/* Éclair et étincelles au moment du retournement */
.card-reveal-sparks { position: absolute; inset: 0; pointer-events: none; transform: translateZ(1px); }
.card-reveal-sparks::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 320%; aspect-ratio: 1; translate: -50% -50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 231, 168, 0.5) 18%, transparent 45%);
    animation: cr-flash 0.8s 1.2s ease-out both;
}
.card-reveal-sparks i {
    position: absolute; left: 50%; top: 50%;
    width: var(--z); height: var(--z); margin: calc(var(--z) / -2);
    border-radius: 50%;
    background: #FFF3C4; box-shadow: 0 0 10px 2px #FFD66B;
    animation: cr-spark 1.1s calc(1.25s + var(--t)) cubic-bezier(0.1, 0.8, 0.3, 1) both;
}

.card-reveal-info { color: #FBF9F7; animation: cr-up 0.5s 1.55s ease-out both; }
.card-reveal-info h2 { margin: 0 0 0.4rem; font-size: 1.5rem; font-weight: 800; color: #FFFFFF; }
.card-reveal-info p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: #E8D6C2; }
.card-reveal-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; margin-top: 1.2rem; }
.card-reveal-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 1.4rem; border-radius: 999px; border: 0;
    font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; text-decoration: none;
    background: linear-gradient(135deg, #FFD66B, #E8A23A); color: #2C1810;
    box-shadow: 0 8px 24px rgba(232, 162, 58, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}
.card-reveal-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(232, 162, 58, 0.45); }
.card-reveal-btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.card-reveal-btn.is-ghost { background: transparent; color: #FBF9F7; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); }

@keyframes cr-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes cr-face-in  { 0% { visibility: hidden; } 84% { visibility: visible; } }
@keyframes cr-face-out { 0% { visibility: visible; } 84% { visibility: hidden; } }
@keyframes cr-fade-out { to { opacity: 0; } }
@keyframes cr-spin     { to { rotate: 360deg; } }
@keyframes cr-drop     { from { opacity: 0; transform: translateY(-16px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes cr-up       { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cr-fly {
    0%   { opacity: 0; transform: translateY(55vh) scale(0.25) rotateY(0deg) rotateZ(-12deg); }
    12%  { opacity: 1; }
    55%  { transform: translateY(0) scale(1) rotateY(720deg) rotateZ(0deg); }
    68%  { transform: scale(1.06) rotateY(720deg); }
    100% { transform: scale(1) rotateY(900deg); }
}
@keyframes cr-flash { 0% { opacity: 0; scale: 0.3; } 30% { opacity: 1; } 100% { opacity: 0; scale: 1.15; } }
@keyframes cr-spark {
    0%   { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(1); }
    10%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(0.2); }
}

/* Mouvements réduits : simple fondu, carte déjà retournée */
.card-reveal.is-calm *, .card-reveal.is-calm *::before { animation: none !important; }
.card-reveal.is-calm .card-reveal-flip, .card-reveal.is-calm .card-reveal-front { transform: none; }
.card-reveal.is-calm .card-reveal-back, .card-reveal.is-calm .card-reveal-sparks { display: none; }

@media (max-width: 640px) {
    .card-reveal-info h2 { font-size: 1.3rem; }
    .card-reveal-info p { font-size: 0.9rem; }
}