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

   Live Trivia's Ugly Sweater on the phone: a red knitted sweater with the
   green fair-isle band across the top (one SVG stitch tile repeated as a
   background, never a DOM node per stitch), the prompt on a cream felt
   patch with a dashed blanket stitch, the form on a felt patch stitched in
   green with a green felt Send button, "My Submissions" as felt cards with a
   felt badge (gold Submitted, green Approved), the sort bar as two felt
   tabs, and every response a felt card with its vote button on the left: the
   HOST's reaction emoji (`.qa-response-emoji`, never a drawn thumb, owner
   decision 2026-10-07) and the count, a dashed red stitch round it (gold
   felt and a green stitch once voted). Paused: a felt tape with a sewn-on
   pause button is stamped on where the form was. The toast is a green felt
   tape. The ended screen is the trivia skin's knitted scarf ("Waiting for
   next activity...") with three baubles. Fredoka (renamed "Sidekick Trivia
   Fredoka") for every word. Transforms only; no phone timing (a pause, an
   approval and the end show at once). */

@font-face { font-family: 'Sidekick Trivia Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sidekick-trivia-fredoka-semi-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sidekick-trivia-fredoka-bold-v1.woff2') format('woff2'); }

#qa-content.responses-design.lrd-uglySweater,
#waiting-message.responses-design.lrd-uglySweater.lr-ended,
#toast.responses-design.lrd-uglySweater {
    --us-felt: #F6EEDC; --us-tile: #F4EAD5; --us-gold: #F7C948; --us-green: #1E6B3F; --us-red: #B8222F;
    --us-maroon: #3B1214; --us-ink: #A3182A; --us-thread: #8E1B2A; --us-cream: #FFF6E6;
    --us-shadow: rgba(60, 8, 12, 0.45);
    font-family: 'Sidekick Trivia Fredoka', 'Fredoka', system-ui, sans-serif;
}
#qa-content.responses-design.lrd-uglySweater,
#waiting-message.responses-design.lrd-uglySweater.lr-ended {
    position: relative;
    min-height: calc(100dvh - 40px);
    padding: 66px 16px 22px;
    border-radius: 26px;
    overflow: hidden;
    font-weight: 600;
    color: var(--us-felt);
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, rgba(255, 210, 170, 0.08), rgba(40, 0, 6, 0.35)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%236E0F18'/%3E%3Cg fill='%23B8222F' stroke='%238E1621' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 12px 12px,
        #6E0F18;
}
/* The fair-isle band across the top. */
#qa-content.responses-design.lrd-uglySweater::before,
#waiting-message.responses-design.lrd-uglySweater.lr-ended::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 49px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 112'%3E%3Crect x='0' y='1' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='32' y='1' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='64' y='1' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='96' y='1' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='0' y='17' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='16' y='33' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='32' y='49' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='48' y='65' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='64' y='81' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='80' y='65' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='96' y='49' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='112' y='33' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='16' y='97' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='48' y='97' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='80' y='97' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='112' y='97' width='16' height='16' fill='%23D6C49C'/%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='36.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 36.8 8%29'/%3E%3Cellipse cx='43.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 43.2 8%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='68.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 68.8 8%29'/%3E%3Cellipse cx='75.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 75.2 8%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='100.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 100.8 8%29'/%3E%3Cellipse cx='107.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 107.2 8%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='24' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 24%29'/%3E%3Cellipse cx='11.2' cy='24' rx='3.2' ry='7.68' transform='rotate%2832 11.2 24%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='20.8' cy='40' rx='3.2' ry='7.68' transform='rotate%28-32 20.8 40%29'/%3E%3Cellipse cx='27.2' cy='40' rx='3.2' ry='7.68' transform='rotate%2832 27.2 40%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='36.8' cy='56' rx='3.2' ry='7.68' transform='rotate%28-32 36.8 56%29'/%3E%3Cellipse cx='43.2' cy='56' rx='3.2' ry='7.68' transform='rotate%2832 43.2 56%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='52.8' cy='72' rx='3.2' ry='7.68' transform='rotate%28-32 52.8 72%29'/%3E%3Cellipse cx='59.2' cy='72' rx='3.2' ry='7.68' transform='rotate%2832 59.2 72%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='68.8' cy='88' rx='3.2' ry='7.68' transform='rotate%28-32 68.8 88%29'/%3E%3Cellipse cx='75.2' cy='88' rx='3.2' ry='7.68' transform='rotate%2832 75.2 88%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='84.8' cy='72' rx='3.2' ry='7.68' transform='rotate%28-32 84.8 72%29'/%3E%3Cellipse cx='91.2' cy='72' rx='3.2' ry='7.68' transform='rotate%2832 91.2 72%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='100.8' cy='56' rx='3.2' ry='7.68' transform='rotate%28-32 100.8 56%29'/%3E%3Cellipse cx='107.2' cy='56' rx='3.2' ry='7.68' transform='rotate%2832 107.2 56%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='116.8' cy='40' rx='3.2' ry='7.68' transform='rotate%28-32 116.8 40%29'/%3E%3Cellipse cx='123.2' cy='40' rx='3.2' ry='7.68' transform='rotate%2832 123.2 40%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='20.8' cy='104' rx='3.2' ry='7.68' transform='rotate%28-32 20.8 104%29'/%3E%3Cellipse cx='27.2' cy='104' rx='3.2' ry='7.68' transform='rotate%2832 27.2 104%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='52.8' cy='104' rx='3.2' ry='7.68' transform='rotate%28-32 52.8 104%29'/%3E%3Cellipse cx='59.2' cy='104' rx='3.2' ry='7.68' transform='rotate%2832 59.2 104%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='84.8' cy='104' rx='3.2' ry='7.68' transform='rotate%28-32 84.8 104%29'/%3E%3Cellipse cx='91.2' cy='104' rx='3.2' ry='7.68' transform='rotate%2832 91.2 104%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='116.8' cy='104' rx='3.2' ry='7.68' transform='rotate%28-32 116.8 104%29'/%3E%3Cellipse cx='123.2' cy='104' rx='3.2' ry='7.68' transform='rotate%2832 123.2 104%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 49px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%230D3A22'/%3E%3Cg fill='%231F6E42' stroke='%2315502F' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 7px 7px, #0D3A22;
    box-shadow: 0 3px 0 rgba(40, 0, 6, 0.35);
}
/* A column, so the paused tape takes the form's place. */
#qa-content.responses-design.lrd-uglySweater:not([style*="none"]) { display: flex !important; flex-direction: column; }

/* ── The prompt: a felt patch that drops on and settles ── */
#qa-content.responses-design.lrd-uglySweater #qa-title {
    order: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 92px; margin: 0 2px 16px; padding: 14px 18px;
    background: var(--us-felt); color: var(--us-maroon);
    border-radius: 18px; box-shadow: 0 6px 0 var(--us-shadow);
    outline: 3px dashed var(--us-red); outline-offset: -8px;
    font-family: inherit; font-weight: 700; font-size: 23px; line-height: 1.15; text-align: center; text-wrap: balance;
    overflow-wrap: anywhere;
    animation: lrusDrop 0.6s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#qa-content.responses-design.lrd-uglySweater #qa-submitted-msg,
#qa-content.responses-design.lrd-uglySweater #qa-profanity-error { order: 2; }

/* ── Paused: a felt tape stamped on where the form was ── */
#qa-content.responses-design.lrd-uglySweater #qa-paused-banner { order: 3; }
#qa-content.responses-design.lrd-uglySweater #qa-paused-banner.show {
    display: flex; align-items: center; gap: 12px;
    min-height: 76px; margin: 0 2px 16px; padding: 0 14px 0 12px;
    background: var(--us-felt); color: var(--us-ink);
    border: none; border-left: 4px dashed var(--us-red); border-right: 4px dashed var(--us-red); border-radius: 4px;
    box-shadow: 0 6px 0 var(--us-shadow);
    font-weight: 700; font-size: 18px; line-height: 1.2; text-align: left;
    transform: rotate(-2deg);
    animation: lrusStamp 0.4s 0.1s cubic-bezier(0.2, 1.4, 0.5, 1) backwards;
}
/* The pause button, sewn on. */
#qa-content.responses-design.lrd-uglySweater .lrus-pause {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 14.6px, var(--us-cream) 14.6px, var(--us-cream) 20.4px, transparent 20.4px,
                        transparent 25.6px, var(--us-cream) 25.6px, var(--us-cream) 31.4px, transparent 31.4px) 50% 50% / 46px 19px no-repeat,
        #8E1B2A;
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.16), 0 2px 0 rgba(0, 0, 0, 0.25);
    animation: lrusPop 0.42s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* ── The form: a felt patch stitched in green, a green felt Send ── */
#qa-content.responses-design.lrd-uglySweater #qa-submit-form {
    order: 4;
    margin: 0 0 16px; padding: 14px;
    background: var(--us-tile);
    border-radius: 18px; box-shadow: 0 6px 0 var(--us-shadow);
    outline: 3px dashed var(--us-green); outline-offset: -7px;
    animation: lrusDrop 0.6s 0.08s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#qa-content.responses-design.lrd-uglySweater #qa-input {
    display: block; width: 100%; min-height: 84px; height: 84px; padding: 10px 12px;
    background: #FFFBF2; color: var(--us-maroon);
    border: 2px solid #E2D1AE; border-radius: 12px; box-shadow: inset 0 3px 0 rgba(59, 18, 20, 0.08);
    font-family: inherit; font-weight: 600; font-size: 18px; line-height: 1.25; resize: none;
}
#qa-content.responses-design.lrd-uglySweater #qa-input::placeholder { color: #9C8378; }
#qa-content.responses-design.lrd-uglySweater #qa-input:focus { outline: none; border-color: var(--us-green); }
#qa-content.responses-design.lrd-uglySweater #qa-submit-btn {
    margin-top: 12px; height: 52px; padding: 0;
    background: var(--us-green); color: var(--us-felt);
    border: none; border-radius: 14px; box-shadow: 0 5px 0 var(--us-shadow);
    outline: 2px dashed rgba(246, 238, 220, 0.85); outline-offset: -6px;
    font-family: inherit; font-weight: 700; font-size: 21px;
}
#qa-content.responses-design.lrd-uglySweater #qa-submit-btn:active { transform: translateY(3px); }
#qa-content.responses-design.lrd-uglySweater #qa-submit-btn:disabled { opacity: 1; background: #5E7F68; }

/* ── My Submissions: felt cards with a felt badge ── */
#qa-content.responses-design.lrd-uglySweater #qa-my-questions { order: 5; }
#qa-content.responses-design.lrd-uglySweater #qa-my-questions .qa-section-header {
    margin: 0 0 8px 4px; color: var(--us-felt);
    font-weight: 700; font-size: 14px; letter-spacing: 1.5px; text-shadow: 0 2px 0 rgba(40, 0, 6, 0.6);
}
#qa-content.responses-design.lrd-uglySweater #qa-my-questions .qa-question-card {
    display: block; margin: 0 0 10px; padding: 10px 14px;
    background: var(--us-tile); color: var(--us-maroon);
    border-radius: 14px; box-shadow: 0 5px 0 var(--us-shadow);
}
#qa-content.responses-design.lrd-uglySweater .lrus-my-text { font-weight: 600; font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
#qa-content.responses-design.lrd-uglySweater .lrus-my-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
#qa-content.responses-design.lrd-uglySweater .lrus-my-votes { color: #8A6F6A; font-weight: 600; font-size: 15px; }
#qa-content.responses-design.lrd-uglySweater .lrus-badge {
    padding: 4px 12px; border-radius: 10px;
    background: var(--us-gold); color: var(--us-maroon);
    font-weight: 700; font-size: 14px; line-height: 1.1;
    animation: lrusFlip 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) backwards;
}
#qa-content.responses-design.lrd-uglySweater .qa-question-card[data-status="approved"] .lrus-badge,
#qa-content.responses-design.lrd-uglySweater .qa-question-card[data-status="answered"] .lrus-badge { background: var(--us-green); color: var(--us-felt); }

/* ── The responses ── */
#qa-content.responses-design.lrd-uglySweater #qa-approved-questions { order: 6; }
#qa-content.responses-design.lrd-uglySweater .qa-sort-bar {
    display: flex; gap: 8px; margin: 6px 0 12px; height: 36px;
    background: none; border-radius: 0; overflow: visible;
}
#qa-content.responses-design.lrd-uglySweater .qa-sort-btn {
    flex: 1 1 0; padding: 0;
    background: #8E1621; color: var(--us-felt);
    border: none; border-radius: 12px; box-shadow: 0 4px 0 var(--us-shadow);
    font-family: inherit; font-weight: 700; font-size: 15px;
}
#qa-content.responses-design.lrd-uglySweater .qa-sort-btn.active { background: var(--us-gold); color: var(--us-maroon); }
#qa-content.responses-design.lrd-uglySweater #qa-approved-questions .qa-question-card {
    display: flex; align-items: center; gap: 10px;
    min-height: 70px; margin: 0 0 8px; padding: 8px 10px 8px 8px;
    background: var(--us-tile); color: var(--us-maroon);
    border-radius: 14px; box-shadow: 0 5px 0 var(--us-shadow);
}
#qa-content.responses-design.lrd-uglySweater #qa-approved-questions .qa-question-card.entering {
    animation: lrusRow 0.45s cubic-bezier(0.3, 1.35, 0.5, 1) both;
}
#qa-content.responses-design.lrd-uglySweater .qa-vote-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    width: 70px; height: 44px; padding: 0;
    background: var(--us-tile); color: var(--us-maroon);
    border: none; border-radius: 12px;
    outline: 2px dashed var(--us-red); outline-offset: -4px;
    font-family: inherit; font-weight: 700; font-size: 17px; line-height: 1;
    transition: background-color 0.12s ease, transform 0.08s ease;
}
#qa-content.responses-design.lrd-uglySweater .qa-vote-btn:active { transform: scale(0.92); background: var(--us-tile); }
#qa-content.responses-design.lrd-uglySweater .qa-vote-btn.voted { background: var(--us-gold); outline-color: var(--us-green); border: none; }
/* The host's emoji, beside the count in its fixed cells. */
#qa-content.responses-design.lrd-uglySweater .qa-response-emoji { font-size: 19px; line-height: 1; }
#qa-content.responses-design.lrd-uglySweater .qa-response-votes { min-width: 1.16em; text-align: center; font-variant-numeric: tabular-nums; }
#qa-content.responses-design.lrd-uglySweater #qa-approved-questions .qa-question-text {
    flex: 1 1 auto; min-width: 0;
    font-weight: 600; font-size: 15.5px; line-height: 1.18; overflow-wrap: anywhere;
}
#qa-content.responses-design.lrd-uglySweater .qa-empty {
    padding: 14px 0 0; color: var(--us-felt);
    font-weight: 600; font-size: 17px; line-height: 1.3; text-align: center; text-shadow: 0 2px 0 rgba(40, 0, 6, 0.6);
}

/* ── The toast: a green felt tape slammed on ── */
#toast.responses-design.lrd-uglySweater {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    min-width: 280px; max-width: calc(100vw - 64px); padding: 0 18px; min-height: 58px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--us-green); color: var(--us-felt);
    border: none; border-left: 4px dashed var(--us-felt); border-right: 4px dashed var(--us-felt); border-radius: 6px;
    box-shadow: 0 6px 0 var(--us-shadow);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    font-weight: 700; font-size: 17px; line-height: 1.15;
}
#toast.responses-design.lrd-uglySweater::before { content: none; }
#toast.responses-design.lrd-uglySweater.error { background: var(--us-thread); }
#toast.responses-design.lrd-uglySweater.show { animation: lrusToast 0.4s cubic-bezier(0.2, 1.4, 0.5, 1) forwards; }
#toast.responses-design.lrd-uglySweater.hide { animation: lrusToastAway 0.25s cubic-bezier(0.5, 0, 0.75, 0) forwards; }

/* ── Ended: the knitted scarf, three baubles ── */
#waiting-message.responses-design.lrd-uglySweater.lr-ended.show { display: flex; flex-direction: column; align-items: center; padding-top: 0; }
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-scarf {
    position: relative; width: calc(100% + 6px); max-width: 330px; margin: 180px 0 0; padding: 40px 66px 44px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, transparent 18px, #F6EEDC 18px 34px, transparent 34px 42px, #E9AE34 42px 50px, transparent 50px),
        linear-gradient(270deg, transparent 18px, #F6EEDC 18px 34px, transparent 34px 42px, #E9AE34 42px 50px, transparent 50px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%230D3A22'/%3E%3Cg fill='%231F6E42' stroke='%2315502F' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 8px 8px, #0D3A22;
    box-shadow: 0 7px 0 var(--us-shadow);
    transform: rotate(-3deg);
    animation: lrusScarf 0.6s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
/* The fringe at both ends. */
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-scarf::before,
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-scarf::after {
    content: ''; position: absolute; top: 10px; bottom: 10px; width: 14px;
    background: repeating-linear-gradient(180deg, #F6EEDC 0 4px, transparent 4px 20px);
}
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-scarf::before { left: -12px; }
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-scarf::after { right: -12px; }
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-scarf p {
    margin: 0; color: var(--us-felt);
    font-weight: 700; font-size: 27px; line-height: 1.15; text-shadow: 0 3px 0 rgba(20, 40, 20, 0.75);
}
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-baubles { display: flex; gap: 44px; margin-top: 60px; }
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-bauble {
    position: relative; width: 52px; height: 52px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.3) 0 8px, rgba(255, 255, 255, 0) 8.5px), #C17E12;
    animation: lrusBauble 0.5s 0.35s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-bauble::before {
    content: ''; position: absolute; left: 50%; top: -30px; width: 3px; height: 22px; margin-left: -1.5px; background: var(--us-felt);
}
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-bauble::after {
    content: ''; position: absolute; left: 50%; top: -9px; width: 16px; height: 8px; margin-left: -8px; border-radius: 2px; background: #D6C49C;
}
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-bauble:nth-child(2) {
    top: -8px;
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.3) 0 8px, rgba(255, 255, 255, 0) 8.5px), #B8222F;
    box-shadow: inset 0 0 0 3px var(--us-felt); animation-delay: 0.42s;
}
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-bauble:nth-child(3) {
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.3) 0 8px, rgba(255, 255, 255, 0) 8.5px), #24427E;
    animation-delay: 0.49s;
}
#waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-stay {
    margin: 40px 0 0; color: var(--us-felt);
    font-weight: 600; font-size: 19px; line-height: 1.2; text-shadow: 0 2px 0 rgba(40, 0, 6, 0.6);
}

/* ── A short screen: everything gives back height ── */
@media (max-height: 700px) {
    #qa-content.responses-design.lrd-uglySweater,
    #waiting-message.responses-design.lrd-uglySweater.lr-ended { padding: 60px 14px 16px; }
    #qa-content.responses-design.lrd-uglySweater #qa-title { min-height: 0; margin-bottom: 12px; padding: 12px 16px; font-size: 20px; }
    #qa-content.responses-design.lrd-uglySweater #qa-paused-banner.show { min-height: 62px; margin-bottom: 12px; font-size: 16px; }
    #qa-content.responses-design.lrd-uglySweater #qa-submit-form { margin-bottom: 12px; padding: 12px; }
    #qa-content.responses-design.lrd-uglySweater #qa-input { min-height: 64px; height: 64px; font-size: 17px; }
    #qa-content.responses-design.lrd-uglySweater #qa-submit-btn { height: 46px; margin-top: 10px; font-size: 19px; }
    #qa-content.responses-design.lrd-uglySweater .qa-sort-bar { height: 32px; margin: 4px 0 10px; }
    #qa-content.responses-design.lrd-uglySweater #qa-approved-questions .qa-question-card { min-height: 58px; margin-bottom: 7px; padding: 6px 10px 6px 7px; }
    #qa-content.responses-design.lrd-uglySweater .qa-vote-btn { width: 64px; height: 40px; font-size: 16px; }
    #qa-content.responses-design.lrd-uglySweater #qa-approved-questions .qa-question-text { font-size: 14.5px; }
    #waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-scarf { margin-top: 120px; padding: 34px 54px 38px; }
    #waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-scarf p { font-size: 25px; }
    #waiting-message.responses-design.lrd-uglySweater.lr-ended .lrus-baubles { margin-top: 48px; }
}

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

@keyframes lrusDrop { from { transform: translateY(-800px) rotate(-3deg); } }
@keyframes lrusRow { from { transform: translateY(-40px) rotate(-4deg) scale(0.9); } }
@keyframes lrusPop { from { transform: scale(0); } }
@keyframes lrusStamp { from { transform: rotate(-2deg) scale(0); } }
@keyframes lrusFlip { from { transform: scaleX(0); } }
@keyframes lrusToast { from { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-2deg) scale(0); } to { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-2deg) scale(1); } }
@keyframes lrusToastAway { from { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-2deg) scale(1); } to { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-2deg) scale(0); } }
@keyframes lrusScarf { from { transform: translateY(-700px) rotate(-6deg); } }
@keyframes lrusBauble { from { transform: translateY(-120px); } }