/* Would You Rather · Halloween phone skin ("Jack-o'-Lantern Night", owner
   decision 2026-10-07): the Holiday Themes canvas's HW-WYR-Phone and
   HW-WYR-Anim boards. Every rule is scoped to
   #wyr-content.wyr-design.wyrd-halloween, so no other screen or feature is
   touched; the classic screens (no .wyr-design) never match.

   A purple night with its stars; "Would you rather…" on a pumpkin crate
   with its stem, the time left as a glowing bar beside a pumpkin that shows
   the seconds; the two options on lantern cards (pumpkin and grape) that
   spring up, a little pumpkin with "or" carved in it between them; the pick
   gets a gold ring, its glow and a gold check while the other card goes
   dusk grey. Locked, the cards stay lit under "Locked in!". The result: the
   two options as mini cards (the winner ringed), the bar, the tally plates,
   the WINNER rosette in its rays with candy round it, and the outcome in
   Jolly Lodger. The colours are ShowThemePalettes.swift's HalloweenPalette
   (side B is the design's own grape). Motion is transforms only, and
   /wyr-designs/halloween.js keeps a re-render of the same screen from
   replaying it. */

@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'); }

#wyr-content.wyr-design.wyrd-halloween {
    --hw-ink: #1C0F26; --hw-cream: #FFF1D6; --hw-gold: #FFD35A; --hw-amber: #FFB43B; --hw-carved: #2A1208;
    --hw-a: #FF8A2A; --hw-b: #A57BFF; --hw-bar-b: #906BDE; --hw-grey: #4B3D5C; --hw-grey-text: #A99CB9;
    --hw-dim-text: rgba(255, 241, 214, 0.52); --hw-red: #FF6A5C;
    --hw-display: 'Jolly Lodger', 'Chalkduster', fantasy;
    --hw-glow: 0 0 22px rgba(255, 180, 60, 0.75);
    --hw-pumpkin: 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='M54 28 C53 17 56 9 65 4 L71 9 C64 13 62 20 63 28 Z' fill='%233F8A34'/%3E%3C/svg%3E");
    --hw-stripes: 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%);
    flex-direction: column;
    position: relative;
    margin: -8px -6px 0; padding: 30px 16px 24px; min-height: 70vh; box-sizing: border-box;
    border: 4px solid var(--hw-ink); border-radius: 30px; overflow: hidden;
    background:
        radial-gradient(circle, rgba(255, 236, 190, 0.8) 0 1.7px, rgba(255, 236, 190, 0) 2.3px) 13px 21px / 173px 151px,
        radial-gradient(circle, rgba(255, 236, 190, 0.45) 0 1.1px, rgba(255, 236, 190, 0) 1.7px) 71px 90px / 113px 127px,
        radial-gradient(ellipse 85% 75% at 50% 30%, #3B1E66 0%, #24113F 55%, #130823 100%);
    color: var(--hw-cream);
    font-family: 'Sidekick Trivia Baloo', 'Baloo 2', system-ui, sans-serif; font-weight: 700;
}
/* renderWYR shows the screen with an inline display: block. */
#wyr-content.wyr-design.wyrd-halloween[style*="block"] { display: flex !important; }
#wyr-content.wyr-design.wyrd-halloween > * { flex: 0 0 auto; }

/* ── "Would you rather…" on a pumpkin crate, its stem on top ── */
#wyr-content.wyr-design.wyrd-halloween .question {
    order: -2; position: relative; margin: 0 2px 16px; padding: 12px 16px 9px;
    background: var(--hw-stripes); border: 4px solid var(--hw-ink); border-radius: 20px; box-shadow: 0 7px 0 var(--hw-ink);
    color: var(--hw-ink); font-weight: 800; font-size: 26px; line-height: 1.15; text-align: center; white-space: nowrap;
    text-transform: lowercase;
    animation: hwwDrop 0.7s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-halloween .question::first-letter { text-transform: uppercase; }
#wyr-content.wyr-design.wyrd-halloween .question::before {
    content: ''; position: absolute; left: 24px; top: -30px; width: 54px; height: 36px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 40' width='72' height='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") left top / 65px 36px no-repeat;
}

/* ── Paused (the host stopped voting): a crate note, phones only ── */
#wyr-content.wyr-design.wyrd-halloween .stopped-banner {
    order: -1; margin: 0 0 14px; padding: 10px 16px 8px;
    background: var(--hw-carved); color: var(--hw-gold); border: 3px solid var(--hw-amber); border-radius: 14px;
    box-shadow: 0 5px 0 rgba(10, 5, 18, 0.6), inset 0 0 14px rgba(255, 150, 40, 0.35);
    font-family: var(--hw-display); font-weight: 400; font-size: 26px; line-height: 1.1; text-align: center;
    text-shadow: 0 0 12px rgba(255, 170, 50, 0.7);
    animation: hwwPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-halloween .stopped-banner:not(.show) { display: none; }

/* ── The timer: a glowing bar and the pumpkin with the seconds ── */
#wyr-content.wyr-design.wyrd-halloween .vote-timer { order: 0; margin: 0; }
#wyr-content.wyr-design.wyrd-halloween .vote-timer.show {
    display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
    animation: hwwDrop 0.7s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-halloween .vote-timer-bar {
    flex: 1; height: 22px; box-sizing: border-box; background: rgba(255, 241, 214, 0.15);
    border: 3px solid var(--hw-ink); border-radius: 12px; overflow: hidden;
}
#wyr-content.wyr-design.wyrd-halloween .vote-timer-fill {
    background: linear-gradient(90deg, var(--hw-amber), var(--hw-gold)) !important; border-radius: 0;
    box-shadow: 0 0 12px rgba(255, 190, 70, 0.9);
}
#wyr-content.wyr-design.wyrd-halloween .vote-timer[data-level] .vote-timer-fill {
    background: linear-gradient(90deg, #E8483C, var(--hw-red)) !important; box-shadow: 0 0 12px rgba(255, 106, 92, 0.9);
}
#wyr-content.wyr-design.wyrd-halloween .vote-timer-text {
    position: relative; flex: 0 0 auto; width: 64px; height: 55px; margin: 0;
    background: var(--hw-pumpkin) center / 64px 55px no-repeat;
    color: transparent !important; font-size: 0;
}
#wyr-content.wyr-design.wyrd-halloween .vote-timer-text::after {
    content: attr(data-secs); position: absolute; left: 0; right: 0; top: 18px; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--hw-ink); font-weight: 800; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums;
}
#wyr-content.wyr-design.wyrd-halloween .vote-timer-text[data-long]::after { font-size: 18px; }
/* The last seconds: the pumpkin bumps each second. */
#wyr-content.wyr-design.wyrd-halloween .vote-timer[data-level] .vote-timer-text.hww-tick { animation: hwwBump 0.3s ease-out; }

/* ── Voting: two lantern cards and the "or" pumpkin ── */
#wyr-content.wyr-design.wyrd-halloween .wyr-options { order: 2; gap: 0; margin: 4px 4px 0; }
#wyr-content.wyr-design.wyrd-halloween .wyr-option-btn {
    --hw-side: var(--hw-a);
    position: relative; width: 100%; min-height: 168px; margin: 0; padding: 14px 22px;
    border: 5px solid var(--hw-ink); border-radius: 26px; background: var(--hw-side); color: var(--hw-ink);
    box-shadow: 0 7px 0 var(--hw-ink);
    font-family: 'Sidekick Trivia Baloo', 'Baloo 2', system-ui, sans-serif;
    font-weight: 800; font-size: 28px; line-height: 1.12; text-align: center; overflow-wrap: anywhere;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    animation: hwwRise 0.7s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-halloween .wyr-option-btn.wyr-b { --hw-side: var(--hw-b); animation-delay: 0.35s; }
#wyr-content.wyr-design.wyrd-halloween .wyr-option-btn:active { transform: scale(0.96); }
#wyr-content.wyr-design.wyrd-halloween .wyr-option-btn.selected {
    border-color: var(--hw-ink); background: var(--hw-side);
    box-shadow: 0 7px 0 var(--hw-ink), 0 0 0 6px var(--hw-gold), 0 0 0 10px var(--hw-ink), 0 0 36px 10px rgba(255, 200, 80, 0.55);
}
/* The pick's gold check. */
#wyr-content.wyr-design.wyrd-halloween .wyr-option-btn.selected::after {
    content: ''; position: absolute; right: -10px; top: -26px; width: 62px; height: 62px; box-sizing: border-box;
    border-radius: 50%; border: 4px solid var(--hw-ink);
    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='%231C0F26' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 38px 38px no-repeat, var(--hw-gold);
    animation: hwwCheck 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* The other card waits in dusk grey. */
#wyr-content.wyr-design.wyrd-halloween .wyr-options:has(.selected) .wyr-option-btn:not(.selected),
#wyr-content.wyr-design.wyrd-halloween .wyr-option-btn:disabled:not(.selected) {
    background: var(--hw-grey); color: var(--hw-dim-text);
}
#wyr-content.wyr-design.wyrd-halloween .wyr-option-btn:disabled { opacity: 1; cursor: default; }
#wyr-content.wyr-design.wyrd-halloween .wyr-or {
    position: relative; width: 80px; height: 69px; margin: 6px auto 12px;
    background: var(--hw-pumpkin) center / 80px 69px no-repeat;
    color: transparent; font-size: 0;
    animation: hwwPop 0.6s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-halloween .wyr-or::after {
    content: 'or'; position: absolute; left: 18px; top: 26px; width: 44px; height: 38px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; padding-top: 2px;
    border-radius: 50%; background: var(--hw-carved); border: 3px solid var(--hw-ink);
    box-shadow: inset 0 0 8px rgba(255, 140, 30, 0.55);
    color: var(--hw-gold); font-family: var(--hw-display); font-size: 26px; line-height: 1; text-shadow: 0 0 8px rgba(255, 170, 50, 0.8);
}
/* A re-render of the same question (a settings write) never replays the
   entries. */
#wyr-content.wyr-design.wyrd-halloween .wyr-options.hww-same .wyr-option-btn,
#wyr-content.wyr-design.wyrd-halloween .wyr-options.hww-same .wyr-or { animation: none; }

/* ── Status ── */
#wyr-content.wyr-design.wyrd-halloween .status {
    order: 4; margin: 22px 0 0;
    color: var(--hw-cream); font-weight: 700; font-size: 21px; line-height: 1.25; text-align: center;
    animation: hwwRise 0.6s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-halloween .status.hww-stamp { animation: hwwPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* Locked, waiting for the beat or the reveal: the pick stays lit (when the
   cards on screen are this question's) under a glowing "Locked in!". */
#wyr-content.wyr-design.wyrd-halloween.hww-cards:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) #wyr-options {
    display: flex !important; pointer-events: none;
}
#wyr-content.wyr-design.wyrd-halloween.hww-cards:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .wyr-option-btn,
#wyr-content.wyr-design.wyrd-halloween.hww-cards:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .wyr-or,
#wyr-content.wyr-design.wyrd-halloween.hww-cards:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .wyr-option-btn::after { animation: none; }
#wyr-content.wyr-design.wyrd-halloween:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status {
    margin-top: 26px; font-size: 0; color: transparent;
}
#wyr-content.wyr-design.wyrd-halloween:not(.hww-cards):has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status {
    margin-top: 64px;
}
#wyr-content.wyr-design.wyrd-halloween:not(.hww-cards):has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status::before {
    content: ''; display: block; width: 150px; height: 130px; margin: 0 auto 18px;
    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") center / 150px 130px no-repeat;
    filter: drop-shadow(0 0 18px rgba(255, 170, 50, 0.6));
    animation: hwwRise 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* The status's two lines (halloween.js sets them): the big Jolly Lodger
   line and the small one under it. */
#wyr-content.wyr-design.wyrd-halloween .status[data-big]::after {
    content: attr(data-big); display: block;
    color: var(--hw-gold); font-family: var(--hw-display); font-weight: 400; font-size: 56px; line-height: 1;
    text-shadow: var(--hw-glow);
}
#wyr-content.wyr-design.wyrd-halloween .hww-sub {
    order: 7; margin: 8px 24px 0; color: var(--hw-cream); font-weight: 600; font-size: 21px; line-height: 1.3; text-align: center;
}
#wyr-content.wyr-design.wyrd-halloween .hww-sub:empty { display: none; }

/* ── The result (after the display's beat) ──
   It lands 0.7 s after it shows: the WINNER rosette pops on over 0.7 s as
   the display's rosette lands; on a tie it pops over 0.45 s, 0.25 s sooner,
   as the display's "TIED!" does (WouldYouRatherHalloweenDesign
   .phoneResultLanding; the tests read these timings). The Mac's
   resultsDelayMs is each beat less 0.7 s, so the landing is the
   projector's, and "Locked in!" still shows first. */
#wyr-content.wyr-design.wyrd-halloween #wyr-result[style*="block"] { order: 3; display: flex !important; flex-direction: column; margin-top: 2px; }
/* The two options as mini cards. */
#wyr-content.wyr-design.wyrd-halloween #wyr-result > .wyr-result-labels:nth-child(2) {
    order: 1; display: flex; gap: 14px; margin: 4px 2px 0;
    animation: hwwRise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-halloween #wyr-result > .wyr-result-labels:nth-child(2) span {
    flex: 1 1 0; min-height: 104px; box-sizing: border-box; padding: 8px 8px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    border: 4px solid var(--hw-ink); border-radius: 16px; box-shadow: 0 5px 0 var(--hw-ink);
    background: var(--hw-a); color: var(--hw-ink);
    font-weight: 800; font-size: 17px; line-height: 1.1; overflow-wrap: anywhere;
}
#wyr-content.wyr-design.wyrd-halloween #wyr-result > .wyr-result-labels:nth-child(2) .wyr-b-label { background: var(--hw-b); }
/* The winner's card rings gold; the other goes dusk grey. */
#wyr-content.wyr-design.wyrd-halloween #wyr-result:has(.hww-win-a) > .wyr-result-labels:nth-child(2) .wyr-a-label,
#wyr-content.wyr-design.wyrd-halloween #wyr-result:has(.hww-win-b) > .wyr-result-labels:nth-child(2) .wyr-b-label,
#wyr-content.wyr-design.wyrd-halloween #wyr-result:has(.hww-tie) > .wyr-result-labels:nth-child(2) span {
    box-shadow: 0 5px 0 var(--hw-ink), 0 0 0 4px var(--hw-gold), 0 0 24px rgba(255, 200, 80, 0.6);
}
#wyr-content.wyr-design.wyrd-halloween #wyr-result:has(.hww-win-a) > .wyr-result-labels:nth-child(2) .wyr-b-label,
#wyr-content.wyr-design.wyrd-halloween #wyr-result:has(.hww-win-b) > .wyr-result-labels:nth-child(2) .wyr-a-label {
    background: var(--hw-grey); color: var(--hw-dim-text);
}
/* The bar: pumpkin to the split with its dark divider, grape (or dusk
   grey for a loser) beyond. */
#wyr-content.wyr-design.wyrd-halloween .wyr-result-bar {
    order: 2; height: 40px; margin: 26px 2px 14px; box-sizing: border-box;
    border: 4px solid var(--hw-ink); border-radius: 20px; background: var(--hw-bar-b);
    animation: hwwRise 0.5s 0.08s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-halloween .wyr-result-bar .wyr-a-fill { background: var(--hw-a); box-shadow: 4px 0 0 var(--hw-ink); position: relative; z-index: 1; }
#wyr-content.wyr-design.wyrd-halloween .wyr-result-bar .wyr-b-fill { background: var(--hw-bar-b); }
#wyr-content.wyr-design.wyrd-halloween .wyr-result-bar .wyr-a-fill[style*="width:0%"],
#wyr-content.wyr-design.wyrd-halloween .wyr-result-bar .wyr-a-fill[style*="width:100%"] { box-shadow: none; }
#wyr-content.wyr-design.wyrd-halloween #wyr-result:has(.hww-win-a) .wyr-b-fill { background: var(--hw-grey); }
#wyr-content.wyr-design.wyrd-halloween #wyr-result:has(.hww-win-b) .wyr-a-fill { background: var(--hw-grey); }
/* The tally plates. */
#wyr-content.wyr-design.wyrd-halloween #wyr-result > .wyr-result-labels:nth-child(4) {
    order: 3; display: flex; justify-content: space-between; gap: 12px; margin: 0 2px;
    animation: hwwRise 0.5s 0.14s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-halloween #wyr-result > .wyr-result-labels:nth-child(4) span {
    padding: 5px 12px 2px; border: 3px solid var(--hw-a); border-radius: 12px; background: var(--hw-ink);
    color: var(--hw-gold); text-shadow: 0 0 14px rgba(255, 170, 50, 0.8);
    font-weight: 800; font-size: 26px; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums;
}
#wyr-content.wyr-design.wyrd-halloween #wyr-result > .wyr-result-labels:nth-child(4) .wyr-b-label { border-color: var(--hw-b); }
#wyr-content.wyr-design.wyrd-halloween #wyr-result:has(.hww-win-a) > .wyr-result-labels:nth-child(4) .wyr-b-label,
#wyr-content.wyr-design.wyrd-halloween #wyr-result:has(.hww-win-b) > .wyr-result-labels:nth-child(4) .wyr-a-label {
    border-color: var(--hw-grey); color: var(--hw-cream); text-shadow: none;
}
/* The WINNER rosette in its rays, candy round it. */
#wyr-content.wyr-design.wyrd-halloween .hww-icon { order: 4; position: relative; height: 176px; margin: 8px 0 0; }
#wyr-content.wyr-design.wyrd-halloween .hww-icon.hww-none { display: none; }
#wyr-content.wyr-design.wyrd-halloween .hww-rays {
    position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 211, 90, 0.38) 0deg 9deg, rgba(255, 211, 90, 0) 9deg 22deg);
    -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
    animation: hwwRays 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-halloween .hww-rosette {
    position: absolute; left: 50%; top: 10px; width: 118px; height: 148px; margin-left: -59px;
    filter: drop-shadow(0 8px 0 #1C0F26);
    animation: hwwRosette 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-halloween .hww-tie .hww-rosette { animation: hwwRosette 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
#wyr-content.wyr-design.wyrd-halloween .hww-rosette svg { display: block; width: 118px; height: 148px; overflow: visible; }
#wyr-content.wyr-design.wyrd-halloween .hww-sweet { position: absolute; display: block; animation: hwwSweet 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
#wyr-content.wyr-design.wyrd-halloween .hww-sweet svg { display: block; width: 100%; height: 100%; }
#wyr-content.wyr-design.wyrd-halloween .hww-dot { position: absolute; border-radius: 50%; border: 3px solid var(--hw-ink); animation: hwwSweet 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
/* The outcome in Jolly Lodger, and the line under it (halloween.js). */
#wyr-content.wyr-design.wyrd-halloween .wyr-winner {
    order: 5; margin: 14px 8px 0; color: var(--hw-gold); font-family: var(--hw-display); font-weight: 400;
    font-size: 48px; line-height: 1.02; text-align: center; text-shadow: var(--hw-glow); overflow-wrap: anywhere;
    animation: hwwPop 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-halloween #wyr-result.hww-long-name .wyr-winner { font-size: 36px; }
/* The result's status ("Locked in!") gives way to the line under the
   outcome (.hww-sub). */
#wyr-content.wyr-design.wyrd-halloween:has(#wyr-result[style*="block"]) .status { display: none; }
#wyr-content.wyr-design.wyrd-halloween:has(#wyr-result[style*="block"]) .hww-sub { animation: hwwRise 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
#wyr-content.wyr-design.wyrd-halloween #wyr-result.hww-same *,
#wyr-content.wyr-design.wyrd-halloween #wyr-result.hww-same,
#wyr-content.wyr-design.wyrd-halloween:has(#wyr-result.hww-same[style*="block"]) .hww-sub { animation: none; }

/* Long options (up to 60 characters): the cards give back size. */
#wyr-content.wyr-design.wyrd-halloween .wyr-option-btn.hww-long { font-size: 23px; }
#wyr-content.wyr-design.wyrd-halloween #wyr-result.hww-long-options > .wyr-result-labels:nth-child(2) span { font-size: 14px; min-height: 112px; padding: 6px 6px; }

/* Short screens (an SE in Safari): the whole question still fits. */
@media (max-height: 720px) {
    #wyr-content.wyr-design.wyrd-halloween { padding: 26px 14px 16px; }
    #wyr-content.wyr-design.wyrd-halloween .question { font-size: 23px; padding: 9px 14px 7px; margin-bottom: 12px; }
    #wyr-content.wyr-design.wyrd-halloween .vote-timer.show { margin-bottom: 8px; }
    #wyr-content.wyr-design.wyrd-halloween .vote-timer-text { width: 54px; height: 47px; background-size: 54px 47px; }
    #wyr-content.wyr-design.wyrd-halloween .vote-timer-text::after { top: 15px; font-size: 22px; }
    #wyr-content.wyr-design.wyrd-halloween .wyr-option-btn { min-height: 128px; font-size: 24px; padding: 10px 18px; border-radius: 22px; }
    #wyr-content.wyr-design.wyrd-halloween .wyr-option-btn.hww-long { font-size: 20px; }
    #wyr-content.wyr-design.wyrd-halloween .wyr-or { width: 66px; height: 57px; margin: 4px auto 8px; background-size: 66px 57px; }
    #wyr-content.wyr-design.wyrd-halloween .wyr-or::after { left: 15px; top: 21px; width: 36px; height: 32px; font-size: 22px; }
    #wyr-content.wyr-design.wyrd-halloween .status { margin-top: 16px; font-size: 19px; }
    #wyr-content.wyr-design.wyrd-halloween .status[data-big]::after { font-size: 48px; }
    #wyr-content.wyr-design.wyrd-halloween:not(.hww-cards):has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status { margin-top: 40px; }
    #wyr-content.wyr-design.wyrd-halloween #wyr-result > .wyr-result-labels:nth-child(2) span { min-height: 84px; font-size: 15px; }
    #wyr-content.wyr-design.wyrd-halloween #wyr-result.hww-long-options > .wyr-result-labels:nth-child(2) span { min-height: 96px; font-size: 13px; }
    #wyr-content.wyr-design.wyrd-halloween .wyr-result-bar { height: 34px; margin: 20px 2px 10px; }
    #wyr-content.wyr-design.wyrd-halloween #wyr-result > .wyr-result-labels:nth-child(4) span { font-size: 22px; }
    #wyr-content.wyr-design.wyrd-halloween .hww-icon { height: 150px; }
    #wyr-content.wyr-design.wyrd-halloween .hww-rosette { transform: scale(0.84); transform-origin: 50% 0; }
    #wyr-content.wyr-design.wyrd-halloween .wyr-winner { font-size: 42px; margin-top: 8px; }
    #wyr-content.wyr-design.wyrd-halloween #wyr-result.hww-long-name .wyr-winner { font-size: 32px; }
}

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

/* Motion: transforms only (the boards' springing rises and pops). */
@keyframes hwwRise { from { transform: translateY(520px); } }
@keyframes hwwDrop { from { transform: translateY(-220px); } }
@keyframes hwwPop { from { transform: scale(0.001) rotate(-12deg); } }
@keyframes hwwCheck { from { transform: scale(0.001); } }
@keyframes hwwRosette { from { transform: scale(0.001) rotate(-110deg); } to { transform: scale(1) rotate(0deg); } }
@keyframes hwwRays { from { transform: scale(0.001) rotate(-40deg); } }
@keyframes hwwSweet { from { transform: translateY(-160px) rotate(-90deg) scale(0.4); } }
@keyframes hwwBump { 50% { transform: scale(1.16); } }