/* ========================================
   FIX CARTE TAGLIATE - Overflow Visible
   ======================================== */

/* ⭐ PRIORITÀ MASSIMA: Questo CSS deve sovrascrivere
   tutti gli overflow:hidden che tagliano i bordi */

/* Carte mini */
.card-mini {
    position: relative !important;
    overflow: visible !important;
    border-width: 4px !important;
    border-style: solid !important;
}

/* Bordi carte */
.card-border {
    overflow: visible !important;
    position: relative !important;
}

/* Carte dinamiche */
.card-dynamic {
    overflow: visible !important;
    position: relative !important;
}

/* Container campo gioco */
#playfield {
    overflow: visible !important;
}

#player-zone {
    overflow: visible !important;
}

#center-area {
    overflow: visible !important;
}

/* Sessione e Aula */
#player-session,
#player-aula {
    overflow: visible !important;
}

/* Slot carte */
.card-slot {
    overflow: visible !important;
    position: relative !important;
    /* ⭐ Margine extra per sicurezza */
    margin: 8px !important;
}

/* Area mano (eccezione: horizontal scroll OK) */
#hand-area {
    overflow-x: auto !important;     /* ⭐ Scroll orizzontale OK */
    overflow-y: visible !important;  /* ⭐ Bordi sopra/sotto visibili */
    padding-top: 15px !important;    /* ⭐ Spazio per bordi superiori */
    padding-bottom: 15px !important; /* ⭐ Spazio per bordi inferiori */
}

/* Carte in campo */
.field-card {
    overflow: visible !important;
    position: relative !important;
    /* ⭐ Z-index per effetti sovrapposti */
    z-index: 1;
}

.field-card:hover {
    z-index: 10 !important; /* ⭐ Sopra le altre al hover */
}

/* Carte in mano */
.hand-card {
    overflow: visible !important;
    position: relative !important;
    z-index: 1;
}

.hand-card:hover {
    z-index: 10 !important;
}

/* Carte selezionate */
.hand-card.selected {
    z-index: 15 !important; /* ⭐ Ancora più in alto */
}

/* Card preview area */
#card-preview-area {
    overflow: visible !important;
}

.preview-card-container {
    overflow: visible !important;
}

/* ========================================
   FIX MOBILE - Overflow Verticale
   ======================================== */

@media (max-width: 768px) {
    /* Su mobile, ancora più spazio per le carte */
    #hand-area {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    
    .card-slot {
        margin: 5px !important;
    }
}