/* =========================================
   PULL GUESSER (Styles Spécifiques)
   ========================================= */

.pg-result-container {
    height: 140px;
    position: relative;
}

.pg-result-container #action-buttons,
.pg-result-container #result-display {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#score-card-a,
#score-card-b {
    font-variant-numeric: tabular-nums;
    min-width: 150px;
    display: inline-block;
}

#vs-circle {
    width: 120px;
    height: 120px;
    transition: background-color .3s ease, transform .3s ease;
}

#vs-badge {
    transition: all .3s ease;
}

/* =========================================
   PULL OR PASS (Styles Spécifiques)
   ========================================= */

.click-card {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.click-card:hover {
    transform: scale(1.02);
}

/* Identifiant unique "pop-" pour ne pas casser le Pull Guesser */
#pop-vs-circle {
    width: 10vw;
    height: 10vw;
    min-width: 44px;
    min-height: 44px;
    max-width: 110px;
    max-height: 110px;
    padding: 0 !important; 
    transition: background-color .3s ease, transform .3s ease;
}

#pop-vs-badge {
    /* L'alternative parfaite à clamp() et min-font-size (qui n'existe pas) */
    font-size: max(11px, 2vw);
    transition: all .3s ease;
}

.character {
    max-height: 28vh; 
    width: auto;
}

#end-rankup-winner .card-wrapper {
    max-width: 250px;
    margin: 0 auto;
}

/* =========================================
   ANIMATIONS & GLOW (Communs aux 2 jeux)
   ========================================= */

@keyframes resultPop {
    0% { transform: scale(0.4); opacity: 0; }
    50% { transform: scale(1.35); opacity: 1; }
    100% { transform: scale(1); }
}

.result-pop {
    animation: resultPop .4s ease-out;
}

@keyframes circleBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.25); }
    60% { transform: scale(.95); }
    100% { transform: scale(1); }
}

.circle-bounce {
    animation: circleBounce .45s ease-out;
}

/* Le glow s'applique désormais sur les cercles des DEUX jeux */
#vs-circle.bg-success, 
#pop-vs-circle.bg-success {
    box-shadow: 0 0 30px rgba(25,135,84,.6), 0 0 60px rgba(25,135,84,.3);
}

#vs-circle.bg-danger, 
#pop-vs-circle.bg-danger {
    box-shadow: 0 0 30px rgba(220,53,69,.6), 0 0 60px rgba(220,53,69,.3);
}

/* =========================================
   TIER LIST MAKER (Full Responsive, Sans @media)
   ========================================= */

/* Structure d'une ligne de la Tier List */
.tl-row {
    min-height: 10vh; /* S'adapte à la taille de l'écran */
}

/* Zone du texte (S, A, B, etc.) */
.tl-label {
    width: 20vw;
    min-width: 60px;
    max-width: 120px;
    font-size: max(1.2rem, 3vw); /* Texte fluide */
    outline: none; /* Évite la bordure bleue quand on clique pour éditer le texte */
    word-break: break-word; /* Protège contre les textes trop longs */
    cursor: text;
}

/* Zone où on lâche les cartes */
.tl-dropzone {
    display: flex;
    flex-wrap: wrap; /* Indispensable pour que les cartes passent à la ligne */
    align-content: flex-start;
    gap: 0.5rem;
    min-height: 10vh;
}

/* Boutons de contrôle à droite */
.tl-controls {
    width: 10vw;
    min-width: 35px;
    max-width: 50px;
}

.tl-controls .btn {
    border-radius: 0;
}

/* Cartes (Taille fluide pour rentrer parfaitement sur mobile et PC) */
.tl-card {
    width: 15vw;
    height: 15vw;
    min-width: 45px;
    min-height: 45px;
    max-width: 80px;
    max-height: 80px;
    object-fit: cover;
    border-radius: 4px;
    cursor: grab;
    transition: transform 0.1s ease;
}

.tl-card:active {
    cursor: grabbing;
    transform: scale(1.1);
}

/* Classe générée par SortableJS lors du glisser-déposer */
.tl-ghost {
    opacity: 0.4;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Couleurs des Tiers (Palette par défaut) */
.tl-color-1 { background-color: #ff7f7f; } /* Rouge S */
.tl-color-2 { background-color: #ffbf7f; } /* Orange A */
.tl-color-3 { background-color: #ffff7f; } /* Jaune B */
.tl-color-4 { background-color: #7fff7f; } /* Vert C */
.tl-color-5 { background-color: #7fbfff; } /* Bleu D */
.tl-color-6 { background-color: #bf7fff; } /* Violet */
.tl-color-7 { background-color: #a0a0a0; } /* Gris */

/* =========================================
   NEXUSDLE (Styles Spécifiques)
   ========================================= */

.nxdle-container { 
    max-width: 650px; 
    margin: 0 auto; 
    width: 100%; 
}

.nxdle-row { 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    gap: max(4px, 0.8vw); 
    margin-bottom: max(4px, 0.8vw); 
}

.nxdle-header-text {
    text-align: center;
    font-size: max(9px, 1.2vw);
    font-weight: bold;
    color: #adb5bd;
    text-transform: uppercase;
}

.nxdle-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.nxdle-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
}

.nxdle-name-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 1px;
    text-align: center;
}

.nxdle-text {
    font-size: max(10px, 1.3vw);
    font-weight: bold;
    color: white;
    z-index: 2;
    line-height: 1.1;
    text-align: center;
    word-break: break-word;
    padding: 2px;
}

.nxdle-name-text {
    font-size: max(9px, 1.1vw);
    font-weight: bold;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.nxdle-arrow {
    position: absolute;
    font-size: max(24px, 3.5vw);
    opacity: 0.25;
    z-index: 1;
}

@keyframes flipIn {
    0% {
        transform: rotateX(-90deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

.nx-flip-in {
    animation: flipIn 0.5s ease-out forwards;
}

/* Styles spécifiques au Jeu des Ombres */
.ombre-img-container {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ombre-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: filter 1.5s ease-in-out, transform 0.8s ease-in-out; 
}

.nxdle-silhouette {
    filter: brightness(0) drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
    pointer-events: none;
}

/* Largeur max partagée (remplace tous les style="max-width: 650px;") */
.nxdle-650 {
    max-width: 650px;
}

/* Taille de police des textes d'indices (remplace les style="font-size: max(10px, 0.8vw);") */
.nxdle-hint-text {
    font-size: max(10px, 0.8vw);
}

/* Image dans les suggestions d'autocomplétion (remplace style="width:35px;height:35px;object-fit:cover;") */
.nxdle-sugg-img {
    width: 35px;
    height: 35px;
    object-fit: cover;
}

/* Image dans les lignes de devinettes Ombre (remplace style="width:40px;height:40px;object-fit:cover;") */
.nxdle-ombre-guess-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}