body,html,#pasapalabra-game,#pasapalabra-game .btn,#pasapalabra-game .answer-input,div#pasapalabra-welcome .btn,#pasapalabra-game .welcome h1{font-family:'nunito'}body,html{margin:0;padding:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}body::-webkit-scrollbar{display:none}#pasapalabra-game *{margin:0;padding:0;box-sizing:border-box}#pasapalabra-game{--primary:#4f46e5;--success:#22c55e;--error:#ef4444;--warning:#eab308;--bg-dark:#1e1b4b;--text-light:#fff;--radius:12px;font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(circle,var(--bg-dark) 0%,#0a0826 100%);color:var(--text-light);display:none;flex-direction:column;align-items:center;min-height:100vh;width:100%;overflow:hidden}.loaded #pasapalabra-game{display:flex}#pasapalabra-game .game{width:100%;max-width:1200px;padding:1rem;display:none;position:relative;margin:0 auto!important;flex-direction:column;height:calc(100vh - 2rem)}#pasapalabra-game .welcome{text-align:center;padding:2rem;display:flex;flex-direction:column;align-items:center;position:relative}#welcome::before{}#pasapalabra-game .welcome::before{content:"©Educaenvivo";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);font-size:3rem;color:rgb(255 255 255 / 10%);white-space:nowrap;pointer-events:none;z-index:10;opacity:.1}#pasapalabra-game .welcome h1{font-size:2.5rem;margin-bottom:.5rem;font-weight:800}#pasapalabra-game .welcome img{height:40vh;margin-top:1.75rem;margin-bottom:.75rem}div#pasapalabra-welcome .btn{margin-top:2rem;height:44px;width:200px;font-weight:700}.btn-pulse{animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}#pasapalabra-welcome{opacity:1;transition:opacity .3s ease-out}#pasapalabra-welcome.fade-out{opacity:0}#pasapalabra-gameContent{opacity:0;transition:opacity .3s ease-out}#pasapalabra-gameContent.fade-in{opacity:1}.game-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;height:calc(100vh - 120px)}.rosco-container{display:flex;flex-direction:column;align-items:center}#pasapalabra-game .header{display:flex;justify-content:space-between;align-items:center;width:100%;padding-bottom:1rem;gap:1rem;z-index:20}#pasapalabra-game .stats{display:flex;flex-wrap:wrap;gap:.5rem;flex:1}#pasapalabra-game .stats div{display:flex;align-items:center;gap:.5rem}#pasapalabra-game .config{display:flex;gap:.5rem;flex-shrink:0}#pasapalabra-game .btn{padding:.5rem 1rem;border:none;border-radius:var(--radius);cursor:pointer;font-weight:600;transition:all .2s;background:var(--primary);color:var(--text-light)}#pasapalabra-game .btn:hover{transform:translateY(-2px);filter:brightness(1.1)}#pasapalabra-game .btn:active{transform:translateY(0)}#pasapalabra-game .btn-hint{background:var(--warning)}#pasapalabra-game .btn-hint:disabled{background:#666;cursor:not-allowed;opacity:.7}button#pasapalabra-hintBtn{margin-top:.5rem;height:40px}#pasapalabra-game .btn-settings{background:#6366f1}#pasapalabra-game .btn-bg-mute{background:#ff5722}#pasapalabra-game .btn-pause{background:#607d8b}#pasapalabra-game .rosco{position:relative;width:min(70vmin,500px);aspect-ratio:1/1;max-height:calc(100vh - 200px);margin:0 auto;animation:pasapalabra-float 6s ease-in-out infinite;transition:transform .5s;display:flex;justify-content:center;align-items:center}#pasapalabra-game #pasapalabra-duck{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;max-width:280px;display:none;opacity:1;z-index:11}#pasapalabra-game .countdown{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:5rem;color:#fff;opacity:0}.countdown.animate{animation:countdown-animation 1s forwards}@keyframes countdown-animation{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}#pasapalabra-game .letter{position:absolute;width:clamp(2rem,4.5vw,2.8rem);height:clamp(2rem,4.5vw,2.8rem);background:var(--primary);border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:clamp(.8rem,2.2vw,1.1rem);border:2px solid var(--text-light);transition:all .3s;cursor:pointer;text-shadow:1px 1px 2px rgba(0,0,0,.5);opacity:0;transform:scale(0)}#pasapalabra-game .letter.animate-in{opacity:1;transform:scale(1)}#pasapalabra-game .letter.correct{background:var(--success)}#pasapalabra-game .letter.incorrect{background:var(--error)}#pasapalabra-game .letter.current{animation:pasapalabra-pulse 1.5s infinite;box-shadow:0 0 15px rgba(255,255,255,.5)}#pasapalabra-game .game-ui{display:flex;flex-direction:column;width:40%;max-width:400px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:var(--radius);padding:1rem;position:relative;box-sizing:border-box}#pasapalabra-game .timer-bubble{position:absolute;top:50%;left:50%;background:orange;border:2px solid #fff;color:#fff;width:clamp(45px,10vw,65px);height:clamp(45px,10vw,65px);border-radius:50%;display:none;align-items:center;justify-content:center;font-size:clamp(.8rem,1.8vw,.9rem);cursor:default;transition:background-color .5s;z-index:10}#pasapalabra-game .timer-bubble.blink{animation:blink 1s infinite}#pasapalabra-game .question{font-size:clamp(1rem,2.8vw,1.2rem);text-align:center;margin:.5rem 0;min-height:2rem;word-wrap:break-word;overflow-wrap:break-word;opacity:0;transform:translateY(-10px);transition:opacity .5s ease,transform .5s ease}#pasapalabra-game .question.animate-question{opacity:1;transform:translateY(0)}#pasapalabra-game .current-hint{font-size:clamp(1.1rem,3.5vw,1.4rem);text-align:center;margin:.5rem 0;color:var(--warning);transition:opacity .5s;display:none}#pasapalabra-game .input-group{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem;flex-wrap:wrap}#pasapalabra-game .answer-input{padding:.7rem 1rem;border-radius:var(--radius);border:2px solid var(--primary);background:rgba(255,255,255,.9);font-size:1rem;width:min(100%,300px);min-width:95%}#pasapalabra-game .answer-input:focus{outline:0;border-color:#818cf8}#pasapalabra-game .controls{display:flex;gap:.8rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}.controls .btn{height:44px;width:45%}#pasapalabra-game .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);backdrop-filter:blur(5px);z-index:100}#pasapalabra-game .modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-dark);padding:2rem;border-radius:var(--radius);width:min(90%,400px);text-align:center}#pasapalabra-game .modal h2{margin-bottom:1rem}#pasapalabra-game .modal label{display:block;margin:.5rem 0}#pasapalabra-game .modal input[type=number]{width:100%;padding:.5rem;margin-bottom:1rem;border-radius:var(--radius);border:1px solid var(--primary)}#pasapalabra-game .stars{margin:1rem 0}#pasapalabra-game .stars .star{font-size:2rem;color:gold;animation:pasapalabra-bounce .5s ease infinite alternate}#pasapalabra-game .stars .star.animate-star{animation:pasapalabra-bounce .5s ease infinite alternate}#pasapalabra-game .score-text.animate-score-text{animation:fadeInUp 1s ease forwards}#pasapalabra-game .correct-answers.animate-correct-answers{animation:fadeInLeft 1s ease forwards}#pasapalabra-game .hints-display{display:none;margin:3rem auto 1rem auto;font-size:1.2rem;color:var(--text-light);transition:opacity .5s;text-align:center;text-transform:uppercase}#pasapalabra-game .hints-display.active{display:block}#pasapalabra-game .rosco.move-up{animation:moveRoscoUp .5s forwards}#pasapalabra-game .rosco.move-down{animation:moveRoscoDown .5s forwards}@keyframes pasapalabra-pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes pasapalabra-float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}@keyframes pasapalabra-bounce{from{transform:translateY(0)}to{transform:translateY(-10px)}}@keyframes blink{0%,90%{opacity:1}95%,100%{opacity:0}}@keyframes pasapalabra-duck-fadeout{0%{opacity:1}100%{opacity:0}}.fade-out{animation:pasapalabra-duck-fadeout 1s forwards;animation-delay:1.5s}@keyframes moveRoscoUp{from{transform:translateY(0)}to{transform:translateY(-100px)}}@keyframes moveRoscoDown{from{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes countdown-animation{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}.countdown.animate{animation:countdown-animation 1s forwards}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.animate-score-text{animation:fadeInUp 1s ease forwards}.animate-correct-answers{animation:fadeInLeft 1s ease forwards}.animate-star{animation:pasapalabra-bounce .5s ease infinite alternate}#pasapalabra-results p{opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s ease}#pasapalabra-results p.animate-score-text,#pasapalabra-results p.animate-correct-answers{opacity:1;transform:translateY(0)}#pasapalabra-results .stars .star{opacity:0;transform:scale(.5);transition:opacity .5s ease,transform .5s ease}#pasapalabra-results .stars .star.animate-star{opacity:1;transform:scale(1)}@media(min-width:768px){.game-container{flex-direction:row;align-items:center;justify-content:center;gap:5.625rem}#pasapalabra-game .game-ui{margin-top:0}#pasapalabra-game .rosco{width:min(500px,70vmin);aspect-ratio:1/1}}@media(min-height:500px){#pasapalabra-game .rosco{max-height:calc(100vh - 200px)}}@media(max-width:767px){.game-container{flex-direction:column}#pasapalabra-game .game-ui{width:100%;max-width:none}}@media(max-width:480px){#pasapalabra-game .header{flex-direction:column-reverse;gap:1rem}#pasapalabra-game .stats{justify-content:center}#pasapalabra-game .config{justify-content:center}.game-container{flex-direction:column;align-items:center}#pasapalabra-game .rosco{width:min(85vw,400px);margin:1rem auto}#pasapalabra-game .letter{width:clamp(1.8rem,4vw,2.5rem);height:clamp(1.8rem,4vw,2.5rem);font-size:clamp(.7rem,2vw,1rem)}#pasapalabra-game .timer-bubble{width:clamp(40px,8vw,55px);height:clamp(40px,8vw,55px);font-size:clamp(.7rem,2vw,1rem)}
    
#pasapalabra-game .timer-bubble {width: clamp(40px, 8vw, 55px)height: clamp(40px, 8vw, 55px);
        font-size: clamp(0.7rem, 1.6vw, 0.85rem);}
#pasapalabra-game .countdown {font-size: 3rem;}}


/*Opciones tablet PC*/
@media screen and (min-width: 1025px){
.game-container{top: -40px;position: relative}
.rosco-container{top: -28px;position: relative}
}

/*Fuentes*/
/* Declaración de fuentes */
@font-face {
    font-family: 'Fredoka';
    src: url('fonts/Fredoka.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('fonts/Nunito.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('fonts/Nunito-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* Establecer las fuentes por defecto */
:root {
    --font-primary: 'Fredoka', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-secondary: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Aplicar fuentes a elementos específicos */
body {
    font-family: var(--font-secondary);
}

h1, h2, h3, h4, h5, h6, 
.btn,
.timer-bubble,
#countdown,
.letter {
    font-family: var(--font-primary);
}

/* Asegurar que la fuente italic de Nunito se use correctamente */
em, i, 
.question em,
.modal-content em {
    font-family: 'Nunito';
    font-style: italic;
}


/* ---Scrollbar Invisible pero Funcional--- */
/* Firefox */
body, html {scrollbar-width: none; /* Oculta scrollbar en Firefox */}
/* Chrome, Safari y Opera */
body::-webkit-scrollbar, html::-webkit-scrollbar {width: 0px;background: transparent; /* Opcional: color del scrollbar */}

/* Loader Estilo Circular Azul */
#loader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #0a0826; /* Mismo color de fondo del juego */display: flex;align-items: center;justify-content: center;z-index: 9999;transition: opacity 0.5s ease, visibility 0.5s ease;}
#loader.hidden {opacity: 0;visibility: hidden;}

.spinner {border: 8px solid rgba(255, 255, 255, 0.1);border-top: 8px solid #4f46e5; /* Azul principal */border-radius: 50%;width: 60px;height: 60px;animation: spin 1s linear infinite;}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Footer Estilo Negro con Texto Blanco Fijo al Fondo */
footer {position: fixed; /* Fijado al fondo */bottom: 0;left: 0;width: 100%;background-color: #000; /* Negro */color: #fff; /* Blanco */text-align: center;font-size: 0.9rem;padding: 0.75rem;z-index: 100;}

footer a {color: orange; /* Azul principal para el enlace */text-decoration: none}
.copyright{padding-top:1rem!important}

footer a:hover {text-decoration: underline;}

/* Ocultar el Footer al Iniciar el Juego */
footer.hidden {display: none;}

/* Añadir transiciones suaves a los elementos */
.fade-out, .fade-in {transition: all 0.5s ease}

/* Marca de Agua */
.welcome::before {content: "©Educaenvivo";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-45deg);font-size: 3rem;color: rgb(255 255 255 / 10%);white-space: nowrap;pointer-events: none;z-index: 10;opacity: 0.1;}

/* Animación para la pregunta */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animación para los textos de puntuación final */
.animate-score-text {animation: fadeInUp 1s ease forwards;}

.animate-correct-answers {animation: fadeInLeft 1s ease forwards;}

.animate-star {animation: pasapalabra-bounce 0.5s ease infinite alternate;}