/* Estilos generales para toda la página */
body {
    font-family: 'Georgia', serif; /* Fuente clásica con serifa */
    background-color: #e0d8b0; /* Un color arena o terroso suave */
    color: #4a3b2d; /* Color de texto principal (marrón oscuro) */
    display: flex; /* Usamos flexbox para centrar fácilmente el contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    min-height: 100vh; /* Asegura que el body ocupe al menos toda la altura de la ventana */
    margin: 0; /* Quita márgenes por defecto */
    text-align: center; /* Centra el texto dentro de los elementos */
}

/* Contenedor principal del juego */
#game-container {
    background-color: #f5f5dc; /* Color que imita el pergamino */
    padding: 30px; /* Espacio interior */
    border-radius: 10px; /* Bordes ligeramente redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra un poco más pronunciada */
    width: 90%; /* Ancho relativo */
    max-width: 600px; /* Ancho máximo para pantallas grandes */
    border: 1px solid #d2b48c; /* Borde sutil color sepia */
}

/* Estilo para el título del juego */
#game-container h1 {
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', sans-serif; /* Fuentes divertidas y amigables */
    color: #ff6347; /* Un color tomate brillante */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* Sombra suave para destacar */
    font-size: 2.5em; /* Un poco más grande */
    margin-bottom: 25px;
}

/* Estilo para el texto de la pregunta */
#question-text {
    font-size: 1.5em; /* Tamaño de letra un poco más grande */
    margin-bottom: 20px; /* Espacio debajo de la pregunta */
    color: #4a3b2d; /* Marrón oscuro para la pregunta */
    font-weight: bold;
}

/* Contenedor de los botones de respuesta (usando Grid) */
.btn-grid {
    display: grid; /* Organiza los botones en una cuadrícula */
    grid-template-columns: repeat(2, 1fr); /* Crea 2 columnas de igual tamaño */
    gap: 10px; /* Espacio entre los botones */
    margin-bottom: 20px; /* Espacio debajo de los botones */
}

/* Estilo general para TODOS los botones */
.btn {
    background-color: #d2b48c; /* Color sepia claro */
    border: 1px solid #a0522d; /* Borde marrón */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    padding: 12px 15px; /* Espacio interior del botón */
    color: #4a3b2d; /* Color del texto del botón (marrón oscuro) */
    font-size: 1em; /* Tamaño del texto */
    cursor: pointer; /* Cambia el cursor a una manito al pasar por encima */
    transition: background-color 0.3s ease, transform 0.1s ease; /* Transición suave para efectos */
}

/* Área para mostrar si la respuesta fue correcta o incorrecta */
#feedback-container {
    margin-top: 15px;
    min-height: 2em; /* Altura mínima para reservar espacio */
}

/* Estilo para el texto de feedback (correcto/incorrecto) */
#feedback-text { /* Esta es la primera definición, será eliminada por la siguiente sugerencia */
    margin-top: 15px;
    font-weight: bold; /* Texto en negrita */
    min-height: 1.2em; /* Altura mínima para evitar que el diseño salte */
}

/* === ESTILOS CORREGIDOS PARA BOTONES DE RESPUESTA === */

/* Estilo base para botones correctos/incorrectos (ANTES de deshabilitar) */
/* No es estrictamente necesario, pero bueno tenerlo */
.answer-btn.correct-btn {
    background-color: #006400; /* Verde oscuro */
    color: #f5f5dc; /* Texto color pergamino */
    border: 2px solid #003300; /* Borde verde muy oscuro */
}

.answer-btn.incorrect-btn {
    background-color: #8b0000; /* Rojo oscuro */
    color: #f5f5dc; /* Texto color pergamino */
    border: 2px solid #5a0000; /* Borde rojo muy oscuro */
}

/* --- Clave: Estilos para botones DESHABILITADOS --- */

/* Botón CORRECTO y DESHABILITADO: ¡Queremos que SIGA verde oscuro! */
.answer-btn.correct-btn:disabled {
    background-color: #006400; /* Mantenemos Verde oscuro */
    color: #f5f5dc; /* Texto color pergamino */
    opacity: 0.8; /* Lo hacemos un poco transparente para indicar inactividad */
    cursor: not-allowed;
    border: 2px solid #003300;
}

/* Botón INCORRECTO (el que seleccionó el usuario) y DESHABILITADO: ¡Queremos que SIGA rojo oscuro! */
.answer-btn.incorrect-btn:disabled {
    background-color: #8b0000; /* Mantenemos Rojo oscuro */
    color: #f5f5dc; /* Texto color pergamino */
    opacity: 0.8; /* Un poco transparente */
    cursor: not-allowed;
    border: 2px solid #5a0000;
}

/* Botón normal (no seleccionado, ni correcto/incorrecto marcado) y DESHABILITADO: Ahora sí, gris */
.answer-btn:disabled {
    background-color: #e0d8b0; /* Color arena suave */
    color: #a0522d; /* Texto marrón */
    border-color: #d2b48c; /* Borde sepia */
    opacity: 0.7; /* Más transparente */
    cursor: not-allowed;
}

/* --- Clave: Arreglo del Hover --- */

/* El efecto hover general SÓLO se aplica si el botón NO está deshabilitado */
.btn:not(:disabled):hover {
    background-color: #f0b900; /* Amarillo un poco más oscuro */
    transform: scale(1.03); /* Efecto sutil de crecimiento */
}

/* Quitamos los hover específicos anteriores que intentaban prevenir el cambio de color,
   ya que :not(:disabled) en la regla principal es más efectivo.
   El cursor not-allowed ya lo aplica la regla :disabled. */

/* Efecto al hacer clic en CUALQUIER botón (si no está deshabilitado) */
.btn:not(:disabled):active {
    transform: scale(0.98); /* Encoge ligeramente el botón al hacer clic */
}


/* Estilo para el texto de feedback (correcto/incorrecto) - Sin cambios */
#feedback-text { /* Esta es la definición que se mantiene */
    margin-top: 15px;
    font-weight: bold; /* Texto en negrita */
    min-height: 1.2em; /* Altura mínima para evitar que el diseño salte */
}
.correct { color: #28a745; } /* Verde */
.incorrect { color: #dc3545; } /* Rojo */

/* Contenedor de la puntuación */
#score-container { /* Esta es la definición que se mantiene */
    margin-top: 20px;
    font-size: 1.1em;
    font-weight: bold;
}

/* Botón Siguiente - Sin cambios */
.next-btn { background-color: #28a745; color: white; }
.next-btn:hover { background-color: #218838; }

/* --- Estilos para la Pantalla de Resultados --- */

#results-container {
    background-color: #f5f5dc; /* Color que imita el pergamino */
    padding: 40px;
    border-radius: 10px; /* Bordes ligeramente redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px; /* Puede ser un poco más pequeño que el juego */
    text-align: center;
    border: 1px solid #d2b48c; /* Borde sutil color sepia */
    /* display: none; lo controla el HTML/JS, no es necesario aquí */
}

#results-container h2 {
    color: #4a3b2d; /* Marrón oscuro */
    margin-bottom: 20px;
    font-size: 1.8em;
}

.final-score {
    font-size: 2em; /* Tamaño grande para la puntuación */
    font-weight: bold;
    color: #a0522d; /* Marrón más oscuro para destacar la puntuación */
    margin-bottom: 25px;
}

#results-message {
    font-size: 1.2em;
    color: #4a3b2d; /* Marrón oscuro */
    min-height: 1.3em; /* Espacio por si añadimos mensajes */
    margin-bottom: 30px;
}

#play-again-button {
    background-color: #d2b48c; /* Color sepia claro */
    color: #4a3b2d; /* Texto marrón oscuro */
    padding: 15px 30px; /* Un poco más grande */
    font-size: 1.1em;
    border: 1px solid #a0522d; /* Borde marrón */
    border-radius: 5px;
}

#play-again-button:not(:disabled):hover {
    background-color: #a0522d; /* Marrón más oscuro */
    color: #f5f5dc; /* Texto color pergamino */
}

/* Estilos para el contenedor de errores de carga */
#loading-error {
    color: #8b0000; /* Rojo oscuro */
    background-color: #f5f5dc; /* Color pergamino */
    border: 1px solid #8b0000; /* Borde rojo oscuro */
    padding: 10px;
    margin: 15px auto; /* Centrar el div de error */
    border-radius: 5px;
    max-width: 600px; /* Limitar ancho para que no ocupe toda la pantalla */
    text-align: left; /* Alinear texto a la izquierda dentro del div */
}