/* Live Responses · Summer Camp phone skin ("Campfire Trail", owner decision
   2026-10-07): the Holiday Themes canvas's CP-LR-Phone and Anim boards. Every
   rule is scoped to #qa-content.responses-design.lrd-summerCamp,
   #toast.responses-design.lrd-summerCamp or
   #waiting-message.responses-design.lrd-summerCamp.lr-ended, so no other
   screen or feature is touched; the classic screens never match.

   Tent canvas under a dusk header (the moon, a few stars, the pine line),
   the prompt painted on a pine-green trail sign, the response box a cream
   card in an ink frame, Submit Response a goldenrod sign (dusk grey while
   paused), "My Responses" cards with a painted status tag (goldenrod
   Pending, pine Approved), the sort bar as two planks (pine for the one in
   use), and every response a light pine plank with its vote pill on the
   left: the HOST's reaction emoji (`.qa-response-emoji`, never a drawn
   heart or thumb, owner decision 2026-10-07) and the count in Alfa Slab
   One's fixed cells, gold once voted. Paused: a red sign with a pause patch
   swings up where the form was. The toast is a pine sign with a check
   patch ("Sent!"). The ended screen is the waiting campfire. Alfa Slab One
   for the signs, Barlow ("Sidekick Trivia Barlow") for every other word.
   The colours are ShowThemePalettes.swift's SummerCampPalette. Transforms
   only; no phone timing (a pause, an approval and the end show at once). */

@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'); }

#qa-content.responses-design.lrd-summerCamp,
#waiting-message.responses-design.lrd-summerCamp.lr-ended,
#toast.responses-design.lrd-summerCamp {
    --lrc-ink: #2B1B0E; --lrc-line: #1A1C19; --lrc-cream: #FFF7E8; --lrc-paper: #FFFBF2; --lrc-canvas: #F6EEDB;
    --lrc-wood: #EBCB94; --lrc-wood-l: #F4DCAE; --lrc-gold: #F5B532; --lrc-pine: #2C7A48; --lrc-golden: #9A7209;
    --lrc-red: #B4332A; --lrc-dusk: #B3B0BE; --lrc-muted: #6A5440;
    --lrc-shadow: rgba(4, 8, 14, 0.45);
    font-family: 'Sidekick Trivia Barlow', 'Barlow', system-ui, sans-serif;
}
#qa-content.responses-design.lrd-summerCamp,
#waiting-message.responses-design.lrd-summerCamp.lr-ended {
    position: relative;
    min-height: calc(100dvh - 40px);
    padding: 112px 16px 22px;
    border-radius: 26px;
    overflow: hidden;
    font-weight: 700;
    color: var(--lrc-ink);
    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(--lrc-canvas);
}
/* The dusk header: the sky, the moon, a few stars and the pine line. */
#qa-content.responses-design.lrd-summerCamp::before,
#waiting-message.responses-design.lrd-summerCamp.lr-ended::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 96px; pointer-events: none;
    border-bottom: 4px solid var(--lrc-line);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 40' preserveAspectRatio='none'%3E%3Cpath fill='%230B1418' d='M0 40 L0 30 L6 14 L12 30 L14 30 L22 6 L30 30 L33 30 L40 16 L47 30 L50 30 L58 2 L66 30 L69 30 L76 18 L83 30 L86 30 L94 8 L102 30 L105 30 L112 15 L119 30 L121 30 L127 10 L130 22 L130 40 Z'/%3E%3C/svg%3E") 0 100% / 130px 40px repeat-x,
        radial-gradient(circle at calc(100% - 52px) 34px, #FCEFC8 0 10px, rgba(0, 0, 0, 0) 10.5px),
        radial-gradient(circle at 16% 28px, rgba(255, 243, 208, 0.9) 0 1.5px, rgba(0, 0, 0, 0) 2px),
        radial-gradient(circle at 31% 18px, rgba(255, 243, 208, 0.9) 0 1.3px, rgba(0, 0, 0, 0) 1.8px),
        radial-gradient(circle at 69% 22px, rgba(255, 243, 208, 0.9) 0 1.5px, rgba(0, 0, 0, 0) 2px),
        linear-gradient(180deg, #1B2549 0%, #3A3768 55%, #B9644F 100%);
}
/* The moon's crescent: the sky's colour bites into the disc. */
#qa-content.responses-design.lrd-summerCamp::after,
#waiting-message.responses-design.lrd-summerCamp.lr-ended::after {
    content: ''; position: absolute; top: 21px; right: 42px; width: 20px; height: 20px; border-radius: 50%;
    background: #222D55; pointer-events: none;
}
/* A column, so the paused sign takes the form's place. */
#qa-content.responses-design.lrd-summerCamp:not([style*="none"]) { display: flex !important; flex-direction: column; }

/* ── The prompt: painted on a pine-green trail sign ── */
#qa-content.responses-design.lrd-summerCamp #qa-title {
    order: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 92px; margin: 0 0 16px; padding: 12px 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0 4px, rgba(0, 0, 0, 0) 4px) 12px 5px / calc(100% - 24px) 4px no-repeat,
        var(--lrc-pine);
    color: var(--lrc-cream);
    border: 4px solid var(--lrc-line); border-radius: 14px;
    box-shadow: 0 8px 0 var(--lrc-shadow);
    font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; font-size: 23px; line-height: 1.14; text-align: center;
    text-wrap: balance; overflow-wrap: anywhere;
    text-shadow: 0 2px 0 rgba(10, 12, 10, 0.45);
    animation: lrcDrop 0.75s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#qa-content.responses-design.lrd-summerCamp #qa-submitted-msg,
#qa-content.responses-design.lrd-summerCamp #qa-profanity-error { order: 2; }

/* ── Paused: a red sign with a pause patch, swung up where the form was ── */
#qa-content.responses-design.lrd-summerCamp #qa-paused-banner { order: 3; }
#qa-content.responses-design.lrd-summerCamp #qa-paused-banner.show {
    display: flex; align-items: center; gap: 14px;
    min-height: 104px; margin: 2px 2px 18px; padding: 0 16px;
    background: var(--lrc-red); color: var(--lrc-cream);
    border: 4px solid var(--lrc-line); border-radius: 14px;
    box-shadow: 0 8px 0 var(--lrc-shadow);
    font-weight: 700; font-size: 18px; line-height: 1.2; text-align: left;
    transform: rotate(-2deg);
    animation: lrcSwing 0.75s cubic-bezier(0.3, 1.35, 0.5, 1) backwards;
}
#qa-content.responses-design.lrd-summerCamp .lrc-patch { flex: 0 0 auto; display: block; }
#qa-content.responses-design.lrd-summerCamp .lrc-paused-words,
#toast.responses-design.lrd-summerCamp .lrc-toast-words { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#qa-content.responses-design.lrd-summerCamp .lrc-paused-head,
#toast.responses-design.lrd-summerCamp .lrc-toast-head {
    font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1;
}

/* ── The form: a cream card, Submit Response a goldenrod sign ── */
#qa-content.responses-design.lrd-summerCamp #qa-submit-form {
    order: 4;
    margin: 0 2px 16px; padding: 0;
    background: none; border: none; box-shadow: none;
}
#qa-content.responses-design.lrd-summerCamp #qa-input {
    display: block; width: 100%; min-height: 104px; height: 104px; padding: 12px 16px;
    background: var(--lrc-paper); color: var(--lrc-ink);
    border: 4px solid var(--lrc-line); border-radius: 14px; box-shadow: inset 0 4px 0 rgba(139, 90, 43, 0.12);
    font-family: inherit; font-weight: 700; font-size: 20px; line-height: 1.25; resize: none;
}
#qa-content.responses-design.lrd-summerCamp #qa-input::placeholder { color: #8C7A66; font-weight: 600; }
#qa-content.responses-design.lrd-summerCamp #qa-input:focus { outline: none; border-color: var(--lrc-pine); }
#qa-content.responses-design.lrd-summerCamp #qa-submit-btn {
    display: block; width: 100%; margin-top: 16px; height: 64px; padding: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0 4px, rgba(0, 0, 0, 0) 4px) 12px 5px / calc(100% - 24px) 4px no-repeat,
        var(--lrc-gold);
    color: var(--lrc-ink);
    border: 4px solid var(--lrc-line); border-radius: 14px; box-shadow: 0 8px 0 var(--lrc-shadow);
    font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; font-size: 25px;
}
#qa-content.responses-design.lrd-summerCamp #qa-submit-btn:active { transform: translateY(4px) scale(0.97); box-shadow: 0 4px 0 var(--lrc-shadow); }
#qa-content.responses-design.lrd-summerCamp #qa-submit-btn:disabled { opacity: 1; background: var(--lrc-dusk); }
#qa-content.responses-design.lrd-summerCamp[data-state="paused"] #qa-submit-btn { background: var(--lrc-dusk); }

/* ── My Responses: cream cards with a painted status tag ── */
#qa-content.responses-design.lrd-summerCamp #qa-my-questions { order: 5; }
#qa-content.responses-design.lrd-summerCamp #qa-my-questions .qa-section-header {
    margin: 2px 0 8px 4px; color: var(--lrc-muted);
    font-weight: 800; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
}
#qa-content.responses-design.lrd-summerCamp #qa-my-questions .qa-question-card {
    display: flex; align-items: center; gap: 10px;
    min-height: 76px; margin: 0 2px 10px; padding: 9px 13px;
    background: var(--lrc-paper); color: var(--lrc-ink);
    border: 3px solid var(--lrc-line); border-radius: 12px; box-shadow: none;
}
#qa-content.responses-design.lrd-summerCamp .lrc-my-text {
    flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 17.5px; line-height: 1.2; overflow-wrap: anywhere;
}
#qa-content.responses-design.lrd-summerCamp .lrc-my-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#qa-content.responses-design.lrd-summerCamp .lrc-badge {
    padding: 4px 9px; border-radius: 8px; border: 2px solid var(--lrc-line);
    background: var(--lrc-golden); color: var(--lrc-cream);
    font-weight: 800; font-size: 13.5px; line-height: 1.05;
    animation: lrcPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#qa-content.responses-design.lrd-summerCamp .lrc-badge.lrc-approved,
#qa-content.responses-design.lrd-summerCamp .lrc-badge.lrc-answered { background: var(--lrc-pine); }
#qa-content.responses-design.lrd-summerCamp .lrc-my-votes { color: var(--lrc-muted); font-weight: 700; font-size: 13.5px; }

/* ── The responses: two planks to sort by, light pine planks ── */
#qa-content.responses-design.lrd-summerCamp #qa-approved-questions { order: 6; }
#qa-content.responses-design.lrd-summerCamp .qa-sort-bar {
    display: flex; gap: 0; margin: 4px 2px 12px; height: 44px; padding: 0;
    background: none; border: 3px solid var(--lrc-line); border-radius: 12px; overflow: hidden;
}
#qa-content.responses-design.lrd-summerCamp .qa-sort-btn {
    flex: 1 1 0; padding: 0; margin: 0;
    background: var(--lrc-wood-l); color: var(--lrc-ink);
    border: none; border-radius: 0;
    font-family: inherit; font-weight: 800; font-size: 17px;
}
#qa-content.responses-design.lrd-summerCamp .qa-sort-btn + .qa-sort-btn { border-left: 3px solid var(--lrc-line); }
#qa-content.responses-design.lrd-summerCamp .qa-sort-btn.active { background: var(--lrc-pine); color: var(--lrc-cream); }
#qa-content.responses-design.lrd-summerCamp #qa-approved-questions .qa-question-card {
    display: flex; align-items: center; gap: 12px;
    min-height: 68px; margin: 0 2px 12px; padding: 8px 12px;
    background: var(--lrc-wood-l); color: var(--lrc-ink);
    border: 3px solid var(--lrc-line); border-radius: 12px; box-shadow: 0 4px 0 rgba(4, 8, 14, 0.3);
}
#qa-content.responses-design.lrd-summerCamp #qa-approved-questions .qa-question-card.entering {
    animation: lrcRise 0.6s cubic-bezier(0.3, 1.35, 0.5, 1) both;
}
/* The vote pill: the host's emoji and the count. */
#qa-content.responses-design.lrd-summerCamp .qa-vote-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    width: 72px; height: 44px; padding: 0;
    background: var(--lrc-paper); color: var(--lrc-ink);
    border: 3px solid var(--lrc-line); border-radius: 10px;
    font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; font-size: 19px; line-height: 1;
    transition: transform 0.08s ease;
}
#qa-content.responses-design.lrd-summerCamp .qa-vote-btn:active { transform: scale(0.92); background: var(--lrc-paper); }
#qa-content.responses-design.lrd-summerCamp .qa-vote-btn.voted { background: var(--lrc-gold); border-color: var(--lrc-line); }
#qa-content.responses-design.lrd-summerCamp .qa-vote-btn.voted .qa-response-emoji { animation: lrcBeat 0.45s ease-out; }
#qa-content.responses-design.lrd-summerCamp .qa-response-emoji { font-family: system-ui, sans-serif; font-size: 18px; line-height: 1; }
#qa-content.responses-design.lrd-summerCamp .qa-response-votes { display: inline-flex; }
/* Fixed digit cells (Alfa Slab One's digits are 0.66 em), two at least. */
#qa-content.responses-design.lrd-summerCamp .qa-response-votes i { display: inline-block; width: 0.66em; font-style: normal; text-align: center; }
#qa-content.responses-design.lrd-summerCamp #qa-approved-questions .qa-question-text {
    flex: 1 1 auto; min-width: 0;
    font-weight: 700; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere;
}
#qa-content.responses-design.lrd-summerCamp .qa-empty {
    padding: 14px 0 0; color: var(--lrc-muted);
    font-weight: 700; font-size: 17px; line-height: 1.3; text-align: center;
}

/* ── The toast: a pine sign with a check patch ── */
#toast.responses-design.lrd-summerCamp {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    min-width: 300px; max-width: calc(100vw - 40px); padding: 0 18px 0 14px; min-height: 96px;
    display: flex; align-items: center; gap: 14px; text-align: left;
    background: var(--lrc-pine); color: var(--lrc-cream);
    border: 4px solid var(--lrc-line); border-radius: 14px;
    box-shadow: 0 8px 0 var(--lrc-shadow);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    font-weight: 700; font-size: 17px; line-height: 1.2;
}
#toast.responses-design.lrd-summerCamp::before { content: none; }
#toast.responses-design.lrd-summerCamp.error { background: var(--lrc-red); }
#toast.responses-design.lrd-summerCamp .lrc-patch { flex: 0 0 auto; display: block; }
#toast.responses-design.lrd-summerCamp.show { animation: lrcToast 0.6s cubic-bezier(0.3, 1.35, 0.5, 1) forwards; }
#toast.responses-design.lrd-summerCamp.hide { animation: lrcToastAway 0.35s cubic-bezier(0.5, 0, 0.75, 0) forwards; }

/* ── Ended: the waiting campfire ── */
#waiting-message.responses-design.lrd-summerCamp.lr-ended.show { display: flex; flex-direction: column; align-items: center; text-align: center; }
#waiting-message.responses-design.lrd-summerCamp.lr-ended .lrc-fire { display: block; margin: 120px auto 0; transform-origin: 50% 100%; animation: lrcFlicker 0.9s ease-in-out infinite alternate; }
#waiting-message.responses-design.lrd-summerCamp.lr-ended .lrc-wait-head {
    margin: 34px 0 0; color: var(--lrc-ink);
    font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1.15;
}
#waiting-message.responses-design.lrd-summerCamp.lr-ended .lrc-wait-sub {
    margin: 18px 0 0; color: var(--lrc-muted); font-weight: 600; font-size: 19px; line-height: 1.3;
}

/* ── A short screen: everything gives back height ── */
@media (max-height: 700px) {
    #qa-content.responses-design.lrd-summerCamp,
    #waiting-message.responses-design.lrd-summerCamp.lr-ended { padding: 96px 14px 16px; }
    #qa-content.responses-design.lrd-summerCamp::before,
    #waiting-message.responses-design.lrd-summerCamp.lr-ended::before { height: 80px; }
    #qa-content.responses-design.lrd-summerCamp::after,
    #waiting-message.responses-design.lrd-summerCamp.lr-ended::after { top: 15px; }
    #qa-content.responses-design.lrd-summerCamp #qa-title { min-height: 0; margin-bottom: 12px; padding: 10px 14px; font-size: 20px; }
    #qa-content.responses-design.lrd-summerCamp #qa-paused-banner.show { min-height: 84px; margin-bottom: 14px; font-size: 16px; }
    #qa-content.responses-design.lrd-summerCamp #qa-input { min-height: 72px; height: 72px; font-size: 18px; }
    #qa-content.responses-design.lrd-summerCamp #qa-submit-btn { height: 54px; margin-top: 12px; font-size: 22px; }
    #qa-content.responses-design.lrd-summerCamp #qa-submit-form { margin-bottom: 12px; }
    #qa-content.responses-design.lrd-summerCamp .qa-sort-bar { height: 38px; margin-bottom: 10px; }
    #qa-content.responses-design.lrd-summerCamp #qa-approved-questions .qa-question-card { min-height: 58px; margin-bottom: 9px; padding: 6px 10px; }
    #qa-content.responses-design.lrd-summerCamp .qa-vote-btn { width: 66px; height: 40px; font-size: 17px; }
    #qa-content.responses-design.lrd-summerCamp #qa-approved-questions .qa-question-text { font-size: 15.5px; }
    #waiting-message.responses-design.lrd-summerCamp.lr-ended .lrc-fire { margin-top: 70px; }
}

@media (prefers-reduced-motion: reduce) {
    #qa-content.responses-design.lrd-summerCamp *,
    #waiting-message.responses-design.lrd-summerCamp.lr-ended *,
    #toast.responses-design.lrd-summerCamp { animation: none !important; }
}

@keyframes lrcDrop { from { transform: translateY(-700px) rotate(-6deg); } }
@keyframes lrcSwing { from { transform: translateY(420px) rotate(2deg); } }
@keyframes lrcRise { from { transform: translateY(60px) rotate(3deg); } }
@keyframes lrcPop { from { transform: scale(0); } }
@keyframes lrcBeat { 50% { transform: scale(1.5); } }
@keyframes lrcFlicker { from { transform: scale(1.03, 0.98); } to { transform: scale(0.97, 1.02); } }
@keyframes lrcToast { from { opacity: 1; transform: translateX(-50%) translateY(420px) rotate(2deg); } to { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-2deg); } }
@keyframes lrcToastAway { from { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-2deg); } to { opacity: 1; transform: translateX(-50%) translateY(420px) rotate(2deg); } }