/* Screen 9: Bottle Pool
   A touch more social and energetic than Rewards: venue imagery behind a
   glowing progress ring, avatar groups, live activity. Still violet-first. */

.bp-scroll {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: var(--nav-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.bp-scroll::-webkit-scrollbar { display: none; }
.bp-content {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 4px;
  padding-bottom: 40px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- Hero ---------- */
.bp-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 18px 18px 22px;
  border-radius: 30px;
  border: 1px solid rgba(185, 139, 255, 0.45);
  box-shadow: 0 0 44px rgba(157, 92, 255, 0.25);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  animation: iv-in 0.4s ease;
}
.bp-hero-bg { position: absolute; inset: 0; z-index: -2; }
.bp-hero-bg video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.2); }
.bp-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(18, 12, 30, 0.35), rgba(8, 6, 14, 0.88) 80%),
    linear-gradient(to bottom, rgba(5, 4, 7, 0.3), rgba(5, 4, 7, 0.85));
}
.bp-hero.unlocked { border-color: rgba(210, 182, 255, 0.8); box-shadow: 0 0 60px rgba(157, 92, 255, 0.45); }
.bp-hero-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bp-venue {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(185, 139, 255, 0.5);
}
.bp-when {
  padding: 5px 10px; border-radius: 999px;
  background: rgba(157, 92, 255, 0.3);
  border: 1px solid rgba(210, 182, 255, 0.45);
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
.bp-ring-wrap { position: relative; width: 170px; height: 170px; margin: 16px 0 6px; }
.bp-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.bp-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 10; }
.bp-ring-fill {
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 10; stroke-linecap: round;
  filter: drop-shadow(0 0 8px var(--accent));
  transition: stroke-dashoffset 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bp-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bp-ring-center b { font-family: var(--font-display); font-size: 38px; font-weight: 800; line-height: 1; text-shadow: 0 0 24px rgba(157, 92, 255, 0.6); }
.bp-ring-center span { margin-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-light); }
.bp-reward { margin: 4px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 800; text-transform: uppercase; }
.bp-progress-text { margin: 4px 0 0; font-size: 15px; color: #d9d5e3; font-variant-numeric: tabular-nums; }
.bp-progress-text b { font-size: 18px; color: var(--fg); }
.bp-left { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--accent-light); }
.bp-almost, .bp-unlocked-tag {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(157, 92, 255, 0.3);
  border: 1px solid rgba(210, 182, 255, 0.5);
  font-size: 12px; font-weight: 800;
}
.bp-unlocked-tag { background: var(--accent); box-shadow: 0 0 20px var(--glow); }
.bp-unlocked-tag svg { width: 14px; height: 14px; }

/* ---------- People ---------- */
.bp-people { display: flex; flex-direction: column; gap: 12px; }
.bp-people-top { display: flex; align-items: center; justify-content: space-between; }
.bp-faces { display: flex; }
.bp-face {
  width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  margin-left: -12px;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px rgba(185, 139, 255, 0.35);
  font-size: 15px; font-weight: 800; color: #fff;
  flex: none;
}
.bp-face:first-child { margin-left: 0; }
.bp-face img { width: 100%; height: 100%; object-fit: cover; }
.bp-face.initials { background: linear-gradient(135deg, var(--a1), var(--a2)); }
.bp-face.you { background: linear-gradient(135deg, #ff6fb5, #7a35e8); box-shadow: 0 0 0 2px var(--accent-light), 0 0 14px var(--glow); animation: bp-pop 0.5s ease; }
.bp-face.more { background: #241f33; color: var(--accent-light); font-size: 12px; }
@keyframes bp-pop { from { transform: scale(0.4); opacity: 0; } }
.bp-known { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #d9d5e3; }
.bp-known svg { flex: none; width: 16px; height: 16px; color: var(--accent-light); }
.bp-known b { color: var(--fg); }
.bp-activity { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.bp-activity li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: #d9d5e3; }
.bp-activity li.you { color: var(--accent-light); }
.bp-activity b { color: var(--fg); font-weight: 800; }
.bp-activity em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ---------- Contribution ---------- */
.bp-contrib { display: flex; flex-direction: column; gap: 12px; border-color: rgba(185, 139, 255, 0.35); }
.bp-contrib-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bp-balance { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600; }
.bp-balance svg { width: 15px; height: 15px; color: var(--accent-light); }
.bp-balance b { color: var(--fg); font-size: 15px; }
.bp-amounts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.chip.bp-amount { justify-content: center; padding: 10px 4px; font-size: 15px; font-variant-numeric: tabular-nums; }
.chip.bp-amount.on::before { display: none; }
.bp-stepper {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 8px; border-radius: 16px; background: #17131f; border: 1px solid var(--line);
}
.bp-stepper button { width: 38px; height: 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 20px; font-weight: 700; }
.bp-stepper b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; }
.bp-stepper span { font-size: 13px; color: var(--muted); }
.bp-note { margin: 0; font-size: 13px; font-weight: 700; color: var(--accent-light); }
.bp-preview { margin: 0; }
.bp-neg { color: var(--muted) !important; }
.bp-cta { min-height: 52px; border-radius: 16px; }
.bp-short { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bp-short p { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.bp-fine { margin: 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.bp-contrib.done .vd-label svg { width: 14px; height: 14px; }
.bp-done-text { margin: 0; font-size: 14px; color: #d9d5e3; line-height: 1.5; }

/* ---------- Pool cards ---------- */
.bp-card {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px 10px 10px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.bp-card.almost { border-color: rgba(185, 139, 255, 0.5); box-shadow: 0 0 18px rgba(157, 92, 255, 0.18); }
.bp-card .rw-card-img { grid-row: auto; height: 86px; }
.bp-card-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.bp-card-text b { font-size: 15px; font-weight: 800; }
.bp-card-text .rw-progress { width: 100%; height: 6px; margin: 4px 0 2px; }
.bp-card-meta { font-size: 12px; color: #d9d5e3; font-weight: 600; font-variant-numeric: tabular-nums; }
.bp-card-left { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--accent-light); }
.bp-card-left svg { width: 12px; height: 12px; }
.bp-card-action .rw-btn { display: inline-flex; align-items: center; gap: 4px; }
.bp-card-action .rw-btn svg { width: 13px; height: 13px; }

/* ---------- My pools ---------- */
.bp-mine-list { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.bp-mine { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; text-align: left; }
.bp-mine + .bp-mine { border-top: 1px solid var(--line); }
.bp-mine-text, .bp-mine-right { display: flex; flex-direction: column; gap: 2px; }
.bp-mine-right { align-items: flex-end; }
.bp-mine b { font-size: 14px; font-weight: 800; }
.bp-mine-right b { color: var(--accent-light); font-variant-numeric: tabular-nums; }
.bp-mine span span, .bp-mine-text span, .bp-mine-right span { font-size: 12px; color: var(--muted); }
.bp-mine.past b { color: var(--muted); }
.bp-mine.past .bp-mine-text b { color: #d9d5e3; }

/* ---------- Sheets ---------- */
.cp-sheet-actions.single { grid-template-columns: 1fr; }
.bp-unlock-line { margin: -4px 0 0; font-size: 14px; color: #d9d5e3; }
.bp-pass-people { margin: -6px 0 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #d9d5e3; }
.bp-invite ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.bp-invite li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bp-invite li:last-child { border-bottom: 0; }
.bp-invite li img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.bp-invite li .bp-face { margin-left: 0; }
.bp-invite-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bp-invite-text b { font-size: 15px; font-weight: 800; }
.bp-invite-text span { font-size: 12px; color: var(--muted); }
.bp-sent { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--accent-light); }
.bp-sent svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .bp-ring-fill { transition: none; }
  .bp-face.you, .bp-hero { animation: none; }
}