/* Fondo detrás del diálogo */
.modal::backdrop {
    background: rgba(5, 8, 20, 0.78);
    backdrop-filter: blur(4px);
}

/* Base común: conserva la geometría definida en modal16.css */
.modal .modal-contenido {
    color: #ffffff;
    border: 2px solid var(--borde-modal, rgba(255,255,255,.55));
    border-radius: 18px;
    box-shadow: 0 0 22px var(--brillo-modal, rgba(0,229,255,.28));
    background: var(--fondo-modal, linear-gradient(135deg, #182848, #4b6cb7));
}

/* Títulos y secciones */
.modal .tmodal {
    color: var(--color-titulo, #ffffff);
    text-shadow: 0 0 12px var(--brillo-modal, rgba(0,229,255,.45));
}
.modal .modal-contenido section {
    background: var(--fondo-seccion, rgba(0,0,0,.18));
    border: 1px solid var(--borde-modal, rgba(255,255,255,.25));
    border-radius: 12px;
    padding: 14px;
    margin-block: 14px;
}
.modal .modal-contenido section h3 {
    font-size: 2.4rem;
    color: var(--color-acento, #00e5ff);
}
.modal .modal-cerrar {
    color: var(--color-cerrar, #ffffff);
    background: var(--fondo-cerrar, rgba(0,0,0,.25));
    border: 1px solid var(--borde-modal, rgba(255,255,255,.55));
    border-radius: 50%;
    cursor: pointer;
}
.modal .modal-cerrar:hover,
.modal .modal-cerrar:focus-visible {
    filter: brightness(1.25);
    box-shadow: 0 0 12px var(--brillo-modal, rgba(0,229,255,.45));
}

/* 1. Tangram: morado / magenta */
#modal-tangram {
    --fondo-modal: linear-gradient(135deg, #61045f, #200112);
    --fondo-seccion: rgba(74, 0, 224, .20);
    --borde-modal: #b66cff;
    --brillo-modal: rgba(142, 45, 226, .55);
    --color-titulo: #f1c8ff;
    --color-acento: #00e5ff;
    --fondo-cerrar: #4a00e0;
}

/* 2. Laberintos: cian / turquesa */
#modal-laberinto {
    --fondo-modal: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    --fondo-seccion: rgba(0, 180, 219, .16);
    --borde-modal: #00cfe8;
    --brillo-modal: rgba(0, 180, 219, .5);
    --color-titulo: #b9f7ff;
    --color-acento: #39e7ff;
    --fondo-cerrar: #0083b0;
}

/* 3. Vocales: rojo / naranja */
#modal-vocales {
    --fondo-modal: linear-gradient(135deg, #4a0000, #2c0000);
    --fondo-seccion: rgba(255, 65, 108, .15);
    --borde-modal: #ff765f;
    --brillo-modal: rgba(255, 75, 43, .48);
    --color-titulo: #ffd0c4;
    --color-acento: #ffad66;
    --fondo-cerrar: #ff416c;
}

/* 4. Torre de Hanoi: azul / violeta */
#modal-hanoi {
    --fondo-modal: linear-gradient(135deg, #03001e, #3b0878, #7303c0);
    --fondo-seccion: rgba(0, 114, 255, .16);
    --borde-modal: #7bbdff;
    --brillo-modal: rgba(0, 198, 255, .5);
    --color-titulo: #cce8ff;
    --color-acento: #00e5ff;
    --fondo-cerrar: #0072ff;
}

/* 5. Pictogramas: tricolor / verde */
#modal-pictograma {
    --fondo-modal: linear-gradient(135deg, #075e54, #11998e, #176b3a);
    --fondo-seccion: rgba(56, 239, 125, .14);
    --borde-modal: #72ff9b;
    --brillo-modal: rgba(56, 239, 125, .42);
    --color-titulo: #e0ffe8;
    --color-acento: #9dffbc;
    --fondo-cerrar: #11998e;
}

/* 6. Patrones: violeta / rosa */
#modal-patrones {
    --fondo-modal: linear-gradient(135deg, #240b36, #6a1b70, #c31432);
    --fondo-seccion: rgba(218, 34, 255, .14);
    --borde-modal: #f39cff;
    --brillo-modal: rgba(218, 34, 255, .48);
    --color-titulo: #ffd5ff;
    --color-acento: #ff9acb;
    --fondo-cerrar: #9733ee;
}

/* 7. Cuerda: rojo / azul oscuro */
#modal-cuerda {
    --fondo-modal: linear-gradient(135deg, #141e30, #243b55);
    --fondo-seccion: rgba(235, 51, 73, .14);
    --borde-modal: #ff7b83;
    --brillo-modal: rgba(244, 92, 67, .45);
    --color-titulo: #ffd4d7;
    --color-acento: #ff7777;
    --fondo-cerrar: #eb3349;
}

/* 8. Cantidad y números: verde neón / menta */
#modal-cantidad {
    --fondo-modal: linear-gradient(135deg, #052329, #005f73);
    --fondo-seccion: rgba(17, 153, 142, .18);
    --borde-modal: #52ffb8;
    --brillo-modal: rgba(56, 239, 125, .42);
    --color-titulo: #d2fff0;
    --color-acento: #52ffb8;
    --fondo-cerrar: #11998e;
}

/* 9. Quirkilogo: cósmico / naranja */
#modal-quirkilogo {
    --fondo-modal: linear-gradient(135deg, #0f2027, #203a43, #38204f);
    --fondo-seccion: rgba(131, 58, 180, .17);
    --borde-modal: #ffb045;
    --brillo-modal: rgba(252, 176, 69, .42);
    --color-titulo: #ffe2b5;
    --color-acento: #ffb045;
    --fondo-cerrar: #833ab4;
}

/* Mejor lectura de enlaces y controles dentro de los modales */
.modal .modal-contenido p,
.modal .modal-contenido li {
    color: inherit;
}
.modal .modal-contenido img {
    max-width: 100%;
    height: auto;
}
.modletra{
    font-size: 1.8rem;
    line-height: 1.5;
}

.btn-jugar{
    background: yellow;
    color: blue;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1.8rem;
    font-weight: bold;
    columns: pointer;
    transition: all 0.25s ease;
 }
 .btn-jugar:hover{
    background: red;
    color: white;
    transform: scale(1.1); 
 }
 .btn.jugar:active{
    transform:scale(.97);
 }
 .conten-btn{
    text-align: center;
 }