@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700&family=Raleway:wght@400;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* Mécanique avant: `.font-raleway` utilisait Raleway regular (400). */
.font-raleway {
    font-family: 'Raleway', sans-serif;
    font-weight: 700; /* FORCE: bold pour les titres décoratifs */
}

.font-poppins {
    font-family: 'Poppins', sans-serif;
}

/* SEEYOU Branding Component */
.seeyou-brand {
    display: inline-flex;
    align-items: center;
}
.seeyou-brand .seeyou-text {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 1.125rem; /* 18px */
    letter-spacing: 0.02em;
}
.seeyou-logo-img {
    height: 1.125rem; /* 18px */
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

/* Variant for auth page (large) */
.seeyou-brand--auth .seeyou-text {
    font-size: 3rem;
    line-height: 1;
}
.seeyou-brand--auth .seeyou-logo-img {
    height: 3rem;
}

/* SEEYOO combined logo - auth variant */
.seeyoo-logo-img.auth-logo {
    height: 3.5rem; /* larger for auth */
    width: auto;
    display: block;
}

.force-white {
    filter: grayscale(1) brightness(10);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Animations */
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes popIn {
    0% { transform: scale(0.9); opacity: 0; }
    70% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes buttonPulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.92); }
    100% { transform: scale(1); }
}

@keyframes buttonPush {
    0% { transform: scale(1); }
    50% { transform: scale(0.88); }
    100% { transform: scale(1); }
}

@keyframes buttonGlow {
    0% { box-shadow: 0 0 0 0 currentColor; }
    70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

@keyframes buttonGlowBlue {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.8); }
    70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

@keyframes buttonGlowRed {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes bubbleBounce {
    0% { 
        transform: scale(0);
        opacity: 1;
        transform-origin: top right;
    }
    50% { 
        transform: scale(1.08);
        transform-origin: top right;
    }
    70% { 
        transform: scale(0.99);
        transform-origin: top right;
    }
    100% { 
        transform: scale(1);
        opacity: 1;
        transform-origin: top right;
    }
}

.cassiopee-bubble {
    width: 340px;
    transform-origin: top right;
    animation: bubbleBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important;
    transition: opacity 0.3s ease-out;
}

.cassiopee-bubble.hidden {
    opacity: 0;
    pointer-events: none;
}

.cassiopee-bubble > div {
    background: linear-gradient(135deg, #3b82f6 0%, #6d28d9 100%);
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.cassiopee-bubble h2,
.cassiopee-bubble p {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal !important;
}

.cassiopee-bubble.animate-in {
    animation: bubbleBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important;
}

.pop-in {
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

.action-btn {
    transition: color 0.3s ease-out, background-color 0.3s ease-out;
}

.action-btn:active,
.action-btn:focus,
.action-btn:focus-visible {
    color: rgb(107, 114, 128) !important;
    outline: none !important;
}

.action-btn[data-action="dislike"]:active,
.action-btn[data-action="dislike"]:focus {
    color: rgb(107, 114, 128) !important;
}

.action-btn[data-action="like"]:active,
.action-btn[data-action="like"]:focus {
    color: rgb(107, 114, 128) !important;
}

.button-click {
    animation: buttonPush 0.3s ease-out !important;
}

.button-glow-like {
    animation: buttonGlowBlue 0.6s ease-out !important;
}

.button-glow-dislike {
    animation: buttonGlowRed 0.6s ease-out !important;
}

.button-bg-like {
    background-color: rgb(59, 130, 246) !important;
    transition: background-color 0.3s ease-out !important;
}

.button-bg-dislike {
    background-color: rgb(239, 68, 68) !important;
    transition: background-color 0.3s ease-out !important;
}

.button-text-white i,
.button-text-white {
    color: rgb(255, 255, 255) !important;
}

.chat-bubble {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: 1.25rem;
    position: relative;
    word-wrap: break-word;
}

.chat-bubble.sent {
    background: linear-gradient(135deg, #3b82f6, #9333ea);
    color: white;
    border-bottom-right-radius: 0.25rem;
    margin-left: auto;
}

.chat-bubble.received {
    background-color: #f3f4f6;
    color: #1f2937;
    border-bottom-left-radius: 0.25rem;
    margin-right: auto;
}

/* Card Stack Styles */
.profile-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    background-color: white;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: grab;
}

.profile-card:active {
    cursor: grabbing;
}

.profile-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-card .info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    padding: 2rem 1.5rem 1.5rem;
    color: white;
}

/* Map Styles */
.leaflet-container {
    background: #f8fafc;
}

/* GPS overlay while waiting for precise position */
.leaflet-container.blurred {
    filter: blur(6px) brightness(0.88);
    transition: filter 0.25s ease;
}

/* Allow blurring the map but not the title overlay above it */
#meetings-heatmap-div.blurred {
    filter: blur(6px) brightness(0.88);
    transition: filter 0.6s ease;
}

.map-gps-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background: rgba(255,255,255,0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none; /* keep overlay non-blocking for map gestures; spinner itself handles pointer-events */
    opacity: 1;
    visibility: visible;
    /* Use 2s for opacity transitions so both show and hide are smooth (hide duration requirement) */
    transition: opacity 2s ease;
}

/* When hidden, fade opacity to 0; JS will set visibility:hidden after the fade completes. */
.map-gps-overlay.overlay-hidden {
    opacity: 0;
    pointer-events: none;
}

.gps-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
    background: transparent; /* no white background per request */
    border-radius: 12px;
    padding: 0.2rem 0.2rem; /* smaller padding so logo feels integrated */
    box-shadow: none;
}

/* Logo spinner */
.gps-spinner-logo {
    width: 56px; /* increased size */
    height: 56px;
    display: block;
    animation: gps-spin 1s linear infinite;
}

/* legacy spinner removed; replaced by logo */
/* .gps-spinner-icon removed */

.gps-spinner-text {
    font-size: 0.95rem;
    color: #111827;
    font-weight: 600;
    margin-top: 4px;
}

/* Icon-only mode for overlay (hide text) */
.gps-spinner.icon-only {
    padding: 0.2rem;
}
.gps-spinner.icon-only .gps-spinner-text { display: none; }

@keyframes gps-spin {
    to { transform: rotate(360deg); }
}

/* Heatmap overlay: full map blur + centered spinning logo */
.map-heatmap-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: auto; /* block interactions while loading */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.map-heatmap-overlay.overlay-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.heatmap-spinner {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.heatmap-spinner-logo {
    width: 88px;
    height: 88px;
    display: block;
    animation: gps-spin 1s linear infinite;
}

/* Keep the old pill rule as fallback (unused) */
.map-heatmap-loader { display: none; }

/* Scanner Button Styles */
#scanner-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scanner-button {
    width: 160px; 
    height: 160px; 
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-1) 45%, var(--color-2) 100%);
    --color-1: #7C3AED;
    --color-2: #3B82F6;
    color: white; 
    font-weight: bold; 
    font-size: 1.2rem;
    border: 8px solid white;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(255, 255, 255, 0.5);
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center;
    cursor: pointer; 
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 1s ease; 
    z-index: 10;
    flex-direction: column;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    touch-action: manipulation; /* Disable double-tap zoom */
}

#scanner-button:active { 
    transform: scale(0.95); 
}

#scanner-container.is-scanning {
    animation: rotate-scan 4s linear infinite;
}

#scanner-container.is-resetting {
    transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rotate-scan {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#scanner-container.is-scanning #scanner-button {
    animation: pulse-scan 1s ease-in-out infinite;
}

@keyframes pulse-scan {
    0% { transform: scale(0.95); }
    60% { transform: scale(1); }
    85% { transform: scale(1.15); }
    100% { transform: scale(0.95); }
}

/* Wave Pairs - Dynamic JS Injection */
.scanner-wave-pair {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

/* Scanner Step Colors */
#scanner-button.step-0 {
    --color-1: #7C3AED;
    --color-2: #3B82F6;
}

#scanner-button.step-1 {
    --color-1: #10B981;
    --color-2: #14B8A6;
}

#scanner-button.step-2 {
    --color-1: #F0F0F0;
    --color-2: #3B82F6;
}

#scanner-button.step-3 {
    --color-1: #A855F7;
    --color-2: #EC4899;
}

#scanner-button.step-4 {
    --color-1: #3B82F6;
    --color-2: #7C3AED;
}

/* GPS Accuracy Border Colors */
#scanner-button.gps-high-accuracy {
    border-color: #86EFAC; /* Vert pâle */
}

#scanner-button.gps-low-accuracy {
    border-color: #FBBD8E; /* Orange pâle */
}

#scanner-button.gps-no-accuracy {
    border-color: #FCA5A5; /* Rouge pâle */
}

.scanner-wave-pair::before, 
.scanner-wave-pair::after {
    content: ''; 
    position: absolute; 
    top: 50%; 
    width: 160px; 
    height: 160px; 
    border-radius: 50%;
    background-color: transparent; 
    border-width: 4px;
    border-style: solid;
    transform: translate(-50%, -50%) scale(0.7); 
    opacity: 0;
}

.scanner-wave-pair::before {
    left: 35%;
    border-color: #7C3AED;
}

.scanner-wave-pair::after { 
    left: 65%;
    border-color: #3B82F6;
}

/* Animation triggered by JS adding the class */
.scanner-wave-pair.animate::before,
.scanner-wave-pair.animate::after {
    animation: scan-wave 3s ease-out forwards;
}

@keyframes scan-wave {
    0% { 
        transform: translate(-50%, -50%) scale(0.7); 
        opacity: 1;
        filter: blur(0px);
    }
    30% {
        filter: blur(0px);
    }
    75% {
       opacity: 0;
    }
    100% { 
        transform: translate(-50%, -50%) scale(3.5); 
        opacity: 0;
        filter: blur(8px);
    }
}

/* Swiper / Tinder Cards */
.swipe-card {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    will-change: transform;
}
.swipe-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.swipe-card .card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1rem 1rem;
    color: white;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 20%, transparent);
    pointer-events: none;
}
.swipe-card .card-info h3 {
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* Dislike Particle Explosion Effect */
.dislike-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
}

/* Overlays "LIKE" et "NOPE" */
.swipe-overlay {
    position: absolute;
    top: 2rem;
    font-size: 3rem;
    font-weight: bold;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    border: 4px solid;
    opacity: 0;
    transform: rotate(0deg);
    pointer-events: none;
    z-index: 10;
}
#like-overlay {
    color: #34d399; /* Vert */
    right: 1rem;
    transform: rotate(15deg);
}
#nope-overlay {
    color: #ef4444; /* Rouge */
    left: 1rem;
    transform: rotate(-15deg);
}

/* Grid / Meeting Cards */

/* ----------------------------------------------
 * Generated by Animista on 2026-1-11 16:19:34
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shadow-pop-br
 * ----------------------------------------
 */
@-webkit-keyframes shadow-pop-br {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
            box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
    -webkit-transform: translateX(-8px) translateY(-8px);
            transform: translateX(-8px) translateY(-8px);
  }
}
@keyframes shadow-pop-br {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
            box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
    -webkit-transform: translateX(-8px) translateY(-8px);
            transform: translateX(-8px) translateY(-8px);
  }
}

.user-card-meeting {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* Lift + Shadow hover replaced by shadow-pop-br animation */
    transition: box-shadow 200ms;
    transform-origin: center;
    will-change: transform, box-shadow;
}
.user-card-meeting:hover,
.user-card-meeting:focus-visible,
.user-card-meeting:focus-within {
    animation: shadow-pop-br 220ms cubic-bezier(.2,.9,.2,1) forwards;
}
@media (prefers-reduced-motion: reduce) {
    .user-card-meeting, .user-card-meeting * {
        transition: none !important;
        animation: none !important;
    }
}
.user-card-meeting img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Matches scroller: allow shadows to be visible at edges */
#matches-grid {
    /* keep horizontal scroll, but allow vertical overflow so shadows aren't clipped */
    overflow-x: auto;
    overflow-y: visible;
    /* small horizontal padding so first/last card shadows are visible */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* add a tiny top padding to leave room for upward shadow from animation */
    padding-top: 0.5rem;
}
#matches-grid .user-card-meeting {
    /* ensure the card stacking context allows shadow to render above neighbors */
    position: relative;
    z-index: 0;
}
#matches-grid .user-card-meeting:hover,
#matches-grid .user-card-meeting:focus-within {
    z-index: 5; /* bring hovered card above neighbors so its shadow is visible */
}
.user-card-meeting .card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 30%, transparent);
    color: white;
    padding: 12px 4px 4px 4px;
    text-align: center;
    pointer-events: none;
}
.user-card-meeting .card-info p {
    margin: 0;
    padding: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    line-height: 1.2;
}

/* Result Cards Animation */
@keyframes scaleInUp {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.search-result-card {
    opacity: 0;
    animation: scaleInUp 0.4s ease-out forwards;
}

/* Reconsider Button */
.user-card-meeting .reconsider-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 50%;
    padding: 4px;
    display: flex;
    cursor: pointer;
    transition: transform 0.2s;
}
.user-card-meeting .reconsider-btn:hover {
    transform: scale(1.1);
}

/* Match Animation Styles */
.match-text {
    font-family: 'Raleway', sans-serif;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 12px #3b82f6, 0 0 24px #3b82f6;
}

.match-photo {
    opacity: 0;
    transform: scale(0);
}

#match-animation-overlay.animate #match-user-1 {
    animation: slide-in-from-left 0.8s 0.3s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#match-animation-overlay.animate #match-user-2 {
    animation: slide-in-from-right 0.8s 0.3s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slide-in-from-left {
    from {
        transform: translateX(-150%) scale(0.7);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1.5);
        opacity: 1;
    }
}

@keyframes slide-in-from-right {
    from {
        transform: translateX(150%) scale(0.7);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1.5);
        opacity: 1;
    }
}

/* Classe qui déclenche l'animation d'apparition */
#match-animation-content.animate-match {
    /* L'animation "scale-in" dure 0.5s, puis "glow" commence après 0.3s et dure 2s */
    animation: scale-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, 
               glow 2s 0.3s ease-in-out forwards;
}

/* Emoji pouce animé (apparaît en tombant et rebondissant entre les photos) */
#match-thumb.match-thumb {
    position: fixed;
    left: 50%;
    top: -20%; /* start above viewport */
    transform: translate(-50%, -50%) scale(1);
    font-size: 10vw;
    line-height: 1;
    z-index: 10010; /* au-dessus de l'overlay */
    pointer-events: none;
    opacity: 0;
    will-change: top, transform, opacity;
    text-shadow: 0 6px 12px rgba(0,0,0,0.45);
}

/* Classe utilitaire si on veut lancer une animation CSS en fallback */
#match-thumb.match-thumb.animate-thumb {
    animation: thumb-drop 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes thumb-drop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(7) rotate(0deg); animation-timing-function: ease-in; }
    38% { opacity: 1; transform: translate(-50%, -50%) scale(2.5) rotate(0deg); animation-timing-function: ease-out; }
    60% { opacity: 1; transform: translate(-50%, -50%) scale(3) rotate(5deg); animation-timing-function: ease-in; }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(2.5) rotate(10deg); animation-timing-function: ease-out; }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(2) rotate(10deg); animation-timing-function: ease-out; }
}

/* Animation 1 : Le texte grossit et apparaît */
@keyframes scale-in {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animation 2 : La lueur du texte palpite pour un effet dynamique */
@keyframes glow {
    0%, 100% {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 12px #3b82f6, 0 0 24px #3b82f6;
    }
    50% {
        text-shadow: 0 0 16px rgba(255, 255, 255, 0.5), 0 0 24px #60a5fa, 0 0 48px #60a5fa;
    }
}

/* Range Slider Styling */
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #9333ea; /* purple-600 */
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 30;
    position: relative;
}

.range-slider::-moz-range-thumb {
    pointer-events: auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #9333ea;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 30;
    position: relative;
}

/* Remove default focus outline */
.range-slider:focus {
    outline: none;
}

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* Profile Gallery Grid */
.gallery-square-container {
    width: 100%;
    padding-top: 100%; /* Force 1:1 Aspect Ratio */
    position: relative;
    background-color: #f3f4f6;
    /* overflow: hidden; REMOVED to allow overlay to stick out */
}

/* Matched state: apply blue inset glow to the profile page (overlay above content) */
.matched-profile {
    position: relative;
}

.matched-profile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 30; /* above page-profile content */
    pointer-events: none;
    box-shadow: inset 0 0 30px 8px rgb(59 130 246 / 70%);
    transition: box-shadow 0.3s ease, opacity 0.25s ease;
}

.profile-gallery-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    gap: 0;
    overflow: hidden; /* Double check to prevent overflow */
    z-index: 0; /* keep images below overlays */
}

.profile-gallery-grid img {
    z-index: 0;
}

.profile-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
    min-width: 0; /* Prevent grid blowout */
    min-height: 0; /* Prevent grid blowout */
}

/* Layouts */
.gallery-1 { 
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr;
}
.gallery-2 { 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr;
}
.gallery-3 { 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
}
.gallery-3 img:nth-child(1) { grid-column: 1; grid-row: 1; }
.gallery-3 img:nth-child(2) { grid-column: 1; grid-row: 2; }
.gallery-3 img:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }

.gallery-4 { 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
}

.gallery-5 { 
    grid-template-columns: repeat(6, 1fr); 
    grid-template-rows: 1fr 1fr; 
}
.gallery-5 img:nth-child(1) { grid-column: 1 / span 3; grid-row: 1; }
.gallery-5 img:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; }
.gallery-5 img:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
.gallery-5 img:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; }
.gallery-5 img:nth-child(5) { grid-column: 5 / span 2; grid-row: 2; }

.gallery-6 { 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
}

.gallery-7 {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.gallery-7 img:nth-child(1) { grid-column: 1 / span 3; grid-row: 1; }
.gallery-7 img:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; }
.gallery-7 img:nth-child(3) { grid-column: 1 / span 3; grid-row: 2; }
.gallery-7 img:nth-child(4) { grid-column: 4 / span 3; grid-row: 2; }
.gallery-7 img:nth-child(5) { grid-column: 1 / span 2; grid-row: 3; }
.gallery-7 img:nth-child(6) { grid-column: 3 / span 2; grid-row: 3; }
.gallery-7 img:nth-child(7) { grid-column: 5 / span 2; grid-row: 3; }

.gallery-8 { 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
}

.gallery-9 { 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr; 
}

/* Lightbox Animation */
#lightbox-modal {
    background-color: rgba(0, 0, 0, 0); /* Transparent background */
    backdrop-filter: blur(5px);
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

#lightbox-image {
    position: fixed;
    z-index: 2001;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center;
    border-radius: 12px; /* Rounded corners */
}

#lightbox-modal.closing {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    pointer-events: none;
}

/* Distinctive Signs Drawer Styling */
#distinctive-signs-drawer select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

#distinctive-signs-drawer select:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

#distinctive-signs-btn {
    animation: buttonPush 0.3s ease-out;
}

#distinctive-signs-btn:active {
    animation: buttonPush 0.3s ease-out;
}

/* Distinctive Signs Filter Animation */
#distinctive-signs-filters {
    max-height: 0;
    opacity: 0;
    padding: 0 1rem;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

#distinctive-signs-filters.expanded {
    max-height: 3000px;
    opacity: 1;
    padding: 1rem;
}

#distinctive-signs-caret {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#distinctive-signs-caret.rotated {
    transform: rotate(180deg);
}


/* Hexagon Badge Styles */
.hexagon-wrapper {
    position: relative;
    width: 80px;
    height: 92px; /* Aspect ratio for hexagon */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.hexagon-wrapper:active {
    transform: scale(0.95);
}

.hexagon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e5e7eb; /* Gray-200 default locked */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.hexagon-inner {
    width: 90%;
    height: 90%;
    background-color: #f3f4f6; /* Gray-100 */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Badge Levels */
.badge-bronze .hexagon {
    background: linear-gradient(135deg, #cd7f32, #8b4513);
}
.badge-bronze .hexagon-inner {
    background: linear-gradient(135deg, #fff, #f0e6dc);
    color: #8b4513;
}

.badge-silver .hexagon {
    background: linear-gradient(135deg, #e0e0e0, #9e9e9e);
}
.badge-silver .hexagon-inner {
    background: linear-gradient(135deg, #fff, #f5f5f5);
    color: #616161;
}

.badge-gold .hexagon {
    background: linear-gradient(135deg, #ffd700, #b8860b);
}
.badge-gold .hexagon-inner {
    background: linear-gradient(135deg, #fff, #fff8e1);
    color: #b8860b;
}

.badge-locked .hexagon {
    background: #d1d5db;
}
.badge-locked .hexagon-inner {
    background: #f3f4f6;
    color: #9ca3af;
}

.badge-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.badge-label {
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
}

/* Custom Gradient for Distinctive Signs Button (matching Scan Button) */
.bg-gradient-scan {
    background: linear-gradient(135deg, #7C3AED 45%, #3B82F6 100%);
}

/* ============================================ */
/* CASSIOPÉE IA CHAT STYLES */
/* ============================================ */

/* Chat Modal */
#cassiopee-modal {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { 
        opacity: 0;
    }
    to { 
        opacity: 1;
    }
}

/* Messages Container */
#cassiopee-messages {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Message Bubble */
.cassiopee-message {
    display: flex;
    gap: 0.5rem;
    animation: slideInUp 0.3s ease-out;
    width: 100%;
}

.cassiopee-message.user {
    justify-content: flex-end;
}

.cassiopee-message.cassiopee {
    justify-content: flex-start;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-bubble {
    max-width: none;
    min-width: 50px;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.cassiopee-message.user .message-bubble {
    background: linear-gradient(135deg, #7C3AED, #3B82F6);
    color: white;
    border-bottom-right-radius: 0.25rem;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.cassiopee-message.cassiopee .message-bubble {
    background: #e5e7eb;
    color: #1f2937;
    border-bottom-left-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Message Avatar */
.cassiopee-message.cassiopee .message-avatar,
.cassiopee-message.loading .message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* background: linear-gradient(135deg, #7C3AED, #3B82F6); Removed background for image */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden; /* Ensure image stays in circle */
}

/* Loading Indicator in Messages */
.cassiopee-message.loading .message-bubble {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}

.loading-dots {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.loading-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #7C3AED;
    animation: bounce 1.4s infinite;
}

.loading-dot:nth-child(1) { animation-delay: 0s; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 80%, 100% { opacity: 0.5; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-8px); }
}

/* Input Focus Effects */
#cassiopee-input:focus {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Send Button Effects */
#cassiopee-send-btn {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cassiopee-send-btn:active {
    transform: scale(0.95);
}

#cassiopee-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
    #cassiopee-modal .cassiopee-message.user {
        justify-content: flex-end;
    }
    
    #cassiopee-modal .cassiopee-message.cassiopee {
        justify-content: flex-start;
    }
}

/* Error Message */
.cassiopee-error {
    color: #dc2626;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    background: #fee2e2;
    border-left: 3px solid #dc2626;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Success Message */
.cassiopee-success {
    color: #059669;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    background: #d1fae5;
    border-left: 3px solid #059669;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Action Button in Chat */
.cassiopee-action-button {
    display: inline-block;
    background: linear-gradient(135deg, #7C3AED, #3B82F6);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    margin: 0.25rem;
}

.cassiopee-action-button:hover {
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
}

.cassiopee-action-button:active {
    transform: translateY(0);
}

/* History card seen state */
.history-seen {
    opacity: 0.5;
    filter: grayscale(50%);
}

/* Scanner Button Enhanced Styling */
.nav-btn-scanner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    flex: 1;
    transition: transform 0.2s ease;
}

.nav-btn-scanner .scanner-btn-wrapper {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C3AED 0%, #3B82F6 100%);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
    margin-top: 0;
    position: relative;
    transition: all 0.2s ease;
    color: white;
    transform: translateY(0);
    overflow: visible;
}

.nav-btn-scanner .scanner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nav-btn-scanner .scanner-logo {
    transition: transform 0.3s ease;
    transform: translateY(8px);
}

.nav-btn-scanner.active .scanner-logo {
    transform: translateY(-1px);
}

.nav-btn-scanner.active .scanner-btn-wrapper {
    width: 70px;
    height: 70px;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
    margin-top: 0;
    transform: translateY(0);
}

.nav-btn-scanner:hover .scanner-btn-wrapper {
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.45);
    transform: scale(1.05) translateY(0);
}

.nav-btn-scanner:not(.active) .scanner-btn-wrapper {
    opacity: 1;
}

.nav-btn-scanner .scanner-text {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.nav-btn-scanner.active .scanner-text {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.nav-btn-scanner.active span {
    color: white;
}

.nav-btn-scanner:not(.active) span {
    color: rgba(255, 255, 255, 0.6);
}

.nav-btn-scanner span {
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: color 0.2s ease;
}

/* Distinctive Signs Button Position */
#toggle-distinctive-signs-filter {
    transform: translateY(-10px);
}

/* Hide last scan info */
#last-scan-info {
    display: none;
}

/* ========== ANIMATED SCANNER BACKGROUND ========== */

/* Container for animated background */
.animated-bg-container {
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(124, 58, 237, 0.05) 40%, rgba(59, 130, 246, 0.05) 60%, #FFFFFF 100%);
    z-index: 0;
    overflow: visible;
    position: absolute;
    inset: 0;
}

/* Inner shadow overlay using pseudo-element specifically for white edges */
.animated-bg-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* White fade at top (10%) and bottom (10%) to ensure clean edges */
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 255, 255, 0) 15%, 
        rgba(255, 255, 255, 0) 85%, 
        rgba(255, 255, 255, 1) 100%
    );
    z-index: 5; /* Above bubbles */
}

/* Floating bubbles - JS Driven Transitions */
.floating-bubble {
    position: absolute;
    border-radius: 50%;
    /* Default Purple */
    background: radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.25), rgba(124, 58, 237, 0.05));
    pointer-events: none;
    will-change: transform, opacity, top, left;
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.15);
    
    /* Smooth transition for top/left changes */
    transition: top var(--move-duration, 15s) ease-in-out, left var(--move-duration, 15s) ease-in-out;
}

.floating-bubble.bubble-1 {
    width: 120px;
    height: 120px;
    /* Initial position set by JS */
}

.floating-bubble.bubble-2 {
    width: 80px;
    height: 80px;
    /* Blue */
    background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.05));
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.2);
}

.floating-bubble.bubble-3 {
    width: 150px;
    height: 150px;
    /* Purple Light */
    background: radial-gradient(circle at 30% 30%, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.04));
    opacity: 0.4;
    box-shadow: 0 0 35px rgba(168, 85, 247, 0.15);
}

.floating-bubble.bubble-4 {
    width: 100px;
    height: 100px;
    /* Blue-Purple Mix */
    background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.25), rgba(99, 102, 241, 0.04));
    box-shadow: 0 0 28px rgba(99, 102, 241, 0.18);
}

.floating-bubble.bubble-5 {
    width: 90px;
    height: 90px;
    /* Purple */
    background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.04));
    box-shadow: 0 0 26px rgba(139, 92, 246, 0.18);
}

.floating-bubble.bubble-6 {
    width: 60px;
    height: 60px;
    /* Light Blue */
    background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.25), rgba(56, 189, 248, 0.05));
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.2);
}

.floating-bubble.bubble-7 {
    width: 110px;
    height: 110px;
    /* Deep Blue */
    background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.04));
    box-shadow: 0 0 32px rgba(37, 99, 235, 0.15);
}

.floating-bubble.bubble-8 {
    width: 75px;
    height: 75px;
    /* Indigo */
    background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.04));
    box-shadow: 0 0 24px rgba(139, 92, 246, 0.15);
}

/* Floating orbs (larger glow effects) */
.floating-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
    filter: blur(50px);
}

.floating-orb.orb-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    right: 5%;
    background: rgba(124, 58, 237, 0.15);
    animation: float-slow 25s ease-in-out infinite;
    animation-delay: 0s;
}

.floating-orb.orb-2 {
    width: 250px;
    height: 250px;
    bottom: 5%;
    left: 2%;
    background: rgba(59, 130, 246, 0.2);
    animation: float-slow 28s ease-in-out infinite reverse;
    animation-delay: 5s;
}

/* Random Float 1: Vertical biased */
@keyframes float-random-1 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(10px, -20px); }
    50% { transform: translate(-5px, -40px); }
    75% { transform: translate(-10px, -20px); }
}

/* Random Float 2: Wide Horizontal */
@keyframes float-random-2 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, -15px); }
    66% { transform: translate(-20px, 10px); }
}

/* Random Float 3: Circular motion */
@keyframes float-random-3 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, 20px) rotate(5deg); }
    50% { transform: translate(0, 40px) rotate(0deg); }
    75% { transform: translate(-20px, 20px) rotate(-5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* Float-slow animation for large orbs */
@keyframes float-slow {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-40px) scale(1.1);
        opacity: 0.7;
    }
}

/* Pulsing effect for depth */
@keyframes pulse-gentle {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
}

.floating-bubble {
    animation-iteration-count: infinite;
}

/* Faster animation during scan - Individual speeds to maintain randomness */
/* We speed up transitions, JS will trigger moves frequently */
.animated-bg-container.is-scanning .floating-bubble {
    transition: top var(--move-duration) ease-in-out, left var(--move-duration) ease-in-out !important;
}

.animated-bg-container.is-scanning .floating-orb {
    animation-duration: 3s !important;
}

.floating-orb {
    animation-iteration-count: infinite;
}


/* Disable long press on images */
img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* TCG Card Styles (Codex) */
.tcg-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.tcg-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.tcg-card-container {
    width: 85%;
    max-width: 300px;
    perspective: 1000px;
}

.tcg-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
    border-radius: 20px;
    border: 3px solid #d4af37;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.4), inset 0 0 50px rgba(0,0,0,0.5);
    overflow: hidden;
    position: relative;
    transform-origin: center center;
    transform: scale(0.2) rotateY(180deg);
    transform-style: preserve-3d;
    opacity: 0;
    transition: all 0.3s ease-out; /* Smooth no bounce */
}
.tcg-modal.active .tcg-card {
    transform: scale(1) rotateY(0);
    opacity: 1;
}

/* Card Header (Name) */
.tcg-card-header {
    background: linear-gradient(to bottom, #d4af37, #b4942b);
    padding: 8px 15px;
    text-align: center;
    border-bottom: 2px solid #8a701e;
}
.tcg-card-name {
    color: #1a1a1a;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    letter-spacing: 1px;
}

/* Card Image Area */
.tcg-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Square aspect ratio */
    background: #000;
    border-bottom: 3px solid #d4af37;
}
.tcg-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tcg-rarity-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: #d4af37;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #d4af37;
    font-size: 0.7rem;
    text-transform: uppercase;
}

/* Card Description Area */
.tcg-card-body {
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
}

.tcg-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tcg-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px dashed rgba(255,255,255,0.2);
    font-size: 0.9rem;
}
.tcg-stat-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tcg-label {
    color: #aaaaaa;
    font-size: 0.85rem;
}
.tcg-value {
    color: #ffffff;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

/* Special "Captured" State */
.tcg-card.captured {
    border-color: #9333ea; /* Purple-600 */
    box-shadow: 0 0 30px rgba(147, 51, 234, 0.5);
}
.tcg-card.captured .tcg-card-header {
    background: linear-gradient(to bottom, #a855f7, #7e22ce); /* Purple-500 to Purple-700 */
    border-bottom-color: #581c87; /* Purple-900 */
}
/* Removed Stamp Styles */

/* Removed Close Button Styles */