/* Live Trivia · Halloween phone skin ("Jack-o'-Lantern Night", owner
   decision 2026-10-07): the HW-LT-Phone board. Every rule is scoped to
   #trivia-content.pop-quiz.ltd-halloween and layered on the shared Pop Quiz
   structure, so it only restyles it; the classic screens never match.

   The phone is the display's moonlit night (stars, a bat), the title a
   ribbed pumpkin banner with its stem, the question a lantern panel lit
   from inside, every answer a candy-coloured card (HalloweenPalette:
   pumpkin, slime, grape, candy corn, bubblegum; the one night ink) with its
   letter carved into a dark mini pumpkin, the clock a little pumpkin with a
   candle strip burning down, a jack-o'-lantern that lights up for the
   results, and the score in carved slots. Jolly Lodger for the headlines
   and labels, Baloo 2 600–800 for the text.

   Motion: banners and cards drop and settle, the jack-o'-lantern pops on
   and its face lights (a clip opening over the lit face), the rays turn.
   Transforms and clips only. The question screen keeps the timer, the
   question, every answer and the score bar on one screen (the score bar in
   flow under the answers, the shared 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'); }

#trivia-content.pop-quiz.ltd-halloween {
    --hw-ink: #1C0F26; --hw-cream: #FFF1D6; --hw-glow: #FFD35A; --hw-hot: #FFB43B; --hw-carve: #2A1208;
    --hw-skin: 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%);
    --hw-panel: radial-gradient(ellipse 75% 85% at 50% 45%, #FFFBEF 0%, #FFF1CF 55%, #FFDF94 100%);
    --pq-ink: #1C0F26; --pq-cream: #FFF1D6; --pq-yellow: #FFD35A; --pq-green: #9BE15D; --pq-red: #FF6A5C;
    position: relative; isolation: isolate;
    font-family: 'Sidekick Trivia Baloo', 'Baloo 2', system-ui, sans-serif;
    font-weight: 800;
    color: var(--hw-cream);
    padding-top: 30px;
    background:
        radial-gradient(circle, rgba(255, 236, 190, 0.8) 0 1.4px, transparent 1.9px) 13px 21px / 113px 101px,
        radial-gradient(circle, rgba(255, 236, 190, 0.45) 0 1px, transparent 1.5px) 61px 70px / 79px 89px,
        radial-gradient(ellipse 85% 75% at 50% 30%, #3B1E66 0%, #24113F 55%, #130823 100%);
}
/* A bat over the top corner, under everything. */
#trivia-content.pop-quiz.ltd-halloween::before {
    content: ''; position: absolute; right: 26px; top: 8px; width: 46px; height: 19px; z-index: -1; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M50 20 C48 14 46 13 45 9 L43 15 C35 6 22 4 10 9 C18 13 20 19 18 26 C24 22 31 23 33 30 C37 26 43 27 46 33 L50 29 L54 33 C57 27 63 26 67 30 C69 23 76 22 82 26 C80 19 82 13 90 9 C78 4 65 6 57 15 L55 9 C54 13 52 14 50 20 Z' fill='%230D0618'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-8deg);
}
#trivia-content.pop-quiz.ltd-halloween .pq-title,
#trivia-content.pop-quiz.ltd-halloween .pq-display { font-family: 'Jolly Lodger', 'Sidekick Trivia Baloo', cursive; font-weight: 400; letter-spacing: 0.5px; }
#trivia-content.pop-quiz.ltd-halloween .pq-sticker {
    background: var(--hw-panel); color: var(--hw-ink); border: 4px solid var(--hw-ink); border-radius: 20px;
    box-shadow: 0 7px 0 var(--hw-ink), 0 0 30px rgba(255, 170, 60, 0.25);
}

/* ── Join: the title on the pumpkin banner, "Join the party!" in candle
   glow, the name on a lit panel, a glowing Join button ── */
#trivia-content.pop-quiz.ltd-halloween .trivia-title {
    position: relative; margin: 22px 4px 92px; padding: 14px 18px 12px;
    background: var(--hw-skin); color: var(--hw-ink);
    border: 4px solid var(--hw-ink); border-radius: 20px; box-shadow: 0 7px 0 var(--hw-ink);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1.15;
    text-shadow: none;
    animation: ltdhwDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-title::before {
    content: ''; position: absolute; left: 26px; top: -30px; width: 56px; height: 34px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 42'%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") center / contain no-repeat;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-title::after {
    content: 'Join the party!'; position: absolute; left: 0; right: 0; top: calc(100% + 26px);
    font-family: 'Jolly Lodger', cursive; font-weight: 400; font-size: 3.2rem; line-height: 1;
    color: var(--hw-glow); text-shadow: 0 0 22px rgba(255, 180, 60, 0.75);
}
#trivia-content.pop-quiz.ltd-halloween .trivia-name-input {
    height: 68px; margin-bottom: 20px;
    background: var(--hw-panel); color: var(--hw-ink);
    border: 4px solid var(--hw-ink); border-radius: 18px; box-shadow: inset 0 0 18px rgba(255, 170, 60, 0.5);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800; font-size: 1.5rem;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-name-input::placeholder { color: rgba(28, 15, 38, 0.42); }
#trivia-content.pop-quiz.ltd-halloween .trivia-join-btn {
    height: 68px; background: var(--hw-glow); color: var(--hw-ink);
    border: 4px solid var(--hw-ink); border-radius: 18px; box-shadow: 0 6px 0 var(--hw-ink), 0 0 26px rgba(255, 200, 80, 0.45);
    font-family: 'Jolly Lodger', cursive; font-weight: 400; font-size: 2.4rem; letter-spacing: 1px;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-join-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--hw-ink); }
#trivia-content.pop-quiz.ltd-halloween #trivia-random-name p { color: var(--hw-cream) !important; font-weight: 700; }
#trivia-content.pop-quiz.ltd-halloween .trivia-random-name-display {
    display: inline-block; padding: 12px 26px 10px; color: var(--hw-ink);
    background: var(--hw-panel); border: 4px solid var(--hw-ink); border-radius: 18px; box-shadow: 0 6px 0 var(--hw-ink);
}
#trivia-content.pop-quiz.ltd-halloween .trivia-reroll-btn {
    color: var(--hw-glow); background: transparent; border: 3px solid var(--hw-glow); border-radius: 999px;
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800;
}

/* You're in: a jack-o'-lantern lights up over turning rays, "You're in!"
   in candle glow, the name on a candy pill. */
#trivia-content.pop-quiz.ltd-halloween #trivia-lobby:has(#trivia-joined-msg[style*="block"]) .trivia-title { display: none; }
#trivia-content.pop-quiz.ltd-halloween .pq-joined .pq-burst {
    position: relative; width: 300px; height: auto; padding-top: 214px; clip-path: none;
    background: none; color: var(--hw-glow); font-size: 3.9rem; line-height: 0.95;
    text-shadow: 0 0 22px rgba(255, 180, 60, 0.75);
    animation: none;
}
#trivia-content.pop-quiz.ltd-halloween .pq-joined .pq-burst::before {
    content: ''; position: absolute; left: 50%; top: -56px; width: 340px; height: 340px; margin-left: -170px; z-index: -1;
    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%);
    border-radius: 50%;
    animation: ltdhwRays 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both, ltdhwTurn 24s linear infinite;
}
#trivia-content.pop-quiz.ltd-halloween .pq-joined .pq-burst::after {
    content: ''; position: absolute; left: 50%; top: 0; width: 210px; height: 182px; margin-left: -105px;
    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' stroke-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 / contain no-repeat;
    filter: drop-shadow(0 0 22px rgba(255, 170, 50, 0.6));
    animation: ltdhwPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .pq-joined .pq-burst span {
    display: inline-block;
    animation: ltdhwStamp 0.4s 0.35s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .pq-name-chip {
    position: relative; display: inline-block; margin: 16px 0 16px; padding: 8px 26px 6px;
    color: var(--hw-ink); font-size: 1.6rem; line-height: 1.1; font-weight: 800; text-shadow: none;
    background: #FF8A2A; border: 4px solid var(--hw-ink); border-radius: 999px; box-shadow: 0 6px 0 var(--hw-ink);
    transform: rotate(-2deg);
    animation: ltdhwDeal 0.55s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-waiting-joined p,
#trivia-content.pop-quiz.ltd-halloween .pq-wait-line { color: var(--hw-cream); font-size: 1.15rem; font-weight: 700; }

/* ── Question: the pumpkin clock and its candle strip, the lit panel, the
   candy cards ── */
#trivia-content.pop-quiz.ltd-halloween #trivia-question { column-gap: 10px; }
#trivia-content.pop-quiz.ltd-halloween .trivia-timer-bar {
    height: 22px; overflow: hidden;
    background: rgba(255, 241, 214, 0.15); border: 3px solid var(--hw-ink); border-radius: 12px;
    animation: ltdhwDropSmall 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-timer-fill {
    background: linear-gradient(90deg, var(--hw-hot), var(--hw-glow)) !important;
    box-shadow: 0 0 12px rgba(255, 190, 70, 0.9);
}
#trivia-content.pop-quiz.ltd-halloween .trivia-timer-fill[data-level="urgent"] { background: linear-gradient(90deg, #FF6A5C, #FFB43B) !important; }
/* The little pumpkin with the seconds in its middle. */
#trivia-content.pop-quiz.ltd-halloween .trivia-timer-text {
    width: 66px; height: 58px; padding-top: 12px; border: none; border-radius: 0; box-shadow: none;
    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' stroke-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") center / contain no-repeat;
    color: var(--hw-ink) !important; text-shadow: none;
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800; font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
    animation: ltdhwPop 0.5s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-timer-text[data-level="warn"],
#trivia-content.pop-quiz.ltd-halloween .trivia-timer-text[data-level="urgent"] { 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' stroke-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") center / contain no-repeat; }
#trivia-content.pop-quiz.ltd-halloween .trivia-timer-text[data-level="urgent"] { color: #FFF1D6 !important; }
#trivia-content.pop-quiz.ltd-halloween .trivia-timer-text.pq-tick { animation: ltdhwTick 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* The lit lantern panel. */
#trivia-content.pop-quiz.ltd-halloween .trivia-question-text {
    margin: 14px 0 16px; padding: 16px 16px 16px;
    background: var(--hw-panel); color: var(--hw-ink);
    border: 4px solid var(--hw-ink); border-radius: 20px;
    box-shadow: inset 0 0 26px rgba(255, 170, 60, 0.5), 0 6px 0 var(--hw-ink);
    font-weight: 800; font-size: 1.28rem; line-height: 1.18; text-align: center;
    animation: ltdhwDrop 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-options-grid { gap: 12px; margin: 0; }
#trivia-content.pop-quiz.ltd-halloween .trivia-options-grid[data-count="5"] { gap: 9px; }
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn {
    position: relative; gap: 12px; min-height: 64px; padding: 4px 14px 4px 8px;
    color: var(--hw-ink); text-shadow: none;
    border: 4px solid var(--hw-ink); border-radius: 18px;
    box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.22), 0 6px 0 var(--hw-ink);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.08;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
    animation: ltdhwDeal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn:nth-child(1) { animation-delay: 0.45s; }
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn:nth-child(2) { animation-delay: 0.55s; }
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn:nth-child(3) { animation-delay: 0.65s; }
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn:nth-child(4) { animation-delay: 0.75s; }
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn:nth-child(5) { animation-delay: 0.85s; }
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn:active { transform: translateY(5px); box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.22), 0 1px 0 var(--hw-ink); }
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn.selected {
    transform: translateY(3px) scale(0.97);
    box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.22), 0 0 0 5px var(--hw-glow), 0 3px 0 var(--hw-ink);
}
#trivia-content.pop-quiz.ltd-halloween .trivia-options-grid[data-count="5"] .trivia-option-btn { min-height: 56px; font-size: 1.15rem; }
/* The letter carved into a dark mini pumpkin, in the card's colour. */
#trivia-content.pop-quiz.ltd-halloween .trivia-option-letter {
    flex: 0 0 auto; width: 50px; height: 46px; padding-top: 9px; box-sizing: border-box; border-radius: 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='%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='M60 25 Q48 63 60 101 M60 25 Q72 63 60 101' fill='none' stroke='%231C0F26' stroke-width='2.4' stroke-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") center / contain no-repeat; color: var(--hw-glow); text-shadow: none;
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800; font-size: 1.45rem;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn:nth-child(1) .trivia-option-letter { color: #FF8A2A; }
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn:nth-child(2) .trivia-option-letter { color: #9BE15D; }
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn:nth-child(3) .trivia-option-letter { color: #B993FF; }
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn:nth-child(4) .trivia-option-letter { color: #FFD23F; }
#trivia-content.pop-quiz.ltd-halloween .trivia-option-btn:nth-child(5) .trivia-option-letter { color: #FF7FB0; }
#trivia-content.pop-quiz.ltd-halloween .trivia-options-grid[data-count="5"] .trivia-option-letter { width: 44px; height: 40px; padding-top: 7px; font-size: 1.3rem; }
/* Short screens: the cards give back height so the whole question still fits
   with the score bar under it. */
@supports (height: 100dvh) {
    #trivia-content.pop-quiz.ltd-halloween .trivia-option-btn { min-height: clamp(48px, calc((100dvh - 372px) / 4), 64px); }
    #trivia-content.pop-quiz.ltd-halloween .trivia-options-grid[data-count="5"] .trivia-option-btn { min-height: clamp(44px, calc((100dvh - 380px) / 5), 56px); }
}
@media (max-height: 720px) {
    #trivia-content.pop-quiz.ltd-halloween { padding-top: 22px; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-timer-text { width: 58px; height: 50px; padding-top: 10px; font-size: 1.25rem; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-question-text { font-size: 1.1rem; padding: 10px 12px; margin: 8px 0 10px; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-score-bar { margin-top: 12px; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-options-grid { gap: 10px; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-options-grid[data-count="5"] { gap: 7px; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-option-btn { font-size: 1.12rem; line-height: 1.02; padding-top: 3px; padding-bottom: 3px; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-options-grid[data-count="5"] .trivia-option-btn { font-size: 1.05rem; }
}
@media (max-height: 600px) {
    #trivia-content.pop-quiz.ltd-halloween .trivia-question-text { font-size: 0.98rem; line-height: 1.12; padding: 9px 10px; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-options-grid { gap: 8px; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-option-btn { font-size: 1.02rem; min-height: 44px; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-option-letter { width: 40px; height: 36px; padding-top: 6px; font-size: 1.15rem; }
}

/* ── Locked in: a jack-o'-lantern waiting, half lit; "Locked in!" in
   candle glow; the pick on its card ── */
#trivia-content.pop-quiz.ltd-halloween .pq-locked.show { padding-top: 22px; }
#trivia-content.pop-quiz.ltd-halloween .pq-lock-card {
    position: relative; margin: 0 8px; padding: 196px 0 0; gap: 8px; background: none; border: none; box-shadow: none;
    animation: ltdhwStamp 0.42s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .pq-lock-card::before {
    content: ''; position: absolute; left: 50%; top: 0; width: 200px; height: 174px; margin-left: -100px;
    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' stroke-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='%233A1A0A'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 14px rgba(255, 170, 50, 0.3));
}
#trivia-content.pop-quiz.ltd-halloween .pq-lock-card svg { display: none; }
#trivia-content.pop-quiz.ltd-halloween .pq-lock-card .pq-display {
    color: var(--hw-glow); font-size: 3.4rem; line-height: 1; text-shadow: 0 0 22px rgba(255, 180, 60, 0.75);
}
#trivia-content.pop-quiz.ltd-halloween .pq-pick {
    margin: 22px 0 18px; padding: 8px 20px 8px 8px; gap: 10px;
    color: var(--hw-ink); text-shadow: none; font-weight: 800; font-size: 1.25rem; line-height: 1.08;
    border: 4px solid var(--hw-ink); border-radius: 18px; box-shadow: 0 6px 0 var(--hw-ink);
    transform: rotate(-2deg);
    animation: ltdhwDeal 0.5s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .pq-pick .trivia-option-letter { width: 46px; height: 42px; padding-top: 8px; font-size: 1.3rem; color: var(--hw-glow); }

/* ── Result: the jack-o'-lantern lights up over turning rays (correct), or
   stays dark (wrong) ── */
#trivia-content.pop-quiz.ltd-halloween .trivia-result { padding: 14px 0 0; }
#trivia-content.pop-quiz.ltd-halloween .trivia-result-icon { position: relative; width: 300px; height: 250px; margin: 0 auto 6px; }
#trivia-content.pop-quiz.ltd-halloween .ltdhw-result { position: relative; width: 300px; height: 250px; }
#trivia-content.pop-quiz.ltd-halloween .ltdhw-rays {
    position: absolute; left: -20px; top: -40px; width: 340px; height: 340px; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 211, 90, 0.42) 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%);
    animation: ltdhwRays 0.7s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both, ltdhwTurn 24s linear infinite;
}
#trivia-content.pop-quiz.ltd-halloween .ltdhw-jack {
    position: absolute; left: 40px; top: 20px; width: 220px; height: 191px;
    animation: ltdhwPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .ltdhw-jack::before,
#trivia-content.pop-quiz.ltd-halloween .ltdhw-jack::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' stroke-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='%233A1A0A'/%3E%3C/svg%3E") center / contain no-repeat; }
#trivia-content.pop-quiz.ltd-halloween .ltdhw-correct .ltdhw-jack { filter: drop-shadow(0 0 26px rgba(255, 170, 50, 0.6)); }
/* The candle catches: the lit face opens from the middle. */
#trivia-content.pop-quiz.ltd-halloween .ltdhw-correct .ltdhw-jack::after {
    background-image: 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' stroke-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");
    clip-path: circle(0% at 50% 62%);
    animation: ltdhwLight 0.7s 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#trivia-content.pop-quiz.ltd-halloween .ltdhw-wrong .ltdhw-jack { animation: ltdhwPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both, ltdhwShake 0.4s 0.6s ease; }
#trivia-content.pop-quiz.ltd-halloween .trivia-result-text {
    font-family: 'Jolly Lodger', cursive; font-weight: 400; font-size: 4.1rem; line-height: 1;
    color: var(--hw-glow) !important; text-shadow: 0 0 22px rgba(255, 180, 60, 0.75); margin-bottom: 16px;
    /* Hidden until the stamp starts: filled backwards, its first frame sat
       on screen through the delay. */
    animation: ltdhwStamp 0.4s 0.6s cubic-bezier(0.2, 1.4, 0.5, 1) both, ltdhwAppear 0.01s 0.6s steps(1) both;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-result-points {
    display: inline-block; padding: 8px 22px 6px; color: var(--hw-ink);
    background: var(--hw-panel); border: 4px solid var(--hw-ink); border-radius: 18px; box-shadow: 0 6px 0 var(--hw-ink);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800; font-size: 1.7rem;
    animation: ltdhwDeal 0.5s 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-result-points.pq-earned { background: var(--hw-glow); box-shadow: 0 6px 0 var(--hw-ink), 0 0 26px rgba(255, 200, 80, 0.5); }

/* ── Get ready: the lantern panel with the line in Jolly Lodger, three
   candy drops hopping ── */
#trivia-content.pop-quiz.ltd-halloween .pq-ready {
    margin: 60px 10px 0; padding: 30px 22px 28px; gap: 20px;
    animation: ltdhwDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .pq-ready .pq-display { color: var(--hw-ink); font-size: 2.6rem; line-height: 1.02; }
#trivia-content.pop-quiz.ltd-halloween .pq-dots { gap: 18px; height: 44px; }
#trivia-content.pop-quiz.ltd-halloween .pq-dots span { width: 24px; height: 24px; border: 3px solid var(--hw-ink); }
#trivia-content.pop-quiz.ltd-halloween .pq-dots span:nth-child(1) { background: #FF8A2A; }
#trivia-content.pop-quiz.ltd-halloween .pq-dots span:nth-child(2) { background: #9BE15D; }
#trivia-content.pop-quiz.ltd-halloween .pq-dots span:nth-child(3) { background: #B993FF; }

/* ── Game over: the lit jack-o'-lantern, "Game over!" in candle glow, the
   final score in carved slots ── */
#trivia-content.pop-quiz.ltd-halloween .trivia-final-rank {
    position: relative; margin: 0 6px 20px; padding: 196px 0 0;
    background: none; border: none; box-shadow: none; color: var(--hw-glow);
    font-family: 'Jolly Lodger', cursive; font-weight: 400; font-size: 4rem; line-height: 1;
    text-shadow: 0 0 22px rgba(255, 180, 60, 0.75);
    animation: ltdhwStamp 0.45s 0.3s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .trivia-final-rank::before {
    content: ''; position: absolute; left: 50%; top: 0; width: 210px; height: 182px; margin-left: -105px;
    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' stroke-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 / contain no-repeat;
    filter: drop-shadow(0 0 22px rgba(255, 170, 50, 0.6));
}
#trivia-content.pop-quiz.ltd-halloween .trivia-final-score { color: var(--hw-cream); }
#trivia-content.pop-quiz.ltd-halloween .ltdhw-final { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#trivia-content.pop-quiz.ltd-halloween .ltdhw-final-label {
    font-family: 'Jolly Lodger', cursive; font-size: 2rem; letter-spacing: 1px; color: var(--hw-cream);
    animation: ltdhwDeal 0.5s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-halloween .ltdhw-slots { display: flex; align-items: center; gap: 5px; animation: ltdhwDeal 0.55s 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
#trivia-content.pop-quiz.ltd-halloween .ltdhw-slot {
    width: 44px; height: 60px; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    background: radial-gradient(circle, var(--hw-carve) 55%, #5C2A0C 100%); border: 4px solid var(--hw-ink); border-radius: 10px;
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800; font-size: 2rem; line-height: 1; padding-top: 4px;
    color: var(--hw-glow); text-shadow: 0 0 12px rgba(255, 170, 50, 0.85);
}
#trivia-content.pop-quiz.ltd-halloween .ltdhw-sep { font-weight: 800; font-size: 1.8rem; color: var(--hw-glow); padding: 0 1px; }

/* ── Score bar: in flow under the answers (the shared rule), night ink
   with a hot-glow rim; the score glowing ── */
#trivia-content.pop-quiz.ltd-halloween .trivia-score-bar {
    position: relative; z-index: 1;
    margin-top: 18px; padding: 10px 16px;
    background: var(--hw-ink); border: 4px solid var(--hw-hot); border-radius: 18px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}
#trivia-content.pop-quiz.ltd-halloween .trivia-score-label {
    font-family: 'Jolly Lodger', cursive; font-weight: 400; font-size: 1.8rem; line-height: 1; letter-spacing: 1px;
    text-transform: uppercase; color: var(--hw-cream);
}
#trivia-content.pop-quiz.ltd-halloween .trivia-score-value {
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1;
    color: var(--hw-glow); text-shadow: 0 0 14px rgba(255, 170, 50, 0.8); font-variant-numeric: tabular-nums;
    background: none; border: none; box-shadow: none; padding: 0;
}

/* Short screens (an SE in Safari): the art comes down a size so those
   screens fit too. */
@media (max-height: 720px) {
    #trivia-content.pop-quiz.ltd-halloween .pq-joined .pq-burst { padding-top: 170px; font-size: 3.3rem; }
    #trivia-content.pop-quiz.ltd-halloween .pq-joined .pq-burst::after { width: 170px; height: 148px; margin-left: -85px; }
    #trivia-content.pop-quiz.ltd-halloween .pq-joined .pq-burst::before { width: 280px; height: 280px; margin-left: -140px; top: -50px; }
    #trivia-content.pop-quiz.ltd-halloween .pq-lock-card { padding-top: 160px; }
    #trivia-content.pop-quiz.ltd-halloween .pq-lock-card::before { width: 164px; height: 143px; margin-left: -82px; }
    #trivia-content.pop-quiz.ltd-halloween .pq-lock-card .pq-display { font-size: 3rem; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-result-icon,
    #trivia-content.pop-quiz.ltd-halloween .ltdhw-result { width: 240px; height: 200px; }
    #trivia-content.pop-quiz.ltd-halloween .ltdhw-jack { left: 32px; top: 16px; width: 176px; height: 153px; }
    #trivia-content.pop-quiz.ltd-halloween .ltdhw-rays { left: -20px; top: -40px; width: 280px; height: 280px; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-result-text { font-size: 3.5rem; margin-bottom: 12px; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-final-rank { padding-top: 160px; font-size: 3.5rem; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-final-rank::before { width: 170px; height: 148px; margin-left: -85px; }
    #trivia-content.pop-quiz.ltd-halloween .trivia-title { margin-bottom: 84px; }
}

/* Motion: transforms and clips only. */
@keyframes ltdhwDrop { from { transform: translateY(-120px) rotate(-4deg); } }
@keyframes ltdhwDropSmall { from { transform: translateY(-80px); } }
@keyframes ltdhwDeal { from { transform: translateY(160px); } }
@keyframes ltdhwPop { from { transform: scale(0); } }
@keyframes ltdhwRays { from { transform: scale(0); } }
@keyframes ltdhwTurn { to { rotate: 360deg; } }
@keyframes ltdhwTick { 40% { transform: scale(1.12); } }
@keyframes ltdhwStamp { from { transform: scale(1.6) rotate(-8deg); } }
@keyframes ltdhwLight { to { clip-path: circle(75% at 50% 62%); } }
@keyframes ltdhwShake { 25% { transform: rotate(-7deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes ltdhwAppear { from { visibility: hidden; } to { visibility: visible; } }