/* Live Ranking · Summer Camp phone skin ("Campfire Trail", owner decision 2026-10-07), from the Holiday Themes canvas boards CP-Ranking-Phone and -Anim: a tent-canvas panel under a dusk strip of pines, the prompt on a pine-green trail sign, the list as light pine planks (the phone's own order on a stitched patch, the option's colour as a painted pip by its place in the document, the name, a drawn grip; the row being dragged lifts onto gold), Submit on a gold plank, and the end screens: "Ranking submitted!" on a green merit patch with its check and a few campfire sparks, "Ranking closed" on a red patch with a lock. Every rule is scoped to #ranking-content.ranking-design.rkd-summerCamp, 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 pennant has unfurled (stopDelayMs). No Borda score anywhere. /ranking-designs/summer-camp.js decorates the screens (cprk-* 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 SummerCampPalette. The panel's canvas 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: 'Alfa Slab One'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/alfa-slab-one-regular-v1.woff2') format('woff2'); } @font-face { font-family: 'Sidekick Trivia Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/sidekick-trivia-barlow-medium-v1.woff2') format('woff2'); } @font-face { font-family: 'Sidekick Trivia Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sidekick-trivia-barlow-semi-bold-v1.woff2') format('woff2'); } @font-face { font-family: 'Sidekick Trivia Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sidekick-trivia-barlow-bold-v1.woff2') format('woff2'); } @font-face { font-family: 'Sidekick Trivia Barlow'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/sidekick-trivia-barlow-extra-bold-v1.woff2') format('woff2'); } #ranking-content.ranking-design.rkd-summerCamp { --cprk-ink: #1A1C19; --cprk-brown: #2B1B0E; --cprk-cream: #FFF7E8; --cprk-canvas: #F6EEDB; --cprk-wood: #F4DCAE; --cprk-wood-dark: #C99357; --cprk-gold: #F5B532; --cprk-lift: #F5C04A; --cprk-pine: #2C7A48; --cprk-red: #B4332A; --cprk-caption: #6A5440; --cprk-shadow: rgba(4, 8, 14, 0.55); --cprk-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --cprk-slam: cubic-bezier(0.2, 1.4, 0.5, 1); --cprk-row: 66px; --cprk-head: 84px; position: relative; font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 700; color: var(--cprk-brown); text-align: center; margin: -8px -10px 0; padding: calc(var(--cprk-head) + 16px) 14px 20px; /* The panel fills the phone between the page's margins. */ min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); box-sizing: border-box; border: 4px solid var(--cprk-ink); border-radius: 28px; background: repeating-linear-gradient(0deg, rgba(139, 90, 43, 0.05) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgba(139, 90, 43, 0.05) 0 2px, transparent 2px 5px), var(--cprk-canvas); overflow: hidden; } /* ── The dusk strip: moon, stars and a row of pines (no feature label on the projector; the phone carries its own, as on the board) ── */ #ranking-content.ranking-design.rkd-summerCamp::before { content: 'Live Ranking'; position: absolute; left: 0; right: 0; top: 0; height: var(--cprk-head); z-index: 3; box-sizing: border-box; padding-top: 22px; border-bottom: 4px solid var(--cprk-ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 96' preserveAspectRatio='none'%3E%3Ccircle cx='336' cy='34' r='11' fill='%23FCEFC8'/%3E%3Ccircle cx='341' cy='31' r='10' fill='%23222D55'/%3E%3Ccircle cx='60' cy='28' r='1.6' fill='%23FFF3D0'/%3E%3Ccircle cx='120' cy='18' r='1.3' fill='%23FFF3D0'/%3E%3Ccircle cx='270' cy='22' r='1.5' fill='%23FFF3D0'/%3E%3Cpath d='M-10.0 61.9 L-6.4 68.6 L-8.5 67.4 L-5.1 75.2 L-7.9 74.0 L-3.8 81.8 L-7.4 80.6 L-2.6 88.4 L-17.4 88.4 L-12.6 80.6 L-16.2 81.8 L-12.1 74.0 L-14.9 75.2 L-11.5 67.4 L-13.6 68.6 Z M-14.0 86.4 L-6.0 86.4 L-6.0 92.0 L-14.0 92.0 Z M11.7 67.2 L14.1 71.6 L12.7 70.8 L14.8 76.0 L13.0 75.2 L15.5 80.3 L13.3 79.5 L16.2 84.7 L13.6 83.9 L16.9 89.0 L6.4 89.0 L9.8 83.9 L7.1 84.7 L10.1 79.5 L7.9 80.3 L10.4 75.2 L8.6 76.0 L10.7 70.8 L9.3 71.6 Z M7.7 87.0 L15.7 87.0 L15.7 92.0 L7.7 92.0 Z M35.6 54.4 L40.6 62.7 L37.7 61.2 L42.3 70.9 L38.5 69.4 L44.0 79.2 L39.2 77.7 L45.8 87.5 L25.5 87.5 L32.1 77.7 L27.3 79.2 L32.8 69.4 L29.0 70.9 L33.6 61.2 L30.7 62.7 Z M31.6 85.5 L39.6 85.5 L39.6 92.0 L31.6 92.0 Z M53.8 62.3 L57.5 68.8 L55.3 67.6 L58.8 75.4 L55.9 74.2 L60.0 81.9 L56.4 80.7 L61.3 88.4 L46.2 88.4 L51.1 80.7 L47.5 81.9 L51.7 74.2 L48.8 75.4 L52.2 67.6 L50.1 68.8 Z M49.8 86.4 L57.8 86.4 L57.8 92.0 L49.8 92.0 Z M77.4 64.5 L80.6 69.3 L78.7 68.4 L81.5 74.2 L79.1 73.3 L82.5 79.0 L79.5 78.1 L83.4 83.8 L79.9 83.0 L84.3 88.7 L70.4 88.7 L74.9 83.0 L71.4 83.8 L75.3 78.1 L72.3 79.0 L75.7 73.3 L73.3 74.2 L76.1 68.4 L74.2 69.3 Z M73.4 86.7 L81.4 86.7 L81.4 92.0 L73.4 92.0 Z M99.5 55.2 L103.5 61.6 L101.2 60.5 L104.7 68.1 L101.7 67.0 L105.8 74.6 L102.2 73.4 L107.0 81.1 L102.7 79.9 L108.2 87.6 L90.8 87.6 L96.4 79.9 L92.0 81.1 L96.9 73.4 L93.2 74.6 L97.4 67.0 L94.4 68.1 L97.9 60.5 L95.6 61.6 Z M95.5 85.6 L103.5 85.6 L103.5 92.0 L95.5 92.0 Z M116.1 69.3 L118.3 73.3 L117.1 72.5 L119.0 77.3 L117.3 76.6 L119.6 81.3 L117.6 80.6 L120.3 85.3 L117.9 84.6 L120.9 89.3 L111.3 89.3 L114.4 84.6 L112.0 85.3 L114.7 80.6 L112.6 81.3 L114.9 76.6 L113.3 77.3 L115.2 72.5 L113.9 73.3 Z M112.1 87.3 L120.1 87.3 L120.1 92.0 L112.1 92.0 Z M145.8 64.3 L148.9 69.2 L147.1 68.3 L149.8 74.1 L147.5 73.2 L150.7 78.9 L147.9 78.1 L151.5 83.8 L148.2 82.9 L152.4 88.7 L139.2 88.7 L143.5 82.9 L140.1 83.8 L143.8 78.1 L141.0 78.9 L144.2 73.2 L141.9 74.1 L144.6 68.3 L142.8 69.2 Z M141.8 86.7 L149.8 86.7 L149.8 92.0 L141.8 92.0 Z M173.4 60.6 L176.8 66.1 L174.8 65.1 L177.9 71.7 L175.3 70.7 L178.9 77.2 L175.7 76.2 L179.9 82.7 L176.1 81.7 L181.0 88.2 L165.8 88.2 L170.6 81.7 L166.8 82.7 L171.1 76.2 L167.9 77.2 L171.5 70.7 L168.9 71.7 L171.9 65.1 L169.9 66.1 Z M169.4 86.2 L177.4 86.2 L177.4 92.0 L169.4 92.0 Z M194.2 52.9 L198.4 61.5 L196.0 60.0 L199.9 70.1 L196.6 68.6 L201.3 78.7 L197.2 77.2 L202.8 87.3 L185.6 87.3 L191.2 77.2 L187.1 78.7 L191.8 68.6 L188.5 70.1 L192.4 60.0 L190.0 61.5 Z M190.2 85.3 L198.2 85.3 L198.2 92.0 L190.2 92.0 Z M215.5 54.9 L220.4 63.1 L217.5 61.6 L222.1 71.2 L218.3 69.7 L223.8 79.4 L219.0 77.9 L225.5 87.5 L205.5 87.5 L212.0 77.9 L207.2 79.4 L212.7 69.7 L208.9 71.2 L213.4 61.6 L210.6 63.1 Z M211.5 85.5 L219.5 85.5 L219.5 92.0 L211.5 92.0 Z M237.0 58.7 L241.3 66.0 L238.8 64.7 L242.8 73.4 L239.5 72.0 L244.3 80.7 L240.1 79.4 L245.8 88.0 L228.2 88.0 L234.0 79.4 L229.7 80.7 L234.6 72.0 L231.2 73.4 L235.2 64.7 L232.7 66.0 Z M233.0 86.0 L241.0 86.0 L241.0 92.0 L233.0 92.0 Z M263.1 55.3 L267.4 61.7 L264.9 60.6 L268.7 68.2 L265.4 67.0 L270.0 74.7 L266.0 73.5 L271.3 81.1 L266.5 80.0 L272.6 87.6 L253.5 87.6 L259.6 80.0 L254.8 81.1 L260.1 73.5 L256.1 74.7 L260.7 67.0 L257.4 68.2 L261.2 60.6 L258.7 61.7 Z M259.1 85.6 L267.1 85.6 L267.1 92.0 L259.1 92.0 Z M284.8 60.1 L288.9 67.1 L286.5 65.9 L290.3 74.1 L287.1 72.9 L291.7 81.2 L287.7 79.9 L293.2 88.2 L276.4 88.2 L281.8 79.9 L277.8 81.2 L282.4 72.9 L279.2 74.1 L283.0 65.9 L280.6 67.1 Z M280.8 86.2 L288.8 86.2 L288.8 92.0 L280.8 92.0 Z M312.2 55.5 L316.2 63.5 L313.9 62.1 L317.6 71.5 L314.5 70.1 L319.0 79.6 L315.1 78.1 L320.4 87.6 L304.0 87.6 L309.4 78.1 L305.4 79.6 L309.9 70.1 L306.8 71.5 L310.5 62.1 L308.2 63.5 Z M308.2 85.6 L316.2 85.6 L316.2 92.0 L308.2 92.0 Z M339.9 64.2 L343.3 70.4 L341.3 69.3 L344.5 76.5 L341.8 75.4 L345.6 82.6 L342.3 81.5 L346.8 88.7 L332.9 88.7 L337.4 81.5 L334.1 82.6 L337.9 75.4 L335.3 76.5 L338.4 69.3 L336.5 70.4 Z M335.9 86.7 L343.9 86.7 L343.9 92.0 L335.9 92.0 Z M366.1 68.0 L369.0 72.2 L367.3 71.5 L369.8 76.4 L367.7 75.7 L370.7 80.7 L368.0 79.9 L371.5 84.9 L368.4 84.1 L372.4 89.1 L359.8 89.1 L363.8 84.1 L360.6 84.9 L364.2 79.9 L361.5 80.7 L364.5 75.7 L362.4 76.4 L364.9 71.5 L363.2 72.2 Z M362.1 87.1 L370.1 87.1 L370.1 92.0 L362.1 92.0 Z M392.7 56.9 L396.6 64.6 L394.3 63.2 L397.9 72.4 L394.9 71.0 L399.2 80.1 L395.5 78.7 L400.6 87.8 L384.9 87.8 L390.0 78.7 L386.3 80.1 L390.6 71.0 L387.6 72.4 L391.1 63.2 L388.9 64.6 Z M388.7 85.8 L396.7 85.8 L396.7 92.0 L388.7 92.0 Z' fill='%230B1418'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat, linear-gradient(180deg, #1B2549 0%, #3A3768 55%, #B9644F 100%); color: var(--cprk-cream); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1; } /* ── The prompt: a pine-green trail sign ── */ #ranking-content.ranking-design.rkd-summerCamp #ranking-question { display: flex; align-items: center; justify-content: center; min-height: 82px; margin: 0 0 14px; padding: 10px 16px 12px; box-sizing: border-box; background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)) 14px 7px / calc(100% - 28px) 4px no-repeat, repeating-linear-gradient(180deg, transparent 0 21px, rgba(0, 0, 0, 0.09) 21px 23px), var(--cprk-pine); color: var(--cprk-cream); text-shadow: 0 3px 0 rgba(10, 12, 10, 0.55); border: 4px solid var(--cprk-ink); border-radius: 14px; box-shadow: 0 7px 0 var(--cprk-shadow); font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.12; overflow-wrap: anywhere; } /* A long prompt (summer-camp.js marks one over 48 characters) steps its type down. */ #ranking-content.ranking-design.rkd-summerCamp.cprk-long #ranking-question { font-size: 19px; } /* ── The instruction ── */ #ranking-content.ranking-design.rkd-summerCamp .ranking-instruction { margin: 0 auto 14px; color: var(--cprk-caption); font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 700; font-size: 17px; line-height: 21px; } /* ── The list: light pine planks, 8 px apart (initRankingDrag's measure) ── */ #ranking-content.ranking-design.rkd-summerCamp .ranking-list { gap: 8px; margin: 0 0 22px; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item { --cprk-chip: #1E6FA6; --cprk-rim: var(--cprk-wood-dark); height: var(--cprk-row); min-height: 0; box-sizing: border-box; gap: 11px; padding: 0 14px 0 10px; background: repeating-linear-gradient(180deg, transparent 0 15px, rgba(139, 90, 43, 0.14) 15px 17px), var(--cprk-wood); color: var(--cprk-brown); border: 4px solid var(--cprk-ink); border-radius: 14px; box-shadow: 0 5px 0 var(--cprk-shadow); transition: background-color 0.12s ease, box-shadow 0.12s ease; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item[data-index="1"] { --cprk-chip: #C94A17; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item[data-index="2"] { --cprk-chip: #2C7A48; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item[data-index="3"] { --cprk-chip: #AE2C59; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item[data-index="4"] { --cprk-chip: #9A7209; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item[data-index="5"] { --cprk-chip: #654A99; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item[data-index="6"] { --cprk-chip: #17777B; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item[data-index="7"] { --cprk-chip: #8E431D; } /* The phone's own order, on a stitched merit patch. */ #ranking-content.ranking-design.rkd-summerCamp .ranking-item .rank-number { flex: 0 0 auto; width: 40px; height: 40px; min-width: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding-top: 2px; border-radius: 50%; background: var(--cprk-cream); color: var(--cprk-brown); border: 2px solid var(--cprk-ink); box-shadow: inset 0 0 0 4px var(--cprk-rim), inset 0 0 0 5.5px var(--cprk-ink), 0 2px 0 rgba(4, 8, 14, 0.4); font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; font-size: 19px; line-height: 1; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item .rank-number.cprk-bump { animation: cprkBump 0.24s var(--cprk-spring); } /* The option's colour, by its place in the document: a painted pip. */ #ranking-content.ranking-design.rkd-summerCamp .ranking-item .rank-color { width: 10px; height: 38px; box-sizing: border-box; background: var(--cprk-chip); border: 2px solid var(--cprk-ink); border-radius: 5px; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item .rank-name { font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 800; font-size: 21px; line-height: 1.08; color: var(--cprk-brown); 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-summerCamp .ranking-item .drag-handle { width: 24px; height: 20px; font-size: 0; color: transparent; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cg fill='%232B1B0E' fill-opacity='0.6'%3E%3Crect x='0' y='0' width='26' height='4' rx='2'/%3E%3Crect x='0' y='9' width='26' height='4' rx='2'/%3E%3Crect x='0' y='18' width='26' height='4' rx='2'/%3E%3C/g%3E%3C/svg%3E") center / 24px 20px no-repeat; } /* The row being dragged lifts onto gold (the drag owns `transform`). */ #ranking-content.ranking-design.rkd-summerCamp .ranking-item.dragging { --cprk-rim: var(--cprk-gold); opacity: 1; background: var(--cprk-lift); box-shadow: 0 12px 14px rgba(30, 20, 10, 0.35), 0 5px 0 var(--cprk-shadow); rotate: -2.5deg; scale: 1.03; } /* ── Submit: a gold plank ── */ #ranking-content.ranking-design.rkd-summerCamp .ranking-submit-btn { width: 100%; height: 66px; padding: 2px 12px 0; background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)) 14px 7px / calc(100% - 28px) 4px no-repeat, repeating-linear-gradient(180deg, transparent 0 18px, rgba(139, 90, 43, 0.14) 18px 20px), var(--cprk-gold); color: var(--cprk-brown); border: 4px solid var(--cprk-ink); border-radius: 14px; box-shadow: 0 7px 0 var(--cprk-shadow); font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1; transition: transform 0.1s, box-shadow 0.1s; } #ranking-content.ranking-design.rkd-summerCamp .ranking-submit-btn:active:not(:disabled) { transform: translateY(5px) scale(0.97); box-shadow: 0 2px 0 var(--cprk-shadow); } #ranking-content.ranking-design.rkd-summerCamp .ranking-submit-btn:disabled { opacity: 1; background: #D8CDB8; color: #8C7E6C; } /* ── The end screens: submitted (a green patch and its check), closed (a red lock patch) ── */ #ranking-content.ranking-design.rkd-summerCamp .ranking-submitted { padding: 64px 0 20px; } #ranking-content.ranking-design.rkd-summerCamp .ranking-submitted > div:first-child { width: 260px; height: 260px; margin: -10px auto 4px !important; box-sizing: border-box; font-size: 0 !important; color: transparent; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-22 -22 144 144'%3E%3Ccircle cx='-12.4' cy='38.0' r='3.7' fill='%23FFF6C8' stroke='%23FFCC4D' stroke-width='1.4'/%3E%3Cpath d='M-11.4 59.4 L-8.4 66.2 L-11.4 72.9 L-14.3 66.2 Z' transform='rotate(255 -11.4 66.2)' fill='%23F2701F' stroke='%231A1C19' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M-3.3 1.3 L-0.8 7.2 L-3.3 13.1 L-5.9 7.2 Z' transform='rotate(309 -3.3 7.2)' fill='%23F5B532' stroke='%231A1C19' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M-4.8 85.9 L-1.4 93.8 L-4.8 101.6 L-8.3 93.8 Z' transform='rotate(231 -4.8 93.8)' fill='%23FFE9A0' stroke='%231A1C19' stroke-width='1.1' stroke-linejoin='round'/%3E%3Ccircle cx='57.1' cy='110.2' r='2.2' fill='%23FFF6C8' stroke='%23FFCC4D' stroke-width='1.4'/%3E%3Cpath d='M-7.8 31.2 L-6.0 35.3 L-7.8 39.4 L-9.6 35.3 Z' transform='rotate(284 -7.8 35.3)' fill='%23FFCC4D' stroke='%231A1C19' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M44.3 -15.9 L47.4 -8.7 L44.3 -1.5 L41.1 -8.7 Z' transform='rotate(354 44.3 -8.7)' fill='%23F2701F' stroke='%231A1C19' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M57.0 107.4 L59.9 114.1 L57.0 120.8 L54.1 114.1 Z' transform='rotate(174 57.0 114.1)' fill='%23F5B532' stroke='%231A1C19' stroke-width='1.1' stroke-linejoin='round'/%3E%3Ccircle cx='-14.8' cy='70.7' r='2.0' fill='%23FFF6C8' stroke='%23FFE9A0' stroke-width='1.4'/%3E%3Cpath d='M71.0 -15.4 L74.3 -7.8 L71.0 -0.2 L67.6 -7.8 Z' transform='rotate(380 71.0 -7.8)' fill='%23FFCC4D' stroke='%231A1C19' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M35.2 -21.2 L38.9 -12.9 L35.2 -4.6 L31.6 -12.9 Z' transform='rotate(347 35.2 -12.9)' fill='%23FFCC4D' stroke='%231A1C19' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M-8.2 4.0 L-4.5 12.5 L-8.2 21.1 L-11.9 12.5 Z' transform='rotate(303 -8.2 12.5)' fill='%23F2701F' stroke='%231A1C19' stroke-width='1.1' stroke-linejoin='round'/%3E%3Ccircle cx='91.3' cy='-3.0' r='2.4' fill='%23FFF6C8' stroke='%23F5B532' stroke-width='1.4'/%3E%3Cpath d='M107.0 13.9 L109.7 20.1 L107.0 26.3 L104.3 20.1 Z' transform='rotate(422 107.0 20.1)' fill='%23FFE9A0' stroke='%231A1C19' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M66.3 106.9 L69.7 114.5 L66.3 122.2 L63.0 114.5 Z' transform='rotate(166 66.3 114.5)' fill='%23FFCC4D' stroke='%231A1C19' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M93.5 92.1 L96.6 99.1 L93.5 106.2 L90.4 99.1 Z' transform='rotate(138 93.5 99.1)' fill='%23FFCC4D' stroke='%231A1C19' stroke-width='1.1' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='53' r='48' fill='rgba(4,8,14,0.45)'/%3E%3Ccircle cx='50' cy='50' r='48' fill='%23F5B532' stroke='%231A1C19' stroke-width='3'/%3E%3Ccircle cx='50' cy='50' r='44' fill='none' stroke='%23b08224' stroke-width='5' stroke-dasharray='1.2 2.2'/%3E%3Ccircle cx='50' cy='50' r='38' fill='%232C7A48' stroke='%231A1C19' stroke-width='2.5'/%3E%3Ccircle cx='50' cy='50' r='33.5' fill='none' stroke='%23215c36' stroke-width='1.6' stroke-dasharray='3 3'/%3E%3Cpath d='M33 51 L45 63 L68 38' fill='none' stroke='%23FFF7E8' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } #ranking-content.ranking-design.rkd-summerCamp .ranking-submitted.cprk-closed > div:first-child { width: 190px; height: 190px; margin: 24px auto 28px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='53' r='48' fill='rgba(4,8,14,0.45)'/%3E%3Ccircle cx='50' cy='50' r='48' fill='%23FFF7E8' stroke='%231A1C19' stroke-width='3'/%3E%3Ccircle cx='50' cy='50' r='44' fill='none' stroke='%23b8b2a7' stroke-width='5' stroke-dasharray='1.2 2.2'/%3E%3Ccircle cx='50' cy='50' r='38' fill='%23B4332A' stroke='%231A1C19' stroke-width='2.5'/%3E%3Ccircle cx='50' cy='50' r='33.5' fill='none' stroke='%23872620' stroke-width='1.6' stroke-dasharray='3 3'/%3E%3Crect x='34' y='46' width='32' height='26' rx='4' fill='%23FFF7E8'/%3E%3Cpath d='M40 46 L40 38 Q40 28 50 28 Q60 28 60 38 L60 46' fill='none' stroke='%23FFF7E8' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='58' r='4' fill='%23B4332A'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } #ranking-content.ranking-design.rkd-summerCamp .ranking-submitted h2 { margin: 0 -10px 12px; color: var(--cprk-pine); font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; font-size: clamp(26px, calc(8.6vw - 2px), 32px); line-height: 1.1; white-space: nowrap; } #ranking-content.ranking-design.rkd-summerCamp .ranking-submitted.cprk-closed h2 { color: var(--cprk-brown); font-size: clamp(30px, calc(10.3vw - 2px), 38px); } #ranking-content.ranking-design.rkd-summerCamp .ranking-submitted p { margin: 0; color: var(--cprk-caption); font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3; } /* ── Entrances: only when a screen or a ranking arrives (.cprk-enter) ── */ #ranking-content.ranking-design.rkd-summerCamp.cprk-enter #ranking-question { animation: cprkDrop 0.6s var(--cprk-spring) backwards; } #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-instruction { animation: cprkPop 0.4s 0.25s var(--cprk-spring) backwards; } #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-item { animation: cprkDeal 0.55s 0.3s var(--cprk-spring) backwards; } #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-item:nth-child(2) { animation-delay: 0.38s; } #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-item:nth-child(3) { animation-delay: 0.46s; } #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-item:nth-child(4) { animation-delay: 0.54s; } #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-item:nth-child(5) { animation-delay: 0.62s; } #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-item:nth-child(6) { animation-delay: 0.7s; } #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-item:nth-child(7) { animation-delay: 0.78s; } #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-item:nth-child(8) { animation-delay: 0.86s; } #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-submit-btn { animation: cprkButton 0.45s 0.8s var(--cprk-spring) backwards; } /* The end screen lands 0.65 s after it shows: the patch popped on (0.05 + 0.5 s), the title stamped on (0.25 + 0.4 s) (RankingSummerCampDesign.phoneClosedEntrance; the tests read these timings). The Mac's stopDelayMs is the pennant's landing less 0.65 s, so "Ranking closed" lands with the projector's TOP PICK. */ #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-submitted > div:first-child { animation: cprkPatch 0.5s 0.05s var(--cprk-spring) backwards; } #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-submitted h2 { animation: cprkStamp 0.4s 0.25s var(--cprk-slam) backwards, cprkAppear 0.01s 0.25s steps(1) backwards; } #ranking-content.ranking-design.rkd-summerCamp.cprk-enter .ranking-submitted p { animation: cprkPop 0.4s 0.45s var(--cprk-spring) backwards; } @keyframes cprkDrop { from { translate: 0 -160px; rotate: -6deg; } } @keyframes cprkPop { from { scale: 0; } } @keyframes cprkDeal { from { translate: 420px 0; rotate: 6deg; } } @keyframes cprkButton { from { scale: 0; rotate: 8deg; } } @keyframes cprkPatch { from { scale: 0; rotate: -30deg; } } @keyframes cprkStamp { from { scale: 1.7; rotate: -6deg; } } @keyframes cprkAppear { from { visibility: hidden; } to { visibility: visible; } } @keyframes cprkBump { 50% { scale: 1.22; } } /* ── 6+ options (index.html's .compact): shorter rows ── */ #ranking-content.ranking-design.rkd-summerCamp.compact { --cprk-row: 48px; } #ranking-content.ranking-design.rkd-summerCamp.compact #ranking-question { min-height: 70px; margin-bottom: 10px; } #ranking-content.ranking-design.rkd-summerCamp.compact .ranking-instruction { margin-bottom: 10px; } #ranking-content.ranking-design.rkd-summerCamp.compact .ranking-list { margin-bottom: 16px; } #ranking-content.ranking-design.rkd-summerCamp.compact .ranking-item { padding: 0 12px 0 8px; gap: 9px; border-radius: 12px; } #ranking-content.ranking-design.rkd-summerCamp.compact .ranking-item .rank-number { width: 32px; height: 32px; font-size: 16px; box-shadow: inset 0 0 0 3px var(--cprk-rim), inset 0 0 0 4.5px var(--cprk-ink); } #ranking-content.ranking-design.rkd-summerCamp.compact .ranking-item .rank-color { height: 28px; width: 9px; } #ranking-content.ranking-design.rkd-summerCamp.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-summerCamp { --cprk-row: 54px; --cprk-head: 62px; padding: calc(var(--cprk-head) + 12px) 12px 14px; } #ranking-content.ranking-design.rkd-summerCamp::before { padding-top: 14px; font-size: 21px; } #ranking-content.ranking-design.rkd-summerCamp #ranking-question { min-height: 64px; font-size: 21px; margin-bottom: 10px; } #ranking-content.ranking-design.rkd-summerCamp .ranking-instruction { font-size: 15px; line-height: 18px; margin-bottom: 10px; } #ranking-content.ranking-design.rkd-summerCamp .ranking-list { margin-bottom: 16px; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item .rank-number { width: 36px; height: 36px; font-size: 17px; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item .rank-color { height: 32px; } #ranking-content.ranking-design.rkd-summerCamp .ranking-item .rank-name { font-size: 18px; } #ranking-content.ranking-design.rkd-summerCamp .ranking-submit-btn { height: 56px; font-size: 23px; } #ranking-content.ranking-design.rkd-summerCamp.cprk-long #ranking-question { font-size: 17px; } #ranking-content.ranking-design.rkd-summerCamp.compact { --cprk-row: 39px; --cprk-head: 52px; padding-bottom: 10px; } #ranking-content.ranking-design.rkd-summerCamp.compact::before { padding-top: 12px; font-size: 19px; } #ranking-content.ranking-design.rkd-summerCamp.compact .ranking-submit-btn { height: 48px; font-size: 21px; } #ranking-content.ranking-design.rkd-summerCamp.compact #ranking-question { min-height: 54px; margin-bottom: 8px; } #ranking-content.ranking-design.rkd-summerCamp.compact .ranking-list { margin-bottom: 12px; } /* Eight rows under a long prompt: the instruction gives way. */ #ranking-content.ranking-design.rkd-summerCamp.compact.cprk-long .ranking-instruction { display: none; } #ranking-content.ranking-design.rkd-summerCamp.compact.cprk-long #ranking-question { font-size: 15px; padding: 6px 12px 8px; } #ranking-content.ranking-design.rkd-summerCamp.compact .ranking-item .rank-number { width: 28px; height: 28px; font-size: 14px; } #ranking-content.ranking-design.rkd-summerCamp.compact .ranking-item .rank-color { height: 24px; } #ranking-content.ranking-design.rkd-summerCamp.compact .ranking-item .rank-name { font-size: 16px; } #ranking-content.ranking-design.rkd-summerCamp .ranking-submitted { padding-top: 12px; } #ranking-content.ranking-design.rkd-summerCamp .ranking-submitted > div:first-child { width: 210px; height: 210px; } #ranking-content.ranking-design.rkd-summerCamp .ranking-submitted.cprk-closed > div:first-child { width: 150px; height: 150px; margin: 12px auto 20px !important; } } @media (prefers-reduced-motion: reduce) { #ranking-content.ranking-design.rkd-summerCamp *, #ranking-content.ranking-design.rkd-summerCamp *::before, #ranking-content.ranking-design.rkd-summerCamp *::after, #ranking-content.ranking-design.rkd-summerCamp { animation: none !important; transition: none !important; } }