/* Live Ranking · Cut & Paste phone skin (owner decision 2026-10-06; the
   canvas's PR-Ranking-CutAndPaste Phone and Anim boards). Every rule is
   scoped to #ranking-content.ranking-design.rkd-cutAndPaste, so no other
   screen or feature is touched; the classic screens (no .ranking-design)
   never match. What cut-and-paste.js adds is hidden outside it (.rkcap-only).

   A photocopied collage zine, as the display draws it: off-white copier
   paper with toner grain, "Live" on label tape and RANKING in ransom
   letters, the question on black tape, the instruction on a typed scrap, and
   each option a halftone paper strip in the display's colour for its place
   (pink, yellow, sky blue, mint, white, orange, lilac, aqua; black ink),
   with a white number tile and three marker lines for the handle. A dragged
   strip lifts and tilts. Submitted: a tick tile stapled down, the label fed
   in, the note pasted. Closed: the same with a padlock, held by index.html
   until the display's TOP PICK! lands (`stopDelayMs`). The cuts are the
   boards' seeded generator, computed by cut-and-paste.js into the
   --rkcap-* properties. The paper colour lives on this in-flow panel, never
   on html/body or a fixed element (the iOS 26 rule). */

@font-face { font-family: 'Sidekick Trivia Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/sidekick-trivia-archivo-black-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Archivo Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/sidekick-trivia-archivo-condensed-black-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sidekick-trivia-anton-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Abril Fatface'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/abril-fatface-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Rubik Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sidekick-trivia-rubik-mono-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Special Elite'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sidekick-trivia-special-elite-regular-v1.woff2') format('woff2'); }

/* What cut-and-paste.js adds shows only in this design. */
.rkcap-only { display: none; }

#ranking-content.ranking-design.rkd-cutAndPaste {
    --rkcap-ink: #111111; --rkcap-paper: #EDEAE2; --rkcap-white: #FFFFFF;
    --rkcap-anton: 'Sidekick Trivia Anton', 'Anton', Impact, sans-serif;
    --rkcap-archivo: 'Sidekick Trivia Archivo', 'Archivo', system-ui, sans-serif;
    --rkcap-condensed: 'Sidekick Trivia Archivo Condensed', 'Archivo Narrow', system-ui, sans-serif;
    --rkcap-elite: 'Sidekick Trivia Special Elite', 'Courier New', monospace;
    --rkcap-paste: cubic-bezier(0.3, 1.45, 0.55, 1);
    --rkcap-feed: cubic-bezier(0.25, 1.25, 0.5, 1);
    --rkcap-slide: cubic-bezier(0.34, 1.25, 0.64, 1);
    --rkcap-staple: cubic-bezier(0.2, 2.4, 0.5, 1);
    --rkcap-dots: radial-gradient(circle, rgba(0,0,0,0.1) 0 32%, transparent 36%) 0 0 / 10px 10px;
    --rkcap-row-h: 60px;

    position: relative;
    margin: -14px -14px;
    padding: 12px 16px 16px;
    min-height: calc(100dvh - 12px);
    border-radius: 4px;
    font-family: var(--rkcap-archivo);
    font-weight: 900;
    color: var(--rkcap-ink);
    text-align: left;
    /* Photocopy paper: toner grain (a seeded fractal noise, seed 8), a faint
       copier band and a darker edge. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 -0.21'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23t)'/%3E%3C/svg%3E") 0 0 / 280px 280px,
        linear-gradient(90deg, transparent 0 30%, rgba(0,0,0,0.04) 30.5% 31.2%, transparent 31.7%),
        radial-gradient(ellipse 90% 75% at 50% 40%, transparent 55%, rgba(0,0,0,0.14)),
        var(--rkcap-paper);
    overflow: hidden;
}
#ranking-content.ranking-design.rkd-cutAndPaste .rkcap-only { display: block; }

/* ── Ransom letters (cut-and-paste.js) ── */
#ranking-content.ranking-design.rkd-cutAndPaste .rkcap-word {
    display: inline-flex; align-items: center; gap: 2px;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.2));
}
#ranking-content.ranking-design.rkd-cutAndPaste .rkcap-glyph {
    display: inline-block; flex: 0 0 auto; line-height: 1; white-space: pre;
    transform: translateY(var(--dy)) rotate(var(--rot));
}

/* ── Heading: Live (tape) + RANKING (ransom) ── */
#ranking-content.ranking-design.rkd-cutAndPaste .rkcap-head {
    display: flex; align-items: center; gap: 10px; margin: 6px 0 0 6px;
}
#ranking-content.ranking-design.rkd-cutAndPaste .rkcap-live {
    padding: 5px 13px 8px; background: var(--rkcap-ink); color: var(--rkcap-white);
    font-size: 26px; line-height: 1.05; white-space: nowrap;
    clip-path: var(--rkcap-title); transform: rotate(-3deg);
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.22));
}

/* ── The question: black label tape, fed in from the left ── */
#ranking-content.ranking-design.rkd-cutAndPaste #ranking-question {
    display: table; max-width: 320px; margin: 18px 0 0 2px; padding: 8px 16px 11px;
    background: var(--rkcap-ink); color: var(--rkcap-white);
    font-family: var(--rkcap-condensed); font-weight: 900; font-size: 29px; line-height: 1.08;
    text-align: left; clip-path: var(--rkcap-q);
    transform: rotate(-1.5deg);
    animation: rkcapFeed 0.5s var(--rkcap-feed) backwards;
}
#ranking-content.ranking-design.rkd-cutAndPaste.rkcap-long #ranking-question { font-size: 24px; }

/* ── The instruction: a typed scrap ── */
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-instruction {
    position: relative; isolation: isolate;
    width: fit-content; max-width: 310px; margin: 14px auto 0; padding: 8px 14px 10px;
    color: var(--rkcap-ink); opacity: 1;
    font-family: var(--rkcap-elite); font-weight: 400; font-size: 17px; line-height: 1.25; text-align: center;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.2));
    transform: rotate(1deg);
    animation: rkcapPasteUp 0.42s var(--rkcap-paste) 0.15s backwards;
}
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-instruction::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--rkcap-white); clip-path: var(--rkcap-scrap);
}

/* ── The list: halftone paper strips coloured by place ── */
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-list {
    gap: 8px; /* initRankingDrag measures a row plus 8 px */
    margin: 16px 2px 0;
}
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item {
    --rkcap-c: #FF3D9A; --rkcap-cut: var(--rkcap-row0); --rkcap-tilt: -0.6deg;
    position: relative; isolation: isolate;
    gap: 12px; min-height: var(--rkcap-row-h); padding: 0 14px 0 8px;
    background: none; border-radius: 0; box-shadow: none;
    color: var(--rkcap-ink);
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.25));
    animation: rkcapRowIn 0.46s var(--rkcap-paste) backwards;
    animation-delay: calc(0.3s + var(--rkcap-n, 0) * 0.08s);
}
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item:nth-child(even) { animation-name: rkcapRowInB; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item:nth-child(2) { --rkcap-n: 1; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item:nth-child(3) { --rkcap-n: 2; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item:nth-child(4) { --rkcap-n: 3; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item:nth-child(5) { --rkcap-n: 4; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item:nth-child(6) { --rkcap-n: 5; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item:nth-child(7) { --rkcap-n: 6; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item:nth-child(8) { --rkcap-n: 7; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--rkcap-dots), var(--rkcap-c);
    clip-path: var(--rkcap-cut); transform: rotate(var(--rkcap-tilt));
    transition: transform 0.18s var(--rkcap-slide);
}
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item[data-index="0"] { --rkcap-c: #FF3D9A; --rkcap-cut: var(--rkcap-row0); --rkcap-tilt: -0.6deg; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item[data-index="1"] { --rkcap-c: #FFE600; --rkcap-cut: var(--rkcap-row1); --rkcap-tilt: 0.5deg; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item[data-index="2"] { --rkcap-c: #4D8DFF; --rkcap-cut: var(--rkcap-row2); --rkcap-tilt: -0.4deg; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item[data-index="3"] { --rkcap-c: #32D38E; --rkcap-cut: var(--rkcap-row3); --rkcap-tilt: 0.6deg; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item[data-index="4"] { --rkcap-c: #FFFFFF; --rkcap-cut: var(--rkcap-row4); --rkcap-tilt: -0.5deg; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item[data-index="5"] { --rkcap-c: #FF8A2A; --rkcap-cut: var(--rkcap-row5); --rkcap-tilt: 0.4deg; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item[data-index="6"] { --rkcap-c: #B48CFF; --rkcap-cut: var(--rkcap-row6); --rkcap-tilt: -0.6deg; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item[data-index="7"] { --rkcap-c: #3CCFE0; --rkcap-cut: var(--rkcap-row7); --rkcap-tilt: 0.5deg; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item .rank-number {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; min-width: 0;
    background: var(--rkcap-white); color: var(--rkcap-ink); clip-path: var(--rkcap-tile);
    font-family: var(--rkcap-anton); font-weight: 400; font-size: 30px; line-height: 1;
    font-variant-numeric: tabular-nums;
    transform: rotate(-4deg);
}
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item .rank-color { display: none; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item .rank-name {
    flex: 1 1 auto; min-width: 0; overflow: hidden;
    font-family: var(--rkcap-condensed); font-weight: 900; font-size: 25px; line-height: 1.05;
}
/* cut-and-paste.js sets a long name on two lines, smaller (`optionHTML`). */
#ranking-content.ranking-design.rkd-cutAndPaste .rank-name .rkcap-n1 {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ranking-content.ranking-design.rkd-cutAndPaste .rank-name .rkcap-n2 {
    font-size: 0.76em; line-height: 1.02; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* The handle: three marker lines (the ☰ glyph is index.html's, hidden). */
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item .drag-handle {
    flex: 0 0 auto; width: 28px; height: 22px; margin-left: auto;
    font-size: 0; color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 22'%3E%3Cpath d='M3 4 L25 3 M3 11 L25 11.5 M3 18.5 L25 18' fill='none' stroke='%23111111' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px 22px no-repeat;
}
/* A dragged strip lifts off the page and tilts; index.html moves it. */
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item.dragging {
    opacity: 1; box-shadow: none; filter: drop-shadow(10px 14px 0 rgba(0,0,0,0.35));
}
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-item.dragging::before { transform: rotate(-3deg) translateX(8px); }
/* A list redrawn by a snapshot (or put back after a drag) rests in place. */
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-list.rkcap-still .ranking-item { animation: none; }

/* ── Submit: black cut paper ── */
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submit-btn {
    display: block; width: 310px; max-width: 100%; height: 60px; margin: 18px auto 0; padding: 0;
    background: none; border: 0; border-radius: 0; color: var(--rkcap-white);
    font-family: var(--rkcap-archivo); font-weight: 900; font-size: 26px; line-height: 1;
    position: relative; isolation: isolate;
    filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.25));
    animation: rkcapPasteUp 0.46s var(--rkcap-paste) 0.7s backwards;
    transition: transform 0.08s ease;
}
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submit-btn::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--rkcap-ink); clip-path: var(--rkcap-btn); transform: rotate(-1deg);
}
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submit-btn:active { transform: scale(0.94); }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submit-btn:disabled { opacity: 1; transform: none; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submit-btn:disabled::before { background: #5E5A53; }

/* ── Submitted and closed: the tick or padlock tile stapled down, the label
   fed in at 0.25 s (it lands at 0.71 s: RankingCutAndPasteDesign
   .phoneClosedLanding, which the display's TOP PICK! landing is timed
   against), the typed note pasted ── */
#ranking-content.ranking-design.rkd-cutAndPaste.rkcap-done #ranking-question { display: none; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submitted {
    display: flex !important; flex-direction: column; align-items: center;
    margin-top: 22vh; padding: 0; text-align: center;
}
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submitted[style*="none"] { display: none !important; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submitted > div:not(.rkcap-tile) { display: none !important; }
#ranking-content.ranking-design.rkd-cutAndPaste .rkcap-tile {
    display: flex; align-items: center; justify-content: center;
    width: 140px; height: 140px;
    background: var(--rkcap-white); clip-path: var(--rkcap-bigtile);
    filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.25));
    transform: rotate(6deg);
    animation: rkcapStaple 0.32s var(--rkcap-staple) backwards;
}
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submitted[data-rkcap-kind="closed"] .rkcap-tile { transform: rotate(-5deg); animation-name: rkcapStapleB; }
#ranking-content.ranking-design.rkd-cutAndPaste .rkcap-tile svg {
    fill: none; stroke: var(--rkcap-ink); stroke-linecap: round; stroke-linejoin: round;
}
#ranking-content.ranking-design.rkd-cutAndPaste .rkcap-tile .rkcap-tick { width: 84px; height: 84px; stroke-width: 7; }
#ranking-content.ranking-design.rkd-cutAndPaste .rkcap-tile .rkcap-lock { display: none; width: 64px; height: 64px; stroke-width: 2.4; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submitted[data-rkcap-kind="closed"] .rkcap-tick { display: none; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submitted[data-rkcap-kind="closed"] .rkcap-lock { display: block; }
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submitted h2 {
    margin: 42px 0 0; padding: 9px 20px 12px;
    background: var(--rkcap-ink); color: var(--rkcap-white);
    font-family: var(--rkcap-archivo); font-weight: 900; font-size: 32px; line-height: 1; white-space: nowrap;
    clip-path: var(--rkcap-done);
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.22));
    transform: rotate(-2deg);
    animation: rkcapFeedLabel 0.46s var(--rkcap-feed) 0.25s backwards;
}
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submitted p {
    position: relative; isolation: isolate;
    max-width: 300px; margin: 26px 0 0; padding: 10px 18px 12px;
    color: var(--rkcap-ink);
    font-family: var(--rkcap-elite); font-weight: 400; font-size: 20px; line-height: 1.2;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.2));
    transform: rotate(1.4deg);
    animation: rkcapPasteUp 0.46s var(--rkcap-paste) 0.45s backwards;
}
#ranking-content.ranking-design.rkd-cutAndPaste .ranking-submitted p::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--rkcap-white); clip-path: var(--rkcap-scrap);
}

@keyframes rkcapFeed { from { transform: translateX(-520px) rotate(-3.5deg); } }
@keyframes rkcapFeedLabel { from { transform: translateX(-520px) rotate(-3deg); } }
@keyframes rkcapPasteUp { from { transform: translateY(600px) rotate(-8deg) scale(1.3); } }
@keyframes rkcapRowIn { from { transform: translate(-70px, 900px) rotate(-14deg) scale(1.3); } }
@keyframes rkcapRowInB { from { transform: translate(70px, 900px) rotate(14deg) scale(1.3); } }
@keyframes rkcapStaple { from { transform: rotate(6deg) scale(0); } }
@keyframes rkcapStapleB { from { transform: rotate(-5deg) scale(0); } }

/* Six or more options (index.html's .compact, 44 px touch rows): smaller
   strips, so the whole list and Submit fit without scrolling. */
#ranking-content.ranking-design.rkd-cutAndPaste.compact { --rkcap-row-h: 48px; }
#ranking-content.ranking-design.rkd-cutAndPaste.compact .ranking-item { padding: 0 12px 0 6px; }
#ranking-content.ranking-design.rkd-cutAndPaste.compact .ranking-item .rank-number { width: 38px; height: 38px; font-size: 25px; }
#ranking-content.ranking-design.rkd-cutAndPaste.compact .ranking-item .rank-name { font-size: 21px; }
#ranking-content.ranking-design.rkd-cutAndPaste.compact #ranking-question { margin-top: 14px; font-size: 25px; }
#ranking-content.ranking-design.rkd-cutAndPaste.compact .ranking-instruction { margin-top: 10px; font-size: 15px; }
#ranking-content.ranking-design.rkd-cutAndPaste.compact .ranking-list { margin-top: 12px; }
#ranking-content.ranking-design.rkd-cutAndPaste.compact .ranking-submit-btn { height: 54px; margin-top: 14px; }

/* A short screen (an SE-sized phone with its toolbars): tighter paper. */
@media (max-height: 700px) {
    #ranking-content.ranking-design.rkd-cutAndPaste { --rkcap-row-h: 52px; padding-top: 8px; }
    #ranking-content.ranking-design.rkd-cutAndPaste .rkcap-head { margin-top: 2px; }
    #ranking-content.ranking-design.rkd-cutAndPaste .rkcap-live { font-size: 22px; padding: 4px 11px 7px; }
    #ranking-content.ranking-design.rkd-cutAndPaste #ranking-question { margin-top: 12px; font-size: 24px; padding: 6px 14px 9px; }
    #ranking-content.ranking-design.rkd-cutAndPaste.rkcap-long #ranking-question { font-size: 20px; }
    #ranking-content.ranking-design.rkd-cutAndPaste .ranking-instruction { margin-top: 10px; font-size: 14px; padding: 6px 12px 8px; }
    #ranking-content.ranking-design.rkd-cutAndPaste .ranking-list { margin-top: 12px; }
    #ranking-content.ranking-design.rkd-cutAndPaste .ranking-item .rank-number { width: 40px; height: 40px; font-size: 26px; }
    #ranking-content.ranking-design.rkd-cutAndPaste .ranking-item .rank-name { font-size: 22px; }
    #ranking-content.ranking-design.rkd-cutAndPaste .ranking-submit-btn { height: 52px; margin-top: 14px; font-size: 23px; }
    #ranking-content.ranking-design.rkd-cutAndPaste.compact { --rkcap-row-h: 44px; }
    #ranking-content.ranking-design.rkd-cutAndPaste.compact #ranking-question { margin-top: 10px; font-size: 21px; }
    #ranking-content.ranking-design.rkd-cutAndPaste.compact.rkcap-long #ranking-question { font-size: 17px; padding: 5px 12px 7px; }
    #ranking-content.ranking-design.rkd-cutAndPaste.compact .ranking-instruction { margin-top: 8px; font-size: 13px; padding: 5px 10px 6px; }
    #ranking-content.ranking-design.rkd-cutAndPaste.compact .ranking-list { margin-top: 10px; }
    #ranking-content.ranking-design.rkd-cutAndPaste.compact .ranking-item .rank-number { width: 34px; height: 34px; font-size: 22px; }
    #ranking-content.ranking-design.rkd-cutAndPaste.compact .ranking-item .rank-name { font-size: 19px; }
    #ranking-content.ranking-design.rkd-cutAndPaste.compact .ranking-submit-btn { height: 46px; margin-top: 8px; font-size: 21px; }
    #ranking-content.ranking-design.rkd-cutAndPaste .ranking-submitted { margin-top: 14vh; }
    #ranking-content.ranking-design.rkd-cutAndPaste .rkcap-tile { width: 120px; height: 120px; }
}

/* A narrow phone: the label fits the paper. */
@media (max-width: 380px) {
    #ranking-content.ranking-design.rkd-cutAndPaste .ranking-submitted h2 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    #ranking-content.ranking-design.rkd-cutAndPaste *,
    #ranking-content.ranking-design.rkd-cutAndPaste *::before { animation: none !important; transition: none !important; }
}