.quiz-page-hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.2), transparent 22%),
        linear-gradient(135deg, #1f9d4c, #12a5b4);
}

.quiz-page-hero::after {
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 360px;
    height: 360px;
    border: 55px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    content: '';
}

.quiz-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.quiz-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--quiz-accent, #28a745);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.quiz-page-hero .quiz-kicker {
    color: #fff;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
}

.quiz-page-hero h1 {
    max-width: 680px;
    margin: 1.2rem 0 1rem;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
}

.quiz-page-hero p {
    max-width: 620px;
    margin: 0;
    font-size: 1.25rem;
    opacity: 0.94;
}

.quiz-hero-visual {
    position: absolute;
    z-index: 1;
    right: 2rem;
    bottom: -2.2rem;
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
    font-size: clamp(3.8rem, 8vw, 7.5rem);
    filter: drop-shadow(0 12px 15px rgba(0, 0, 0, 0.15));
}

.quiz-hero-visual span:nth-child(2) { transform: translateY(-18px); }

.quiz-catalog-section { background: #f7fbf8; }

.quiz-card {
    --quiz-accent: #28a745;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(31, 41, 55, 0.08);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(31, 41, 55, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.quiz-card::before {
    display: block;
    height: 6px;
    background: var(--quiz-accent);
    content: '';
}

.quiz-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(31, 41, 55, 0.13);
}

.quiz-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 0;
}

.quiz-card-icon {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border-radius: 18px;
    background: color-mix(in srgb, var(--quiz-accent) 12%, white);
    font-size: 2.25rem;
}

.quiz-featured-badge {
    color: #8a5a00;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    background: #fff5d6;
    font-size: 0.75rem;
    font-weight: 700;
}

.quiz-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.3rem 1.5rem 1.5rem;
}

.quiz-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    color: #6b7280;
    margin-bottom: 0.8rem;
    font-size: 0.82rem;
}

.quiz-card h2 { font-size: 1.35rem; }
.quiz-card h2 a { color: #263238; text-decoration: none; }
.quiz-card h2 a:hover { color: var(--quiz-accent); }
.quiz-card p { color: #6b7280; }

.quiz-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: auto;
    padding-top: 1rem;
}

.quiz-difficulty {
    color: var(--quiz-accent);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.quiz-card-button {
    color: #fff;
    background: var(--quiz-accent);
}

.quiz-card-button:hover { color: #fff; filter: brightness(0.92); }

.quiz-learning-note {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 800px;
    margin: 3rem auto 0;
    padding: 1.1rem 1.3rem;
    border: 1px solid rgba(40, 167, 69, 0.18);
    border-radius: 14px;
    background: #fff;
}

.quiz-learning-note i { color: #28a745; font-size: 1.5rem; }
.quiz-learning-note p { margin: 0; color: #5d676d; }

.quiz-play-page {
    --quiz-accent: #28a745;
    min-height: calc(100vh - 82px);
    padding: 42px 0 80px;
    background:
        radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--quiz-accent) 9%, transparent), transparent 28%),
        #f5f8f6;
}

.quiz-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #5d676d;
    margin-bottom: 1.3rem;
    font-weight: 600;
    text-decoration: none;
}

.quiz-back-link:hover { color: var(--quiz-accent); }

.quiz-shell {
    max-width: 850px;
    margin: 0 auto;
    overflow: hidden;
    border-top: 7px solid var(--quiz-accent);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(31, 41, 55, 0.12);
}

.quiz-intro-panel,
.quiz-form,
.quiz-result,
.quiz-empty-state {
    padding: clamp(2rem, 6vw, 4rem);
}

.quiz-intro-panel { text-align: center; }

.quiz-intro-icon {
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    margin: 0 auto 1.3rem;
    border-radius: 26px;
    background: color-mix(in srgb, var(--quiz-accent) 12%, white);
    font-size: 3.5rem;
}

.quiz-intro-panel h1,
.quiz-result h1 { margin: 0.7rem auto 1rem; font-size: clamp(2rem, 5vw, 3rem); }
.quiz-intro-panel > p { max-width: 650px; margin: 0 auto 1.4rem; color: #657177; font-size: 1.08rem; }

.quiz-intro-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin: 1.6rem 0;
}

.quiz-intro-meta span {
    color: #566168;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: #f3f6f4;
    font-size: 0.9rem;
}

.quiz-start-button { background: var(--quiz-accent); border-color: var(--quiz-accent); }
.quiz-privacy-note { margin-top: 1rem !important; font-size: 0.82rem !important; }

.quiz-progress-header {
    display: flex;
    justify-content: space-between;
    color: #667178;
    font-size: 0.9rem;
    font-weight: 700;
}

.quiz-form { scroll-margin-top: 100px; }

.quiz-progress-track {
    height: 9px;
    margin: 0.65rem 0 2.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e9efeb;
}

.quiz-progress-value {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--quiz-accent);
    transition: width 0.3s ease;
}

.quiz-question { padding: 0; border: 0; }
.quiz-question legend { color: #263238; margin-bottom: 1.5rem; font-family: var(--font-family-secondary); font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 700; }
.quiz-answers { display: grid; gap: 0.8rem; }
.quiz-answer-input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.quiz-answer-label {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 64px;
    padding: 0.9rem 1rem;
    border: 2px solid #e6ebe8;
    border-radius: 14px;
    color: #3d484e;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.quiz-answer-label:hover { border-color: color-mix(in srgb, var(--quiz-accent) 45%, white); transform: translateX(3px); }
.quiz-answer-letter { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #f0f4f1; font-weight: 800; }
.quiz-answer-input:focus-visible + .quiz-answer-label { outline: 3px solid color-mix(in srgb, var(--quiz-accent) 30%, transparent); outline-offset: 2px; }
.quiz-answer-input:checked + .quiz-answer-label { border-color: var(--quiz-accent); background: color-mix(in srgb, var(--quiz-accent) 7%, white); }
.quiz-answer-input:checked + .quiz-answer-label .quiz-answer-letter { color: #fff; background: var(--quiz-accent); }

.quiz-form-status { min-height: 24px; color: #b42318; margin: 1rem 0 0; font-weight: 600; }
.quiz-navigation { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.quiz-previous-button { color: #59656b; border: 1px solid #d8dfdb; background: #fff; }
.quiz-next-button { margin-left: auto; background: var(--quiz-accent); border-color: var(--quiz-accent); }
.quiz-next-button:disabled { color: #fff; border-color: var(--quiz-accent); background: var(--quiz-accent); opacity: 0.48; }

.quiz-result { text-align: center; }
.quiz-result.is-perfect { background: linear-gradient(180deg, #fffdf4 0, #fff 42%); }
.quiz-score-ring { --quiz-score: 0deg; display: grid; width: 170px; height: 170px; place-items: center; margin: 0 auto 1.5rem; border-radius: 50%; background: conic-gradient(var(--quiz-accent) var(--quiz-score), #e8eeea 0); }
.quiz-result.is-perfect .quiz-score-ring { background: conic-gradient(#f6bd16 360deg, #fff2bd 0); box-shadow: 0 0 0 10px rgba(246, 189, 22, 0.13), 0 12px 35px rgba(178, 124, 0, 0.19); }
.quiz-score-ring > div { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 136px; height: 136px; border-radius: 50%; background: #fff; }
.quiz-score-ring strong { color: #263238; font-size: 2.5rem; line-height: 1; }
.quiz-score-ring span { color: #778187; font-size: 0.78rem; text-transform: uppercase; }
.quiz-result > p { max-width: 620px; margin: 0 auto 1rem; color: #667178; }
.quiz-score-line { font-size: 1.08rem; }
.quiz-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin: 1.5rem 0 0.4rem; }
.quiz-result-actions .btn-primary { background: var(--quiz-accent); border-color: var(--quiz-accent); }
.quiz-share-status { min-height: 24px; font-size: 0.88rem; }

.quiz-reward-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0 1.5rem;
    padding: clamp(1.4rem, 4vw, 2.2rem);
    overflow: hidden;
    border: 2px solid #f0c84b;
    border-radius: 22px;
    color: #493a09;
    background:
        radial-gradient(circle at 12% 15%, rgba(255, 255, 255, 0.9), transparent 22%),
        linear-gradient(135deg, #fff8d8, #fff1ad);
    box-shadow: 0 18px 40px rgba(127, 91, 0, 0.14);
    text-align: left;
}

.quiz-reward-card[hidden] { display: none; }
.quiz-reward-copy h2 { margin: 0.7rem 0 0.8rem; color: #3c310c; font-size: clamp(1.65rem, 4vw, 2.25rem); }
.quiz-reward-copy h2 strong { color: #138a3d; white-space: nowrap; }
.quiz-reward-copy > p { margin: 0 0 0.8rem; color: #64551d; }
.quiz-reward-unlocked { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem; border-radius: 999px; color: #674b00; background: rgba(255, 255, 255, 0.72); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.quiz-reward-note { font-size: 0.82rem; opacity: 0.88; }
.quiz-reward-claim { display: flex; align-items: stretch; flex-direction: column; gap: 0.8rem; text-align: center; }
.quiz-reward-claim[hidden], .quiz-reward-unavailable[hidden] { display: none; }
.quiz-qr-frame { padding: 10px; border: 1px solid rgba(83, 63, 0, 0.15); border-radius: 16px; background: #fff; box-shadow: 0 8px 18px rgba(80, 60, 0, 0.1); }
.quiz-qr-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.quiz-whatsapp-button { color: #fff; border-color: #128c4a; background: #128c4a; font-weight: 800; }
.quiz-whatsapp-button:hover { color: #fff; background: #0f753e; }
.quiz-reward-unavailable { grid-column: 1 / -1; margin: 0; padding: 0.9rem 1rem; border-radius: 12px; color: #694d00; background: rgba(255, 255, 255, 0.68); text-align: center; font-weight: 700; }

.quiz-review { margin-top: 2.5rem; text-align: left; }
.quiz-review > h2 { padding-top: 2rem; border-top: 1px solid #e3e9e5; text-align: center; }
.quiz-review-item { margin-top: 1rem; padding: 1.1rem 1.2rem; border-left: 5px solid; border-radius: 10px; background: #f8faf9; }
.quiz-review-item.is-correct { border-color: #28a745; }
.quiz-review-item.is-incorrect { border-color: #dc3545; }
.quiz-review-item h3 { margin-bottom: 0.65rem; font-size: 1rem; }
.quiz-review-item p { margin-bottom: 0.45rem; color: #5d676d; }
.quiz-review-verdict { font-weight: 800; }
.quiz-review-item.is-correct .quiz-review-verdict { color: #177b35; }
.quiz-review-item.is-incorrect .quiz-review-verdict { color: #a75900; }
.quiz-selected-answer { text-decoration-color: rgba(180, 35, 24, 0.52); text-decoration-line: line-through; }
.quiz-correct-answer { color: #177b35 !important; font-weight: 700; }
.quiz-answer-feedback { padding: 0.55rem 0.7rem; border-radius: 8px; background: #fff; font-size: 0.92rem; }
.quiz-explanation { padding-top: 0.5rem; border-top: 1px dashed #dce3df; font-size: 0.92rem; }

.quiz-fireworks { position: fixed; z-index: 1100; inset: 0; overflow: hidden; pointer-events: none; }
.quiz-firework-burst { position: absolute; width: 1px; height: 1px; }
.quiz-firework-spark {
    --spark-angle: 0deg;
    --spark-distance: 90px;
    --spark-color: #ffcc33;
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--spark-color);
    box-shadow: 0 0 8px var(--spark-color);
    animation: quiz-firework-pop 1.35s cubic-bezier(0.12, 0.7, 0.24, 1) forwards;
}

@keyframes quiz-firework-pop {
    0% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(0) scale(0.2); }
    12% { opacity: 1; }
    78% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(calc(-1 * var(--spark-distance))) scale(0.7); }
}

.quiz-empty-state { text-align: center; }
.quiz-empty-state > span { display: block; margin-bottom: 1rem; font-size: 3.5rem; }

.home-quiz-section { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff, #f3faf5); }
.home-quiz-section::before { position: absolute; top: -120px; left: -120px; width: 280px; height: 280px; border-radius: 50%; background: rgba(40, 167, 69, 0.06); content: ''; }

@media (max-width: 991.98px) {
    .quiz-hero-visual { opacity: 0.35; right: -1rem; }
    .quiz-hero-copy { max-width: 600px; }
}

@media (max-width: 575.98px) {
    .quiz-page-hero { padding: 64px 0; }
    .quiz-hero-visual { display: none; }
    .quiz-card-footer { align-items: stretch; flex-direction: column; }
    .quiz-card-button { text-align: center; }
    .quiz-play-page { padding: 24px 0 50px; }
    .quiz-shell { border-radius: 18px; }
    .quiz-intro-panel, .quiz-form, .quiz-result, .quiz-empty-state { padding: 1.5rem; }
    .quiz-intro-meta { align-items: stretch; flex-direction: column; }
    .quiz-navigation { align-items: stretch; flex-direction: column-reverse; }
    .quiz-navigation .btn { width: 100%; }
    .quiz-result-actions { flex-direction: column; }
    .quiz-result-actions .btn { width: 100%; }
    .quiz-reward-card { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; }
    .quiz-reward-claim { width: min(100%, 260px); margin: 0 auto; }
    .quiz-learning-note { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-card,
    .quiz-answer-label,
    .quiz-progress-value { transition: none; }
    .quiz-fireworks { display: none; }
}