/* Live Ranking · Halloween phone skin ("Jack-o'-Lantern Night", owner
   decision 2026-10-07), from the Holiday Themes canvas boards
   HW-Ranking-Phone and -Anim: a starry violet night with two bats, the
   prompt on a ribbed pumpkin banner with its stem, the list as lit lantern
   cards (the phone's own order glowing on a little night pumpkin, the
   option's colour as a candy pip by its place in the document, the name, a
   drawn grip; the row being dragged lifts, tilts and rings in candle
   glow), Submit as a glowing candle-yellow bar in Jolly Lodger, and the end
   screens: "Ranking submitted!" under a lit jack-o'-lantern over turning
   rays, "Ranking closed" under a dusk-grey pumpkin with a cream lock. Every
   rule is scoped to #ranking-content.ranking-design.rkd-halloween, so no
   other screen or feature is touched; the classic screens (no
   .ranking-design) never match.

   No paused face (owner decision 2026-10-06): a stop shows "Ranking
   closed", held back by index.html until the display's TOP PICK rosette
   has landed (stopDelayMs). No Borda score anywhere.

   /ranking-designs/halloween.js decorates the screens (hwrk-* 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 the Mac's bundled ones (ShowThemeFonts), self-hosted, with
   their licences in /fonts/. The colours are ShowThemePalettes.swift's
   HalloweenPalette. The night lives on this in-flow element, 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: 'Jolly Lodger'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jolly-lodger-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Baloo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sidekick-trivia-baloo-semi-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Baloo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sidekick-trivia-baloo-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Baloo'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/sidekick-trivia-baloo-extra-bold-v1.woff2') format('woff2'); }

#ranking-content.ranking-design.rkd-halloween {
    --hwrk-ink: #1C0F26; --hwrk-cream: #FFF1D6; --hwrk-glow: #FFD35A; --hwrk-glow-hot: #FFB43B;
    --hwrk-panel: radial-gradient(ellipse 75% 85% at 50% 45%, #FFFBEF 0%, #FFF1CF 55%, #FFDF94 100%);
    --hwrk-pumpkin: repeating-linear-gradient(90deg, rgba(140, 50, 0, 0) 0 22px, rgba(140, 50, 0, 0.28) 22px 27px, rgba(140, 50, 0, 0) 27px 52px),
        linear-gradient(180deg, #FF9A45 0%, #F27A1F 45%, #D9600F 100%);
    --hwrk-chip: #FF8A2A;
    --hwrk-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --hwrk-slam: cubic-bezier(0.2, 1.4, 0.5, 1);
    --hwrk-row: 70px;
    position: relative;
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif;
    font-weight: 700;
    color: var(--hwrk-cream);
    text-align: center;
    margin: -8px -10px 0;
    padding: 54px 14px 20px;
    /* The night fills the phone between the page's margins. */
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
    box-sizing: border-box;
    border: 3px solid #2C1D40;
    border-radius: 28px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 60'%3E%3Cg fill='%230D0618'%3E%3Cpath transform='translate(24 10) rotate(-10 25 10) scale(0.5)' d='M50 20 C48 14 46 13 45 9 L43 15 C35 6 22 4 10 9 C18 13 20 19 18 26 C24 22 31 23 33 30 C37 26 43 27 46 33 L50 29 L54 33 C57 27 63 26 67 30 C69 23 76 22 82 26 C80 19 82 13 90 9 C78 4 65 6 57 15 L55 9 C54 13 52 14 50 20 Z'/%3E%3Cpath transform='translate(300 26) rotate(10 18 7) scale(0.36)' d='M50 20 C48 14 46 13 45 9 L43 15 C35 6 22 4 10 9 C18 13 20 19 18 26 C24 22 31 23 33 30 C37 26 43 27 46 33 L50 29 L54 33 C57 27 63 26 67 30 C69 23 76 22 82 26 C80 19 82 13 90 9 C78 4 65 6 57 15 L55 9 C54 13 52 14 50 20 Z'/%3E%3C/g%3E%3C/svg%3E") center 6px / 100% auto no-repeat,
        radial-gradient(circle, rgba(255, 236, 190, 0.8) 0 1.2px, transparent 1.7px) 13px 21px / 97px 89px,
        radial-gradient(circle, rgba(255, 236, 190, 0.45) 0 0.8px, transparent 1.3px) 41px 60px / 67px 73px,
        radial-gradient(ellipse 85% 75% at 50% 30%, #3B1E66 0%, #24113F 55%, #130823 100%);
    overflow: hidden;
}

/* ── The prompt: a ribbed pumpkin banner with its stem ── */
#ranking-content.ranking-design.rkd-halloween #ranking-question {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 82px; margin: 0 0 16px; padding: 12px 16px 10px; box-sizing: border-box;
    background: var(--hwrk-pumpkin);
    color: var(--hwrk-ink);
    border: 4px solid var(--hwrk-ink); border-radius: 20px; box-shadow: 0 7px 0 var(--hwrk-ink), 0 0 30px rgba(255, 150, 40, 0.25);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800;
    font-size: 24px; line-height: 1.15; overflow-wrap: anywhere;
}
#ranking-content.ranking-design.rkd-halloween #ranking-question::before {
    content: ''; position: absolute; left: 26px; top: -30px; width: 63px; height: 35px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 40'%3E%3Cpath d='M22 38 C21 26 24 16 32 9 L39 15 C33 20 31 28 32 38 Z' fill='%233F8A34' stroke='%231C0F26' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M37 17 C46 6 60 5 66 13 C58 21 46 22 37 17 Z' fill='%232B6125' stroke='%231C0F26' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* A long prompt (halloween.js marks one over 48 characters) steps its type down. */
#ranking-content.ranking-design.rkd-halloween.hwrk-long #ranking-question { font-size: 19px; }

/* ── The instruction ── */
#ranking-content.ranking-design.rkd-halloween .ranking-instruction {
    margin: 0 auto 14px; color: var(--hwrk-cream);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 600;
    font-size: 18px; line-height: 22px;
}

/* ── The list: lit lantern cards, 8 px apart (initRankingDrag's measure) ── */
#ranking-content.ranking-design.rkd-halloween .ranking-list { gap: 8px; margin: 0 0 22px; }
#ranking-content.ranking-design.rkd-halloween .ranking-item {
    --hwrk-chip: #FF8A2A;
    height: var(--hwrk-row); min-height: 0; box-sizing: border-box;
    gap: 10px; padding: 0 12px 0 6px;
    background: var(--hwrk-panel);
    color: var(--hwrk-ink);
    border: 4px solid var(--hwrk-ink); border-radius: 16px; box-shadow: 0 5px 0 var(--hwrk-ink);
    transition: box-shadow 0.12s ease;
}
#ranking-content.ranking-design.rkd-halloween .ranking-item[data-index="1"] { --hwrk-chip: #9BE15D; }
#ranking-content.ranking-design.rkd-halloween .ranking-item[data-index="2"] { --hwrk-chip: #B993FF; }
#ranking-content.ranking-design.rkd-halloween .ranking-item[data-index="3"] { --hwrk-chip: #FFD23F; }
#ranking-content.ranking-design.rkd-halloween .ranking-item[data-index="4"] { --hwrk-chip: #FF7FB0; }
#ranking-content.ranking-design.rkd-halloween .ranking-item[data-index="5"] { --hwrk-chip: #4FD6CF; }
#ranking-content.ranking-design.rkd-halloween .ranking-item[data-index="6"] { --hwrk-chip: #FF6A5C; }
#ranking-content.ranking-design.rkd-halloween .ranking-item[data-index="7"] { --hwrk-chip: #7DB2FF; }
/* The phone's own order, glowing on a little night pumpkin. */
#ranking-content.ranking-design.rkd-halloween .ranking-item .rank-number {
    flex: 0 0 auto; width: 48px; height: 42px; min-width: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; padding-top: 9px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104'%3E%3Cellipse cx='32' cy='63' rx='28' ry='35' fill='%231C0F26'/%3E%3Cellipse cx='88' cy='63' rx='28' ry='35' fill='%231C0F26'/%3E%3Cellipse cx='45' cy='63' rx='27' ry='38' fill='%232C1745'/%3E%3Cellipse cx='75' cy='63' rx='27' ry='38' fill='%232C1745'/%3E%3Cellipse cx='60' cy='63' rx='20' ry='39' fill='%233A2058'/%3E%3Cpath d='M60 25 Q48 63 60 101 M60 25 Q72 63 60 101' fill='none' stroke='%231C0F26' stroke-width='2.4' stroke-opacity='0.55'/%3E%3Cpath d='M54 28 C53 17 56 9 65 4 L71 9 C64 13 62 20 63 28 Z' fill='%233F8A34'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    color: var(--hwrk-glow); text-shadow: 0 0 8px rgba(255, 170, 50, 0.85);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800; font-size: 22px; line-height: 1;
}
#ranking-content.ranking-design.rkd-halloween .ranking-item .rank-number.hwrk-bump { animation: hwrkBump 0.24s var(--hwrk-spring); }
/* The option's colour, by its place in the document: a candy pip. */
#ranking-content.ranking-design.rkd-halloween .ranking-item .rank-color {
    width: 12px; height: 38px; box-sizing: border-box;
    background: var(--hwrk-chip); border: 3px solid var(--hwrk-ink); border-radius: 6px;
}
#ranking-content.ranking-design.rkd-halloween .ranking-item .rank-name {
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 800;
    font-size: 20px; line-height: 1.08; color: var(--hwrk-ink);
    overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}
/* The grip: three drawn bars instead of the ☰ glyph. */
#ranking-content.ranking-design.rkd-halloween .ranking-item .drag-handle {
    width: 28px; height: 28px; font-size: 0; color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' stroke='%231C0F26' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
}
/* The row being dragged lifts, tilts and rings in candle glow (the drag owns `transform`). */
#ranking-content.ranking-design.rkd-halloween .ranking-item.dragging {
    opacity: 1;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.5), 0 0 0 4px var(--hwrk-glow), 0 0 30px rgba(255, 200, 80, 0.5);
    rotate: -3deg; scale: 1.04;
}
#ranking-content.ranking-design.rkd-halloween .ranking-item.dragging .rank-number {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104'%3E%3Cellipse cx='32' cy='63' rx='28' ry='35' fill='%23C4560E'/%3E%3Cellipse cx='88' cy='63' rx='28' ry='35' fill='%23C4560E'/%3E%3Cellipse cx='45' cy='63' rx='27' ry='38' fill='%23F27A1F'/%3E%3Cellipse cx='75' cy='63' rx='27' ry='38' fill='%23F27A1F'/%3E%3Cellipse cx='60' cy='63' rx='20' ry='39' fill='%23FF9A45'/%3E%3Cpath d='M60 25 Q48 63 60 101 M60 25 Q72 63 60 101' fill='none' stroke='%23C4560E' stroke-width='2.4' stroke-opacity='0.55'/%3E%3Cpath d='M54 28 C53 17 56 9 65 4 L71 9 C64 13 62 20 63 28 Z' fill='%233F8A34'/%3E%3C/svg%3E"); color: var(--hwrk-ink); text-shadow: none;
}

/* ── Submit: a candle-yellow bar ── */
#ranking-content.ranking-design.rkd-halloween .ranking-submit-btn {
    width: 100%; height: 66px; padding: 4px 12px 0;
    background: var(--hwrk-glow);
    color: var(--hwrk-ink);
    border: 4px solid var(--hwrk-ink); border-radius: 18px; box-shadow: 0 6px 0 var(--hwrk-ink), 0 0 26px rgba(255, 200, 80, 0.35);
    font-family: 'Jolly Lodger', fantasy, cursive; font-weight: 400; font-size: 40px; line-height: 1;
    transition: transform 0.1s, box-shadow 0.1s;
}
#ranking-content.ranking-design.rkd-halloween .ranking-submit-btn:active:not(:disabled) {
    transform: translateY(4px) scale(0.97); box-shadow: 0 2px 0 var(--hwrk-ink);
}
#ranking-content.ranking-design.rkd-halloween .ranking-submit-btn:disabled {
    opacity: 1; background: #4B3D5C; color: rgba(255, 241, 214, 0.52); box-shadow: 0 6px 0 var(--hwrk-ink);
}

/* ── The end screens: submitted (a lit jack-o'-lantern over rays), closed (a grey pumpkin with a lock) ── */
#ranking-content.ranking-design.rkd-halloween .ranking-submitted { position: relative; padding: 70px 0 20px; }
/* The rays behind the jack-o'-lantern (submitted only). */
#ranking-content.ranking-design.rkd-halloween .ranking-submitted::before {
    content: ''; position: absolute; left: 50%; top: 186px; width: 420px; height: 420px; margin: -210px 0 0 -210px;
    border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(from 0deg, rgba(255, 211, 90, 0.4) 0deg 9deg, rgba(255, 211, 90, 0) 9deg 22deg);
    -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
}
#ranking-content.ranking-design.rkd-halloween .ranking-submitted.hwrk-closed::before { content: none; }
#ranking-content.ranking-design.rkd-halloween .ranking-submitted > div:first-child {
    position: relative;
    width: 220px; height: 191px; margin: 0 auto 30px !important;
    font-size: 0 !important; color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104'%3E%3Cellipse cx='32' cy='63' rx='28' ry='35' fill='%23C4560E'/%3E%3Cellipse cx='88' cy='63' rx='28' ry='35' fill='%23C4560E'/%3E%3Cellipse cx='45' cy='63' rx='27' ry='38' fill='%23F27A1F'/%3E%3Cellipse cx='75' cy='63' rx='27' ry='38' fill='%23F27A1F'/%3E%3Cellipse cx='60' cy='63' rx='20' ry='39' fill='%23FF9A45'/%3E%3Cpath d='M60 25 Q48 63 60 101 M60 25 Q72 63 60 101' fill='none' stroke='%23C4560E' stroke-width='2.4' stroke-opacity='0.55'/%3E%3Cpath d='M66 16 C74 5 92 4 101 12 C92 21 76 22 66 16 Z' fill='%232B6125'/%3E%3Cpath d='M54 28 C53 17 56 9 65 4 L71 9 C64 13 62 20 63 28 Z' fill='%233F8A34'/%3E%3Cpath d='M33 55 L49 55 L41 41 Z M71 55 L87 55 L79 41 Z M55 67 L65 67 L60 60 Z M28 72 Q60 104 92 72 Q84 76 78 75 L74 82 L68 77 L52 77 L46 82 L42 75 Q36 76 28 72 Z' fill='%23FFD35A'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    filter: drop-shadow(0 0 22px rgba(255, 170, 50, 0.7));
}
#ranking-content.ranking-design.rkd-halloween .ranking-submitted.hwrk-closed > div:first-child {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104'%3E%3Cellipse cx='32' cy='63' rx='28' ry='35' fill='%2333283F'/%3E%3Cellipse cx='88' cy='63' rx='28' ry='35' fill='%2333283F'/%3E%3Cellipse cx='45' cy='63' rx='27' ry='38' fill='%234B3D5C'/%3E%3Cellipse cx='75' cy='63' rx='27' ry='38' fill='%234B3D5C'/%3E%3Cellipse cx='60' cy='63' rx='20' ry='39' fill='%235C4C70'/%3E%3Cpath d='M60 25 Q48 63 60 101 M60 25 Q72 63 60 101' fill='none' stroke='%2333283F' stroke-width='2.4' stroke-opacity='0.55'/%3E%3Cpath d='M66 16 C74 5 92 4 101 12 C92 21 76 22 66 16 Z' fill='%232B6125'/%3E%3Cpath d='M54 28 C53 17 56 9 65 4 L71 9 C64 13 62 20 63 28 Z' fill='%233F8A34'/%3E%3Crect x='47' y='59' width='26' height='20' rx='3.5' fill='%23FFF1D6'/%3E%3Cpath d='M52 59 V53 a8 8 0 0 1 16 0 V59' fill='none' stroke='%23FFF1D6' stroke-width='4.4' stroke-linecap='round'/%3E%3C/svg%3E");
    filter: drop-shadow(0 8px 0 rgba(10, 5, 18, 0.6));
}
#ranking-content.ranking-design.rkd-halloween .ranking-submitted h2 {
    margin: 0 -10px 10px; color: var(--hwrk-glow); text-shadow: 0 0 22px rgba(255, 180, 60, 0.75);
    font-family: 'Jolly Lodger', fantasy, cursive; font-weight: 400;
    font-size: clamp(46px, calc(14vw - 2px), 54px); line-height: 1; white-space: nowrap;
}
#ranking-content.ranking-design.rkd-halloween .ranking-submitted.hwrk-closed h2 {
    font-size: clamp(50px, calc(15vw - 2px), 58px);
}
#ranking-content.ranking-design.rkd-halloween .ranking-submitted p {
    margin: 0 -6px; padding: 0; color: var(--hwrk-cream);
    font-family: 'Sidekick Trivia Baloo', system-ui, sans-serif; font-weight: 600; font-size: 19px; line-height: 1.3;
}

/* ── Entrances: only when a screen or a ranking arrives (.hwrk-enter) ── */
#ranking-content.ranking-design.rkd-halloween.hwrk-enter #ranking-question { animation: hwrkDrop 0.6s var(--hwrk-spring) backwards; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-instruction { animation: hwrkPop 0.4s 0.25s var(--hwrk-spring) backwards; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-item { animation: hwrkRise 0.55s 0.3s var(--hwrk-spring) backwards; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-item:nth-child(2) { animation-delay: 0.4s; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-item:nth-child(3) { animation-delay: 0.5s; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-item:nth-child(4) { animation-delay: 0.6s; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-item:nth-child(5) { animation-delay: 0.7s; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-item:nth-child(6) { animation-delay: 0.8s; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-item:nth-child(7) { animation-delay: 0.9s; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-item:nth-child(8) { animation-delay: 1s; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-submit-btn { animation: hwrkRise 0.5s 0.8s var(--hwrk-spring) backwards; }
/* The end screen lands 0.6 s after it shows: the pumpkin popped on (0.05 +
   0.45 s), the title stamped on (0.2 + 0.4 s)
   (RankingHalloweenDesign.phoneClosedEntrance; the tests read these
   timings). The Mac's stopDelayMs is the rosette's landing less 0.6 s, so
   "Ranking closed" lands with the projector's TOP PICK. */
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-submitted::before { animation: hwrkRays 0.8s 0.05s var(--hwrk-spring) backwards; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-submitted > div:first-child { animation: hwrkPumpkin 0.45s 0.05s var(--hwrk-spring) backwards; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-submitted h2 { animation: hwrkStamp 0.4s 0.2s var(--hwrk-slam) backwards, hwrkAppear 0.01s 0.2s steps(1) backwards; }
#ranking-content.ranking-design.rkd-halloween.hwrk-enter .ranking-submitted p { animation: hwrkPop 0.4s 0.4s var(--hwrk-spring) backwards; }

@keyframes hwrkDrop { from { translate: 0 -160px; } }
@keyframes hwrkPop { from { scale: 0; } }
@keyframes hwrkRise { from { translate: 0 520px; } }
@keyframes hwrkRays { from { scale: 0; rotate: -40deg; } }
@keyframes hwrkPumpkin { from { scale: 0; rotate: -25deg; } }
@keyframes hwrkStamp { from { scale: 1.7; rotate: -6deg; } }
@keyframes hwrkAppear { from { visibility: hidden; } to { visibility: visible; } }
@keyframes hwrkBump { 50% { scale: 1.22; } }

/* ── 6+ options (index.html's .compact): shorter rows ── */
#ranking-content.ranking-design.rkd-halloween.compact { --hwrk-row: 48px; }
#ranking-content.ranking-design.rkd-halloween.compact #ranking-question { min-height: 70px; margin-bottom: 12px; }
#ranking-content.ranking-design.rkd-halloween.compact .ranking-instruction { margin-bottom: 10px; }
#ranking-content.ranking-design.rkd-halloween.compact .ranking-list { margin-bottom: 16px; }
#ranking-content.ranking-design.rkd-halloween.compact .ranking-item { padding: 0 10px 0 4px; gap: 8px; border-radius: 13px; }
#ranking-content.ranking-design.rkd-halloween.compact .ranking-item .rank-number { width: 38px; height: 33px; font-size: 17px; padding-top: 7px; }
#ranking-content.ranking-design.rkd-halloween.compact .ranking-item .rank-color { height: 28px; width: 10px; }
#ranking-content.ranking-design.rkd-halloween.compact .ranking-item .rank-name { font-size: 17px; -webkit-line-clamp: 1; }
#ranking-content.ranking-design.rkd-halloween.compact .ranking-item .drag-handle { width: 24px; height: 24px; background-size: 24px 24px; }

/* ── Shorter phones: everything still fits one screen ── */
@media (max-height: 740px) {
    #ranking-content.ranking-design.rkd-halloween { --hwrk-row: 54px; padding: 40px 12px 14px; }
    #ranking-content.ranking-design.rkd-halloween #ranking-question { min-height: 64px; font-size: 21px; margin-bottom: 12px; }
    #ranking-content.ranking-design.rkd-halloween .ranking-instruction { font-size: 16px; line-height: 19px; margin-bottom: 10px; }
    #ranking-content.ranking-design.rkd-halloween .ranking-list { margin-bottom: 16px; }
    #ranking-content.ranking-design.rkd-halloween .ranking-item .rank-number { width: 42px; height: 37px; font-size: 19px; padding-top: 8px; }
    #ranking-content.ranking-design.rkd-halloween .ranking-item .rank-color { height: 32px; }
    #ranking-content.ranking-design.rkd-halloween .ranking-item .rank-name { font-size: 18px; }
    #ranking-content.ranking-design.rkd-halloween .ranking-submit-btn { height: 56px; font-size: 35px; }
    #ranking-content.ranking-design.rkd-halloween.hwrk-long #ranking-question { font-size: 17px; }
    #ranking-content.ranking-design.rkd-halloween.compact { --hwrk-row: 39px; padding-top: 34px; padding-bottom: 10px; }
    #ranking-content.ranking-design.rkd-halloween.compact .ranking-submit-btn { height: 48px; font-size: 31px; }
    #ranking-content.ranking-design.rkd-halloween.compact #ranking-question { min-height: 54px; margin-bottom: 10px; }
    #ranking-content.ranking-design.rkd-halloween.compact .ranking-list { margin-bottom: 12px; }
    /* Eight rows under a long prompt: the instruction gives way. */
    #ranking-content.ranking-design.rkd-halloween.compact.hwrk-long .ranking-instruction { display: none; }
    #ranking-content.ranking-design.rkd-halloween.compact.hwrk-long #ranking-question { font-size: 15px; padding: 6px 12px 6px; }
    #ranking-content.ranking-design.rkd-halloween.compact .ranking-item .rank-number { width: 32px; height: 28px; font-size: 14px; padding-top: 6px; }
    #ranking-content.ranking-design.rkd-halloween.compact .ranking-item .rank-color { height: 24px; }
    #ranking-content.ranking-design.rkd-halloween.compact .ranking-item .rank-name { font-size: 16px; }
    #ranking-content.ranking-design.rkd-halloween .ranking-submitted { padding-top: 40px; }
    #ranking-content.ranking-design.rkd-halloween .ranking-submitted::before { top: 132px; width: 360px; height: 360px; margin: -180px 0 0 -180px; }
    #ranking-content.ranking-design.rkd-halloween .ranking-submitted > div:first-child { width: 184px; height: 160px; margin-bottom: 24px !important; }
}

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