/* ═══════════════════════════════════════════════════════════════
   QUIZ OVERRIDES — additions layered on top of bluff-theme.css
   Only for elements that don't exist in صيدهم (countdown overlay).
   All visual identity (colors, typography, layout) inherits from
   bluff-theme.css so the two games look identical.
   ═══════════════════════════════════════════════════════════════ */

body.quiz-page #playPanel {
    position: relative;
}

body.quiz-page .category-button.locked-selected,
body.quiz-page .category-button.locked-selected:disabled {
    color: #ffffff !important;
    border-color: #fbbf24 !important;
    background: linear-gradient(135deg, #0f766e, #1267ff, #7c3aed) !important;
    box-shadow:
        0 0 0 4px rgba(251, 191, 36, 0.32),
        0 18px 36px rgba(18, 103, 255, 0.34) !important;
    opacity: 1 !important;
    transform: translateY(-2px);
}

body.quiz-page .category-button.locked-selected strong {
    color: #ffffff;
}

body.quiz-page #choicesPanel .bluff-choice-button.last-row-single {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc((100% - 10px) / 2));
}

body.quiz-page .countdown-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 6, 32, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: inherit;
    z-index: 20;
    pointer-events: none;
    animation: quizCountdownFade 0.28s ease-out;
}

body.quiz-page .countdown-number {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    font-size: clamp(6rem, 22vw, 12rem);
    color: #fbbf24;
    text-shadow:
        0 0 32px rgba(251, 191, 36, 0.65),
        0 8px 40px rgba(10, 6, 32, 0.75);
    animation: quizCountdownPulse 0.9s ease-out;
    line-height: 1;
}

@keyframes quizCountdownFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes quizCountdownPulse {
    0% { transform: scale(0.35); opacity: 0; }
    35% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body.quiz-page .countdown-overlay,
    body.quiz-page .countdown-number {
        animation: none;
    }
}

@media (max-width: 380px) {
    body.quiz-page #choicesPanel .bluff-choice-button.last-row-single {
        width: 100%;
    }
}