/* Would You Rather · Ugly Sweater phone skin (owner decision 2026-10-06): the
   canvas's WYR-UglySweater-Phone and Anim boards. Every rule is scoped to
   #wyr-content.wyr-design.wyrd-uglySweater, so no other screen or feature is
   touched; the classic screens (no .wyr-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 16-point SVG stitch tile repeated
   as a background, never a DOM node per stitch), cream felt patches with
   dashed blanket stitches, each option a felt patch with a knitted cuff in
   its side's yarn (evergreen A, gold B) and maroon text, results on felt
   tags in the side's felt (never on the knit), and Fredoka (renamed
   "Sidekick Trivia Fredoka") for every word.

   Motion (the Anim board's phone): the heading drops on and settles, the
   timer's running stitch unpicks with the needle at its end and the clock
   button tugs each second, the patches drop on, "or" pops, a pick fills its
   patch and pops a check button; the result knits its bar in from both
   ends, the tags pop, the winner patch pops with its crown (a tie: the two
   buttons tied together and TIED! stamped). Transforms and clips only.
   The result lands 0.7 s after it shows: the payoff patch, its crown or
   knot and TIED! are all on by then (WouldYouRatherUglySweaterDesign
   .phoneResultLanding), so the Mac's resultsDelayMs (each beat less 0.7 s)
   puts the landing on the projector's WINNER / TIED! moment.
   /wyr-designs/ugly-sweater.js keeps a re-render of the same screen still
   (.wyrdus-still), restarts the stamp when the status changes, and feeds the
   clock button its seconds. */

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

#wyr-content.wyr-design.wyrd-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-stitch-b: #C17E12;
    --us-shadow: rgba(60, 8, 12, 0.45);
    --us-thread-color: #F7C948;
    --us-knit-a: 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;
    --us-knit-b: 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='%237A4E08'/%3E%3Cg fill='%23E9AE34' stroke='%23B07D16' 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, #7A4E08;
    --us-seam: 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='%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%3C/svg%3E") 0 0 / 8px 8px, #D6C49C;
    position: relative;
    min-height: calc(100dvh - 40px);
    padding: 64px 16px 22px;
    border-radius: 26px;
    overflow: hidden;
    text-align: center;
    font-family: 'Sidekick Trivia Fredoka', 'Fredoka', system-ui, sans-serif;
    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. */
#wyr-content.wyr-design.wyrd-uglySweater::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);
}

/* ── The heading: a felt patch that drops on and settles ── */
#wyr-content.wyr-design.wyrd-uglySweater #wyr-question {
    margin: 8px 6px 20px; padding: 17px 14px 19px;
    background: var(--us-felt); color: var(--us-ink);
    border-radius: 20px; box-shadow: 0 7px 0 var(--us-shadow);
    outline: 3px dashed var(--us-red); outline-offset: -10px;
    font-family: inherit; font-weight: 700; font-size: clamp(22px, 7.4vw, 28px); line-height: 1.05;
    white-space: nowrap; text-align: center;
    transform: rotate(-1.5deg);
}
#wyr-content.wyr-design.wyrd-uglySweater #wyr-question.wyrdus-drop {
    animation: wyrdusDrop 0.7s cubic-bezier(0.3, 1.35, 0.5, 1) backwards, wyrdusSettle 0.9s 0.55s ease-out;
}

/* ── Paused: a sewn-on name tape ── */
#wyr-content.wyr-design.wyrd-uglySweater .stopped-banner {
    margin: 0 10px 18px; padding: 12px 22px 13px;
    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: 3px;
    box-shadow: 0 5px 0 var(--us-shadow);
    font-weight: 600; font-size: 18px; line-height: 1.2; transform: rotate(-1.5deg);
}

/* ── The timer: a running stitch that unpicks, the needle at its end, and
   the green clock button with the seconds ── */
#wyr-content.wyr-design.wyrd-uglySweater .vote-timer.show {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
    margin: 0 0 18px;
}
#wyr-content.wyr-design.wyrd-uglySweater .vote-timer.show.wyrdus-in {
    animation: wyrdusDropSmall 0.5s 0.1s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#wyr-content.wyr-design.wyrd-uglySweater .vote-timer-bar {
    height: 16px; overflow: visible; border: none; border-radius: 0;
    background: repeating-linear-gradient(90deg, rgba(246, 238, 220, 0.28) 0 12px, transparent 12px 20px) 0 50% / 100% 5px no-repeat;
}
#wyr-content.wyr-design.wyrd-uglySweater .vote-timer-fill {
    position: relative; height: 16px; border-radius: 0;
    background: repeating-linear-gradient(90deg, var(--us-thread-color) 0 12px, transparent 12px 20px) 0 50% / 100% 7px no-repeat !important;
    background-color: transparent !important;
}
#wyr-content.wyr-design.wyrd-uglySweater .vote-timer-fill::after {
    content: ''; position: absolute; right: -30px; top: 6px; width: 34px; height: 5px;
    border-radius: 3px 40% 40% 3px; background: linear-gradient(180deg, #EEF2F6, #9AA3AE);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); transform: rotate(-8deg);
}
#wyr-content.wyr-design.wyrd-uglySweater .vote-timer[data-level="warn"] { --us-thread-color: #F39233; }
#wyr-content.wyr-design.wyrd-uglySweater .vote-timer[data-level="urgent"] { --us-thread-color: #F04A4A; }
#wyr-content.wyr-design.wyrd-uglySweater .vote-timer-text {
    margin: 0; width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 40% 34%, #2A8452, #1E6B3F 60%, #165532);
    box-shadow: 0 4px 0 rgba(20, 40, 20, 0.5);
    outline: 3px dashed var(--us-thread-color); outline-offset: -8px;
    font-size: 0 !important; color: transparent !important;
}
#wyr-content.wyr-design.wyrd-uglySweater .vote-timer-text::after {
    content: attr(data-secs); color: var(--us-felt); font-weight: 700; font-size: 26px; line-height: 1;
    font-variant-numeric: tabular-nums;
}
#wyr-content.wyr-design.wyrd-uglySweater .vote-timer-text[data-long]::after { font-size: 19px; }
#wyr-content.wyr-design.wyrd-uglySweater .vote-timer-text.wyrdus-tug { animation: wyrdusTug 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── Voting: two felt patches with knitted cuffs ── */
#wyr-content.wyr-design.wyrd-uglySweater .wyr-options { gap: 0; margin-bottom: 0; }
#wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn {
    position: relative; display: block; width: 100%; min-height: 158px;
    padding: 34px 22px 18px; overflow: hidden;
    background: var(--us-tile); color: var(--us-maroon);
    border: none; border-radius: 18px; box-shadow: 0 5px 0 var(--us-shadow);
    outline: 3px dashed var(--us-green); outline-offset: -7px;
    font-family: inherit; font-weight: 600; font-size: 27px; line-height: 1.12; text-wrap: balance; text-align: center;
    transition: background-color 0.15s ease, transform 0.1s ease-out;
    animation: wyrdusPatch 0.6s 0.45s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn.wyr-b { outline-color: var(--us-stitch-b); animation-delay: 0.57s; }
/* The knitted cuff. */
#wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: var(--us-knit-a);
}
#wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn.wyr-b::before { background: var(--us-knit-b); }
#wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn.selected {
    padding-left: 52px; padding-right: 52px;
    outline: 4px solid var(--us-green); outline-offset: -4px; background: #D5E7D7;
    animation: wyrdusPress 0.18s ease-out;
}
#wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn.wyr-b.selected { outline-color: var(--us-stitch-b); background: #F8E6B5; }
/* The pick's sewn-on check button. */
#wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn.selected::after {
    content: ''; position: absolute; right: 12px; top: 26px; width: 34px; height: 34px; border-radius: 50%;
    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='%23FFF6E6' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 20px 20px no-repeat,
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%),
        var(--us-green);
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.16), 0 3px 0 rgba(0, 0, 0, 0.25);
    animation: wyrdusPop 0.4s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn.wyr-b.selected::after {
    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='%23FFF6E6' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 20px 20px no-repeat,
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%),
        var(--us-stitch-b);
}
#wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn:active { transform: translateY(3px); }
#wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn:disabled { opacity: 0.72; filter: saturate(0.7); transform: none; }
#wyr-content.wyr-design.wyrd-uglySweater .wyr-or {
    align-self: center; width: 54px; height: 54px; margin: 14px 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--us-felt); color: var(--us-ink); box-shadow: 0 4px 0 var(--us-shadow);
    outline: 2px dashed var(--us-red); outline-offset: -6px;
    font-weight: 700; font-size: 23px; line-height: 1; transform: rotate(-6deg);
    animation: wyrdusPop 0.42s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#wyr-content.wyr-design.wyrd-uglySweater .wyrdus-still > *,
#wyr-content.wyr-design.wyrd-uglySweater .wyrdus-still > *::after { animation: none !important; }

/* ── The status line, stamped on as it changes ── */
#wyr-content.wyr-design.wyrd-uglySweater #wyr-status {
    margin: 26px 0 0; color: var(--us-felt); opacity: 1;
    font-weight: 600; font-size: 21px; line-height: 1.25; text-shadow: 0 2px 0 rgba(40, 0, 6, 0.6);
}
#wyr-content.wyr-design.wyrd-uglySweater #wyr-status.wyrdus-rise { animation: wyrdusRise 0.5s 0.95s cubic-bezier(0.3, 1.35, 0.5, 1) backwards; }
#wyr-content.wyr-design.wyrd-uglySweater #wyr-status.wyrdus-stamp { animation: wyrdusStamp 0.4s cubic-bezier(0.2, 1.4, 0.5, 1); }
/* Locked in before the result shows (the display's beat, or the reveal):
   the status alone, on a felt patch. */
#wyr-content.wyr-design.wyrd-uglySweater:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) #wyr-status {
    margin: 36px 10px 0; padding: 26px 22px 28px;
    background: var(--us-felt); color: var(--us-ink); text-shadow: none;
    border-radius: 20px; box-shadow: 0 7px 0 var(--us-shadow);
    outline: 3px dashed var(--us-red); outline-offset: -10px;
    font-weight: 700; font-size: 26px; line-height: 1.2; transform: rotate(1deg);
}

/* ── Results: the two names, the knitted bar, the tags, the payoff patch ── */
/* A grid, so the art sits inside the payoff patch (index.html shows the
   result with an inline display: block). */
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result {
    --us-card-top: 30px;
    display: grid !important; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "names" "bar" "shares" "card";
}
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result[style*="none"] { display: none !important; }
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result > .wyr-result-labels {
    grid-area: names; display: flex; gap: 10px; justify-content: stretch;
}
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result > .wyr-result-labels > span {
    position: relative; flex: 1 1 0; min-width: 0; padding: 24px 8px 14px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--us-tile); color: var(--us-maroon); border-radius: 14px; box-shadow: 0 4px 0 var(--us-shadow);
    font-weight: 600; font-size: 19px; line-height: 1.15; text-wrap: balance; text-align: center;
    overflow-wrap: anywhere;
    transform: rotate(-1deg);
    animation: wyrdusName 0.45s 0s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result > .wyr-result-labels > span.wyr-b-label {
    transform: rotate(1deg); animation-delay: 0.06s;
}
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result > .wyr-result-labels > span::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--us-knit-a);
}
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result > .wyr-result-labels > span.wyr-b-label::before { background: var(--us-knit-b); }
#wyr-content.wyr-design.wyrd-uglySweater .wyr-result-bar {
    grid-area: bar; position: relative; height: 52px; margin: 22px 3px 20px;
    border: none; border-radius: 14px; overflow: hidden;
    background: #4A0D14;
    box-shadow: 0 0 0 5px var(--us-felt), 0 11px 0 var(--us-shadow);
}
#wyr-content.wyr-design.wyrd-uglySweater .wyr-result-bar .wyr-a-fill {
    position: relative; background: var(--us-knit-a); overflow: visible;
    animation: wyrdusKnitA 0.5s 0.1s steps(19, end) backwards;
}
#wyr-content.wyr-design.wyrd-uglySweater .wyr-result-bar .wyr-b-fill {
    background: var(--us-knit-b);
    animation: wyrdusKnitB 0.5s 0.1s steps(19, end) backwards;
}
/* The cream seam stitch where they meet. */
#wyr-content.wyr-design.wyrd-uglySweater .wyr-result-bar .wyr-a-fill::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; z-index: 1; background: var(--us-seam);
    animation: wyrdusSeam 0.6s steps(1, end) backwards;
}
#wyr-content.wyr-design.wyrd-uglySweater .wyr-result-bar .wyr-a-fill[style*="width:0%"]::after,
#wyr-content.wyr-design.wyrd-uglySweater .wyr-result-bar .wyr-a-fill[style*="width:100%"]::after { display: none; }
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result > .wyr-result-bar ~ .wyr-result-labels {
    grid-area: shares; display: flex; justify-content: space-between; gap: 10px;
}
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result > .wyr-result-bar ~ .wyr-result-labels > span {
    flex: 0 0 auto; display: inline-flex; align-items: center; padding: 10px 16px; overflow: visible;
    background: var(--us-green); color: var(--us-felt); border-radius: 12px; box-shadow: 0 4px 0 var(--us-shadow);
    outline: 2px dashed rgba(246, 238, 220, 0.85); outline-offset: -5px;
    font-weight: 700; font-size: 27px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
    transform: none;
    animation: wyrdusPop 0.35s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result > .wyr-result-bar ~ .wyr-result-labels > span::before { content: none; }
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result > .wyr-result-bar ~ .wyr-result-labels > span.wyr-b-label {
    background: var(--us-gold); color: var(--us-maroon); outline-color: var(--us-thread); animation-delay: 0.31s;
}
/* The payoff patch: gold with a green crown for a winner. */
#wyr-content.wyr-design.wyrd-uglySweater .wyr-winner {
    grid-area: card; margin: var(--us-card-top) 4px 0; padding: 79px 20px 28px;
    background: var(--us-gold); color: var(--us-maroon);
    border-radius: 20px; box-shadow: 0 7px 0 var(--us-shadow);
    outline: 3px dashed var(--us-green); outline-offset: -10px;
    font-weight: 700; font-size: 30px; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere;
    transform: rotate(-1deg);
    animation: wyrdusPop 0.35s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, wyrdusWobble 0.8s 0.7s ease-out;
}
#wyr-content.wyr-design.wyrd-uglySweater .wyr-winner.wyrdus-long { font-size: 24px; }
#wyr-content.wyr-design.wyrd-uglySweater .wyr-winner.wyrdus-longer { font-size: 21px; }
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result:not(:has(.wyrdus-art)) .wyr-winner {
    padding-top: 26px; background: var(--us-felt); color: var(--us-ink); outline-color: var(--us-red); font-size: 26px;
}
#wyr-content.wyr-design.wyrd-uglySweater .wyrdus-art {
    grid-area: card; z-index: 1; align-self: start; justify-self: center; margin-top: calc(var(--us-card-top) + 24px);
    pointer-events: none;
    animation: wyrdusPop 0.25s 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#wyr-content.wyr-design.wyrd-uglySweater .wyrdus-art svg { display: block; overflow: visible; }
#wyr-content.wyr-design.wyrd-uglySweater .wyrdus-crown { transform: rotate(-1deg); }
#wyr-content.wyr-design.wyrd-uglySweater .wyrdus-crown svg { width: 56px; height: 43px; }
/* A tie: felt, the two buttons tied together, TIED! stamped on. */
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result:has(.wyrdus-knot) .wyr-winner {
    padding: 88px 20px 26px; background: var(--us-felt); color: var(--us-ink); outline-color: var(--us-red);
    font-size: 60px; line-height: 1.05; transform: rotate(1deg);
}
#wyr-content.wyr-design.wyrd-uglySweater .wyrdus-knot { transform: rotate(1deg); }
#wyr-content.wyr-design.wyrd-uglySweater .wyrdus-knot svg { width: 150px; height: 54px; }
#wyr-content.wyr-design.wyrd-uglySweater .wyrdus-tied-word {
    display: inline-block; animation: wyrdusTied 0.25s 0.45s cubic-bezier(0.2, 1.4, 0.5, 1) backwards;
}
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result:not([style*="none"]) ~ #wyr-status.wyrdus-rise { animation-delay: 0.9s; }
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result.wyrdus-still > *,
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result.wyrdus-still > * > *,
#wyr-content.wyr-design.wyrd-uglySweater #wyr-result.wyrdus-still > * > *::after { animation: none !important; }

/* ── Short screens (an iPhone SE): the patches give back height ── */
@media (max-height: 700px) {
    #wyr-content.wyr-design.wyrd-uglySweater { padding: 58px 14px 16px; }
    #wyr-content.wyr-design.wyrd-uglySweater #wyr-question { margin: 4px 6px 14px; padding: 14px 12px 16px; }
    #wyr-content.wyr-design.wyrd-uglySweater .vote-timer.show { margin-bottom: 12px; }
    #wyr-content.wyr-design.wyrd-uglySweater .vote-timer-text { width: 52px; height: 52px; }
    #wyr-content.wyr-design.wyrd-uglySweater .vote-timer-text::after { font-size: 23px; }
    #wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn { min-height: 122px; padding: 28px 18px 14px; font-size: 24px; }
    #wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn.selected { padding-left: 46px; padding-right: 46px; }
    #wyr-content.wyr-design.wyrd-uglySweater .wyr-option-btn.selected::after { top: 22px; width: 30px; height: 30px; right: 10px; }
    #wyr-content.wyr-design.wyrd-uglySweater .wyr-or { width: 46px; height: 46px; margin: 8px 0; font-size: 20px; }
    #wyr-content.wyr-design.wyrd-uglySweater #wyr-status { margin-top: 16px; font-size: 19px; }
    #wyr-content.wyr-design.wyrd-uglySweater #wyr-result { --us-card-top: 18px; }
    #wyr-content.wyr-design.wyrd-uglySweater #wyr-result > .wyr-result-labels > span { padding: 20px 6px 10px; font-size: 17px; }
    #wyr-content.wyr-design.wyrd-uglySweater .wyr-result-bar { margin: 16px 3px 14px; height: 40px; }
    #wyr-content.wyr-design.wyrd-uglySweater #wyr-result > .wyr-result-bar ~ .wyr-result-labels > span { padding: 8px 13px; font-size: 24px; }
    #wyr-content.wyr-design.wyrd-uglySweater .wyr-winner { padding: 70px 16px 20px; font-size: 26px; }
    #wyr-content.wyr-design.wyrd-uglySweater .wyr-winner.wyrdus-long { font-size: 21px; }
    #wyr-content.wyr-design.wyrd-uglySweater .wyr-winner.wyrdus-longer { font-size: 18px; }
    #wyr-content.wyr-design.wyrd-uglySweater .wyrdus-art { margin-top: calc(var(--us-card-top) + 18px); }
    #wyr-content.wyr-design.wyrd-uglySweater #wyr-result:has(.wyrdus-knot) .wyr-winner { padding: 78px 16px 18px; font-size: 52px; }
    #wyr-content.wyr-design.wyrd-uglySweater #wyr-result:not([style*="none"]) ~ #wyr-status { margin-top: 18px; }
}

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

@keyframes wyrdusDrop { from { transform: translateY(-140px) rotate(-6deg) scale(1.06); } }
@keyframes wyrdusSettle { 0%, 100% { rotate: 0deg; } 30% { rotate: 3deg; } 60% { rotate: -1.2deg; } 85% { rotate: 0.4deg; } }
@keyframes wyrdusDropSmall { from { transform: translateY(-90px); } }
@keyframes wyrdusPatch { from { transform: translateY(-720px) rotate(-5deg) scale(1.08); } 70% { transform: translateY(0) rotate(1.2deg) scale(1); } }
@keyframes wyrdusPop { from { transform: scale(0) rotate(-12deg); } }
@keyframes wyrdusPress { 50% { translate: 0 4px; } }
@keyframes wyrdusRise { from { transform: translateY(600px); } }
@keyframes wyrdusStamp { from { transform: scale(1.25) rotate(-4deg); } }
@keyframes wyrdusTug { 40% { transform: translateY(2px) scale(1.08); } }
@keyframes wyrdusName { from { transform: translateY(-420px) rotate(-8deg) scale(1.06); } }
@keyframes wyrdusKnitA { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -8px 0 0); } }
@keyframes wyrdusKnitB { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes wyrdusSeam { from { visibility: hidden; } to { visibility: visible; } }
@keyframes wyrdusWobble { 0%, 100% { rotate: 0deg; } 25% { rotate: 4deg; } 55% { rotate: -2.5deg; } 80% { rotate: 1deg; } }
@keyframes wyrdusTied { 0% { transform: scale(0) rotate(-8deg); } 1% { transform: scale(1.5) rotate(-8deg); } }