/**
 * PPF Blueprint LMS — Apple quiz styling (v0.3.125).
 *
 * v0.3.124 φ quiz feedback UI: align result panel with dash φ
 * (radius 13 · pad 21 · gap 13), Mattone display, blue primary.
 * Fixes: Source Serif score → Mattone; flatten nested .ppfb-qr-missed
 * boxes; replace red/green result feedback with blue/#F5F5F7 language;
 * calm "Not yet passed" (no alarm red).
 *
 * STYLE ONLY. Zero logic changes: form IDs, input names, grading code,
 * answer keys, and progress/quiz meta are untouched. This stylesheet applies
 * the v0.3.56 Apple palette tokens and the iOS 27 motion curve to the quiz
 * surfaces: the quiz card, question labels, radio/checkbox option rows,
 * required markers, the Submit button, validation states, and the
 * results/average display.
 *
 * Scope: #ppfb-quiz on lesson pages and .ppfb-quiz-result / .ppfb-quiz-average
 * surfaces. Loaded AFTER ppfb-lesson and fluent-form-styles (declared
 * dependencies), so these rules win at equal specificity by source order.
 *
 * Palette discipline: the Apple-dark course tokens carry the design
 * (--course-* tokens with measured fallbacks). Two semantic colors sit on
 * the error/success tokens by necessity: Apple system red
 * (var(--course-text-error, #FF453A), 6.16:1 on black) for required markers
 * and validation errors, and Apple system green
 * (var(--course-text-success, #30D158), 10.39:1 on black) for passed states.
 * The old light-mode values (#FFFFFF card fills, #9B1B30 dark red at 2.59:1,
 * #1E6B34 dark green at 3.21:1, spice-brown rgba shadows) were unreadable on
 * the black field and were replaced in v0.3.119.
 *
 * v0.3.119 quiz highlight contrast fix: the selected option row mixed the
 * accent 8% into WHITE — a pale blue wash with light text on top, unreadable
 * (2026-09-25 iPhone report). It now mixes 22% accent into the card token
 * (#203850, 11.07:1 with --course-text-primary). Unselected rows use the card
 * token (body text 5.16:1). Text inputs use the field token so typed text
 * stays visible. Focus/selection shadows are blue-tinted.
 *
 * Motion: the iOS 27 ease-out curve cubic-bezier(0.22, 1, 0.36, 1) at
 * 160ms for control feedback; the result panel enters with a 260ms
 * rise. prefers-reduced-motion collapses all of it to instant.
 *
 * No-JS: every rule degrades to visible static content.
 */

/* ============ Quiz card ============ */
#ppfb-quiz.ppfb-quiz {
    background: var(--course-egret, #000000);
    border: 1px solid var(--course-candied-ginger, #1D1D1F);
    border-radius: 13px; /* φ — match dash cards */
    padding: 21px;
    margin: 0 0 34px;
    box-shadow: 0 1px 3px rgba(34, 26, 18, 0.08);
}
#ppfb-quiz.ppfb-quiz h2 {
    color: var(--course-text-primary, #F5F5F7);
    font-family: 'Mattone', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400 !important; /* Mattone Regular only */
    letter-spacing: -0.01em;
    margin: 0 0 13px;
}
#ppfb-quiz .ppfb-quiz-meta,
#ppfb-quiz .ppfb-quiz-helper,
#ppfb-quiz .ppfb-quiz-cooldown {
    color: var(--course-text-muted, #A1A1A6);
    font-size: 0.9375rem;
    line-height: 1.5;
}
#ppfb-quiz .ppfb-quiz-helper {
    margin: 0 0 13px;
}
#ppfb-quiz .ppfb-quiz-cooldown {
    background: var(--course-candied-ginger, #1D1D1F);
    background: color-mix(in srgb, var(--course-candied-ginger, #1D1D1F) 28%, var(--course-egret, #000000));
    border: 1px solid var(--course-candied-ginger, #1D1D1F);
    border-radius: 13px;
    padding: 13px 21px;
    margin: 0 0 13px;
    color: var(--course-text-on-tint, #F5F5F7);
}

/* ============ Questions ============ */
#ppfb-quiz .ff-el-input--label {
    color: var(--course-text-primary, #F5F5F7);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 0 0 0.625rem;
}
/* Required marker: Chili Pepper (SS27 accent). #FF3B30 was 3.02:1 on the
   Egret field (FAILS AA normal); Chili is 6.90:1 on Egret (PASS). */
#ppfb-quiz .ff-el-required-mark {
    color: var(--course-text-error, #FF453A);
    font-weight: 700;
    margin-left: 0.125em;
}

/* ============ Option rows: iOS-style tappable rows ============ */
#ppfb-quiz .ff-el-form-check {
    display: flex;
    align-items: flex-start;
    /* Golden-ratio radio spacing: gap = vertical row padding x 0.618
       = 12px x 0.618 = 7.42px. */
    gap: calc(0.75rem * 0.618);
    background: var(--course-surface-card, #1D1D1F);
    border: 1px solid var(--course-candied-ginger, #1D1D1F);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin: 0 0 0.625rem;
    min-height: 44px;
    cursor: pointer;
    transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
                background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
#ppfb-quiz .ff-el-form-check:hover {
    border-color: var(--course-arabian-spice, #2997FF);
}
/* v0.3.61: ppfb-lesson.css carries
   #ppfb-quiz .fluentform .ff-el-form-check-label{display:inline-flex;
   align-items:center;...} at (1,2,0), which beat the v0.3.60 rule at (1,1,0)
   and left the radio vertically centered against multi-line answers.
   Raised to (1,2,0) via .fluentform; ppfb-quiz-apple.css loads AFTER
   ppfb-lesson.css (declared dependencies), so this wins by source order
   and the radio top-aligns to the first text line. The lesson rule's
   min-height:44px touch floor is untouched and still applies. */
#ppfb-quiz .fluentform .ff-el-form-check-label {
    color: var(--course-text-body, #8E8E93);
    font-size: 1rem;
    line-height: 1.45;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    /* v0.3.60: Fluent Forms nests the native control INSIDE the label
       (<label class="ff-el-form-check-label"><input ...> <span>text</span>
       </label>), so the row-level flex above never separated the control
       from the text and the radio painted over the first word (iPhone
       390px, 2026-09-20). The label itself becomes the flex row, with the
       same golden-ratio radio spacing as the row above. */
    display: flex;
    align-items: flex-start;
    gap: calc(0.75rem * 0.618);
}
/* Native control tinted to the primary action accent.
   v0.3.61: raised to (1,2,0) alongside the label rule so no lower-
   specificity third-party or theme rule can re-pin or re-position it. */
#ppfb-quiz .fluentform .ff-el-form-check-input {
    accent-color: var(--course-arabian-spice, #2997FF);
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    /* v0.3.60: pin against any third-party absolute-position rule so the
       control can never paint over the option text again. */
    position: static;
    margin: 0;
    /* Golden-ratio optical top offset = (text line-height minus radio
       size) x 0.618 = (23.2px - 20px) x 0.618 = 3.2px x 0.618 = 1.98px, so
       the control sits against the first text line, not the row middle. */
    margin-top: calc((1.45rem - 1.25rem) * 0.618);
    cursor: pointer;
}
/* v0.3.60: the option text span is the label's flexible column next to the
   pinned radio. v0.3.61: raised to (1,2,1) to match the label rule. */
#ppfb-quiz .fluentform .ff-el-form-check-label > span {
    flex: 1;
    min-width: 0;
}
/* Selected row: spice ring on a warm tint. :has() carries it where
   supported (iOS 15.4+); the accent-color rule above is the fallback. */
#ppfb-quiz .ff-el-form-check:has(.ff-el-form-check-input:checked) {
    border-color: var(--course-arabian-spice, #2997FF);
    border-width: 2px;
    padding: calc(0.75rem - 1px) calc(1rem - 1px);
    /* Selected state keeps the phi ratio: vertical padding shrinks 1px to
       hold the box size, so gap = 11px x 0.618 = 6.80px. */
    gap: calc((0.75rem - 1px) * 0.618);
    background: color-mix(in srgb, var(--course-arabian-spice, #2997FF) 22%, var(--course-surface-card, #1D1D1F));
    box-shadow: 0 1px 4px rgba(41, 151, 255, 0.25);
}
#ppfb-quiz .ff-el-form-check:has(.ff-el-form-check-input:checked) .ff-el-form-check-label {
    color: var(--course-text-primary, #F5F5F7);
    font-weight: 500;
}
#ppfb-quiz .ff-el-form-check:has(.ff-el-form-check-input:focus-visible) {
    outline: 2px solid var(--course-arabian-spice, #2997FF);
    outline-offset: 2px;
}

/* Text inputs inside quizzes (short-answer), if any. */
#ppfb-quiz .ff-el-form-control {
    border: 1px solid var(--course-candied-ginger, #1D1D1F);
    border-radius: 12px;
    background: var(--course-egret, #000000);
    color: var(--course-text-primary, #F5F5F7);
    font-size: 1rem;
    padding: 0.75rem 1rem;
    min-height: 44px;
    transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
#ppfb-quiz .ff-el-form-control:focus {
    border-color: var(--course-arabian-spice, #2997FF);
    box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.25);
    outline: none;
}

/* ============ Validation states ============ */
/* Fluent Forms marks invalid fields aria-invalid; the required marker rule
   above covers the asterisk. Error copy renders in system red. */
#ppfb-quiz [aria-invalid="true"] {
    border-color: var(--course-text-error, #FF453A);
}
#ppfb-quiz .ff-el-form-check:has([aria-invalid="true"]) {
    border-color: var(--course-text-error, #FF453A);
    box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.14);
}
#ppfb-quiz .ff-el-error,
#ppfb-quiz .error,
#ppfb-quiz [class*="ff-"][class*="error"] {
    color: var(--course-text-error, #FF453A);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.375rem;
}

/* ============ Submit: primary CTA treatment (SS27 spec section 2e) ============
   Princess Blue bg, white text, navy hover. Exactly one submit control. */
#ppfb-quiz .ff-btn-submit {
    appearance: none;
    background-color: var(--course-button-bg, #0071E3);
    border: 1px solid var(--course-button-bg, #0071E3);
    color: #FFFFFF;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 13px;
    min-height: 50px;
    padding: 13px 21px;
    width: 100%;
    cursor: pointer;
    transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
                background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.28);
}
#ppfb-quiz .ff-btn-submit:hover {
    background-color: var(--course-button-bg-hover, #0068D1);
    border-color: var(--course-button-bg-hover, #0068D1);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.32);
}
#ppfb-quiz .ff-btn-submit:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 113, 227, 0.24);
}
#ppfb-quiz .ff-btn-submit:focus-visible {
    outline: 2px solid var(--course-focus-ring, #F5F5F7);
    outline-offset: 3px;
}
#ppfb-quiz .ff-btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============ Status, average, results ============ */
#ppfb-quiz .ppfb-quiz-status {
    font-family: 'Mattone', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.0625rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0 0 13px;
}
#ppfb-quiz .ppfb-quiz-status.passed {
    color: var(--course-button-bg, #0071E3);
}
#ppfb-quiz .ppfb-quiz-average,
#ppfb-quiz-average-live {
    color: var(--course-text-muted, #A1A1A6);
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 13px;
    padding: 13px 21px;
    background: color-mix(in srgb, var(--course-heritage-gold, #E2B33D) 12%, var(--course-egret, #000000));
    border: 1px solid color-mix(in srgb, var(--course-heritage-gold, #E2B33D) 45%, var(--course-candied-ginger, #1D1D1F));
    border-radius: 13px;
}

/* Result panel (rendered by ppfb-quiz-result.js after submit).
   v0.3.124: dash φ — radius 13 · pad 21 · gap 13; Mattone score/head;
   blue primary (no red/green alarm); flat missed rows (no nested boxes). */
.ppfb-quiz-result {
    display: flex;
    flex-direction: column;
    gap: 13px;
    background: var(--course-egret, #000000);
    border: 1px solid var(--course-candied-ginger, #1D1D1F);
    border-radius: 13px;
    padding: 21px;
    margin: 21px 0 0;
    box-shadow: 0 1px 3px rgba(34, 26, 18, 0.08);
    animation: ppfb-qr-rise 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ppfb-qr-rise {
    from { opacity: 0; transform: translateY(13px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ppfb-quiz-result > * {
    margin: 0; /* gap owns vertical rhythm */
}
.ppfb-quiz-result h3.ppfb-qr-head,
.ppfb-quiz-result .ppfb-qr-head {
    font-family: 'Mattone', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 21px;
    font-weight: 400 !important; /* Mattone Regular — no UA h3 bold */
    letter-spacing: -0.01em;
    color: var(--course-text-primary, #F5F5F7);
}
.ppfb-quiz-result .ppfb-qr-head.ppfb-qr-pass {
    color: var(--course-button-bg, #0071E3);
}
.ppfb-quiz-result .ppfb-qr-head.ppfb-qr-fail {
    /* Calm fail — primary text, not alarm red */
    color: var(--course-text-primary, #F5F5F7);
}
.ppfb-quiz-result .ppfb-qr-score {
    font-family: 'Mattone', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 34px; /* 8φ³ */
    font-weight: 400 !important;
    color: var(--course-text-primary, #F5F5F7);
    letter-spacing: -0.02em;
    font-variant-numeric: lining-nums tabular-nums;
}
.ppfb-quiz-result .ppfb-qr-note,
.ppfb-quiz-result .ppfb-qr-cooldown {
    color: var(--course-text-muted, #A1A1A6);
    font-size: 0.9375rem;
    line-height: 1.5;
}
/* Flatten: no nested card inside the result panel */
.ppfb-quiz-result .ppfb-qr-missed {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0 13px;
    margin: 0;
    border-bottom: 1px solid var(--course-candied-ginger, #1D1D1F);
}
.ppfb-quiz-result .ppfb-qr-missed:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.ppfb-quiz-result .ppfb-qr-mine {
    color: var(--course-text-muted, #A1A1A6);
    font-weight: 500;
    margin: 0 0 8px;
}
.ppfb-quiz-result .ppfb-qr-correct-answer {
    color: var(--course-button-bg, #0071E3);
    font-weight: 600;
    margin: 0 0 8px;
}
.ppfb-quiz-result .ppfb-qr-expl {
    color: var(--course-text-body, #8E8E93);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}
.ppfb-quiz-result .ppfb-qr-correct {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ppfb-quiz-result .ppfb-qr-correct li {
    color: var(--course-text-primary, #F5F5F7);
    font-weight: 500;
    padding: 0;
}
.ppfb-quiz-result .ppfb-qr-study {
    border-top: 1px solid var(--course-candied-ginger, #1D1D1F);
    padding-top: 13px;
    margin-top: 0;
}
.ppfb-quiz-result .ppfb-qr-average {
    font-family: 'Mattone', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    color: var(--course-text-primary, #F5F5F7);
    font-size: 1.0625rem;
}
.ppfb-quiz-result .ppfb-qr-perfect {
    color: var(--course-text-primary, #F5F5F7);
    font-weight: 600;
}
.ppfb-quiz-result .ppfb-qr-next {
    color: var(--course-text-muted, #A1A1A6);
    font-size: 0.9375rem;
}
/* Retake / retry: secondary buttons, quiet chrome. Text uses the darkened
   accent (--course-link): base spice text was 4.26:1 on white (FAILS AA
   normal); the darkened accent is 6.90:1 (PASS). Border keeps the base
   accent (non-text, 4.26:1 passes 3:1). */
.ppfb-quiz-result .ppfb-qr-retake.button,
.ppfb-quiz-result .ppfb-qr-retry.button {
    appearance: none;
    background: transparent;
    border: 1.5px solid var(--course-button-bg, #0071E3);
    color: var(--course-button-bg, #0071E3);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 13px;
    min-height: 48px;
    padding: 13px 21px;
    cursor: pointer;
    transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
                background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ppfb-quiz-result .ppfb-qr-retake.button:hover,
.ppfb-quiz-result .ppfb-qr-retry.button:hover {
    background: color-mix(in srgb, var(--course-button-bg, #0071E3) 12%, transparent);
}
.ppfb-quiz-result .ppfb-qr-retake.button:active,
.ppfb-quiz-result .ppfb-qr-retry.button:active {
    transform: scale(0.98);
}
.ppfb-quiz-result .ppfb-qr-retake.button:focus-visible,
.ppfb-quiz-result .ppfb-qr-retry.button:focus-visible {
    outline: 2px solid var(--course-button-bg, #0071E3);
    outline-offset: 3px;
}
.ppfb-quiz-result .ppfb-qr-reviewed-label {
    color: var(--course-text-muted, #A1A1A6);
    font-size: 0.9375rem;
}

/* Dashboard average sections ride the same language. */
.ppfb-quiz-average,
.ppfb-quiz-average-free {
    background: var(--course-egret, #000000);
    border: 1px solid var(--course-candied-ginger, #1D1D1F);
    border-radius: 13px;
    padding: 21px;
}
.ppfb-quiz-average h2,
.ppfb-quiz-average-free h2 {
    font-family: 'Mattone', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    color: var(--course-text-primary, #F5F5F7);
    letter-spacing: -0.01em;
}



/* ============ v0.3.125: quiz PASS → next chapter overlay ============
   φ scale 8·13·21·34·55. Covers the lesson navigation beat so the
   full page change feels intentional (prefetch + opaque scrim), not a
   janky blank reload. Mute is owned by ppfbSfx, not this CSS. */
body.ppfb-qr-advance-lock {
    overflow: hidden;
}
.ppfb-qr-advance {
    position: fixed;
    inset: 0;
    z-index: 144; /* above motion sheet (90) + chrome */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 21px;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 233ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ppfb-qr-advance.is-in {
    opacity: 1;
    pointer-events: auto;
}
.ppfb-qr-advance.is-leaving {
    opacity: 0;
    transition-duration: 144ms;
}
.ppfb-qr-advance__card {
    width: min(100%, 377px); /* φ-ish card width */
    background: var(--course-egret, #000000);
    border: 1px solid var(--course-candied-ginger, #1D1D1F);
    border-radius: 13px;
    padding: 34px 21px 21px;
    text-align: center;
    box-shadow: 0 13px 34px rgba(0, 0, 0, 0.45);
    transform: translateY(21px) scale(0.98);
    opacity: 0;
    transition: transform 233ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 233ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ppfb-qr-advance.is-in .ppfb-qr-advance__card {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.ppfb-qr-advance__title {
    margin: 0;
    font-family: 'Mattone', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 21px;
    font-weight: 400 !important;
    letter-spacing: -0.01em;
    color: var(--course-text-primary, #F5F5F7);
}
.ppfb-qr-advance__trail {
    margin: 13px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    font-family: 'Mattone', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 34px;
    font-weight: 400 !important;
    letter-spacing: -0.02em;
    color: var(--course-button-bg, #0071E3);
}
.ppfb-qr-advance__arrow {
    display: inline-block;
    transform: translateX(-8px);
    opacity: 0.55;
    transition: transform 377ms cubic-bezier(0.22, 1, 0.36, 1) 89ms,
                opacity 233ms ease 89ms;
}
.ppfb-qr-advance.is-in .ppfb-qr-advance__arrow {
    transform: translateX(0);
    opacity: 1;
}
.ppfb-qr-advance__next {
    color: var(--course-button-bg, #0071E3);
}
.ppfb-qr-advance__dest {
    margin: 13px 0 0;
    color: var(--course-text-muted, #A1A1A6);
    font-size: 0.9375rem;
    line-height: 1.45;
}
.ppfb-qr-advance__hint {
    margin: 21px 0 0;
    color: var(--course-text-muted, #A1A1A6);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
    .ppfb-qr-advance,
    .ppfb-qr-advance__card,
    .ppfb-qr-advance__arrow {
        transition: none !important;
    }
    .ppfb-qr-advance__card {
        transform: none;
        opacity: 1;
    }
    .ppfb-qr-advance__arrow {
        transform: none;
        opacity: 1;
    }
}
html[data-motion="reduced"] .ppfb-qr-advance,
html[data-motion="reduced"] .ppfb-qr-advance__card,
html[data-motion="reduced"] .ppfb-qr-advance__arrow {
    transition: none !important;
}
html[data-motion="reduced"] .ppfb-qr-advance__card {
    transform: none;
    opacity: 1;
}
html[data-motion="reduced"] .ppfb-qr-advance__arrow {
    transform: none;
    opacity: 1;
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
    #ppfb-quiz .ff-el-form-check,
    #ppfb-quiz .ff-el-form-control,
    #ppfb-quiz .ff-btn-submit,
    .ppfb-quiz-result .ppfb-qr-retake.button,
    .ppfb-quiz-result .ppfb-qr-retry.button {
        transition: none;
    }
    #ppfb-quiz .ff-btn-submit:active,
    .ppfb-quiz-result .ppfb-qr-retake.button:active,
    .ppfb-quiz-result .ppfb-qr-retry.button:active {
        transform: none;
    }
    .ppfb-quiz-result {
        animation: none;
    }
}

/* ============ Small screens: roomier card, full-width submit ============ */
@media (max-width: 480px) {
    #ppfb-quiz.ppfb-quiz,
    .ppfb-quiz-result {
        padding: 21px;
        border-radius: 13px;
    }
}