/* Live Polls · Ugly Sweater phone skin (owner decision 2026-10-06): the
   canvas's PR-Polls-UglySweater-Phone and Anim boards. Every rule is scoped
   to #poll-content.poll-design.pld-uglySweater or
   #voted-message.poll-design.pld-uglySweater, so no other screen or feature
   is touched; the classic screens (no .poll-design) never match.

   Live Trivia's Ugly Sweater on the phone: a red knitted sweater with the
   green fair-isle band across the top (one SVG stitch tile repeated as a
   background, never a DOM node per stitch), the question on a cream felt
   patch with a dashed blanket stitch, each option a felt tile with its
   letter on a sewn-on button in the option's colour (by its place, the
   display's palette: PollsUglySweaterDesign.Palette), and Fredoka (renamed
   "Sidekick Trivia Fredoka") for every word.

   Motion (the Anim board's phone): the question patch drops on and settles,
   the tiles drop on one after another and their buttons pop, the status
   rises. "Vote counted!": a gold felt button drops on and its check is
   stitched, the heading is stamped on, the pick (its letter button and
   text, on a felt tape) and "Thanks for participating." drop on. Paused: the
   tiles dull and a sewn-on tape with a pause button is stamped on below
   them. The paused tape LANDS 0.5 s after it shows (its stamp: 0.1 s in,
   0.4 s long; PollsUglySweaterDesign.phoneStopEntrance), so the Mac's
   stopDelayMs (WINNER's landing less 0.5 s) puts it on the projector's
   WINNER. /poll-designs/ugly-sweater.js keeps a re-render of the same poll
   still (.pldus-still). Transforms 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'); }

#poll-content.poll-design.pld-uglySweater,
#voted-message.poll-design.pld-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);
    position: relative;
    min-height: calc(100dvh - 40px);
    padding: 66px 16px 22px;
    border-radius: 26px;
    overflow: hidden;
    text-align: center;
    font-family: 'Sidekick Trivia Fredoka', 'Fredoka', system-ui, sans-serif;
    font-weight: 600;
    color: var(--us-felt);
    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. */
#poll-content.poll-design.pld-uglySweater::before,
#voted-message.poll-design.pld-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);
}
/* A column, so the paused tape sits under the tiles (index.html shows the
   poll with an inline display: block). */
#poll-content.poll-design.pld-uglySweater:not([style*="none"]) { display: flex !important; flex-direction: column; }

/* ── The option colours, by place (the display's palette) ── */
#poll-content.poll-design.pld-uglySweater [data-index],
#voted-message.poll-design.pld-uglySweater [data-index] { --pl-c: #1E6B3F; }
#poll-content.poll-design.pld-uglySweater [data-index="0"], #voted-message.poll-design.pld-uglySweater [data-index="0"] { --pl-c: #1E6B3F; }
#poll-content.poll-design.pld-uglySweater [data-index="1"], #voted-message.poll-design.pld-uglySweater [data-index="1"] { --pl-c: #C17E12; }
#poll-content.poll-design.pld-uglySweater [data-index="2"], #voted-message.poll-design.pld-uglySweater [data-index="2"] { --pl-c: #24427E; }
#poll-content.poll-design.pld-uglySweater [data-index="3"], #voted-message.poll-design.pld-uglySweater [data-index="3"] { --pl-c: #8E1B2A; }
#poll-content.poll-design.pld-uglySweater [data-index="4"], #voted-message.poll-design.pld-uglySweater [data-index="4"] { --pl-c: #6B2C7C; }
#poll-content.poll-design.pld-uglySweater [data-index="5"], #voted-message.poll-design.pld-uglySweater [data-index="5"] { --pl-c: #1B6F75; }
#poll-content.poll-design.pld-uglySweater [data-index="6"], #voted-message.poll-design.pld-uglySweater [data-index="6"] { --pl-c: #A34A1E; }
#poll-content.poll-design.pld-uglySweater [data-index="7"], #voted-message.poll-design.pld-uglySweater [data-index="7"] { --pl-c: #4B4F5D; }

/* ── The question: a felt patch that drops on and settles ── */
#poll-content.poll-design.pld-uglySweater #question {
    order: 1;
    margin: 4px 4px 18px; padding: 18px 16px 20px;
    background: var(--us-felt); color: var(--us-maroon);
    border-radius: 18px; box-shadow: 0 6px 0 var(--us-shadow);
    outline: 3px dashed var(--us-red); outline-offset: -8px;
    font-family: inherit; font-weight: 700; font-size: 26px; line-height: 1.15; text-wrap: balance;
    overflow-wrap: anywhere;
    transform: rotate(-1deg);
    animation: pldusDrop 0.6s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}

/* ── Voting: a felt tile per option, its letter on a sewn-on button ── */
#poll-content.poll-design.pld-uglySweater #options { order: 2; gap: 13px; margin-bottom: 0; }
#poll-content.poll-design.pld-uglySweater .option-btn {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px;
    padding: 6px 14px 6px 10px;
    background: var(--us-tile); 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;
    font-family: inherit; font-weight: 600; font-size: 22px; line-height: 1.1; text-align: left;
    overflow-wrap: anywhere;
    transform: rotate(-0.5deg);
    transition: background-color 0.3s ease, color 0.3s ease, outline-color 0.3s ease;
    animation: pldusTile 0.6s 0.3s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(even) { transform: rotate(0.6deg); }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(2) { animation-delay: 0.38s; }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(3) { animation-delay: 0.46s; }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(4) { animation-delay: 0.54s; }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(5) { animation-delay: 0.62s; }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(6) { animation-delay: 0.70s; }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(7) { animation-delay: 0.78s; }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(8) { animation-delay: 0.86s; }
#poll-content.poll-design.pld-uglySweater .option-btn:active { transform: translateY(3px); }
#poll-content.poll-design.pld-uglySweater .option-btn:disabled { opacity: 1; cursor: default; }
#poll-content.poll-design.pld-uglySweater .pldus-btn,
#voted-message.poll-design.pld-uglySweater .pldus-btn {
    flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%), var(--pl-c);
    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-weight: 700; font-size: 25px; line-height: 1;
    transition: background-color 0.3s ease;
}
#poll-content.poll-design.pld-uglySweater .option-btn .pldus-btn {
    animation: pldusPop 0.42s 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(2) .pldus-btn { animation-delay: 0.83s; }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(3) .pldus-btn { animation-delay: 0.91s; }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(4) .pldus-btn { animation-delay: 0.99s; }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(5) .pldus-btn { animation-delay: 1.07s; }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(6) .pldus-btn { animation-delay: 1.15s; }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(7) .pldus-btn { animation-delay: 1.23s; }
#poll-content.poll-design.pld-uglySweater .option-btn:nth-child(8) .pldus-btn { animation-delay: 1.31s; }
#poll-content.poll-design.pld-uglySweater .pldus-text { min-width: 0; }

/* Paused (held until the display's WINNER lands): the tiles dull and a
   sewn-on tape with a pause button is stamped on below them. */
#poll-content.poll-design.pld-uglySweater:has(#stopped-banner.show) .option-btn {
    background: #E7DAC2; color: #8A6F6A; outline-color: #B89A92;
}
#poll-content.poll-design.pld-uglySweater:has(#stopped-banner.show) .pldus-btn {
    background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%), #7C5A58;
}
#poll-content.poll-design.pld-uglySweater .stopped-banner {
    order: 3;
    margin: 24px 2px 0; padding: 16px 18px 16px 14px;
    background: var(--us-felt); color: var(--us-ink);
    border: none; border-left: 4px dashed var(--us-red); border-right: 4px dashed var(--us-red); border-radius: 4px;
    box-shadow: 0 6px 0 var(--us-shadow);
    font-weight: 700; font-size: 21px; line-height: 1.2; text-align: left;
    transform: rotate(-2deg);
    animation: pldusStamp 0.4s 0.1s cubic-bezier(0.2, 1.4, 0.5, 1) backwards;
}
#poll-content.poll-design.pld-uglySweater .stopped-banner.show { display: flex; align-items: center; gap: 14px; }
/* The pause button, sewn on. */
#poll-content.poll-design.pld-uglySweater .stopped-banner::before {
    content: ''; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 17px, var(--us-cream) 17px, var(--us-cream) 23.5px, transparent 23.5px,
                        transparent 29px, var(--us-cream) 29px, var(--us-cream) 35.5px, transparent 35.5px) 50% 50% / 52px 21px no-repeat,
        radial-gradient(circle at 39% 34%, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.16) 9px, rgba(255, 255, 255, 0) 9.5px),
        #8E1B2A;
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.16), 0 2px 0 rgba(0, 0, 0, 0.25);
    animation: pldusPop 0.42s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* ── The status line, risen with the poll ── */
#poll-content.poll-design.pld-uglySweater #status {
    order: 4;
    margin: 24px 0 0; color: var(--us-felt);
    font-weight: 600; font-size: 21px; line-height: 1.25; text-shadow: 0 2px 0 rgba(40, 0, 6, 0.6);
    animation: pldusRise 0.5s 1s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#poll-content.poll-design.pld-uglySweater #status:empty { display: none; }

/* A re-render of the same poll stays still. */
#poll-content.poll-design.pld-uglySweater.pldus-still #question,
#poll-content.poll-design.pld-uglySweater.pldus-still .option-btn,
#poll-content.poll-design.pld-uglySweater.pldus-still .option-btn .pldus-btn,
#poll-content.poll-design.pld-uglySweater.pldus-still #status { animation: none; }

/* ── Vote counted: a gold felt button with the check stitched on ── */
#voted-message.poll-design.pld-uglySweater.show { display: flex; flex-direction: column; align-items: center; padding-top: 158px; }
#voted-message.poll-design.pld-uglySweater .checkmark {
    width: 196px; height: 196px; margin: 0; border-radius: 50%; font-size: 0; color: transparent;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231E6B3F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 100px 100px no-repeat,
        radial-gradient(circle at 36% 30%, #FCDC78 0, #F7C948 62px, #E3AF2E 120px);
    box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.08), 0 8px 0 var(--us-shadow);
    outline: 4px dashed var(--us-green); outline-offset: -20px;
    animation: pldusCounted 0.55s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#voted-message.poll-design.pld-uglySweater h2 {
    margin: 40px 0 0; color: var(--us-felt);
    font-weight: 700; font-size: 46px; line-height: 1.05; white-space: nowrap; text-shadow: 0 4px 0 rgba(40, 0, 6, 0.6);
    transform: rotate(-1.5deg);
    animation: pldusHeading 0.4s 0.55s cubic-bezier(0.2, 1.4, 0.5, 1) backwards;
}
/* The pick: its letter button and text on a felt tape. */
#voted-message.poll-design.pld-uglySweater .voted-pick:not(:empty) {
    display: flex; align-items: center; gap: 12px; max-width: 100%; margin: 26px 0 0; padding: 9px 20px 9px 10px;
    background: var(--us-tile); color: var(--us-maroon);
    border-radius: 18px; box-shadow: 0 5px 0 var(--us-shadow);
    outline: 3px dashed var(--us-red); outline-offset: -5px;
    font-weight: 600; font-size: 22px; line-height: 1.1; text-align: left; overflow-wrap: anywhere;
    transform: rotate(1deg);
    animation: pldusDropSmall 0.5s 0.7s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#voted-message.poll-design.pld-uglySweater .voted-pick .pldus-btn { width: 44px; height: 44px; font-size: 22px; }
#voted-message.poll-design.pld-uglySweater p {
    margin-top: 22px; padding: 12px 22px;
    background: var(--us-felt); color: var(--us-ink);
    border-radius: 4px; box-shadow: 0 5px 0 var(--us-shadow);
    border-left: 4px dashed var(--us-red); border-right: 4px dashed var(--us-red);
    font-weight: 600; font-size: 22px; line-height: 1.1; white-space: nowrap;
    animation: pldusDropSmall 0.5s 0.8s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}

/* ── Many options, or a short screen: the tiles give back height ── */
#poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(6)) #options { gap: 8px; }
#poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(6)) .option-btn { min-height: 54px; padding: 4px 12px 4px 8px; font-size: 19px; }
#poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(6)) .pldus-btn { width: 40px; height: 40px; font-size: 20px; }
#poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(6)) #question { margin-bottom: 12px; padding: 13px 14px 15px; font-size: 22px; }
#poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(6)) #status { margin-top: 14px; font-size: 18px; }
#poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(6)) .stopped-banner { margin-top: 14px; padding: 10px 14px 10px 12px; font-size: 18px; }
@media (max-height: 700px) {
    #poll-content.poll-design.pld-uglySweater,
    #voted-message.poll-design.pld-uglySweater { padding: 60px 14px 16px; }
    #poll-content.poll-design.pld-uglySweater #question { margin: 2px 4px 14px; padding: 14px 14px 16px; font-size: 23px; }
    #poll-content.poll-design.pld-uglySweater #options { gap: 10px; }
    #poll-content.poll-design.pld-uglySweater .option-btn { min-height: 64px; font-size: 20px; }
    #poll-content.poll-design.pld-uglySweater .pldus-btn { width: 44px; height: 44px; font-size: 22px; }
    #poll-content.poll-design.pld-uglySweater .stopped-banner { margin-top: 16px; padding: 12px 14px 12px 12px; font-size: 19px; }
    #poll-content.poll-design.pld-uglySweater #status { margin-top: 16px; font-size: 19px; }
    #poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(5)) #options { gap: 7px; }
    #poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(5)) .option-btn { min-height: 48px; padding: 3px 10px 3px 7px; font-size: 17px; }
    #poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(5)) .pldus-btn { width: 36px; height: 36px; font-size: 18px; }
    #poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(7)) .option-btn { min-height: 42px; font-size: 16px; }
    #poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(7)) .pldus-btn { width: 32px; height: 32px; font-size: 16px; }
    #poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(5)) #question { margin-bottom: 10px; padding: 10px 12px 12px; font-size: 19px; line-height: 1.1; }
    #poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(5)) #status { margin-top: 10px; font-size: 17px; }
    #poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(5)) .stopped-banner { margin-top: 10px; padding: 8px 12px 8px 10px; font-size: 16px; }
    #poll-content.poll-design.pld-uglySweater:has(.option-btn:nth-child(5)) .stopped-banner::before { margin: -6px; transform: scale(0.77); }
    #voted-message.poll-design.pld-uglySweater.show { padding-top: 110px; }
    #voted-message.poll-design.pld-uglySweater .checkmark { width: 160px; height: 160px; background-size: 82px 82px, auto; outline-offset: -16px; }
    #voted-message.poll-design.pld-uglySweater h2 { margin-top: 30px; font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    #poll-content.poll-design.pld-uglySweater *,
    #poll-content.poll-design.pld-uglySweater *::before,
    #voted-message.poll-design.pld-uglySweater *,
    #voted-message.poll-design.pld-uglySweater *::before { animation: none !important; }
}

@keyframes pldusDrop { from { transform: translateY(-300px) rotate(-5deg) scale(1.04); } }
@keyframes pldusTile { from { transform: translateY(-700px) rotate(-5deg) scale(1.06); } }
@keyframes pldusPop { from { transform: scale(0); } }
@keyframes pldusRise { from { transform: translateY(300px); } }
@keyframes pldusStamp { from { transform: rotate(-2deg) scale(0); } }
@keyframes pldusCounted { from { transform: translateY(-520px) rotate(-10deg) scale(1.08); } }
@keyframes pldusHeading { 0% { transform: rotate(-4deg) scale(0); } 1% { transform: rotate(-4deg) scale(1.4); } }
@keyframes pldusDropSmall { from { transform: translateY(260px); } }