/* Hereda fuentes y colores de ui.css */

.dinamica-cell {
    aspect-ratio: 1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden; /* Importante para contener el icono de fondo */
    
    /* Base style (Purple selector equivalent) */
    background: linear-gradient(180deg, #c084fc 0%, #7e22ce 100%);
    border: 1px solid #6b21a8;
    box-shadow: 0 4px 0 #581c87;
}

.dinamica-cell:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* Estado: JUGADO (Rojo) */
.dinamica-cell.played {
    background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
    border-color: #991b1b;
    box-shadow: 0 4px 0 #6b1919;
    cursor: default;
    pointer-events: none;
}

/* Estado: GANADO (Oro) */
.dinamica-cell.claimed {
    background: linear-gradient(180deg, #ecd96c 0%, #ffc107 100%);
    border-color: #fdd05d;
    box-shadow: 0 4px 0 #b4860b;
    cursor: default;
    pointer-events: none;
}

/* --- CORRECCIÓN DE CAPAS --- */

.cell-number {
    font-family: 'Panton', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    z-index: 2; /* Arriba */
    position: relative;
}

.cell-icon {
    width: 60%; /* Tamaño grande como marca de agua */
    height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado perfecto */
    opacity: 0.25; /* Transparencia para que se lea el número */
    z-index: 1; /* Abajo */
    pointer-events: none;
    color: white; /* Por defecto blanco */
}

/* Ajustes de color para estados específicos */
.claimed .cell-number { color: black; text-shadow: none; }
.claimed .cell-icon { opacity: 0.4; color: black; }

/* Animación de la cuenta regresiva */
@keyframes ping-slow {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.animate-ping-slow {
    animation: ping-slow 0.4s cubic-bezier(0, 0, 0.2, 1);
}