/* Live Ranking · Pop Quiz phone skin (owner decision 2026-10-06), from the canvas boards PR-Ranking-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 #ranking-content.ranking-design.rkd-popQuiz, so no other screen or feature is touched; the classic screens (no .ranking-design) never match. The screens: the prompt on the leaderboard's ink banner, the list as cream stickers (the phone's own order in an ink circle, the option's colour chip by its place in the document, the name, a drawn handle; the row being dragged lifts onto yellow), Submit on a yellow sticker, and the end screens: "Ranking submitted!" on a yellow burst with its check, "Ranking closed" on a red lock. The board's paused banner is out (owner decision 2026-10-06): a stop shows "Ranking closed", held back by index.html until the display's TOP PICK lands (stopDelayMs). /ranking-designs/pop-quiz.js decorates the screens (pqr-* classes): which entrances play (only when the screen or the ranking changes, never on a snapshot that only re-renders the list), which end screen shows, and the renumber bump while a row is dragged. 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). The drag code moves rows with `transform` (and measures them 8 px apart), so the entrances animate `translate` / `rotate` / `scale` instead and the list's gap stays 8 px. */ @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'); } #ranking-content.ranking-design.rkd-popQuiz { --pqr-ink: #14110D; --pqr-cream: #FFF4E0; --pqr-yellow: #FFD23F; --pqr-red: #FF4D5E; --pqr-caption: #D3CDC2; --pqr-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --pqr-slam: cubic-bezier(0.2, 1.4, 0.5, 1); --pqr-row: 72px; position: relative; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; color: var(--pqr-cream); text-align: center; margin: -8px -4px 0; padding: 22px 16px 20px; /* The panel fills the phone between the page's margins (732 on a 390×844 phone, as on the board). */ min-height: calc(100vh - 112px); min-height: calc(100dvh - 112px); box-sizing: border-box; border-radius: 26px; background: radial-gradient(rgba(255,255,255,0.09) 2px, transparent 2.5px) 0 0 / 22px 22px, radial-gradient(ellipse 80% 70% at 50% 40%, #202D4D, #070F22); overflow: hidden; } /* ── The prompt: the leaderboard's ink banner ── */ #ranking-content.ranking-design.rkd-popQuiz #ranking-question { display: table; max-width: 292px; margin: 0 auto 16px; padding: 6px 20px 10px; box-sizing: border-box; background: var(--pqr-ink); color: var(--pqr-cream); border-radius: 16px; box-shadow: 6px 6px 0 var(--pqr-yellow); transform: rotate(-2deg); font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 25px; line-height: 1.1; overflow-wrap: anywhere; } /* A long prompt (pop-quiz.js marks one over 48 characters) steps its type down. */ #ranking-content.ranking-design.rkd-popQuiz.pqr-long #ranking-question { font-size: 20px; } /* ── The instruction ── */ #ranking-content.ranking-design.rkd-popQuiz .ranking-instruction { max-width: 298px; margin: 0 auto 16px; color: var(--pqr-caption); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 21px; } /* ── The list: cream stickers, 8 px apart (initRankingDrag's measure) ── */ #ranking-content.ranking-design.rkd-popQuiz .ranking-list { gap: 8px; margin: 0 6px 22px 0; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item { --pqr-chip: #27AE60; height: var(--pqr-row); min-height: 0; box-sizing: border-box; gap: 11px; padding: 0 16px 0 10px; background: var(--pqr-cream); color: var(--pqr-ink); border: 4px solid var(--pqr-ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--pqr-ink); transition: background-color 0.12s ease, box-shadow 0.12s ease; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item[data-index="1"] { --pqr-chip: #E74C3C; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item[data-index="2"] { --pqr-chip: #3498DB; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item[data-index="3"] { --pqr-chip: #F39C12; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item[data-index="4"] { --pqr-chip: #9B59B6; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item[data-index="5"] { --pqr-chip: #1ABC9C; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item[data-index="6"] { --pqr-chip: #E84393; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item[data-index="7"] { --pqr-chip: #A3CB38; } /* The phone's own order, in an ink circle. */ #ranking-content.ranking-design.rkd-popQuiz .ranking-item .rank-number { flex: 0 0 auto; width: 44px; height: 44px; min-width: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pqr-ink); color: var(--pqr-cream); font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 23px; line-height: 1; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item .rank-number.pqr-bump { animation: pqrBump 0.24s var(--pqr-spring); } /* The option's colour, by its place in the document. */ #ranking-content.ranking-design.rkd-popQuiz .ranking-item .rank-color { width: 16px; height: 42px; box-sizing: border-box; background: var(--pqr-chip); border: 3px solid var(--pqr-ink); border-radius: 6px; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item .rank-name { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.1; color: var(--pqr-ink); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; } /* The handle: three drawn lines instead of the ☰ glyph. */ #ranking-content.ranking-design.rkd-popQuiz .ranking-item .drag-handle { width: 24px; height: 18px; font-size: 0; color: transparent; background: linear-gradient(var(--pqr-ink), var(--pqr-ink)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--pqr-ink), var(--pqr-ink)) 0 50% / 100% 3px no-repeat, linear-gradient(var(--pqr-ink), var(--pqr-ink)) 0 100% / 100% 3px no-repeat; border-radius: 2px; } /* The row being dragged lifts onto yellow (the drag owns `transform`). */ #ranking-content.ranking-design.rkd-popQuiz .ranking-item.dragging { opacity: 1; background: var(--pqr-yellow); box-shadow: 11px 11px 0 var(--pqr-ink); rotate: -3deg; } /* ── Submit ── */ #ranking-content.ranking-design.rkd-popQuiz .ranking-submit-btn { width: calc(100% - 6px); height: 66px; padding: 0 12px 4px; background: var(--pqr-yellow); color: var(--pqr-ink); border: 4px solid var(--pqr-ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--pqr-ink); rotate: -1deg; font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: 27px; line-height: 1; transition: transform 0.1s, box-shadow 0.1s; } #ranking-content.ranking-design.rkd-popQuiz .ranking-submit-btn:active:not(:disabled) { transform: translate(5px, 5px); box-shadow: 1px 1px 0 var(--pqr-ink); } #ranking-content.ranking-design.rkd-popQuiz .ranking-submit-btn:disabled { opacity: 1; background: #3A3A46; color: #9A9AA6; } /* ── The end screens: submitted (a burst and its check), closed (a red lock) ── */ #ranking-content.ranking-design.rkd-popQuiz .ranking-submitted { padding: 34px 0 20px; } #ranking-content.ranking-design.rkd-popQuiz .ranking-submitted > div:first-child { width: 200px; height: 200px; margin: 0 auto 34px !important; box-sizing: border-box; font-size: 0 !important; color: transparent; background: var(--pqr-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2314110D' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 92px 92px no-repeat; 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%); rotate: -6deg; } #ranking-content.ranking-design.rkd-popQuiz .ranking-submitted.pqr-closed > div:first-child { width: 170px; height: 170px; margin: 10px auto 46px !important; clip-path: none; border-radius: 50%; background: var(--pqr-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314110D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2.5' fill='%23FFF4E0'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 80px 80px no-repeat; border: 6px solid var(--pqr-ink); box-shadow: 7px 7px 0 var(--pqr-ink); rotate: 4deg; } #ranking-content.ranking-design.rkd-popQuiz .ranking-submitted h2 { margin: 0 -10px 14px; color: var(--pqr-cream); text-shadow: 3px 3px 0 var(--pqr-ink); font-family: 'Titan One', system-ui, sans-serif; font-weight: 400; font-size: clamp(25px, calc(8.4vw - 2px), 32px); line-height: 1.1; white-space: nowrap; rotate: -2deg; } #ranking-content.ranking-design.rkd-popQuiz .ranking-submitted p { margin: 0; color: var(--pqr-caption); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 19px; line-height: 1.3; } /* ── Entrances: only when a screen or a ranking arrives (.pqr-enter) ── */ #ranking-content.ranking-design.rkd-popQuiz.pqr-enter #ranking-question { animation: pqrDrop 0.5s var(--pqr-spring) backwards; } #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-instruction { animation: pqrPop 0.4s 0.25s var(--pqr-spring) backwards; } #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-item { animation: pqrDeal 0.5s 0.35s var(--pqr-spring) backwards; } #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-item:nth-child(2) { animation-delay: 0.43s; } #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-item:nth-child(3) { animation-delay: 0.51s; } #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-item:nth-child(4) { animation-delay: 0.59s; } #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-item:nth-child(5) { animation-delay: 0.67s; } #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-item:nth-child(6) { animation-delay: 0.75s; } #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-item:nth-child(7) { animation-delay: 0.83s; } #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-item:nth-child(8) { animation-delay: 0.91s; } #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-submit-btn { animation: pqrButton 0.45s 0.8s var(--pqr-spring) backwards; } /* The end screen lands 0.75 s after it shows: the title stamped on (0.3 + 0.45 s), the icon spun on (0.1 + 0.6 s) just before it (RankingPopQuizDesign.phoneClosedEntrance; the tests read these timings). The Mac's stopDelayMs is TOP PICK's landing less 0.75 s, so "Ranking closed" lands with the projector's TOP PICK. */ #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-submitted > div:first-child { animation: pqrSpin 0.6s 0.1s var(--pqr-spring) backwards; } #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-submitted h2 { animation: pqrStamp 0.45s 0.3s var(--pqr-slam) backwards, pqrAppear 0.01s 0.3s steps(1) backwards; } #ranking-content.ranking-design.rkd-popQuiz.pqr-enter .ranking-submitted p { animation: pqrPop 0.4s 0.5s var(--pqr-spring) backwards; } @keyframes pqrDrop { from { translate: 0 -120px; rotate: -4deg; } } @keyframes pqrPop { from { scale: 0; } } @keyframes pqrDeal { from { translate: 374px 0; rotate: 8deg; } } @keyframes pqrButton { from { scale: 0; rotate: 9deg; } } @keyframes pqrSpin { from { scale: 0; rotate: -180deg; } } @keyframes pqrStamp { from { scale: 1.8; rotate: -10deg; } } @keyframes pqrAppear { from { visibility: hidden; } to { visibility: visible; } } @keyframes pqrBump { 50% { scale: 1.25; } } /* ── 6+ options (index.html's .compact): shorter rows ── */ #ranking-content.ranking-design.rkd-popQuiz.compact { --pqr-row: 50px; } #ranking-content.ranking-design.rkd-popQuiz.compact #ranking-question { margin-bottom: 12px; } #ranking-content.ranking-design.rkd-popQuiz.compact .ranking-instruction { margin-bottom: 12px; } #ranking-content.ranking-design.rkd-popQuiz.compact .ranking-list { margin-bottom: 16px; } #ranking-content.ranking-design.rkd-popQuiz.compact .ranking-item { padding: 0 14px 0 8px; gap: 10px; border-radius: 14px; } #ranking-content.ranking-design.rkd-popQuiz.compact .ranking-item .rank-number { width: 34px; height: 34px; font-size: 18px; } #ranking-content.ranking-design.rkd-popQuiz.compact .ranking-item .rank-color { width: 14px; height: 30px; } #ranking-content.ranking-design.rkd-popQuiz.compact .ranking-item .rank-name { font-size: 18px; -webkit-line-clamp: 1; } /* ── Shorter phones: everything still fits one screen ── */ @media (max-height: 740px) { #ranking-content.ranking-design.rkd-popQuiz { --pqr-row: 56px; padding: 16px 14px 14px; } #ranking-content.ranking-design.rkd-popQuiz #ranking-question { font-size: 22px; margin-bottom: 10px; } #ranking-content.ranking-design.rkd-popQuiz .ranking-instruction { font-size: 14px; line-height: 18px; margin-bottom: 10px; } #ranking-content.ranking-design.rkd-popQuiz .ranking-list { margin-bottom: 14px; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item .rank-number { width: 38px; height: 38px; font-size: 20px; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item .rank-color { height: 34px; } #ranking-content.ranking-design.rkd-popQuiz .ranking-item .rank-name { font-size: 18px; } #ranking-content.ranking-design.rkd-popQuiz .ranking-submit-btn { height: 54px; font-size: 24px; } #ranking-content.ranking-design.rkd-popQuiz.pqr-long #ranking-question { font-size: 17px; } #ranking-content.ranking-design.rkd-popQuiz.compact { --pqr-row: 44px; padding-bottom: 10px; } #ranking-content.ranking-design.rkd-popQuiz.compact #ranking-question { margin-bottom: 8px; } #ranking-content.ranking-design.rkd-popQuiz.compact .ranking-list { margin-bottom: 10px; } /* Eight rows under a long prompt: the instruction gives way. */ #ranking-content.ranking-design.rkd-popQuiz.compact.pqr-long .ranking-instruction { display: none; } #ranking-content.ranking-design.rkd-popQuiz.compact .ranking-item .rank-number { width: 30px; height: 30px; font-size: 16px; } #ranking-content.ranking-design.rkd-popQuiz.compact .ranking-item .rank-color { height: 26px; } #ranking-content.ranking-design.rkd-popQuiz.compact .ranking-item .rank-name { font-size: 16px; } #ranking-content.ranking-design.rkd-popQuiz .ranking-submitted { padding-top: 20px; } #ranking-content.ranking-design.rkd-popQuiz .ranking-submitted > div:first-child { width: 170px; height: 170px; margin-bottom: 26px !important; } #ranking-content.ranking-design.rkd-popQuiz .ranking-submitted.pqr-closed > div:first-child { width: 146px; height: 146px; margin-bottom: 34px !important; background-size: 68px 68px; } } @media (prefers-reduced-motion: reduce) { #ranking-content.ranking-design.rkd-popQuiz *, #ranking-content.ranking-design.rkd-popQuiz *::before, #ranking-content.ranking-design.rkd-popQuiz *::after, #ranking-content.ranking-design.rkd-popQuiz { animation: none !important; transition: none !important; } }