/* Live Ranking · Ugly Sweater phone skin (owner decision 2026-10-06): the
   canvas's PR-Ranking-UglySweater-Phone and Anim boards. Every rule is
   scoped to #ranking-content.ranking-design.rkd-uglySweater, so no other
   screen or feature is touched; the classic screens (no .ranking-design)
   never match.

   Live Trivia's Ugly Sweater on the phone: a red knitted sweater with the
   green fair-isle band across the top (one SVG stitch tile repeated as a
   background, never a DOM node per stitch), the prompt on a cream felt patch
   with a dashed blanket stitch, each option a felt row with its place's
   knitted yarn swatch (the display's colours by position: the five trivia
   yarns, then teal, cinnamon and charcoal), its rank number and a red drag
   handle, a green felt Submit button, "Ranking submitted!" on a gold felt
   coin with a green check, and "Ranking closed" on a gold felt patch with a
   padlock. Fredoka (renamed "Sidekick Trivia Fredoka") for every word.

   Motion (the Anim board's phone): the heading drops on and settles, the
   instruction and the rows drop on one after another, Submit rises; a
   lifted row tilts and gets its yarn's dashed outline while the others slide
   aside; the coin springs on and its check pops, the heading is stamped on;
   the closed patch is stamped on (0.45 s, RankingUglySweaterDesign
   .phoneEntrance: the Mac holds "Ranking closed" for the top pick's landing
   less this, so it lands with TOP PICK on the projector), then its padlock
   pops. Transforms only. /ranking-designs/ugly-sweater.js keeps a re-render
   of the same list still (.rkdus-still), tells the submitted and closed
   screens apart and replays their entrance when one appears. */

@font-face { font-family: 'Sidekick Trivia Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sidekick-trivia-fredoka-semi-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sidekick-trivia-fredoka-bold-v1.woff2') format('woff2'); }

#ranking-content.ranking-design.rkd-uglySweater {
    --us-felt: #F6EEDC; --us-tile: #F4EAD5; --us-gold: #F7C948; --us-green: #1E6B3F; --us-red: #B8222F;
    --us-maroon: #3B1214; --us-ink: #A3182A; --us-shadow: rgba(60, 8, 12, 0.45);
    --rkdus-yarn: #1E6B3F;
    position: relative;
    min-height: calc(100dvh - 40px);
    padding: 64px 16px 22px;
    border-radius: 26px;
    overflow: hidden;
    text-align: center;
    font-family: 'Sidekick Trivia Fredoka', 'Fredoka', system-ui, sans-serif;
    font-weight: 600;
    color: var(--us-felt);
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, rgba(255, 210, 170, 0.08), rgba(40, 0, 6, 0.35)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%236E0F18'/%3E%3Cg fill='%23B8222F' stroke='%238E1621' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 12px 12px,
        #6E0F18;
}
/* The fair-isle band across the top. */
#ranking-content.ranking-design.rkd-uglySweater::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 49px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 112'%3E%3Crect x='0' y='1' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='32' y='1' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='64' y='1' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='96' y='1' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='0' y='17' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='16' y='33' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='32' y='49' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='48' y='65' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='64' y='81' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='80' y='65' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='96' y='49' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='112' y='33' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='16' y='97' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='48' y='97' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='80' y='97' width='16' height='16' fill='%23D6C49C'/%3E%3Crect x='112' y='97' width='16' height='16' fill='%23D6C49C'/%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='36.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 36.8 8%29'/%3E%3Cellipse cx='43.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 43.2 8%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='68.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 68.8 8%29'/%3E%3Cellipse cx='75.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 75.2 8%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='100.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 100.8 8%29'/%3E%3Cellipse cx='107.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 107.2 8%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='24' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 24%29'/%3E%3Cellipse cx='11.2' cy='24' rx='3.2' ry='7.68' transform='rotate%2832 11.2 24%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='20.8' cy='40' rx='3.2' ry='7.68' transform='rotate%28-32 20.8 40%29'/%3E%3Cellipse cx='27.2' cy='40' rx='3.2' ry='7.68' transform='rotate%2832 27.2 40%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='36.8' cy='56' rx='3.2' ry='7.68' transform='rotate%28-32 36.8 56%29'/%3E%3Cellipse cx='43.2' cy='56' rx='3.2' ry='7.68' transform='rotate%2832 43.2 56%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='52.8' cy='72' rx='3.2' ry='7.68' transform='rotate%28-32 52.8 72%29'/%3E%3Cellipse cx='59.2' cy='72' rx='3.2' ry='7.68' transform='rotate%2832 59.2 72%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='68.8' cy='88' rx='3.2' ry='7.68' transform='rotate%28-32 68.8 88%29'/%3E%3Cellipse cx='75.2' cy='88' rx='3.2' ry='7.68' transform='rotate%2832 75.2 88%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='84.8' cy='72' rx='3.2' ry='7.68' transform='rotate%28-32 84.8 72%29'/%3E%3Cellipse cx='91.2' cy='72' rx='3.2' ry='7.68' transform='rotate%2832 91.2 72%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='100.8' cy='56' rx='3.2' ry='7.68' transform='rotate%28-32 100.8 56%29'/%3E%3Cellipse cx='107.2' cy='56' rx='3.2' ry='7.68' transform='rotate%2832 107.2 56%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='116.8' cy='40' rx='3.2' ry='7.68' transform='rotate%28-32 116.8 40%29'/%3E%3Cellipse cx='123.2' cy='40' rx='3.2' ry='7.68' transform='rotate%2832 123.2 40%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='20.8' cy='104' rx='3.2' ry='7.68' transform='rotate%28-32 20.8 104%29'/%3E%3Cellipse cx='27.2' cy='104' rx='3.2' ry='7.68' transform='rotate%2832 27.2 104%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='52.8' cy='104' rx='3.2' ry='7.68' transform='rotate%28-32 52.8 104%29'/%3E%3Cellipse cx='59.2' cy='104' rx='3.2' ry='7.68' transform='rotate%2832 59.2 104%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='84.8' cy='104' rx='3.2' ry='7.68' transform='rotate%28-32 84.8 104%29'/%3E%3Cellipse cx='91.2' cy='104' rx='3.2' ry='7.68' transform='rotate%2832 91.2 104%29'/%3E%3C/g%3E%3Cg fill='%23FFF7E6' stroke='%23D6C49C' stroke-width='0.8'%3E%3Cellipse cx='116.8' cy='104' rx='3.2' ry='7.68' transform='rotate%28-32 116.8 104%29'/%3E%3Cellipse cx='123.2' cy='104' rx='3.2' ry='7.68' transform='rotate%2832 123.2 104%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 49px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%230D3A22'/%3E%3Cg fill='%231F6E42' stroke='%2315502F' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 7px 7px, #0D3A22;
    box-shadow: 0 3px 0 rgba(40, 0, 6, 0.35);
}

/* ── The heading: a felt patch that drops on and settles ── */
#ranking-content.ranking-design.rkd-uglySweater #ranking-question {
    margin: 8px 6px 16px; padding: 15px 14px 17px;
    background: var(--us-felt); color: var(--us-ink);
    border-radius: 20px; box-shadow: 0 7px 0 var(--us-shadow);
    outline: 3px dashed var(--us-red); outline-offset: -10px;
    font-family: inherit; font-weight: 700; font-size: 25px; line-height: 1.1; text-wrap: balance;
    overflow-wrap: anywhere; text-align: center;
    rotate: -1.5deg;
}
#ranking-content.ranking-design.rkd-uglySweater #ranking-question.rkdus-drop {
    animation: rkdusDrop 0.7s cubic-bezier(0.3, 1.35, 0.5, 1) backwards, rkdusSettle 0.9s 0.55s ease-out;
}

/* ── Drag to rank ── */
#ranking-content.ranking-design.rkd-uglySweater .ranking-instruction {
    margin: 0 0 14px; color: var(--us-felt);
    font-weight: 600; font-size: 18px; line-height: 1.25; text-wrap: balance;
    text-shadow: 0 2px 0 rgba(40, 0, 6, 0.6);
    animation: rkdusRise 0.5s 0.35s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
/* The list's gap stays 8 px: initRankingDrag measures a row plus 8. */
#ranking-content.ranking-design.rkd-uglySweater .ranking-list { gap: 8px; margin-bottom: 18px; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item {
    position: relative; gap: 0; min-height: 68px; padding: 0 14px 0 6px;
    background: var(--us-tile); color: var(--us-maroon);
    border-radius: 14px; box-shadow: 0 4px 0 var(--us-shadow);
    outline: 3px dashed transparent; outline-offset: -5px;
    animation: rkdusRow 0.6s 0.45s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#ranking-content.ranking-design.rkd-uglySweater .ranking-item:nth-child(2) { animation-delay: 0.53s; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item:nth-child(3) { animation-delay: 0.61s; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item:nth-child(4) { animation-delay: 0.69s; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item:nth-child(5) { animation-delay: 0.77s; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item:nth-child(6) { animation-delay: 0.85s; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item:nth-child(7) { animation-delay: 0.93s; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item:nth-child(8) { animation-delay: 1.01s; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item[data-index="0"] { --rkdus-yarn: #1E6B3F; --rkdus-knit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%230D3A22'/%3E%3Cg fill='%231F6E42' stroke='%2315502F' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 8px 8px, #0D3A22; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item[data-index="1"] { --rkdus-yarn: #C17E12; --rkdus-knit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%237A4E08'/%3E%3Cg fill='%23E9AE34' stroke='%23B07D16' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 8px 8px, #7A4E08; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item[data-index="2"] { --rkdus-yarn: #24427E; --rkdus-knit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%231A3567'/%3E%3Cg fill='%232D5596' stroke='%2313284F' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 8px 8px, #1A3567; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item[data-index="3"] { --rkdus-yarn: #8E1B2A; --rkdus-knit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%234E0A12'/%3E%3Cg fill='%23A3283A' stroke='%236E1520' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 8px 8px, #4E0A12; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item[data-index="4"] { --rkdus-yarn: #6B2C7C; --rkdus-knit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%234A1F57'/%3E%3Cg fill='%237B3A8C' stroke='%233A1545' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 8px 8px, #4A1F57; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item[data-index="5"] { --rkdus-yarn: #1B6F75; --rkdus-knit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%230B3B40'/%3E%3Cg fill='%232A8A90' stroke='%23175B60' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 8px 8px, #0B3B40; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item[data-index="6"] { --rkdus-yarn: #A34A1E; --rkdus-knit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%235A260C'/%3E%3Cg fill='%23C9652E' stroke='%238A3F18' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 8px 8px, #5A260C; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item[data-index="7"] { --rkdus-yarn: #4B4F5D; --rkdus-knit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%2325272E'/%3E%3Cg fill='%236B7080' stroke='%234B4F5D' stroke-width='0.8'%3E%3Cellipse cx='4.8' cy='8' rx='3.2' ry='7.68' transform='rotate%28-32 4.8 8%29'/%3E%3Cellipse cx='11.2' cy='8' rx='3.2' ry='7.68' transform='rotate%2832 11.2 8%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 8px 8px, #25272E; }
#ranking-content.ranking-design.rkd-uglySweater .ranking-item .rank-number {
    min-width: 28px; margin-right: 4px; color: var(--us-maroon);
    font-weight: 700; font-size: 26px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums;
}
/* The option's yarn: a knitted swatch in its place's colour. */
#ranking-content.ranking-design.rkd-uglySweater .ranking-item .rank-color {
    width: 12px; height: 48px; margin-right: 12px; border-radius: 4px; background: var(--rkdus-knit);
}
#ranking-content.ranking-design.rkd-uglySweater .ranking-item .rank-name {
    min-width: 0; overflow: hidden; color: var(--us-maroon);
    font-weight: 600; font-size: 20px; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis;
}
/* The drag handle: three red stitches. */
#ranking-content.ranking-design.rkd-uglySweater .ranking-item .drag-handle {
    width: 24px; height: 18px; margin-left: 10px; font-size: 0; color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 2H22M2 9H22M2 16H22' fill='none' stroke='%23A3182A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 50% 50% / 24px 18px no-repeat;
}
/* A lifted row tilts and shows its yarn's dashed stitch (the drag owns the
   row's transform, so the tilt is the separate rotate and scale). */
#ranking-content.ranking-design.rkd-uglySweater .ranking-item.dragging {
    opacity: 1; rotate: -2.5deg; scale: 1.02;
    outline-color: var(--rkdus-yarn);
    box-shadow: 0 14px 0 rgba(60, 8, 12, 0.33);
}
#ranking-content.ranking-design.rkd-uglySweater .ranking-item.dragging,
#ranking-content.ranking-design.rkd-uglySweater .ranking-item.displaced,
#ranking-content.ranking-design.rkd-uglySweater .ranking-item.settling { animation: none; }

/* ── Submit: a green felt button ── */
#ranking-content.ranking-design.rkd-uglySweater #ranking-submit-btn {
    height: 64px; padding: 0;
    background: var(--us-green); color: var(--us-felt);
    border: none; border-radius: 18px; box-shadow: 0 6px 0 rgba(20, 40, 20, 0.55);
    outline: 3px dashed rgba(246, 238, 220, 0.85); outline-offset: -9px;
    font-family: inherit; font-weight: 700; font-size: 26px; line-height: 1;
    animation: rkdusSubmit 0.55s 0.95s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#ranking-content.ranking-design.rkd-uglySweater #ranking-submit-btn:active { transform: translateY(3px); }

#ranking-content.ranking-design.rkd-uglySweater .rkdus-still,
#ranking-content.ranking-design.rkd-uglySweater .rkdus-still > * { animation: none !important; }

/* ── Submitted and closed (index.html swaps the words; the skin's script
   marks which, and wraps the icon and heading in .rkdus-patch) ── */
#ranking-content.ranking-design.rkd-uglySweater #ranking-submitted { padding: 0; }
#ranking-content.ranking-design.rkd-uglySweater #ranking-submitted h2 { margin: 0; }
#ranking-content.ranking-design.rkd-uglySweater #ranking-submitted p {
    margin: 14px 0 0; color: var(--us-felt); opacity: 1;
    font-weight: 600; font-size: 21px; line-height: 1.25; text-shadow: 0 2px 0 rgba(40, 0, 6, 0.6);
    animation: rkdusSubtitle 0.5s 0.7s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
/* Submitted: a gold felt coin with a green check. */
#ranking-content.ranking-design.rkd-uglySweater #ranking-submitted.rkdus-done .rkdus-patch { display: flex; flex-direction: column; align-items: center; }
#ranking-content.ranking-design.rkd-uglySweater #ranking-submitted.rkdus-done .rkdus-icon {
    width: 176px; height: 176px; margin: 40px 0 0; border-radius: 50%;
    font-size: 0 !important; color: transparent;
    background:
        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='%231E6B3F' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 92px 92px no-repeat,
        radial-gradient(circle at 36% 30%, #FCE08A, #F7C948 55%, #E2AE2E);
    box-shadow: 0 8px 0 var(--us-shadow);
    outline: 4px dashed var(--us-green); outline-offset: -14px;
    animation: rkdusCoin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#ranking-content.ranking-design.rkd-uglySweater #ranking-submitted.rkdus-done h2 {
    margin-top: 34px; color: var(--us-felt);
    font-weight: 700; font-size: 38px; line-height: 1.1; text-wrap: balance;
    text-shadow: 0 3px 0 rgba(40, 0, 6, 0.65);
    animation: rkdusStamp 0.4s 0.45s cubic-bezier(0.2, 1.4, 0.5, 1) backwards;
}
/* Closed: the gold padlock patch, stamped on. */
#ranking-content.ranking-design.rkd-uglySweater #ranking-submitted.rkdus-closed .rkdus-patch {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    margin: 40px 8px 0; padding: 30px 20px 34px;
    background: var(--us-gold); color: var(--us-maroon);
    border-radius: 20px; box-shadow: 0 7px 0 var(--us-shadow);
    outline: 3px dashed var(--us-green); outline-offset: -10px;
    rotate: -1.5deg;
    animation: rkdusClosed 0.45s cubic-bezier(0.2, 1.4, 0.5, 1) backwards;
}
#ranking-content.ranking-design.rkd-uglySweater #ranking-submitted.rkdus-closed .rkdus-icon {
    width: 50px; height: 60px; font-size: 0 !important; color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M10 20V13A10 10 0 0 1 30 13V20' fill='none' stroke='%233B1214' stroke-width='5' stroke-linecap='round'/%3E%3Crect x='3' y='20' width='34' height='26' rx='6' fill='%233B1214'/%3E%3Ccircle cx='20' cy='31' r='4' fill='%23F7C948'/%3E%3Crect x='18' y='32' width='4' height='8' rx='2' fill='%23F7C948'/%3E%3C/svg%3E") 50% 50% / 50px 60px no-repeat;
    animation: rkdusPop 0.42s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#ranking-content.ranking-design.rkd-uglySweater #ranking-submitted.rkdus-closed h2 {
    color: var(--us-maroon); font-weight: 700; font-size: 36px; line-height: 1.05; white-space: nowrap;
}
#ranking-content.ranking-design.rkd-uglySweater #ranking-submitted.rkdus-closed p { margin-top: 26px; font-size: 22px; animation-delay: 0.6s; }

/* ── Six to eight options, and short screens (an iPhone SE): the rows and
   patches give back height so the list and Submit never scroll ── */
#ranking-content.ranking-design.rkd-uglySweater.compact { padding-top: 58px; }
#ranking-content.ranking-design.rkd-uglySweater.compact #ranking-question { margin: 4px 6px 12px; padding: 12px 12px 14px; font-size: 22px; }
#ranking-content.ranking-design.rkd-uglySweater.compact .ranking-instruction { margin-bottom: 10px; font-size: 16px; }
#ranking-content.ranking-design.rkd-uglySweater.compact .ranking-list { margin-bottom: 14px; }
#ranking-content.ranking-design.rkd-uglySweater.compact .ranking-item { min-height: 50px; padding: 0 14px 0 6px; }
#ranking-content.ranking-design.rkd-uglySweater.compact .ranking-item .rank-color { height: 34px; }
#ranking-content.ranking-design.rkd-uglySweater.compact .ranking-item .rank-number { font-size: 22px; }
#ranking-content.ranking-design.rkd-uglySweater.compact .ranking-item .rank-name { font-size: 18px; }
#ranking-content.ranking-design.rkd-uglySweater.compact #ranking-submit-btn { height: 56px; font-size: 24px; }
@media (max-height: 700px) {
    #ranking-content.ranking-design.rkd-uglySweater { padding: 58px 14px 16px; }
    #ranking-content.ranking-design.rkd-uglySweater #ranking-question { margin: 4px 6px 12px; padding: 12px 12px 14px; font-size: 22px; }
    #ranking-content.ranking-design.rkd-uglySweater .ranking-instruction { margin-bottom: 10px; font-size: 16px; }
    #ranking-content.ranking-design.rkd-uglySweater .ranking-list { margin-bottom: 14px; }
    #ranking-content.ranking-design.rkd-uglySweater .ranking-item { min-height: 56px; }
    #ranking-content.ranking-design.rkd-uglySweater .ranking-item .rank-color { height: 38px; }
    #ranking-content.ranking-design.rkd-uglySweater #ranking-submit-btn { height: 54px; font-size: 24px; }
    #ranking-content.ranking-design.rkd-uglySweater #ranking-submitted.rkdus-done .rkdus-icon { width: 150px; height: 150px; margin-top: 24px; background-size: 80px 80px, auto; }
    #ranking-content.ranking-design.rkd-uglySweater #ranking-submitted.rkdus-closed .rkdus-patch { margin-top: 26px; }
    #ranking-content.ranking-design.rkd-uglySweater.compact { padding: 46px 14px 12px; }
    #ranking-content.ranking-design.rkd-uglySweater.compact::before { height: 36px; background-position: 0 -13px, 0 0; }
    #ranking-content.ranking-design.rkd-uglySweater.compact #ranking-question { margin: 0 6px 8px; padding: 8px 12px 10px; font-size: 16px; }
    #ranking-content.ranking-design.rkd-uglySweater.compact .ranking-instruction { margin-bottom: 6px; font-size: 13px; line-height: 1.2; }
    #ranking-content.ranking-design.rkd-uglySweater.compact .ranking-list { margin-bottom: 10px; }
    #ranking-content.ranking-design.rkd-uglySweater.compact .ranking-item { min-height: 44px; }
    #ranking-content.ranking-design.rkd-uglySweater.compact .ranking-item .rank-color { height: 28px; }
    #ranking-content.ranking-design.rkd-uglySweater.compact .ranking-item .rank-number { font-size: 20px; }
    #ranking-content.ranking-design.rkd-uglySweater.compact .ranking-item .rank-name { font-size: 17px; }
    #ranking-content.ranking-design.rkd-uglySweater.compact #ranking-submit-btn { height: 44px; font-size: 21px; }
}

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

@keyframes rkdusDrop { from { transform: translateY(-160px) rotate(-6deg) scale(1.06); } }
@keyframes rkdusSettle { 0%, 100% { rotate: -1.5deg; } 30% { rotate: 1.5deg; } 60% { rotate: -2.7deg; } 85% { rotate: -1.1deg; } }
@keyframes rkdusRise { from { transform: translateY(200px); } }
@keyframes rkdusRow { from { transform: translateY(-760px) rotate(-5deg) scale(1.06); } 70% { transform: translateY(0) rotate(1.2deg) scale(1); } }
@keyframes rkdusSubmit { from { transform: translateY(300px); } }
@keyframes rkdusSubtitle { from { transform: translateY(300px); } }
@keyframes rkdusCoin { from { transform: scale(0) rotate(-20deg); } }
@keyframes rkdusStamp { from { transform: scale(1.3) rotate(-4deg); } }
@keyframes rkdusClosed { from { transform: scale(1.4) rotate(-6.5deg); } }
@keyframes rkdusPop { from { transform: scale(0); } }