/* Live Ranking · Retro Gaming phone skin (owner decision 2026-10-06): the
   canvas's PR-Ranking-RetroGaming Phone board and the phone half of its
   animation board, on Live Trivia's coin-op cabinet. Every rule is scoped to
   #ranking-content.ranking-design.rkd-retroGaming, so the classic screens
   (no .ranking-design) and every other feature are untouched.

   The shared ranking screens are restyled from their own elements: each
   item's colour comes from its place in the document (data-index 0…7, the
   display's palette, RankingRetroGamingDesign.Palette), the number box,
   colour strip, name and pixel grip; the yellow SUBMIT RANKING button; and
   #ranking-submitted as RANKING SUBMITTED! (a green check) or RANKING
   CLOSED (a red X), which /ranking-designs/retro-gaming.js tells apart
   (data-rgr on #ranking-content). The script also marks a new ranking
   (.rgr-enter) so the list's entry plays once, not on every re-render.
   Press Start 2P is self-hosted (SIL OFL). Every motion is stepped
   (steps()) like the display, or a short drop with a bounce. Legibility
   (the trivia skin's rule): solid dark panels, bright text, nothing over
   the text.

   RANKING CLOSED lands 0.76 s after it shows (the heading stamped down,
   0.5 + 0.26 s; the X dropped by 0.48 s), and the Mac's stopDelayMs holds
   it until the display's NEW HIGH SCORE! crown lands, less those 0.76 s
   (RankingRetroGamingDesign.phoneClosedLanding; the tests read these
   timings). */

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

#ranking-content.ranking-design.rkd-retroGaming {
    --rgr-bg: #07031C; --rgr-panel: #0B0730; --rgr-wall: #3348FF; --rgr-slot: #05020F;
    --rgr-yellow: #FFE629; --rgr-orange: #FF9A1F; --rgr-red: #FF3158; --rgr-green: #3DFF7C;
    --rgr-cyan: #2BE4FF; --rgr-white: #F5F2FF; --rgr-lav: #B4AEE8; --rgr-grey: #36325A;
    --rgr-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");
    --rgr-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");
    --rgr-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");
    --rgr-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");
    --rgr-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1h-2zM6 0h2v1h-2zM0 1h3v1h-3zM5 1h3v1h-3zM1 2h6v1h-6zM2 3h4v1h-4zM2 4h4v1h-4zM1 5h6v1h-6zM0 6h3v1h-3zM5 6h3v1h-3zM0 7h2v1h-2zM6 7h2v1h-2z' fill='%23FF3158'/%3E%3C/svg%3E");
    --rgr-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1h-7zM0 2h7v1h-7zM0 4h7v1h-7z' fill='%23B4AEE8'/%3E%3C/svg%3E");

    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    min-height: calc(100dvh - 24px);
    margin: -8px -16px;
    overflow: hidden;
    overflow: clip;
    padding: 18px 14px 18px;
    font-family: 'Press Start 2P', ui-monospace, monospace;
    font-weight: 400;
    color: var(--rgr-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(--rgr-wall);
    box-shadow: inset 0 0 0 6px var(--rgr-bg), inset 0 0 0 9px var(--rgr-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(--rgr-bg);
}
/* The page hides the screen with an inline display: none. */
#ranking-content.ranking-design.rkd-retroGaming[style*="none"] { display: none !important; }
#ranking-content.ranking-design.rkd-retroGaming * { font-family: inherit; font-weight: 400; }

/* ── The marquee: the prompt in the cabinet's banded lettering ── */
#ranking-content.ranking-design.rkd-retroGaming #ranking-question {
    margin: 14px 4px 14px; font-size: 20px; line-height: 30px; text-wrap: balance; overflow-wrap: anywhere;
    background: repeating-linear-gradient(to bottom, #FFE629 0 12px, #FF9A1F 12px 18px, #FF3158 18px 30px);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    filter: drop-shadow(3px 3px 0 #7A1FB0) drop-shadow(3px 3px 0 #2A0650);
}
/* A long prompt takes a smaller face (the script tags it). */
#ranking-content.ranking-design.rkd-retroGaming.rgr-longq #ranking-question {
    font-size: 16px; line-height: 24px;
    background: repeating-linear-gradient(to bottom, #FFE629 0 10px, #FF9A1F 10px 14px, #FF3158 14px 24px);
    -webkit-background-clip: text; background-clip: text;
}
/* The end screens stand alone (the board's SUBMITTED and CLOSED). */
#ranking-content.ranking-design.rkd-retroGaming:has(#ranking-submitted[style*="block"]) #ranking-question { display: none; }
#ranking-content.ranking-design.rkd-retroGaming .ranking-instruction {
    margin: 0 0 16px; font-size: 10px; line-height: 17px; color: var(--rgr-lav);
}

/* ── The list: one pixel-framed row per option, coloured by its place ── */
#ranking-content.ranking-design.rkd-retroGaming .ranking-list { gap: 8px; margin-bottom: 16px; }
#ranking-content.ranking-design.rkd-retroGaming .ranking-item {
    --rgr-c: var(--rgr-red);
    box-sizing: border-box; min-height: 58px; gap: 6px; padding: 0 8px 0 6px;
    border: 4px solid var(--rgr-c); border-radius: 0;
    background: var(--rgr-panel);
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}
#ranking-content.ranking-design.rkd-retroGaming .ranking-item[data-index="1"] { --rgr-c: #2BE4FF; }
#ranking-content.ranking-design.rkd-retroGaming .ranking-item[data-index="2"] { --rgr-c: #FFE629; }
#ranking-content.ranking-design.rkd-retroGaming .ranking-item[data-index="3"] { --rgr-c: #3DFF7C; }
#ranking-content.ranking-design.rkd-retroGaming .ranking-item[data-index="4"] { --rgr-c: #FF5FD2; }
#ranking-content.ranking-design.rkd-retroGaming .ranking-item[data-index="5"] { --rgr-c: #FF9A1F; }
#ranking-content.ranking-design.rkd-retroGaming .ranking-item[data-index="6"] { --rgr-c: #9D6BFF; }
#ranking-content.ranking-design.rkd-retroGaming .ranking-item[data-index="7"] { --rgr-c: #B4AEE8; }
#ranking-content.ranking-design.rkd-retroGaming .ranking-item .rank-number {
    flex: 0 0 auto; box-sizing: border-box; width: 40px; min-width: 40px; height: 40px; padding-left: 3px;
    display: flex; align-items: center; justify-content: center;
    background: var(--rgr-slot); color: var(--rgr-yellow); font-size: 18px; line-height: 18px;
}
#ranking-content.ranking-design.rkd-retroGaming .ranking-item .rank-color {
    width: 8px; height: 40px; border-radius: 0; background: var(--rgr-c);
}
#ranking-content.ranking-design.rkd-retroGaming .ranking-item .rank-name {
    min-width: 0; font-size: 13px; line-height: 18px; color: var(--rgr-white); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
#ranking-content.ranking-design.rkd-retroGaming .ranking-item .drag-handle {
    flex: 0 0 auto; width: 21px; height: 15px; font-size: 0; color: transparent;
    background: var(--rgr-grip) center / 21px 15px no-repeat; image-rendering: pixelated;
}
/* A lifted row glows yellow over a hard purple drop (the board's drag). */
#ranking-content.ranking-design.rkd-retroGaming .ranking-item.dragging {
    opacity: 1; box-shadow: 0 0 14px var(--rgr-yellow), 8px 8px 0 #2A0650;
}
/* The rows it passes step aside in three 8-bit frames. */
#ranking-content.ranking-design.rkd-retroGaming .ranking-item.displaced { transition: transform 0.18s steps(3, end); }
#ranking-content.ranking-design.rkd-retroGaming .ranking-item.settling { transition: transform 0.15s steps(3, end); }

/* 6+ options: the page's compact rows (44 px, the touch minimum). */
#ranking-content.ranking-design.rkd-retroGaming.compact #ranking-question { margin: 8px 4px 10px; font-size: 16px; line-height: 24px;
    background: repeating-linear-gradient(to bottom, #FFE629 0 10px, #FF9A1F 10px 14px, #FF3158 14px 24px);
    -webkit-background-clip: text; background-clip: text; }
#ranking-content.ranking-design.rkd-retroGaming.compact .ranking-instruction { margin-bottom: 10px; }
#ranking-content.ranking-design.rkd-retroGaming.compact .ranking-list { margin-bottom: 12px; }
#ranking-content.ranking-design.rkd-retroGaming.compact .ranking-item { min-height: 44px; padding: 0 8px 0 4px; }
#ranking-content.ranking-design.rkd-retroGaming.compact .ranking-item .rank-number { width: 30px; min-width: 30px; height: 30px; font-size: 14px; line-height: 14px; }
#ranking-content.ranking-design.rkd-retroGaming.compact .ranking-item .rank-color { height: 28px; }
#ranking-content.ranking-design.rkd-retroGaming.compact .ranking-item .rank-name { font-size: 11px; line-height: 14px; }

/* ── SUBMIT RANKING: a yellow arcade button ── */
#ranking-content.ranking-design.rkd-retroGaming .ranking-submit-btn {
    height: 58px; padding: 4px 0 0 4px; border: 0; border-radius: 0;
    background: var(--rgr-yellow); color: var(--rgr-bg);
    font-size: 16px; line-height: 16px; text-transform: uppercase;
    box-shadow: inset -5px -5px 0 rgba(0,0,0,0.35), inset 5px 5px 0 rgba(255,255,255,0.5), 0 0 12px rgba(255,230,41,0.55);
    transition: none;
}
#ranking-content.ranking-design.rkd-retroGaming .ranking-submit-btn:active { transform: translateY(4px) scale(0.97); }
#ranking-content.ranking-design.rkd-retroGaming .ranking-submit-btn:disabled {
    opacity: 1; background: var(--rgr-grey); color: var(--rgr-lav); box-shadow: none;
}
#ranking-content.ranking-design.rkd-retroGaming.compact .ranking-submit-btn { height: 50px; }

/* The invader under the list (hidden while submitted or closed, and on a
   short screen with a long list). */
#ranking-content.ranking-design.rkd-retroGaming::after {
    content: ''; order: 9; display: block; flex: 0 0 auto;
    width: 60px; height: 48px; margin: 26px auto 0;
    background: var(--rgr-inv-cyan) center / 60px 48px no-repeat; image-rendering: pixelated;
    animation: rgrBob 0.8s steps(1, end) infinite;
}
#ranking-content.ranking-design.rkd-retroGaming.compact::after,
#ranking-content.ranking-design.rkd-retroGaming:has(#ranking-submitted[style*="block"])::after { display: none; }

/* A new ranking: the heading drops in, the rows slide in one after
   another, the button rises (the board's phone entry). */
#ranking-content.ranking-design.rkd-retroGaming.rgr-enter #ranking-question,
#ranking-content.ranking-design.rkd-retroGaming.rgr-enter .ranking-instruction { animation: rgrDrop 0.36s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
#ranking-content.ranking-design.rkd-retroGaming.rgr-enter .ranking-item { animation: rgrSlideIn 0.36s 0.3s steps(6, end) backwards; }
#ranking-content.ranking-design.rkd-retroGaming.rgr-enter .ranking-item:nth-child(2) { animation-delay: 0.38s; }
#ranking-content.ranking-design.rkd-retroGaming.rgr-enter .ranking-item:nth-child(3) { animation-delay: 0.46s; }
#ranking-content.ranking-design.rkd-retroGaming.rgr-enter .ranking-item:nth-child(4) { animation-delay: 0.54s; }
#ranking-content.ranking-design.rkd-retroGaming.rgr-enter .ranking-item:nth-child(5) { animation-delay: 0.62s; }
#ranking-content.ranking-design.rkd-retroGaming.rgr-enter .ranking-item:nth-child(6) { animation-delay: 0.7s; }
#ranking-content.ranking-design.rkd-retroGaming.rgr-enter .ranking-item:nth-child(7) { animation-delay: 0.78s; }
#ranking-content.ranking-design.rkd-retroGaming.rgr-enter .ranking-item:nth-child(8) { animation-delay: 0.86s; }
#ranking-content.ranking-design.rkd-retroGaming.rgr-enter .ranking-submit-btn { animation: rgrRise 0.3s 0.75s steps(5, end) backwards; }

/* ── RANKING SUBMITTED! / RANKING CLOSED ── */
#ranking-content.ranking-design.rkd-retroGaming .ranking-submitted { padding: 54px 4px 0; }
/* The page's ✓ becomes the badge: a dark box in a pixel frame with the
   check (or the X) inside. */
#ranking-content.ranking-design.rkd-retroGaming .ranking-submitted > div:first-child {
    position: relative; box-sizing: border-box; width: 180px; height: 150px;
    margin: 0 auto !important; font-size: 0 !important; color: transparent;
}
#ranking-content.ranking-design.rkd-retroGaming .ranking-submitted > div:first-child::before {
    content: ''; position: absolute; inset: 0; box-sizing: border-box;
    background: var(--rgr-slot) var(--rgr-check) center / 99px 72px no-repeat; image-rendering: pixelated;
    border: 6px solid var(--rgr-green);
    box-shadow: inset 0 0 0 6px #0F6B33, 0 0 14px var(--rgr-green);
}
#ranking-content.ranking-design.rkd-retroGaming[data-rgr="closed"] .ranking-submitted > div:first-child::before {
    background-image: var(--rgr-x); background-size: 72px 72px;
    border-color: var(--rgr-red);
    box-shadow: inset 0 0 0 6px #8A0F2A, 0 0 14px var(--rgr-red);
}
#ranking-content.ranking-design.rkd-retroGaming .ranking-submitted h2 {
    margin: 46px 0 0; font-size: 24px; line-height: 36px; text-wrap: balance;
    background: repeating-linear-gradient(to bottom, #FFE629 0 15px, #FF9A1F 15px 21px, #FF3158 21px 36px);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    filter: drop-shadow(3px 3px 0 #7A1FB0) drop-shadow(3px 3px 0 #2A0650);
    transform: rotate(-3deg);
}
#ranking-content.ranking-design.rkd-retroGaming .ranking-submitted p {
    margin-top: 30px; font-size: 12px; line-height: 20px; color: var(--rgr-white);
}
/* The invader under it: green for submitted, red for closed. */
#ranking-content.ranking-design.rkd-retroGaming .ranking-submitted::after {
    content: ''; display: block; width: 72px; height: 58px; margin: 42px auto 0;
    background: var(--rgr-inv-green) center / 72px 58px no-repeat; image-rendering: pixelated;
    animation: rgrBob 0.8s steps(1, end) infinite;
}
#ranking-content.ranking-design.rkd-retroGaming[data-rgr="closed"] .ranking-submitted::after { background-image: var(--rgr-inv-red); }

/* Submitted: the badge spins in, the heading stamps down at 0.4 s and has
   landed by 0.66 s, the line rises. */
#ranking-content.ranking-design.rkd-retroGaming .ranking-submitted > div:first-child::before { animation: rgrSpin 0.38s steps(6, end) backwards; }
#ranking-content.ranking-design.rkd-retroGaming .ranking-submitted h2 { animation: rgrShowAt 0.2s steps(1, end) backwards, rgrStamp 0.26s 0.4s steps(3, end) backwards; }
#ranking-content.ranking-design.rkd-retroGaming .ranking-submitted p { animation: rgrRise 0.36s 0.55s steps(6, end) backwards; }
/* Closed: the X drops in with a bounce and shakes, the heading shows at
   0.3 s and stamps down from 0.5 s, landed at 0.76 s, the line rises. */
#ranking-content.ranking-design.rkd-retroGaming[data-rgr="closed"] .ranking-submitted > div:first-child { animation: rgrDropBadge 0.48s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
#ranking-content.ranking-design.rkd-retroGaming[data-rgr="closed"] .ranking-submitted > div:first-child::before { animation: rgrShake 0.36s 0.5s steps(1, end); }
#ranking-content.ranking-design.rkd-retroGaming[data-rgr="closed"] .ranking-submitted h2 { animation: rgrShowAt 0.3s steps(1, end) backwards, rgrStamp 0.26s 0.5s steps(3, end) backwards; }
#ranking-content.ranking-design.rkd-retroGaming[data-rgr="closed"] .ranking-submitted p { animation: rgrRise 0.36s 0.6s steps(6, end) backwards; }

/* ── A short screen (375×667 and smaller): the same screens, tighter ── */
@media (max-height: 740px) {
    #ranking-content.ranking-design.rkd-retroGaming { padding-top: 12px; }
    #ranking-content.ranking-design.rkd-retroGaming #ranking-question { margin: 8px 4px 10px; }
    #ranking-content.ranking-design.rkd-retroGaming .ranking-instruction { margin-bottom: 12px; }
    #ranking-content.ranking-design.rkd-retroGaming .ranking-item { min-height: 52px; }
    #ranking-content.ranking-design.rkd-retroGaming.compact .ranking-item { min-height: 44px; }
    /* The page shows the line with an inline display: block. */
    #ranking-content.ranking-design.rkd-retroGaming.compact .ranking-instruction { display: none !important; }
    #ranking-content.ranking-design.rkd-retroGaming.rgr-longq #ranking-question { font-size: 14px; line-height: 21px;
        background: repeating-linear-gradient(to bottom, #FFE629 0 9px, #FF9A1F 9px 13px, #FF3158 13px 21px);
        -webkit-background-clip: text; background-clip: text; }
    #ranking-content.ranking-design.rkd-retroGaming::after { margin-top: 16px; }
    #ranking-content.ranking-design.rkd-retroGaming .ranking-submitted { padding-top: 30px; }
    #ranking-content.ranking-design.rkd-retroGaming .ranking-submitted h2 { margin-top: 34px; }
    #ranking-content.ranking-design.rkd-retroGaming .ranking-submitted::after { margin-top: 30px; }
}

@keyframes rgrSlideIn { from { transform: translateX(420px); } to { transform: none; } }
@keyframes rgrDrop { from { transform: translateY(-300px); } to { transform: none; } }
@keyframes rgrRise { from { transform: translateY(300px); } to { transform: none; } }
@keyframes rgrBob { 0% { transform: none; } 25% { transform: translateY(-3px); } 50% { transform: translateY(-6px); } 75% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes rgrShowAt { 0% { visibility: hidden; } 100% { visibility: visible; } }
@keyframes rgrSpin { from { transform: rotate(-180deg) scale(0); } to { transform: none; } }
@keyframes rgrStamp { from { transform: rotate(-3deg) scale(1.6); } to { transform: rotate(-3deg); } }
@keyframes rgrDropBadge { from { transform: translateY(-300px); } to { transform: none; } }
@keyframes rgrShake {
    0% { transform: translateX(-6px); } 16.6% { transform: translateX(6px); } 33.3% { transform: translateX(-6px); }
    50% { transform: translateX(6px); } 66.6% { transform: translateX(-6px); } 83.3% { transform: translateX(6px); }
    100% { transform: none; }
}