/* Estilos generales del cuerpo */
body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    
    /* === CAMBIO AQUÍ === */
    background-color: #000; /* De #f0f0f0 a negro */
    
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
}

h1 {
    /* 1. La fuente cómica (se mantiene) */
    font-family: 'Luckiest Guy', cursive;
    
    /* 2. El color amarillo (se mantiene) */
    color: #FFEB3B; 
    
    /* 3. Estilos (¡ya no necesita fondo negro!) */
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); 
    
    /* 4. Hacemos la fuente más grande para que sea el foco */
    font-size: 3.5em; /* 3.5 veces el tamaño normal */
    margin-top: 15px; /* Damos un poco de aire arriba */
    margin-bottom: 10px; /* Un poco de espacio */
}


/* * NUEVO: Estilos para el slider de dificultad
 * Reemplaza los estilos de '.level-btn'
 */
#level-controls {
    margin-bottom: 20px;
    text-align: center;
    width: 90%;
    max-width: 400px; /* Límite para el slider */
}
#level-controls p {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    
    /* === CAMBIO AQUÍ === */
    color: #eee; /* De #555 a un gris claro */
}
#level-slider {
    width: 100%; /* El slider ocupa todo el ancho del contenedor */
    cursor: pointer;
}


/* * CAMBIO CLAVE: El Tablero Responsivo
 */
.game-board {
    display: grid;
    grid-gap: 10px;
    perspective: 1000px;

    /* * LA MAGIA RESPONSIVA:
     * 'auto-fit': Crea tantas columnas como quepan.
     * 'minmax(100px, 1fr)': Cada columna debe tener MÍNIMO 100px,
     * y MÁXIMO 1 fracción (se reparten el espacio sobrante).
     *
     * Esto reemplaza el 'grid-template-columns' que poníamos con JS.
     */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    
    /* * Para que en pantallas MUY anchas no se haga una sola línea de 18 cartas,
     * le ponemos un límite. 650px = 6 cartas de 100px + 5 espacios de 10px.
     */
    max-width: 650px; 
    width: 100%; /* Ocupa el 100% de su contenedor (que tiene 90% del body) */
}

/* * El resto de estilos de cartas (.card, .card-inner, .card-front,
 * .card-back, .matched) permanecen EXACTAMENTE IGUAL.
 * (Pégalos aquí desde tu archivo anterior).
 */

/* Pego el resto aquí para que sea más fácil */
.card {
    /* Usamos 'aspect-ratio' para asegurar que sea un cuadrado perfecto */
    /* ¡Esto es mejor que 'width/height' fijos para responsivo! */
    aspect-ratio: 1 / 1; 
    /* width: 100px; */ /* Ya no necesitamos ancho fijo */
    /* height: 100px; */ /* Ya no necesitamos alto fijo */
    position: relative;
    cursor: pointer;
    transition: opacity 0.5s;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card-front {
    background-color: #4A90E2;
    color: white;
    font-size: 50px; /* El tamaño se ajustará un poco por el tamaño de la carta */
    transform: rotateY(0deg);
}

.card-back {
    background-color: #fff;
    font-size: 50px;
    transform: rotateY(180deg);
}

/* Ajuste de fuente para que no se salga en cartas más pequeñas */
@media (max-width: 400px) {
    .card-front, .card-back {
        font-size: 40px;
    }
}


.card.matched {
    opacity: 0;
    cursor: default;
    transition: opacity 0.8s ease;
}