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

   A recipe-card paper screen under a cranberry gingham band ("Pick a side",
   a gold maple leaf); the time left as a sage bar beside a little pie whose
   filling is eaten as it runs down, the seconds on its paper centre; the two
   options on place cards (pumpkin and teal, cream lettering with the hard ink
   shadow) served onto the table, a little pie with "or" in its dough between
   them; the pick takes a gold ring and the check rosette while the other card
   burns to burnt-sugar grey. Locked, "Locked in!" with "The result lands with
   the room." over YOUR PICK. The result: the two options as mini place cards
   (the winner ringed), the tug bar with its cream split marker (just the two
   fills, owner decision 12), the chips, and the county-fair rosette ("… wins!")
   with leaves settling round it, or a gold "TIED!" tag. The colours are
   ShowThemePalettes.swift's ThanksgivingPalette (side B is the board's teal,
   options[5]). Motion is transforms only, and /wyr-designs/thanksgiving.js
   keeps a re-render of the same screen from replaying it. */

@font-face { font-family: 'Sidekick Trivia Fraunces'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/sidekick-trivia-fraunces-extra-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Fraunces'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/sidekick-trivia-fraunces-black-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Fraunces'; font-style: italic; font-weight: 900; font-display: swap; src: url('/fonts/sidekick-trivia-fraunces-black-italic-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Bricolage'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sidekick-trivia-bricolage-semi-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Bricolage'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sidekick-trivia-bricolage-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Bricolage'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/sidekick-trivia-bricolage-extra-bold-v1.woff2') format('woff2'); }

#wyr-content.wyr-design.wyrd-thanksgiving {
    --tg-a: #D9611C; --tg-b: #2C6674; --tg-ink: #2A160D; --tg-cream: #FFF4E2; --tg-grey: #4B3A31;
    --tg-gold: #E9A81A; --tg-cranberry: #A8233D; --tg-paper: #FFF8EC; --tg-dough: #FBE8C6;
    --tg-crust: #C9842F; --tg-sage: #3E7B4E; --tg-shadow: #140803; --tg-brown: #6B5040; --tg-plate: #F3E6CF;
    --tg-grey-a: #76462B; --tg-grey-b: #424745; --tg-grey-text: #C9B6A6;
    --tg-display: 'Sidekick Trivia Fraunces', 'Fraunces', Georgia, serif;
    --tg-card-shadow: inset 0 0 0 5px rgba(255, 244, 226, 0.16), 0 7px 0 var(--tg-shadow), 0 14px 22px rgba(0, 0, 0, 0.22);
    flex-direction: column;
    position: relative;
    margin: -8px -6px 0; padding: 0 16px 22px; min-height: 70vh; box-sizing: border-box;
    border: 4px solid var(--tg-ink); border-radius: 30px; overflow: hidden;
    background: var(--tg-paper);
    color: var(--tg-ink);
    font-family: 'Sidekick Trivia Bricolage', 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700;
}
/* renderWYR shows the screen with an inline display: block. */
#wyr-content.wyr-design.wyrd-thanksgiving[style*="block"] { display: flex !important; }
#wyr-content.wyr-design.wyrd-thanksgiving > * { flex: 0 0 auto; }

/* ── The cranberry gingham band: "Pick a side" with its gold maple leaf ── */
#wyr-content.wyr-design.wyrd-thanksgiving .question {
    order: -3; position: relative; margin: 0 -16px 18px; padding: 15px 16px 13px;
    background:
        repeating-linear-gradient(90deg, rgba(233, 168, 26, 0.22) 0 18px, rgba(0, 0, 0, 0) 18px 34px),
        repeating-linear-gradient(0deg, rgba(233, 168, 26, 0.22) 0 18px, rgba(0, 0, 0, 0) 18px 34px),
        var(--tg-cranberry);
    border-bottom: 4px solid var(--tg-ink);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    color: transparent; font-size: 0; line-height: 1; text-align: center; white-space: nowrap;
}
#wyr-content.wyr-design.wyrd-thanksgiving .question::before {
    content: ''; width: 30px; height: 30px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 108 108'%3E%3Cpath d='M50 2 L57 20 L66 14 L64 34 L78 24 L76 36 L92 34 L84 48 L96 54 L78 62 L82 74 L62 70 L58 78 L52 74 L53 98 L47 98 L48 74 L42 78 L38 70 L18 74 L22 62 L4 54 L16 48 L8 34 L24 36 L22 24 L36 34 L34 14 L43 20 Z' fill='%23E9A81A' stroke='%232A160D' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
}
#wyr-content.wyr-design.wyrd-thanksgiving .question::after {
    content: 'Pick a side'; color: var(--tg-cream);
    font-family: var(--tg-display); font-style: italic; font-weight: 900; font-size: 26px; line-height: 1;
}

/* ── Paused (the host stopped voting): a kraft tag, phones only ── */
#wyr-content.wyr-design.wyrd-thanksgiving .stopped-banner {
    order: -2; position: relative; margin: 0 4px 14px; padding: 10px 18px 10px 40px;
    background: var(--tg-paper); color: var(--tg-ink); border: 4px solid var(--tg-ink);
    border-radius: 14px; box-shadow: 0 5px 0 var(--tg-shadow);
    font-family: var(--tg-display); font-style: italic; font-weight: 900; font-size: 21px; line-height: 1.15; text-align: center;
    animation: tgwDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-thanksgiving .stopped-banner::before {
    content: ''; position: absolute; left: 14px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px;
    border-radius: 50%; background: var(--tg-ink);
}
#wyr-content.wyr-design.wyrd-thanksgiving .stopped-banner:not(.show) { display: none; }

/* ── The timer: a sage bar and the little pie with the seconds ── */
#wyr-content.wyr-design.wyrd-thanksgiving .vote-timer { order: -1; margin: 0; }
#wyr-content.wyr-design.wyrd-thanksgiving .vote-timer.show {
    display: flex; align-items: center; gap: 14px; margin: 0 4px 14px;
    animation: tgwDrop 0.75s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-thanksgiving .vote-timer-bar {
    flex: 1; height: 22px; box-sizing: border-box; background: #F1E3CB;
    border: 3px solid var(--tg-ink); border-radius: 11px; overflow: hidden;
}
#wyr-content.wyr-design.wyrd-thanksgiving .vote-timer-fill { background: var(--tg-sage) !important; border-radius: 0; }
#wyr-content.wyr-design.wyrd-thanksgiving .vote-timer[data-level] .vote-timer-fill { background: var(--tg-cranberry) !important; }
/* The pie: its crust, the pumpkin filling still on the plate (--tg-left, set
   by thanksgiving.js from the bar), the paper centre with the seconds. */
#wyr-content.wyr-design.wyrd-thanksgiving .vote-timer-text {
    --tg-left: 360deg;
    position: relative; flex: 0 0 auto; width: 66px; height: 66px; margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 78'%3E%3Cpath d='M37.00 3.22 A5.38 5.38 0 0 1 46.52 4.59 A5.38 5.38 0 0 1 55.26 8.58 A5.38 5.38 0 0 1 62.53 14.88 A5.38 5.38 0 0 1 67.73 22.97 A5.38 5.38 0 0 1 70.44 32.19 A5.38 5.38 0 0 1 70.44 41.81 A5.38 5.38 0 0 1 67.73 51.03 A5.38 5.38 0 0 1 62.53 59.12 A5.38 5.38 0 0 1 55.26 65.42 A5.38 5.38 0 0 1 46.52 69.41 A5.38 5.38 0 0 1 37.00 70.78 A5.38 5.38 0 0 1 27.48 69.41 A5.38 5.38 0 0 1 18.74 65.42 A5.38 5.38 0 0 1 11.47 59.12 A5.38 5.38 0 0 1 6.27 51.03 A5.38 5.38 0 0 1 3.56 41.81 A5.38 5.38 0 0 1 3.56 32.19 A5.38 5.38 0 0 1 6.27 22.97 A5.38 5.38 0 0 1 11.47 14.88 A5.38 5.38 0 0 1 18.74 8.58 A5.38 5.38 0 0 1 27.48 4.59 A5.38 5.38 0 0 1 37.00 3.22 Z' transform='translate(0 3)' fill='%23140803' fill-opacity='0.6'/%3E%3Cpath d='M37.00 3.22 A5.38 5.38 0 0 1 46.52 4.59 A5.38 5.38 0 0 1 55.26 8.58 A5.38 5.38 0 0 1 62.53 14.88 A5.38 5.38 0 0 1 67.73 22.97 A5.38 5.38 0 0 1 70.44 32.19 A5.38 5.38 0 0 1 70.44 41.81 A5.38 5.38 0 0 1 67.73 51.03 A5.38 5.38 0 0 1 62.53 59.12 A5.38 5.38 0 0 1 55.26 65.42 A5.38 5.38 0 0 1 46.52 69.41 A5.38 5.38 0 0 1 37.00 70.78 A5.38 5.38 0 0 1 27.48 69.41 A5.38 5.38 0 0 1 18.74 65.42 A5.38 5.38 0 0 1 11.47 59.12 A5.38 5.38 0 0 1 6.27 51.03 A5.38 5.38 0 0 1 3.56 41.81 A5.38 5.38 0 0 1 3.56 32.19 A5.38 5.38 0 0 1 6.27 22.97 A5.38 5.38 0 0 1 11.47 14.88 A5.38 5.38 0 0 1 18.74 8.58 A5.38 5.38 0 0 1 27.48 4.59 A5.38 5.38 0 0 1 37.00 3.22 Z' fill='%23C9842F' stroke='%232A160D' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center top / 66px 70px no-repeat;
    color: transparent !important; font-size: 0;
}
#wyr-content.wyr-design.wyrd-thanksgiving .vote-timer-text::before {
    content: ''; position: absolute; left: 9px; top: 9px; width: 48px; height: 48px; box-sizing: border-box;
    border-radius: 50%; border: 3px solid var(--tg-ink);
    background: conic-gradient(var(--tg-a) 0deg var(--tg-left), var(--tg-plate) var(--tg-left) 360deg);
}
#wyr-content.wyr-design.wyrd-thanksgiving .vote-timer-text::after {
    content: attr(data-secs); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; padding-top: 1px;
    border-radius: 50%; background: var(--tg-paper); border: 3px solid var(--tg-ink);
    color: var(--tg-ink); font-family: var(--tg-display); font-weight: 900; font-size: 17px; line-height: 1;
    font-variant-numeric: tabular-nums;
}
#wyr-content.wyr-design.wyrd-thanksgiving .vote-timer-text[data-long]::after { font-size: 11px; }
/* The last seconds: the pie bumps each second. */
#wyr-content.wyr-design.wyrd-thanksgiving .vote-timer[data-level] .vote-timer-text.tgw-tick { animation: tgwBump 0.25s ease-out; }

/* ── Voting: two place cards and the "or" pie ── */
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-options { order: 2; gap: 0; margin: 4px 6px 0; }
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-option-btn {
    --tg-side: var(--tg-a); --tg-dim: var(--tg-grey-a);
    position: relative; width: 100%; min-height: 176px; margin: 0; padding: 12px 22px;
    border: 5px solid var(--tg-ink); border-radius: 22px; background: var(--tg-side); color: var(--tg-cream);
    box-shadow: var(--tg-card-shadow); text-shadow: 2px 2px 0 var(--tg-ink);
    font-family: 'Sidekick Trivia Bricolage', 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 800; font-size: 27px; line-height: 1.1; text-align: center; overflow-wrap: anywhere;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    animation: tgwServe 0.75s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-option-btn.wyr-b { --tg-side: var(--tg-b); --tg-dim: var(--tg-grey-b); animation-delay: 0.3s; }
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-option-btn:active { transform: scale(0.95); }
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-option-btn.selected {
    border-color: var(--tg-ink); background: var(--tg-side);
    box-shadow: var(--tg-card-shadow), 0 0 0 6px var(--tg-gold), 0 0 0 10px var(--tg-ink);
}
/* The pick's check rosette. */
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-option-btn.selected::after {
    content: ''; position: absolute; right: -16px; top: -26px; width: 70px; height: 72px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 308 316'%3E%3Cpolygon points='150.0,2.0 164.3,22.8 182.9,5.7 192.3,29.2 214.2,16.7 218.1,41.6 242.3,34.3 240.5,59.5 265.7,57.7 258.4,81.9 283.3,85.8 270.8,107.7 294.3,117.1 277.2,135.7 298.0,150.0 277.2,164.3 294.3,182.9 270.8,192.3 283.3,214.2 258.4,218.1 265.7,242.3 240.5,240.5 242.3,265.7 218.1,258.4 214.2,283.3 192.3,270.8 182.9,294.3 164.3,277.2 150.0,298.0 135.7,277.2 117.1,294.3 107.7,270.8 85.8,283.3 81.9,258.4 57.7,265.7 59.5,240.5 34.3,242.3 41.6,218.1 16.7,214.2 29.2,192.3 5.7,182.9 22.8,164.3 2.0,150.0 22.8,135.7 5.7,117.1 29.2,107.7 16.7,85.8 41.6,81.9 34.3,57.7 59.5,59.5 57.7,34.3 81.9,41.6 85.8,16.7 107.7,29.2 117.1,5.7 135.7,22.8' transform='translate(0 8)' fill='%23140803' fill-opacity='0.55'/%3E%3Cpolygon points='150.0,2.0 164.3,22.8 182.9,5.7 192.3,29.2 214.2,16.7 218.1,41.6 242.3,34.3 240.5,59.5 265.7,57.7 258.4,81.9 283.3,85.8 270.8,107.7 294.3,117.1 277.2,135.7 298.0,150.0 277.2,164.3 294.3,182.9 270.8,192.3 283.3,214.2 258.4,218.1 265.7,242.3 240.5,240.5 242.3,265.7 218.1,258.4 214.2,283.3 192.3,270.8 182.9,294.3 164.3,277.2 150.0,298.0 135.7,277.2 117.1,294.3 107.7,270.8 85.8,283.3 81.9,258.4 57.7,265.7 59.5,240.5 34.3,242.3 41.6,218.1 16.7,214.2 29.2,192.3 5.7,182.9 22.8,164.3 2.0,150.0 22.8,135.7 5.7,117.1 29.2,107.7 16.7,85.8 41.6,81.9 34.3,57.7 59.5,59.5 57.7,34.3 81.9,41.6 85.8,16.7 107.7,29.2 117.1,5.7 135.7,22.8' fill='%23E9A81A' stroke='%232A160D' stroke-width='12' stroke-linejoin='round'/%3E%3Cpolygon points='150.0,34.0 164.5,49.0 182.7,38.7 192.4,57.2 212.7,52.4 216.8,72.9 237.7,74.0 235.8,94.9 255.5,101.8 247.9,121.3 264.8,133.5 252.0,150.0 264.8,166.5 247.9,178.7 255.5,198.2 235.8,205.1 237.7,226.0 216.8,227.1 212.7,247.6 192.4,242.8 182.7,261.3 164.5,251.0 150.0,266.0 135.5,251.0 117.3,261.3 107.6,242.8 87.3,247.6 83.2,227.1 62.3,226.0 64.2,205.1 44.5,198.2 52.1,178.7 35.2,166.5 48.0,150.0 35.2,133.5 52.1,121.3 44.5,101.8 64.2,94.9 62.3,74.0 83.2,72.9 87.3,52.4 107.6,57.2 117.3,38.7 135.5,49.0' fill='%23A8233D' stroke='%232A160D' stroke-width='10' stroke-linejoin='round'/%3E%3Ccircle cx='150' cy='150' r='88' fill='%23FFF8EC' stroke='%232A160D' stroke-width='12'/%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' transform='translate(54 54) scale(8)' fill='none' stroke='%233E7B4E' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70px 72px no-repeat; rotate: 10deg;
    animation: tgwPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* The other card waits in burnt-sugar grey. */
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-options:has(.selected) .wyr-option-btn:not(.selected),
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-option-btn:disabled:not(.selected) {
    background: var(--tg-dim); color: var(--tg-grey-text); text-shadow: none;
}
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-option-btn:disabled { opacity: 1; cursor: default; }
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-or {
    position: relative; width: 70px; height: 74px; margin: 2px auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 86'%3E%3Cpath d='M41.00 3.45 A8.20 8.20 0 0 1 55.37 6.31 A8.20 8.20 0 0 1 67.55 14.45 A8.20 8.20 0 0 1 75.69 26.63 A8.20 8.20 0 0 1 78.55 41.00 A8.20 8.20 0 0 1 75.69 55.37 A8.20 8.20 0 0 1 67.55 67.55 A8.20 8.20 0 0 1 55.37 75.69 A8.20 8.20 0 0 1 41.00 78.55 A8.20 8.20 0 0 1 26.63 75.69 A8.20 8.20 0 0 1 14.45 67.55 A8.20 8.20 0 0 1 6.31 55.37 A8.20 8.20 0 0 1 3.45 41.00 A8.20 8.20 0 0 1 6.31 26.63 A8.20 8.20 0 0 1 14.45 14.45 A8.20 8.20 0 0 1 26.63 6.31 A8.20 8.20 0 0 1 41.00 3.45 Z' transform='translate(0 4)' fill='%23140803' fill-opacity='0.6'/%3E%3Cpath d='M41.00 3.45 A8.20 8.20 0 0 1 55.37 6.31 A8.20 8.20 0 0 1 67.55 14.45 A8.20 8.20 0 0 1 75.69 26.63 A8.20 8.20 0 0 1 78.55 41.00 A8.20 8.20 0 0 1 75.69 55.37 A8.20 8.20 0 0 1 67.55 67.55 A8.20 8.20 0 0 1 55.37 75.69 A8.20 8.20 0 0 1 41.00 78.55 A8.20 8.20 0 0 1 26.63 75.69 A8.20 8.20 0 0 1 14.45 67.55 A8.20 8.20 0 0 1 6.31 55.37 A8.20 8.20 0 0 1 3.45 41.00 A8.20 8.20 0 0 1 6.31 26.63 A8.20 8.20 0 0 1 14.45 14.45 A8.20 8.20 0 0 1 26.63 6.31 A8.20 8.20 0 0 1 41.00 3.45 Z' fill='%23C9842F' stroke='%232A160D' stroke-width='3.5' stroke-linejoin='round'/%3E%3Ccircle cx='41' cy='41' r='27' fill='%23FBE8C6' stroke='%232A160D' stroke-width='3.5'/%3E%3C/svg%3E") center / 70px 74px no-repeat;
    display: flex; align-items: center; justify-content: center; padding-bottom: 6px; box-sizing: border-box;
    color: var(--tg-ink); font-family: var(--tg-display); font-style: italic; font-weight: 900; font-size: 27px; line-height: 1;
    rotate: -8deg;
    animation: tgwPop 0.75s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* A re-render of the same question (a settings write) never replays the
   entries. */
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-options.tgw-same .wyr-option-btn,
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-options.tgw-same .wyr-or { animation: none; }

/* ── Status ── */
#wyr-content.wyr-design.wyrd-thanksgiving .status {
    order: 4; margin: 20px 10px 0;
    color: var(--tg-brown); font-weight: 600; font-size: 20px; line-height: 1.3; text-align: center;
    animation: tgwRise 0.6s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-thanksgiving .status.tgw-stamp { animation: tgwPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* Locked, waiting for the beat or the reveal: "Locked in!" and the line under
   it, over YOUR PICK (when the cards on screen are this question's). */
#wyr-content.wyr-design.wyrd-thanksgiving:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status {
    order: 1; margin-top: 44px; font-size: 0; color: transparent;
}
#wyr-content.wyr-design.wyrd-thanksgiving:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .tgw-sub { order: 2; }
#wyr-content.wyr-design.wyrd-thanksgiving.tgw-cards:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) #wyr-options {
    order: 3; display: flex !important; pointer-events: none; margin-top: 40px;
}
#wyr-content.wyr-design.wyrd-thanksgiving.tgw-cards:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) #wyr-options::before {
    content: 'YOUR PICK'; display: block; margin: 0 0 14px; text-align: center;
    color: var(--tg-brown); font-weight: 800; font-size: 16px; letter-spacing: 2px; line-height: 1;
}
#wyr-content.wyr-design.wyrd-thanksgiving.tgw-cards:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .wyr-option-btn:not(.selected),
#wyr-content.wyr-design.wyrd-thanksgiving.tgw-cards:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .wyr-or { display: none; }
#wyr-content.wyr-design.wyrd-thanksgiving.tgw-cards:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .wyr-option-btn.selected {
    min-height: 140px; animation: tgwRise 0.6s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-thanksgiving.tgw-cards:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .wyr-option-btn.selected::after { animation: none; }
/* No pick to show: the pie on the table above "Locked in!". */
#wyr-content.wyr-design.wyrd-thanksgiving:not(.tgw-cards):has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status { margin-top: 70px; }
#wyr-content.wyr-design.wyrd-thanksgiving:not(.tgw-cards):has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status::before {
    content: ''; display: block; width: 132px; height: 139px; margin: 0 auto 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 86'%3E%3Cpath d='M41.00 3.45 A8.20 8.20 0 0 1 55.37 6.31 A8.20 8.20 0 0 1 67.55 14.45 A8.20 8.20 0 0 1 75.69 26.63 A8.20 8.20 0 0 1 78.55 41.00 A8.20 8.20 0 0 1 75.69 55.37 A8.20 8.20 0 0 1 67.55 67.55 A8.20 8.20 0 0 1 55.37 75.69 A8.20 8.20 0 0 1 41.00 78.55 A8.20 8.20 0 0 1 26.63 75.69 A8.20 8.20 0 0 1 14.45 67.55 A8.20 8.20 0 0 1 6.31 55.37 A8.20 8.20 0 0 1 3.45 41.00 A8.20 8.20 0 0 1 6.31 26.63 A8.20 8.20 0 0 1 14.45 14.45 A8.20 8.20 0 0 1 26.63 6.31 A8.20 8.20 0 0 1 41.00 3.45 Z' transform='translate(0 4)' fill='%23140803' fill-opacity='0.6'/%3E%3Cpath d='M41.00 3.45 A8.20 8.20 0 0 1 55.37 6.31 A8.20 8.20 0 0 1 67.55 14.45 A8.20 8.20 0 0 1 75.69 26.63 A8.20 8.20 0 0 1 78.55 41.00 A8.20 8.20 0 0 1 75.69 55.37 A8.20 8.20 0 0 1 67.55 67.55 A8.20 8.20 0 0 1 55.37 75.69 A8.20 8.20 0 0 1 41.00 78.55 A8.20 8.20 0 0 1 26.63 75.69 A8.20 8.20 0 0 1 14.45 67.55 A8.20 8.20 0 0 1 6.31 55.37 A8.20 8.20 0 0 1 3.45 41.00 A8.20 8.20 0 0 1 6.31 26.63 A8.20 8.20 0 0 1 14.45 14.45 A8.20 8.20 0 0 1 26.63 6.31 A8.20 8.20 0 0 1 41.00 3.45 Z' fill='%23C9842F' stroke='%232A160D' stroke-width='3.5' stroke-linejoin='round'/%3E%3Ccircle cx='41' cy='41' r='27' fill='%23FBE8C6' stroke='%232A160D' stroke-width='3.5'/%3E%3C/svg%3E") center / 132px 139px no-repeat;
    animation: tgwPop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* The status's big line (thanksgiving.js sets it). */
#wyr-content.wyr-design.wyrd-thanksgiving .status[data-big]::after {
    content: attr(data-big); display: block;
    color: var(--tg-ink); font-family: var(--tg-display); font-weight: 900; font-size: 52px; line-height: 1.05;
}
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-sub {
    order: 7; margin: 12px 24px 0; color: var(--tg-brown); font-weight: 600; font-size: 20px; line-height: 1.3; text-align: center;
}
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-sub:empty { display: none; }

/* ── The result (after the display's beat) ──
   It lands 0.75 s after it shows: the rosette springs on over 0.75 s as the
   display's rosette lands; on a tie the "TIED!" tag drops 0.2 s later, as the
   display's does (WouldYouRatherThanksgivingDesign.phoneResultLanding and
   Timing.tieLag; the tests read these timings). The Mac's resultsDelayMs is
   each beat less 0.75 s, so the landing is the projector's, and "Locked in!"
   still shows first. */
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result[style*="block"] { order: 3; display: flex !important; flex-direction: column; margin-top: 0; }
/* The two options as mini place cards. */
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result > .wyr-result-labels:nth-child(2) {
    order: 1; display: flex; gap: 12px; margin: 0 4px;
    animation: tgwServe 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result > .wyr-result-labels:nth-child(2) span {
    flex: 1 1 0; min-height: 96px; box-sizing: border-box; padding: 8px 8px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    border: 5px solid var(--tg-ink); border-radius: 18px; box-shadow: inset 0 0 0 4px rgba(255, 244, 226, 0.16), 0 6px 0 var(--tg-shadow);
    background: var(--tg-a); color: var(--tg-cream); text-shadow: 2px 2px 0 var(--tg-ink);
    font-weight: 800; font-size: 17px; line-height: 1.1; overflow-wrap: anywhere;
}
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result > .wyr-result-labels:nth-child(2) .wyr-b-label { background: var(--tg-b); }
/* The winner's card rings gold (both on a tie); the other burns grey. */
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result:has(.tgw-win-a) > .wyr-result-labels:nth-child(2) .wyr-a-label,
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result:has(.tgw-win-b) > .wyr-result-labels:nth-child(2) .wyr-b-label,
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result:has(.tgw-tie) > .wyr-result-labels:nth-child(2) span {
    box-shadow: inset 0 0 0 4px rgba(255, 244, 226, 0.16), 0 6px 0 var(--tg-shadow), 0 0 0 5px var(--tg-gold), 0 0 0 9px var(--tg-ink);
}
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result:has(.tgw-win-a) > .wyr-result-labels:nth-child(2) .wyr-b-label { background: var(--tg-grey-b); color: var(--tg-grey-text); text-shadow: none; }
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result:has(.tgw-win-b) > .wyr-result-labels:nth-child(2) .wyr-a-label { background: var(--tg-grey-a); color: var(--tg-grey-text); text-shadow: none; }
/* The tug bar: pumpkin to the cream split marker, teal beyond. */
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-result-bar {
    order: 2; position: relative; height: 46px; margin: 30px 10px 18px; box-sizing: border-box; overflow: visible;
    border: 4px solid var(--tg-ink); border-radius: 23px; background: var(--tg-b); box-shadow: 0 6px 0 var(--tg-shadow);
    animation: tgwSlide 0.5s 0.08s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-result-bar .wyr-a-fill { position: relative; background: var(--tg-a); border-radius: 19px 0 0 19px; }
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-result-bar .wyr-b-fill { background: var(--tg-b); border-radius: 0 19px 19px 0; }
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-result-bar .wyr-a-fill[style*="width:100%"] { border-radius: 19px; }
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-result-bar .wyr-a-fill::after {
    content: ''; position: absolute; right: -7px; top: -10px; width: 14px; height: 58px; box-sizing: border-box;
    background: var(--tg-paper); border: 3px solid var(--tg-ink); border-radius: 7px; z-index: 1;
}
/* The chips. */
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result > .wyr-result-labels:nth-child(4) {
    order: 3; display: flex; justify-content: space-between; gap: 12px; margin: 0 4px;
    animation: tgwRise 0.5s 0.14s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result > .wyr-result-labels:nth-child(4) span {
    padding: 6px 14px 5px; border: 5px solid var(--tg-ink); border-radius: 14px; background: var(--tg-a);
    box-shadow: inset 0 0 0 4px rgba(255, 244, 226, 0.16), 0 6px 0 var(--tg-shadow);
    color: var(--tg-cream); text-shadow: 2px 2px 0 var(--tg-ink);
    font-family: var(--tg-display); font-weight: 900; font-size: 26px; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result > .wyr-result-labels:nth-child(4) span:first-child { rotate: -2deg; }
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result > .wyr-result-labels:nth-child(4) .wyr-b-label { background: var(--tg-b); rotate: 2deg; }
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result:has(.tgw-win-a) > .wyr-result-labels:nth-child(4) .wyr-b-label { background: var(--tg-grey-b); }
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result:has(.tgw-win-b) > .wyr-result-labels:nth-child(4) .wyr-a-label { background: var(--tg-grey-a); }
/* The county-fair rosette (or the "TIED!" tag), leaves settling round it. */
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-icon { order: 4; position: relative; height: 262px; margin: 22px 0 0; }
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-icon.tgw-none { display: none; }
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-icon.tgw-tie { height: 120px; margin-top: 34px; }
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-rosette {
    position: absolute; left: 50%; top: 0; width: 220px; height: 264px; margin-left: -110px;
    transform-origin: 50% 40%;
    animation: tgwPop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-rosette svg { display: block; width: 220px; height: 264px; overflow: visible; rotate: -5deg; }
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-label {
    position: absolute; left: 0; top: 0; width: 220px; height: 220px; rotate: -5deg;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-name {
    max-width: 118px; color: var(--tg-ink); font-weight: 800; font-size: 18px; line-height: 1.05; overflow-wrap: anywhere;
}
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-wins {
    color: var(--tg-cranberry); font-family: var(--tg-display); font-weight: 900; font-size: 30px; line-height: 1.05;
}
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-award {
    position: absolute; left: 50%; top: 10px; width: 230px; margin-left: -115px; height: 96px;
    animation: tgwDrop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-tie .tgw-award { animation: tgwDrop 0.75s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-award svg { display: block; width: 230px; height: 96px; overflow: visible; rotate: -4deg; }
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-leaf { position: absolute; display: block; animation: tgwFall 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
#wyr-content.wyr-design.wyrd-thanksgiving .tgw-leaf svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The outcome line: shown only when no art says it (no votes). */
#wyr-content.wyr-design.wyrd-thanksgiving .wyr-winner {
    order: 5; margin: 26px 8px 0; color: var(--tg-ink); font-family: var(--tg-display); font-weight: 900;
    font-size: 40px; line-height: 1.05; text-align: center; overflow-wrap: anywhere;
    animation: tgwRise 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result:has(.tgw-win-a, .tgw-win-b, .tgw-tie) .wyr-winner {
    position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%);
}
/* "Locked in!" under the result. */
#wyr-content.wyr-design.wyrd-thanksgiving:has(#wyr-result[style*="block"]) .status {
    order: 6; margin-top: 18px; color: var(--tg-ink); font-family: var(--tg-display); font-weight: 900; font-size: 38px; line-height: 1;
    animation: tgwRise 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result.tgw-same *,
#wyr-content.wyr-design.wyrd-thanksgiving #wyr-result.tgw-same,
#wyr-content.wyr-design.wyrd-thanksgiving:has(#wyr-result.tgw-same[style*="block"]) .status { animation: none; }

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

/* Short screens (an SE in Safari): the whole question still fits. */
@media (max-height: 720px) {
    #wyr-content.wyr-design.wyrd-thanksgiving { padding-bottom: 16px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .question { padding: 11px 16px 10px; margin-bottom: 12px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .question::after { font-size: 23px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .vote-timer.show { margin-bottom: 8px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .vote-timer-text { transform: scale(0.85); }
    #wyr-content.wyr-design.wyrd-thanksgiving .wyr-option-btn { min-height: 130px; font-size: 23px; padding: 10px 18px; border-radius: 20px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .wyr-option-btn.tgw-long { font-size: 19px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .wyr-or { width: 56px; height: 59px; background-size: 56px 59px; font-size: 22px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .status { margin-top: 14px; font-size: 18px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .status[data-big]::after { font-size: 44px; }
    #wyr-content.wyr-design.wyrd-thanksgiving:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status { margin-top: 26px; }
    #wyr-content.wyr-design.wyrd-thanksgiving:not(.tgw-cards):has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status { margin-top: 44px; }
    #wyr-content.wyr-design.wyrd-thanksgiving.tgw-cards:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) #wyr-options { margin-top: 24px; }
    #wyr-content.wyr-design.wyrd-thanksgiving.tgw-cards:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .wyr-option-btn.selected { min-height: 112px; }
    #wyr-content.wyr-design.wyrd-thanksgiving #wyr-result > .wyr-result-labels:nth-child(2) span { min-height: 80px; font-size: 15px; }
    #wyr-content.wyr-design.wyrd-thanksgiving #wyr-result.tgw-long-options > .wyr-result-labels:nth-child(2) span { min-height: 92px; font-size: 13px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .wyr-result-bar { height: 40px; margin: 22px 10px 14px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .wyr-result-bar .wyr-a-fill::after { height: 52px; }
    #wyr-content.wyr-design.wyrd-thanksgiving #wyr-result > .wyr-result-labels:nth-child(4) span { font-size: 22px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .tgw-icon { height: 196px; margin-top: 14px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .tgw-icon.tgw-tie { height: 104px; margin-top: 22px; }
    #wyr-content.wyr-design.wyrd-thanksgiving .tgw-icon:not(.tgw-tie) > * { zoom: 0.76; }
    #wyr-content.wyr-design.wyrd-thanksgiving:has(#wyr-result[style*="block"]) .status { margin-top: 10px; font-size: 32px; }
}

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

/* Motion: transforms only (the boards' served-onto-the-table drops, pops and
   slides). */
@keyframes tgwServe { from { transform: translateY(-420px) rotate(-7deg); } }
@keyframes tgwRise { from { transform: translateY(520px) rotate(5deg); } }
@keyframes tgwDrop { from { transform: translateY(-300px); } }
@keyframes tgwSlide { from { transform: translateX(-520px) rotate(-6deg); } }
@keyframes tgwPop { from { transform: scale(0.001) rotate(-25deg); } to { transform: scale(1) rotate(0deg); } }
@keyframes tgwFall { from { transform: translateY(-180px) rotate(-120deg); } }
@keyframes tgwBump { 50% { transform: scale(1.12); } }
