/* Live Trivia · Bullseye phone skin (owner decision 2026-10-05): the
   canvas's Pop Art 3 · Op Mod phone boards (PA3-P1 … P7). Scoped to
   #trivia-content.pop-quiz.ltd-bullseye; layered on the shared Pop Quiz
   structure, so every rule here only restyles it.

   A cream set with op-art rings, flat colour-blocked capsules (no borders,
   no offset shadows) and lowercase Jost. Ring motion is a ring phase
   (@property), one ring at a time and slow; browsers without @property
   show still rings. Black text on teal (daylight contrast, review
   follow-up), cream on magenta. The question screen keeps the timer, the
   question, every answer and the score bar on one screen: the score bar
   stays in flow under the answers (the shared rule), and the answer
   buttons give back height on short screens. */

@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'); }
@font-face { font-family: 'Monoton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/monoton-regular-v1.woff2') format('woff2'); }

/* Ring phases, animated one ring at a time. */
@property --ltdbe-band { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ltdbe-ring { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ltdbe-clock { syntax: '<length>'; inherits: false; initial-value: 0px; }

#trivia-content.pop-quiz.ltd-bullseye {
    --be-ink: #151515; --be-cream: #F4EEDF; --be-tangerine: #F26A1D; --be-teal: #0E8C8E;
    --be-mustard: #F2B807; --be-magenta: #C8246B; --be-sky: #57B3E0; --be-grey: #3A3632;
    --pq-ink: #151515; --pq-cream: #F4EEDF; --pq-yellow: #F2B807; --pq-green: #0E8C8E; --pq-red: #C8246B;
    font-family: 'Sidekick Trivia Jost', 'Jost', system-ui, sans-serif;
    font-weight: 700;
    color: var(--be-ink);
    background: var(--be-cream);
}
#trivia-content.pop-quiz.ltd-bullseye .pq-title,
#trivia-content.pop-quiz.ltd-bullseye .pq-display { font-family: 'Sidekick Trivia Jost', system-ui, sans-serif; font-weight: 900; }
#trivia-content.pop-quiz.ltd-bullseye .pq-sticker { background: transparent; border: none; box-shadow: none; }

/* ── Join (P1) ── */
#trivia-content.pop-quiz.ltd-bullseye #trivia-lobby { position: relative; padding-top: 112px; }
/* The op-art band across the top, rippling out one ring as the screen opens. */
#trivia-content.pop-quiz.ltd-bullseye #trivia-lobby::before {
    content: ''; position: absolute; left: -16px; right: -16px; top: -18px; height: 112px;
    border-bottom: 10px solid var(--be-ink);
    background: repeating-radial-gradient(circle at 50% -40px,
        var(--be-tangerine) var(--ltdbe-band), var(--be-tangerine) calc(var(--ltdbe-band) + 14px),
        var(--be-cream) calc(var(--ltdbe-band) + 14px), var(--be-cream) calc(var(--ltdbe-band) + 28px));
    animation: ltdbeBand 1.2s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-title {
    font-family: 'Sidekick Trivia Jost', system-ui, sans-serif; font-weight: 900;
    font-size: 3rem; line-height: 0.9; letter-spacing: -2px; text-transform: lowercase; text-align: left;
    background: none; color: var(--be-ink); border: none; box-shadow: none; transform: none;
    padding: 0; margin: 14px 4px 26px;
    animation: ltdbeSlideRight 0.5s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-name-input {
    height: 64px; padding: 0 24px; text-align: left; margin-bottom: 18px;
    background: #FFFFFF; color: var(--be-ink);
    border: 3px solid var(--be-ink); border-radius: 999px; box-shadow: none;
    font-family: 'Sidekick Trivia Jost', system-ui, sans-serif; font-weight: 700; font-size: 1.5rem;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-name-input::placeholder { color: rgba(21, 21, 21, 0.4); }
#trivia-content.pop-quiz.ltd-bullseye .trivia-join-btn {
    height: 72px; border: none; border-radius: 999px; box-shadow: none;
    background: var(--be-ink); color: var(--be-mustard);
    font-family: 'Sidekick Trivia Jost', system-ui, sans-serif; font-weight: 800; font-size: 1.75rem;
    text-transform: lowercase;
    transition: transform 0.11s ease-out, background-color 0.09s ease;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-join-btn:active { transform: scale(0.94, 0.86); box-shadow: none; background: var(--be-tangerine); }
#trivia-content.pop-quiz.ltd-bullseye #trivia-random-name p { color: var(--be-grey) !important; font-weight: 600; text-transform: lowercase; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-random-name-display {
    padding: 10px 28px 12px; border: none; border-radius: 999px; box-shadow: none;
    background: var(--be-ink); color: var(--be-mustard); font-weight: 800;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-reroll-btn {
    color: var(--be-ink); border: 3px solid var(--be-ink); background: transparent; text-transform: lowercase;
}

/* You're in: a teal target pops, its rings ripple out; the name drops in. */
/* Once in, the title gives the screen to the target (P1). */
#trivia-content.pop-quiz.ltd-bullseye #trivia-lobby:has(#trivia-joined-msg[style*="block"]) .trivia-title { display: none; }
#trivia-content.pop-quiz.ltd-bullseye .pq-joined .pq-burst {
    width: 240px; height: 240px; border-radius: 50%; clip-path: none;
    background:
        radial-gradient(circle, var(--be-ink) 0 85px, transparent 85.5px),
        repeating-radial-gradient(circle,
            var(--be-teal) var(--ltdbe-ring), var(--be-teal) calc(var(--ltdbe-ring) + 10px),
            var(--be-cream) calc(var(--ltdbe-ring) + 10px), var(--be-cream) calc(var(--ltdbe-ring) + 20px));
    color: var(--be-mustard); font-size: 2.6rem; line-height: 0.92; letter-spacing: -1px; text-transform: lowercase;
    animation: ltdbePop 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) both, ltdbeRing 1.1s 0.3s ease-out both;
}
#trivia-content.pop-quiz.ltd-bullseye .pq-joined .pq-burst span { transform: none; }
#trivia-content.pop-quiz.ltd-bullseye .pq-name-chip {
    display: inline-flex; align-items: center; gap: 12px; margin: 24px 0 18px; padding: 10px 28px 12px 14px;
    background: var(--be-ink); color: var(--be-mustard); font-weight: 800; font-size: 2rem; line-height: 1;
    border: none; border-radius: 999px; box-shadow: none; transform: rotate(-2deg);
    animation: ltdbeDropChip 0.52s 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .pq-name-chip::before {
    content: ''; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    background: repeating-radial-gradient(circle, var(--be-mustard) 0 4px, var(--be-ink) 4px 8px);
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-waiting-joined p,
#trivia-content.pop-quiz.ltd-bullseye .pq-wait-line {
    color: var(--be-grey); font-size: 1.2rem; font-weight: 600; text-transform: lowercase;
    animation: ltdbeRise 0.52s 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Question (P2) ── */
#trivia-content.pop-quiz.ltd-bullseye .trivia-timer-bar {
    height: 14px; background: var(--be-ink); border: none; border-radius: 999px;
    animation: ltdbeDropTop 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-timer-fill { border-radius: 999px; background-color: var(--be-tangerine) !important; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-timer-fill[data-level="warn"] { background-color: var(--be-mustard) !important; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-timer-fill[data-level="urgent"] { background-color: var(--be-magenta) !important; }
/* The clock: a ring target with the seconds in the bullseye. Each second
   its rings close in one notch and it wobbles; mustard at 5 s, magenta at
   3 s, as on the display. */
#trivia-content.pop-quiz.ltd-bullseye .trivia-timer-text {
    --be-ring: var(--be-tangerine);
    width: 72px; height: 72px; border: none; box-shadow: none;
    background:
        radial-gradient(circle, var(--be-ink) 0 25px, transparent 25.5px),
        repeating-radial-gradient(circle,
            var(--be-ring) var(--ltdbe-clock), var(--be-ring) calc(var(--ltdbe-clock) + 4px),
            var(--be-cream) calc(var(--ltdbe-clock) + 4px), var(--be-cream) calc(var(--ltdbe-clock) + 8px));
    color: var(--be-mustard) !important;
    font-family: 'Sidekick Trivia Jost', system-ui, sans-serif; font-weight: 800; font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    animation: ltdbeDropTop 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-timer-text[data-level="warn"] { --be-ring: var(--be-mustard); background-color: transparent; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-timer-text[data-level="urgent"] { --be-ring: var(--be-magenta); background-color: transparent; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-timer-text.pq-tick { animation: ltdbeTick 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), ltdbeNotch 0.38s ease-out; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-question-text {
    background: var(--be-ink); color: var(--be-cream);
    border: none; border-radius: 28px; box-shadow: none;
    padding: 16px 22px 18px; margin: 14px 0 16px;
    font-weight: 700; font-size: 1.3rem; line-height: 1.22; text-align: left;
    transform-origin: 50% 0;
    animation: ltdbeSwing 0.52s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-options-grid { gap: 12px; margin: 0; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-options-grid[data-count="5"] { gap: 10px; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn {
    gap: 12px; min-height: 80px; padding: 4px 16px 4px 10px;
    border: none; border-radius: 26px; box-shadow: none;
    color: var(--be-ink); text-shadow: none;
    font-family: 'Sidekick Trivia Jost', system-ui, sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.1;
    transition: transform 0.1s ease-out, box-shadow 0.12s ease-out;
    animation: ltdbeFromLeft 0.52s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:nth-child(2n) { animation-name: ltdbeFromRight; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:nth-child(1) { animation-delay: 0.6s; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:nth-child(2) { animation-delay: 0.68s; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:nth-child(3) { animation-delay: 0.76s; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:nth-child(4) { animation-delay: 0.84s; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:nth-child(5) { animation-delay: 0.92s; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:nth-child(4) { color: var(--be-cream); }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:active { transform: scale(0.95); box-shadow: none; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn.selected {
    outline: none; transform: scale(0.95);
    box-shadow: 0 0 0 4px var(--be-cream), 0 0 0 8px var(--be-ink);
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-options-grid[data-count="5"] .trivia-option-btn { min-height: 66px; font-size: 1.15rem; }
/* The letter disc: rings round a black core, the letter in the answer's colour. */
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-letter {
    width: 56px; height: 56px;
    background:
        radial-gradient(circle, var(--be-ink) 0 20px, transparent 20.5px),
        repeating-radial-gradient(circle, var(--be-ink) 0 4px, var(--be-cream) 4px 8px);
    font-family: 'Sidekick Trivia Jost', system-ui, sans-serif; font-weight: 900; font-size: 1.4rem;
    color: var(--be-mustard);
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-options-grid[data-count="5"] .trivia-option-letter {
    width: 48px; height: 48px; font-size: 1.3rem;
    background:
        radial-gradient(circle, var(--be-ink) 0 17px, transparent 17.5px),
        repeating-radial-gradient(circle, var(--be-ink) 0 4px, var(--be-cream) 4px 8px);
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:nth-child(1) .trivia-option-letter { color: var(--be-tangerine); }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:nth-child(2) .trivia-option-letter { color: var(--be-teal); }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:nth-child(3) .trivia-option-letter { color: var(--be-mustard); }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:nth-child(4) .trivia-option-letter { color: var(--be-magenta); }
#trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn:nth-child(5) .trivia-option-letter { color: var(--be-sky); }
/* Short screens: the buttons give back height so the whole question still
   fits (the rest of the screen is about 391 px with four answers, 395 px
   with five, gaps included). */
@supports (height: 100dvh) {
    #trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn { min-height: clamp(48px, calc((100dvh - 391px) / 4), 80px); }
    #trivia-content.pop-quiz.ltd-bullseye .trivia-options-grid[data-count="5"] .trivia-option-btn { min-height: clamp(44px, calc((100dvh - 395px) / 5), 66px); }
}
/* Short screens (an SE in Safari): a tighter header, question and score
   bar, so a long question and five answers still fit with the bar under
   them. */
@media (max-height: 720px) {
    #trivia-content.pop-quiz.ltd-bullseye .trivia-timer-text { width: 60px; height: 60px; font-size: 1.3rem; }
    #trivia-content.pop-quiz.ltd-bullseye .trivia-timer-text {
        background:
            radial-gradient(circle, var(--be-ink) 0 21px, transparent 21.5px),
            repeating-radial-gradient(circle,
                var(--be-ring) var(--ltdbe-clock), var(--be-ring) calc(var(--ltdbe-clock) + 4px),
                var(--be-cream) calc(var(--ltdbe-clock) + 4px), var(--be-cream) calc(var(--ltdbe-clock) + 8px));
    }
    #trivia-content.pop-quiz.ltd-bullseye .trivia-question-text { font-size: 1.1rem; padding: 12px 18px 14px; margin: 10px 0 12px; border-radius: 22px; }
    #trivia-content.pop-quiz.ltd-bullseye #trivia-question .trivia-score-bar,
    #trivia-content.pop-quiz.ltd-bullseye .trivia-score-bar { height: 54px; margin-top: 12px; }
    #trivia-content.pop-quiz.ltd-bullseye .trivia-score-value { height: 38px; font-size: 1.35rem; }
}
@media (max-height: 600px) {
    #trivia-content.pop-quiz.ltd-bullseye .trivia-question-text { font-size: 1rem; line-height: 1.18; }
    #trivia-content.pop-quiz.ltd-bullseye .trivia-options-grid { gap: 8px; }
    #trivia-content.pop-quiz.ltd-bullseye .trivia-options-grid[data-count="5"] { gap: 6px; }
    #trivia-content.pop-quiz.ltd-bullseye .trivia-option-btn { font-size: 1.1rem; min-height: 42px; }
    #trivia-content.pop-quiz.ltd-bullseye .trivia-options-grid[data-count="5"] .trivia-option-btn { min-height: 40px; font-size: 1.05rem; }
    #trivia-content.pop-quiz.ltd-bullseye .trivia-option-letter { width: 40px; height: 40px; font-size: 1.15rem;
        background: radial-gradient(circle, var(--be-ink) 0 14px, transparent 14.5px), repeating-radial-gradient(circle, var(--be-ink) 0 3px, var(--be-cream) 3px 6px); }
    #trivia-content.pop-quiz.ltd-bullseye .trivia-options-grid[data-count="5"] .trivia-option-letter { width: 36px; height: 36px; font-size: 1.05rem;
        background: radial-gradient(circle, var(--be-ink) 0 12px, transparent 12.5px), repeating-radial-gradient(circle, var(--be-ink) 0 3px, var(--be-cream) 3px 6px); }
}

/* ── Locked in (P3): a stamped target, the pick as a sticker ── */
#trivia-content.pop-quiz.ltd-bullseye .pq-locked.show { padding-top: 26px; }
#trivia-content.pop-quiz.ltd-bullseye .pq-lock-card {
    margin: 0; padding: 0; transform: none; gap: 22px;
    animation: none;
}
#trivia-content.pop-quiz.ltd-bullseye .pq-lock-card svg {
    box-sizing: border-box; width: 200px; height: 200px; padding: 69px; border-radius: 50%;
    background:
        radial-gradient(circle, var(--be-ink) 0 64px, transparent 64.5px),
        repeating-radial-gradient(circle, var(--be-ink) 0 8px, var(--be-mustard) 8px 16px);
    stroke: var(--be-mustard) !important;
    animation: ltdbeStamp 0.36s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .pq-lock-card .pq-display {
    font-size: 2.25rem; line-height: 1; letter-spacing: -1px; text-transform: lowercase;
    animation: ltdbeStamp 0.36s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .pq-pick {
    margin: 26px 0 24px; padding: 8px 26px 8px 8px;
    border: none; border-radius: 999px; box-shadow: none;
    color: var(--be-ink); text-shadow: none; font-size: 1.3rem; line-height: 1.1;
    animation: ltdbePop 0.46s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .pq-pick .trivia-option-letter {
    width: 44px; height: 44px; font-size: 1.3rem; background: var(--be-ink);
}
#trivia-content.pop-quiz.ltd-bullseye .pq-pick[style*="242, 106, 29"] .trivia-option-letter { color: var(--be-tangerine); }
#trivia-content.pop-quiz.ltd-bullseye .pq-pick[style*="14, 140, 142"] .trivia-option-letter { color: var(--be-teal); }
#trivia-content.pop-quiz.ltd-bullseye .pq-pick[style*="242, 184, 7"] .trivia-option-letter { color: var(--be-mustard); }
#trivia-content.pop-quiz.ltd-bullseye .pq-pick[style*="200, 36, 107"] { color: var(--be-cream); }
#trivia-content.pop-quiz.ltd-bullseye .pq-pick[style*="200, 36, 107"] .trivia-option-letter { color: var(--be-magenta); }
#trivia-content.pop-quiz.ltd-bullseye .pq-pick[style*="87, 179, 224"] .trivia-option-letter { color: var(--be-sky); }

/* ── Result (P4 correct, P5 wrong) ── */
#trivia-content.pop-quiz.ltd-bullseye .trivia-result { padding: 22px 0 0; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-result-icon { position: relative; width: 240px; height: 240px; margin: 0 auto 22px; }
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-result { position: relative; width: 240px; height: 240px; }
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-target {
    position: absolute; inset: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle, #151515 0 81px, transparent 81.5px),
        repeating-radial-gradient(circle,
            var(--be-target) var(--ltdbe-ring), var(--be-target) calc(var(--ltdbe-ring) + 10px),
            #F4EEDF calc(var(--ltdbe-ring) + 10px), #F4EEDF calc(var(--ltdbe-ring) + 20px));
}
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-target svg { width: 96px; height: 96px; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-correct .ltdbe-target {
    --be-target: #0E8C8E;
    animation: ltdbePop 0.52s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both, ltdbeRing 1.5s 0.3s ease-out both;
}
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-correct .ltdbe-target svg { stroke: #F2B807; }
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-correct .ltdbe-target path { stroke-dasharray: 34; stroke-dashoffset: 34; animation: ltdbeDraw 0.35s 0.55s ease-out forwards; }
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-wrong .ltdbe-target {
    --be-target: #C8246B;
    animation: ltdbeDropIn 0.56s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both, ltdbeShake 0.3s 0.86s ease-in-out, ltdbeRing 1.5s 0.3s ease-out both;
}
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-wrong .ltdbe-target svg { stroke: #F4EEDF; }
/* Mod shapes burst out of the target. */
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-bit {
    position: absolute; left: 50%; top: 50%; box-sizing: border-box;
    width: var(--s); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--s) / -2);
    background: var(--c); border-radius: var(--r);
    transform: translate(0, 0) scale(0);
    animation: ltdbeBurst 0.56s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
}
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-bit.ltdbe-ring-bit { background: transparent; border: calc(var(--s) / 5) solid var(--c); }
#trivia-content.pop-quiz.ltd-bullseye .trivia-result-text {
    font-family: 'Sidekick Trivia Jost', system-ui, sans-serif; font-weight: 900; font-size: 4rem;
    line-height: 1; letter-spacing: -2px; color: var(--be-ink) !important; text-shadow: none; margin-bottom: 20px;
    animation: ltdbeSlam 0.38s 0.8s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-result:has(.ltdbe-wrong) .trivia-result-text { animation-delay: 1.25s; }
#trivia-content.pop-quiz.ltd-bullseye .trivia-result-points {
    padding: 10px 28px 14px; border: none; border-radius: 999px;
    box-shadow: inset 0 0 0 3px var(--be-ink);
    background: #FFFFFF; color: var(--be-ink);
    font-family: 'Sidekick Trivia Jost', system-ui, sans-serif; font-weight: 800; font-size: 2rem; line-height: 1;
    transform: rotate(-3deg);
    animation: ltdbeSticker 0.48s 1.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-result-points.pq-earned {
    background: var(--be-mustard); transform: rotate(-3deg); animation-delay: 1.1s;
}

/* ── Get ready (P6): a black card swings in; three target dots hop ── */
#trivia-content.pop-quiz.ltd-bullseye .pq-ready {
    margin: 64px 12px 0; padding: 34px 22px 38px; gap: 22px;
    background: var(--be-ink); border: none; border-radius: 40px; box-shadow: none;
    animation: ltdbeSwingIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .pq-ready .pq-display {
    color: var(--be-mustard); font-size: 2.4rem; line-height: 1; letter-spacing: -1.5px; text-transform: lowercase;
}
#trivia-content.pop-quiz.ltd-bullseye .pq-dots { gap: 18px; height: 56px; }
#trivia-content.pop-quiz.ltd-bullseye .pq-dots span { width: 40px; height: 40px; border: none; }
#trivia-content.pop-quiz.ltd-bullseye .pq-dots span:nth-child(1) { background: repeating-radial-gradient(circle, var(--be-ink) 0 5px, var(--be-tangerine) 5px 10px); }
#trivia-content.pop-quiz.ltd-bullseye .pq-dots span:nth-child(2) { background: repeating-radial-gradient(circle, var(--be-ink) 0 5px, var(--be-teal) 5px 10px); }
#trivia-content.pop-quiz.ltd-bullseye .pq-dots span:nth-child(3) { background: repeating-radial-gradient(circle, var(--be-ink) 0 5px, var(--be-magenta) 5px 10px); }

/* ── Game over (P7): a black slab over the four set colours, the final
   score in a bullseye ── */
#trivia-content.pop-quiz.ltd-bullseye .trivia-final-rank {
    position: relative; margin: 20px 6px 60px; padding: 0; height: 96px; line-height: 96px;
    background: var(--be-ink); color: var(--be-cream);
    border: none; border-radius: 999px; box-shadow: none; transform: none;
    font-family: 'Sidekick Trivia Jost', system-ui, sans-serif; font-weight: 900; font-size: 3rem;
    letter-spacing: -2px; text-transform: lowercase;
    animation: ltdbeDropIn 0.6s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-final-rank::after {
    content: ''; position: absolute; top: calc(100% + 12px); left: calc(50% - 132px);
    width: 60px; height: 14px; border-radius: 999px; background: var(--be-tangerine);
    box-shadow: 68px 0 0 var(--be-teal), 136px 0 0 var(--be-mustard), 204px 0 0 var(--be-magenta);
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-final-score { color: var(--be-cream); }
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-final {
    --be-target: #C8246B;
    position: relative; width: 300px; height: 300px; margin: 0 auto; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background:
        radial-gradient(circle, #151515 0 110px, transparent 110.5px),
        repeating-radial-gradient(circle,
            var(--be-target) var(--ltdbe-ring), var(--be-target) calc(var(--ltdbe-ring) + 12px),
            #F4EEDF calc(var(--ltdbe-ring) + 12px), #F4EEDF calc(var(--ltdbe-ring) + 24px));
    animation: ltdbePop 0.52s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both, ltdbeRing24 1.6s 0.7s ease-out both;
}
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-final-label { font-weight: 700; font-size: 0.95rem; letter-spacing: 4px; color: #F4EEDF; }
#trivia-content.pop-quiz.ltd-bullseye .ltdbe-final-value { font-weight: 900; font-size: 3.2rem; line-height: 1; color: #F2B807; font-variant-numeric: tabular-nums; }

/* ── Score bar: in flow under the answers (the shared rule) ── */
#trivia-content.pop-quiz.ltd-bullseye .trivia-score-bar {
    height: 64px; box-sizing: border-box; padding: 0 10px 0 24px; margin-top: 18px;
    background: var(--be-ink); border: none; border-radius: 999px;
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-score-label {
    font-weight: 700; font-size: 0.95rem; letter-spacing: 3px; text-transform: lowercase; color: var(--be-cream);
}
#trivia-content.pop-quiz.ltd-bullseye .trivia-score-value {
    display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px;
    background: var(--be-mustard); color: var(--be-ink);
    font-family: 'Sidekick Trivia Jost', system-ui, sans-serif; font-weight: 800; font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
}

/* Motion: transforms and ring phases only. */
@keyframes ltdbeBand { from { --ltdbe-band: 0px; } to { --ltdbe-band: 28px; } }
@keyframes ltdbeRing { from { --ltdbe-ring: 0px; } to { --ltdbe-ring: 20px; } }
@keyframes ltdbeRing24 { from { --ltdbe-ring: 0px; } to { --ltdbe-ring: 24px; } }
@keyframes ltdbeNotch { from { --ltdbe-clock: 8px; } to { --ltdbe-clock: 0px; } }
@keyframes ltdbePop { from { transform: scale(0); } }
@keyframes ltdbeStamp { from { transform: rotate(-14deg) scale(0); } to { transform: rotate(-3deg) scale(1); } }
@keyframes ltdbeSticker { from { transform: scale(0) rotate(20deg); } to { transform: scale(1) rotate(-3deg); } }
@keyframes ltdbeSlam { from { transform: scale(0); } }
@keyframes ltdbeSlideRight { from { transform: translateX(-460px); } }
@keyframes ltdbeFromLeft { from { transform: translateX(-440px); } }
@keyframes ltdbeFromRight { from { transform: translateX(440px); } }
@keyframes ltdbeDropTop { from { transform: translateY(-160px); } }
@keyframes ltdbeDropChip { from { transform: translateY(-520px) rotate(-2deg); } to { transform: rotate(-2deg); } }
@keyframes ltdbeDropIn { from { transform: translateY(-520px); } }
@keyframes ltdbeRise { from { transform: translateY(420px); } }
@keyframes ltdbeSwing { from { transform: translateY(-440px) rotate(-6deg); } }
@keyframes ltdbeSwingIn { from { transform: translateX(120%) rotate(12deg); } }
@keyframes ltdbeTick { 45% { transform: rotate(8deg) scale(1.1); } }
@keyframes ltdbeShake { 25% { transform: rotate(-14deg); } 60% { transform: rotate(12deg); } 85% { transform: rotate(-6deg); } }
@keyframes ltdbeDraw { to { stroke-dashoffset: 0; } }
@keyframes ltdbeBurst { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); } }