/* =======================================================
   QUIZ GAME
======================================================= */

.quiz-game-container {
    height:          100%;
    max-width:       850px;
    margin:          0 auto;
    display:         flex;
    flex-direction:  column;
    gap:             1rem;
}

/* =======================================================
   HEADER
======================================================= */

.quiz-header {
    padding:       1.1rem;
    text-align:    center;
    border-radius: 22px;
    background:    linear-gradient(135deg, #111827 0%, #172554 40%, #0f172a 100%);
    border:        1px solid rgba(96,165,250,.25);
    box-shadow:
        0 0 0 1px rgba(96,165,250,.08),
        0 0 18px rgba(37,99,235,.12),
        0 4px 18px rgba(0,0,0,.35);
}

#quiz-progress {
    display:        inline-block;
    padding:        .35rem .8rem;
    margin-bottom:  .8rem;
    border-radius:  999px;
    background:     rgba(59,130,246,.12);
    border:         1px solid rgba(96,165,250,.25);
    color:          #93c5fd;
    font-size:      .75rem;
    font-weight:    700;
    letter-spacing: .03em;
}

#quiz-question {
    color:         white;
    font-size:     2rem;
    font-weight:   700;
    line-height:   1.2;
    margin-bottom: .35rem;
}

#quiz-question-sub {
    color:       #94a3b8;
    font-size:   .9rem;
    line-height: 1.4;
}

/* =======================================================
   TIMER
======================================================= */

#quiz-timer-container {
    width:         100%;
    height:        10px;
    overflow:      hidden;
    border-radius: 999px;
    background:    #1f2937;
    border:        1px solid rgba(96,165,250,.15);
    box-shadow:    inset 0 2px 6px rgba(0,0,0,.4);
    margin-bottom: .9rem;
}

#quiz-timer-bar {
    height:        100%;
    border-radius: 999px;
    transition:    width 1s linear, background-color .5s;
}

/* =======================================================
   FEEDBACK — encima de las opciones
======================================================= */

/* Contenedor vacío: no ocupa espacio cuando está vacío */
#quiz-feedback:empty {
    display: none;
}

#quiz-feedback {
    width: 100%;
}

/* Tarjeta de feedback */
.quiz-fb {
    width:          100%;
    display:        flex;
    align-items:    center;
    gap:            .9rem;
    padding:        .9rem 1.1rem;
    border-radius:  16px;
    animation:      quiz-fb-slide .3s cubic-bezier(.34,1.56,.64,1) both;
}

.quiz-fb.correct {
    background: linear-gradient(135deg,
        rgba(6,182,212,.14) 0%,
        rgba(34,211,238,.08) 100%);
    border:     1.5px solid rgba(34,211,238,.55);
    box-shadow:
        0 0 30px rgba(34,211,238,.18),
        0 4px 16px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.quiz-fb.wrong {
    background: linear-gradient(135deg,
        rgba(239,68,68,.14) 0%,
        rgba(220,38,38,.08) 100%);
    border:     1.5px solid rgba(248,113,113,.50);
    box-shadow:
        0 0 30px rgba(239,68,68,.16),
        0 4px 16px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.04);
}

/* Círculo icono izquierdo */
.quiz-fb-icon {
    flex-shrink:     0;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.25rem;
    font-weight:     800;
}

.quiz-fb.correct .quiz-fb-icon {
    background: rgba(34,211,238,.18);
    color:      #67e8f9;
    border:     1.5px solid rgba(34,211,238,.45);
    box-shadow: 0 0 18px rgba(34,211,238,.35);
}

.quiz-fb.wrong .quiz-fb-icon {
    background: rgba(239,68,68,.18);
    color:      #f87171;
    border:     1.5px solid rgba(239,68,68,.45);
    box-shadow: 0 0 18px rgba(239,68,68,.30);
}

/* Texto central */
.quiz-fb-body {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            .1rem;
    text-align:     left;
    min-width:      0;
}

.quiz-fb-title {
    font-size:   1rem;
    font-weight: 800;
    display:     block;
    line-height: 1.2;
}

.quiz-fb.correct .quiz-fb-title { color: #67e8f9; }
.quiz-fb.wrong   .quiz-fb-title { color: #f87171; }

.quiz-fb-sub {
    font-size:    .82rem;
    color:        #94a3b8;
    font-weight:  500;
    display:      block;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
}

.quiz-fb-sub em {
    color:      #e2e8f0;
    font-style: normal;
    font-weight: 600;
}

/* Emoji badge derecho (solo correcto) */
.quiz-fb-badge {
    flex-shrink: 0;
    font-size:   1.6rem;
    line-height: 1;
    animation:   quiz-badge-pop .45s .1s cubic-bezier(.34,1.56,.64,1) both;
}

/* =======================================================
   OPTIONS
======================================================= */

#quiz-options {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             .75rem;
}

.quiz-option-btn {
    width:         100%;
    text-align:    left;
    padding:       14px 18px;
    border-radius: 16px;
    color:         white;
    font-size:     .95rem;
    font-weight:   600;
    background:    linear-gradient(135deg, #111827 0%, #172554 40%, #0f172a 100%);
    border:        1px solid rgba(96,165,250,.20);
    box-shadow:
        0 0 0 1px rgba(96,165,250,.05),
        0 4px 12px rgba(0,0,0,.25);
    transition:    transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    cursor:        pointer;
    position:      relative;
    overflow:      hidden;
}

.quiz-option-btn:not(:disabled):hover {
    transform:    translateY(-2px);
    border-color: rgba(96,165,250,.45);
    box-shadow:
        0 0 20px rgba(37,99,235,.18),
        0 6px 20px rgba(0,0,0,.35);
}

.quiz-option-btn:disabled {
    cursor: default;
}

/* ── Respuesta CORRECTA: brilla y hace shimmer ── */
.quiz-option-btn.correct-answer {
    background:   linear-gradient(135deg, #0c3a4a 0%, #0e5568 100%);
    border:       2px solid #22d3ee;
    color:        #e0f7fa;
    font-weight:  700;
    animation:    quiz-correct-glow 1.8s ease-in-out infinite;
}

/* Shimmer de luz barriendo el botón */
.quiz-option-btn.correct-answer::after {
    content:    '';
    position:   absolute;
    top:        0;
    left:       -80%;
    width:      60%;
    height:     100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.14),
        transparent
    );
    animation:  quiz-shimmer 2s ease-in-out infinite;
    pointer-events: none;
}

/* ── Respuesta INCORRECTA ── */
.quiz-option-btn.wrong-answer {
    background:   linear-gradient(135deg, #3f0d0d, #7f1d1d);
    border-color: rgba(248,113,113,.40);
    color:        white;
    animation:    shake .5s;
}

/* =======================================================
   FOOTER / NEXT BUTTON
======================================================= */

.quiz-footer {
    min-height:      80px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .75rem;
}

#quiz-next-btn {
    display:         none;  /* shown via JS */
    align-items:     center;
    justify-content: center;
    gap:             .4rem;
    padding:         .9rem 2rem;
    border-radius:   14px;
    color:           white;
    font-weight:     700;
    font-size:       .95rem;
    background:      linear-gradient(135deg, #2563eb, #1d4ed8);
    border:          1px solid rgba(96,165,250,.25);
    box-shadow:      0 0 16px rgba(37,99,235,.20);
    transition:      .25s;
    cursor:          pointer;
    animation:       quiz-btn-appear .35s cubic-bezier(.34,1.56,.64,1) both;
}

#quiz-next-btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 0 26px rgba(37,99,235,.35);
}

/* =======================================================
   PANTALLA FINAL — FELICITACIONES
======================================================= */

.quiz-final-screen {
    position:        relative;
    overflow:        hidden;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1.25rem;
    padding:         2.5rem 2rem 2rem;
    border-radius:   24px;
    min-height:      420px;
    background:      linear-gradient(155deg, #0d0f2b 0%, #1a1040 35%, #0f1a30 65%, #0a1020 100%);
    border:          1px solid rgba(99,102,241,.35);
    box-shadow:
        0 0 0 1px rgba(99,102,241,.12),
        0 0 60px rgba(99,102,241,.15),
        0 0 120px rgba(6,182,212,.06),
        0 12px 40px rgba(0,0,0,.55);
    text-align:      center;
    animation:       quiz-final-in .55s cubic-bezier(.34,1.56,.64,1) both;
}

/* Partículas flotantes */
.quiz-final-particles {
    position:       absolute;
    inset:          0;
    overflow:       hidden;
    pointer-events: none;
    border-radius:  inherit;
}

.quiz-final-particles span {
    position:      absolute;
    border-radius: 50%;
    opacity:       0;
    animation:     quiz-particle 5s infinite ease-in-out;
}

.quiz-final-particles span:nth-child(1) { width:8px;  height:8px;  background:#67e8f9; left:12%;  top:85%; animation-delay:0s;    animation-duration:4.5s; }
.quiz-final-particles span:nth-child(2) { width:5px;  height:5px;  background:#a78bfa; left:28%;  top:90%; animation-delay:.7s;   animation-duration:5s;   }
.quiz-final-particles span:nth-child(3) { width:7px;  height:7px;  background:#fbbf24; left:50%;  top:88%; animation-delay:1.4s;  animation-duration:4.2s; }
.quiz-final-particles span:nth-child(4) { width:4px;  height:4px;  background:#34d399; left:68%;  top:92%; animation-delay:.3s;   animation-duration:5.5s; }
.quiz-final-particles span:nth-child(5) { width:6px;  height:6px;  background:#f472b6; left:82%;  top:86%; animation-delay:1.1s;  animation-duration:4.8s; }
.quiz-final-particles span:nth-child(6) { width:5px;  height:5px;  background:#67e8f9; left:22%;  top:80%; animation-delay:2s;    animation-duration:5.2s; }
.quiz-final-particles span:nth-child(7) { width:8px;  height:8px;  background:#a78bfa; left:60%;  top:83%; animation-delay:2.5s;  animation-duration:4s;   }
.quiz-final-particles span:nth-child(8) { width:4px;  height:4px;  background:#fbbf24; left:40%;  top:95%; animation-delay:3s;    animation-duration:5.8s; }

.quiz-final-top {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .4rem;
    animation:      quiz-slide-down .5s .1s cubic-bezier(.34,1.56,.64,1) both;
}

.quiz-final-emoji {
    font-size:   4rem;
    line-height: 1;
    filter:      drop-shadow(0 0 20px rgba(251,191,36,.5));
    animation:   quiz-emoji-bounce .65s .2s cubic-bezier(.34,1.56,.64,1) both;
}

.quiz-final-heading {
    color:          white;
    font-size:      1.75rem;
    font-weight:    800;
    letter-spacing: -.02em;
    margin:         0;
    text-shadow:    0 2px 20px rgba(99,102,241,.3);
}

.quiz-final-perf {
    font-size:      .85rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin:         0;
    padding:        .3rem .9rem;
    border-radius:  999px;
    border:         1px solid currentColor;
    opacity:        .9;
}

.quiz-perf-gold  { color: #fbbf24; background: rgba(251,191,36,.10);  text-shadow: 0 0 18px rgba(251,191,36,.4);  }
.quiz-perf-green { color: #34d399; background: rgba(52,211,153,.10);  text-shadow: 0 0 18px rgba(52,211,153,.4);  }
.quiz-perf-blue  { color: #60a5fa; background: rgba(96,165,250,.10);  text-shadow: 0 0 18px rgba(96,165,250,.4);  }
.quiz-perf-red   { color: #f87171; background: rgba(248,113,113,.10); text-shadow: 0 0 18px rgba(248,113,113,.4); }

/* Anillo de puntuación */
.quiz-final-ring {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           160px;
    height:          160px;
    border-radius:   50%;
    background:      radial-gradient(circle at 38% 38%, #1e1b4b 0%, #0d0f2b 100%);
    border:          3px solid rgba(99,102,241,.5);
    box-shadow:
        0 0 0 8px rgba(99,102,241,.06),
        0 0 0 16px rgba(99,102,241,.03),
        0 0 40px rgba(99,102,241,.25),
        inset 0 2px 12px rgba(0,0,0,.5);
    gap:             .1rem;
    animation:       quiz-ring-pop .55s .35s cubic-bezier(.34,1.56,.64,1) both;
}

.quiz-final-ring.quiz-perf-gold  { border-color: rgba(251,191,36,.6);  box-shadow: 0 0 0 8px rgba(251,191,36,.05),  0 0 50px rgba(251,191,36,.3),  inset 0 2px 12px rgba(0,0,0,.5); }
.quiz-final-ring.quiz-perf-green { border-color: rgba(52,211,153,.6);  box-shadow: 0 0 0 8px rgba(52,211,153,.05),  0 0 50px rgba(52,211,153,.3),  inset 0 2px 12px rgba(0,0,0,.5); }
.quiz-final-ring.quiz-perf-blue  { border-color: rgba(96,165,250,.6);  box-shadow: 0 0 0 8px rgba(96,165,250,.05),  0 0 50px rgba(96,165,250,.3),  inset 0 2px 12px rgba(0,0,0,.5); }
.quiz-final-ring.quiz-perf-red   { border-color: rgba(248,113,113,.6); box-shadow: 0 0 0 8px rgba(248,113,113,.05), 0 0 50px rgba(248,113,113,.3), inset 0 2px 12px rgba(0,0,0,.5); }

.quiz-final-percent {
    color:          white;
    font-size:      2.6rem;
    font-weight:    900;
    line-height:    1;
    letter-spacing: -.03em;
}

.quiz-final-percent small {
    font-size:   1.4rem;
    font-weight: 700;
    opacity:     .75;
}

.quiz-final-ring-label {
    color:          #94a3b8;
    font-size:      .65rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.quiz-final-detail {
    color:           #94a3b8;
    font-size:       .95rem;
    margin:          0;
    display:         flex;
    gap:             .35rem;
    align-items:     center;
    flex-wrap:       wrap;
    justify-content: center;
    animation:       quiz-fade-up .4s .5s both;
}

.quiz-final-highlight {
    color:       #67e8f9;
    font-weight: 800;
    font-size:   1.25rem;
    text-shadow: 0 0 14px rgba(103,232,249,.4);
}

.quiz-final-total {
    color:       white;
    font-weight: 700;
}

.quiz-final-btn {
    padding:       .9rem 2.5rem;
    border:        none;
    border-radius: 14px;
    color:         white;
    font-weight:   700;
    font-size:     .95rem;
    background:    linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
    border:        1px solid rgba(99,102,241,.4);
    box-shadow:
        0 0 20px rgba(79,70,229,.30),
        0 4px 16px rgba(0,0,0,.3);
    cursor:        pointer;
    transition:    .25s;
    margin-top:    .25rem;
    animation:     quiz-fade-up .4s .6s both;
}

.quiz-final-btn:hover {
    transform:  translateY(-3px);
    box-shadow: 0 0 36px rgba(79,70,229,.50), 0 6px 20px rgba(0,0,0,.4);
    background: linear-gradient(135deg, #6366f1, #4338ca);
}

/* =======================================================
   ANIMACIONES
======================================================= */

/* Feedback encima de opciones */
@keyframes quiz-fb-slide {
    from { opacity: 0; transform: translateY(-14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)      scale(1);  }
}

@keyframes quiz-badge-pop {
    from { opacity: 0; transform: scale(.2) rotate(-25deg); }
    to   { opacity: 1; transform: scale(1)  rotate(0deg);   }
}

/* Botón correcto: brillo pulsante */
@keyframes quiz-correct-glow {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(34,211,238,.25),
            0 0 20px rgba(34,211,238,.35),
            inset 0 1px 0 rgba(255,255,255,.06);
    }
    50% {
        box-shadow:
            0 0 0 5px rgba(34,211,238,.20),
            0 0 45px rgba(34,211,238,.60),
            0 0 80px rgba(34,211,238,.22),
            inset 0 1px 0 rgba(255,255,255,.12);
    }
}

/* Shimmer de luz sobre el botón correcto */
@keyframes quiz-shimmer {
    0%   { left: -80%; }
    100% { left: 160%; }
}

/* Pantalla final */
@keyframes quiz-final-in {
    from { opacity: 0; transform: scale(.85) translateY(20px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

@keyframes quiz-slide-down {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes quiz-emoji-bounce {
    from { opacity: 0; transform: scale(.3) translateY(-10px) rotate(-15deg); }
    to   { opacity: 1; transform: scale(1)  translateY(0)     rotate(0deg);   }
}

@keyframes quiz-ring-pop {
    from { opacity: 0; transform: scale(.4) rotate(-30deg); }
    to   { opacity: 1; transform: scale(1)  rotate(0deg);   }
}

@keyframes quiz-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes quiz-btn-appear {
    from { opacity: 0; transform: translateY(8px) scale(.95); }
    to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

@keyframes quiz-particle {
    0%   { opacity: 0; transform: translateY(0)    scale(0);               }
    15%  { opacity: 1;                                                       }
    85%  { opacity: .7;                                                      }
    100% { opacity: 0; transform: translateY(-90px) scale(1.3) rotate(60deg); }
}

@keyframes pulse-correct {
    0%   { box-shadow: 0 0 0   rgba(34,211,238,0);   }
    50%  { box-shadow: 0 0 28px rgba(34,211,238,.5);  }
    100% { box-shadow: 0 0 18px rgba(34,211,238,.25); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0);    }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px);  }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px);  }
}

/* =======================================================
   MOBILE
======================================================= */

@media (max-width: 640px) {
    .quiz-game-container { gap: .75rem; }
    .quiz-header          { padding: .9rem; }
    #quiz-progress        { font-size: .7rem; }
    #quiz-question        { font-size: 1.35rem; }
    #quiz-question-sub    { font-size: .8rem; }
    .quiz-option-btn      { padding: 12px 14px; font-size: .88rem; }
    #quiz-next-btn        { width: 100%; }

    .quiz-fb              { padding: .75rem .9rem; gap: .7rem; }
    .quiz-fb-icon         { width: 38px; height: 38px; font-size: 1.1rem; }
    .quiz-fb-title        { font-size: .9rem; }
    .quiz-fb-badge        { font-size: 1.3rem; }

    .quiz-final-screen    { padding: 2rem 1.25rem 1.75rem; min-height: 380px; gap: 1rem; }
    .quiz-final-emoji     { font-size: 3rem; }
    .quiz-final-heading   { font-size: 1.4rem; }
    .quiz-final-ring      { width: 130px; height: 130px; }
    .quiz-final-percent   { font-size: 2.1rem; }
    .quiz-final-percent small { font-size: 1.1rem; }
    .quiz-final-btn       { width: 100%; padding: .85rem 1rem; }
}