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

   Live Trivia Bullseye's Op Mod language on a cream card: lowercase Jost,
   the prompt on an ink card, the form as a white field with an ink ring
   (mustard while typing) over an ink "submit" pill, "my submissions" with
   its status badge (submitted mustard, approved teal, answered ink), the
   sort as two pills, and each response a capsule in its own colour
   (tangerine, teal, mustard, magenta, sky, lilac, avocado, coral, the
   display's eight) whose vote button is an ink pill with the HOST's reaction
   emoji beside the count; voted, the pill turns mustard with an ink ring.
   The paused banner is an ink pill with a ring pause icon; the toast an ink
   card with a ringed check dropping in from the top; the ended screen the
   ink "waiting for next activity…" card with three bouncing targets.
   Motion is transforms only. */

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

#qa-content.responses-design.lrd-bullseye,
#toast.responses-design.lrd-bullseye,
#waiting-message.responses-design.lrd-bullseye.lr-ended {
    --be-ink: #151515; --be-cream: #F4EEDF; --be-mustard: #F2B807; --be-teal: #0E8C8E; --be-grey: #3A3632;
    --be-faint: #8F897F;
    font-family: 'Sidekick Trivia Jost', 'Jost', system-ui, sans-serif;
}
#qa-content.responses-design.lrd-bullseye,
#waiting-message.responses-design.lrd-bullseye.lr-ended {
    margin: -8px -4px 0; padding: 14px 12px 18px; min-height: 70vh; box-sizing: border-box;
    border-radius: 26px; overflow: hidden;
    background: var(--be-cream); color: var(--be-ink);
    font-weight: 700; text-align: left;
}

/* ── The prompt on an ink card ── */
#qa-content.responses-design.lrd-bullseye .qa-title {
    margin: 0 0 10px; padding: 14px 20px; min-height: 76px; box-sizing: border-box; border-radius: 26px;
    display: flex; align-items: center;
    background: var(--be-ink); color: var(--be-cream);
    font-weight: 700; font-size: 22px; line-height: 1.14; text-align: left; overflow-wrap: anywhere;
    animation: berrFromLeft 0.5s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

/* ── Paused (the host stopped taking responses): an ink pill, a ring pause ── */
#qa-content.responses-design.lrd-bullseye .qa-paused-banner {
    position: relative; margin: 0 0 12px; padding: 10px 18px 10px 11px; min-height: 72px; box-sizing: border-box;
    align-items: center; gap: 12px;
    background: var(--be-ink); color: var(--be-cream); border: none; border-radius: 999px;
    font-weight: 700; font-size: 17px; line-height: 1.15; text-align: left; text-transform: lowercase;
}
#qa-content.responses-design.lrd-bullseye .qa-paused-banner.show {
    display: flex;
    animation: berrBanner 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#qa-content.responses-design.lrd-bullseye .berr-pause {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    background:
        radial-gradient(circle, var(--be-ink) 0 13px, transparent 13.5px),
        repeating-radial-gradient(circle, var(--be-mustard) 0 3px, var(--be-ink) 3px 6px);
}
#qa-content.responses-design.lrd-bullseye .berr-pause i { width: 6px; height: 17px; border-radius: 2px; background: var(--be-mustard); }

/* ── The form: a white field with an ink ring, the ink "submit" pill ── */
#qa-content.responses-design.lrd-bullseye .qa-submit-form {
    margin: 0 0 6px; padding: 3px; background: none; border-radius: 0;
    animation: berrFromLeft 0.52s 0.15s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
#qa-content.responses-design.lrd-bullseye .qa-submit-form textarea {
    display: block; width: 100%; min-height: 84px; margin: 0; padding: 14px 18px; box-sizing: border-box;
    background: #FFFFFF; color: var(--be-ink); border: none; border-radius: 24px;
    box-shadow: 0 0 0 3px var(--be-ink);
    font-family: inherit; font-weight: 600; font-size: 19px; line-height: 1.3; resize: none;
    transition: box-shadow 0.2s ease;
}
#qa-content.responses-design.lrd-bullseye .qa-submit-form textarea::placeholder { color: var(--be-faint); text-transform: lowercase; }
#qa-content.responses-design.lrd-bullseye .qa-submit-form textarea:focus {
    outline: none; border: none; box-shadow: 0 0 0 3px var(--be-ink), 0 0 0 8px var(--be-mustard);
}
#qa-content.responses-design.lrd-bullseye .qa-submit-btn {
    display: block; width: 100%; height: 54px; margin: 10px 0 0; padding: 0;
    background: var(--be-ink); color: var(--be-mustard); border: none; border-radius: 999px;
    font-family: inherit; font-weight: 800; font-size: 22px; line-height: 54px; text-transform: lowercase;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#qa-content.responses-design.lrd-bullseye .qa-submit-btn:active { transform: scale(0.93); }
#qa-content.responses-design.lrd-bullseye .qa-submit-btn:disabled { opacity: 1; background: var(--be-grey); color: var(--be-cream); }
#qa-content.responses-design.lrd-bullseye .qa-submitted-msg,
#qa-content.responses-design.lrd-bullseye .qa-profanity-error {
    border: none; border-radius: 22px; margin: 0 0 12px; padding: 12px 16px;
    background: var(--be-ink); color: var(--be-cream); font-weight: 700; font-size: 16px; text-transform: lowercase;
}

/* ── My submissions ── */
#qa-content.responses-design.lrd-bullseye .qa-section-header {
    margin: 10px 0 4px; color: var(--be-ink);
    font-weight: 800; font-size: 19px; letter-spacing: 0; text-transform: lowercase;
}
#qa-content.responses-design.lrd-bullseye .qa-section-header.collapsible .chevron { font-size: 13px; color: var(--be-ink); }
#qa-content.responses-design.lrd-bullseye #qa-my-questions .qa-question-card {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    margin: 4px 0 6px; padding: 10px 14px; border-radius: 22px;
    background: #FFFFFF; box-shadow: inset 0 0 0 3px var(--be-ink); color: var(--be-ink);
    animation: berrFromLeft 0.46s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#qa-content.responses-design.lrd-bullseye .berr-my-text { font-weight: 700; font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
#qa-content.responses-design.lrd-bullseye .berr-my-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#qa-content.responses-design.lrd-bullseye .berr-my-votes { color: var(--be-grey); font-weight: 600; font-size: 15px; }
#qa-content.responses-design.lrd-bullseye .berr-badge {
    padding: 3px 14px 5px; border-radius: 999px;
    background: var(--be-mustard); color: var(--be-ink);
    font-weight: 800; font-size: 14px; line-height: 18px;
    animation: berrFlip 0.36s ease both;
}
#qa-content.responses-design.lrd-bullseye .berr-badge[data-status="approved"] { background: var(--be-teal); color: var(--be-cream); }
#qa-content.responses-design.lrd-bullseye .berr-badge[data-status="answered"] { background: var(--be-ink); color: var(--be-mustard); }

/* ── The sort: two pills ── */
#qa-content.responses-design.lrd-bullseye .qa-sort-bar {
    display: flex; gap: 8px; margin: 10px 0 8px; background: none; border-radius: 0; overflow: visible;
}
#qa-content.responses-design.lrd-bullseye .qa-sort-btn {
    flex: 0 0 auto; height: 36px; padding: 0 16px; border: none; border-radius: 999px;
    background: transparent; box-shadow: inset 0 0 0 3px var(--be-ink); color: var(--be-ink);
    font-family: inherit; font-weight: 800; font-size: 16px; line-height: 36px; text-transform: lowercase;
}
#qa-content.responses-design.lrd-bullseye .qa-sort-btn.active { background: var(--be-ink); color: var(--be-mustard); box-shadow: none; }

/* ── The responses: a capsule each, in its own colour ── */
#qa-content.responses-design.lrd-bullseye #qa-approved-questions .qa-question-card {
    --c: #F26A1D;
    position: relative; display: flex; align-items: center; gap: 12px;
    min-height: 70px; margin: 0 0 8px; padding: 7px 12px 7px 9px; box-sizing: border-box;
    border-radius: 26px; background: var(--c); color: var(--be-ink);
}
#qa-content.responses-design.lrd-bullseye #qa-approved-questions .qa-question-card.entering {
    animation: berrFromRight 0.5s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
#qa-content.responses-design.lrd-bullseye #qa-approved-questions .qa-question-card:has(.berr-text[data-c="1"]) { --c: #0E8C8E; }
#qa-content.responses-design.lrd-bullseye #qa-approved-questions .qa-question-card:has(.berr-text[data-c="2"]) { --c: #F2B807; }
#qa-content.responses-design.lrd-bullseye #qa-approved-questions .qa-question-card:has(.berr-text[data-c="3"]) { --c: #C8246B; }
#qa-content.responses-design.lrd-bullseye #qa-approved-questions .qa-question-card:has(.berr-text[data-c="4"]) { --c: #57B3E0; }
#qa-content.responses-design.lrd-bullseye #qa-approved-questions .qa-question-card:has(.berr-text[data-c="5"]) { --c: #9B72CF; }
#qa-content.responses-design.lrd-bullseye #qa-approved-questions .qa-question-card:has(.berr-text[data-c="6"]) { --c: #7FAF3B; }
#qa-content.responses-design.lrd-bullseye #qa-approved-questions .qa-question-card:has(.berr-text[data-c="7"]) { --c: #E9776B; }
#qa-content.responses-design.lrd-bullseye #qa-approved-questions .qa-question-text {
    flex: 1; min-width: 0; color: var(--be-ink);
    font-weight: 700; font-size: 17px; line-height: 1.15; overflow-wrap: anywhere;
}
/* The vote: an ink pill, the host's emoji and the count in fixed cells. */
#qa-content.responses-design.lrd-bullseye .qa-vote-btn {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 6px;
    min-width: 84px; height: 48px; padding: 0 12px 0 13px; box-sizing: border-box;
    background: var(--be-ink); color: var(--be-mustard); border: none; border-radius: 24px;
    font-family: inherit; font-weight: 800; font-size: 22px; line-height: 24px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#qa-content.responses-design.lrd-bullseye .qa-vote-btn:active { background: var(--be-ink); transform: scale(0.92); }
#qa-content.responses-design.lrd-bullseye .qa-vote-btn.voted {
    background: var(--be-mustard); color: var(--be-ink); border: none; box-shadow: 0 0 0 3px var(--be-ink);
}
#qa-content.responses-design.lrd-bullseye .qa-response-emoji {
    display: inline-block; width: 26px; text-align: center; font-size: 22px; line-height: 26px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
#qa-content.responses-design.lrd-bullseye .qa-response-votes { display: inline-flex; }
#qa-content.responses-design.lrd-bullseye .berr-cell { display: inline-block; width: 16px; text-align: center; }
#qa-content.responses-design.lrd-bullseye .berr-cell.berr-half { width: 8px; }
#qa-content.responses-design.lrd-bullseye .berr-cell.berr-minus { width: 10px; }
#qa-content.responses-design.lrd-bullseye .qa-empty {
    margin: 0; padding: 18px 0 0; color: var(--be-grey);
    font-weight: 600; font-size: 18px; line-height: 1.3; text-align: center; text-transform: lowercase;
}

/* ── The submit toast: an ink card with a ringed check, from the top ── */
#toast.responses-design.lrd-bullseye {
    top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto;
    width: min(354px, calc(100vw - 32px)); max-width: none; min-height: 88px; box-sizing: border-box;
    display: flex; align-items: center; gap: 14px; padding: 12px 20px 12px 16px;
    background: var(--be-ink); color: var(--be-cream); border: none; border-radius: 28px;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    font-weight: 700; font-size: 20px; line-height: 1.15; text-align: left; text-transform: lowercase;
    opacity: 1; transform: translateX(-50%) translateY(-160px);
}
#toast.responses-design.lrd-bullseye::before { content: none; }
#toast.responses-design.lrd-bullseye.show { animation: berrToastIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
#toast.responses-design.lrd-bullseye.hide { animation: berrToastOut 0.3s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
#toast.responses-design.lrd-bullseye .berr-toast-disc {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle, var(--be-ink) 0 15px, transparent 15.5px),
        repeating-radial-gradient(circle, var(--be-teal) 0 3px, var(--be-cream) 3px 6px);
}
#toast.responses-design.lrd-bullseye .berr-toast-disc.berr-bad {
    background:
        radial-gradient(circle, var(--be-ink) 0 15px, transparent 15.5px),
        repeating-radial-gradient(circle, #C8246B 0 3px, var(--be-cream) 3px 6px);
}
#toast.responses-design.lrd-bullseye .berr-toast-disc svg {
    width: 22px; height: 22px; fill: none; stroke: var(--be-mustard); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Ended: the ink card, three targets bouncing ── */
#waiting-message.responses-design.lrd-bullseye.lr-ended.show { display: flex; align-items: center; justify-content: center; }
#waiting-message.responses-design.lrd-bullseye.lr-ended .berr-wait {
    width: min(318px, 100%); box-sizing: border-box; padding: 34px 22px 38px; border-radius: 40px;
    display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
    background: var(--be-ink);
    animation: berrSwing 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#waiting-message.responses-design.lrd-bullseye.lr-ended .berr-wait-title {
    color: var(--be-mustard); font-weight: 900; font-size: 38px; line-height: 38px; letter-spacing: -1.5px;
}
#waiting-message.responses-design.lrd-bullseye.lr-ended .berr-dots { display: flex; gap: 18px; height: 56px; align-items: flex-end; }
#waiting-message.responses-design.lrd-bullseye.lr-ended .berr-dots i {
    width: 40px; height: 40px; border-radius: 50%;
    background: repeating-radial-gradient(circle, var(--be-ink) 0 5px, #F26A1D 5px 10px);
    animation: berrHop 1.2s ease-in-out infinite;
}
#waiting-message.responses-design.lrd-bullseye.lr-ended .berr-dots i:nth-child(2) {
    background: repeating-radial-gradient(circle, var(--be-ink) 0 5px, #0E8C8E 5px 10px); animation-delay: 0.2s;
}
#waiting-message.responses-design.lrd-bullseye.lr-ended .berr-dots i:nth-child(3) {
    background: repeating-radial-gradient(circle, var(--be-ink) 0 5px, #C8246B 5px 10px); animation-delay: 0.4s;
}

/* Short screens (an SE in Safari): tighter, so the form and the first
   responses fit. */
@media (max-height: 720px) {
    #qa-content.responses-design.lrd-bullseye { padding: 14px 12px 16px; }
    #qa-content.responses-design.lrd-bullseye .qa-title { min-height: 64px; padding: 12px 18px; font-size: 20px; border-radius: 22px; margin-bottom: 8px; }
    #qa-content.responses-design.lrd-bullseye .qa-paused-banner { min-height: 60px; font-size: 15px; }
    #qa-content.responses-design.lrd-bullseye .berr-pause { width: 44px; height: 44px; }
    #qa-content.responses-design.lrd-bullseye .qa-submit-form textarea { min-height: 70px; font-size: 17px; padding: 12px 16px; }
    #qa-content.responses-design.lrd-bullseye .qa-submit-btn { height: 48px; line-height: 48px; font-size: 20px; margin-top: 8px; }
    #qa-content.responses-design.lrd-bullseye .qa-sort-bar { margin: 10px 0 8px; }
    #qa-content.responses-design.lrd-bullseye .qa-sort-btn { height: 34px; line-height: 34px; font-size: 15px; }
    #qa-content.responses-design.lrd-bullseye #qa-approved-questions .qa-question-card { min-height: 60px; margin-bottom: 6px; padding: 6px 12px 6px 8px; border-radius: 22px; }
    #qa-content.responses-design.lrd-bullseye #qa-approved-questions .qa-question-text { font-size: 15px; }
    #qa-content.responses-design.lrd-bullseye .qa-vote-btn { height: 42px; min-width: 78px; font-size: 19px; }
    #qa-content.responses-design.lrd-bullseye .qa-section-header { margin-top: 10px; font-size: 17px; }
    #qa-content.responses-design.lrd-bullseye #qa-my-questions .qa-question-card { padding: 10px 14px; }
    #toast.responses-design.lrd-bullseye { min-height: 72px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    #qa-content.responses-design.lrd-bullseye *, #qa-content.responses-design.lrd-bullseye *::before,
    #qa-content.responses-design.lrd-bullseye *::after,
    #waiting-message.responses-design.lrd-bullseye.lr-ended *,
    #waiting-message.responses-design.lrd-bullseye.lr-ended *::before { animation: none !important; transition: none !important; }
    #toast.responses-design.lrd-bullseye.show { animation: none; transform: translateX(-50%) translateY(0); }
}

/* Motion: transforms only. */
@keyframes berrFromLeft { from { transform: translateX(-460px); } }
@keyframes berrFromRight { from { transform: translateX(420px); } }
@keyframes berrBanner { from { transform: translateY(-120px); } }
@keyframes berrFlip { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes berrToastIn { from { transform: translateX(-50%) translateY(-160px); } to { transform: translateX(-50%) translateY(0); } }
@keyframes berrToastOut { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(-160px); } }
@keyframes berrSwing { from { transform: translateX(295px) rotate(12deg); } }
@keyframes berrHop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px); } }