/* Live Responses · Pop Quiz phone skin (owner decision 2026-10-07), from the
   canvas boards LR-PopQuiz-Phone and -Anim: Live Trivia Pop Quiz's stickers
   (chunky ink borders, hard shadows, Titan One and Space Grotesk) on its
   dotted stage panel. Every rule is scoped to
   #qa-content.responses-design.lrd-popQuiz, #toast.responses-design.lrd-popQuiz
   or #waiting-message.responses-design.lrd-popQuiz.lr-ended, so no other
   screen or feature is touched; the classic screens (no .responses-design)
   never match.

   The screen: the prompt on the ink banner (yellow shadow), the response
   box and the yellow Submit Response button (a red Paused stamp takes their
   place while the host has paused), My Submissions with each response's
   badge (Submitted / Approved / Answered), the Most Voted / Most Recent bar,
   and the responses as cream stickers: a pill with the HOST's reaction emoji
   and the count in fixed digit cells (yellow once you've voted), a colour
   bar in the response's own colour (its place, as on the display), the
   text. The panel fills the phone; a long list scrolls inside it, the page
   never does. The submit toast is a green stamp; the ended screen is the
   "Waiting for next activity…" card with its hopping dots.

   The faces are self-hosted (licences in /fonts/OFL-*.txt). The stage
   colour lives on these in-flow panels, never on html/body or a fixed
   element (the iOS 26 rule). */

@font-face { font-family: 'Titan One'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/titan-one-400-v1.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/space-grotesk-500-v1.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/space-grotesk-700-v1.woff2') format('woff2'); }

/* ── The panel: the stage, dotted, filling the phone ── */
#qa-content.responses-design.lrd-popQuiz,
#waiting-message.responses-design.lrd-popQuiz.lr-ended {
    --pql-ink: #14110D; --pql-cream: #FFF4E0; --pql-yellow: #FFD23F;
    --pql-green: #3DDC84; --pql-red: #FF4D5E; --pql-caption: #D3CDC2; --pql-muted: #B9BBC6;
    --pql-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --pql-slam: cubic-bezier(0.2, 1.4, 0.5, 1);
    --pql-pop: cubic-bezier(0.5, 0, 0.75, 0);
    position: relative;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    color: var(--pql-cream);
    margin: -8px -4px 0;
    padding: 22px 16px 18px;
    height: calc(100vh - 112px);
    height: calc(100dvh - 112px);
    box-sizing: border-box;
    border-radius: 26px;
    background:
        radial-gradient(rgba(255,255,255,0.09) 2px, transparent 2.5px) 0 0 / 22px 22px,
        radial-gradient(ellipse 80% 70% at 50% 40%, #202D4D, #070F22);
    overflow: hidden;
}
/* index.html shows the panel with an inline display: block; the design
   stacks it as a column whose list takes what's left. */
#qa-content.responses-design.lrd-popQuiz[style*="block"] {
    display: flex !important; flex-direction: column; align-items: stretch; text-align: left;
}

/* The responses' colours by place (the display's eight). */
#qa-content.responses-design.lrd-popQuiz .pql-bar[data-place="0"] { --pql-c: #27AE60; }
#qa-content.responses-design.lrd-popQuiz .pql-bar[data-place="1"] { --pql-c: #E74C3C; }
#qa-content.responses-design.lrd-popQuiz .pql-bar[data-place="2"] { --pql-c: #3498DB; }
#qa-content.responses-design.lrd-popQuiz .pql-bar[data-place="3"] { --pql-c: #F39C12; }
#qa-content.responses-design.lrd-popQuiz .pql-bar[data-place="4"] { --pql-c: #9B59B6; }
#qa-content.responses-design.lrd-popQuiz .pql-bar[data-place="5"] { --pql-c: #1ABC9C; }
#qa-content.responses-design.lrd-popQuiz .pql-bar[data-place="6"] { --pql-c: #E84393; }
#qa-content.responses-design.lrd-popQuiz .pql-bar[data-place="7"] { --pql-c: #A3CB38; }

/* ── The prompt on the ink banner ── */
#qa-content.responses-design.lrd-popQuiz .qa-title {
    flex: 0 0 auto;
    margin: 0 6px 18px 0; padding: 10px 16px 14px;
    background: var(--pql-ink); color: var(--pql-cream);
    border-radius: 18px; box-shadow: 6px 6px 0 var(--pql-yellow);
    transform: rotate(-1.5deg);
    text-align: center;
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400;
    font-size: 25px; line-height: 1.12; overflow-wrap: anywhere;
    animation: pqlDrop 0.5s var(--pql-spring) both;
}
#qa-content.responses-design.lrd-popQuiz .qa-title .pql-long { font-size: 20px; }

/* The classic page's own messages stay out of the design's way. */
#qa-content.responses-design.lrd-popQuiz .qa-submitted-msg { display: none !important; }
#qa-content.responses-design.lrd-popQuiz .qa-profanity-error.show {
    flex: 0 0 auto; margin: 0 6px 12px 0;
    background: var(--pql-red); color: var(--pql-ink);
    border: 3px solid var(--pql-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--pql-ink);
    font-size: 15px;
}

/* ── The form: the response box and Submit Response ── */
#qa-content.responses-design.lrd-popQuiz .qa-submit-form {
    flex: 0 0 auto;
    margin: 0 6px 16px 0; padding: 0;
    background: none; border-radius: 0;
    animation: pqlSlide 0.5s 0.15s var(--pql-spring) both;
}
#qa-content.responses-design.lrd-popQuiz .qa-submit-form textarea {
    display: block; width: 100%; height: 104px; min-height: 0; resize: none;
    padding: 12px 14px; box-sizing: border-box;
    background: var(--pql-cream); color: var(--pql-ink);
    border: 4px solid var(--pql-ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--pql-ink);
    font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 17px; line-height: 1.3;
    caret-color: var(--pql-ink);
}
#qa-content.responses-design.lrd-popQuiz .qa-submit-form textarea::placeholder { color: #8C8577; font-weight: 500; }
#qa-content.responses-design.lrd-popQuiz .qa-submit-form textarea:focus {
    outline: none; border-color: var(--pql-ink); box-shadow: 5px 5px 0 var(--pql-yellow);
}
#qa-content.responses-design.lrd-popQuiz .qa-submit-btn {
    display: block; width: 100%; height: 58px; margin-top: 14px; padding: 0 12px;
    box-sizing: border-box;
    background: var(--pql-yellow); color: var(--pql-ink);
    border: 4px solid var(--pql-ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--pql-ink);
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 24px; line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: transform 0.08s, box-shadow 0.08s;
    -webkit-tap-highlight-color: transparent;
}
#qa-content.responses-design.lrd-popQuiz .qa-submit-btn:active:not(:disabled) {
    transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--pql-ink);
}
/* Submitting…: the button goes pale, still opaque. */
#qa-content.responses-design.lrd-popQuiz .qa-submit-btn:disabled { opacity: 1; background: #E9DFCB; }

/* ── Paused: a red stamp in the form's place ── */
#qa-content.responses-design.lrd-popQuiz .qa-paused-banner.show {
    flex: 0 0 auto;
    display: grid; grid-template-columns: 62px 1fr; column-gap: 14px; row-gap: 5px; align-items: center;
    margin: 8px 2px 18px -4px; padding: 14px 16px 16px 14px;
    background: var(--pql-red); color: var(--pql-ink);
    border: 4px solid var(--pql-ink); border-radius: 20px; box-shadow: 7px 7px 0 var(--pql-ink);
    text-align: left; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
    font-size: 16.5px; line-height: 1.2;
    transform: rotate(-3deg);
    animation: pqlStamp 0.45s 0.1s var(--pql-slam) both, pqlAppear 0.1s steps(1) backwards;
}
#qa-content.responses-design.lrd-popQuiz .qa-paused-banner.show::before {
    content: ''; grid-column: 1; grid-row: 1 / span 2;
    width: 62px; height: 62px; box-sizing: border-box; border-radius: 50%;
    border: 4px solid var(--pql-ink);
    background:
        linear-gradient(var(--pql-ink), var(--pql-ink)) no-repeat calc(50% - 8px) 50% / 9px 24px,
        linear-gradient(var(--pql-ink), var(--pql-ink)) no-repeat calc(50% + 8px) 50% / 9px 24px,
        var(--pql-cream);
}
#qa-content.responses-design.lrd-popQuiz .qa-paused-banner.show::after {
    content: 'Paused'; grid-column: 2; grid-row: 1; order: -1;
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 34px; line-height: 1;
}
#qa-content.responses-design.lrd-popQuiz .qa-paused-banner.show > * { grid-column: 2; grid-row: 2; }

/* ── My Submissions ── */
#qa-content.responses-design.lrd-popQuiz #qa-my-questions { flex: 0 0 auto; margin-right: 6px; }
#qa-content.responses-design.lrd-popQuiz #qa-my-questions:empty { display: none; }
#qa-content.responses-design.lrd-popQuiz .qa-section-header {
    margin: 0 0 9px 2px; color: var(--pql-muted);
    font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
    font-size: 13.5px; letter-spacing: 1.2px; text-transform: uppercase;
}
#qa-content.responses-design.lrd-popQuiz .qa-section-header .chevron { font-size: 10px; }
#qa-content.responses-design.lrd-popQuiz .qa-my-questions-list { max-height: 168px; overflow-y: auto; padding: 0 4px 6px 0; }
#qa-content.responses-design.lrd-popQuiz .qa-my-questions-list.collapsed { max-height: 0 !important; opacity: 1; padding: 0; }
#qa-content.responses-design.lrd-popQuiz #qa-my-questions .qa-question-card {
    display: flex; align-items: center; gap: 10px;
    min-height: 74px; margin: 0 0 10px; padding: 8px 12px 8px 14px; box-sizing: border-box;
    background: var(--pql-cream); color: var(--pql-ink);
    border: 3px solid var(--pql-ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--pql-ink);
    animation: pqlPop 0.45s var(--pql-spring) both;
}
#qa-content.responses-design.lrd-popQuiz .pql-mine-text {
    flex: 1 1 auto; min-width: 0;
    font-size: 15.5px; line-height: 1.2; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#qa-content.responses-design.lrd-popQuiz .pql-mine-meta {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
#qa-content.responses-design.lrd-popQuiz .pql-badge {
    padding: 3px 10px 4px; border: 2.5px solid var(--pql-ink); border-radius: 9px;
    background: var(--pql-yellow); color: var(--pql-ink);
    font-size: 13px; line-height: 1.1; white-space: nowrap;
    transform: rotate(-4deg);
    animation: pqlBadge 0.4s var(--pql-spring) both;
}
#qa-content.responses-design.lrd-popQuiz .pql-badge.pql-approved { background: var(--pql-green); }
#qa-content.responses-design.lrd-popQuiz .pql-badge.pql-answered { background: #5EEAD4; }
#qa-content.responses-design.lrd-popQuiz .pql-mine-votes {
    color: #5E584C; font-size: 12.5px; line-height: 1; white-space: nowrap;
}

/* ── The list: Most Voted / Most Recent, then the responses ── */
#qa-content.responses-design.lrd-popQuiz #qa-approved-questions {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 -10px -6px -4px; padding: 0 10px 10px 4px;
}
#qa-content.responses-design.lrd-popQuiz .qa-sort-bar {
    position: sticky; top: 0; z-index: 2;
    display: flex; height: 40px; margin: 0 6px 12px 0; box-sizing: border-box;
    background: #2A2D40; border: 3px solid var(--pql-ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--pql-ink);
    overflow: hidden;
    animation: pqlPop 0.45s 0.1s var(--pql-spring) both;
}
#qa-content.responses-design.lrd-popQuiz .qa-sort-btn {
    flex: 1; padding: 0; background: transparent; color: var(--pql-muted);
    font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 15px;
}
#qa-content.responses-design.lrd-popQuiz .qa-sort-btn:first-child { border-right: 3px solid var(--pql-ink); }
#qa-content.responses-design.lrd-popQuiz .qa-sort-btn.active { background: var(--pql-yellow); color: var(--pql-ink); }

#qa-content.responses-design.lrd-popQuiz #qa-approved-questions .qa-question-card {
    display: flex; align-items: center; gap: 10px;
    min-height: 66px; margin: 0 6px 9px 0; padding: 6px 12px 6px 8px; box-sizing: border-box;
    background: var(--pql-cream); color: var(--pql-ink);
    border: 3px solid var(--pql-ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--pql-ink);
    opacity: 1;
}
#qa-content.responses-design.lrd-popQuiz #qa-approved-questions .qa-question-card:nth-of-type(odd) { transform: rotate(-0.5deg); }
#qa-content.responses-design.lrd-popQuiz #qa-approved-questions .qa-question-card:nth-of-type(even) { transform: rotate(0.6deg); }
#qa-content.responses-design.lrd-popQuiz #qa-approved-questions .qa-question-card.entering {
    animation: pqlRowIn 0.45s var(--pql-spring) both;
}
/* The vote pill: the host's emoji and the count. */
#qa-content.responses-design.lrd-popQuiz .qa-vote-btn {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 4px;
    min-width: 70px; height: 44px; padding: 0 8px; box-sizing: border-box;
    background: var(--pql-cream); color: var(--pql-ink);
    border: 3px solid var(--pql-ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--pql-ink);
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 19px; line-height: 1;
    transition: transform 0.08s, box-shadow 0.08s;
}
#qa-content.responses-design.lrd-popQuiz .qa-vote-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--pql-ink); background: var(--pql-cream); }
#qa-content.responses-design.lrd-popQuiz .qa-vote-btn.voted { background: var(--pql-yellow); border-color: var(--pql-ink); }
#qa-content.responses-design.lrd-popQuiz .qa-response-emoji {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif;
    font-size: 19px; line-height: 1;
}
#qa-content.responses-design.lrd-popQuiz .qa-response-votes { display: inline-flex; justify-content: flex-end; }
#qa-content.responses-design.lrd-popQuiz .qa-response-votes i { display: inline-block; width: 0.64em; text-align: center; font-style: normal; }
#qa-content.responses-design.lrd-popQuiz .qa-response-votes i.pql-sign { width: 0.5em; }
/* The count bumps when it changes (pop-quiz.js marks it). */
#qa-content.responses-design.lrd-popQuiz .qa-vote-btn.pql-bump { animation: pqlBump 0.32s var(--pql-spring); }
/* The text, after its colour bar. */
#qa-content.responses-design.lrd-popQuiz #qa-approved-questions .qa-question-text {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
    font-size: 15.5px; line-height: 1.2;
}
#qa-content.responses-design.lrd-popQuiz .pql-bar {
    flex: 0 0 auto; width: 6px; height: 34px; box-sizing: content-box; border-radius: 3px;
    background: var(--pql-c, #27AE60); border: 2px solid var(--pql-ink);
}
#qa-content.responses-design.lrd-popQuiz .pql-text {
    flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#qa-content.responses-design.lrd-popQuiz .qa-empty {
    padding: 34px 20px 0; text-align: center; color: var(--pql-caption);
    font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 18px; line-height: 25px;
    animation: pqlPop 0.4s 0.4s var(--pql-spring) both;
}

/* ── The submit toast: a stamp ── */
#toast.responses-design.lrd-popQuiz {
    --pql-ink: #14110D; --pql-cream: #FFF4E0;
    display: flex; align-items: center; gap: 12px;
    width: min(322px, calc(100vw - 48px)); max-width: none; padding: 12px 16px 14px 12px; box-sizing: border-box;
    background: #3DDC84; color: var(--pql-ink);
    border: 4px solid var(--pql-ink); border-radius: 20px; box-shadow: 7px 7px 0 var(--pql-ink);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    text-align: left; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
    opacity: 1; transform: translateX(-50%) rotate(2deg) scale(0);
}
#toast.responses-design.lrd-popQuiz::before { content: none; }
#toast.responses-design.lrd-popQuiz.error { background: #FF4D5E; }
#toast.responses-design.lrd-popQuiz.show { animation: pqlToastIn 0.42s cubic-bezier(0.2, 1.4, 0.5, 1) forwards; }
#toast.responses-design.lrd-popQuiz.hide { animation: pqlToastOut 0.25s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
#toast.responses-design.lrd-popQuiz .pql-toast-icon {
    flex: 0 0 auto; width: 56px; height: 56px; box-sizing: border-box; border-radius: 50%;
    background: var(--pql-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2314110D' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 32px 32px;
    border: 4px solid var(--pql-ink);
}
#toast.responses-design.lrd-popQuiz.error .pql-toast-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%2314110D' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
#toast.responses-design.lrd-popQuiz .pql-toast-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#toast.responses-design.lrd-popQuiz .pql-toast-head { font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 28px; line-height: 1; }
#toast.responses-design.lrd-popQuiz .pql-toast-sub { font-size: 16.5px; line-height: 1.2; }
#toast.responses-design.lrd-popQuiz.error .pql-toast-head { font-size: 22px; }

/* ── The ended screen: Waiting for next activity… ── */
#waiting-message.responses-design.lrd-popQuiz.lr-ended.show {
    display: flex; align-items: center; justify-content: center; padding: 22px 16px;
}
#waiting-message.responses-design.lrd-popQuiz.lr-ended .pql-wait {
    width: 100%; max-width: 318px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
    padding: 34px 22px 36px;
    background: var(--pql-cream); color: var(--pql-ink);
    border: 4px solid var(--pql-ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--pql-ink);
    transform: rotate(-2deg);
    animation: pqlSlideIn 0.55s var(--pql-spring) both;
}
#waiting-message.responses-design.lrd-popQuiz.lr-ended .pql-wait-head {
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 31px; line-height: 1.12; text-align: center;
}
#waiting-message.responses-design.lrd-popQuiz.lr-ended .pql-dots { display: flex; gap: 14px; height: 40px; align-items: flex-end; }
#waiting-message.responses-design.lrd-popQuiz.lr-ended .pql-dots i {
    width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
    border: 3px solid var(--pql-ink); background: #27AE60;
    animation: pqlHop 1.2s ease-in-out infinite;
}
#waiting-message.responses-design.lrd-popQuiz.lr-ended .pql-dots i:nth-child(2) { background: #E74C3C; animation-delay: 0.2s; }
#waiting-message.responses-design.lrd-popQuiz.lr-ended .pql-dots i:nth-child(3) { background: #3498DB; animation-delay: 0.4s; }

@keyframes pqlDrop { from { transform: translateY(-120px) rotate(-6deg); } to { transform: rotate(-1.5deg); } }
@keyframes pqlSlide { from { transform: translateX(374px) rotate(8deg); } }
@keyframes pqlSlideIn { from { transform: translateX(380px) rotate(12deg); } to { transform: rotate(-2deg); } }
@keyframes pqlPop { from { transform: scale(0); } }
@keyframes pqlRowIn { from { transform: rotate(12deg) scale(0); } }
@keyframes pqlBadge { from { transform: rotate(6deg) scale(0); } to { transform: rotate(-4deg) scale(1); } }
@keyframes pqlBump { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes pqlStamp { from { transform: rotate(-13deg) scale(1.8); } to { transform: rotate(-3deg) scale(1); } }
@keyframes pqlAppear { from, to { visibility: hidden; } }
@keyframes pqlToastIn {
    from { transform: translateX(-50%) rotate(-8deg) scale(1.8); }
    to { transform: translateX(-50%) rotate(2deg) scale(1); }
}
@keyframes pqlToastOut {
    from { transform: translateX(-50%) rotate(2deg) scale(1); }
    to { transform: translateX(-50%) rotate(2deg) scale(0); }
}
@keyframes pqlHop { 0%, 60%, 100% { transform: translateY(0); } 15% { transform: translateY(-16px); } 30% { transform: translateY(-16px); } 45% { transform: translateY(0); } }

/* ── Shorter phones ── */
@media (max-height: 740px) {
    #qa-content.responses-design.lrd-popQuiz { padding: 16px 14px 14px; }
    #qa-content.responses-design.lrd-popQuiz .qa-title { font-size: 21px; margin-bottom: 14px; padding: 8px 14px 11px; }
    #qa-content.responses-design.lrd-popQuiz .qa-title .pql-long { font-size: 17px; }
    #qa-content.responses-design.lrd-popQuiz .qa-submit-form { margin-bottom: 12px; }
    #qa-content.responses-design.lrd-popQuiz .qa-submit-form textarea { height: 76px; font-size: 16px; padding: 9px 12px; }
    #qa-content.responses-design.lrd-popQuiz .qa-submit-btn { height: 50px; margin-top: 10px; font-size: 21px; }
    #qa-content.responses-design.lrd-popQuiz .qa-paused-banner.show { grid-template-columns: 52px 1fr; padding: 10px 12px 12px 10px; font-size: 15px; margin-bottom: 14px; }
    #qa-content.responses-design.lrd-popQuiz .qa-paused-banner.show::before { width: 52px; height: 52px; }
    #qa-content.responses-design.lrd-popQuiz .qa-paused-banner.show::after { font-size: 28px; }
    #qa-content.responses-design.lrd-popQuiz .qa-my-questions-list { max-height: 128px; }
    #qa-content.responses-design.lrd-popQuiz #qa-my-questions .qa-question-card { min-height: 62px; }
    #qa-content.responses-design.lrd-popQuiz #qa-approved-questions .qa-question-card { min-height: 58px; margin-bottom: 8px; }
    #qa-content.responses-design.lrd-popQuiz .qa-vote-btn { height: 40px; min-width: 64px; }
    #qa-content.responses-design.lrd-popQuiz #qa-approved-questions .qa-question-text { font-size: 14.5px; }
    #toast.responses-design.lrd-popQuiz .pql-toast-head { font-size: 24px; }
    #waiting-message.responses-design.lrd-popQuiz.lr-ended .pql-wait-head { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
    #qa-content.responses-design.lrd-popQuiz *, #qa-content.responses-design.lrd-popQuiz *::before,
    #qa-content.responses-design.lrd-popQuiz *::after, #waiting-message.responses-design.lrd-popQuiz.lr-ended * {
        animation: none !important; transition: none !important;
    }
    #toast.responses-design.lrd-popQuiz.show { animation: none; transform: translateX(-50%) rotate(2deg); }
    #toast.responses-design.lrd-popQuiz.hide { animation: none; transform: translateX(-50%) scale(0); }
    #qa-content.responses-design.lrd-popQuiz .qa-paused-banner.show { visibility: visible; }
}