/* Live Trivia · Ugly Sweater phone skin (owner decision 2026-10-06): the
   canvas's Holiday Lights 2 boards on the phone. Scoped to
   #trivia-content.pop-quiz.ltd-uglySweater; layered on the shared Pop Quiz
   structure, so every rule here only restyles it.

   A red knitted sweater with a green fair-isle band across the top — each a
   single 16-point SVG stitch tile repeated as a background, never a DOM node
   per stitch — cream felt patches with dashed blanket stitches, answers with
   their letter on a sewn-on button (the only colour; the answer text is
   always maroon), and Fredoka (renamed "Sidekick Trivia Fredoka") for every
   word. The question screen keeps the timer, the question, every answer and
   the score bar on one screen: the score bar stays in flow under the
   answers (the shared rule), and the answer patches give back height on
   short screens.

   Motion (P1–P7): patches drop onto the sweater and settle with a felt
   wobble, buttons pop on, name-tape ends are stitched down, the timer's
   running stitch unpicks, the correct patch's check is stitched in while
   knitted flakes burst out, red yarn is pulled through a wrong one, the
   scarf unrolls for "get ready" and the final score hangs in a stocking that
   swings on its loop. Transforms, clips and stroke offsets only. */

@font-face { font-family: 'Sidekick Trivia Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sidekick-trivia-fredoka-semi-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sidekick-trivia-fredoka-bold-v1.woff2') format('woff2'); }

#trivia-content.pop-quiz.ltd-uglySweater {
    --us-felt: #F6EEDC; --us-tile: #F4EAD5; --us-gold: #F7C948; --us-green: #1E6B3F; --us-red: #B8222F;
    --us-maroon: #3B1214; --us-ink: #A3182A; --us-thread: #8E1B2A; --us-cream: #FFF6E6;
    --us-shadow: rgba(60, 8, 12, 0.45);
    --pq-ink: #3B1214; --pq-cream: #F6EEDC; --pq-yellow: #F7C948; --pq-green: #1E6B3F; --pq-red: #B8222F;
    position: relative;
    font-family: 'Sidekick Trivia Fredoka', 'Fredoka', system-ui, sans-serif;
    font-weight: 600;
    color: var(--us-felt);
    padding-top: 64px;
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, rgba(255, 210, 170, 0.08), rgba(40, 0, 6, 0.35)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%236E0F18'/%3E%3Cg fill='%23B8222F' stroke='%238E1621' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 12px 12px,
        #6E0F18;
}
/* The fair-isle band across the top: one repeat of cream stitches over the
   green knit. */
#trivia-content.pop-quiz.ltd-uglySweater::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 49px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 112'%3E%3Crect x='0' y='1' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='32' y='1' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='64' y='1' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='96' y='1' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='0' y='17' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='16' y='33' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='32' y='49' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='48' y='65' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='64' y='81' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='80' y='65' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='96' y='49' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='112' y='33' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='16' y='97' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='48' y='97' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='80' y='97' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='112' y='97' width='16' height='16' fill='%23D6C49C'/%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='36.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 36.8 8%29'/%3E%3Cellipse cx='43.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 43.2 8%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='68.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 68.8 8%29'/%3E%3Cellipse cx='75.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 75.2 8%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='100.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 100.8 8%29'/%3E%3Cellipse cx='107.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 107.2 8%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='24' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 24%29'/%3E%3Cellipse cx='11.2' cy='24' rx='3.2' ry='7.68' transform='rotate%2832 11.2 24%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='20.8' cy='40' rx='3.2' ry='7.68' transform='rotate%28-32 20.8 40%29'/%3E%3Cellipse cx='27.2' cy='40' rx='3.2' ry='7.68' transform='rotate%2832 27.2 40%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='36.8' cy='56' rx='3.2' ry='7.68' transform='rotate%28-32 36.8 56%29'/%3E%3Cellipse cx='43.2' cy='56' rx='3.2' ry='7.68' transform='rotate%2832 43.2 56%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='52.8' cy='72' rx='3.2' ry='7.68' transform='rotate%28-32 52.8 72%29'/%3E%3Cellipse cx='59.2' cy='72' rx='3.2' ry='7.68' transform='rotate%2832 59.2 72%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='68.8' cy='88' rx='3.2' ry='7.68' transform='rotate%28-32 68.8 88%29'/%3E%3Cellipse cx='75.2' cy='88' rx='3.2' ry='7.68' transform='rotate%2832 75.2 88%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='84.8' cy='72' rx='3.2' ry='7.68' transform='rotate%28-32 84.8 72%29'/%3E%3Cellipse cx='91.2' cy='72' rx='3.2' ry='7.68' transform='rotate%2832 91.2 72%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='100.8' cy='56' rx='3.2' ry='7.68' transform='rotate%28-32 100.8 56%29'/%3E%3Cellipse cx='107.2' cy='56' rx='3.2' ry='7.68' transform='rotate%2832 107.2 56%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='116.8' cy='40' rx='3.2' ry='7.68' transform='rotate%28-32 116.8 40%29'/%3E%3Cellipse cx='123.2' cy='40' rx='3.2' ry='7.68' transform='rotate%2832 123.2 40%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='20.8' cy='104' rx='3.2' ry='7.68' transform='rotate%28-32 20.8 104%29'/%3E%3Cellipse cx='27.2' cy='104' rx='3.2' ry='7.68' transform='rotate%2832 27.2 104%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='52.8' cy='104' rx='3.2' ry='7.68' transform='rotate%28-32 52.8 104%29'/%3E%3Cellipse cx='59.2' cy='104' rx='3.2' ry='7.68' transform='rotate%2832 59.2 104%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='84.8' cy='104' rx='3.2' ry='7.68' transform='rotate%28-32 84.8 104%29'/%3E%3Cellipse cx='91.2' cy='104' rx='3.2' ry='7.68' transform='rotate%2832 91.2 104%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='116.8' cy='104' rx='3.2' ry='7.68' transform='rotate%28-32 116.8 104%29'/%3E%3Cellipse cx='123.2' cy='104' rx='3.2' ry='7.68' transform='rotate%2832 123.2 104%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 49px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%230D3A22'/%3E%3Cg fill='%231F6E42' stroke='%2315502F' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 7px 7px, #0D3A22;
    box-shadow: 0 3px 0 rgba(40, 0, 6, 0.35);
}
#trivia-content.pop-quiz.ltd-uglySweater .pq-title,
#trivia-content.pop-quiz.ltd-uglySweater .pq-display { font-family: 'Sidekick Trivia Fredoka', 'Fredoka', system-ui, sans-serif; font-weight: 700; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-sticker {
    background: var(--us-felt); color: var(--us-maroon); border: none; border-radius: 20px;
    box-shadow: 0 6px 0 var(--us-shadow);
    outline: 3px dashed var(--us-red); outline-offset: -10px;
}

/* ── Join (P1): the title patch drops on and settles; the join button is a
   green felt patch ── */
#trivia-content.pop-quiz.ltd-uglySweater .trivia-title {
    font-family: 'Sidekick Trivia Fredoka', system-ui, sans-serif; font-weight: 700;
    font-size: 2.1rem; line-height: 1.05;
    background: var(--us-felt); color: var(--us-ink);
    border: none; border-radius: 20px; box-shadow: 0 7px 0 var(--us-shadow);
    outline: 3px dashed var(--us-red); outline-offset: -10px;
    padding: 22px 20px 24px; margin: 14px 4px 30px; transform: rotate(-1.5deg);
    animation: ltdusDrop 0.7s cubic-bezier(0.3, 1.35, 0.5, 1) both, ltdusSettle 0.9s 0.55s ease-out both;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-name-input {
    height: 64px; margin-bottom: 20px;
    background: var(--us-tile); color: var(--us-maroon);
    border: none; border-radius: 16px; box-shadow: 0 5px 0 var(--us-shadow);
    outline: 3px dashed var(--us-green); outline-offset: -8px;
    font-family: 'Sidekick Trivia Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 1.4rem;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-name-input::placeholder { color: rgba(59, 18, 20, 0.45); }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-join-btn {
    height: 72px; background: var(--us-green); color: var(--us-felt);
    border: none; border-radius: 20px; box-shadow: 0 7px 0 rgba(10, 30, 16, 0.6);
    outline: 3px dashed var(--us-felt); outline-offset: -9px;
    font-family: 'Sidekick Trivia Fredoka', system-ui, sans-serif; font-weight: 700; font-size: 1.8rem;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-join-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 rgba(10, 30, 16, 0.6); }
#trivia-content.pop-quiz.ltd-uglySweater #trivia-random-name p { color: var(--us-felt) !important; font-weight: 600; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-random-name-display {
    display: inline-block; padding: 10px 30px 12px; color: var(--us-ink);
    background: var(--us-felt); border: none; border-left: 4px dashed var(--us-red); border-right: 4px dashed var(--us-red);
    border-radius: 3px; box-shadow: 0 5px 0 var(--us-shadow); transform: rotate(-1.5deg);
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-reroll-btn {
    color: var(--us-felt); background: transparent; border: 3px dashed var(--us-felt); border-radius: 999px;
}

/* You're in (P1): a gold patch pops on and settles, the name tape drops
   below it and its two ends are stitched down. */
#trivia-content.pop-quiz.ltd-uglySweater #trivia-lobby:has(#trivia-joined-msg[style*="block"]) .trivia-title { display: none; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-joined .pq-burst {
    width: 230px; height: 230px; border-radius: 50%; clip-path: none;
    background: radial-gradient(circle at 34% 28%, #FFE08A, var(--us-gold) 55%, #E4B23A);
    color: var(--us-maroon); font-size: 2.7rem; line-height: 0.95;
    box-shadow: 0 8px 0 var(--us-shadow);
    outline: 4px dashed var(--us-green); outline-offset: -16px;
    animation: ltdusPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both, ltdusWobble 0.9s 0.45s ease-out both;
}
#trivia-content.pop-quiz.ltd-uglySweater .pq-joined .pq-burst span { transform: rotate(-4deg); }
#trivia-content.pop-quiz.ltd-uglySweater .pq-name-chip {
    position: relative; display: inline-block; margin: 26px 0 20px; padding: 10px 32px 12px;
    background: var(--us-felt); color: var(--us-ink); font-weight: 600; font-size: 2rem; line-height: 1;
    border: none; border-radius: 3px; box-shadow: 0 5px 0 var(--us-shadow); transform: rotate(-2deg);
    animation: ltdusTape 0.55s 0.55s cubic-bezier(0.3, 1.35, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-uglySweater .pq-name-chip::before,
#trivia-content.pop-quiz.ltd-uglySweater .pq-name-chip::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 4px;
    background: repeating-linear-gradient(180deg, var(--us-red) 0 9px, transparent 9px 15px);
    transform-origin: 50% 0; animation: ltdusSew 0.4s 1.05s ease-out both;
}
#trivia-content.pop-quiz.ltd-uglySweater .pq-name-chip::before { left: 5px; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-name-chip::after { right: 5px; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-waiting-joined p,
#trivia-content.pop-quiz.ltd-uglySweater .pq-wait-line {
    color: var(--us-felt); font-size: 1.2rem; font-weight: 600; text-shadow: 0 2px 0 rgba(40, 0, 6, 0.6);
    animation: ltdusRise 0.5s 0.9s cubic-bezier(0.3, 1.35, 0.5, 1) both;
}

/* ── Question (P2): the timer's running stitch unpicks; patches drop on
   and settle; buttons pop on ── */
#trivia-content.pop-quiz.ltd-uglySweater .trivia-timer-bar {
    height: 16px; overflow: visible;
    background: repeating-linear-gradient(90deg, rgba(246, 238, 220, 0.28) 0 12px, transparent 12px 20px) 0 50% / 100% 5px no-repeat;
    border: none; border-radius: 0;
    animation: ltdusDropSmall 0.5s 0.1s cubic-bezier(0.3, 1.35, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-timer-fill {
    position: relative; border-radius: 0;
    background: repeating-linear-gradient(90deg, var(--us-thread-color, #F7C948) 0 12px, transparent 12px 20px) 0 50% / 100% 7px no-repeat !important;
    background-color: transparent !important;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-timer-fill[data-level="warn"] { --us-thread-color: #F39233; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-timer-fill[data-level="urgent"] { --us-thread-color: #F04A4A; }
/* The needle at the end of the thread. */
#trivia-content.pop-quiz.ltd-uglySweater .trivia-timer-fill::after {
    content: ''; position: absolute; right: -30px; top: 6px; width: 34px; height: 5px; border-radius: 3px 40% 40% 3px;
    background: linear-gradient(180deg, #EEF2F6, #9AA3AE);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); transform: rotate(-8deg);
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-timer-text {
    --us-ring: rgba(246, 238, 220, 0.85);
    width: 60px; height: 60px; border: none;
    background: radial-gradient(circle at 40% 34%, #2A8452, #1E6B3F 60%, #165532);
    box-shadow: 0 4px 0 rgba(20, 40, 20, 0.5);
    outline: 3px dashed var(--us-ring); outline-offset: -8px;
    color: var(--us-felt) !important;
    font-family: 'Sidekick Trivia Fredoka', system-ui, sans-serif; font-weight: 700; font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    animation: ltdusDropSmall 0.5s 0.1s cubic-bezier(0.3, 1.35, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-timer-text[data-level="warn"] { --us-ring: #F39233; background: radial-gradient(circle at 40% 34%, #2A8452, #1E6B3F 60%, #165532); }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-timer-text[data-level="urgent"] { --us-ring: #F04A4A; background: radial-gradient(circle at 40% 34%, #2A8452, #1E6B3F 60%, #165532); }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-timer-text.pq-tick { animation: ltdusTug 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-question-text {
    background: var(--us-felt); color: var(--us-maroon);
    border: none; border-radius: 18px; box-shadow: 0 6px 0 var(--us-shadow);
    outline: 3px dashed var(--us-red); outline-offset: -8px;
    padding: 14px 18px 16px; margin: 14px 0 16px;
    font-weight: 600; font-size: 1.2rem; line-height: 1.2;
    transform-origin: 50% 0;
    animation: ltdusDrop 0.6s 0.25s cubic-bezier(0.3, 1.35, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-options-grid { gap: 12px; margin: 0; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-options-grid[data-count="5"] { gap: 10px; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn {
    gap: 12px; min-height: 68px; padding: 4px 16px 4px 9px;
    background-color: var(--us-tile) !important; color: var(--us-maroon);
    border: none; border-radius: 18px; box-shadow: 0 5px 0 var(--us-shadow);
    outline: 3px dashed var(--us-red); outline-offset: -5px;
    text-shadow: none;
    font-family: 'Sidekick Trivia Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.06;
    transform: rotate(var(--us-tilt, -0.5deg));
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
    animation: ltdusDropPatch 0.6s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn:nth-child(1) { animation-delay: 0.5s; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn:nth-child(2) { animation-delay: 0.58s; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn:nth-child(3) { animation-delay: 0.66s; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn:nth-child(4) { animation-delay: 0.74s; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn:nth-child(5) { animation-delay: 0.82s; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn:nth-child(2n) { --us-tilt: 0.6deg; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn:active { transform: rotate(var(--us-tilt, -0.5deg)) translateY(4px); box-shadow: 0 1px 0 var(--us-shadow); }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn.selected {
    background-color: var(--us-gold) !important; outline: 3px dashed var(--us-green); outline-offset: -5px;
    transform: rotate(var(--us-tilt, -0.5deg)) translateY(3px); box-shadow: 0 2px 0 var(--us-shadow);
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-options-grid[data-count="5"] .trivia-option-btn { min-height: 58px; font-size: 1.1rem; }
/* The letter on a sewn-on button: the answer's colour, a highlight, two
   rims and a hard shadow (the display's). */
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-letter {
    --us-button: #1E6B3F;
    width: 48px; height: 48px;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%),
        var(--us-button);
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.16), inset 0 0 0 5px rgba(255, 255, 255, 0.12), 0 3px 0 rgba(0, 0, 0, 0.25);
    color: var(--us-cream); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
    font-family: 'Sidekick Trivia Fredoka', system-ui, sans-serif; font-weight: 700; font-size: 1.45rem;
    animation: ltdusButton 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn:nth-child(1) .trivia-option-letter { --us-button: #1E6B3F; animation-delay: 0.95s; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn:nth-child(2) .trivia-option-letter { --us-button: #C17E12; animation-delay: 1.03s; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn:nth-child(3) .trivia-option-letter { --us-button: #24427E; animation-delay: 1.11s; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn:nth-child(4) .trivia-option-letter { --us-button: #8E1B2A; animation-delay: 1.19s; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn:nth-child(5) .trivia-option-letter { --us-button: #6B2C7C; animation-delay: 1.27s; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-options-grid[data-count="5"] .trivia-option-letter { width: 42px; height: 42px; font-size: 1.3rem; }
/* Short screens: the patches give back height so the whole question still
   fits with the score bar under it (the rest of the screen is about 405 px
   with four answers, 412 px with five, gaps and the band included). */
@supports (height: 100dvh) {
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn { min-height: clamp(48px, calc((100dvh - 405px) / 4), 68px); }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-options-grid[data-count="5"] .trivia-option-btn { min-height: clamp(44px, calc((100dvh - 412px) / 5), 58px); }
}
@media (max-height: 720px) {
    #trivia-content.pop-quiz.ltd-uglySweater { padding-top: 56px; }
    #trivia-content.pop-quiz.ltd-uglySweater::before { height: 42px; background-size: 48px 42px, 6px 6px, auto; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-timer-text { width: 52px; height: 52px; font-size: 1.35rem; outline-offset: -7px; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-question-text { font-size: 1.05rem; padding: 11px 15px 13px; margin: 10px 0 12px; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-score-bar { margin-top: 12px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-height: 600px) {
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-question-text { font-size: 0.95rem; line-height: 1.15; padding: 10px 14px 12px; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-options-grid { gap: 8px; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-options-grid[data-count="5"] { gap: 6px; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-option-btn { font-size: 1rem; line-height: 1.02; min-height: 44px; padding-top: 3px; padding-bottom: 3px; outline-offset: -4px; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-options-grid[data-count="5"] .trivia-option-btn { min-height: 42px; font-size: 0.94rem; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-option-letter { width: 36px; height: 36px; font-size: 1.1rem; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-options-grid[data-count="5"] .trivia-option-letter { width: 32px; height: 32px; font-size: 1rem; }
}

/* ── Locked in (P3): a gold patch is stitched on; the pick below it ── */
#trivia-content.pop-quiz.ltd-uglySweater .pq-locked.show { padding-top: 22px; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-lock-card {
    margin: 0 12px; padding: 26px 18px 30px; gap: 12px; transform: rotate(-1.5deg);
    background: var(--us-gold); outline-color: var(--us-green);
    animation: ltdusStamp 0.45s cubic-bezier(0.2, 1.4, 0.5, 1) both, ltdusWobble 0.8s 0.4s ease-out both;
}
#trivia-content.pop-quiz.ltd-uglySweater .pq-lock-card svg { stroke: var(--us-maroon) !important; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-lock-card .pq-display { color: var(--us-maroon); font-size: 2.1rem; line-height: 1.05; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-pick {
    margin: 30px 0 24px; padding: 8px 24px 8px 8px;
    background-color: var(--us-tile) !important; color: var(--us-maroon); text-shadow: none;
    border: none; border-radius: 18px; box-shadow: 0 5px 0 var(--us-shadow);
    outline: 3px dashed var(--us-red); outline-offset: -6px;
    font-weight: 600; font-size: 1.3rem; line-height: 1.1;
    animation: ltdusPop 0.45s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-uglySweater .pq-pick .trivia-option-letter { width: 44px; height: 44px; font-size: 1.3rem; animation: none; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-pick[style*="30, 107, 63"] .trivia-option-letter { --us-button: #1E6B3F; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-pick[style*="193, 126, 18"] .trivia-option-letter { --us-button: #C17E12; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-pick[style*="36, 66, 126"] .trivia-option-letter { --us-button: #24427E; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-pick[style*="142, 27, 42"] .trivia-option-letter { --us-button: #8E1B2A; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-pick[style*="107, 44, 124"] .trivia-option-letter { --us-button: #6B2C7C; }

/* ── Result (P4 correct, P5 wrong) ── */
#trivia-content.pop-quiz.ltd-uglySweater .trivia-result { padding: 20px 0 0; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-result-icon { position: relative; width: 240px; height: 240px; margin: 0 auto 20px; }
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-result { position: relative; width: 240px; height: 240px; }
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-patch {
    position: absolute; inset: 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 0 var(--us-shadow);
    outline: 4px dashed var(--us-green); outline-offset: -16px;
}
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-patch svg { width: 58%; height: 58%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Correct: a gold patch pops on; its check is stitched in left to right. */
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-correct .ltdus-patch {
    background: radial-gradient(circle at 34% 28%, #FFE08A, var(--us-gold) 55%, #E4B23A);
    animation: ltdusPop 0.5s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both, ltdusWobble 0.9s 0.7s ease-out both;
}
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-correct svg {
    stroke: var(--us-green); stroke-width: 3.2; stroke-dasharray: 3 1.7;
    clip-path: inset(0 100% 0 0); animation: ltdusStitchIn 0.5s 0.65s ease-out forwards;
}
/* Knitted flakes burst out of it. */
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-flake {
    position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s);
    margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    background-size: contain; background-repeat: no-repeat;
    transform: translate(0, 0) scale(0);
    animation: ltdusBurst 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.05) forwards;
}
/* Wrong: a pale patch drops on and red yarn is pulled through it. */
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-wrong .ltdus-patch {
    background: var(--us-tile); outline-color: var(--us-red);
    animation: ltdusDrop 0.55s 0.25s cubic-bezier(0.3, 1.35, 0.5, 1) both, ltdusShake 0.4s 1.2s ease-in-out;
}
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-wrong svg { width: 70%; height: 70%; stroke: var(--us-red); stroke-width: 9; }
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-yarn { stroke-dasharray: 120; stroke-dashoffset: 120; animation: ltdusYarn 0.4s 0.75s ease-out forwards; }
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-yarn-2 { animation-delay: 1.0s; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-result-text {
    font-family: 'Sidekick Trivia Fredoka', system-ui, sans-serif; font-weight: 700; font-size: 3.4rem; line-height: 1;
    color: var(--us-felt) !important; text-shadow: 0 5px 0 rgba(40, 0, 6, 0.65); margin-bottom: 20px;
    animation: ltdusStamp 0.4s 0.95s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-result:has(.ltdus-wrong) .trivia-result-text { font-size: 2.8rem; animation-delay: 1.35s; }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-result-points {
    position: relative; padding: 10px 32px 13px; color: var(--us-ink);
    background: var(--us-felt); border: none; border-radius: 3px; box-shadow: 0 5px 0 var(--us-shadow);
    border-left: 4px dashed var(--us-red); border-right: 4px dashed var(--us-red);
    font-family: 'Sidekick Trivia Fredoka', system-ui, sans-serif; font-weight: 700; font-size: 2rem;
    transform: rotate(-2deg);
    animation: ltdusTape 0.5s 1.6s cubic-bezier(0.3, 1.35, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-result-points.pq-earned {
    background: var(--us-gold); color: var(--us-maroon); border-left-color: var(--us-green); border-right-color: var(--us-green);
    animation-delay: 1.25s;
}

/* ── Get ready (P6): a knitted scarf unrolls; three buttons hop ── */
#trivia-content.pop-quiz.ltd-uglySweater .pq-ready {
    position: relative; margin: 54px -14px 0; padding: 28px 52px 32px; gap: 20px;
    border-radius: 10px; outline: none;
    background:
        linear-gradient(90deg, transparent 18px, #F6EEDC 18px 30px, transparent 30px 40px, #F7C948 40px 52px, transparent 52px),
        linear-gradient(270deg, transparent 18px, #F6EEDC 18px 30px, transparent 30px 40px, #F7C948 40px 52px, transparent 52px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%230D3A22'/%3E%3Cg fill='%231F6E42' stroke='%2315502F' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 12px 12px, #0D3A22;
    box-shadow: 0 8px 0 rgba(10, 30, 16, 0.5);
    transform: rotate(-1.5deg);
    clip-path: inset(-20px 100% -20px -20px);
    animation: ltdusUnroll 0.9s 0.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
#trivia-content.pop-quiz.ltd-uglySweater .pq-ready .pq-display {
    color: var(--us-cream); font-size: 1.95rem; line-height: 1.08; text-shadow: 0 3px 0 rgba(8, 30, 16, 0.8);
}
/* The scarf's fringe at both ends. */
#trivia-content.pop-quiz.ltd-uglySweater .pq-ready::before,
#trivia-content.pop-quiz.ltd-uglySweater .pq-ready::after {
    content: ''; position: absolute; top: 12px; bottom: 12px; width: 18px;
    background: repeating-linear-gradient(180deg, #F6EEDC 0 6px, transparent 6px 12px, #F7C948 12px 18px,
        transparent 18px 24px, #1F6E42 24px 30px, transparent 30px 36px);
}
#trivia-content.pop-quiz.ltd-uglySweater .pq-ready::before { left: -16px; border-radius: 4px 0 0 4px; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-ready::after { right: -16px; border-radius: 0 4px 4px 0; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-dots { gap: 18px; height: 52px; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-dots span {
    width: 34px; height: 34px; border: none;
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.16), 0 3px 0 rgba(0, 0, 0, 0.3);
}
#trivia-content.pop-quiz.ltd-uglySweater .pq-dots span:nth-child(1) { background: radial-gradient(circle at 30% 24%, rgba(255,255,255,0.24), rgba(255,255,255,0) 42%), #C17E12; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-dots span:nth-child(2) { background: radial-gradient(circle at 30% 24%, rgba(255,255,255,0.24), rgba(255,255,255,0) 42%), #B8222F; }
#trivia-content.pop-quiz.ltd-uglySweater .pq-dots span:nth-child(3) { background: radial-gradient(circle at 30% 24%, rgba(255,255,255,0.24), rgba(255,255,255,0) 42%), #24427E; }

/* ── Game over (P7): a gold banner drops on; the final score hangs in a
   stocking that swings down on its loop ── */
#trivia-content.pop-quiz.ltd-uglySweater .trivia-final-rank {
    margin: 16px 8px 30px; padding: 18px 0 22px;
    background: var(--us-gold); color: var(--us-maroon);
    border: none; border-radius: 20px; box-shadow: 0 7px 0 var(--us-shadow);
    outline: 3px dashed var(--us-green); outline-offset: -10px;
    font-family: 'Sidekick Trivia Fredoka', system-ui, sans-serif; font-weight: 700; font-size: 2.7rem;
    transform: rotate(-2deg);
    animation: ltdusDrop 0.6s 0.2s cubic-bezier(0.3, 1.35, 0.5, 1) both, ltdusSettle 0.9s 0.7s ease-out both;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-final-score { color: var(--us-felt); }
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-final {
    position: relative; width: 220px; height: 340px; margin: 0 auto;
    transform-origin: 36px 6px;
    animation: ltdusHang 0.55s 0.6s cubic-bezier(0.3, 1.35, 0.5, 1) both, ltdusSwing 2.2s 1.1s ease-out both;
}
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-sock { position: absolute; inset: 0; width: 220px; height: 340px; }
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-cuff {
    position: absolute; left: 4px; top: 30px; width: 152px; height: 58px; border-radius: 16px;
    background: radial-gradient(circle, #FFFFFF 0 2.2px, transparent 2.8px) 0 0 / 14px 14px, var(--us-felt);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08);
    display: flex; align-items: center; justify-content: center;
}
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-final-label { font-weight: 700; font-size: 1.05rem; color: var(--us-ink); }
#trivia-content.pop-quiz.ltd-uglySweater .ltdus-final-value {
    position: absolute; left: 0; width: 156px; top: 128px; text-align: center;
    font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--us-cream);
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); font-variant-numeric: tabular-nums;
}

/* ── Score bar: in flow under the answers (the shared rule), a green felt
   strip ── */
#trivia-content.pop-quiz.ltd-uglySweater .trivia-score-bar {
    margin-top: 16px; padding: 10px 18px;
    background: var(--us-green); border: none; border-radius: 16px;
    box-shadow: 0 5px 0 rgba(10, 30, 16, 0.55);
    outline: 3px dashed rgba(246, 238, 220, 0.85); outline-offset: -7px;
}
#trivia-content.pop-quiz.ltd-uglySweater .trivia-score-label { font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--us-felt); }
#trivia-content.pop-quiz.ltd-uglySweater .trivia-score-value {
    font-family: 'Sidekick Trivia Fredoka', system-ui, sans-serif; font-weight: 700; color: var(--us-gold);
    font-variant-numeric: tabular-nums;
}

/* Short screens (an SE in Safari): the joined patch, the result patch and
   the stocking come down a size so those screens fit too. */
@media (max-height: 720px) {
    #trivia-content.pop-quiz.ltd-uglySweater .pq-joined .pq-burst { width: 186px; height: 186px; font-size: 2.2rem; outline-offset: -13px; }
    #trivia-content.pop-quiz.ltd-uglySweater .pq-name-chip { margin: 18px 0 14px; font-size: 1.7rem; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-result-icon,
    #trivia-content.pop-quiz.ltd-uglySweater .ltdus-result { width: 196px; height: 196px; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-result-icon { margin-bottom: 14px; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-result-text { font-size: 2.9rem; margin-bottom: 14px; }
    #trivia-content.pop-quiz.ltd-uglySweater .trivia-final-rank { margin: 8px 8px 20px; padding: 14px 0 18px; font-size: 2.3rem; }
    #trivia-content.pop-quiz.ltd-uglySweater .ltdus-final { width: 176px; height: 272px; transform-origin: 29px 5px; }
    #trivia-content.pop-quiz.ltd-uglySweater .ltdus-sock { width: 176px; height: 272px; }
    #trivia-content.pop-quiz.ltd-uglySweater .ltdus-cuff { left: 3px; top: 24px; width: 122px; height: 46px; border-radius: 13px; }
    #trivia-content.pop-quiz.ltd-uglySweater .ltdus-final-label { font-size: 0.9rem; }
    #trivia-content.pop-quiz.ltd-uglySweater .ltdus-final-value { width: 125px; top: 102px; font-size: 2.1rem; }
}

/* Motion: transforms, clips and stroke offsets only. */
@keyframes ltdusDrop { from { transform: translateY(-140px) rotate(-6deg) scale(1.06); } }
@keyframes ltdusDropSmall { from { transform: translateY(-90px); } }
@keyframes ltdusDropPatch { from { transform: translateY(-60px) rotate(-5deg) scale(1.08); } 70% { transform: translateY(0) rotate(1.2deg) scale(1); } }
@keyframes ltdusSettle { 0%, 100% { rotate: 0deg; } 30% { rotate: 3deg; } 60% { rotate: -1.2deg; } 85% { rotate: 0.4deg; } }
@keyframes ltdusWobble { 0%, 100% { rotate: 0deg; } 25% { rotate: 4deg; } 55% { rotate: -2.5deg; } 80% { rotate: 1deg; } }
@keyframes ltdusPop { from { transform: scale(0) rotate(-12deg); } }
@keyframes ltdusButton { from { transform: scale(0); } }
@keyframes ltdusStamp { from { transform: scale(1.4) rotate(-8deg); } }
@keyframes ltdusTape { from { transform: translateY(-90px) rotate(-8deg) scale(1.1); } to { transform: rotate(-2deg); } }
@keyframes ltdusSew { from { transform: scaleY(0); } }
@keyframes ltdusRise { from { transform: translateY(160px); } }
@keyframes ltdusTug { 40% { transform: translateY(2px) scale(1.08); } }
@keyframes ltdusStitchIn { to { clip-path: inset(0 0 0 0); } }
@keyframes ltdusBurst { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); } }
@keyframes ltdusYarn { to { stroke-dashoffset: 0; } }
@keyframes ltdusShake { 25% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } 85% { transform: rotate(-3deg); } }
@keyframes ltdusUnroll { to { clip-path: inset(-20px -20px -20px -20px); } }
@keyframes ltdusHang { from { transform: translateY(-420px); } }
@keyframes ltdusSwing { 0% { rotate: 0deg; } 18% { rotate: 9deg; } 38% { rotate: -6deg; } 58% { rotate: 3.5deg; } 78% { rotate: -1.5deg; } 100% { rotate: 0deg; } }