/* Would You Rather · Pop Quiz phone skin (owner decision 2026-10-06), from
   the canvas boards WYR-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
   #wyr-content.wyr-design.wyrd-popQuiz, so no other screen or feature is
   touched; the classic screens (no .wyr-design) never match.

   /wyr-designs/pop-quiz.js decorates the screens (pqw-* classes and data
   attributes): the timer's seconds and level, the result's split labels,
   bar peg and payoff, and which entrances play (only when the screen or
   question changes, never on a snapshot that only re-renders it).

   The faces are self-hosted (licences in /fonts/OFL-*.txt). The stage
   colour lives on this in-flow panel, 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'); }

#wyr-content.wyr-design.wyrd-popQuiz {
    --pqw-ink: #14110D; --pqw-cream: #FFF4E0; --pqw-yellow: #FFD23F;
    --pqw-green: #3DDC84; --pqw-red: #FF4D5E;
    /* The two sides, and each 50% toward the stage once the other is picked. */
    --pqw-a: #3498DB; --pqw-b: #E74C3C;
    --pqw-a-dim: #215A8D; --pqw-b-dim: #7A343D;
    --pqw-track: #1B2547; --pqw-caption: #D3CDC2;
    --pqw-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --pqw-slam: cubic-bezier(0.2, 1.4, 0.5, 1);
    --pqw-inout: cubic-bezier(0.65, 0, 0.35, 1);
    position: relative;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    color: var(--pqw-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;
}

/* ── Heading: the leaderboard's ink banner ── */
#wyr-content.wyr-design.wyrd-popQuiz #wyr-question {
    display: table; margin: 0 auto 18px;
    padding: 6px 20px 11px;
    background: var(--pqw-ink); color: var(--pqw-cream);
    border-radius: 16px; box-shadow: 6px 6px 0 var(--pqw-yellow);
    transform: rotate(-2deg);
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400;
    font-size: clamp(22px, calc(10vw - 9px), 30px); line-height: 1.1; white-space: nowrap;
}

/* ── Paused ── */
#wyr-content.wyr-design.wyrd-popQuiz .stopped-banner.show {
    display: table; margin: 0 auto 18px; padding: 8px 18px 10px;
    background: var(--pqw-yellow); color: var(--pqw-ink);
    border: 4px solid var(--pqw-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--pqw-ink);
    font-size: 16px; line-height: 1.2; transform: rotate(1.5deg);
}

/* ── Voting timer: the bar and the trivia clock's circle ── */
#wyr-content.wyr-design.wyrd-popQuiz #wyr-timer.show {
    display: flex; align-items: center; gap: 12px; margin: 0 0 32px; height: 58px;
}
#wyr-content.wyr-design.wyrd-popQuiz .vote-timer-bar {
    flex: 1; height: 18px; box-sizing: border-box;
    background: var(--pqw-cream); border: 3px solid var(--pqw-ink); border-radius: 999px; overflow: hidden;
}
#wyr-content.wyr-design.wyrd-popQuiz .vote-timer-fill {
    border-radius: 0; background-color: var(--pqw-green) !important; transition: width 0.1s linear;
}
#wyr-content.wyr-design.wyrd-popQuiz .vote-timer-text {
    flex: 0 0 auto; margin: 0; width: 58px; height: 58px; box-sizing: border-box; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--pqw-green); border: 4px solid var(--pqw-ink); box-shadow: 4px 4px 0 var(--pqw-ink);
    font-size: 0; color: transparent !important;
}
#wyr-content.wyr-design.wyrd-popQuiz .vote-timer-text::after {
    content: attr(data-pqw-secs);
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 25.6px; line-height: 1;
    color: var(--pqw-ink); font-variant-numeric: tabular-nums;
}
#wyr-content.wyr-design.wyrd-popQuiz .vote-timer-text[data-pqw-long]::after { font-size: 19px; }
#wyr-content.wyr-design.wyrd-popQuiz #wyr-timer[data-pqw-level="warn"] .vote-timer-text { background: var(--pqw-yellow); }
#wyr-content.wyr-design.wyrd-popQuiz #wyr-timer[data-pqw-level="warn"] .vote-timer-fill { background-color: var(--pqw-yellow) !important; }
#wyr-content.wyr-design.wyrd-popQuiz #wyr-timer[data-pqw-level="urgent"] .vote-timer-text { background: var(--pqw-red); }
#wyr-content.wyr-design.wyrd-popQuiz #wyr-timer[data-pqw-level="urgent"] .vote-timer-fill { background-color: var(--pqw-red) !important; }
#wyr-content.wyr-design.wyrd-popQuiz .vote-timer-text.pqw-tick { animation: pqwTick 0.3s ease; }

/* ── The two sides ── */
#wyr-content.wyr-design.wyrd-popQuiz .wyr-options {
    gap: 0; margin: 0 6px 40px 0;
}
#wyr-content.wyr-design.wyrd-popQuiz .wyr-option-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: clamp(104px, calc((100dvh - 452px) / 2), 168px);
    padding: 0 22px; box-sizing: border-box;
    border: 4px solid var(--pqw-ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--pqw-ink);
    color: #fff; text-shadow: 2px 2px 0 var(--pqw-ink);
    font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 27px; line-height: 1.12;
    overflow-wrap: anywhere;
    transition: transform 0.12s, box-shadow 0.12s, background-color 0.25s ease;
}
/* A long option (pop-quiz.js marks over 34 characters) steps its type down. */
#wyr-content.wyr-design.wyrd-popQuiz .wyr-option-btn.pqw-long { font-size: 22px; line-height: 1.1; }
#wyr-content.wyr-design.wyrd-popQuiz .wyr-option-btn.pqw-longer { font-size: 19px; line-height: 1.1; }
#wyr-content.wyr-design.wyrd-popQuiz .wyr-option-btn.wyr-a { background: var(--pqw-a); }
#wyr-content.wyr-design.wyrd-popQuiz .wyr-option-btn.wyr-b { background: var(--pqw-b); }
/* The pick sits down into its shadow; the other side dims and waits. */
#wyr-content.wyr-design.wyrd-popQuiz .wyr-option-btn.selected {
    border-color: var(--pqw-ink); box-shadow: 2px 2px 0 var(--pqw-ink);
    transform: translate(4px, 4px) rotate(-1.5deg);
}
#wyr-content.wyr-design.wyrd-popQuiz .wyr-options:has(.selected) .wyr-option-btn.wyr-a:not(.selected),
#wyr-content.wyr-design.wyrd-popQuiz .wyr-options.pqw-picked .wyr-option-btn.wyr-a:not(.selected) { background: var(--pqw-a-dim); }
#wyr-content.wyr-design.wyrd-popQuiz .wyr-options:has(.selected) .wyr-option-btn.wyr-b:not(.selected),
#wyr-content.wyr-design.wyrd-popQuiz .wyr-options.pqw-picked .wyr-option-btn.wyr-b:not(.selected) { background: var(--pqw-b-dim); }
#wyr-content.wyr-design.wyrd-popQuiz .wyr-option-btn:active:not(:disabled) {
    transform: translate(5px, 5px); box-shadow: 1px 1px 0 var(--pqw-ink);
}
/* Closed (time's up, paused, or a kept first pick): the sides stay in
   colour, only the status says why. */
#wyr-content.wyr-design.wyrd-popQuiz .wyr-option-btn:disabled { opacity: 1; cursor: default; }
#wyr-content.wyr-design.wyrd-popQuiz .wyr-option-btn:disabled:not(.selected) { transform: none; }
/* The pick's check, on a yellow burst at the corner (pop-quiz.js adds it). */
#wyr-content.wyr-design.wyrd-popQuiz .pqw-check {
    display: none; position: absolute; right: -16px; top: -24px; width: 74px; height: 74px;
    align-items: center; justify-content: center;
    background: var(--pqw-yellow);
    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%);
    transform: rotate(10deg); text-shadow: none;
}
#wyr-content.wyr-design.wyrd-popQuiz .pqw-check svg {
    width: 34px; height: 34px; fill: none; stroke: var(--pqw-ink); stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round;
}
#wyr-content.wyr-design.wyrd-popQuiz .wyr-option-btn.selected .pqw-check {
    display: flex; animation: pqwSpinCheck 0.45s var(--pqw-spring) both;
}

/* OR on a little yellow burst between the sides. */
#wyr-content.wyr-design.wyrd-popQuiz .wyr-or {
    width: 76px; height: 76px; margin: 7px auto 5px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pqw-yellow); color: var(--pqw-ink);
    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%);
    transform: rotate(-8deg);
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 28px; line-height: 1;
}

/* ── Status line ── */
#wyr-content.wyr-design.wyrd-popQuiz #wyr-status {
    margin: 0 14px; color: var(--pqw-caption); opacity: 1;
    font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 19.2px; line-height: 25px;
}
#wyr-content.wyr-design.wyrd-popQuiz #wyr-status.pqw-pop { animation: pqwPop 0.4s var(--pqw-spring) both; }

/* ── Results ── */
#wyr-content.wyr-design.wyrd-popQuiz #wyr-result[style*="block"] {
    display: flex !important; flex-direction: column; align-items: stretch; margin: 6px 0 0;
}
/* The names: two stickers side by side. */
#wyr-content.wyr-design.wyrd-popQuiz .pqw-names {
    order: 1; display: flex; gap: 14px; align-items: stretch; margin: 0 0 22px;
}
#wyr-content.wyr-design.wyrd-popQuiz .pqw-names span {
    flex: 1; min-height: 82px; box-sizing: border-box; padding: 8px 8px 10px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    border: 4px solid var(--pqw-ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--pqw-ink);
    color: #fff !important; text-shadow: 2px 2px 0 var(--pqw-ink);
    font-size: 16.8px; line-height: 1.15; overflow-wrap: anywhere;
}
#wyr-content.wyr-design.wyrd-popQuiz .pqw-names .wyr-a-label { background: var(--pqw-a); transform: rotate(-2deg); }
#wyr-content.wyr-design.wyrd-popQuiz .pqw-names .wyr-b-label { background: var(--pqw-b); transform: rotate(2deg); }
/* The bar: the track, A from the left and B from the right, the peg where they meet. */
#wyr-content.wyr-design.wyrd-popQuiz .wyr-result-bar {
    order: 2; position: relative; height: 50px; margin: 0 6px 24px 0; box-sizing: border-box;
    background: var(--pqw-track); border: 4px solid var(--pqw-ink); border-radius: 16px;
    box-shadow: 5px 5px 0 var(--pqw-ink); overflow: visible; justify-content: space-between;
}
#wyr-content.wyr-design.wyrd-popQuiz .wyr-result-bar .wyr-a-fill { background: var(--pqw-a); border-radius: 12px 0 0 12px; }
#wyr-content.wyr-design.wyrd-popQuiz .wyr-result-bar .wyr-b-fill { background: var(--pqw-b); border-radius: 0 12px 12px 0; }
#wyr-content.wyr-design.wyrd-popQuiz .wyr-result-bar[data-pqw-a="100"] .wyr-a-fill,
#wyr-content.wyr-design.wyrd-popQuiz .wyr-result-bar[data-pqw-a="0"] .wyr-b-fill { border-radius: 12px; }
#wyr-content.wyr-design.wyrd-popQuiz .pqw-peg {
    position: absolute; top: -14px; width: 14px; height: 70px; margin-left: -7px; box-sizing: border-box;
    left: calc(var(--pqw-at, 50) * 1%);
    background: var(--pqw-cream); border: 3px solid var(--pqw-ink); border-radius: 7px; box-shadow: 3px 3px 0 var(--pqw-ink);
}
/* The percentages and counts: a sticker under each end. */
#wyr-content.wyr-design.wyrd-popQuiz .pqw-pcts {
    order: 3; display: flex; justify-content: space-between; margin: 0 0 6px;
}
#wyr-content.wyr-design.wyrd-popQuiz .pqw-pcts > span {
    display: flex; align-items: baseline; gap: 4px; padding: 4px 10px 7px;
    border: 4px solid var(--pqw-ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--pqw-ink);
    color: #fff !important; text-shadow: 2px 2px 0 var(--pqw-ink);
}
#wyr-content.wyr-design.wyrd-popQuiz .pqw-pcts .wyr-a-label { background: var(--pqw-a); transform: rotate(-2deg); }
#wyr-content.wyr-design.wyrd-popQuiz .pqw-pcts .wyr-b-label { background: var(--pqw-b); transform: rotate(2deg); }
#wyr-content.wyr-design.wyrd-popQuiz .pqw-pct {
    display: inline-block; min-width: 66px; text-align: right;
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 26px; line-height: 1;
}
#wyr-content.wyr-design.wyrd-popQuiz .pqw-count {
    display: inline-block; min-width: 44px; text-align: left;
    font-size: 19px; line-height: 1; font-variant-numeric: tabular-nums;
}
/* The payoff: the winner on a yellow burst, or TIED!. */
#wyr-content.wyr-design.wyrd-popQuiz .pqw-pay { order: 4; display: flex; justify-content: center; margin: 14px 0 6px; }
#wyr-content.wyr-design.wyrd-popQuiz .pqw-burst {
    width: 260px; height: 260px; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: var(--pqw-yellow); color: var(--pqw-ink);
    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%);
    transform: rotate(-4deg);
}
#wyr-content.wyr-design.wyrd-popQuiz .pqw-burst svg { width: 52px; height: 36px; fill: var(--pqw-ink); }
#wyr-content.wyr-design.wyrd-popQuiz .pqw-burst .pqw-name {
    max-width: 170px; font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 25px; line-height: 1.05;
    overflow-wrap: anywhere;
}
#wyr-content.wyr-design.wyrd-popQuiz .pqw-burst .pqw-name.pqw-long { font-size: 19px; }
#wyr-content.wyr-design.wyrd-popQuiz .pqw-burst .pqw-wins {
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 36px; line-height: 1;
}
#wyr-content.wyr-design.wyrd-popQuiz .pqw-tie,
#wyr-content.wyr-design.wyrd-popQuiz .pqw-none {
    margin: 64px 0 40px; padding: 12px 26px 18px;
    background: var(--pqw-yellow); color: var(--pqw-ink);
    border: 4px solid var(--pqw-ink); border-radius: 20px; box-shadow: 7px 7px 0 var(--pqw-ink);
    transform: rotate(-4deg);
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 50px; line-height: 1.05; white-space: nowrap;
}
#wyr-content.wyr-design.wyrd-popQuiz .pqw-none { background: var(--pqw-cream); font-size: 30px; white-space: normal; }
/* The shared outcome line is drawn by the payoff. */
#wyr-content.wyr-design.wyrd-popQuiz .wyr-winner { display: none; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-result #wyr-status {
    margin-top: 22px; color: var(--pqw-cream);
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 30px; line-height: 1.1;
    text-shadow: 3px 3px 0 var(--pqw-ink);
}

/* ── Locked, before the result: "Locked in!" (and the reveal's wait) ── */
#wyr-content.wyr-design.wyrd-popQuiz.pqw-waiting #wyr-timer { display: none; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-waiting #wyr-status {
    display: block; width: fit-content; margin: 96px auto 0; padding: 22px 24px 26px; max-width: 280px;
    background: var(--pqw-cream); color: var(--pqw-ink);
    border: 4px solid var(--pqw-ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--pqw-ink);
    transform: rotate(-2deg); white-space: pre-line;
    font-size: 19px; line-height: 1.3;
}
#wyr-content.wyr-design.wyrd-popQuiz.pqw-waiting #wyr-status::first-line {
    font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 34px; line-height: 1.25;
}
#wyr-content.wyr-design.wyrd-popQuiz.pqw-waiting .pqw-dots { display: flex; }
#wyr-content.wyr-design.wyrd-popQuiz .pqw-dots {
    display: none; justify-content: center; gap: 14px; height: 40px; align-items: flex-end; margin: 26px 0 0;
}
#wyr-content.wyr-design.wyrd-popQuiz .pqw-dots span {
    width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--pqw-ink);
    animation: pqwHop 1.2s ease-in-out infinite;
}
#wyr-content.wyr-design.wyrd-popQuiz .pqw-dots span:nth-child(1) { background: var(--pqw-a); }
#wyr-content.wyr-design.wyrd-popQuiz .pqw-dots span:nth-child(2) { background: var(--pqw-yellow); animation-delay: 0.2s; }
#wyr-content.wyr-design.wyrd-popQuiz .pqw-dots span:nth-child(3) { background: var(--pqw-b); animation-delay: 0.4s; }

/* ── Entrances: only when a screen or question arrives (.pqw-enter) ── */
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter #wyr-timer.show .vote-timer-bar,
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter #wyr-timer.show .vote-timer-text { animation: pqwDrop 0.5s var(--pqw-spring) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .wyr-option-btn { animation: pqwDeal 0.5s var(--pqw-spring) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .wyr-option-btn.wyr-a { animation-delay: 0.3s; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .wyr-option-btn.wyr-b { animation-delay: 0.54s; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .wyr-or { animation: pqwSpinOr 0.5s 0.42s var(--pqw-spring) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter #wyr-status { animation: pqwPop 0.4s 0.6s var(--pqw-spring) both; }

/* The result lands 0.75 s after it shows: the winner's burst has spun on
   (0.35 + 0.4 s), TIED! stamped 0.02 s sooner, as the display's TIED! lands
   just before its WINNER pill would (WouldYouRatherPopQuizDesign
   .phoneResultLanding; the tests read these timings). The Mac's
   resultsDelayMs is each beat less 0.75 s, so the landing is the
   projector's. Shorter than the lock's beat, so "Locked in!" shows first. */
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .pqw-names .wyr-a-label { animation: pqwDropA 0.4s 0s var(--pqw-spring) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .pqw-names .wyr-b-label { animation: pqwDropB 0.4s 0.05s var(--pqw-spring) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .wyr-result-bar { animation: pqwSlide 0.4s 0.1s var(--pqw-spring) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .wyr-result-bar .wyr-a-fill,
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .wyr-result-bar .wyr-b-fill { animation: pqwFill 0.45s 0.25s var(--pqw-inout) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .pqw-peg { animation: pqwPeg 0.25s 0.5s var(--pqw-slam) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .pqw-pcts .wyr-a-label { animation: pqwPopA 0.35s 0.3s var(--pqw-spring) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .pqw-pcts .wyr-b-label { animation: pqwPopB 0.35s 0.35s var(--pqw-spring) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .pqw-burst { animation: pqwSpinPay 0.4s 0.35s var(--pqw-spring) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .pqw-tie { animation: pqwStamp 0.35s 0.38s var(--pqw-slam) both, pqwAppear 0.01s 0.38s steps(1) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter .pqw-none { animation: pqwStamp 0.35s 0.4s var(--pqw-slam) both, pqwAppear 0.01s 0.4s steps(1) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter.pqw-result #wyr-status { animation: pqwStamp0 0.4s 0.8s var(--pqw-slam) both, pqwAppear 0.01s 0.8s steps(1) both; }
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter.pqw-waiting #wyr-status { animation: pqwStamp2 0.45s var(--pqw-slam) both; }
/* The beat's "Locked in!" lands inside the phones' hold (0.32 s). */
#wyr-content.wyr-design.wyrd-popQuiz.pqw-enter.pqw-waiting:not(.pqw-waiting-reveal) #wyr-status { animation-duration: 0.3s; }

@keyframes pqwDrop { from { transform: translateY(-120px) rotate(-6deg); } }
@keyframes pqwDropA { from { transform: translateY(-120px) rotate(-6deg); } to { transform: rotate(-2deg); } }
@keyframes pqwDropB { from { transform: translateY(-120px) rotate(-6deg); } to { transform: rotate(2deg); } }
@keyframes pqwDeal { from { transform: translateX(374px) rotate(8deg); } }
@keyframes pqwSpinOr { from { transform: rotate(-188deg) scale(0); } to { transform: rotate(-8deg) scale(1); } }
@keyframes pqwSpinCheck { from { transform: rotate(-170deg) scale(0); } to { transform: rotate(10deg) scale(1); } }
@keyframes pqwSpinPay { from { transform: rotate(-184deg) scale(0); } to { transform: rotate(-4deg) scale(1); } }
@keyframes pqwPop { from { transform: scale(0); } }
@keyframes pqwPopA { from { transform: rotate(12deg) scale(0); } to { transform: rotate(-2deg) scale(1); } }
@keyframes pqwPopB { from { transform: rotate(12deg) scale(0); } to { transform: rotate(2deg) scale(1); } }
@keyframes pqwStamp { from { transform: rotate(-10deg) scale(1.8); } to { transform: rotate(-4deg) scale(1); } }
@keyframes pqwStamp0 { from { transform: rotate(-10deg) scale(1.8); } to { transform: none; } }
@keyframes pqwStamp2 { from { transform: rotate(-10deg) scale(1.8); } to { transform: rotate(-2deg) scale(1); } }
@keyframes pqwSlide { from { transform: translateX(-380px); } }
@keyframes pqwFill { from { width: 0; } }
@keyframes pqwPeg { from { transform: translateY(-90px); } }
@keyframes pqwTick { 40% { transform: rotate(8deg) scale(1.1); } }
@keyframes pqwAppear { from { visibility: hidden; } to { visibility: visible; } }
@keyframes pqwHop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px); } }

/* ── Shorter phones: everything still fits one screen ── */
@media (max-height: 740px) {
    #wyr-content.wyr-design.wyrd-popQuiz .pqw-names { margin-bottom: 16px; }
    #wyr-content.wyr-design.wyrd-popQuiz .pqw-names span { min-height: 62px; font-size: 15px; padding: 6px 6px 8px; }
    #wyr-content.wyr-design.wyrd-popQuiz .wyr-result-bar { height: 42px; margin-bottom: 20px; }
    #wyr-content.wyr-design.wyrd-popQuiz .pqw-peg { top: -12px; height: 58px; }
    #wyr-content.wyr-design.wyrd-popQuiz .pqw-pay { margin: 8px 0 0; }
    #wyr-content.wyr-design.wyrd-popQuiz .pqw-burst { width: 206px; height: 206px; gap: 4px; }
    #wyr-content.wyr-design.wyrd-popQuiz .pqw-burst svg { width: 42px; height: 29px; }
    #wyr-content.wyr-design.wyrd-popQuiz .pqw-burst .pqw-name { max-width: 134px; font-size: 20px; }
    #wyr-content.wyr-design.wyrd-popQuiz .pqw-burst .pqw-name.pqw-long { font-size: 15px; }
    #wyr-content.wyr-design.wyrd-popQuiz .pqw-burst .pqw-wins { font-size: 29px; }
    #wyr-content.wyr-design.wyrd-popQuiz .pqw-tie,
    #wyr-content.wyr-design.wyrd-popQuiz .pqw-none { margin: 36px 0 24px; }
    #wyr-content.wyr-design.wyrd-popQuiz.pqw-result #wyr-status { margin-top: 12px; }
    #wyr-content.wyr-design.wyrd-popQuiz .wyr-option-btn.pqw-long { font-size: 19px; }
    #wyr-content.wyr-design.wyrd-popQuiz .wyr-option-btn.pqw-longer { font-size: 17px; }
    #wyr-content.wyr-design.wyrd-popQuiz.pqw-waiting #wyr-status { margin-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    #wyr-content.wyr-design.wyrd-popQuiz *, #wyr-content.wyr-design.wyrd-popQuiz *::before,
    #wyr-content.wyr-design.wyrd-popQuiz *::after, #wyr-content.wyr-design.wyrd-popQuiz {
        animation: none !important; transition: none !important;
    }
}