/* Tabla */
body {
    background-color: #181a1a;
    color: #fff;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Eurostile Extended', 'Arial', sans-serif;
    overflow: hidden;
}

.trivia-container {
    position: relative;
    max-width: 1200px;
    width: 100%;
}

.responsive-div {
    position: relative;
    width: 100%;
    background: url('../../../res/recursos-sc2/img/cuadros/tablero.png') no-repeat center;
    background-size: cover;
    aspect-ratio: 16 / 9; /* Alternativa a padding-top */
    z-index: 1;
}

.question-number,
.trivia-content-text,
.trivia-puntos {
    position: absolute;
    text-align: center;
    z-index: 2;
    font-family: 'Eurostile Extended', 'Arial', sans-serif;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4),
                 0 0 20px rgba(255, 255, 255, 0.27),
                 0 0 30px rgba(255, 255, 255, 0.27),
                 0 0 100px rgba(255, 255, 255, 0.27);
}

.trivia-content-text .resposive-text {
    font-size: clamp(1.3em, 1.8vw, 1.8em);
}

.trivia-content-text {
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
}

.question-number {
    font-family: 'PreguntaBank', 'Arial', sans-serif;
    font-weight: 500;
    top: 4.3%;
    left: 5%;
    font-size: clamp(1em, 1.6vw, 1.6em);
}

.trivia-puntos {
    font-family: 'PreguntaBank', 'Arial', sans-serif;
    font-weight: 500;
    top: 3.9%;
    right: 7%;
    font-size: clamp(1em, 1.6vw, 1.6em);
}

.trivia-content-answer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
}

/*******/

.hoverable:hover {
    filter: brightness(1.35);
}

.drop-shadow:hover {
    filter: drop-shadow(0 0 10px rgba(27, 127, 209, 1.6));
}

.drop-shadow-selected {
    filter: drop-shadow(0 0 10px rgba(110, 186, 252));
}

.radius-5{
    border-radius: 5px; /* Radio del borde redondeado */
}

.grayscale {
    filter: grayscale(100%);
    cursor: not-allowed;
}

.cursor {
    border-right: .15em solid white;
    animation: blink-caret .75s step-end infinite;
}

.option {
    cursor: no-drop;
    text-decoration: none; /* Inicialmente sin subrayado */
}

.option.active {
    cursor: pointer;
}

.option:hover {
    text-decoration: underline;
}

.typing {
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    animation: typing 3.5s steps(40, end), blink-caret 1.75s step-end infinite;
    display: none;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #fff; }
}

.answer-img {
    max-width: 30%;
    max-height: 30%;
    margin-bottom: 10px;
    display: none;
}

#typewriter {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;

    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4),
    0 0 20px rgba(255, 255, 255, 0.27),
    0 0 30px rgba(255, 255, 255, 0.27),
    0 0 50px rgba(255, 255, 255, 0.27),
    0 0 100px rgba(255, 255, 255, 0.27);
}

.message-container {
    position: absolute;
    top: 10%;
    right: 3%;

    width: 250px;
    height: 96px;
    background-image: url('../../../res/recursos-sc2/img/cuadros/mensaje.png');
    z-index: 9999;
    transition: opacity 1.5s ease-out;
}

.resultado-contenedor .mensaje {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 18px;
    font-weight: bold;
    font-family: 'Eurostile Extended', 'Arial', sans-serif;
    z-index: 1;
}

.oculto {
    opacity: 0;  /* Desaparece completamente */
    pointer-events: none;  /* No se puede interactuar con él */
}

/* Estilo para mensajes correctos */
.mensaje.correcto {
    color: #00ff00c9; /* Verde brillante */
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.4),
    0 0 20px rgba(0, 255, 0, 0.27),
    0 0 30px rgba(0, 255, 0, 0.27),
    0 0 50px rgba(0, 255, 0, 0.27),
    0 0 100px rgba(0, 255, 0, 0.27);
}

/* Estilo para mensajes incorrectos */
.mensaje.incorrecto {
    color: #ff0000c7; /* Rojo brillante */
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.4),
    0 0 20px rgba(255, 0, 0, 0.27),
    0 0 30px rgba(255, 0, 0, 0.27),
    0 0 50px rgba(255, 0, 0, 0.27),
    0 0 100px rgba(255, 0, 0, 0.27);
}

/* Definir la animación tintineo */
@keyframes tintineo {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.tintineo {
    animation: tintineo 0.8s infinite;
    filter: drop-shadow(0 0 10px rgba(110, 186, 252));
}


.answer-options {
    display: flex;
    flex-wrap: nowrap; /* Permite que las opciones se ajusten en múltiples líneas si no caben en una sola */
    justify-content: space-between; /* Ajusta el espacio entre las opciones */
}

.button-container {
    position: absolute;
    bottom: 55px;
    right: 60px;
    z-index: 4;
    display: flex;
    gap: 10px;
}

.typing-effect::after {
    content: '|'; /* El cursor */
    animation: blink 0.7s step-end infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.blink {
    animation: blink 1.25s steps(1, end) 2;
}

/******/

.btn-circle {
    width: 50px;
    height: 50px;
    padding: 10px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-whatsapp {
    background-color: #25D366;
}
.btn-facebook {
    background-color: #0866FF;
}
.btn-enlace {
    background-color: #808488;
}

/*********/
/* Estilos personalizados para Fancybox */
.fancybox__content
{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #fff;
position: fixed;
justify-content: center;
align-items: center;
}

.fancybox-alternativas .fancybox__content
{
width: 789px;
height: 422px;
background-image: url('../../../res/recursos-sc2/img/cuadros/alternativas.png');
top: 25%;
left: 30%;
}

.fancybox-cuadro-azul .fancybox__content
{
width: 774px;
height: 378px;
background-image: url('../../../res/recursos-sc2/img/cuadros/cuadro-azul-grande.png');
top: 30%;
left: 30%;
}

.fancybox-cuadro-azul-grande-x3 .fancybox__content
{
width: 876px;
height: 560px;
background-image: url('../../../res/recursos-sc2/img/cuadros/cuadro-azul-grande-x3.png');
top: 15%;
left: 28%;
}
input[type="radio"] {
    display: none;
}

.button-atras {
    position: absolute;
    top: 13%;
    left: 4.5%;
}

.button-dorado-text {
    position: absolute;
    z-index: 2;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.question-alternativa-a {
    position: absolute;
    z-index: 3;
    top: 22%;
    left: 25%;
    transform: translate(-50%, -50%);
}
.question-alternativa-b {
    position: absolute;
    z-index: 3;
    top: 22%;
    right: 5%;
    transform: translate(-50%, -50%);
}

.question-alternativa-a,
.question-alternativa-b
{
font-family: 'PreguntaBank', 'Arial', sans-serif;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5),
             0 0 20px rgba(255, 255, 255, 0.27),
             0 0 30px rgba(255, 255, 255, 0.27),
             0 0 100px rgba(255, 255, 255, 0.27);
font-size: clamp(1.5em, 1.5vw, 1.5em);
filter: blur(0.7px);
}

.custom-column {
    position: absolute;
    width: 48%; /* Ajusta según sea necesario */
    height: auto;
}
.custom-column.left {
    position: absolute;
    left: 5%;
    top: 25%;
}
.custom-column.left2 {
    position: absolute;
    left: 3%;
    top: 30%;
}
.custom-column.right {
    position: absolute;
    right: 0%;
    top: 25%;
}
.custom-column.right2 {
    position: absolute;
    right: 3%;
    top: 30%;
}
.custom-column img {
    width: 90%;
    height: auto;
}
.custom-column img {
    width: 90%;
    height: auto;
}

.text-intro {
    position: absolute;
    top: 25%;
    left:8%;
    text-align: left;
    width: 85%;
}

.text-trivia-primary
{
font-size: 18px;
font-family: 'Eurostile Extended', 'Arial', sans-serif;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5),
             0 0 20px rgba(255, 255, 255, 0.27),
             0 0 30px rgba(255, 255, 255, 0.27),
             0 0 100px rgba(255, 255, 255, 0.27);
filter: blur(0.7px);
}

.text-trivia-title
{
font-family: 'PreguntaBank', 'Arial', sans-serif;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5),
             0 0 20px rgba(255, 255, 255, 0.27),
             0 0 30px rgba(255, 255, 255, 0.27),
             0 0 100px rgba(255, 255, 255, 0.27);
filter: blur(0.7px);
}
body {

    margin: 0;

    padding: 0;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: #181a1a;

    font-family: Arial, sans-serif;

}



.ratio_img{

    aspect-ratio: 16 / 9;

}

.quiz-container {

    position: relative;

    max-width: 1200px;

    width: 100%;

    box-sizing: border-box;

    background: url('https://sc2fans.com/res/recursos-sc2/img/cuadros/tablero.png') no-repeat center;

    background-size: cover;

    aspect-ratio: 16 / 9; /* Alternativa a padding-top */

    z-index: 1;

}



.trivia-number {

    position: absolute;

    font-weight: 500;

    top: 4.3%;

    left: 5%;

    font-size: clamp(1em, 1.6vw, 1.6em);

}



.trivia-puntos {

    position: absolute;

    font-weight: 500;

    top: 3.9%;

    right: 7%;

    font-size: clamp(1em, 1.6vw, 1.6em);

}



.question-container {

    position: absolute;

    top: 45%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 90%;

    text-align: center;

}



.question {



}



.options {

    display: flex;

    gap: 10px;

    flex-wrap: nowrap;

    justify-content: center;

}



.option {

   /* flex: 1;

    padding: 10px;

    border-radius: 5px;

    color: white;

    cursor: pointer;

    transition: background-color 0.3s;*/

}



.option:hover {

    background-color: rgba(74, 158, 255, 0.2);

}



.solution-button {

    position: absolute;

    bottom: 55px;

    right: 60px;

    z-index: 4;

    display: flex;

    gap: 10px;

}



.size-text-1{

    font-size: 28px;

}



.baile{

    width: 45%;

    height: 45%;

}



/* Media queries para dispositivos móviles */

@media (max-width: 768px) {



    .baile{

        width: 35%;

        height: 35%;

    }



    .trivia-number {

        position: absolute;

        font-weight: 500;

        top: 4.3%;

        left: 5%;

        font-size: 25px;

    }



    .trivia-puntos {

        position: absolute;

        font-weight: 500;

        top: 8%;

        left: 5%;

        font-size: 25px;

    }



    .size-text-1{

        font-size: 24px;

    }



    .size-text-2{

        font-size: 14px;

    }



    .quiz-container {

        height: auto;

        min-height: 100vh;

        margin: 0;

        border-radius: 0;

        display: flex;

        flex-direction: column;

    }



    .header {

        font-size: 12px;

        padding: 15px 10px;

    }



    .question-container {

        position: static;

        transform: none;

        width: 100%;

        margin-top: 150px;

    }



    .question-container-answer {

        position: static;

        transform: none;

        width: 100%;

        margin-top: 13%;

        padding-left: 15px;

        padding-right: 15px;

    }



    .question {

        padding: 0 10px;

    }



    .options {

        display: grid;

        gap: 0px;

    }



    .option {

        width: 95%;

        padding: 15px 10px;

        text-align: left;

    }



    .solution-button {

        position: absolute;

        bottom: 65px;

        right: 15px;

        z-index: 4;

        display: flex;

        gap: 10px;

    }

}



@media (max-width: 480px) {



    .baile{

        width: 35%;

        height: 35%;

    }





    .size-text-1 {

        font-size: 18px;

    }

    .size-text-2{

        font-size: 12px;

    }



    .option {

        font-size: 14px;

    }

}









/*******/



.hoverable:hover {

    filter: brightness(1.35);

}



.drop-shadow:hover {

    filter: drop-shadow(0 0 10px rgba(27, 127, 209, 1.6));

}



.drop-shadow-selected {

    filter: drop-shadow(0 0 10px rgba(110, 186, 252));

}



.radius-5{

    border-radius: 5px; /* Radio del borde redondeado */

}



.grayscale {

    filter: grayscale(100%);

    cursor: not-allowed;

}



.cursor {

    border-right: .15em solid white;

    animation: blink-caret .75s step-end infinite;

}



.option {

    cursor: no-drop;

    text-decoration: none; /* Inicialmente sin subrayado */

}



.option.active {

    cursor: pointer;

}



.option:hover {

    text-decoration: underline;

}





/******/



.typing {

    white-space: nowrap;

    overflow: hidden;

    border-right: 3px solid;

    animation: typing 3.5s steps(40, end), blink-caret 1.75s step-end infinite;

    display: none;

}



@keyframes typing {

    from { width: 0; }

    to { width: 100%; }

}



@keyframes blink-caret {

    from, to { border-color: transparent; }

    50% { border-color: #fff; }

}



#typewriter {

    max-width: 600px;

    margin: 20px auto;

    padding: 20px;



    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4),

    0 0 20px rgba(255, 255, 255, 0.27),

    0 0 30px rgba(255, 255, 255, 0.27),

    0 0 50px rgba(255, 255, 255, 0.27),

    0 0 100px rgba(255, 255, 255, 0.27);

}



.message-container {

    position: absolute;

    top: 10%;

    right: 3%;



    width: 250px;

    height: 96px;

    background-image: url('http://sc2fans.com/res/recursos-sc2/img/cuadros/mensaje.png');

    z-index: 9999;

    transition: opacity 1.5s ease-out;

}



.resultado-contenedor .mensaje {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);



    font-size: 18px;

    font-weight: bold;

    font-family: 'Eurostile Extended', 'Arial', sans-serif;

    z-index: 1;

}



.oculto {

    opacity: 0;  /* Desaparece completamente */

    pointer-events: none;  /* No se puede interactuar con él */

}



/* Estilo para mensajes correctos */

.mensaje.correcto {

    color: #00ff00c9; /* Verde brillante */

    text-shadow: 0 0 8px rgba(0, 255, 0, 0.4),

    0 0 20px rgba(0, 255, 0, 0.27),

    0 0 30px rgba(0, 255, 0, 0.27),

    0 0 50px rgba(0, 255, 0, 0.27),

    0 0 100px rgba(0, 255, 0, 0.27);

}



/* Estilo para mensajes incorrectos */

.mensaje.incorrecto {

    color: #ff0000c7; /* Rojo brillante */

    text-shadow: 0 0 8px rgba(255, 0, 0, 0.4),

    0 0 20px rgba(255, 0, 0, 0.27),

    0 0 30px rgba(255, 0, 0, 0.27),

    0 0 50px rgba(255, 0, 0, 0.27),

    0 0 100px rgba(255, 0, 0, 0.27);

}



/* Definir la animación tintineo */

@keyframes tintineo {

    0% { transform: scale(1); }

    50% { transform: scale(1.06); }

    100% { transform: scale(1); }

}



.tintineo {

    animation: tintineo 0.8s infinite;

    filter: drop-shadow(0 0 10px rgba(110, 186, 252));

}



.typing-effect::after {

    content: '|'; /* El cursor */

    animation: blink 0.7s step-end infinite;

}



@keyframes blink {

    0%, 100% { opacity: 1; }

    50% { opacity: 0; }

}



.blink {

    animation: blink 1.25s steps(1, end) 2;

}









/******/



.btn-circle {

    width: 50px;

    height: 50px;

    padding: 10px;

    border-radius: 50%;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

}

.btn-whatsapp {

    background-color: #25D366;

}

.btn-facebook {

    background-color: #0866FF;

}

.btn-enlace {

    background-color: #808488;

}



/*********/

/* Estilos personalizados para Fancybox */

.fancybox__content

{

background-size: cover;

background-position: center;

background-repeat: no-repeat;

color: #fff;

position: fixed;

justify-content: center;

align-items: center;

}



.fancybox-alternativas .fancybox__content

{

width: 789px;

height: 422px;

background-image: url('http://sc2fans.com/res/recursos-sc2/img/cuadros/alternativas.png');

top: 25%;

left: 30%;

}



.fancybox-cuadro-azul .fancybox__content

{

width: 774px;

height: 378px;

background-image: url('http://sc2fans.com/res/recursos-sc2/img/cuadros/cuadro-azul-grande.png');

top: 30%;

left: 30%;

}



.fancybox-cuadro-azul-grande-x3 .fancybox__content

{

width: 876px;

height: 560px;

background-image: url('http://sc2fans.com/res/recursos-sc2/img/cuadros/cuadro-azul-grande-x3.png');

top: 15%;

left: 28%;

}
* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #1f1f1f;

    color: white;

}



.quiz-container {

    position: relative;

    max-width: 1200px;

    width: 100%;

    background: url('https://sc2fans.com/res/recursos-sc2/img/cuadros/tablero.png') no-repeat center;

    background-size: cover;

    aspect-ratio: 16 / 9;

    z-index: 1;

    overflow: hidden;

}



.scroll-container {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    overflow-y: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}



.content-wrapper {

    width: 100%;

    max-height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.question-container {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px;

}



.question {

    font-size: 1.3em;

    margin-bottom: 15px;

    text-align: center;

    width: 100%;

    max-width: 800px;

}



.options {

    text-align: center;

    display: flex;

    gap: 12px;

 /*

    flex-direction: column;

    gap: 12px;

    width: 80%;

    max-width: 600px;*/

}

/*

.option {

    padding: 15px 20px;

    background: #f8f9fa;

    border: 2px solid #e9ecef;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 1.1em;

    text-align: left;

}



.option:hover {

    background: #e9ecef;

    transform: translateY(-2px);

}

*/



.option.active {

    cursor: pointer;

}



.answer-container {

    display: none;

    padding-left: 35px;

    padding-right: 35px;

}



.result {

    font-size: 1.4em;

    font-weight: bold;

    margin-bottom: 5px;

    text-align: center;

}



.explanation {

    text-align: justify;

    line-height: 1.6;

    max-width: 100%;

    overflow-wrap: break-word;

    word-wrap: break-word;

    color: white;

}



.image-container {

    text-align: center;

    max-width: 100%;

}



.image-container img {

    max-width: 100%;

    height: auto;

    max-height: 275px;

    object-fit: contain;

}



.size-text-1{

    font-size: 28px;

}



.size-text-2{

    font-size: 16px;

}



.trivia-number {

    position: absolute;

    font-weight: 500;

    top: 4.5%;

    left: 5%;

    font-size: clamp(1em, 1.6vw, 1.6em);

}



.trivia-puntos {

    position: absolute;

    font-weight: 500;

    top: 4%;

    right: 7%;

    font-size: clamp(1em, 1.6vw, 1.6em);

}

.solution-button {

    position: absolute;

    bottom: 55px;

    right: 60px;

    z-index: 4;

    display: flex;

    gap: 10px;

}



/**** MENSAJE DE ERROR ****/

.message-container {

    position: absolute;

    top: 10%;

    right: 3%;



    width: 250px;

    height: 96px;

    background-image: url('https://sc2fans.com/res/recursos-sc2/img/cuadros/mensaje.png');

    z-index: 9999;

    transition: opacity 1.5s ease-out;

}



.resultado-contenedor .mensaje {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);



    font-size: 18px;

    font-weight: bold;

    font-family: 'Eurostile Extended', 'Arial', sans-serif;

    z-index: 1;

}



.mensaje.correcto {

    color: #00ff00c9;

    text-shadow: 0 0 8px rgba(0, 255, 0, 0.4),

    0 0 20px rgba(0, 255, 0, 0.27),

    0 0 30px rgba(0, 255, 0, 0.27),

    0 0 50px rgba(0, 255, 0, 0.27),

    0 0 100px rgba(0, 255, 0, 0.27);

}



.mensaje.incorrecto {

    color: #ff0000c7;

    text-shadow: 0 0 8px rgba(255, 0, 0, 0.4),

    0 0 20px rgba(255, 0, 0, 0.27),

    0 0 30px rgba(255, 0, 0, 0.27),

    0 0 50px rgba(255, 0, 0, 0.27),

    0 0 100px rgba(255, 0, 0, 0.27);

}



/**** MISELANEOS ****/

.hoverable:hover {

    filter: brightness(1.35);

}



.grayscale {

    filter: grayscale(100%);

    cursor: not-allowed;

}





@media (max-width: 600px) {

    .quiz-container {

        margin: 10px;

    }



    .question {

        font-size: 1.2em;

    }



    .option {

        font-size: 1em;

        padding: 12px 15px;

    }



    .options {

        width: 90%;

    }



    .image-container img {

        max-height: 200px;

    }

}