/* Would You Rather · Summer Camp phone skin ("Campfire Trail", owner decision 2026-10-07): the Holiday Themes canvas's CP-WYR-Phone and CP-WYR-Anim boards. Every rule is scoped to #wyr-content.wyr-design.wyrd-summerCamp, so no other screen or feature is touched; the classic screens (no .wyr-design) never match. A tent-canvas card under a dusk strip of pines; the two options on painted trail signs (lake and campfire) that drop in and swing, an "or" merit patch between them, a campfire clock that burns down; the pick gets a gold ring and a green check patch while the other trail goes dusk grey. The result: the two trails, the rope with its frayed ends and plain cream split line, the tallies, and the WINNER merit badge (or the "TIED!" ribbon). The colours are ShowThemePalettes.swift's SummerCampPalette. Motion is transforms only, and /wyr-designs/summer-camp.js keeps a re-render of the same screen from replaying it. */ @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'); } #wyr-content.wyr-design.wyrd-summerCamp { --cp-ink: #1A1C19; --cp-brown: #2B1B0E; --cp-cream: #FFF7E8; --cp-canvas: #F6EEDB; --cp-wood: #EBCB94; --cp-gold: #F5B532; --cp-flame: #FFCC4D; --cp-ember: #F2701F; --cp-grey: #4B4A57; --cp-grey-text: #B3B0BE; --cp-a: #1E6FA6; --cp-b: #C94A17; --cp-berry: #AE2C59; --cp-note: #6A5440; --cp-slab: 'Alfa Slab One', Georgia, serif; --cp-shadow: 0 3px 0 rgba(10, 12, 10, 0.55); --cp-grain: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 30px, rgba(0, 0, 0, 0.1) 30px 32px), linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0 3px, rgba(255, 255, 255, 0) 3px); flex-direction: column; position: relative; margin: -8px -6px 0; padding: 0 16px 22px; min-height: 70vh; box-sizing: border-box; border: 4px solid var(--cp-ink); border-radius: 28px; overflow: hidden; background: repeating-linear-gradient(0deg, rgba(139, 90, 43, 0.05) 0 2px, rgba(0, 0, 0, 0) 2px 5px), repeating-linear-gradient(90deg, rgba(139, 90, 43, 0.05) 0 2px, rgba(0, 0, 0, 0) 2px 5px), var(--cp-canvas); color: var(--cp-brown); font-family: 'Sidekick Trivia Barlow', 'Barlow', system-ui, sans-serif; font-weight: 700; } /* renderWYR shows the screen with an inline display: block. */ #wyr-content.wyr-design.wyrd-summerCamp[style*="block"] { display: flex !important; } #wyr-content.wyr-design.wyrd-summerCamp > * { flex: 0 0 auto; } /* ── The dusk strip: "Would You Rather" over the pines ── */ #wyr-content.wyr-design.wyrd-summerCamp .question { order: -2; margin: 0 -16px 16px; height: 92px; box-sizing: border-box; padding: 0 70px 24px; display: flex; align-items: center; justify-content: center; border-bottom: 4px solid var(--cp-ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 96' width='390' height='96'%3E%3Ccircle cx='358' cy='30' r='10' fill='%23FCEFC8'/%3E%3Ccircle cx='363' cy='27' r='9' 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 / 390px 96px no-repeat, linear-gradient(180deg, #1B2549 0%, #3A3768 55%, #B9644F 100%); color: var(--cp-cream); font-family: var(--cp-slab); font-weight: 400; font-size: 26px; line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); text-align: center; white-space: nowrap; } /* ── Paused (the host stopped voting): a light pine sign ── */ #wyr-content.wyr-design.wyrd-summerCamp .stopped-banner { order: -1; margin: 0 0 14px; padding: 12px 18px 11px; background: var(--cp-grain), var(--cp-wood); color: var(--cp-brown); border: 4px solid var(--cp-ink); border-radius: 12px; box-shadow: 0 5px 0 rgba(4, 8, 14, 0.4); font-family: var(--cp-slab); font-weight: 400; font-size: 18px; line-height: 1.2; text-align: center; animation: cpwHang 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #wyr-content.wyr-design.wyrd-summerCamp .stopped-banner:not(.show) { display: none; } /* ── The timer: an ember bar and the campfire clock ── */ #wyr-content.wyr-design.wyrd-summerCamp .vote-timer { order: 0; margin: 0; } #wyr-content.wyr-design.wyrd-summerCamp .vote-timer.show { --cpw-k: 1; --cpw-deg: 360deg; display: flex; align-items: center; gap: 16px; margin: 30px 2px 12px; animation: cpwRise 0.75s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #wyr-content.wyr-design.wyrd-summerCamp .vote-timer-bar { flex: 1; height: 20px; box-sizing: border-box; background: #E7DCC2; border: 3px solid var(--cp-ink); border-radius: 10px; overflow: hidden; } #wyr-content.wyr-design.wyrd-summerCamp .vote-timer-fill { background-color: var(--cp-ember) !important; border-radius: 0; } #wyr-content.wyr-design.wyrd-summerCamp .vote-timer-text { position: relative; flex: 0 0 auto; width: 80px; height: 80px; margin: 0; border-radius: 50%; background: radial-gradient(circle, #F4DCAE 0 4px, var(--cp-wood) 4px 7px, #C99357 7px 8px, var(--cp-wood) 8px 12px, #C99357 12px 13px, #F4DCAE 13px 17px, var(--cp-ink) 17px 20px, rgba(0, 0, 0, 0) 20px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='34' fill='none' stroke='%232A2320' stroke-width='12'/%3E%3Ccircle cx='40' cy='40' r='29' fill='none' stroke='%231A1C19' stroke-width='2.5'/%3E%3Ccircle cx='40' cy='40' r='39' fill='none' stroke='%231A1C19' stroke-width='2.5'/%3E%3Cellipse cx='44.1' cy='6.2' rx='6.6' ry='5.6' transform='rotate(7 44.1 6.2)' fill='%2377757E' stroke='%231A1C19' stroke-width='2.5'/%3E%3Cellipse cx='64.8' cy='16.8' rx='6.6' ry='5.6' transform='rotate(47 64.8 16.8)' fill='%235F5E68' stroke='%231A1C19' stroke-width='2.5'/%3E%3Cellipse cx='73.9' cy='38.1' rx='6.6' ry='5.6' transform='rotate(87 73.9 38.1)' fill='%238B8992' stroke='%231A1C19' stroke-width='2.5'/%3E%3Cellipse cx='67.2' cy='60.4' rx='6.6' ry='5.6' transform='rotate(127 67.2 60.4)' fill='%2377757E' stroke='%231A1C19' stroke-width='2.5'/%3E%3Cellipse cx='47.7' cy='73.1' rx='6.6' ry='5.6' transform='rotate(167 47.7 73.1)' fill='%235F5E68' stroke='%231A1C19' stroke-width='2.5'/%3E%3Cellipse cx='24.6' cy='70.3' rx='6.6' ry='5.6' transform='rotate(207 24.6 70.3)' fill='%238B8992' stroke='%231A1C19' stroke-width='2.5'/%3E%3Cellipse cx='8.7' cy='53.4' rx='6.6' ry='5.6' transform='rotate(247 8.7 53.4)' fill='%2377757E' stroke='%231A1C19' stroke-width='2.5'/%3E%3Cellipse cx='7.5' cy='30.1' rx='6.6' ry='5.6' transform='rotate(287 7.5 30.1)' fill='%235F5E68' stroke='%231A1C19' stroke-width='2.5'/%3E%3Cellipse cx='21.4' cy='11.5' rx='6.6' ry='5.6' transform='rotate(327 21.4 11.5)' fill='%238B8992' stroke='%231A1C19' stroke-width='2.5'/%3E%3C/svg%3E") center / 80px 80px no-repeat, conic-gradient(var(--cp-flame) 0deg, var(--cp-ember) calc(var(--cpw-deg) * 0.7), #E04A12 var(--cpw-deg), #3A2F2B var(--cpw-deg) 360deg); color: transparent !important; font-size: 0; } #wyr-content.wyr-design.wyrd-summerCamp .vote-timer-text::before { content: ''; position: absolute; left: 12px; bottom: 64px; width: 56px; height: 53px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 68 64' width='68' height='64'%3E%3Cpath d='M30.0 56.0 C-3.0 56.0 -7.2 30.8 13.2 15.7 C18.0 28.0 27.0 21.3 30.0 0.0 C37.2 16.8 50.4 21.3 48.0 10.1 C69.6 28.0 63.6 56.0 30.0 56.0 Z' fill='%23F2701F' stroke='%231A1C19' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M30.0 56.0 C8.0 56.0 5.2 38.5 18.8 27.9 C22.0 36.5 28.0 31.8 30.0 17.0 C34.8 28.7 43.6 31.8 42.0 24.0 C56.4 36.5 52.4 56.0 30.0 56.0 Z' fill='%23FFCC4D'/%3E%3Cpath d='M30.0 56.0 C17.9 56.0 16.4 46.1 23.8 40.2 C25.6 45.0 28.9 42.4 30.0 34.0 C32.6 40.6 37.5 42.4 36.6 38.0 C44.5 45.0 42.3 56.0 30.0 56.0 Z' fill='%23FFF0B0'/%3E%3C/svg%3E") center bottom / 56px 53px no-repeat; transform-origin: 50% 100%; transform: scale(calc(0.35 + 0.65 * var(--cpw-k))); transition: transform 0.4s ease-out; z-index: -1; } #wyr-content.wyr-design.wyrd-summerCamp .vote-timer-text::after { content: attr(data-secs); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--cp-brown); font-family: var(--cp-slab); font-size: 22px; line-height: 1; padding-top: 2px; font-variant-numeric: tabular-nums; } #wyr-content.wyr-design.wyrd-summerCamp .vote-timer-text[data-long]::after { font-size: 15px; } /* The last seconds: the number bumps each second. */ #wyr-content.wyr-design.wyrd-summerCamp .vote-timer[data-level] .vote-timer-text.cpw-tick::after { animation: cpwBump 0.25s ease-out; } /* ── Voting: two painted trail signs and the or patch ── */ #wyr-content.wyr-design.wyrd-summerCamp .wyr-options { order: 2; gap: 0; margin: 6px 0 0; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-option-btn { --cp-side: var(--cp-a); position: relative; width: 100%; min-height: 150px; margin: 0; padding: 18px 24px; border: 4px solid var(--cp-ink); border-radius: 14px; background: var(--cp-grain), var(--cp-side); color: var(--cp-cream); box-shadow: 0 6px 0 rgba(4, 8, 14, 0.4); font-family: 'Sidekick Trivia Barlow', 'Barlow', system-ui, sans-serif; font-weight: 800; font-size: 25px; line-height: 1.12; text-align: center; text-shadow: var(--cp-shadow); transform-origin: 50% 0; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease; animation: cpwHang 0.75s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-option-btn.wyr-b { --cp-side: var(--cp-b); animation-delay: 0.4s; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-option-btn:active { transform: scale(0.95); } #wyr-content.wyr-design.wyrd-summerCamp .wyr-option-btn.selected { padding-left: 48px; padding-right: 48px; border-color: var(--cp-ink); background: var(--cp-grain), var(--cp-side); box-shadow: 0 0 0 8px var(--cp-gold), 0 0 0 11px var(--cp-ink), 0 12px 0 rgba(4, 8, 14, 0.4); } /* The pick's badge: a green check patch on the sign's corner. */ #wyr-content.wyr-design.wyrd-summerCamp .wyr-option-btn.selected::after { content: ''; position: absolute; right: -8px; top: -22px; width: 72px; height: 75px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 104' width='100' height='104'%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='%23B07F24' 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%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 / 72px 75px no-repeat; animation: cpwPatch 0.5s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* The other trail waits in dusk grey. */ #wyr-content.wyr-design.wyrd-summerCamp .wyr-options:has(.selected) .wyr-option-btn:not(.selected), #wyr-content.wyr-design.wyrd-summerCamp .wyr-option-btn:disabled:not(.selected) { background: var(--cp-grain), var(--cp-grey); color: var(--cp-grey-text); text-shadow: none; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-option-btn:disabled { opacity: 1; cursor: default; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-or { width: 66px; height: 66px; margin: 14px auto; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding-bottom: 3px; background: radial-gradient(circle, var(--cp-cream) 0 22px, var(--cp-ink) 22px 24px, rgba(0, 0, 0, 0) 24px), repeating-conic-gradient(var(--cp-gold) 0 6deg, #B07F24 6deg 9deg); box-shadow: 0 0 0 3px var(--cp-ink), 0 4px 0 3px rgba(4, 8, 14, 0.35); color: var(--cp-brown); font-family: var(--cp-slab); font-weight: 400; font-size: 24px; line-height: 1; animation: cpwPop 0.75s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* A re-render of the same question (a settings write) never replays the entries. */ #wyr-content.wyr-design.wyrd-summerCamp .wyr-options.cpw-same .wyr-option-btn, #wyr-content.wyr-design.wyrd-summerCamp .wyr-options.cpw-same .wyr-or { animation: none; } /* ── Status ── */ #wyr-content.wyr-design.wyrd-summerCamp .status { order: 4; margin: 22px 0 0; color: var(--cp-note); font-weight: 700; font-size: 19px; line-height: 1.25; text-align: center; animation: cpwRise 0.6s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #wyr-content.wyr-design.wyrd-summerCamp .status.cpw-stamp { animation: cpwStamp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* Locked, waiting for the beat or the reveal: the campfire and "Locked in!". */ #wyr-content.wyr-design.wyrd-summerCamp:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status { margin-top: 60px; color: var(--cp-brown); font-family: var(--cp-slab); font-weight: 400; font-size: 38px; line-height: 1.15; } #wyr-content.wyr-design.wyrd-summerCamp:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status::before { content: ''; display: block; width: 180px; height: 172px; margin: 0 auto 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 192 183' width='192' height='183'%3E%3Cpath d='M90.0 133.6 C28.6 133.6 20.8 75.2 58.8 40.2 C67.7 68.8 84.4 53.2 90.0 4.0 C103.4 42.8 127.9 53.2 123.5 27.3 C163.7 68.8 152.5 133.6 90.0 133.6 Z' fill='%23F2701F' stroke='%231A1C19' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M90.0 133.6 C49.5 133.6 44.3 92.7 69.4 68.2 C75.3 88.2 86.3 77.3 90.0 42.8 C98.8 70.1 115.0 77.3 112.1 59.2 C138.6 88.2 131.2 133.6 90.0 133.6 Z' fill='%23FFCC4D'/%3E%3Cpath d='M90.0 133.6 C67.9 133.6 65.1 110.2 78.8 96.2 C82.0 107.6 88.0 101.4 90.0 81.7 C94.8 97.3 103.7 101.4 102.1 91.1 C116.5 107.6 112.5 133.6 90.0 133.6 Z' fill='%23FFF0B0'/%3E%3Cg transform='rotate(-14 90.0 131.2)'%3E%3Crect x='18.0' y='119.5' width='144.0' height='23.4' rx='11.7' fill='%237A4A24' stroke='%231A1C19' stroke-width='3.5'/%3E%3Cellipse cx='151.5' cy='131.2' rx='9.8' ry='11.2' fill='%23EBCB94' stroke='%231A1C19' stroke-width='3'/%3E%3Cellipse cx='151.5' cy='131.2' rx='4.7' ry='5.6' fill='none' stroke='%23C99357' stroke-width='2'/%3E%3C/g%3E%3Cg transform='rotate(14 90.0 131.2)'%3E%3Crect x='18.0' y='119.5' width='144.0' height='23.4' rx='11.7' fill='%237A4A24' stroke='%231A1C19' stroke-width='3.5'/%3E%3Cellipse cx='151.5' cy='131.2' rx='9.8' ry='11.2' fill='%23EBCB94' stroke='%231A1C19' stroke-width='3'/%3E%3Cellipse cx='151.5' cy='131.2' rx='4.7' ry='5.6' fill='none' stroke='%23C99357' stroke-width='2'/%3E%3C/g%3E%3Cellipse cx='20' cy='159' rx='14' ry='9' fill='%2377757E' stroke='%231A1C19' stroke-width='3'/%3E%3Cellipse cx='45' cy='159' rx='14' ry='9' fill='%235F5E68' stroke='%231A1C19' stroke-width='3'/%3E%3Cellipse cx='74' cy='159' rx='14' ry='9' fill='%238B8992' stroke='%231A1C19' stroke-width='3'/%3E%3Cellipse cx='103' cy='159' rx='14' ry='9' fill='%2377757E' stroke='%231A1C19' stroke-width='3'/%3E%3Cellipse cx='131' cy='159' rx='14' ry='9' fill='%235F5E68' stroke='%231A1C19' stroke-width='3'/%3E%3Cellipse cx='160' cy='159' rx='14' ry='9' fill='%238B8992' stroke='%231A1C19' stroke-width='3'/%3E%3C/svg%3E") center / 180px 172px no-repeat; transform-origin: 50% 100%; animation: cpwPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both, cpwFlicker 1.9s 0.6s ease-in-out infinite alternate; } #wyr-content.wyr-design.wyrd-summerCamp:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status.cpw-reveal { font-size: 28px; } /* ── The result (after the display's beat) ── It lands 0.75 s after it shows: the WINNER badge pops on over 0.75 s as the display's pennant lands; "TIED!" pops over 0.6 s, 0.15 s sooner, as the display's does (WouldYouRatherSummerCampDesign.phoneResultLanding; the tests read these timings). The Mac's resultsDelayMs is each beat less 0.75 s, so the landing is the projector's, and "Locked in!" still shows first. */ #wyr-content.wyr-design.wyrd-summerCamp #wyr-result[style*="block"] { order: 3; display: flex !important; flex-direction: column; margin-top: 4px; } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result > .wyr-result-labels:nth-child(2) { order: 1; display: flex; gap: 12px; margin: 0; animation: cpwRise 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result > .wyr-result-labels:nth-child(2) span { flex: 1 1 0; min-height: 100px; box-sizing: border-box; padding: 10px 12px; display: flex; align-items: center; justify-content: center; text-align: center; border: 4px solid var(--cp-ink); border-radius: 14px; box-shadow: 0 6px 0 rgba(4, 8, 14, 0.4); background: var(--cp-grain), var(--cp-a); color: var(--cp-cream); text-shadow: var(--cp-shadow); font-weight: 800; font-size: 18px; line-height: 1.12; overflow-wrap: anywhere; } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result > .wyr-result-labels:nth-child(2) .wyr-b-label { background: var(--cp-grain), var(--cp-b); } /* The winner's trail rings gold; the other goes dusk grey. */ #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-win-a) > .wyr-result-labels:nth-child(2) .wyr-a-label, #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-win-b) > .wyr-result-labels:nth-child(2) .wyr-b-label, #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-tie) > .wyr-result-labels:nth-child(2) span { box-shadow: 0 0 0 6px var(--cp-gold), 0 0 0 9px var(--cp-ink), 0 10px 0 rgba(4, 8, 14, 0.4); } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-win-a) > .wyr-result-labels:nth-child(2) .wyr-b-label, #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-win-b) > .wyr-result-labels:nth-child(2) .wyr-a-label { background: var(--cp-grain), var(--cp-grey); color: var(--cp-grey-text); text-shadow: none; } /* The rope: frayed ends, a twist, and the plain cream split line. */ #wyr-content.wyr-design.wyrd-summerCamp .wyr-result-bar { order: 2; position: relative; height: 34px; margin: 24px 30px 14px; overflow: visible; border: 4px solid var(--cp-ink); border-radius: 17px; box-sizing: border-box; box-shadow: 0 5px 0 rgba(4, 8, 14, 0.4); animation: cpwSlide 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-result-bar::before, #wyr-content.wyr-design.wyrd-summerCamp .wyr-result-bar::after { content: ''; position: absolute; top: -2px; width: 22px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cg fill='none' stroke='%23C8A46A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M22 15 Q11 4 1 2'/%3E%3Cpath d='M22 15 Q11 9 1 9'/%3E%3Cpath d='M22 15 Q11 15 1 16'/%3E%3Cpath d='M22 15 Q11 20 1 22'/%3E%3Cpath d='M22 15 Q11 26 1 28'/%3E%3C/g%3E%3C/svg%3E") center / 22px 30px no-repeat; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-result-bar::before { left: -26px; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-result-bar::after { right: -26px; transform: scaleX(-1); } #wyr-content.wyr-design.wyrd-summerCamp .wyr-result-bar .wyr-a-fill, #wyr-content.wyr-design.wyrd-summerCamp .wyr-result-bar .wyr-b-fill { background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 6px, rgba(0, 0, 0, 0.16) 6px 13px), var(--cp-a); border-radius: 13px 0 0 13px; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-result-bar .wyr-b-fill { background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 6px, rgba(0, 0, 0, 0.16) 6px 13px), var(--cp-b); border-radius: 0 13px 13px 0; border-left: 4px solid var(--cp-cream); } #wyr-content.wyr-design.wyrd-summerCamp .wyr-result-bar .wyr-a-fill[style*="width:0%"] + .wyr-b-fill { border-radius: 13px; border-left: none; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-result-bar .wyr-a-fill[style*="width:100%"] { border-radius: 13px; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-result-bar .wyr-a-fill[style*="width:100%"] + .wyr-b-fill { border-left: none; } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-win-a) .wyr-b-fill { background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 6px, rgba(0, 0, 0, 0.16) 6px 13px), var(--cp-grey); } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-win-b) .wyr-a-fill { background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 6px, rgba(0, 0, 0, 0.16) 6px 13px), var(--cp-grey); } /* The tallies on two little signs. */ #wyr-content.wyr-design.wyrd-summerCamp #wyr-result > .wyr-result-labels:nth-child(4) { order: 3; display: flex; justify-content: space-between; gap: 12px; animation: cpwRise 0.6s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result > .wyr-result-labels:nth-child(4) span { padding: 6px 14px 5px; border: 3px solid var(--cp-ink); border-radius: 10px; background: var(--cp-a); color: var(--cp-cream); text-shadow: var(--cp-shadow); font-family: var(--cp-slab); font-weight: 400; font-size: 26px; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result > .wyr-result-labels:nth-child(4) .wyr-b-label { background: var(--cp-b); } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-win-a) > .wyr-result-labels:nth-child(4) .wyr-b-label, #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-win-b) > .wyr-result-labels:nth-child(4) .wyr-a-label { background: var(--cp-grey); } /* The WINNER merit badge, or the TIED! ribbon. */ #wyr-content.wyr-design.wyrd-summerCamp .cpw-icon { order: 4; position: relative; display: flex; justify-content: center; margin-top: 18px; } #wyr-content.wyr-design.wyrd-summerCamp .cpw-badge { position: relative; width: 200px; height: 236px; transform: rotate(-3deg); animation: cpwBadge 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #wyr-content.wyr-design.wyrd-summerCamp .cpw-badge svg { position: absolute; left: 0; top: 0; width: 200px; height: 200px; overflow: visible; } #wyr-content.wyr-design.wyrd-summerCamp .cpw-ribbon { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 210px; height: 58px; box-sizing: border-box; padding-top: 3px; border: 4px solid var(--cp-ink); border-radius: 8px; background: var(--cp-cream); box-shadow: inset 0 0 0 6px var(--cp-cream), inset 0 0 0 8px rgba(43, 27, 14, 0.3), 0 6px 0 rgba(4, 8, 14, 0.45); color: var(--cp-brown); font-family: var(--cp-slab); font-size: 32px; line-height: 1; white-space: nowrap; } #wyr-content.wyr-design.wyrd-summerCamp .cpw-ribbon::before, #wyr-content.wyr-design.wyrd-summerCamp .cpw-ribbon::after { content: ''; position: absolute; top: 12px; width: 34px; height: calc(100% - 4px); z-index: -1; background: var(--cp-berry); border: 4px solid var(--cp-ink); box-sizing: border-box; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); } #wyr-content.wyr-design.wyrd-summerCamp .cpw-ribbon::before { left: -26px; } #wyr-content.wyr-design.wyrd-summerCamp .cpw-ribbon::after { right: -26px; transform: scaleX(-1); } #wyr-content.wyr-design.wyrd-summerCamp .cpw-tie .cpw-ribbon { position: relative; left: auto; bottom: auto; transform: rotate(-4deg); width: 230px; height: 84px; margin: 24px 0 30px; font-size: 48px; animation: cpwTie 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #wyr-content.wyr-design.wyrd-summerCamp .cpw-tie .cpw-ribbon::before, #wyr-content.wyr-design.wyrd-summerCamp .cpw-tie .cpw-ribbon::after { top: 22px; height: calc(100% - 10px); } /* The outcome's words ride on the badge and the ribbon; only "No votes this round" shows as text. */ #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-win-a) .wyr-winner, #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-win-b) .wyr-winner, #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-tie) .wyr-winner { display: none; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-winner { order: 5; margin-top: 26px; color: var(--cp-brown); font-family: var(--cp-slab); font-weight: 400; font-size: 30px; line-height: 1.1; text-align: center; animation: cpwStamp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #wyr-content.wyr-design.wyrd-summerCamp:has(#wyr-result[style*="block"]) .status { margin-top: 30px; color: var(--cp-brown); font-family: var(--cp-slab); font-weight: 400; font-size: 36px; line-height: 1.1; animation: cpwRise 0.6s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result.cpw-same *, #wyr-content.wyr-design.wyrd-summerCamp #wyr-result.cpw-same, #wyr-content.wyr-design.wyrd-summerCamp:has(#wyr-result.cpw-same[style*="block"]) .status { animation: none; } /* Long options (up to 60 characters): the result gives back height. */ #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-long) > .wyr-result-labels:nth-child(2) span { font-size: 15px; min-height: 112px; padding: 8px 10px; } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-long) .cpw-badge { width: 170px; height: 204px; } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-long) .cpw-badge svg { width: 170px; height: 170px; } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-long) .cpw-badge .cpw-ribbon { width: 190px; height: 52px; font-size: 28px; } /* Short screens (an SE in Safari): the whole question still fits. */ @media (max-height: 720px) { #wyr-content.wyr-design.wyrd-summerCamp { padding-bottom: 16px; } #wyr-content.wyr-design.wyrd-summerCamp .question { height: 78px; padding-bottom: 20px; margin-bottom: 10px; font-size: 23px; } #wyr-content.wyr-design.wyrd-summerCamp .vote-timer.show { margin: 24px 2px 6px; } #wyr-content.wyr-design.wyrd-summerCamp .vote-timer-text { width: 68px; height: 68px; background-size: auto, 68px 68px, auto; } #wyr-content.wyr-design.wyrd-summerCamp .vote-timer-text::before { left: 10px; bottom: 54px; width: 48px; height: 45px; background-size: 48px 45px; } #wyr-content.wyr-design.wyrd-summerCamp .vote-timer-text::after { font-size: 19px; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-option-btn { min-height: 118px; font-size: 22px; padding: 12px 20px; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-or { width: 56px; height: 56px; margin: 10px auto; font-size: 21px; background: radial-gradient(circle, var(--cp-cream) 0 18px, var(--cp-ink) 18px 20px, rgba(0, 0, 0, 0) 20px), repeating-conic-gradient(var(--cp-gold) 0 6deg, #B07F24 6deg 9deg); } #wyr-content.wyr-design.wyrd-summerCamp .status { margin-top: 16px; font-size: 17px; } #wyr-content.wyr-design.wyrd-summerCamp:has(#wyr-options[style*="none"]):has(#wyr-result[style*="none"]) .status { margin-top: 34px; font-size: 32px; } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result > .wyr-result-labels:nth-child(2) span { min-height: 84px; font-size: 16px; } #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-long) > .wyr-result-labels:nth-child(2) span { min-height: 96px; font-size: 13px; } #wyr-content.wyr-design.wyrd-summerCamp .wyr-result-bar { margin: 18px 30px 10px; } #wyr-content.wyr-design.wyrd-summerCamp .cpw-badge, #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-long) .cpw-badge { width: 150px; height: 182px; } #wyr-content.wyr-design.wyrd-summerCamp .cpw-badge svg, #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-long) .cpw-badge svg { width: 150px; height: 150px; } #wyr-content.wyr-design.wyrd-summerCamp .cpw-ribbon, #wyr-content.wyr-design.wyrd-summerCamp #wyr-result:has(.cpw-long) .cpw-badge .cpw-ribbon { width: 180px; height: 50px; font-size: 27px; } #wyr-content.wyr-design.wyrd-summerCamp .cpw-tie .cpw-ribbon { width: 210px; height: 72px; font-size: 42px; margin: 16px 0 24px; } #wyr-content.wyr-design.wyrd-summerCamp:has(#wyr-result[style*="block"]) .status { margin-top: 24px; font-size: 30px; } } @media (prefers-reduced-motion: reduce) { #wyr-content.wyr-design.wyrd-summerCamp *, #wyr-content.wyr-design.wyrd-summerCamp *::before, #wyr-content.wyr-design.wyrd-summerCamp *::after { animation: none !important; transition: none !important; } } /* Motion: transforms only (the boards' hung, slid and stamped signs). */ @keyframes cpwHang { from { transform: translateY(-460px) rotate(-9deg); } } @keyframes cpwRise { from { transform: translateY(460px) rotate(4deg); } } @keyframes cpwSlide { from { transform: translateX(-460px) rotate(-6deg); } } @keyframes cpwPop { from { transform: scale(0) rotate(-25deg); } } @keyframes cpwPatch { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0deg); } } @keyframes cpwStamp { from { transform: scale(0.4) rotate(-8deg); } } @keyframes cpwBadge { from { transform: rotate(-28deg) scale(0); } to { transform: rotate(-3deg) scale(1); } } @keyframes cpwTie { from { transform: rotate(-29deg) scale(0); } to { transform: rotate(-4deg) scale(1); } } @keyframes cpwBump { 50% { transform: scale(1.18); } } @keyframes cpwFlicker { from { transform: scale(1.02, 0.98); } to { transform: scale(0.98, 1.03); } }