/* Live Polls · Retro Gaming phone skin (owner decision 2026-10-06): the
   canvas's PR-Polls-RetroGaming Phone board and the phone half of its
   animation board, on Live Trivia's coin-op cabinet. Each option is lettered
   and coloured by its place, as on the display (PollsRetroGamingDesign
   .Palette: red, cyan, yellow, green, pink, then orange, violet and lavender
   for 6–8 options). Every rule is scoped to #poll-content.poll-design
   .pld-retroGaming or #voted-message.poll-design.pld-retroGaming, so the
   classic screens and every other feature are untouched.

   The shared poll screens are restyled from their own elements: the LIVE
   POLL heading and the invader are pseudo-elements, each option's coin is
   its data-letter, and the paused banner rises into the heading's place.
   /poll-designs/retro-gaming.js tags the screens so the entry animations
   play once (.rgp-enter for a new poll, .rgp-resume when voting reopens)
   and the tapped option shows while the vote sends (.rgp-sending,
   .rgp-picked). Press Start 2P is self-hosted (SIL OFL). Every motion is
   stepped (steps()) like the display.

   The paused banner lands WITH the display's TOP PICK: the page holds it for
   the poll doc's stopDelayMs (PollsRetroGamingDesign.spec), then it rises
   into place in 0.3 s (rgpBanIn, PollsRetroGamingDesign.phoneStopEntrance).
   Change the two together. */

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/press-start-2p-regular-v1.woff2') format('woff2');
}

#poll-content.poll-design.pld-retroGaming,
#voted-message.poll-design.pld-retroGaming {
    --rgp-bg: #07031C; --rgp-panel: #0B0730; --rgp-qpanel: #0A0630; --rgp-wall: #3348FF;
    --rgp-yellow: #FFE629; --rgp-orange: #FF9A1F; --rgp-green: #3DFF7C; --rgp-cyan: #2BE4FF;
    --rgp-white: #F5F2FF; --rgp-lav: #B4AEE8;
    --rgp-ko-edge: #36325A; --rgp-ko-fill: #06041A; --rgp-ko-ink: #6C6890;
    --rgp-notch: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
    --rgp-rainbow-26: linear-gradient(to bottom, #FFE629 0 10px, #FF9A1F 10px 16px, #FF3158 16px 26px);
    --rgp-rainbow-22: linear-gradient(to bottom, #FFE629 0 8px, #FF9A1F 8px 14px, #FF3158 14px 22px);
    --rgp-inv-cyan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1h-1zM7 0h1v1h-1zM3 1h1v1h-1zM6 1h1v1h-1zM2 2h6v1h-6zM1 3h2v1h-2zM4 3h2v1h-2zM7 3h2v1h-2zM0 4h10v1h-10zM0 5h1v1h-1zM2 5h6v1h-6zM9 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM7 6h1v1h-1zM9 6h1v1h-1zM3 7h2v1h-2zM6 7h2v1h-2z' fill='%232BE4FF'/%3E%3Cpath d='M3 3h1v1h-1zM6 3h1v1h-1z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    --rgp-inv-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h2v1h-2zM2 1h6v1h-6zM1 2h8v1h-8zM0 3h2v1h-2zM3 3h1v1h-1zM6 3h1v1h-1zM8 3h2v1h-2zM0 4h10v1h-10zM2 5h1v1h-1zM4 5h2v1h-2zM7 5h1v1h-1zM1 6h1v1h-1zM3 6h1v1h-1zM6 6h1v1h-1zM8 6h1v1h-1zM0 7h1v1h-1zM9 7h1v1h-1z' fill='%233DFF7C'/%3E%3Cpath d='M2 3h1v1h-1zM4 3h2v1h-2zM7 3h1v1h-1z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    --rgp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' shape-rendering='crispEdges'%3E%3Cpath d='M10 0h1v1h-1zM9 1h2v1h-2zM0 2h1v1h-1zM8 2h2v1h-2zM0 3h2v1h-2zM7 3h2v1h-2zM1 4h2v1h-2zM6 4h2v1h-2zM2 5h2v1h-2zM5 5h2v1h-2zM3 6h3v1h-3zM4 7h1v1h-1z' fill='%233DFF7C'/%3E%3C/svg%3E");
    --rgp-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v5h-2zM3 0h2v5h-2z' fill='%23FFE629'/%3E%3C/svg%3E");

    display: flex !important;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    min-height: calc(100dvh - 24px);
    margin: -8px -16px;
    /* Entries slide in from off the cabinet; the box grows with its
       content, so nothing at rest is ever cut. */
    overflow: hidden;
    overflow: clip;
    padding: 122px 20px 18px;
    font-family: 'Press Start 2P', ui-monospace, monospace;
    font-weight: 400;
    color: var(--rgp-white);
    text-transform: uppercase;
    text-align: center;
    -webkit-font-smoothing: none;
    /* The cabinet: a double maze wall round a dark field, faint scanlines
       in the field only (under the content, never over the text). */
    border: 6px solid var(--rgp-wall);
    box-shadow: inset 0 0 0 6px var(--rgp-bg), inset 0 0 0 9px var(--rgp-wall), 0 0 10px rgba(51,72,255,0.6);
    background:
        repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 3px, rgba(0,0,0,0.16) 3px 6px),
        var(--rgp-bg);
}
/* The page hides the screens with display: none (inline, or no .show). */
#poll-content.poll-design.pld-retroGaming[style*="none"] { display: none !important; }
#voted-message.poll-design.pld-retroGaming:not(.show) { display: none !important; }
#poll-content.poll-design.pld-retroGaming *,
#voted-message.poll-design.pld-retroGaming * { font-family: inherit; font-weight: 400; }

/* ── The heading: LIVE POLL in the marquee's bands ── */
#poll-content.poll-design.pld-retroGaming::before {
    content: 'LIVE POLL';
    position: absolute; left: 0; right: 0; top: 46px;
    font-size: 26px; line-height: 26px; white-space: pre;
    background: var(--rgp-rainbow-26);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    filter: drop-shadow(3px 3px 0 #7A1FB0) drop-shadow(3px 3px 0 #2A0650);
}

/* ── The question ── */
#poll-content.poll-design.pld-retroGaming #question {
    margin: 6px 0 20px; padding: 16px 12px;
    border: 4px solid var(--rgp-wall); background: var(--rgp-qpanel);
    box-shadow: 0 0 10px rgba(51,72,255,0.6);
    font-size: 15px; line-height: 24px; color: var(--rgp-white);
    overflow-wrap: anywhere;
}

/* ── The vote buttons: a coin with the option's letter, in its colour ── */
#poll-content.poll-design.pld-retroGaming #options { gap: 12px; margin: 0; }
#poll-content.poll-design.pld-retroGaming .option-btn {
    --rgp-main: #FF3158; --rgp-shade: #8A0F2A;
    position: relative; display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 74px; padding: 10px 12px 10px 10px;
    border: 5px solid var(--rgp-main); border-radius: 0;
    background: var(--rgp-shade);
    box-shadow: inset 0 0 0 3px var(--rgp-bg), 0 0 8px rgba(0,0,0,0.4);
    color: var(--rgp-white); text-align: left; text-transform: uppercase;
    font-size: 15px; line-height: 1.45; overflow-wrap: anywhere;
    transition: none;
}
#poll-content.poll-design.pld-retroGaming .option-btn[data-index="1"] { --rgp-main: #2BE4FF; --rgp-shade: #0E6F86; }
#poll-content.poll-design.pld-retroGaming .option-btn[data-index="2"] { --rgp-main: #FFE629; --rgp-shade: #8F7A00; }
#poll-content.poll-design.pld-retroGaming .option-btn[data-index="3"] { --rgp-main: #3DFF7C; --rgp-shade: #12863A; }
#poll-content.poll-design.pld-retroGaming .option-btn[data-index="4"] { --rgp-main: #FF5FD2; --rgp-shade: #8A2475; }
#poll-content.poll-design.pld-retroGaming .option-btn[data-index="5"] { --rgp-main: #FF9A1F; --rgp-shade: #8A4A00; }
#poll-content.poll-design.pld-retroGaming .option-btn[data-index="6"] { --rgp-main: #9D6BFF; --rgp-shade: #4B2A99; }
#poll-content.poll-design.pld-retroGaming .option-btn[data-index="7"] { --rgp-main: #B4AEE8; --rgp-shade: #4C4870; }
#poll-content.poll-design.pld-retroGaming .option-btn::before {
    content: attr(data-letter);
    flex: 0 0 auto; width: 40px; height: 40px; padding-left: 3px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: var(--rgp-main); color: var(--rgp-bg); font-size: 14px; line-height: 14px;
    box-shadow: inset -4px -4px 0 rgba(0,0,0,0.4), inset 4px 4px 0 rgba(255,255,255,0.55);
    clip-path: var(--rgp-notch);
}
#poll-content.poll-design.pld-retroGaming .option-btn .rgp-long { font-size: 12px; }
#poll-content.poll-design.pld-retroGaming .option-btn:active:not(:disabled) { transform: translateY(4px) scale(0.97); }
#poll-content.poll-design.pld-retroGaming .option-btn:disabled { opacity: 1; cursor: not-allowed; transform: none; }

/* Sending: the tapped option lights up white; the rest go dark. */
#poll-content.poll-design.pld-retroGaming.rgp-sending .option-btn {
    border-color: var(--rgp-ko-edge); background: var(--rgp-ko-fill); color: var(--rgp-ko-ink);
}
#poll-content.poll-design.pld-retroGaming.rgp-sending .option-btn::before { background: var(--rgp-ko-edge); }
#poll-content.poll-design.pld-retroGaming.rgp-sending .option-btn.rgp-picked {
    border-color: #FFFFFF; background: var(--rgp-shade); color: var(--rgp-white);
    box-shadow: inset 0 0 0 3px var(--rgp-bg), 0 0 18px var(--rgp-main);
    animation: rgpPress 0.12s steps(1, end) backwards;
}
#poll-content.poll-design.pld-retroGaming.rgp-sending .option-btn.rgp-picked::before { background: var(--rgp-main); }

/* ── Paused: the heading rises away and the banner rises into its place
   (five frames each, clipped to the heading's 104-point slot) ── */
#poll-content.poll-design.pld-retroGaming #stopped-banner.show {
    position: absolute; left: 24px; right: 24px; top: 28px; margin: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border-radius: 0; box-sizing: border-box;
    background: #2A1800; color: var(--rgp-yellow);
    border: 5px solid var(--rgp-yellow);
    box-shadow: inset 0 0 0 4px var(--rgp-orange), 0 0 12px rgba(255,180,0,0.45);
    font-size: 11px; line-height: 18px; text-align: left; text-shadow: 0 0 8px rgba(255,230,41,0.5);
    animation: rgpBanIn 0.3s steps(1, end) backwards;
}
#poll-content.poll-design.pld-retroGaming #stopped-banner.show::before {
    content: ''; flex: 0 0 auto; width: 30px; height: 30px;
    background: var(--rgp-pause) center / 100% 100% no-repeat;
}
#poll-content.poll-design.pld-retroGaming:has(> #stopped-banner.show)::before {
    animation: rgpHeadOut 0.3s steps(1, end) forwards;
}
#poll-content.poll-design.pld-retroGaming.rgp-resume::before {
    animation: rgpHeadIn 0.3s steps(1, end) backwards;
}
#poll-content.poll-design.pld-retroGaming:has(> #stopped-banner.show) .option-btn {
    border-color: var(--rgp-ko-edge); background: var(--rgp-ko-fill); color: var(--rgp-ko-ink);
}
#poll-content.poll-design.pld-retroGaming:has(> #stopped-banner.show) .option-btn::before { background: var(--rgp-ko-edge); }

/* ── The status line and the invader under it ── */
#poll-content.poll-design.pld-retroGaming #status {
    margin: 22px 0 0; min-height: 20px; font-size: 12px; line-height: 20px; color: var(--rgp-white);
}
#poll-content.poll-design.pld-retroGaming[data-rgp="tap"] #status { animation: rgpBlink 1s steps(1, end) infinite; }
#poll-content.poll-design.pld-retroGaming::after {
    content: ''; display: block; align-self: center; flex: 0 0 auto;
    width: 50px; height: 40px; margin-top: 18px;
    background: var(--rgp-inv-cyan) center / 100% 100% no-repeat;
    animation: rgpBob 0.8s steps(1, end) infinite;
}

/* A new poll: the question pops on, the options slide in one by one. */
#poll-content.poll-design.pld-retroGaming.rgp-enter #question { animation: rgpQ 0.2s 0.15s steps(3, end) backwards; }
#poll-content.poll-design.pld-retroGaming.rgp-enter .option-btn { animation: rgpSlideIn 0.36s 0.3s steps(6, end) backwards; }
#poll-content.poll-design.pld-retroGaming.rgp-enter .option-btn:nth-child(2) { animation-delay: 0.38s; }
#poll-content.poll-design.pld-retroGaming.rgp-enter .option-btn:nth-child(3) { animation-delay: 0.46s; }
#poll-content.poll-design.pld-retroGaming.rgp-enter .option-btn:nth-child(4) { animation-delay: 0.54s; }
#poll-content.poll-design.pld-retroGaming.rgp-enter .option-btn:nth-child(5) { animation-delay: 0.62s; }
#poll-content.poll-design.pld-retroGaming.rgp-enter .option-btn:nth-child(6) { animation-delay: 0.7s; }
#poll-content.poll-design.pld-retroGaming.rgp-enter .option-btn:nth-child(7) { animation-delay: 0.78s; }
#poll-content.poll-design.pld-retroGaming.rgp-enter .option-btn:nth-child(8) { animation-delay: 0.86s; }

/* ── Vote counted! ── */
#voted-message.poll-design.pld-retroGaming.show {
    flex-direction: column; align-items: center; gap: 30px;
    padding: 130px 20px 18px;
}
#voted-message.poll-design.pld-retroGaming .checkmark {
    width: 148px; height: 148px; box-sizing: border-box; margin: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0; line-height: 0; color: transparent;
    background: #05020F; border: 6px solid var(--rgp-green);
    box-shadow: inset 0 0 0 6px #0F6B33, 0 0 18px rgba(61,255,124,0.55);
    animation: rgpBoxPop 0.36s steps(1, end) backwards;
}
#voted-message.poll-design.pld-retroGaming .checkmark::before {
    content: ''; width: 88px; height: 64px;
    background: var(--rgp-check) center / 100% 100% no-repeat;
    filter: drop-shadow(0 0 6px rgba(61,255,124,0.7));
    animation: rgpCheck 0.18s 0.3s steps(3, end) backwards;
}
#voted-message.poll-design.pld-retroGaming h2 {
    margin: 0; font-size: 22px; line-height: 22px; white-space: pre;
    background: var(--rgp-rainbow-22);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    filter: drop-shadow(3px 3px 0 #7A1FB0) drop-shadow(3px 3px 0 #2A0650);
    animation: rgpSlam 0.86s steps(1, end) backwards;
}
/* The pick: the option's coin and name in its colours. */
#voted-message.poll-design.pld-retroGaming .voted-pick { margin: -6px 0 0; width: 100%; }
#voted-message.poll-design.pld-retroGaming .rgp-pick {
    --rgp-main: #FF3158; --rgp-shade: #8A0F2A;
    display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%;
    padding: 10px 12px 10px 10px; border: 5px solid var(--rgp-main); background: var(--rgp-shade);
    box-shadow: inset 0 0 0 3px var(--rgp-bg), 0 0 14px var(--rgp-main);
    text-align: left; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere;
    animation: rgpPickIn 0.18s 0.78s steps(3, end) backwards;
}
#voted-message.poll-design.pld-retroGaming .rgp-pick[data-index="1"] { --rgp-main: #2BE4FF; --rgp-shade: #0E6F86; }
#voted-message.poll-design.pld-retroGaming .rgp-pick[data-index="2"] { --rgp-main: #FFE629; --rgp-shade: #8F7A00; }
#voted-message.poll-design.pld-retroGaming .rgp-pick[data-index="3"] { --rgp-main: #3DFF7C; --rgp-shade: #12863A; }
#voted-message.poll-design.pld-retroGaming .rgp-pick[data-index="4"] { --rgp-main: #FF5FD2; --rgp-shade: #8A2475; }
#voted-message.poll-design.pld-retroGaming .rgp-pick[data-index="5"] { --rgp-main: #FF9A1F; --rgp-shade: #8A4A00; }
#voted-message.poll-design.pld-retroGaming .rgp-pick[data-index="6"] { --rgp-main: #9D6BFF; --rgp-shade: #4B2A99; }
#voted-message.poll-design.pld-retroGaming .rgp-pick[data-index="7"] { --rgp-main: #B4AEE8; --rgp-shade: #4C4870; }
#voted-message.poll-design.pld-retroGaming .voted-pick-letter {
    flex: 0 0 auto; width: 34px; height: 34px; padding-left: 3px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: var(--rgp-main); color: var(--rgp-bg); font-size: 12px; line-height: 12px;
    box-shadow: inset -4px -4px 0 rgba(0,0,0,0.4), inset 4px 4px 0 rgba(255,255,255,0.55);
    clip-path: var(--rgp-notch);
}
#voted-message.poll-design.pld-retroGaming .voted-pick-text { color: var(--rgp-white); }
#voted-message.poll-design.pld-retroGaming p {
    margin: -8px 0 0; width: 26em; max-width: 100%; height: 20px; overflow: hidden;
    font-size: 12px; line-height: 20px; white-space: pre; text-align: left; color: var(--rgp-white);
    animation: rgpType 0.625s 0.9s steps(25, end) backwards;
}
#voted-message.poll-design.pld-retroGaming::after {
    content: ''; display: block; flex: 0 0 auto; width: 60px; height: 48px; margin-top: -20px;
    background: var(--rgp-inv-green) center / 100% 100% no-repeat;
    animation: rgpBob 0.8s steps(1, end) infinite;
}

/* ── More options, smaller phones: everything fits without scrolling ── */
#poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(5)) #options { gap: 10px; }
#poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(5)) .option-btn { min-height: 60px; padding-top: 6px; padding-bottom: 6px; }
#poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(6))::after { display: none; }
#poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(7)) #options { gap: 8px; }
#poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(7)) .option-btn { min-height: 50px; font-size: 13px; }
#poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(7)) .option-btn::before { width: 32px; height: 32px; font-size: 12px; }
#poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(5)) #question { font-size: 13px; line-height: 20px; padding: 10px; margin-bottom: 14px; }
#poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(5)) .option-btn .rgp-long { font-size: 11px; }
#poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(7)) .option-btn { min-height: 46px; padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
#poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(7)) .option-btn .rgp-long { font-size: 10px; }
#poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(7)) #question { font-size: 12px; line-height: 18px; padding: 8px 10px; margin-bottom: 12px; }
#poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(7)) #status { margin-top: 14px; }
@media (max-height: 740px) {
    #poll-content.poll-design.pld-retroGaming { padding-top: 76px; }
    #poll-content.poll-design.pld-retroGaming::before { top: 26px; font-size: 22px; line-height: 22px; background-image: var(--rgp-rainbow-22); }
    #poll-content.poll-design.pld-retroGaming #stopped-banner.show { top: 18px; padding: 8px 10px; animation-name: rgpBanInShort; }
    #poll-content.poll-design.pld-retroGaming:has(> #stopped-banner.show)::before { animation-name: rgpHeadOutShort; }
    #poll-content.poll-design.pld-retroGaming.rgp-resume::before { animation-name: rgpHeadInShort; }
    #poll-content.poll-design.pld-retroGaming #question { margin: 2px 0 14px; padding: 12px 10px; font-size: 13px; line-height: 21px; }
    #poll-content.poll-design.pld-retroGaming #options { gap: 10px; }
    #poll-content.poll-design.pld-retroGaming .option-btn { min-height: 58px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
    #poll-content.poll-design.pld-retroGaming #status { margin-top: 16px; }
    #poll-content.poll-design.pld-retroGaming::after { margin-top: 12px; width: 40px; height: 32px; }
    #poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(4))::after { display: none; }
    #poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(5)) #options { gap: 6px; }
    #poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(5)) .option-btn { min-height: 44px; padding-top: 3px; padding-bottom: 3px; font-size: 12px; }
    #poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(5)) .option-btn .rgp-long { font-size: 10px; }
    #poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(5)) #question { font-size: 12px; line-height: 18px; padding: 8px 10px; margin-bottom: 10px; }
    #poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(5)) #status { margin-top: 10px; }
    #poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(5)) .option-btn::before { width: 32px; height: 32px; font-size: 12px; }
    #poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(7)) #options { gap: 5px; }
    #poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(7)) .option-btn { min-height: 38px; font-size: 11px; border-width: 4px; }
    #poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(7)) .option-btn::before { width: 26px; height: 26px; font-size: 10px; }
    #poll-content.poll-design.pld-retroGaming:has(.option-btn:nth-child(7)) #question { font-size: 11px; line-height: 16px; padding: 6px 8px; margin-bottom: 8px; }
    #voted-message.poll-design.pld-retroGaming.show { padding-top: 70px; gap: 24px; }
}

@keyframes rgpSlideIn { from { transform: translateX(420px); } to { transform: none; } }
@keyframes rgpQ { from { transform: scale(0); } to { transform: none; } }
@keyframes rgpPress { 0% { transform: translateY(4px) scale(0.97); } 100% { transform: none; } }
@keyframes rgpBlink { 0% { visibility: visible; } 72% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes rgpBob { 0% { transform: none; } 25% { transform: translateY(-3px); } 50% { transform: translateY(-6px); } 75% { transform: translateY(-3px); } 100% { transform: none; } }
/* The banner and the heading, frame by frame (0.06 s each), clipped to the
   104-point slot above the question as the board's phone clips them. */
@keyframes rgpBanIn {
    0% { transform: translateY(110px); clip-path: inset(0 0 100% 0); }
    20% { transform: translateY(88px); clip-path: inset(0 0 max(0px, calc(100% - 6px)) 0); }
    40% { transform: translateY(66px); clip-path: inset(0 0 max(0px, calc(100% - 28px)) 0); }
    60% { transform: translateY(44px); clip-path: inset(0 0 max(0px, calc(100% - 50px)) 0); }
    80% { transform: translateY(22px); clip-path: inset(0 0 max(0px, calc(100% - 72px)) 0); }
    100% { transform: none; clip-path: none; }
}
@keyframes rgpHeadOut {
    0% { transform: none; clip-path: none; }
    20% { transform: translateY(-22px); clip-path: none; }
    40% { transform: translateY(-44px); clip-path: inset(16px 0 0 0); }
    60% { transform: translateY(-66px); clip-path: inset(100% 0 0 0); }
    100% { transform: translateY(-110px); clip-path: inset(100% 0 0 0); visibility: hidden; }
}
@keyframes rgpHeadIn {
    0% { transform: translateY(110px); clip-path: inset(0 0 100% 0); }
    20% { transform: translateY(88px); clip-path: inset(0 0 100% 0); }
    40% { transform: translateY(66px); clip-path: inset(0 0 max(0px, calc(100% - 10px)) 0); }
    60% { transform: translateY(44px); clip-path: none; }
    80% { transform: translateY(22px); clip-path: none; }
    100% { transform: none; clip-path: none; }
}
@keyframes rgpBanInShort {
    0% { transform: translateY(80px); clip-path: inset(0 0 100% 0); }
    20% { transform: translateY(64px); clip-path: inset(0 0 100% 0); }
    40% { transform: translateY(48px); clip-path: inset(0 0 max(0px, calc(100% - 10px)) 0); }
    60% { transform: translateY(32px); clip-path: inset(0 0 max(0px, calc(100% - 26px)) 0); }
    80% { transform: translateY(16px); clip-path: inset(0 0 max(0px, calc(100% - 42px)) 0); }
    100% { transform: none; clip-path: none; }
}
@keyframes rgpHeadOutShort {
    0% { transform: none; clip-path: none; }
    20% { transform: translateY(-16px); clip-path: inset(8px 0 0 0); }
    40% { transform: translateY(-32px); clip-path: inset(100% 0 0 0); }
    100% { transform: translateY(-80px); clip-path: inset(100% 0 0 0); visibility: hidden; }
}
@keyframes rgpHeadInShort {
    0% { transform: translateY(80px); clip-path: inset(0 0 100% 0); }
    20% { transform: translateY(64px); clip-path: inset(0 0 100% 0); }
    40% { transform: translateY(48px); clip-path: inset(0 0 max(0px, calc(100% - 2px)) 0); }
    60% { transform: translateY(32px); clip-path: inset(0 0 max(0px, calc(100% - 18px)) 0); }
    80% { transform: translateY(16px); clip-path: none; }
    100% { transform: none; clip-path: none; }
}
/* Vote counted!: the box pops (0.06 s a value) as it straightens, the tick
   in at 0.3 s; the words slam down from 0.6 s; the pick and the line after. */
@keyframes rgpBoxPop {
    0% { transform: rotate(-6deg) scale(0.3); }
    16.667% { transform: rotate(-5deg) scale(0.7); }
    33.333% { transform: rotate(-4deg) scale(1.2); }
    50% { transform: rotate(-3deg) scale(1.3); }
    66.667% { transform: rotate(-2deg) scale(1.08); }
    83.333% { transform: rotate(-1deg); }
    100% { transform: none; }
}
@keyframes rgpCheck { from { transform: scale(0); } to { transform: none; } }
@keyframes rgpSlam {
    0% { visibility: hidden; transform: scale(2.6); }
    60.465% { visibility: visible; transform: scale(2.6); }
    69.767% { transform: scale(2.6); }
    79.845% { transform: scale(2.067); }
    89.922% { transform: scale(1.533); }
    100% { transform: none; }
}
@keyframes rgpPickIn { from { transform: scale(0); } to { transform: none; } }
@keyframes rgpType { from { width: 0; } }