/* Live Polls · Halloween phone skin ("Jack-o'-Lantern Night", owner decision
   2026-10-07), from the Holiday Themes canvas boards HW-Polls-Phone and
   -Anim: the night sky with its stars, the ribbed pumpkin banner with its
   stem, the question on a lit lantern panel, the options as candy-coloured
   lanterns with a carved night-pumpkin letter, and "Vote counted!" under a
   glowing jack-o'-lantern in a burst of rays. Every rule is scoped to
   #poll-content.poll-design.pld-halloween or
   #voted-message.poll-design.pld-halloween, so no other screen or feature is
   touched; the classic screens (no .poll-design) never match.

   /poll-designs/halloween.js letters each option (optionHTML), draws the
   pick on "Vote counted!" (votedPickHTML), and marks which entrances play
   (.hwp-enter: only when a poll arrives, never on a snapshot that only
   re-renders the same screen).

   The Stop: the lanterns go dark and the paused tag pops on 0.1 s after it
   shows, over 0.5 s (PollsHalloweenDesign.phoneStopEntrance, 0.6 s; the
   tests read it). The Mac holds it for the display's WINNER beat less that
   (stopDelayMs), so it lands with the projector. The projector never shows
   a paused label; the phones do.

   The colours are ShowThemePalettes.swift's HalloweenPalette (the eight
   options by place, one night ink). The faces are the Mac's bundled ones
   (ShowThemeFonts), self-hosted (licences in /fonts/OFL-*.txt). The night
   lives on these in-flow panels, never on html/body or a fixed element (the
   iOS 26 rule). */

@font-face { font-family: 'Jolly Lodger'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jolly-lodger-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Baloo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sidekick-trivia-baloo-semi-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Baloo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sidekick-trivia-baloo-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Baloo'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/sidekick-trivia-baloo-extra-bold-v1.woff2') format('woff2'); }

/* ── The panels: the night sky, starred ── */
#poll-content.poll-design.pld-halloween,
#voted-message.poll-design.pld-halloween {
    --hwp-ink: #1C0F26; --hwp-cream: #FFF1D6; --hwp-glow: #FFD35A; --hwp-hot: #FFB43B;
    --hwp-night: #0A0512; --hwp-caption: #E6DCF2;
    --hwp-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --hwp-panel: radial-gradient(ellipse 75% 85% at 50% 45%, #FFFBEF 0%, #FFF1CF 55%, #FFDF94 100%);
    --hwp-pumpkin: repeating-linear-gradient(90deg, rgba(140,50,0,0) 0 22px, rgba(140,50,0,0.28) 22px 27px, rgba(140,50,0,0) 27px 52px),
        linear-gradient(180deg, #FF9A45 0%, #F27A1F 45%, #D9600F 100%);
    position: relative;
    isolation: isolate;
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif;
    font-weight: 800;
    color: var(--hwp-cream);
    text-align: center;
    margin: -8px -4px 0;
    padding: 40px 18px 22px;
    /* The panel fills the phone between the page's margins (732 on a
       390×844 phone, as on the board). */
    min-height: calc(100vh - 112px);
    min-height: calc(100dvh - 112px);
    box-sizing: border-box;
    border-radius: 26px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M22 38 C21 26 24 16 32 9 L39 15 C33 20 31 28 32 38 Z' fill='%233F8A34' stroke='%231C0F26' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M37 17 C46 6 60 5 66 13 C58 21 46 22 37 17 Z' fill='%232B6125' stroke='%231C0F26' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 44px 10px / 54px 36px,
        radial-gradient(circle, rgba(255,236,190,0.8) 0 1.7px, transparent 2.3px) 13px 21px / 173px 151px,
        radial-gradient(circle, rgba(255,236,190,0.45) 0 1.1px, transparent 1.7px) 71px 90px / 113px 127px,
        radial-gradient(ellipse 85% 75% at 50% 30%, #3B1E66 0%, #24113F 55%, #130823 100%);
    overflow: hidden;
}
/* The vote screen stacks: the banner, the question, the options, the
   status, and the paused tag at the foot (index.html shows the panel with
   an inline display: block, which this keeps). */
#poll-content.poll-design.pld-halloween[style*="block"] {
    display: flex !important; flex-direction: column; align-items: stretch;
}

/* The options' colours by place (the host's are ignored), and each 55%
   toward the night once the host stops the vote (the lanterns go dark). */
#poll-content.poll-design.pld-halloween .option-btn[data-index="0"], #voted-message.poll-design.pld-halloween .hwp-pick[data-index="0"] { --hwp-c: #FF8A2A; --hwp-d: #874736; }
#poll-content.poll-design.pld-halloween .option-btn[data-index="1"], #voted-message.poll-design.pld-halloween .hwp-pick[data-index="1"] { --hwp-c: #9BE15D; --hwp-d: #5A6F4C; }
#poll-content.poll-design.pld-halloween .option-btn[data-index="2"], #voted-message.poll-design.pld-halloween .hwp-pick[data-index="2"] { --hwp-c: #B993FF; --hwp-d: #674C95; }
#poll-content.poll-design.pld-halloween .option-btn[data-index="3"], #voted-message.poll-design.pld-halloween .hwp-pick[data-index="3"] { --hwp-c: #FFD23F; --hwp-d: #87683F; }
#poll-content.poll-design.pld-halloween .option-btn[data-index="4"], #voted-message.poll-design.pld-halloween .hwp-pick[data-index="4"] { --hwp-c: #FF7FB0; --hwp-d: #874272; }
#poll-content.poll-design.pld-halloween .option-btn[data-index="5"], #voted-message.poll-design.pld-halloween .hwp-pick[data-index="5"] { --hwp-c: #4FD6CF; --hwp-d: #376A80; }
#poll-content.poll-design.pld-halloween .option-btn[data-index="6"], #voted-message.poll-design.pld-halloween .hwp-pick[data-index="6"] { --hwp-c: #FF6A5C; --hwp-d: #87394C; }
#poll-content.poll-design.pld-halloween .option-btn[data-index="7"], #voted-message.poll-design.pld-halloween .hwp-pick[data-index="7"] { --hwp-c: #7DB2FF; --hwp-d: #4C5995; }

/* ── The banner: a ribbed pumpkin with its stem (the stem is on the panel) ── */
#poll-content.poll-design.pld-halloween::before,
#voted-message.poll-design.pld-halloween::before {
    content: 'Halloween Night';
    order: 0;
    display: block; margin: 0 2px 18px;
    padding: 12px 18px 10px;
    background: var(--hwp-pumpkin); color: var(--hwp-ink);
    border: 4px solid var(--hwp-ink); border-radius: 20px; box-shadow: 0 7px 0 var(--hwp-ink);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800;
    font-size: 25px; line-height: 1.15; white-space: nowrap;
}

/* ── The question on a lit lantern panel ── */
#poll-content.poll-design.pld-halloween .question {
    order: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 96px; margin: 0 2px 24px; padding: 14px 16px;
    box-sizing: border-box;
    background: var(--hwp-panel); color: var(--hwp-ink);
    border: 4px solid var(--hwp-ink); border-radius: 20px;
    box-shadow: inset 0 0 26px rgba(255,170,60,0.5), 0 6px 0 var(--hwp-ink);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800;
    font-size: 26px; line-height: 1.15; overflow-wrap: anywhere;
}
#poll-content.poll-design.pld-halloween .question.hwp-long { font-size: 21px; }

/* ── The options: candy-coloured lanterns with a night-pumpkin letter ── */
#poll-content.poll-design.pld-halloween .options {
    order: 2; gap: 12px; margin: 0 2px;
}
#poll-content.poll-design.pld-halloween .option-btn {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 78px; padding: 6px 14px 6px 8px;
    box-sizing: border-box; text-align: left;
    background: var(--hwp-c, #FF8A2A); color: var(--hwp-ink);
    border: 4px solid var(--hwp-ink); border-radius: 18px; box-shadow: 0 6px 0 var(--hwp-ink);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800;
    font-size: 25px; line-height: 1.1; overflow-wrap: anywhere;
    opacity: 1;
    transition: transform 0.12s, box-shadow 0.12s;
}
/* The letter, carved in the option's colour out of a night pumpkin. */
#poll-content.poll-design.pld-halloween .option-btn .hwp-letter,
#voted-message.poll-design.pld-halloween .hwp-pick .hwp-letter {
    flex: 0 0 auto; width: 52px; height: 47px; box-sizing: border-box; padding-top: 9px;
    display: flex; align-items: center; justify-content: center;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104'%3E%3Cellipse cx='32' cy='63' rx='28' ry='35' fill='%231C0F26'/%3E%3Cellipse cx='88' cy='63' rx='28' ry='35' fill='%231C0F26'/%3E%3Cellipse cx='45' cy='63' rx='27' ry='38' fill='%232C1745'/%3E%3Cellipse cx='75' cy='63' rx='27' ry='38' fill='%232C1745'/%3E%3Cellipse cx='60' cy='63' rx='20' ry='39' fill='%233A2058'/%3E%3Cpath d='M54 28 C53 17 56 9 65 4 L71 9 C64 13 62 20 63 28 Z' fill='%233F8A34'/%3E%3C/svg%3E") no-repeat center / 52px 45px;
    color: var(--hwp-c, #FF8A2A);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800; font-size: 27px; line-height: 1;
}
#poll-content.poll-design.pld-halloween .option-btn .hwp-text { flex: 1 1 auto; min-width: 0; }
#poll-content.poll-design.pld-halloween .option-btn.hwp-long { font-size: 20px; }
#poll-content.poll-design.pld-halloween .option-btn:active:not(:disabled) {
    transform: translateY(4px) scale(0.97); box-shadow: 0 0 0 5px var(--hwp-glow), 0 2px 0 var(--hwp-ink);
}
#poll-content.poll-design.pld-halloween .option-btn:disabled { opacity: 1; cursor: default; transform: none; }
/* Stopped: the lanterns go dark toward the night. */
#poll-content.poll-design.pld-halloween .stopped-banner.show ~ .options .option-btn {
    background: var(--hwp-d, #874736); color: #3A2A48;
    animation: hwpDark 0.3s ease both;
}

/* ── The status line ── */
#poll-content.poll-design.pld-halloween .status {
    order: 3; margin: auto 0 0; padding: 22px 6px 4px;
    color: var(--hwp-cream);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.3;
}
#poll-content.poll-design.pld-halloween .status:empty { display: none; }

/* ── Paused: a night tag edged in candle glow (it lands on the display's beat) ── */
#poll-content.poll-design.pld-halloween .stopped-banner.show {
    order: 4;
    display: grid; grid-template-columns: 54px 1fr; column-gap: 12px; row-gap: 2px; align-items: center;
    margin: 18px 8px 2px; padding: 10px 16px 12px 12px;
    background: var(--hwp-ink); color: var(--hwp-cream);
    border: 4px solid var(--hwp-glow); border-radius: 20px;
    box-shadow: 0 7px 0 var(--hwp-night), 0 0 30px rgba(255,170,60,0.35);
    text-align: left; font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 600;
    font-size: 16px; line-height: 1.2;
    transform: rotate(-2deg);
    animation: hwpPaused 0.5s 0.1s var(--hwp-spring) both;
}
#poll-content.poll-design.pld-halloween .stopped-banner.show::before {
    content: ''; grid-column: 1; grid-row: 1 / span 2;
    width: 54px; height: 54px; box-sizing: border-box; border-radius: 50%;
    border: 4px solid var(--hwp-ink);
    background:
        linear-gradient(var(--hwp-ink), var(--hwp-ink)) no-repeat calc(50% - 7px) 50% / 8px 24px,
        linear-gradient(var(--hwp-ink), var(--hwp-ink)) no-repeat calc(50% + 7px) 50% / 8px 24px,
        var(--hwp-glow);
    box-shadow: 0 0 0 2px var(--hwp-glow);
}
#poll-content.poll-design.pld-halloween .stopped-banner.show::after {
    content: 'Paused'; grid-column: 2; grid-row: 1; order: -1;
    color: var(--hwp-glow);
    font-family: 'Jolly Lodger', system-ui, sans-serif; font-weight: 400; font-size: 38px; line-height: 0.95;
}

/* ── Vote counted! ── */
#voted-message.poll-design.pld-halloween.show { display: block; }
#voted-message.poll-design.pld-halloween .checkmark {
    position: relative;
    width: 220px; height: 191px; margin: 46px auto 26px;
    font-size: 0; color: transparent;
}
/* The rays behind it. */
#voted-message.poll-design.pld-halloween .checkmark::before {
    content: ''; position: absolute;
    left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255,211,90,0.4) 0deg 9deg, rgba(255,211,90,0) 9deg 22.5deg);
    -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
    mask: radial-gradient(circle, #000 30%, transparent 70%);
}
/* The jack-o'-lantern, lighting up as it lands. */
#voted-message.poll-design.pld-halloween .checkmark::after {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104'%3E%3Cellipse cx='32' cy='63' rx='28' ry='35' fill='%23C4560E'/%3E%3Cellipse cx='88' cy='63' rx='28' ry='35' fill='%23C4560E'/%3E%3Cellipse cx='45' cy='63' rx='27' ry='38' fill='%23F27A1F'/%3E%3Cellipse cx='75' cy='63' rx='27' ry='38' fill='%23F27A1F'/%3E%3Cellipse cx='60' cy='63' rx='20' ry='39' fill='%23FF9A45'/%3E%3Cpath d='M60 25 Q48 63 60 101 M60 25 Q72 63 60 101' fill='none' stroke='%23C4560E' stroke-width='2.4' opacity='0.55'/%3E%3Cpath d='M66 16 C74 5 92 4 101 12 C92 21 76 22 66 16 Z' fill='%232B6125'/%3E%3Cpath d='M54 28 C53 17 56 9 65 4 L71 9 C64 13 62 20 63 28 Z' fill='%233F8A34'/%3E%3Cpath d='M33 55 L49 55 L41 41 Z M71 55 L87 55 L79 41 Z M55 67 L65 67 L60 60 Z M28 72 Q60 104 92 72 Q84 76 78 75 L74 82 L68 77 L52 77 L46 82 L42 75 Q36 76 28 72 Z' fill='%23FFD35A'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 0 26px rgba(255,170,50,0.7));
}
#voted-message.poll-design.pld-halloween h2 {
    margin: 0 0 22px; color: var(--hwp-glow);
    font-family: 'Jolly Lodger', system-ui, sans-serif; font-weight: 400; font-size: 66px; line-height: 1;
    text-shadow: 0 0 22px rgba(255,180,60,0.75); white-space: nowrap;
}
/* The pick: its letter and text on a lantern pill in its colour. */
#voted-message.poll-design.pld-halloween .voted-pick:not(:empty) {
    display: flex; justify-content: center; margin: 0 0 26px;
}
#voted-message.poll-design.pld-halloween .hwp-pick {
    display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
    padding: 4px 22px 4px 8px; box-sizing: border-box;
    background: var(--hwp-c, #FF8A2A); color: var(--hwp-ink);
    border: 4px solid var(--hwp-ink); border-radius: 40px; box-shadow: 0 6px 0 var(--hwp-ink);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800; font-size: 24px; line-height: 1.1;
    text-align: left; overflow-wrap: anywhere;
}
#voted-message.poll-design.pld-halloween .hwp-pick .hwp-letter { width: 46px; height: 42px; background-size: 46px 40px; font-size: 24px; padding-top: 8px; }
#voted-message.poll-design.pld-halloween p {
    color: var(--hwp-cream); opacity: 1;
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 600; font-size: 21px; line-height: 1.3;
}

/* ── Entrances ──
   The vote screen's only when a poll arrives (.hwp-enter, set by
   halloween.js); "Vote counted!" each time it shows. The board's: the
   question drops in, the lanterns rise from below 0.12 s apart. */
#poll-content.poll-design.pld-halloween.hwp-enter::before { animation: hwpDrop 0.6s var(--hwp-spring) both; }
#poll-content.poll-design.pld-halloween.hwp-enter .question { animation: hwpDrop 0.6s 0.2s var(--hwp-spring) both; }
#poll-content.poll-design.pld-halloween.hwp-enter .option-btn { animation: hwpRise 0.6s 0.4s var(--hwp-spring) both; }
#poll-content.poll-design.pld-halloween.hwp-enter .option-btn:nth-child(2) { animation-delay: 0.52s; }
#poll-content.poll-design.pld-halloween.hwp-enter .option-btn:nth-child(3) { animation-delay: 0.64s; }
#poll-content.poll-design.pld-halloween.hwp-enter .option-btn:nth-child(4) { animation-delay: 0.76s; }
#poll-content.poll-design.pld-halloween.hwp-enter .option-btn:nth-child(5) { animation-delay: 0.88s; }
#poll-content.poll-design.pld-halloween.hwp-enter .option-btn:nth-child(6) { animation-delay: 1s; }
#poll-content.poll-design.pld-halloween.hwp-enter .option-btn:nth-child(7) { animation-delay: 1.12s; }
#poll-content.poll-design.pld-halloween.hwp-enter .option-btn:nth-child(8) { animation-delay: 1.24s; }
#poll-content.poll-design.pld-halloween.hwp-enter .status { animation: hwpRise 0.5s 1s var(--hwp-spring) both; }
#voted-message.poll-design.pld-halloween.show::before { animation: hwpDrop 0.6s var(--hwp-spring) both; }
#voted-message.poll-design.pld-halloween.show .checkmark { animation: hwpPop 0.6s 0.1s var(--hwp-spring) both; }
#voted-message.poll-design.pld-halloween.show .checkmark::before { animation: hwpRays 0.8s 0.1s ease-out both, hwpTurn 30s 0.1s linear infinite; }
#voted-message.poll-design.pld-halloween.show .checkmark::after { animation: hwpLight 0.8s 0.45s ease-out both; }
#voted-message.poll-design.pld-halloween.show h2 { animation: hwpPop 0.5s 0.4s var(--hwp-spring) both; }
#voted-message.poll-design.pld-halloween.show .voted-pick { animation: hwpPop 0.45s 0.6s var(--hwp-spring) both; }
#voted-message.poll-design.pld-halloween.show p { animation: hwpRise 0.45s 0.75s var(--hwp-spring) both; }

@keyframes hwpDrop { from { transform: translateY(-140px); } }
@keyframes hwpRise { from { transform: translateY(420px); } }
@keyframes hwpPop { from { transform: scale(0); } }
@keyframes hwpPaused { from { transform: rotate(-20deg) scale(0); } to { transform: rotate(-2deg) scale(1); } }
@keyframes hwpRays { from { transform: scale(0); } }
@keyframes hwpTurn { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes hwpLight { from { filter: brightness(0.45) saturate(0.7) drop-shadow(0 0 0 rgba(255,170,50,0)); } }
@keyframes hwpDark { from { background: var(--hwp-c); color: var(--hwp-ink); } }

/* ── More options: everything still fits one screen ── */
#poll-content.poll-design.pld-halloween .options:has(> :nth-child(5)) { gap: 10px; }
#poll-content.poll-design.pld-halloween .options:has(> :nth-child(5)) .option-btn { min-height: 60px; font-size: 22px; }
#poll-content.poll-design.pld-halloween .options:has(> :nth-child(5)) .hwp-letter { width: 44px; height: 40px; background-size: 44px 38px; font-size: 23px; padding-top: 7px; }
#poll-content.poll-design.pld-halloween .options:has(> :nth-child(7)) { gap: 7px; }
#poll-content.poll-design.pld-halloween .options:has(> :nth-child(7)) .option-btn { min-height: 48px; font-size: 19px; padding: 3px 12px 3px 6px; border-width: 3px; box-shadow: 0 4px 0 var(--hwp-ink); }
#poll-content.poll-design.pld-halloween .options:has(> :nth-child(7)) .hwp-letter { width: 38px; height: 34px; background-size: 38px 33px; font-size: 20px; padding-top: 6px; }
#poll-content.poll-design.pld-halloween:has(.options > :nth-child(5)) .question { min-height: 78px; margin-bottom: 18px; font-size: 23px; }
#poll-content.poll-design.pld-halloween:has(.options > :nth-child(5)) .question.hwp-long { font-size: 19px; }
#poll-content.poll-design.pld-halloween:has(.options > :nth-child(5))::before { margin-bottom: 14px; font-size: 22px; padding: 9px 16px 7px; }
/* A compact tag under five or more options. */
#poll-content.poll-design.pld-halloween:has(.options > :nth-child(5)) .stopped-banner.show {
    grid-template-columns: 42px 1fr; column-gap: 10px; padding: 8px 12px 10px 10px; font-size: 15px;
}
#poll-content.poll-design.pld-halloween:has(.options > :nth-child(5)) .stopped-banner.show::before {
    width: 42px; height: 42px; border-width: 3px;
    background:
        linear-gradient(var(--hwp-ink), var(--hwp-ink)) no-repeat calc(50% - 5px) 50% / 6px 16px,
        linear-gradient(var(--hwp-ink), var(--hwp-ink)) no-repeat calc(50% + 5px) 50% / 6px 16px,
        var(--hwp-glow);
}
#poll-content.poll-design.pld-halloween:has(.options > :nth-child(5)) .stopped-banner.show::after { font-size: 32px; }
/* Seven or eight: a tighter banner and question. */
#poll-content.poll-design.pld-halloween:has(.options > :nth-child(7))::before { margin-bottom: 10px; font-size: 20px; padding: 7px 14px 5px; }
#poll-content.poll-design.pld-halloween:has(.options > :nth-child(7)) .question { min-height: 62px; margin-bottom: 14px; font-size: 20px; padding: 8px 14px; }
#poll-content.poll-design.pld-halloween:has(.options > :nth-child(7)) .question.hwp-long { font-size: 17px; }
#poll-content.poll-design.pld-halloween .options:has(> :nth-child(7)) { gap: 6px; }
#poll-content.poll-design.pld-halloween .options:has(> :nth-child(7)) .option-btn { min-height: 46px; }
/* Stopped: the dark lanterns step down, so the tag fits under them. */
#poll-content.poll-design.pld-halloween .stopped-banner.show ~ .options .option-btn { min-height: 64px; }
#poll-content.poll-design.pld-halloween .stopped-banner.show ~ .options:has(> :nth-child(5)) .option-btn { min-height: 50px; }
#poll-content.poll-design.pld-halloween .stopped-banner.show ~ .options:has(> :nth-child(7)) .option-btn { min-height: 40px; }
#poll-content.poll-design.pld-halloween:has(.options > :nth-child(5)) .stopped-banner.show { margin-top: 12px; }

/* ── Shorter phones ── */
@media (max-height: 740px) {
    #poll-content.poll-design.pld-halloween,
    #voted-message.poll-design.pld-halloween { padding: 32px 14px 16px; background-position: 38px 4px, 13px 21px, 71px 90px, 0 0; }
    #poll-content.poll-design.pld-halloween::before,
    #voted-message.poll-design.pld-halloween::before { font-size: 21px; padding: 8px 14px 6px; margin-bottom: 14px; }
    #poll-content.poll-design.pld-halloween .question { min-height: 72px; margin-bottom: 16px; font-size: 22px; padding: 10px 14px; }
    #poll-content.poll-design.pld-halloween .question.hwp-long { font-size: 18px; }
    #poll-content.poll-design.pld-halloween .options { gap: 10px; }
    #poll-content.poll-design.pld-halloween .option-btn { min-height: 62px; font-size: 22px; }
    #poll-content.poll-design.pld-halloween .option-btn.hwp-long { font-size: 17px; }
    #poll-content.poll-design.pld-halloween .options:has(> :nth-child(5)) { gap: 6px; }
    #poll-content.poll-design.pld-halloween .options:has(> :nth-child(5)) .option-btn { min-height: 46px; font-size: 18px; padding: 3px 10px 3px 6px; border-width: 3px; box-shadow: 0 4px 0 var(--hwp-ink); }
    #poll-content.poll-design.pld-halloween .options:has(> :nth-child(5)) .hwp-letter { width: 36px; height: 32px; background-size: 36px 31px; font-size: 19px; padding-top: 6px; }
    #poll-content.poll-design.pld-halloween .options:has(> :nth-child(7)) { gap: 5px; }
    #poll-content.poll-design.pld-halloween .options:has(> :nth-child(7)) .option-btn { min-height: 36px; font-size: 15px; }
    #poll-content.poll-design.pld-halloween .options:has(> :nth-child(7)) .hwp-letter { width: 30px; height: 27px; background-size: 30px 26px; font-size: 16px; padding-top: 5px; }
    #poll-content.poll-design.pld-halloween:has(.options > :nth-child(5)) .question { min-height: 54px; margin-bottom: 12px; font-size: 18px; padding: 6px 12px; }
    #poll-content.poll-design.pld-halloween:has(.options > :nth-child(7)) .question { font-size: 15px; min-height: 46px; }
    #poll-content.poll-design.pld-halloween:has(.options > :nth-child(5))::before { font-size: 18px; padding: 6px 12px 4px; margin-bottom: 10px; }
    #poll-content.poll-design.pld-halloween .status { padding-top: 12px; font-size: 18px; }
    #poll-content.poll-design.pld-halloween:not(:has(.options > :nth-child(5))) .stopped-banner.show { padding: 8px 14px 10px 12px; grid-template-columns: 48px 1fr; }
    #poll-content.poll-design.pld-halloween:not(:has(.options > :nth-child(5))) .stopped-banner.show::before { width: 48px; height: 48px; }
    #poll-content.poll-design.pld-halloween:not(:has(.options > :nth-child(5))) .stopped-banner.show::after { font-size: 36px; }
    #poll-content.poll-design.pld-halloween .question.hwp-long { font-size: 16px; }
    #poll-content.poll-design.pld-halloween .stopped-banner.show { margin-top: 10px; }
    #poll-content.poll-design.pld-halloween .stopped-banner.show ~ .options .option-btn { min-height: 48px; }
    #poll-content.poll-design.pld-halloween .stopped-banner.show ~ .options:has(> :nth-child(5)) .option-btn { min-height: 38px; }
    #poll-content.poll-design.pld-halloween .stopped-banner.show ~ .options:has(> :nth-child(7)) .option-btn { min-height: 30px; }
    #poll-content.poll-design.pld-halloween .stopped-banner.show ~ .options .hwp-letter { width: 34px; height: 30px; background-size: 34px 29px; font-size: 18px; padding-top: 5px; }
    /* Five or more stopped: the tag says only "Paused". */
    #poll-content.poll-design.pld-halloween:has(.options > :nth-child(5)) .stopped-banner.show { font-size: 0; row-gap: 0; }
    #poll-content.poll-design.pld-halloween:has(.options > :nth-child(5)) .stopped-banner.show::before { grid-row: 1; width: 34px; height: 34px; }
    #poll-content.poll-design.pld-halloween:has(.options > :nth-child(5)) .stopped-banner.show::after { font-size: 28px; }
    #voted-message.poll-design.pld-halloween .checkmark { width: 170px; height: 148px; margin: 26px auto 18px; }
    #voted-message.poll-design.pld-halloween .checkmark::before { width: 330px; height: 330px; margin: -165px 0 0 -165px; }
    #voted-message.poll-design.pld-halloween h2 { font-size: 54px; margin-bottom: 16px; }
}

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