#quiz-section [hidden] { display: none !important; }

/* ── Intro ──────────────────────────────────────────────────────────── */

#quiz-intro {
    gap: 2em;
    width: 100%;
}

/* ── Panels ─────────────────────────────────────────────────────────── */

.quiz-panel {
    width: 100%;
    max-width: 56ch;
    gap: 1.5em;
    text-align: center;
}

/* ── Question ───────────────────────────────────────────────────────── */

.quiz-question {
    font-size: var(--font-size-body-2xl);
    font-weight: var(--font-weight-heading);
    letter-spacing: -0.04em;
    line-height: var(--line-height-md);
    max-width: 44ch;
    text-wrap: balance;
    margin: 0;
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.quiz-buttons { gap: 1em; }

.btn-outline--no,
.btn-outline--yes,
.btn-outline--restart { color: var(--color-6); border-color: var(--color-6); min-width: 8em;}

.btn-outline--dodge { transition: transform 0.12s ease-out; }

/* ── Result panel ───────────────────────────────────────────────────── */

.quiz-result-title {
    font-size: var(--font-size-body-2xl);
    font-weight: var(--font-weight-heading);
    letter-spacing: -0.04em;
    text-wrap: balance;
    line-height: var(--line-height-md);
    margin: 0;
}

.quiz-result-body {
    text-wrap: balance;
    opacity: 0.85;
    margin: 0;
}

/* ── Visual outcomes ────────────────────────────────────────────────── */

.quiz-result-visual {
    position: relative;
    width: 100%;
    min-height: 5em;
    gap: 0.75em;
}

/* Think: typewriter */
.visual-typewriter {
    font-size: var(--font-size-body-4xl);
    font-weight: var(--font-weight-heading);
    color: var(--color-5);
    letter-spacing: -0.04em;
    line-height: var(--line-height-sm);
}

.visual-typewriter--done::after {
    content: '|';
    animation: blink-cursor 1s step-end infinite;
}

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

/* Stamp: drops and lands */
.visual-stamp {
    position: absolute;
    left: 50%;
    font-size: var(--font-size-body-lg);
    font-weight: 900;
    width: fit-content;
    letter-spacing: 0.12em;
    border: 3px solid var(--color-5);
    color: var(--color-5);
    padding: 0.3em 0.9em;
    border-radius: var(--border-radius-sm);
    transform: rotate(-8deg) scale(0) translate(-50%, -2em);
    transform-origin: center center;
    opacity: 0;
    transition: transform 400ms var(--timing-function-snappy),
                opacity   300ms ease-out;
}

.visual-stamp--landed {
    transform: rotate(-8deg) scale(1) translate(-50%, 0.5em);
    opacity: 1;
}

/* Confetti and fanfare */
.quiz-visual--confetti,
.quiz-visual--fanfare {
    min-height: 8em;
}

.visual-confetti-piece {
    position: absolute;
    top: -1em;
    left: var(--x, 50%);
    font-size: var(--font-size-body-lg);
    opacity: 0;
    animation: confetti-fall var(--duration, 2s) var(--delay, 0s) ease-in infinite;
}

.visual-confetti-piece--fanfare { color: var(--color-5); }

@keyframes confetti-fall {
    0%   { opacity: 0; transform: translateY(0)    rotate(0deg); }
    10%  { opacity: 1; }
    90%  { opacity: 1; transform: translateY(9em)  rotate(324deg); }
    100% { opacity: 0; transform: translateY(10em) rotate(360deg); }
}

/* Icons */
.quiz-visual--icons { gap: 1.5em; }

.visual-tech-icon {
    font-size: var(--font-size-body-3xl);
    opacity: 0;
    animation:
        icon-appear 0.5s var(--blink-delay, 0s) ease-out forwards,
        icon-pulse  1.2s var(--blink-delay, 0s) ease-in-out infinite;
}

@keyframes icon-appear {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1);   }
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.4; }
}

/* Disclaimer (fanfare outcome) */
.visual-disclaimer {
    font-size: var(--font-size-body-xs);
    text-align: center;
    opacity: 0.5;
    margin: 1em;
}