/* bubbles.css · 11-04 (hype-crypto-web lane) · the room on every coin and event page as a live bubble, and the Rooms field on Home.
   Loads after culture.css and draws only with its tokens (--bg2 --card --ink --ink2 --line --acc --acc-ink --acc-soft --live),
   so it follows whichever theme the page is in. Targets ≥ 44 px, text ≥ 13 px, motion off under prefers-reduced-motion. */

#room.bubble { position: relative; border-radius: 24px }

/* the room bar: N here now · the countdown or LIVE · Report */
.bb-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 10px }
.bb-here { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; color: var(--ink) }
.bb-here b { font-size: 17px; font-variant-numeric: tabular-nums }
.bb-here small { font-size: 13px; color: var(--ink2) }
.bb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 var(--live); animation: bbPulse 2s ease-out infinite; flex: none }
.bb-cd, .bb-live { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums }
.bb-cd { background: var(--acc-soft); color: var(--ink) }
.bb-live { background: var(--live); color: var(--acc-ink); letter-spacing: .04em }
.bb-report { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 6px; font-size: 14px; color: var(--ink2) }
.bb-report svg { width: 18px; height: 18px }

/* reactions: four round buttons with real counts; new taps from others float up the room */
.bb-react { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 }
.bb-r { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; min-width: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font: inherit; cursor: pointer; transition: transform .12s ease, border-color .12s ease }
.bb-r > span { font-size: 22px; line-height: 1 }
.bb-r b { font-size: 15px; font-variant-numeric: tabular-nums }
.bb-r:hover { border-color: var(--acc) }
.bb-r:active { transform: scale(.94) }
.bb-r:focus-visible, .bb-po:focus-visible, .bf-b:focus-visible { outline: 3px solid var(--focus, var(--acc)); outline-offset: 2px }
.bb-fly { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2 }
.bb-f { position: absolute; bottom: 18%; font-size: 30px; line-height: 1; opacity: 0; animation: bbUp 2.2s ease-out forwards; will-change: transform, opacity }

/* the host's pinned line */
.bb-pin { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 8px 0; padding: 8px 8px 8px 14px; border-radius: 16px; background: var(--acc-soft); color: var(--ink) }
.bb-pin-k { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700 }
.bb-pin-k svg { width: 16px; height: 16px }
.bb-pin p { margin: 0; font-size: 15px; overflow-wrap: anywhere }
.bb-pin .link, .bb-poll .link { min-height: 44px; padding: 0 8px; font-size: 14px }

/* the host's poll: one vote each, the bars are the real share */
.bb-poll { margin: 8px 0; padding: 12px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--card) }
.bb-poll-q { display: block; margin: 0 0 8px; font-size: 16px; overflow-wrap: anywhere }
.bb-poll-o { display: grid; gap: 8px }
.bb-po { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer }
.bb-po[disabled] { cursor: default }
.bb-po.on { border-color: var(--acc); font-weight: 700 }
.bb-po-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acc-soft); transition: width .35s ease }
.bb-po-t, .bb-po-n { position: relative; z-index: 1; min-width: 0 }
.bb-po-t { overflow-wrap: anywhere }
.bb-po-n { font-variant-numeric: tabular-nums }
.bb-poll-f { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--ink2) }

/* host tools: pin a line, start a poll */
.bb-host { margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 4px }
.bb-host summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none }
.bb-host summary::-webkit-details-marker { display: none }
.bb-host summary svg { width: 16px; height: 16px }
.bb-host form { margin: 6px 0 10px }
.bb-host form.row { display: flex; gap: 8px }
.bb-host input { flex: 1; min-width: 0; min-height: 44px; font-size: 15px }
.bb-pf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.bb-pf input[name=q], .bb-pf .btn { grid-column: 1 / -1 }
.bb-game { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 2px 0 10px }

/* Home: the Rooms field, one floating bubble per room with people in it now, sized by that real count */
.bfield { margin: 8px 0 28px; content-visibility: auto; contain-intrinsic-size: auto 240px }
.bfield[hidden] { display: none !important }
.bf-h { display: flex; align-items: center; margin-bottom: 10px }
.bf-h h2 { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; color: var(--ink) }
.bf-g { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 6px 2px 12px }
.bf-b { position: relative; flex: none; display: grid; place-items: center; width: var(--s, 96px); height: var(--s, 96px); border-radius: 50%; color: var(--ink); text-decoration: none;
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 46%), radial-gradient(circle at 70% 80%, var(--acc-soft), rgba(0, 0, 0, 0) 70%), var(--card);
  border: 1px solid var(--line); box-shadow: inset -8px -12px 26px rgba(0, 0, 0, .28), 0 10px 26px rgba(0, 0, 0, .28);
  animation: bfFloat 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.8s); transition: border-color .15s ease }
.bf-b:hover { border-color: var(--acc) }
.bf-in { display: grid; place-items: center; width: 64%; height: 64%; border-radius: 50%; overflow: hidden }
.bf-in > *, .bf-in .cpic, .bf-in svg, .bf-in img, .bf-in canvas { width: 100%; height: 100%; display: block }
.bf-b > b { position: absolute; right: 2%; bottom: 4%; min-width: 30px; padding: 3px 9px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-size: 13px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(0, 0, 0, .3) }

@keyframes bbPulse { 0% { box-shadow: 0 0 0 0 var(--live) } 70% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0) } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) } }
@keyframes bbUp { 0% { opacity: 0; transform: translate(0, 0) scale(.6) } 15% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--dx, 0), -240px) scale(1.25) } }
@keyframes bfFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

@media (max-width: 420px) { .bb-react { gap: 6px } .bb-r { gap: 6px; padding: 0 6px } .bb-r > span { font-size: 20px } .bf-g { gap: 12px } }
@media (prefers-reduced-motion: reduce) { .bb-dot, .bf-b { animation: none } .bb-f { display: none } .bb-po-bar, .bb-r { transition: none } }

/* STAGE 1104b: the poll results banner (top of the room, 30 minutes after a poll ends) and the poll length select */
.bb-banner { display: grid; gap: 2px; margin: 0 0 10px; padding: 10px 14px; border-radius: 16px; background: var(--acc); color: var(--acc-ink) }
.bb-banner[hidden] { display: none }
.bb-banner b { font-size: 13px; font-weight: 800 }
.bb-banner-q { font-size: 14px; overflow-wrap: anywhere }
.bb-banner [data-bwin] { font-size: 16px; font-weight: 800; overflow-wrap: anywhere }
.bb-pf select { grid-column: 1 / -1; min-height: 44px; font-size: 15px }

/* 11-04 pivot proof (hype-crypto-web): a bubble is too small for a title (its art is 28-56 px wide), so it shows the art and the kind icon only; the name is the link's label and its hover title */
.bf-in .art-t, .bf-in .art-c { display: none }
.bf-in .art { display: grid; place-items: center }
.bf-in .art-ic { position: static; opacity: 1 }