/* Would You Rather · Retro Gaming phone skin (owner decision 2026-10-06):
   the canvas's WYR-RetroGaming Phone board and the phone half of its
   animation board, on Live Trivia's coin-op cabinet. PLAYER 1 is cyan
   (#2BE4FF), PLAYER 2 red (#FF3158), as on the display
   (WouldYouRatherRetroGamingDesign.Palette). Every rule is scoped to
   #wyr-content.wyr-design.wyrd-retroGaming, so the classic screens and every
   other feature are untouched.

   The shared WYR screens are restyled from their own elements: the vote
   buttons get their 1P / 2P coins and YOUR PICK tag from pseudo-elements,
   the timer's box shows the seconds /wyr-designs/retro-gaming.js reads off
   its text, and the status line is drawn from the kind that script tags on
   #wyr-content (data-rgw: tap, got, gotlocked, saving, paused, timeup,
   beat, reveal, result). Press Start 2P is self-hosted (SIL OFL). Every
   motion is stepped (steps()) like the display, or a short drop with a
   bounce; animations play only when the script marks a new question
   (.rgw-enter) or a new result (.rgw-anim). Legibility (the trivia skin's
   rule): solid dark panels, bright text, nothing over the text. */

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

#wyr-content.wyr-design.wyrd-retroGaming {
    --rgw-bg: #07031C; --rgw-panel: #0B0730; --rgw-wall: #3348FF;
    --rgw-cyan: #2BE4FF; --rgw-cyan-shade: #0E6F86; --rgw-cyan-fill: #062A3A;
    --rgw-red: #FF3158; --rgw-red-shade: #8A0F2A; --rgw-red-fill: #3A0820;
    --rgw-yellow: #FFE629; --rgw-orange: #FF9A1F; --rgw-green: #3DFF7C;
    --rgw-white: #F5F2FF; --rgw-lav: #B4AEE8; --rgw-unlit: #1C1842;
    --rgw-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));
    --rgw-rainbow: linear-gradient(to bottom, #FFE629 0 37.5%, #FF9A1F 37.5% 62.5%, #FF3158 62.5% 100%);
    --rgw-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");
    --rgw-inv-red: 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='%23FF3158'/%3E%3Cpath d='M3 3h1v1h-1zM6 3h1v1h-1z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    --rgw-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");
    --rgw-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM6 0h1v1h-1zM12 0h1v1h-1zM0 1h2v1h-2zM5 1h3v1h-3zM11 1h2v1h-2zM0 2h3v1h-3zM4 2h5v1h-5zM10 2h3v1h-3zM0 3h13v1h-13zM0 4h1v1h-1zM3 4h1v1h-1zM8 4h1v1h-1zM11 4h2v1h-2zM0 5h13v1h-13z' fill='%23FFE629'/%3E%3Cpath d='M1 4h1v1h-1zM10 4h1v1h-1z' fill='%23FFFFFF'/%3E%3Cpath d='M2 4h1v1h-1zM4 4h1v1h-1zM7 4h1v1h-1zM9 4h1v1h-1z' fill='%23FF9A1F'/%3E%3Cpath d='M5 4h2v1h-2z' fill='%23FF3158'/%3E%3Cpath d='M1 6h11v1h-11z' fill='%239A5A00'/%3E%3C/svg%3E");
    --rgw-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");
    --rgw-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1h-1zM2 1h1v1h-1zM0 2h2v1h-2zM3 2h2v1h-2zM2 3h1v1h-1zM2 4h1v1h-1z' fill='%23FFE629'/%3E%3Cpath d='M2 2h1v1h-1z' fill='%23FFFFFF'/%3E%3C/svg%3E");

    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    min-height: calc(100dvh - 24px);
    margin: -8px -16px;
    /* Entries slide in from off the cabinet (the board's phone clips them
       the same way); the box grows with its content, so nothing at rest is
       ever cut. */
    overflow: hidden;
    overflow: clip;
    padding: 12px 14px 18px;
    font-family: 'Press Start 2P', ui-monospace, monospace;
    font-weight: 400;
    color: var(--rgw-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(--rgw-wall);
    box-shadow: inset 0 0 0 6px var(--rgw-bg), inset 0 0 0 9px var(--rgw-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(--rgw-bg);
}
/* The page hides the screen with an inline display: none. */
#wyr-content.wyr-design.wyrd-retroGaming[style*="none"] { display: none !important; }
#wyr-content.wyr-design.wyrd-retroGaming * { font-family: inherit; font-weight: 400; }

/* The order of the pieces: the pick under the LOCKED IN! card while a
   result is held. */
#wyr-content.wyr-design.wyrd-retroGaming > .stopped-banner { order: 0; }
#wyr-content.wyr-design.wyrd-retroGaming > #wyr-question { order: 1; }
#wyr-content.wyr-design.wyrd-retroGaming > #wyr-timer { order: 2; }
#wyr-content.wyr-design.wyrd-retroGaming > #wyr-options { order: 3; }
#wyr-content.wyr-design.wyrd-retroGaming > #wyr-result { order: 3; }
#wyr-content.wyr-design.wyrd-retroGaming > #wyr-status { order: 4; }
#wyr-content.wyr-design.wyrd-retroGaming > .rgw-deco { order: 5; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="beat"] > #wyr-status,
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] > #wyr-status { order: 3; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="beat"] > #wyr-options,
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] > #wyr-options { order: 4; }

/* ── The marquee: WOULD YOU / RATHER... ── */
#wyr-content.wyr-design.wyrd-retroGaming #wyr-question {
    margin: 26px 0 24px; padding: 0; font-size: 0; line-height: 0; border: 0; background: none;
}
#wyr-content.wyr-design.wyrd-retroGaming #wyr-question::before {
    content: 'WOULD YOU\A RATHER...';
    display: inline-block;
    white-space: pre;
    font-size: 24px; line-height: 34px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0 5px, #FFE629 5px 14px, #FF9A1F 14px 20px, #FF3158 20px 29px, rgba(0,0,0,0) 29px 34px);
    background-size: 100% 34px;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    filter: drop-shadow(3px 3px 0 #7A1FB0) drop-shadow(3px 3px 0 #2A0650);
}

/* ── Paused ── */
#wyr-content.wyr-design.wyrd-retroGaming .stopped-banner.show {
    margin: 4px 2px 0; padding: 12px 10px; border-radius: 0;
    background: #2A1800; color: var(--rgw-yellow);
    border: 4px solid var(--rgw-yellow); box-shadow: inset 0 0 0 4px var(--rgw-orange);
    font-size: 11px; line-height: 18px;
}

/* ── The timer: segmented charge bar and the seconds in a pixel box ── */
#wyr-content.wyr-design.wyrd-retroGaming #wyr-timer { --rgw-tc: var(--rgw-green); --rgw-td: #0F6B33; margin: 0 0 22px; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-timer.rgw-warn { --rgw-tc: var(--rgw-yellow); --rgw-td: #8F7A00; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-timer.rgw-urgent { --rgw-tc: var(--rgw-red); --rgw-td: #8A0F2A; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-timer.show {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
}
#wyr-content.wyr-design.wyrd-retroGaming .vote-timer-bar {
    position: relative; height: 16px; border-radius: 0; background: var(--rgw-unlit); overflow: hidden;
}
#wyr-content.wyr-design.wyrd-retroGaming .vote-timer-bar::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(to right, rgba(0,0,0,0) 0 14px, var(--rgw-bg) 14px 18px);
}
#wyr-content.wyr-design.wyrd-retroGaming .vote-timer-fill {
    border-radius: 0; background-color: var(--rgw-tc) !important; transition: none;
}
#wyr-content.wyr-design.wyrd-retroGaming .vote-timer-text {
    width: 84px; height: 52px; margin: 0; padding-left: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0; color: var(--rgw-tc) !important;
    background: #05020F; border: 4px solid var(--rgw-tc);
    box-shadow: inset 0 0 0 4px var(--rgw-td), 0 0 10px var(--rgw-tc);
}
#wyr-content.wyr-design.wyrd-retroGaming .vote-timer-text::after {
    content: attr(data-secs); white-space: pre; font-size: 22px; line-height: 22px; text-shadow: 0 0 8px var(--rgw-tc);
}
#wyr-content.wyr-design.wyrd-retroGaming #wyr-timer.rgw-tick.rgw-warn .vote-timer-text { animation: rgwTickWarn 0.28s steps(1, end) backwards; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-timer.rgw-tick.rgw-urgent .vote-timer-text { animation: rgwTickUrgent 0.28s steps(1, end) backwards; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-enter #wyr-timer { animation: rgwDrop 0.36s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }

/* ── The vote buttons: 1P cyan, 2P red ── */
#wyr-content.wyr-design.wyrd-retroGaming #wyr-options { gap: 0; margin: 0; }
#wyr-content.wyr-design.wyrd-retroGaming .wyr-option-btn {
    --rgw-side: var(--rgw-cyan); --rgw-shade: var(--rgw-cyan-shade);
    position: relative; display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 156px; padding: 12px 12px 12px 10px;
    border: 5px solid var(--rgw-side); border-radius: 0;
    background: var(--rgw-panel);
    box-shadow: inset 0 0 0 3px var(--rgw-bg), 0 0 8px rgba(0,0,0,0.4);
    color: var(--rgw-white); text-align: left; text-transform: uppercase;
    font-size: 18px; line-height: 1.45; overflow-wrap: anywhere;
    transition: none;
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-option-btn.wyr-b { --rgw-side: var(--rgw-red); --rgw-shade: var(--rgw-red-shade); }
#wyr-content.wyr-design.wyrd-retroGaming .wyr-option-btn::before {
    content: '1P';
    flex: 0 0 auto; width: 46px; height: 46px; padding-left: 3px;
    display: flex; align-items: center; justify-content: center;
    background: var(--rgw-side); color: var(--rgw-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(--rgw-notch);
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-option-btn.wyr-b::before { content: '2P'; }
#wyr-content.wyr-design.wyrd-retroGaming .wyr-option-btn.rgw-long { font-size: 14px; }
#wyr-content.wyr-design.wyrd-retroGaming .wyr-option-btn.selected {
    background: var(--rgw-shade);
    box-shadow: inset 0 0 0 3px rgba(0,0,0,0), 0 0 16px var(--rgw-side);
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-option-btn.selected::after {
    content: 'YOUR PICK';
    position: absolute; right: 10px; top: -14px; padding: 6px 8px 5px 10px;
    background: var(--rgw-yellow); color: var(--rgw-bg); font-size: 10px; line-height: 10px;
    box-shadow: 0 0 0 4px var(--rgw-bg);
    animation: rgwPop 0.18s steps(3, end) backwards;
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-option-btn:active:not(:disabled) { transform: translateY(4px) scale(0.97); }
#wyr-content.wyr-design.wyrd-retroGaming .wyr-option-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
#wyr-content.wyr-design.wyrd-retroGaming .wyr-option-btn.selected:disabled { opacity: 1; }
#wyr-content.wyr-design.wyrd-retroGaming .wyr-or {
    display: flex; align-items: center; gap: 14px; margin: 18px 0;
    color: var(--rgw-yellow); font-size: 20px; line-height: 20px; text-shadow: 0 0 10px rgba(255,230,41,0.6);
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-or::before,
#wyr-content.wyr-design.wyrd-retroGaming .wyr-or::after { content: ''; flex: 1 1 0; height: 4px; background: var(--rgw-wall); }
/* A new question slides in, stepped (the board's 0.3 s and 0.4 s). */
#wyr-content.wyr-design.wyrd-retroGaming.rgw-enter .wyr-option-btn.wyr-a { animation: rgwSlideIn 0.36s 0.3s steps(6, end) backwards; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-enter .wyr-option-btn.wyr-b { animation: rgwSlideIn 0.36s 0.4s steps(6, end) backwards; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-enter .wyr-or { animation: rgwPop 0.18s 0.4s steps(3, end) backwards; }

/* ── The status line, drawn per kind (the page's text is kept for screen
   readers' sake but sized away) ── */
#wyr-content.wyr-design.wyrd-retroGaming #wyr-status {
    margin: 28px 0 0; min-height: 44px; font-size: 0; line-height: 0; color: var(--rgw-white);
}
#wyr-content.wyr-design.wyrd-retroGaming #wyr-status::before,
#wyr-content.wyr-design.wyrd-retroGaming #wyr-status::after { display: block; white-space: pre; font-size: 13px; line-height: 22px; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="tap"] #wyr-status::before { content: 'TAP YOUR PICK'; animation: rgwBlink 1s steps(1, end) infinite; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="got"] #wyr-status::before,
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="gotlocked"] #wyr-status::before {
    content: 'GOT IT'; display: inline-block; padding-right: 32px;
    color: var(--rgw-green); text-shadow: 0 0 8px rgba(61,255,124,0.6);
    background: var(--rgw-check) right 0 top 2px / 22px 16px no-repeat; image-rendering: pixelated;
    animation: rgwGot 0.18s steps(1, end) backwards;
}
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="got"] #wyr-status::after { content: 'TAP THE OTHER SIDE\ATO SWITCH'; margin-top: 8px; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="gotlocked"] #wyr-status::after { content: 'YOUR VOTE IS\ALOCKED IN'; margin-top: 8px; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="saving"] #wyr-status::before { content: 'SAVING...'; color: var(--rgw-lav); }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="paused"] #wyr-status::before { content: 'VOTING IS PAUSED'; color: var(--rgw-yellow); }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="timeup"] #wyr-status::before {
    content: "TIME'S UP!"; color: var(--rgw-red); text-shadow: 0 0 8px rgba(255,49,88,0.6); font-size: 16px;
}
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="timeup"] #wyr-status::after { content: 'VOTING HAS CLOSED'; margin-top: 8px; }
/* The result's LOCKED IN!, once the payoff has landed. */
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="result"] #wyr-status { margin-top: 26px; min-height: 22px; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="result"] #wyr-status::before {
    content: 'LOCKED IN!'; color: var(--rgw-yellow); text-shadow: 0 0 10px rgba(255,230,41,0.6);
}
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="result"].rgw-anim #wyr-status::before { animation: rgwShowAt 0.9s steps(1, end) backwards; }
/* A held result: the LOCKED IN! card, the pick, then (for the reveal) the
   wait. */
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="beat"] #wyr-status,
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] #wyr-status { margin: 24px 8px 0; min-height: 0; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="beat"] #wyr-status::before,
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] #wyr-status::before {
    content: 'LOCKED IN!';
    padding: 22px 14px; font-size: 20px; line-height: 32px;
    color: var(--rgw-yellow);
    background: #2A1800; border: 6px solid var(--rgw-yellow);
    box-shadow: inset 0 0 0 6px var(--rgw-orange), 0 0 14px rgba(255,180,0,0.45);
    transform: rotate(-3deg);
    animation: rgwSlam 0.46s steps(3, end) backwards;
}
/* The beat's LOCKED IN! lands inside the phones' hold (0.34 s). */
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="beat"] #wyr-status::before { animation-duration: 0.3s; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="beat"] #wyr-options.rgw-current,
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] #wyr-options.rgw-current { display: flex !important; margin: 44px 8px 0; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="beat"] #wyr-options .wyr-option-btn:not(.selected),
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] #wyr-options .wyr-option-btn:not(.selected),
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="beat"] #wyr-options .wyr-or,
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] #wyr-options .wyr-or { display: none; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="beat"] #wyr-options .wyr-option-btn.selected,
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] #wyr-options .wyr-option-btn.selected {
    min-height: 0; padding: 12px 14px; font-size: 15px; line-height: 1.4; opacity: 1;
    background: var(--rgw-shade); box-shadow: none; pointer-events: none;
    transform: rotate(2deg);
    animation: rgwPickIn 0.28s 0.5s steps(4, end) backwards;
}
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="beat"] #wyr-options .wyr-option-btn.selected::before,
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] #wyr-options .wyr-option-btn.selected::before { width: 40px; height: 40px; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="beat"] #wyr-options .wyr-option-btn.selected::after,
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] #wyr-options .wyr-option-btn.selected::after {
    left: 0; right: 0; top: -28px; padding: 0; text-align: center;
    background: none; box-shadow: none; color: var(--rgw-lav); animation: none;
}

/* ── The invader under the status, and the reveal's wait ── */
#wyr-content .rgw-deco { display: none; }
#wyr-content.wyr-design.wyrd-retroGaming .rgw-deco {
    display: block; height: 48px; margin: 18px auto 0; width: 60px;
    background: var(--rgw-inv-cyan) center / 60px 48px no-repeat; image-rendering: pixelated;
    animation: rgwBob 0.8s steps(1, end) infinite;
}
#wyr-content.wyr-design.wyrd-retroGaming:has(.wyr-option-btn.wyr-b.selected) .rgw-deco { background-image: var(--rgw-inv-red); }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="result"] .rgw-deco,
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="beat"] .rgw-deco,
#wyr-content.wyr-design.wyrd-retroGaming:not([data-rgw]) .rgw-deco { display: none; }
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] .rgw-deco {
    width: auto; height: auto; margin: 28px 8px 0; padding-bottom: 70px;
    background: var(--rgw-inv-green) center bottom / 60px 48px no-repeat;
    animation: rgwSlideUp 0.42s 0.6s steps(6, end) backwards;
}
#wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] .rgw-deco::before {
    content: 'WAITING FOR\ATHE REVEAL...'; white-space: pre; font-size: 12px; line-height: 20px; color: var(--rgw-white);
}

/* ── The result: labels, the bar, the numbers, the payoff ── */
#wyr-content.wyr-design.wyrd-retroGaming #wyr-result[style*="block"] { display: flex !important; flex-direction: column; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-result > .rgw-out { order: 4; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-result > .wyr-winner { order: 5; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-result > .wyr-result-labels { order: 1; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-result > .wyr-result-bar { order: 2; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-result > .wyr-result-bar + .wyr-result-labels { order: 3; }
/* The two options, 1P over 2P. */
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-labels:not(.wyr-result-bar + .wyr-result-labels) {
    display: flex; flex-direction: column; gap: 10px;
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-labels:not(.wyr-result-bar + .wyr-result-labels) > span {
    --rgw-side: var(--rgw-cyan);
    display: flex; align-items: center; gap: 10px; padding: 12px 10px;
    border: 4px solid var(--rgw-side); background: var(--rgw-cyan-fill);
    color: var(--rgw-white); font-size: 13px; line-height: 20px; text-align: left; overflow-wrap: anywhere;
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-labels:not(.wyr-result-bar + .wyr-result-labels) > .wyr-b-label {
    --rgw-side: var(--rgw-red); background: var(--rgw-red-fill);
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-labels:not(.wyr-result-bar + .wyr-result-labels) > span::before {
    content: '1P';
    flex: 0 0 auto; width: 30px; height: 30px; padding-left: 2px;
    display: flex; align-items: center; justify-content: center;
    background: var(--rgw-side); color: var(--rgw-bg); font-size: 10px; line-height: 10px;
    clip-path: var(--rgw-notch);
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-labels:not(.wyr-result-bar + .wyr-result-labels) > .wyr-b-label::before { content: '2P'; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .wyr-result-labels:not(.wyr-result-bar + .wyr-result-labels) > .wyr-a-label { animation: rgwSlideIn 0.3s steps(6, end) backwards; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .wyr-result-labels:not(.wyr-result-bar + .wyr-result-labels) > .wyr-b-label { animation: rgwSlideIn 0.3s 0.06s steps(6, end) backwards; }
/* The tug-of-war: both sides light segment by segment from their ends. */
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-bar {
    position: relative; display: flex; justify-content: space-between;
    height: 40px; margin: 30px 0 14px; border-radius: 0; overflow: visible;
    border: 4px solid var(--rgw-wall); box-shadow: 0 0 8px rgba(51,72,255,0.6); background: var(--rgw-unlit);
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-bar::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(to right, rgba(0,0,0,0) 0 14px, var(--rgw-bg) 14px 18px);
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-bar .wyr-a-fill { background: var(--rgw-cyan); }
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-bar .wyr-b-fill { position: relative; background: var(--rgw-red); }
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-bar .wyr-b-fill::before {
    content: ''; position: absolute; z-index: 1; left: -4px; top: -10px; width: 8px; height: 44px;
    background: #FFFFFF; box-shadow: 0 0 8px #FFFFFF;
}
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .wyr-result-bar .wyr-a-fill,
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .wyr-result-bar .wyr-b-fill { animation: rgwFill 0.35s 0.15s steps(8, end) backwards; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .wyr-result-bar .wyr-b-fill::before { animation: rgwShowAt 0.5s steps(1, end) backwards; }
/* The numbers, counted up by the script with the fill. */
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-bar + .wyr-result-labels {
    display: flex; justify-content: space-between; font-size: 17px; line-height: 17px; white-space: pre;
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-bar + .wyr-result-labels .wyr-a-label { color: var(--rgw-cyan); text-shadow: 0 0 8px rgba(43,228,255,0.6); }
#wyr-content.wyr-design.wyrd-retroGaming .wyr-result-bar + .wyr-result-labels .wyr-b-label { color: var(--rgw-red); text-shadow: 0 0 8px rgba(255,49,88,0.6); }
/* The payoff: the crown drops on the winning option's box and WINS!
   slams; a tie's invaders march in round a star and TIED! slams. It lands
   0.7 s after it shows (WINS! slammed, 0.48 + 0.22 s), as the display's
   crown and WINNER come to rest; TIED! lands 0.18 s sooner, as the
   display's does (WouldYouRatherRetroGamingDesign.phoneResultLanding; the
   tests read these timings). The Mac's resultsDelayMs is each beat less
   0.7 s, so the landing is the projector's, LOCKED IN! still first. */
#wyr-content.wyr-design.wyrd-retroGaming .rgw-out {
    display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 36px;
}
#wyr-content.wyr-design.wyrd-retroGaming .rgw-crown {
    display: block; width: 78px; height: 42px;
    background: var(--rgw-crown) center / 78px 42px no-repeat; image-rendering: pixelated;
    filter: drop-shadow(0 0 8px rgba(255,230,41,0.7));
}
#wyr-content.wyr-design.wyrd-retroGaming .rgw-box {
    --rgw-side: var(--rgw-cyan);
    width: 100%; padding: 16px 12px 18px;
    background: var(--rgw-cyan-fill); border: 6px solid var(--rgw-white);
    box-shadow: inset 0 0 0 6px var(--rgw-side), 0 0 16px var(--rgw-side);
    color: var(--rgw-white); font-size: 16px; line-height: 24px; overflow-wrap: anywhere;
}
#wyr-content.wyr-design.wyrd-retroGaming .rgw-b .rgw-box { --rgw-side: var(--rgw-red); background: var(--rgw-red-fill); }
#wyr-content.wyr-design.wyrd-retroGaming .rgw-pair { display: flex; align-items: flex-end; gap: 22px; height: 48px; }
#wyr-content.wyr-design.wyrd-retroGaming .rgw-inv {
    display: block; width: 60px; height: 48px; background: var(--rgw-inv-cyan) center / 60px 48px no-repeat; image-rendering: pixelated;
    animation: rgwBob 0.8s steps(1, end) infinite;
}
#wyr-content.wyr-design.wyrd-retroGaming .rgw-inv.rgw-inv-b { background-image: var(--rgw-inv-red); animation-delay: -0.4s; }
#wyr-content.wyr-design.wyrd-retroGaming .rgw-plus {
    display: block; width: 30px; height: 30px; margin-bottom: 9px;
    background: var(--rgw-plus) center / 30px 30px no-repeat; image-rendering: pixelated;
}
#wyr-content.wyr-design.wyrd-retroGaming .wyr-winner {
    margin-top: 16px; font-size: 34px; line-height: 34px; white-space: pre;
    background: linear-gradient(to bottom, #FFE629 0 13px, #FF9A1F 13px 21px, #FF3158 21px 34px);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(3px 3px 0 #7A1FB0) drop-shadow(3px 3px 0 #2A0650);
}
#wyr-content.wyr-design.wyrd-retroGaming .rgw-tie ~ .wyr-winner { margin-top: 26px; }
#wyr-content.wyr-design.wyrd-retroGaming .rgw-out.rgw-none ~ .wyr-winner {
    font-size: 14px; line-height: 22px; white-space: normal; background: none; color: var(--rgw-lav); filter: none;
}
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .rgw-crown { animation: rgwCrown 0.3s 0.3s cubic-bezier(0.3, 1.5, 0.5, 1) backwards, rgwShowAt 0.3s steps(1, end) backwards; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .rgw-box { animation: rgwBox 0.18s 0.42s steps(3, end) backwards, rgwShowAt 0.35s steps(1, end) backwards; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .rgw-win ~ .wyr-winner { animation: rgwSlamBig 0.22s 0.48s steps(3, end) backwards, rgwShowAt 0.4s steps(1, end) backwards; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .rgw-tie ~ .wyr-winner { animation: rgwSlamBig 0.22s 0.3s steps(3, end) backwards, rgwShowAt 0.22s steps(1, end) backwards; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .rgw-none ~ .wyr-winner { animation: rgwShowAt 0.7s steps(1, end) backwards; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .rgw-inv-a { animation: rgwFromLeft 0.3s 0.1s steps(7, end) backwards, rgwBob 0.8s 0.4s steps(1, end) infinite; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .rgw-inv-b { animation: rgwFromRight 0.3s 0.1s steps(7, end) backwards, rgwBob 0.8s 0.8s steps(1, end) infinite; }
#wyr-content.wyr-design.wyrd-retroGaming.rgw-anim .rgw-plus { animation: rgwSpin 0.2s 0.25s steps(5, end) backwards; }

/* Long options take a compact result. */
#wyr-content.wyr-design.wyrd-retroGaming #wyr-result.rgw-long .wyr-result-labels:not(.wyr-result-bar + .wyr-result-labels) > span { padding: 8px 8px; font-size: 10px; line-height: 15px; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-result.rgw-long .wyr-result-bar { margin: 20px 0 12px; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-result.rgw-long .rgw-out { margin-top: 18px; gap: 10px; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-result.rgw-long .rgw-box { padding: 10px 10px 12px; font-size: 12px; line-height: 18px; }
#wyr-content.wyr-design.wyrd-retroGaming #wyr-result.rgw-long .wyr-winner { margin-top: 12px; }

/* ── A short screen (375×667 and smaller): the same screens, tighter ── */
@media (max-height: 740px) {
    #wyr-content.wyr-design.wyrd-retroGaming #wyr-question { margin: 14px 0 16px; }
    #wyr-content.wyr-design.wyrd-retroGaming #wyr-timer { margin-bottom: 16px; }
    #wyr-content.wyr-design.wyrd-retroGaming .wyr-option-btn { min-height: 118px; font-size: 16px; }
    #wyr-content.wyr-design.wyrd-retroGaming .wyr-option-btn.rgw-long { font-size: 13px; }
    #wyr-content.wyr-design.wyrd-retroGaming .wyr-or { margin: 12px 0; }
    #wyr-content.wyr-design.wyrd-retroGaming #wyr-status { margin-top: 18px; }
    #wyr-content.wyr-design.wyrd-retroGaming .rgw-deco { margin-top: 10px; }
    #wyr-content.wyr-design.wyrd-retroGaming .wyr-result-bar { margin: 20px 0 12px; }
    #wyr-content.wyr-design.wyrd-retroGaming .rgw-out { margin-top: 22px; gap: 12px; }
    #wyr-content.wyr-design.wyrd-retroGaming[data-rgw="result"] #wyr-status { margin-top: 16px; }
    #wyr-content.wyr-design.wyrd-retroGaming[data-rgw="reveal"] #wyr-options.rgw-current { margin-top: 36px; }
}

@keyframes rgwSlideIn { from { transform: translateX(420px); } to { transform: none; } }
@keyframes rgwFromLeft { from { transform: translateX(-260px); } to { transform: none; } }
@keyframes rgwFromRight { from { transform: translateX(260px); } to { transform: none; } }
@keyframes rgwSlideUp { from { transform: translateY(400px); } to { transform: none; } }
@keyframes rgwPop { from { transform: scale(0); } to { transform: none; } }
@keyframes rgwGot { 0% { transform: scale(0.6); } 33% { transform: scale(1.15); } 66% { transform: none; } 100% { transform: none; } }
@keyframes rgwDrop { from { transform: translateY(-420px); } to { transform: none; } }
@keyframes rgwBlink { 0% { visibility: visible; } 72% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes rgwBob { 0% { transform: none; } 25% { transform: translateY(-3px); } 50% { transform: translateY(-6px); } 75% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes rgwShowAt { 0% { visibility: hidden; } 100% { visibility: visible; } }
@keyframes rgwFill { from { width: 0; } }
@keyframes rgwSlam { 0% { transform: rotate(-3deg) scale(2.4); } 43% { transform: rotate(-3deg) scale(2.4); } 100% { transform: rotate(-3deg); } }
@keyframes rgwPickIn { from { transform: rotate(-20deg) scale(0); } to { transform: rotate(2deg); } }
@keyframes rgwCrown { from { transform: translateY(-300px); } to { transform: none; } }
@keyframes rgwBox { from { transform: scale(1.5); } to { transform: none; } }
@keyframes rgwSlamBig { from { transform: scale(2.6); } to { transform: none; } }
@keyframes rgwSpin { from { transform: rotate(-180deg) scale(0); } to { transform: none; } }
@keyframes rgwTickWarn { 0% { transform: rotate(3deg) scale(1.03); } 50% { transform: rotate(3deg) scale(1.06); } 100% { transform: none; } }
@keyframes rgwTickUrgent { 0% { transform: translateX(4px) rotate(3deg) scale(1.05); } 50% { transform: translateX(8px) rotate(6deg) scale(1.1); } 100% { transform: none; } }