/* TIRADA DE CINCO CARTAS - ESTILOS ESPECÍFICOS */
/* La mayoría de los estilos se heredan de tiradas-interactivas.css */

#layoutContainer.layout-cinco-cruz {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 20px;
    padding: 30px;
    max-width: 600px;
    margin: 0 auto;
    align-items: center;
    justify-items: center;
    min-height: 500px;
}

/* Posiciones según la imagen del usuario:
   Arriba: 3
   Izquierda: 1 | Centro: 5 | Derecha: 2
   Abajo: 4
*/
.pos-cinco-3 { grid-area: 1 / 2 / 2 / 3; } /* Arriba Centro */
.pos-cinco-1 { grid-area: 2 / 1 / 3 / 2; } /* Centro Izquierda */
.pos-cinco-5 { grid-area: 2 / 2 / 3 / 3; } /* Centro Centro */
.pos-cinco-2 { grid-area: 2 / 3 / 3 / 4; } /* Centro Derecha */
.pos-cinco-4 { grid-area: 3 / 2 / 4 / 3; } /* Abajo Centro */

#layoutContainer.layout-cinco-cruz .posicion {
    width: 100%;
    max-width: 120px;
}

@media (max-width: 600px) {
    #layoutContainer.layout-cinco-cruz {
        gap: 10px;
        padding: 15px;
        grid-template-columns: repeat(3, 1fr);
    }
    
    #layoutContainer.layout-cinco-cruz .posicion {
        max-width: 85px;
    }

    .posicion-nombre {
        font-size: 0.6em;
    }
}