/* Live Polls · Pop Quiz phone skin (owner decision 2026-10-06), from the
   canvas boards PR-Polls-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
   #poll-content.poll-design.pld-popQuiz or
   #voted-message.poll-design.pld-popQuiz, so no other screen or feature is
   touched; the classic screens (no .poll-design) never match.

   /poll-designs/pop-quiz.js letters each option (optionHTML), draws the
   pick on "Vote counted!" (votedPickHTML), and marks which entrances play
   (.pqp-enter: only when a poll arrives, never on a snapshot that only
   re-renders the same screen).

   The Stop: the paused stamp slams on 0.05 s after it shows, over 0.45 s
   (PollsPopQuizDesign.phoneStopEntrance, 0.5 s; the tests read it). The Mac
   holds it for the display's WINNER beat less that (stopDelayMs), so it
   lands with the projector.

   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 panels: the stage, dotted ── */
#poll-content.poll-design.pld-popQuiz,
#voted-message.poll-design.pld-popQuiz {
    --pqp-ink: #14110D; --pqp-cream: #FFF4E0; --pqp-yellow: #FFD23F;
    --pqp-green: #3DDC84; --pqp-red: #FF4D5E; --pqp-caption: #D3CDC2;
    --pqp-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --pqp-slam: cubic-bezier(0.2, 1.4, 0.5, 1);
    position: relative;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    color: var(--pqp-cream);
    text-align: center;
    margin: -8px -4px 0;
    padding: 24px 16px 22px;
    /* The panel fills the phone between the page's margins (732 on a
       390×844 phone, as on the board). */
    min-height: calc(100vh - 112px);
    min-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;
}
/* The vote screen stacks: the tag, the question, the options, the status,
   and the paused stamp at the foot (index.html shows the panel with an
   inline display: block, which this keeps). */
#poll-content.poll-design.pld-popQuiz[style*="block"] {
    display: flex !important; flex-direction: column; align-items: stretch;
}

/* The options' colours by place (the host's are ignored), and each 55%
   toward the stage once the host stops the vote. */
#poll-content.poll-design.pld-popQuiz .option-btn[data-index="0"], #voted-message.poll-design.pld-popQuiz .pqp-pick[data-index="0"] { --pqp-c: #27AE60; --pqp-d: #195D4D; }
#poll-content.poll-design.pld-popQuiz .option-btn[data-index="1"], #voted-message.poll-design.pld-popQuiz .pqp-pick[data-index="1"] { --pqp-c: #E74C3C; --pqp-d: #6F313D; }
#poll-content.poll-design.pld-popQuiz .option-btn[data-index="2"], #voted-message.poll-design.pld-popQuiz .pqp-pick[data-index="2"] { --pqp-c: #3498DB; --pqp-d: #1F5385; }
#poll-content.poll-design.pld-popQuiz .option-btn[data-index="3"], #voted-message.poll-design.pld-popQuiz .pqp-pick[data-index="3"] { --pqp-c: #F39C12; --pqp-d: #74552A; }
#poll-content.poll-design.pld-popQuiz .option-btn[data-index="4"], #voted-message.poll-design.pld-popQuiz .pqp-pick[data-index="4"] { --pqp-c: #9B59B6; --pqp-d: #4D3774; }
#poll-content.poll-design.pld-popQuiz .option-btn[data-index="5"], #voted-message.poll-design.pld-popQuiz .pqp-pick[data-index="5"] { --pqp-c: #1ABC9C; --pqp-d: #136368; }
#poll-content.poll-design.pld-popQuiz .option-btn[data-index="6"], #voted-message.poll-design.pld-popQuiz .pqp-pick[data-index="6"] { --pqp-c: #E84393; --pqp-d: #702D64; }
#poll-content.poll-design.pld-popQuiz .option-btn[data-index="7"], #voted-message.poll-design.pld-popQuiz .pqp-pick[data-index="7"] { --pqp-c: #A3CB38; --pqp-d: #506A3B; }

/* ── The "Live Poll" tag: the leaderboard's ink banner ── */
#poll-content.poll-design.pld-popQuiz::before,
#voted-message.poll-design.pld-popQuiz::before {
    content: 'Live Poll';
    order: 0; align-self: center;
    display: table; margin: 0 auto 20px;
    padding: 6px 22px 11px;
    background: var(--pqp-ink); color: var(--pqp-cream);
    border-radius: 16px; box-shadow: 6px 6px 0 var(--pqp-yellow);
    transform: rotate(-2deg);
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400;
    font-size: 28px; line-height: 1.1; white-space: nowrap;
}

/* ── The question on a cream sticker ── */
#poll-content.poll-design.pld-popQuiz .question {
    order: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 112px; margin: 0 6px 22px 0; padding: 10px 16px;
    box-sizing: border-box;
    background: var(--pqp-cream); color: var(--pqp-ink);
    border: 4px solid var(--pqp-ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--pqp-ink);
    font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
    font-size: 23px; line-height: 1.2; overflow-wrap: anywhere;
}
#poll-content.poll-design.pld-popQuiz .question.pqp-long { font-size: 19px; }

/* ── The options: answer-tile stickers with their letters ── */
#poll-content.poll-design.pld-popQuiz .options {
    order: 2; gap: 10px; margin: 0 6px 0 0;
}
#poll-content.poll-design.pld-popQuiz .option-btn {
    display: flex; align-items: center; gap: 14px;
    width: 100%; min-height: 84px; padding: 6px 14px 6px 12px;
    box-sizing: border-box; text-align: left;
    background: var(--pqp-c, #27AE60);
    border: 4px solid var(--pqp-ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--pqp-ink);
    color: #fff; text-shadow: 2px 2px 0 var(--pqp-ink);
    font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
    font-size: 22px; line-height: 1.1; overflow-wrap: anywhere;
    opacity: 1;
    transition: transform 0.12s, box-shadow 0.12s;
}
#poll-content.poll-design.pld-popQuiz .option-btn .pqp-letter {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--pqp-ink); color: #fff; text-shadow: none;
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 23px; line-height: 1;
}
#poll-content.poll-design.pld-popQuiz .option-btn .pqp-text { flex: 1 1 auto; min-width: 0; }
#poll-content.poll-design.pld-popQuiz .option-btn.pqp-long { font-size: 18px; }
#poll-content.poll-design.pld-popQuiz .option-btn:active:not(:disabled) {
    transform: translate(5px, 5px); box-shadow: 1px 1px 0 var(--pqp-ink);
}
#poll-content.poll-design.pld-popQuiz .option-btn:disabled { opacity: 1; cursor: default; transform: none; }
/* Stopped: the buttons dim toward the stage and sit into their shadows. */
#poll-content.poll-design.pld-popQuiz .stopped-banner.show ~ .options .option-btn {
    background: var(--pqp-d, #195D4D);
    box-shadow: 3px 3px 0 var(--pqp-ink); transform: translate(3px, 3px);
    animation: pqpDim 0.25s ease both;
}

/* ── The status line ── */
#poll-content.poll-design.pld-popQuiz .status {
    order: 3; margin: auto 0 0; padding: 22px 6px 0;
    color: var(--pqp-caption);
    font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 19.2px; line-height: 25px;
}
#poll-content.poll-design.pld-popQuiz .status:empty { display: none; }

/* ── Paused: a red stamp at the foot (it lands on the display's beat) ── */
#poll-content.poll-design.pld-popQuiz .stopped-banner.show {
    order: 4;
    display: grid; grid-template-columns: 62px 1fr; column-gap: 14px; row-gap: 5px; align-items: center;
    margin: auto -4px 0 -4px; padding: 14px 16px 16px 14px;
    background: var(--pqp-red); color: var(--pqp-ink);
    border: 4px solid var(--pqp-ink); border-radius: 20px; box-shadow: 7px 7px 0 var(--pqp-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(-4deg);
    animation: pqpStamp 0.45s 0.05s var(--pqp-slam) both, pqpAppear 0.01s 0.05s steps(1) both;
}
#poll-content.poll-design.pld-popQuiz .stopped-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(--pqp-ink);
    background:
        linear-gradient(var(--pqp-ink), var(--pqp-ink)) no-repeat calc(50% - 8px) 50% / 9px 24px,
        linear-gradient(var(--pqp-ink), var(--pqp-ink)) no-repeat calc(50% + 8px) 50% / 9px 24px,
        var(--pqp-cream);
}
#poll-content.poll-design.pld-popQuiz .stopped-banner.show::after {
    content: 'Paused'; grid-column: 2; grid-row: 1;
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 34px; line-height: 1;
}

/* ── Vote counted! ── */
#voted-message.poll-design.pld-popQuiz.show { display: block; }
#voted-message.poll-design.pld-popQuiz .checkmark {
    position: relative; width: 240px; height: 240px; margin: 8px auto 28px;
    font-size: 0; color: transparent;
}
#voted-message.poll-design.pld-popQuiz .checkmark::before,
#voted-message.poll-design.pld-popQuiz .checkmark::after {
    content: ''; position: absolute; inset: 0;
    clip-path: polygon(50.00% 0.00%, 55.35% 9.35%, 62.94% 1.70%, 65.69% 12.12%, 75.00% 6.70%, 74.96% 17.47%, 85.36% 14.64%, 82.53% 25.04%, 93.30% 25.00%, 87.88% 34.31%, 98.30% 37.06%, 90.65% 44.65%, 100.00% 50.00%, 90.65% 55.35%, 98.30% 62.94%, 87.88% 65.69%, 93.30% 75.00%, 82.53% 74.96%, 85.36% 85.36%, 74.96% 82.53%, 75.00% 93.30%, 65.69% 87.88%, 62.94% 98.30%, 55.35% 90.65%, 50.00% 100.00%, 44.65% 90.65%, 37.06% 98.30%, 34.31% 87.88%, 25.00% 93.30%, 25.04% 82.53%, 14.64% 85.36%, 17.47% 74.96%, 6.70% 75.00%, 12.12% 65.69%, 1.70% 62.94%, 9.35% 55.35%, 0.00% 50.00%, 9.35% 44.65%, 1.70% 37.06%, 12.12% 34.31%, 6.70% 25.00%, 17.47% 25.04%, 14.64% 14.64%, 25.04% 17.47%, 25.00% 6.70%, 34.31% 12.12%, 37.06% 1.70%, 44.65% 9.35%);
}
#voted-message.poll-design.pld-popQuiz .checkmark::before { background: var(--pqp-ink); transform: translate(7px, 7px); }
#voted-message.poll-design.pld-popQuiz .checkmark::after {
    background: var(--pqp-green) 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.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 112px 112px;
}
#voted-message.poll-design.pld-popQuiz h2 {
    margin: 0 0 26px; color: var(--pqp-cream);
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 40px; line-height: 1.1;
    text-shadow: 4px 4px 0 var(--pqp-ink); white-space: nowrap;
    transform: rotate(-3deg);
}
/* The pick: its letter and text on a pill in its colour. */
#voted-message.poll-design.pld-popQuiz .voted-pick:not(:empty) {
    display: flex; justify-content: center; margin: 0 0 30px;
}
#voted-message.poll-design.pld-popQuiz .pqp-pick {
    display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
    padding: 7px 24px 7px 7px; box-sizing: border-box;
    background: var(--pqp-c, #27AE60); color: #fff;
    border: 4px solid var(--pqp-ink); border-radius: 999px; box-shadow: 5px 5px 0 var(--pqp-ink);
    font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 21px; line-height: 1.1;
    text-shadow: 2px 2px 0 var(--pqp-ink); text-align: left; overflow-wrap: anywhere;
    transform: rotate(2deg);
}
#voted-message.poll-design.pld-popQuiz .pqp-pick .pqp-letter {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--pqp-ink); color: #fff; text-shadow: none;
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 20px; line-height: 1;
}
#voted-message.poll-design.pld-popQuiz p {
    color: var(--pqp-caption); opacity: 1;
    font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 19.2px; line-height: 25px;
}

/* ── Entrances ──
   The vote screen's only when a poll arrives (.pqp-enter, set by
   pop-quiz.js); "Vote counted!" each time it shows. */
#poll-content.poll-design.pld-popQuiz.pqp-enter::before { animation: pqpDrop 0.5s var(--pqp-spring) both; }
#poll-content.poll-design.pld-popQuiz.pqp-enter .question { animation: pqpDropPop 0.5s 0.3s var(--pqp-spring) both; }
#poll-content.poll-design.pld-popQuiz.pqp-enter .option-btn { animation: pqpDeal 0.5s 0.55s var(--pqp-spring) both; }
#poll-content.poll-design.pld-popQuiz.pqp-enter .option-btn:nth-child(2) { animation-delay: 0.64s; }
#poll-content.poll-design.pld-popQuiz.pqp-enter .option-btn:nth-child(3) { animation-delay: 0.73s; }
#poll-content.poll-design.pld-popQuiz.pqp-enter .option-btn:nth-child(4) { animation-delay: 0.82s; }
#poll-content.poll-design.pld-popQuiz.pqp-enter .option-btn:nth-child(5) { animation-delay: 0.91s; }
#poll-content.poll-design.pld-popQuiz.pqp-enter .option-btn:nth-child(6) { animation-delay: 1s; }
#poll-content.poll-design.pld-popQuiz.pqp-enter .option-btn:nth-child(7) { animation-delay: 1.09s; }
#poll-content.poll-design.pld-popQuiz.pqp-enter .option-btn:nth-child(8) { animation-delay: 1.18s; }
#poll-content.poll-design.pld-popQuiz.pqp-enter .status { animation: pqpPop 0.4s 0.9s var(--pqp-spring) both; }
#voted-message.poll-design.pld-popQuiz.show::before { animation: pqpDrop 0.5s var(--pqp-spring) both; }
#voted-message.poll-design.pld-popQuiz.show .checkmark { animation: pqpSpin 0.55s var(--pqp-spring) both; }
#voted-message.poll-design.pld-popQuiz.show h2 { animation: pqpStampHead 0.4s 0.35s var(--pqp-slam) both, pqpAppear 0.01s 0.35s steps(1) both; }
#voted-message.poll-design.pld-popQuiz.show .voted-pick { animation: pqpPopPick 0.45s 0.6s var(--pqp-spring) both; }
#voted-message.poll-design.pld-popQuiz.show p { animation: pqpPop 0.4s 0.8s var(--pqp-spring) both; }

@keyframes pqpDrop { from { transform: translateY(-120px) rotate(-6deg); } to { transform: rotate(-2deg); } }
@keyframes pqpDropPop { from { transform: translateY(-60px) rotate(-12deg) scale(0); } }
@keyframes pqpDeal { from { transform: translateX(374px) rotate(8deg); } }
@keyframes pqpPop { from { transform: scale(0); } }
@keyframes pqpPopPick { from { transform: rotate(12deg) scale(0); } }
@keyframes pqpSpin { from { transform: rotate(-186deg) scale(0); } to { transform: rotate(-6deg) scale(1); } }
@keyframes pqpStamp { from { transform: rotate(-14deg) scale(1.8); } to { transform: rotate(-4deg) scale(1); } }
@keyframes pqpStampHead { from { transform: rotate(-10deg) scale(1.8); } to { transform: rotate(-3deg) scale(1); } }
@keyframes pqpAppear { from { visibility: hidden; } to { visibility: visible; } }
@keyframes pqpDim { from { background: var(--pqp-c); box-shadow: 6px 6px 0 var(--pqp-ink); transform: none; } }

/* ── More options: everything still fits one screen ── */
#poll-content.poll-design.pld-popQuiz .options:has(> :nth-child(5)) { gap: 8px; }
#poll-content.poll-design.pld-popQuiz .options:has(> :nth-child(5)) .option-btn { min-height: 62px; font-size: 20px; }
#poll-content.poll-design.pld-popQuiz .options:has(> :nth-child(7)) .option-btn { min-height: 52px; font-size: 18px; padding: 4px 12px 4px 8px; }
#poll-content.poll-design.pld-popQuiz .options:has(> :nth-child(7)) .pqp-letter { width: 38px; height: 38px; font-size: 19px; }
#poll-content.poll-design.pld-popQuiz .options:has(> :nth-child(7)) { gap: 6px; }
#poll-content.poll-design.pld-popQuiz .options:has(> :nth-child(7)) .option-btn { min-height: 46px; }
#poll-content.poll-design.pld-popQuiz:has(.options > :nth-child(5)) .question { min-height: 88px; margin-bottom: 18px; }
#poll-content.poll-design.pld-popQuiz:has(.options > :nth-child(5)) .question.pqp-long { font-size: 17px; }
/* A compact stamp under five or more options. */
#poll-content.poll-design.pld-popQuiz:has(.options > :nth-child(5)) .stopped-banner.show {
    grid-template-columns: 42px 1fr; column-gap: 10px; row-gap: 2px; padding: 8px 12px 10px 10px; font-size: 14px;
}
#poll-content.poll-design.pld-popQuiz:has(.options > :nth-child(5)) .stopped-banner.show::before {
    width: 42px; height: 42px; border-width: 3px;
    background:
        linear-gradient(var(--pqp-ink), var(--pqp-ink)) no-repeat calc(50% - 5px) 50% / 6px 16px,
        linear-gradient(var(--pqp-ink), var(--pqp-ink)) no-repeat calc(50% + 5px) 50% / 6px 16px,
        var(--pqp-cream);
}
#poll-content.poll-design.pld-popQuiz:has(.options > :nth-child(5)) .stopped-banner.show::after { font-size: 24px; }

/* ── Shorter phones ── */
@media (max-height: 740px) {
    #poll-content.poll-design.pld-popQuiz,
    #voted-message.poll-design.pld-popQuiz { padding: 18px 14px 16px; }
    #poll-content.poll-design.pld-popQuiz::before,
    #voted-message.poll-design.pld-popQuiz::before { font-size: 24px; margin-bottom: 14px; }
    #poll-content.poll-design.pld-popQuiz .question { min-height: 84px; margin-bottom: 16px; font-size: 20px; }
    #poll-content.poll-design.pld-popQuiz .question.pqp-long { font-size: 17px; }
    #poll-content.poll-design.pld-popQuiz .options { gap: 8px; }
    #poll-content.poll-design.pld-popQuiz .option-btn { min-height: 64px; font-size: 20px; }
    #poll-content.poll-design.pld-popQuiz .option-btn.pqp-long { font-size: 16px; }
    #poll-content.poll-design.pld-popQuiz .options:has(> :nth-child(5)) { gap: 6px; }
    #poll-content.poll-design.pld-popQuiz .options:has(> :nth-child(5)) .option-btn { min-height: 46px; font-size: 17px; padding: 3px 10px 3px 6px; }
    #poll-content.poll-design.pld-popQuiz .options:has(> :nth-child(5)) .pqp-letter { width: 34px; height: 34px; font-size: 17px; }
    #poll-content.poll-design.pld-popQuiz .options:has(> :nth-child(7)) { gap: 5px; }
    #poll-content.poll-design.pld-popQuiz .options:has(> :nth-child(7)) .option-btn { min-height: 36px; font-size: 14px; border-width: 3px; box-shadow: 4px 4px 0 var(--pqp-ink); }
    #poll-content.poll-design.pld-popQuiz:has(.options > :nth-child(7)) .question { font-size: 15px; min-height: 52px; }
    #poll-content.poll-design.pld-popQuiz:has(.options > :nth-child(7)) .question.pqp-long { font-size: 14px; }
    #poll-content.poll-design.pld-popQuiz .options:has(> :nth-child(7)) .pqp-letter { width: 30px; height: 30px; font-size: 15px; }
    #poll-content.poll-design.pld-popQuiz:has(.options > :nth-child(5)) .question { min-height: 60px; margin-bottom: 12px; font-size: 17px; padding: 6px 12px; }
    #poll-content.poll-design.pld-popQuiz .status { padding-top: 12px; font-size: 17px; line-height: 22px; }
    #poll-content.poll-design.pld-popQuiz:not(:has(.options > :nth-child(5))) .stopped-banner.show { padding: 10px 12px 12px 10px; grid-template-columns: 52px 1fr; }
    #poll-content.poll-design.pld-popQuiz:not(:has(.options > :nth-child(5))) .stopped-banner.show::before { width: 52px; height: 52px; }
    #poll-content.poll-design.pld-popQuiz:not(:has(.options > :nth-child(5))) .stopped-banner.show::after { font-size: 28px; }
    #voted-message.poll-design.pld-popQuiz .checkmark { width: 190px; height: 190px; margin: 0 auto 20px; }
    #voted-message.poll-design.pld-popQuiz .checkmark::after { background-size: 88px 88px; }
    #voted-message.poll-design.pld-popQuiz h2 { font-size: 34px; margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    #poll-content.poll-design.pld-popQuiz *, #poll-content.poll-design.pld-popQuiz::before,
    #poll-content.poll-design.pld-popQuiz *::before, #poll-content.poll-design.pld-popQuiz *::after,
    #voted-message.poll-design.pld-popQuiz *, #voted-message.poll-design.pld-popQuiz::before {
        animation: none !important; transition: none !important;
    }
    /* The stamp still lands (no movement, just there). */
    #poll-content.poll-design.pld-popQuiz .stopped-banner.show { visibility: visible; }
}