/* ── Shared popup / bottom-sheet overlay ── */
.popup-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  z-index: 50; display: none;
  align-items: flex-end; justify-content: center;
}
.popup-overlay.open { display: flex; }

.popup-sheet {
  width: 100%; background: var(--dark3);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid rgba(200,85,255,0.2);
  padding: 20px 20px calc(36px + env(safe-area-inset-bottom, 0px));
  max-height: 80%;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.popup-handle   { width: 40px; height: 4px; background: var(--dark4); border-radius: 4px; margin: 0 auto 16px; }
.popup-title    { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; margin-bottom: 4px; }
.popup-subtitle { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }

/* ── Team option rows (used in team popup & team selection) ── */
.team-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 14px;
  background: var(--surface); border: 1.5px solid var(--dark4);
  margin-bottom: 8px; cursor: pointer; transition: all 0.2s;
}
.team-option:hover    { border-color: var(--neon-dim); }
.team-option.selected { border-color: var(--neon); background: rgba(200,85,255,0.1); }
.team-avatar  { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--neon-dim), var(--neon)); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.team-name    { font-weight: 700; font-size: 14px; }
.team-members { font-size: 11px; color: var(--text-muted); }

/* ── Confirm button shared across popups ── */
.confirm-team-btn {
  width: 100%; margin-top: 12px; padding: 14px;
  background: linear-gradient(135deg, var(--neon-dim), var(--neon));
  border: none; border-radius: 12px;
  font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1.5px; color: white;
  cursor: pointer; box-shadow: 0 4px 16px rgba(200,85,255,0.35);
}