/* Live Responses · Halloween phone skin ("Jack-o'-Lantern Night", owner
   decision 2026-10-07): the Holiday Themes canvas's HW-LR-Phone and Anim
   boards. Every rule is scoped to #qa-content.responses-design.lrd-halloween,
   #toast.responses-design.lrd-halloween or
   #waiting-message.responses-design.lrd-halloween.lr-ended, so no other
   screen or feature is touched; the classic screens never match.

   The purple night with its stars and a harvest moon, the prompt on a ribbed
   pumpkin banner with its stem and leaf, the response box a glowing lantern
   panel, the Send button candle glow in Jolly Lodger (dusk grey while
   paused), "My Responses" cards with a painted status tag (candy-corn yellow
   Submitted, slime Approved), the sort bar glow and night, and every
   response a cream row with its vote pill on the left: the HOST's reaction
   emoji (`.qa-response-emoji`, never a drawn heart or thumb, owner decision
   2026-10-07) and the count in Baloo's fixed glowing cells, the pill lit
   once voted, then a stripe in the response's arrival colour (the display's
   card colour). Paused: a night card with a glowing jack-o'-lantern swings
   up where the form was. The toast is the same night card ("Sent!"). The
   ended screen is the glowing jack-o'-lantern and "Get ready!". Jolly
   Lodger for the headings and the button, Baloo ("Sidekick Trivia Baloo")
   for every other word. The colours are ShowThemePalettes.swift's
   HalloweenPalette. Transforms only; no phone timing (a pause, an approval
   and the end show at once). */

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

#qa-content.responses-design.lrd-halloween,
#waiting-message.responses-design.lrd-halloween.lr-ended,
#toast.responses-design.lrd-halloween {
    --lrh-ink: #1C0F26; --lrh-cream: #FFF1D6; --lrh-glow: #FFD35A; --lrh-glow-hot: #FFB43B;
    --lrh-vine: #3F8A34; --lrh-vine-d: #2B6125; --lrh-slime: #9BE15D; --lrh-corn: #FFD23F;
    --lrh-grey: #4B3D5C; --lrh-row: rgba(255, 241, 214, 0.94); --lrh-muted: #CFC4DD;
    --lrh-panel: radial-gradient(ellipse 75% 85% at 50% 45%, #FFFBEF 0%, #FFF1CF 55%, #FFDF94 100%);
    --lrh-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%);
    font-family: 'Sidekick Trivia Baloo', 'Baloo 2', system-ui, sans-serif;
}
#qa-content.responses-design.lrd-halloween,
#waiting-message.responses-design.lrd-halloween.lr-ended {
    position: relative;
    min-height: calc(100dvh - 40px);
    padding: 52px 16px 22px;
    border-radius: 26px;
    overflow: hidden;
    font-weight: 700;
    color: var(--lrh-cream);
    background:
        radial-gradient(circle, rgba(255, 236, 190, 0.8) 0 1.4px, rgba(0, 0, 0, 0) 1.9px) 13px 21px / 131px 113px,
        radial-gradient(circle, rgba(255, 236, 190, 0.45) 0 1px, rgba(0, 0, 0, 0) 1.5px) 71px 90px / 89px 97px,
        radial-gradient(ellipse 85% 75% at 50% 30%, #3B1E66 0%, #24113F 55%, #130823 100%);
}
/* The harvest moon peeking in at the top-right corner, with its glow. */
#qa-content.responses-design.lrd-halloween::before,
#waiting-message.responses-design.lrd-halloween.lr-ended::before {
    content: ''; position: absolute; top: -46px; right: -40px; width: 104px; height: 104px; border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 38% 36%, #FFF7DC 0%, #FFE7A6 55%, #F4C866 100%);
    box-shadow: 0 0 40px 14px rgba(255, 214, 120, 0.2);
}
/* A column, so the paused card takes the form's place. */
#qa-content.responses-design.lrd-halloween:not([style*="none"]) { display: flex !important; flex-direction: column; }

/* ── The prompt: on a ribbed pumpkin banner with its stem and leaf ── */
#qa-content.responses-design.lrd-halloween #qa-title {
    order: 1;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 70px; margin: 0 4px 22px; padding: 12px 18px 10px;
    background: var(--lrh-skin);
    color: var(--lrh-ink);
    border: 4px solid var(--lrh-ink); border-radius: 20px;
    box-shadow: 0 7px 0 var(--lrh-ink), 0 0 30px rgba(255, 150, 40, 0.25);
    font-weight: 800; font-size: 21px; line-height: 1.15; text-align: center;
    text-wrap: balance; overflow-wrap: anywhere;
    animation: lrhDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#qa-content.responses-design.lrd-halloween .lrh-stem {
    position: absolute; left: 26px; top: -30px; width: 58px; height: 38px; overflow: visible; pointer-events: none;
}
#qa-content.responses-design.lrd-halloween #qa-submitted-msg,
#qa-content.responses-design.lrd-halloween #qa-profanity-error { order: 2; }

/* ── Paused: a night card with a glowing jack-o'-lantern, swung up where
   the form was ── */
#qa-content.responses-design.lrd-halloween #qa-paused-banner { order: 3; }
#qa-content.responses-design.lrd-halloween #qa-paused-banner.show {
    display: flex; align-items: center; gap: 14px;
    min-height: 96px; margin: 2px 2px 20px; padding: 10px 16px;
    background: var(--lrh-ink); color: var(--lrh-cream);
    border: 4px solid var(--lrh-glow); border-radius: 20px;
    box-shadow: 0 8px 0 #0A0512, 0 0 30px rgba(255, 170, 60, 0.45);
    font-weight: 600; font-size: 18px; line-height: 1.2; text-align: left;
    transform: rotate(-2deg);
    animation: lrhSwing 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#qa-content.responses-design.lrd-halloween .lrh-pumpkin,
#toast.responses-design.lrd-halloween .lrh-pumpkin,
#waiting-message.responses-design.lrd-halloween.lr-ended .lrh-pumpkin { flex: 0 0 auto; display: block; overflow: visible; }
#qa-content.responses-design.lrd-halloween .lrh-words,
#toast.responses-design.lrd-halloween .lrh-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#qa-content.responses-design.lrd-halloween .lrh-head,
#toast.responses-design.lrd-halloween .lrh-head {
    font-family: 'Jolly Lodger', cursive; font-weight: 400; font-size: 44px; line-height: 0.95; color: var(--lrh-glow);
    text-shadow: 0 0 18px rgba(255, 180, 60, 0.6);
}

/* ── The form: a glowing lantern panel, the Send button candle glow ── */
#qa-content.responses-design.lrd-halloween #qa-submit-form {
    order: 4;
    margin: 0 2px 18px; padding: 0;
    background: none; border: none; box-shadow: none;
}
#qa-content.responses-design.lrd-halloween #qa-input {
    display: block; width: 100%; min-height: 104px; height: 104px; padding: 12px 16px;
    background: var(--lrh-panel); color: var(--lrh-ink);
    border: 4px solid var(--lrh-ink); border-radius: 18px; box-shadow: inset 0 0 20px rgba(255, 170, 60, 0.45);
    font-family: inherit; font-weight: 700; font-size: 20px; line-height: 1.25; resize: none;
}
#qa-content.responses-design.lrd-halloween #qa-input::placeholder { color: rgba(28, 15, 38, 0.45); font-weight: 600; }
#qa-content.responses-design.lrd-halloween #qa-input:focus { outline: none; border-color: var(--lrh-glow-hot); }
#qa-content.responses-design.lrd-halloween #qa-submit-btn {
    display: block; width: 100%; margin-top: 18px; height: 62px; padding: 0;
    background: var(--lrh-glow); color: var(--lrh-ink);
    border: 4px solid var(--lrh-ink); border-radius: 18px; box-shadow: 0 6px 0 var(--lrh-ink), 0 0 24px rgba(255, 190, 70, 0.35);
    font-family: 'Jolly Lodger', cursive; font-weight: 400; font-size: 36px; line-height: 1;
}
#qa-content.responses-design.lrd-halloween #qa-submit-btn:active { transform: translateY(4px) scale(0.97); box-shadow: 0 2px 0 var(--lrh-ink); }
#qa-content.responses-design.lrd-halloween #qa-submit-btn:disabled { opacity: 1; background: var(--lrh-grey); color: var(--lrh-cream); }
#qa-content.responses-design.lrd-halloween[data-state="paused"] #qa-submit-btn { background: var(--lrh-grey); color: var(--lrh-cream); }

/* ── My Responses: lantern-panel cards with a painted status tag ── */
#qa-content.responses-design.lrd-halloween #qa-my-questions { order: 5; }
#qa-content.responses-design.lrd-halloween #qa-my-questions .qa-section-header {
    margin: 2px 0 8px 4px; color: var(--lrh-glow);
    font-weight: 800; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
}
#qa-content.responses-design.lrd-halloween #qa-my-questions .qa-question-card {
    display: flex; align-items: center; gap: 10px;
    min-height: 70px; margin: 0 2px 10px; padding: 8px 12px;
    background: var(--lrh-panel); color: var(--lrh-ink);
    border: 3px solid var(--lrh-ink); border-radius: 16px; box-shadow: none;
}
#qa-content.responses-design.lrd-halloween .lrh-my-text {
    flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 17.5px; line-height: 1.2; overflow-wrap: anywhere;
}
#qa-content.responses-design.lrd-halloween .lrh-my-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
#qa-content.responses-design.lrd-halloween .lrh-badge {
    padding: 2px 10px; border-radius: 10px; border: 2px solid var(--lrh-ink);
    background: var(--lrh-corn); color: var(--lrh-ink);
    font-weight: 800; font-size: 14px; line-height: 1.3;
    animation: lrhPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#qa-content.responses-design.lrd-halloween .lrh-badge.lrh-approved,
#qa-content.responses-design.lrd-halloween .lrh-badge.lrh-answered { background: var(--lrh-slime); }
#qa-content.responses-design.lrd-halloween .lrh-my-votes { color: var(--lrh-ink); font-weight: 700; font-size: 14px; }

/* ── The responses: the sort bar, cream rows ── */
#qa-content.responses-design.lrd-halloween #qa-approved-questions { order: 6; }
#qa-content.responses-design.lrd-halloween .qa-sort-bar {
    display: flex; gap: 0; margin: 6px 2px 14px; height: 46px; padding: 0;
    background: none; border: 3px solid var(--lrh-ink); border-radius: 14px; overflow: hidden;
}
#qa-content.responses-design.lrd-halloween .qa-sort-btn {
    flex: 1 1 0; padding: 0; margin: 0;
    background: rgba(28, 15, 38, 0.8); color: var(--lrh-cream);
    border: none; border-radius: 0;
    font-family: inherit; font-weight: 800; font-size: 18px;
}
#qa-content.responses-design.lrd-halloween .qa-sort-btn.active { background: var(--lrh-glow); color: var(--lrh-ink); }
#qa-content.responses-design.lrd-halloween #qa-approved-questions .qa-question-card {
    display: flex; align-items: center; gap: 10px;
    min-height: 74px; margin: 0 2px 10px; padding: 8px 12px 8px 8px;
    background: var(--lrh-row); color: var(--lrh-ink);
    border: 3px solid var(--lrh-ink); border-radius: 16px; box-shadow: none;
}
#qa-content.responses-design.lrd-halloween #qa-approved-questions .qa-question-card.entering {
    animation: lrhSlide 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* The vote pill: the host's emoji and the count in glowing cells. */
#qa-content.responses-design.lrd-halloween .qa-vote-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: space-between; gap: 2px;
    width: 74px; height: 50px; padding: 0 7px;
    background: var(--lrh-ink); color: var(--lrh-glow);
    border: 3px solid var(--lrh-ink); border-radius: 14px;
    font-family: inherit; font-weight: 800; font-size: 22px; line-height: 1;
    transition: transform 0.08s ease;
}
#qa-content.responses-design.lrd-halloween .qa-vote-btn:active { transform: scale(0.92); background: var(--lrh-ink); }
#qa-content.responses-design.lrd-halloween .qa-vote-btn.voted { background: var(--lrh-glow); color: var(--lrh-ink); box-shadow: 0 0 14px rgba(255, 190, 70, 0.7); }
#qa-content.responses-design.lrd-halloween .qa-vote-btn.voted .qa-response-emoji { animation: lrhBeat 0.45s ease-out; }
#qa-content.responses-design.lrd-halloween .qa-response-emoji { font-family: system-ui, sans-serif; font-size: 20px; line-height: 1; }
#qa-content.responses-design.lrd-halloween .qa-response-votes { display: inline-flex; }
/* Fixed digit cells (Baloo's digits are 0.62 em), two at least. */
#qa-content.responses-design.lrd-halloween .qa-response-votes i { display: inline-block; width: 0.62em; font-style: normal; text-align: center; }
#qa-content.responses-design.lrd-halloween #qa-approved-questions .qa-question-text {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 17px; line-height: 1.18; overflow-wrap: anywhere;
}
#qa-content.responses-design.lrd-halloween .lrh-stripe {
    flex: 0 0 auto; width: 7px; height: 40px; border-radius: 4px; background: var(--lrh-glow-hot);
}
#qa-content.responses-design.lrd-halloween .lrh-row-text { min-width: 0; }
#qa-content.responses-design.lrd-halloween .qa-empty {
    padding: 14px 0 0; color: var(--lrh-muted);
    font-weight: 700; font-size: 17px; line-height: 1.3; text-align: center;
}

/* ── The toast: the night card with a glowing jack-o'-lantern ── */
#toast.responses-design.lrd-halloween {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    min-width: 300px; max-width: calc(100vw - 36px); padding: 10px 18px 10px 14px; min-height: 92px;
    display: flex; align-items: center; gap: 14px; text-align: left;
    background: var(--lrh-ink); color: var(--lrh-cream);
    border: 4px solid var(--lrh-glow); border-radius: 20px;
    box-shadow: 0 8px 0 #0A0512, 0 0 30px rgba(255, 170, 60, 0.45);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    font-weight: 600; font-size: 17px; line-height: 1.2;
}
#toast.responses-design.lrd-halloween::before { content: none; }
#toast.responses-design.lrd-halloween.error { border-color: #FF6A5C; }
#toast.responses-design.lrd-halloween.show { animation: lrhToast 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
#toast.responses-design.lrd-halloween.hide { animation: lrhToastAway 0.35s cubic-bezier(0.5, 0, 0.75, 0) forwards; }

/* ── Ended: the glowing jack-o'-lantern and "Get ready!" ── */
#waiting-message.responses-design.lrd-halloween.lr-ended.show { display: flex; flex-direction: column; align-items: center; text-align: center; }
#waiting-message.responses-design.lrd-halloween.lr-ended .lrh-pumpkin {
    margin: 150px auto 0; filter: drop-shadow(0 0 26px rgba(255, 170, 50, 0.6));
    animation: lrhPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#waiting-message.responses-design.lrd-halloween.lr-ended .lrh-wait-head {
    margin: 22px 0 0; color: var(--lrh-glow);
    font-family: 'Jolly Lodger', cursive; font-weight: 400; font-size: 54px; line-height: 1;
    text-shadow: 0 0 22px rgba(255, 180, 60, 0.75);
}
#waiting-message.responses-design.lrd-halloween.lr-ended .lrh-wait-sub {
    margin: 12px 0 0; color: var(--lrh-cream); font-weight: 600; font-size: 20px; line-height: 1.3;
}

/* ── A short screen: everything gives back height ── */
@media (max-height: 700px) {
    #qa-content.responses-design.lrd-halloween,
    #waiting-message.responses-design.lrd-halloween.lr-ended { padding: 44px 14px 16px; }
    #qa-content.responses-design.lrd-halloween #qa-title { min-height: 0; margin-bottom: 16px; padding: 9px 14px 8px; font-size: 18px; }
    #qa-content.responses-design.lrd-halloween #qa-paused-banner.show { min-height: 80px; margin-bottom: 14px; font-size: 16px; }
    #qa-content.responses-design.lrd-halloween .lrh-head,
    #toast.responses-design.lrd-halloween .lrh-head { font-size: 38px; }
    #qa-content.responses-design.lrd-halloween #qa-input { min-height: 72px; height: 72px; font-size: 18px; }
    #qa-content.responses-design.lrd-halloween #qa-submit-btn { height: 52px; margin-top: 12px; font-size: 32px; }
    #qa-content.responses-design.lrd-halloween #qa-submit-form { margin-bottom: 12px; }
    #qa-content.responses-design.lrd-halloween .qa-sort-bar { height: 40px; margin-bottom: 10px; }
    #qa-content.responses-design.lrd-halloween #qa-approved-questions .qa-question-card { min-height: 60px; margin-bottom: 8px; padding: 6px 10px 6px 6px; }
    #qa-content.responses-design.lrd-halloween .qa-vote-btn { width: 68px; height: 44px; font-size: 20px; }
    #qa-content.responses-design.lrd-halloween #qa-approved-questions .qa-question-text { font-size: 15.5px; }
    #qa-content.responses-design.lrd-halloween .lrh-stripe { height: 34px; }
    #waiting-message.responses-design.lrd-halloween.lr-ended .lrh-pumpkin { margin-top: 90px; }
}

@media (prefers-reduced-motion: reduce) {
    #qa-content.responses-design.lrd-halloween *,
    #waiting-message.responses-design.lrd-halloween.lr-ended *,
    #toast.responses-design.lrd-halloween { animation: none !important; }
}

@keyframes lrhDrop { from { transform: translateY(-600px); } }
@keyframes lrhSwing { from { transform: translateY(360px) rotate(4deg); } }
@keyframes lrhSlide { from { transform: translateX(420px); } }
@keyframes lrhPop { from { transform: scale(0); } }
@keyframes lrhBeat { 50% { transform: scale(1.5); } }
@keyframes lrhToast { from { opacity: 1; transform: translateX(-50%) translateY(300px) rotate(2deg); } to { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-2deg); } }
@keyframes lrhToastAway { from { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-2deg); } to { opacity: 1; transform: translateX(-50%) translateY(300px) rotate(2deg); } }