/* The Last $20 — campfire chat.
   Scene: a cabinet with a fire in it. The same laminate cabinet as how-to-buy and tell-your-story,
   the feed is a dark screen inside it, the only warm light is the amber the rest of the site already
   uses. Everything is scoped under body.campfire so nothing leaks to the other pages.
   Rules this file keeps:
   - no new palette: --amber, --cream, --smoke, --red, --bill-text from hero.css;
   - nothing under 14px; the one animation (the flame) stops under prefers-reduced-motion;
   - every control is at least 44px tall and has a visible focus ring. */

body.campfire {
  --screen: #0a110c;
  --line: rgba(233, 222, 195, .16);
  --field-edge: rgba(234, 223, 196, .42);
}

/* keyboard focus: 3px cream ring, the same as the nav buttons */
body.campfire main a:focus-visible,
body.campfire main button:focus-visible,
body.campfire main input:focus-visible,
body.campfire .cf-feed:focus-visible {
  outline: 3px solid var(--cream); outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(12, 16, 14, .9);
}

/* ── the two notices: prominent, flat, not dressed up ───────────────── */
body.campfire .cf-notices { display: grid; gap: var(--s-2); margin-top: var(--s-4); max-width: 70ch; }
body.campfire .cf-warn,
body.campfire .cf-rules {
  margin: 0; padding: 14px 18px; border-radius: var(--r-2);
  font-size: 17px; line-height: 1.55; background: #141a16;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
}
body.campfire .cf-warn { border-left: 4px solid var(--red); color: #f1e8d2; }
body.campfire .cf-warn strong { color: #ff9b83; font-weight: 800; }
body.campfire .cf-rules { border-left: 4px solid var(--amber); font-family: var(--mono); color: var(--cream); }
body.campfire .cf-rules-head {
  display: block; margin-bottom: 2px;
  font: 800 14px/1.3 var(--type); letter-spacing: .14em; text-transform: uppercase; color: #ffca79;
}

/* ── the cabinet ─────────────────────────────────────────────────────── */
body.campfire .cf-cab { overflow: hidden; }
body.campfire .cf-cab .cab-head { display: flex; align-items: center; gap: 12px; }

/* a small flame: three stacked blobs, CSS only */
body.campfire .cf-flame {
  position: relative; flex: none; width: 16px; height: 20px;
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 78%, #fff1c2 0 18%, #ffc65f 36%, #f2a93b 58%, #d9452b 86%);
  box-shadow: 0 0 14px rgba(242, 169, 59, .7);
  transform-origin: 50% 90%;
  animation: cf-flicker 1.6s ease-in-out infinite alternate;
}
@keyframes cf-flicker {
  0%   { transform: scale(1, 1) rotate(-2deg); opacity: .95; }
  40%  { transform: scale(.94, 1.08) rotate(2deg); opacity: 1; }
  70%  { transform: scale(1.04, .95) rotate(-1deg); opacity: .9; }
  100% { transform: scale(.97, 1.04) rotate(1deg); opacity: 1; }
}

/* ── the feed: a dark screen ─────────────────────────────────────────── */
body.campfire .cf-room { position: relative; margin: 18px 18px 0; }
body.campfire .cf-feed {
  list-style: none; margin: 0; padding: 10px 0;
  height: clamp(300px, 52vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(90% 60% at 50% 110%, rgba(242, 169, 59, .10), transparent 70%),
    var(--screen);
  border-radius: var(--r-2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 2px 14px rgba(0, 0, 0, .8);
  scrollbar-color: rgba(233, 222, 195, .3) transparent;
}
body.campfire .cf-msg {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
  grid-template-areas: "who time" "text text";
  padding: 8px 16px; border-bottom: 1px solid rgba(233, 222, 195, .06);
}
body.campfire .cf-who {
  grid-area: who; min-width: 0; overflow-wrap: anywhere;
  font: 700 15px/1.4 var(--mono); color: #ffca79;
}
body.campfire .cf-mine .cf-who { color: #9fd06f; }
body.campfire .cf-text {
  grid-area: text; overflow-wrap: anywhere; white-space: pre-wrap;
  font-size: 17px; line-height: 1.5; color: #ece6d8;
}
body.campfire .cf-time { grid-area: time; font: 400 14px/1.4 var(--mono); color: #a9b3a3; }

body.campfire .cf-empty {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px;
  text-align: center; font: italic 400 18px/1.5 var(--type); color: var(--smoke);
  pointer-events: none;
}
body.campfire .cf-empty[hidden] { display: none; }

body.campfire .cf-jump {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-1); cursor: pointer;
  font: 700 15px/1 var(--type); color: #1d1406; text-shadow: none;
  background: linear-gradient(180deg, #ffc65f, #eda233);
  box-shadow: 0 2px 0 #8c5b13, 0 10px 20px -8px rgba(0, 0, 0, .9);
}
body.campfire .cf-jump[hidden] { display: none; }

body.campfire .cf-conn { min-height: 0; margin: 8px 0 0; font-size: 15px; color: #ff9b83; }
body.campfire .cf-conn:empty { margin: 0; }

/* ── the two forms ───────────────────────────────────────────────────── */
body.campfire .cf-seat,
body.campfire .cf-say { padding: 18px 18px 20px; }
body.campfire .cf-seat[hidden], body.campfire .cf-say[hidden] { display: none; }

body.campfire .cf-form-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 12px; font: 800 14.5px/1.3 var(--type); letter-spacing: .14em; text-transform: uppercase; color: #ffca79;
}
body.campfire .cf-me { font: 700 16px/1.3 var(--mono); letter-spacing: 0; text-transform: none; color: #9fd06f; }
body.campfire .cf-stand {
  min-height: 44px; padding: 0 14px; margin-left: auto; cursor: pointer;
  font: 600 15px/1 var(--type); letter-spacing: .01em; text-transform: none; color: var(--cream);
  background: transparent; border: 2px solid var(--field-edge); border-radius: var(--r-1);
}
body.campfire .cf-stand:hover { border-color: var(--cream); }

body.campfire label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 17px; color: var(--cream); }
body.campfire .cf-req { font-weight: 400; color: var(--smoke); }

body.campfire .cf-row { display: flex; gap: 12px; align-items: stretch; }
body.campfire .cf-row input {
  flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 12px 14px;
  font: 400 17px/1.3 var(--mono); color: var(--cream); text-shadow: none;
  background: var(--screen); border: 2px solid var(--field-edge); border-radius: var(--r-1);
}
body.campfire .cf-row input::placeholder { color: #8f9a8a; }
body.campfire .cf-row input:hover { border-color: rgba(234, 223, 196, .7); }
body.campfire .cf-row .btn { flex: none; min-width: 128px; border: 0; cursor: pointer; }
body.campfire .cf-row .btn:disabled {
  cursor: not-allowed; opacity: .45; transform: none; filter: saturate(.4);
}

body.campfire .cf-help { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--smoke); }
body.campfire .cf-err { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: #ff9b83; }
body.campfire .cf-err:empty { margin: 0; }

body.campfire .cf-small { margin: var(--s-3) 0 0; max-width: 70ch; font-size: 15px; line-height: 1.55; color: var(--smoke); }

@media (max-width: 599px) {
  body.campfire .cf-room { margin: 14px 12px 0; }
  body.campfire .cf-seat, body.campfire .cf-say { padding: 16px 12px 18px; }
  body.campfire .cf-row { flex-direction: column; }
  body.campfire .cf-row .btn { width: 100%; }
  body.campfire .cf-msg { padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.campfire .cf-flame { animation: none; }
}