/* Configuramos el fondo y quitamos el scroll horizontal */
body {
    background-image: url('../assets/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;
}

/* Efecto Cristal (Glassmorphism) y Márgenes */
#start-screen, #game-screen, .bg-glass {
background-color: rgba(15, 15, 15, 0.78) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
margin-top: 5vh !important;
margin-bottom: 5vh !important;
}

/* Tamaños de contenedores */
.max-w-md {
    max-width: 400px;
}

.max-w-lg {
    max-width: 750px;
}

/* Transiciones suaves para botones */
.btn {
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

/* Opciones de respuesta */
.option-btn {
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    font-size: 1.1rem;
    padding: 15px;
    border: 2px solid transparent;
}

.option-btn:hover {
    border-color: #ffc107;
    background-color: #343a40;
}

/* Matrices visuales */
.matriz {
    display: inline-grid;
    gap: 2px 15px;
    padding: 5px 10px;
    border-left: 2px solid white;
    border-right: 2px solid white;
    border-radius: 8px;
    margin: 0 5px;
    vertical-align: middle;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.05);
}

.cols-2 { grid-template-columns: auto auto; }
.cols-3 { grid-template-columns: auto auto auto; }

/* Estados de botones */
.btn-correcta {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
    transform: scale(1.02);
}

.btn-incorrecta {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
    opacity: 0.8;
}