/* Would You Rather · Bullseye phone skin (owner decision 2026-10-06): the
   canvas's wyr-designs Bullseye Phone and animation boards. Every rule is
   scoped to #wyr-content.wyr-design.wyrd-bullseye, so no other screen or
   feature is touched; the classic screens (no .wyr-design) never match.

   Live Trivia Bullseye's Op Mod language on a cream card: lowercase Jost,
   a tangerine and a teal capsule with the or target between, a ring clock,
   and a ring target for the result (a crown for a winner, two rings for a
   tie). Motion is transforms, clip and ring phases only (@property; a
   browser without it shows still rings), and /wyr-designs/bullseye.js
   keeps a re-render of the same screen from replaying it. */

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

@property --bewyr-clock { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --bewyr-ring { syntax: '<length>'; inherits: false; initial-value: 0px; }

#wyr-content.wyr-design.wyrd-bullseye {
    --be-ink: #151515; --be-cream: #F4EEDF; --be-tangerine: #F26A1D; --be-teal: #0E8C8E;
    --be-mustard: #F2B807; --be-magenta: #C8246B; --be-grey: #3A3632;
    flex-direction: column;
    margin: -8px -4px 0; padding: 22px 16px 22px; min-height: 70vh; box-sizing: border-box;
    border-radius: 26px; overflow: hidden;
    background: var(--be-cream); color: var(--be-ink);
    font-family: 'Sidekick Trivia Jost', 'Jost', system-ui, sans-serif; font-weight: 700;
    text-align: left;
}
/* renderWYR shows the screen with an inline display: block. */
#wyr-content.wyr-design.wyrd-bullseye[style*="block"] { display: flex !important; }
#wyr-content.wyr-design.wyrd-bullseye > * { flex: 0 0 auto; }

/* ── Paused (the host stopped voting) ── */
#wyr-content.wyr-design.wyrd-bullseye .stopped-banner {
    order: -1; margin: 0 0 14px; padding: 10px 18px 12px;
    background: var(--be-ink); color: var(--be-mustard); border: none; border-radius: 999px;
    font-weight: 700; font-size: 1.05rem; line-height: 1.2; text-align: center; text-transform: lowercase;
    animation: bewyrDrop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye .stopped-banner:not(.show) { display: none; }

/* ── The timer: a bar and a ring clock with the seconds in its bullseye ── */
#wyr-content.wyr-design.wyrd-bullseye .vote-timer { order: 0; margin: 0; }
#wyr-content.wyr-design.wyrd-bullseye .vote-timer.show {
    display: flex; align-items: center; gap: 12px;
    animation: bewyrDrop 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye .vote-timer-bar {
    flex: 1; height: 14px; background: var(--be-ink); border-radius: 999px;
}
#wyr-content.wyr-design.wyrd-bullseye .vote-timer-fill {
    border-radius: 999px; background-color: var(--be-tangerine) !important;
}
#wyr-content.wyr-design.wyrd-bullseye .vote-timer[data-level="warn"] .vote-timer-fill { background-color: var(--be-mustard) !important; }
#wyr-content.wyr-design.wyrd-bullseye .vote-timer[data-level="urgent"] .vote-timer-fill { background-color: var(--be-magenta) !important; }
#wyr-content.wyr-design.wyrd-bullseye .vote-timer-text {
    --be-ring: var(--be-tangerine);
    position: relative; flex: 0 0 auto; width: 72px; height: 72px; margin: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle, var(--be-ink) 0 25px, transparent 25.5px),
        repeating-radial-gradient(circle,
            var(--be-ring) var(--bewyr-clock), var(--be-ring) calc(var(--bewyr-clock) + 4px),
            var(--be-cream) calc(var(--bewyr-clock) + 4px), var(--be-cream) calc(var(--bewyr-clock) + 8px));
    color: transparent !important; font-size: 0;
}
#wyr-content.wyr-design.wyrd-bullseye .vote-timer-text::after {
    content: attr(data-secs);
    color: var(--be-mustard); font-weight: 800; font-size: 24px; line-height: 28px;
    font-variant-numeric: tabular-nums;
}
#wyr-content.wyr-design.wyrd-bullseye .vote-timer-text[data-long]::after { font-size: 17px; }
#wyr-content.wyr-design.wyrd-bullseye .vote-timer[data-level="warn"] .vote-timer-text { --be-ring: var(--be-mustard); }
#wyr-content.wyr-design.wyrd-bullseye .vote-timer[data-level="urgent"] .vote-timer-text { --be-ring: var(--be-magenta); }
/* Each second the rings close in one notch; from 5 s the clock wobbles. */
#wyr-content.wyr-design.wyrd-bullseye .vote-timer-text.bewyr-tick { animation: bewyrNotch 0.38s ease-out, bewyrTickSoft 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }
#wyr-content.wyr-design.wyrd-bullseye .vote-timer[data-level] .vote-timer-text.bewyr-tick { animation: bewyrNotch 0.38s ease-out, bewyrTick 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── The title ── */
#wyr-content.wyr-design.wyrd-bullseye .question {
    order: 1; margin: 30px 2px 24px;
    font-weight: 900; font-size: 50px; line-height: 0.95; letter-spacing: -2px;
    color: var(--be-ink); text-transform: lowercase; text-align: left;
    animation: bewyrFromLeft 0.5s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye:has(#wyr-result[style*="block"]) .question { margin: 4px 2px 22px; font-size: 44px; }

/* ── Voting: two capsules with the or target between ── */
#wyr-content.wyr-design.wyrd-bullseye .wyr-options { order: 2; gap: 0; margin: 0; }
#wyr-content.wyr-design.wyrd-bullseye .wyr-option-btn {
    --be-side: var(--be-tangerine);
    position: relative; width: 100%; min-height: 138px; margin: 0; padding: 16px 24px;
    border: none; border-radius: 30px; box-shadow: none;
    background: var(--be-side); color: var(--be-ink);
    font-family: 'Sidekick Trivia Jost', 'Jost', system-ui, sans-serif;
    font-weight: 700; font-size: 27px; line-height: 1.12; text-align: center;
    transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, box-shadow 0.2s ease;
    animation: bewyrFromLeft 0.52s 0.3s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye .wyr-option-btn.wyr-b {
    --be-side: var(--be-teal);
    animation-name: bewyrFromRight; animation-delay: 0.4s;
}
#wyr-content.wyr-design.wyrd-bullseye .wyr-option-btn:active { transform: scale(0.92); }
#wyr-content.wyr-design.wyrd-bullseye .wyr-option-btn.selected {
    padding-right: 70px; transform: scale(0.95);
    background: var(--be-side); border: none;
    box-shadow: 0 0 0 5px var(--be-cream), 0 0 0 10px var(--be-ink);
}
/* The side not picked turns cream with its colour as a rim. */
#wyr-content.wyr-design.wyrd-bullseye .wyr-options:has(.selected) .wyr-option-btn:not(.selected) {
    background: var(--be-cream); box-shadow: inset 0 0 0 5px var(--be-side);
}
/* The pick's check: a mustard tick on a black round. */
#wyr-content.wyr-design.wyrd-bullseye .wyr-option-btn.selected::after {
    content: ''; position: absolute; right: 14px; top: 50%; width: 46px; height: 46px; margin-top: -23px;
    border-radius: 50%; background: var(--be-ink);
    animation: bewyrPop 0.36s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye .wyr-option-btn.selected::before {
    content: ''; position: absolute; right: 31px; top: 50%; width: 10px; height: 18px; margin-top: -12px; z-index: 1;
    border: solid var(--be-mustard); border-width: 0 4px 4px 0; border-radius: 1px;
    transform: rotate(45deg);
    animation: bewyrPopTick 0.36s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye .wyr-option-btn:disabled { opacity: 1; cursor: default; }
#wyr-content.wyr-design.wyrd-bullseye .wyr-option-btn:disabled:not(.selected) { background: var(--be-cream); box-shadow: inset 0 0 0 5px var(--be-side); color: rgba(21, 21, 21, 0.55); }
#wyr-content.wyr-design.wyrd-bullseye .wyr-or {
    width: 64px; height: 64px; margin: 14px auto; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle, var(--be-ink) 0 21px, transparent 21.5px),
        repeating-radial-gradient(circle, var(--be-mustard) 0 4px, var(--be-ink) 4px 8px);
    color: var(--be-mustard); font-weight: 900; font-size: 24px; line-height: 21px; padding-bottom: 3px; box-sizing: border-box;
    animation: bewyrPop 0.46s 0.45s 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-bullseye .wyr-options.bewyr-same .wyr-option-btn,
#wyr-content.wyr-design.wyrd-bullseye .wyr-options.bewyr-same .wyr-or { animation: none; }

/* ── Status ── */
#wyr-content.wyr-design.wyrd-bullseye .status {
    order: 4; margin: 26px 0 0;
    color: var(--be-grey); font-weight: 600; font-size: 18px; line-height: 1.3; text-align: center;
    text-transform: lowercase;
    animation: bewyrRise 0.52s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye .status.bewyr-stamp { animation: bewyrStatusStamp 0.36s cubic-bezier(0.2, 1.4, 0.5, 1) both; }
#wyr-content.wyr-design.wyrd-bullseye .status .bewyr-check {
    display: inline-block; width: 7px; height: 13px; margin: 0 5px 4px 3px;
    border: solid var(--be-teal); border-width: 0 3.5px 3.5px 0; transform: rotate(45deg);
}
/* Locked, waiting for the beat or the reveal: a stamped target. */
#wyr-content.wyr-design.wyrd-bullseye:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status {
    margin-top: 40px; font-size: 24px; font-weight: 700; color: var(--be-ink);
}
#wyr-content.wyr-design.wyrd-bullseye:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status::before {
    content: ''; display: block; width: 168px; height: 168px; margin: 0 auto 22px; border-radius: 50%;
    background:
        radial-gradient(circle, var(--be-ink) 0 54px, transparent 54.5px),
        repeating-radial-gradient(circle, var(--be-ink) 0 8px, var(--be-mustard) 8px 16px);
    animation: bewyrStamp 0.36s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}

/* ── The result (after the display's beat) ──
   It lands 0.8 s after it shows: "wins!" slammed on (0.42 + 0.38 s) with
   the winner's sticker, as the display's winner badge lands; "tied!" lands
   0.25 s sooner, as the display's does (WouldYouRatherBullseyeDesign
   .phoneResultLanding; the tests read these timings). The Mac's
   resultsDelayMs is each beat less 0.8 s, so the landing is the
   projector's, and "Locked in!" still shows first. */
#wyr-content.wyr-design.wyrd-bullseye #wyr-result[style*="block"] { order: 3; display: flex !important; flex-direction: column; }
#wyr-content.wyr-design.wyrd-bullseye #wyr-result > .wyr-result-labels:nth-child(2) {
    order: 1; display: flex; justify-content: space-between; gap: 14px; margin-top: 6px;
    animation: bewyrDropIn 0.4s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye #wyr-result > .wyr-result-labels:nth-child(2) span {
    flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    color: var(--be-ink); font-weight: 700; font-size: 19px; line-height: 1.12; text-align: left;
    overflow-wrap: anywhere;
}
#wyr-content.wyr-design.wyrd-bullseye #wyr-result > .wyr-result-labels:nth-child(2) .wyr-b-label { align-items: flex-end; text-align: right; }
#wyr-content.wyr-design.wyrd-bullseye #wyr-result > .wyr-result-labels:nth-child(2) span::before {
    content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--be-tangerine);
}
#wyr-content.wyr-design.wyrd-bullseye #wyr-result > .wyr-result-labels:nth-child(2) .wyr-b-label::before { background: var(--be-teal); }
#wyr-content.wyr-design.wyrd-bullseye .wyr-result-bar {
    order: 2; position: relative; height: 40px; margin: 16px 4px 10px;
    border: none; border-radius: 999px; background: var(--be-ink); box-shadow: 0 0 0 4px var(--be-ink);
    animation: bewyrFromRight 0.4s 0.1s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye .wyr-result-bar .wyr-a-fill {
    background: var(--be-tangerine); box-shadow: inset -3px 0 0 var(--be-cream);
    animation: bewyrFillA 0.45s 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye .wyr-result-bar .wyr-b-fill {
    background: var(--be-teal); box-shadow: inset 3px 0 0 var(--be-cream);
    animation: bewyrFillB 0.45s 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye #wyr-result > .wyr-result-labels:nth-child(4) {
    order: 3; display: flex; justify-content: space-between;
    animation: bewyrFromRight 0.4s 0.2s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye #wyr-result > .wyr-result-labels:nth-child(4) span {
    color: var(--be-ink); font-weight: 800; font-size: 26px; line-height: 32px; font-variant-numeric: tabular-nums;
    padding: 0 4px; white-space: nowrap;
}
#wyr-content.wyr-design.wyrd-bullseye .bewyr-icon { order: 4; display: flex; flex-direction: column; align-items: center; }
#wyr-content.wyr-design.wyrd-bullseye .bewyr-target {
    --be-target: var(--be-teal);
    position: relative; width: 186px; height: 186px; margin: 28px auto 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle, var(--be-ink) 0 60px, transparent 60.5px),
        repeating-radial-gradient(circle,
            var(--be-target) var(--bewyr-ring), var(--be-target) calc(var(--bewyr-ring) + 10px),
            var(--be-cream) calc(var(--bewyr-ring) + 10px), var(--be-cream) calc(var(--bewyr-ring) + 20px));
    transform: rotate(-4deg);
    animation: bewyrTarget 0.4s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both, bewyrRing 1.5s 0.3s ease-out both;
}
#wyr-content.wyr-design.wyrd-bullseye .bewyr-tie .bewyr-target {
    background:
        radial-gradient(circle, var(--be-ink) 0 60px, transparent 60.5px),
        repeating-radial-gradient(circle,
            var(--be-tangerine) calc(var(--bewyr-ring) * 1.6), var(--be-tangerine) calc(var(--bewyr-ring) * 1.6 + 8px),
            var(--be-cream) calc(var(--bewyr-ring) * 1.6 + 8px), var(--be-cream) calc(var(--bewyr-ring) * 1.6 + 16px),
            var(--be-teal) calc(var(--bewyr-ring) * 1.6 + 16px), var(--be-teal) calc(var(--bewyr-ring) * 1.6 + 24px),
            var(--be-cream) calc(var(--bewyr-ring) * 1.6 + 24px), var(--be-cream) calc(var(--bewyr-ring) * 1.6 + 32px));
}
#wyr-content.wyr-design.wyrd-bullseye .bewyr-target svg {
    width: 68px; height: 68px; fill: none; stroke: var(--be-mustard); stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
}
#wyr-content.wyr-design.wyrd-bullseye .bewyr-target path {
    stroke-dasharray: 1 1; stroke-dashoffset: 1;
    animation: bewyrDraw 0.3s 0.45s ease-out forwards;
}
#wyr-content.wyr-design.wyrd-bullseye .bewyr-name {
    margin-top: 20px; padding: 8px 24px 10px; border-radius: 999px;
    background: var(--be-teal); color: var(--be-ink);
    font-weight: 700; font-size: 24px; line-height: 1.1; text-align: center; overflow-wrap: anywhere;
    transform: rotate(-2deg);
    animation: bewyrSticker 0.4s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye .bewyr-name.bewyr-a { background: var(--be-tangerine); }
#wyr-content.wyr-design.wyrd-bullseye .wyr-winner {
    order: 5; margin-top: 10px;
    color: var(--be-ink); font-weight: 900; font-size: 62px; line-height: 1; letter-spacing: -2px; text-align: center;
    animation: bewyrSlam 0.38s 0.42s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye #wyr-result:has(.bewyr-tie) .wyr-winner { margin-top: 24px; animation-delay: 0.17s; }
#wyr-content.wyr-design.wyrd-bullseye .bewyr-tie .bewyr-target { animation-delay: 0.1s, 0.1s; }
#wyr-content.wyr-design.wyrd-bullseye .bewyr-tie .bewyr-target path { animation-delay: 0.25s; }
#wyr-content.wyr-design.wyrd-bullseye #wyr-result:has(.bewyr-none) .wyr-winner { margin-top: 24px; font-size: 38px; letter-spacing: -1px; animation-delay: 0.42s; }
#wyr-content.wyr-design.wyrd-bullseye:has(#wyr-result[style*="block"]) .status {
    margin-top: 22px; animation: bewyrRise 0.52s 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wyr-content.wyr-design.wyrd-bullseye #wyr-result.bewyr-same *,
#wyr-content.wyr-design.wyrd-bullseye:has(#wyr-result.bewyr-same[style*="block"]) .status { animation: none; }
#wyr-content.wyr-design.wyrd-bullseye #wyr-result.bewyr-same .bewyr-target path { stroke-dashoffset: 0; }

/* Long options (up to 60 characters): the result gives back height. */
#wyr-content.wyr-design.wyrd-bullseye #wyr-result:has(.bewyr-long) > .wyr-result-labels:nth-child(2) span { font-size: 15px; gap: 6px; }
#wyr-content.wyr-design.wyrd-bullseye #wyr-result:has(.bewyr-long) > .wyr-result-labels:nth-child(2) span::before { width: 18px; height: 18px; }
#wyr-content.wyr-design.wyrd-bullseye #wyr-result:has(.bewyr-long) .bewyr-target { width: 140px; height: 140px; margin-top: 16px;
    background:
        radial-gradient(circle, var(--be-ink) 0 44px, transparent 44.5px),
        repeating-radial-gradient(circle,
            var(--be-target) var(--bewyr-ring), var(--be-target) calc(var(--bewyr-ring) + 8px),
            var(--be-cream) calc(var(--bewyr-ring) + 8px), var(--be-cream) calc(var(--bewyr-ring) + 16px)); }
#wyr-content.wyr-design.wyrd-bullseye #wyr-result:has(.bewyr-long) .bewyr-target svg { width: 52px; height: 52px; }
#wyr-content.wyr-design.wyrd-bullseye #wyr-result:has(.bewyr-long) .bewyr-name { margin-top: 14px; font-size: 18px; padding: 6px 18px 8px; }
#wyr-content.wyr-design.wyrd-bullseye #wyr-result:has(.bewyr-long) .wyr-winner { font-size: 50px; margin-top: 6px; }

/* Short screens (an SE in Safari): the whole question still fits. */
@media (max-height: 720px) {
    #wyr-content.wyr-design.wyrd-bullseye { padding: 16px 14px 16px; }
    #wyr-content.wyr-design.wyrd-bullseye .vote-timer-text { width: 60px; height: 60px;
        background:
            radial-gradient(circle, var(--be-ink) 0 21px, transparent 21.5px),
            repeating-radial-gradient(circle,
                var(--be-ring) var(--bewyr-clock), var(--be-ring) calc(var(--bewyr-clock) + 4px),
                var(--be-cream) calc(var(--bewyr-clock) + 4px), var(--be-cream) calc(var(--bewyr-clock) + 8px)); }
    #wyr-content.wyr-design.wyrd-bullseye .vote-timer-text::after { font-size: 21px; }
    #wyr-content.wyr-design.wyrd-bullseye .question { margin: 16px 2px 16px; font-size: 40px; }
    #wyr-content.wyr-design.wyrd-bullseye:has(#wyr-result[style*="block"]) .question { margin: 0 2px 14px; font-size: 36px; }
    #wyr-content.wyr-design.wyrd-bullseye .wyr-option-btn { min-height: 108px; font-size: 24px; padding: 12px 20px; }
    #wyr-content.wyr-design.wyrd-bullseye .wyr-option-btn.selected { padding-right: 64px; }
    #wyr-content.wyr-design.wyrd-bullseye .wyr-or { width: 54px; height: 54px; margin: 10px auto; font-size: 21px;
        background: radial-gradient(circle, var(--be-ink) 0 17px, transparent 17.5px), repeating-radial-gradient(circle, var(--be-mustard) 0 4px, var(--be-ink) 4px 8px); }
    #wyr-content.wyr-design.wyrd-bullseye .status { margin-top: 18px; font-size: 17px; }
    #wyr-content.wyr-design.wyrd-bullseye .bewyr-target, #wyr-content.wyr-design.wyrd-bullseye #wyr-result:has(.bewyr-long) .bewyr-target {
        width: 132px; height: 132px; margin-top: 14px;
        background:
            radial-gradient(circle, var(--be-ink) 0 42px, transparent 42.5px),
            repeating-radial-gradient(circle,
                var(--be-target) var(--bewyr-ring), var(--be-target) calc(var(--bewyr-ring) + 8px),
                var(--be-cream) calc(var(--bewyr-ring) + 8px), var(--be-cream) calc(var(--bewyr-ring) + 16px)); }
    #wyr-content.wyr-design.wyrd-bullseye .bewyr-tie .bewyr-target {
        background:
            radial-gradient(circle, var(--be-ink) 0 42px, transparent 42.5px),
            repeating-radial-gradient(circle,
                var(--be-tangerine) var(--bewyr-ring), var(--be-tangerine) calc(var(--bewyr-ring) + 6px),
                var(--be-cream) calc(var(--bewyr-ring) + 6px), var(--be-cream) calc(var(--bewyr-ring) + 12px),
                var(--be-teal) calc(var(--bewyr-ring) + 12px), var(--be-teal) calc(var(--bewyr-ring) + 18px),
                var(--be-cream) calc(var(--bewyr-ring) + 18px), var(--be-cream) calc(var(--bewyr-ring) + 24px)); }
    #wyr-content.wyr-design.wyrd-bullseye #wyr-result:has(.bewyr-long) .wyr-winner { font-size: 44px; }
    #wyr-content.wyr-design.wyrd-bullseye #wyr-result:has(.bewyr-long) .bewyr-name { font-size: 16px; margin-top: 10px; }
    #wyr-content.wyr-design.wyrd-bullseye .bewyr-target svg { width: 56px; height: 56px; }
    #wyr-content.wyr-design.wyrd-bullseye .bewyr-name { margin-top: 14px; font-size: 21px; }
    #wyr-content.wyr-design.wyrd-bullseye .wyr-winner { font-size: 52px; margin-top: 8px; }
    #wyr-content.wyr-design.wyrd-bullseye:has(#wyr-result[style*="block"]) .status { margin-top: 14px; }
    #wyr-content.wyr-design.wyrd-bullseye:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status::before { width: 140px; height: 140px;
        background: radial-gradient(circle, var(--be-ink) 0 44px, transparent 44.5px), repeating-radial-gradient(circle, var(--be-ink) 0 7px, var(--be-mustard) 7px 14px); }
}

@media (prefers-reduced-motion: reduce) {
    #wyr-content.wyr-design.wyrd-bullseye *, #wyr-content.wyr-design.wyrd-bullseye *::before,
    #wyr-content.wyr-design.wyrd-bullseye *::after { animation: none !important; transition: none !important; }
    #wyr-content.wyr-design.wyrd-bullseye .bewyr-target path { stroke-dashoffset: 0; }
}

/* Motion: transforms, clips and ring phases only. */
@keyframes bewyrNotch { from { --bewyr-clock: 8px; } to { --bewyr-clock: 0px; } }
@keyframes bewyrRing { from { --bewyr-ring: 0px; } to { --bewyr-ring: 20px; } }
@keyframes bewyrTick { 45% { transform: rotate(8deg) scale(1.1); } }
@keyframes bewyrTickSoft { 45% { transform: rotate(3.2deg) scale(1.04); } }
@keyframes bewyrPop { from { transform: scale(0); } }
@keyframes bewyrPopTick { from { transform: rotate(45deg) scale(0); } to { transform: rotate(45deg) scale(1); } }
@keyframes bewyrStamp { from { transform: rotate(-14deg) scale(0); } to { transform: rotate(-3deg) scale(1); } }
@keyframes bewyrStatusStamp { from { transform: scale(0.5); } }
@keyframes bewyrTarget { from { transform: rotate(-4deg) scale(0); } to { transform: rotate(-4deg) scale(1); } }
@keyframes bewyrSticker { from { transform: rotate(-14deg) scale(0); } to { transform: rotate(-2deg) scale(1); } }
@keyframes bewyrSlam { from { transform: scale(0); } }
@keyframes bewyrFromLeft { from { transform: translateX(-460px); } }
@keyframes bewyrFromRight { from { transform: translateX(440px); } }
@keyframes bewyrDrop { from { transform: translateY(-160px); } }
@keyframes bewyrDropIn { from { transform: translateY(-380px); } }
@keyframes bewyrRise { from { transform: translateY(420px); } }
@keyframes bewyrFillA { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bewyrFillB { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes bewyrDraw { to { stroke-dashoffset: 0; } }