/**
 * Fichier : solitaire.css
 * Gère la disposition en grille et l'empilement des cartes.
 */

:root {
    --sol-card-w: 85px;
    --sol-card-h: 120px;
    --sol-bg: #14532d;
    --sol-spacing: 12px;
    --sol-border-width: 3px;
    --sol-color-card-front: #dfdfdf;
    --sol-border-card-front: solid var(--sol-border-width) #4b4b4b;
    --sol-border-card-back: solid var(--sol-border-width) white;
    --sol-radius-card: 4px;
    --sol-size-suit-icon-center: 5.2rem;
    --sol-size-card-value: 1.6rem;
}

/* Conteneur principal */
.solitaire-container {
    border-radius: var(--sol-radius-card);
    background-color: var(--sol-bg);
    padding: var(--spacing-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    height: -webkit-fill-available;
}

.solitaire-header {
    width: 100%;
    max-width: 800px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

/* Table de jeu */
.solitaire-table {
    width: 100%;
    max-width: 800px;
}

.action-game-panel__solitaire {

} 

/* Rangée du haut */
.solitaire-top-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.deck-group, .foundations-group {
    display: flex;
    gap: var(--sol-spacing);
}

/* Emplacements vides */
.card-slot {
    width: var(--sol-card-w);
    height: var(--sol-card-h);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: var(--sol-radius-card);
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.slot-icon, .slot-suit-hint {
    font-size: 1.5rem;
    opacity: 0.2;
}

/* Visuel de la carte */
.card-visual {
    width: var(--sol-card-w);
    height: var(--sol-card-h);
    border-radius: var(--sol-radius-card);
    position: relative;
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    user-select: none;
    cursor: grab;
}

.card-back {
    background: #3b82f6;
    border: var(--sol-border-card-back);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.1) 5px, rgba(255,255,255,0.1) 10px);
}

.card-front {
    background: var(--sol-color-card-front);
    border: var(--sol-border-card-front);
    transition: all 0.5s ease;
}

.card-front:hover {
    transform: translateY(-1px);
    border: solid var(--sol-border-width) var(--color-emerald-10);
}

.card-front.red { color: #ef4444; }
.card-front.black { color: #1f2937; }

.card-value {
    position: absolute;
    left: 4px;
    font-weight: 900;
    font-size: var(--sol-size-card-value);
}

.card-suit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--sol-size-suit-icon-center);
}

/* Le Tableau (colonnes) */
.solitaire-tableau {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--sol-spacing);
}

.tableau-column {
    position: relative;
    width: var(--sol-card-w);
    min-height: 400px;
}

/* Classes d'empilement générées par le JS */
.tableau-column .card-visual {
    position: absolute;
}

.layer-0 { top: 0; }
.layer-1 { top: 25px; }
.layer-2 { top: 50px; }
.layer-3 { top: 75px; }
.layer-4 { top: 100px; }
.layer-5 { top: 125px; }
.layer-6 { top: 150px; }
.layer-7 { top: 175px; }
.layer-8 { top: 200px; }
.layer-9 { top: 225px; }
.layer-10 { top: 250px; }
.layer-11 { top: 275px; }
.layer-12 { top: 300px; }
.layer-13 { top: 325px; }
.layer-14 { top: 350px; }
.layer-15 { top: 375px; }
.layer-16 { top: 400px; }

/* Overlay victoire */
.solitaire-win-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.solitaire-win-card {
    background: #1e293b;
    padding: 40px;
    border-radius: var(--radius-medium);
    text-align: center;
    border: var(--sol-border-card-front) solid #22c55e;
}

.win-icon { 
    font-size: 4rem; 
    display: block; 
    margin-bottom: 10px; 
}

/**
 * Adaptations Responsive pour le Solitaire
 */

/* 1. Ajustement des variables de base pour les petits écrans */
@media screen and (max-width: 1024px) {
    :root {
        --sol-card-w: 9vw;
        --sol-card-h: 12vw;
        --sol-spacing: 4px;
        --sol-radius-card: 1px;
        --sol-border-width: 1px;
        --sol-size-suit-icon-center: 2rem;
        --sol-size-card-value: 1rem;
    
    }

    .solitaire-container {
        padding: var(--spacing-small);
    }

    .solitaire-header {
        margin-bottom: 15px;
    }

    .solitaire-header h2 {
        font-size: 1.2rem;
    }

    /* Réduction de l'espace entre le haut et le tableau */
    .solitaire-top-row {
        margin-bottom: 20px;
    }

    /* 2. On réduit l'empilement vertical des cartes pour qu'elles rentrent en hauteur */
    .layer-1 { top: 12px; }
    .layer-2 { top: 24px; }
    .layer-3 { top: 36px; }
    .layer-4 { top: 48px; }
    .layer-5 { top: 60px; }
    .layer-6 { top: 72px; }
    .layer-7 { top: 84px; }
    .layer-8 { top: 96px; }
    .layer-9 { top: 108px; }
    .layer-10 { top: 120px; }
    .layer-11 { top: 132px; }
    .layer-12 { top: 144px; }
    .layer-13 { top: 156px; }
    .layer-14 { top: 168px; }
    .layer-15 { top: 180px; }
    .layer-16 { top: 192px; }

    /* Ajustement de la zone de drop vide */
    .tableau-column {
        min-height: 300px;
    }

    .card-visual.is-auto-moving {
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        z-index: 9999 !important;
        pointer-events: none;
    }
}