/* "Try it as a member": the demo banner over Claire's member site (demo-join.js).
   The same look as the demo live call's banner (demo-live-room.js), so the two
   demos read as one thing. */
:root { --demo-bar: 0px; }
#demo-banner { position: fixed; left: 0; right: 0; top: 0; z-index: 2147483000; background: #15172b; color: #fff;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; padding: 10px 16px; display: flex; flex-wrap: wrap;
  gap: 4px 14px; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
#demo-banner b { color: #ffd166; }
#demo-banner a { color: #9ec5ff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
#demo-banner .db-cta { margin-left: auto; }
#demo-banner .db-short { display: none; }
#demo-banner .db-back { white-space: nowrap; }
/* Laptops (UX review #7, Alex: "overpowering"): ONE slim line, the phone's own
   "Demo · made-up people · only you see what you do" with More, and the free
   community link on the same line, unchanged. The full note opens under it. */
@media (min-width: 601px) {
  #demo-banner { padding: 6px 16px; gap: 2px 14px; flex-wrap: wrap; }
  #demo-banner .db-short { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
  #demo-banner .db-short span { white-space: nowrap; }
  #demo-banner .db-more { flex: none; min-height: 30px; padding: 0 12px; border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
  #demo-banner .db-cta { white-space: nowrap; }
  #demo-banner .db-cta-back { display: none !important; }
  #demo-banner:not(.db-open) .db-full { display: none; }
  #demo-banner .db-full { order: 3; flex: 1 1 100%; padding: 2px 0 4px; }
}
@media (max-width: 600px) {
  #demo-banner { font-size: 13px; padding: 6px 12px 6px 16px; gap: 2px 10px; }
  #demo-banner .db-short { display: flex; align-items: center; gap: 10px; width: 100%; }
  #demo-banner .db-short span { flex: 1; min-width: 0; }
  #demo-banner .db-more { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
  #demo-banner:not(.db-open) .db-full, #demo-banner:not(.db-open) .db-cta { display: none; }
  #demo-banner .db-cta-back { display: none !important; }
  #demo-banner .db-short .db-back { flex: none; }
  #demo-banner.db-open .db-full { padding-top: 4px; }
}
body { padding-top: var(--demo-bar) !important; }
.topbar { top: var(--demo-bar) !important; }
.lp-bo, .lp-notice, .lp-sheet-bg, .lp-full { top: var(--demo-bar) !important; }
#live-watch.lp-tabfull:not([style*=none]) { top: var(--demo-bar) !important; }
/* The site never asks a visitor for an email (demo-join.js, guardAuth). */
#auth-overlay { display: none !important; }
/* "Join the waiting list", done in place (demo-join.js, TK-35). */
.dj-wl-note { margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
.dj-wl-done { flex: 1 1 100%; margin-left: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(91, 75, 214, .10); }
.dj-wl-done b { display: block; }
/* The Reset's round line (demo-join.js roundNote). */
#dj-round, .dj-round { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #fff4d6; color: #4a3a00;
  font-size: 15px; line-height: 1.5; font-weight: 600; }
@media (prefers-color-scheme: dark) { #dj-round, .dj-round { background: #3a3110; color: #ffe7a3; } }
/* The finished round's step, closed (demo-join.js gameRound, TK-36). */
.dj-closed { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: inherit; }